feat: shadow dom to isolate achievements window and custom css refactor

src/main/events/themes/toggle-custom-theme.ts

@@ -1,5 +1,6 @@
 import { themesSublevel } from "@main/level";
 import { registerEvent } from "../register-event";
+import { WindowManager } from "@main/services";
 
 const toggleCustomTheme = async (
   _event: Electron.IpcMainInvokeEvent,
@@ -17,6 +18,8 @@ const toggleCustomTheme = async (
     isActive,
     updatedAt: new Date(),
   });
+
+  WindowManager.notificationWindow?.webContents.send("on-custom-theme-updated");
 };
 
 registerEvent("toggleCustomTheme", toggleCustomTheme);

src/main/events/themes/update-custom-theme.ts

@@ -20,8 +20,10 @@ const updateCustomTheme = async (
   });
 
   if (theme.isActive) {
-    WindowManager.mainWindow?.webContents.send("css-injected", code);
-    WindowManager.notificationWindow?.webContents.send("css-injected", code);
+    WindowManager.mainWindow?.webContents.send("on-custom-theme-updated");
+    WindowManager.notificationWindow?.webContents.send(
+      "on-custom-theme-updated"
+    );
   }
 };
 

src/main/services/hydra-api.ts

@@ -29,7 +29,7 @@ export class HydraApi {
   private static instance: AxiosInstance;
 
   private static readonly EXPIRATION_OFFSET_IN_MS = 1000 * 60 * 5; // 5 minutes
-  private static readonly ADD_LOG_INTERCEPTOR = true;
+  private static readonly ADD_LOG_INTERCEPTOR = false;
 
   private static secondsToMilliseconds(seconds: number) {
     return seconds * 1000;

src/main/services/window-manager.ts

@@ -289,6 +289,21 @@ export class WindowManager {
     const display = screen.getPrimaryDisplay();
     const { width, height } = display.workAreaSize;
 
+    console.log(
+      width,
+      height,
+      this.NOTIFICATION_WINDOW_HEIGHT,
+      this.NOTIFICATION_WINDOW_WIDTH,
+      position
+    );
+
+    if (position === "bottom-left") {
+      return {
+        x: 0,
+        y: height - this.NOTIFICATION_WINDOW_HEIGHT,
+      };
+    }
+
     if (position === "bottom-center") {
       return {
         x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
@@ -310,13 +325,6 @@ export class WindowManager {
       };
     }
 
-    if (position === "bottom-left") {
-      return {
-        x: 0,
-        y: height - this.NOTIFICATION_WINDOW_HEIGHT,
-      };
-    }
-
     if (position === "top-right") {
       return {
         x: width - this.NOTIFICATION_WINDOW_WIDTH,
@@ -372,8 +380,13 @@ export class WindowManager {
     // this.notificationWindow.setVisibleOnAllWorkspaces(true, {
     //   visibleOnFullScreen: true,
     // });
+
     this.notificationWindow.setAlwaysOnTop(true, "screen-saver", 1);
     this.loadNotificationWindowURL();
+
+    if (isStaging) {
+      this.notificationWindow.webContents.openDevTools();
+    }
   }
 
   public static async showAchievementTestNotification() {