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

src/renderer/src/app.tsx

@@ -28,7 +28,7 @@ import { downloadSourcesTable } from "./dexie";
 import { useSubscription } from "./hooks/use-subscription";
 import { HydraCloudModal } from "./pages/shared-modals/hydra-cloud/hydra-cloud-modal";
 
-import { injectCustomCss } from "./helpers";
+import { injectCustomCss, removeCustomCss } from "./helpers";
 import "./app.scss";
 
 export interface AppProps {
@@ -246,17 +246,27 @@ export function App() {
     };
   }, [updateRepacks]);
 
-  useEffect(() => {
-    const loadAndApplyTheme = async () => {
-      const activeTheme = await window.electron.getActiveCustomTheme();
-
-      if (activeTheme?.code) {
-        injectCustomCss(activeTheme.code);
-      }
-    };
-    loadAndApplyTheme();
+  const loadAndApplyTheme = useCallback(async () => {
+    const activeTheme = await window.electron.getActiveCustomTheme();
+    if (activeTheme?.code) {
+      injectCustomCss(activeTheme.code);
+    } else {
+      removeCustomCss();
+    }
   }, []);
 
+  useEffect(() => {
+    loadAndApplyTheme();
+  }, [loadAndApplyTheme]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onCustomThemeUpdated(() => {
+      loadAndApplyTheme();
+    });
+
+    return () => unsubscribe();
+  }, [loadAndApplyTheme]);
+
   const playAudio = useCallback(() => {
     const audio = new Audio(achievementSound);
     audio.volume = 0.2;
@@ -273,14 +283,6 @@ export function App() {
     };
   }, [playAudio]);
 
-  useEffect(() => {
-    const unsubscribe = window.electron.onCssInjected((cssString) => {
-      injectCustomCss(cssString);
-    });
-
-    return () => unsubscribe();
-  }, []);
-
   const handleToastClose = useCallback(() => {
     dispatch(closeToast());
   }, [dispatch]);

src/renderer/src/components/achievements/notification/achievement-notification.scss

@@ -141,7 +141,7 @@ $margin-bottom: 28px;
 
 .achievement-notification {
   width: 360px;
-  height: 192px;
+  height: 140px;
   display: flex;
 
   &--top-left {

src/renderer/src/components/achievements/notification/achievement-notification.tsx

@@ -3,10 +3,10 @@ import {
   AchievementNotificationInfo,
 } from "@types";
 import cn from "classnames";
-import "./achievement-notification.scss";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { EyeClosedIcon } from "@primer/octicons-react";
 import Ellipses from "@renderer/assets/icons/ellipses.png";
+import "./achievement-notification.scss";
 
 interface AchievementNotificationProps {
   position: AchievementCustomNotificationPosition;

src/renderer/src/declaration.d.ts

@@ -352,9 +352,7 @@ declare global {
 
     /* Editor */
     openEditorWindow: (themeId: string) => Promise<void>;
-    onCssInjected: (
-      cb: (cssString: string) => void
-    ) => () => Electron.IpcRenderer;
+    onCustomThemeUpdated: (cb: () => void) => () => Electron.IpcRenderer;
     closeEditorWindow: (themeId?: string) => Promise<void>;
   }
 

src/renderer/src/helpers.ts

@@ -55,35 +55,32 @@ export const buildGameAchievementPath = (
 export const darkenColor = (color: string, amount: number, alpha: number = 1) =>
   new Color(color).darken(amount).alpha(alpha).toString();
 
-export const injectCustomCss = (css: string) => {
+export const injectCustomCss = (
+  css: string,
+  target: HTMLElement = document.head
+) => {
   try {
-    const currentCustomCss = document.getElementById("custom-css");
-    if (currentCustomCss) {
-      currentCustomCss.remove();
-    }
+    target.querySelector("#custom-css")?.remove();
 
     if (css.startsWith(THEME_WEB_STORE_URL)) {
       const link = document.createElement("link");
       link.id = "custom-css";
       link.rel = "stylesheet";
       link.href = css;
-      document.head.appendChild(link);
+      target.appendChild(link);
     } else {
       const style = document.createElement("style");
       style.id = "custom-css";
       style.textContent = `
         ${css}
       `;
-      document.head.appendChild(style);
+      target.appendChild(style);
     }
   } catch (error) {
     console.error("failed to inject custom css:", error);
   }
 };
 
-export const removeCustomCss = () => {
-  const currentCustomCss = document.getElementById("custom-css");
-  if (currentCustomCss) {
-    currentCustomCss.remove();
-  }
+export const removeCustomCss = (target: HTMLElement = document.head) => {
+  target.querySelector("#custom-css")?.remove();
 };

src/renderer/src/pages/achievements/notification/achievement-notification.tsx

@@ -5,8 +5,11 @@ import {
   AchievementCustomNotificationPosition,
   AchievementNotificationInfo,
 } from "@types";
-import { injectCustomCss } from "@renderer/helpers";
+import { injectCustomCss, removeCustomCss } from "@renderer/helpers";
 import { AchievementNotificationItem } from "@renderer/components/achievements/notification/achievement-notification";
+import app from "../../../app.scss?inline";
+import styles from "../../../components/achievements/notification/achievement-notification.scss?inline";
+import root from "react-shadow";
 
 const NOTIFICATION_TIMEOUT = 4000;
 
@@ -28,6 +31,8 @@ export function AchievementNotification() {
   const closingAnimation = useRef(-1);
   const visibleAnimation = useRef(-1);
 
+  const [shadowRootRef, setShadowRootRef] = useState<HTMLElement | null>(null);
+
   const playAudio = useCallback(() => {
     const audio = new Audio(achievementSound);
     audio.volume = 0.1;
@@ -132,31 +137,45 @@ export function AchievementNotification() {
     }
   }, [achievements]);
 
-  useEffect(() => {
-    const loadAndApplyTheme = async () => {
-      const activeTheme = await window.electron.getActiveCustomTheme();
-      if (activeTheme?.code) {
-        injectCustomCss(activeTheme.code);
-      }
-    };
-    loadAndApplyTheme();
-  }, []);
+  const loadAndApplyTheme = useCallback(async () => {
+    if (!shadowRootRef) return;
+    const activeTheme = await window.electron.getActiveCustomTheme();
+    if (activeTheme?.code) {
+      console.log("injecting custom css");
+      injectCustomCss(activeTheme.code, shadowRootRef);
+    } else {
+      console.log("removing custom css");
+      removeCustomCss(shadowRootRef);
+    }
+  }, [shadowRootRef]);
 
   useEffect(() => {
-    const unsubscribe = window.electron.onCssInjected((cssString) => {
-      injectCustomCss(cssString);
+    loadAndApplyTheme();
+  }, [loadAndApplyTheme]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onCustomThemeUpdated(() => {
+      console.log("onCustomThemeUpdated");
+      loadAndApplyTheme();
     });
 
     return () => unsubscribe();
-  }, []);
-
-  if (!isVisible || !currentAchievement) return null;
+  }, [loadAndApplyTheme]);
 
   return (
-    <AchievementNotificationItem
-      achievement={currentAchievement}
-      isClosing={isClosing}
-      position={position}
-    />
+    <root.div>
+      <style type="text/css">
+        {app} {styles}
+      </style>
+      <section ref={(ref) => setShadowRootRef(ref)}>
+        {isVisible && currentAchievement && (
+          <AchievementNotificationItem
+            achievement={currentAchievement}
+            isClosing={isClosing}
+            position={position}
+          />
+        )}
+      </section>
+    </root.div>
   );
 }

src/renderer/src/pages/settings/aparence/settings-appearance.tsx

@@ -40,7 +40,7 @@ export function SettingsAppearance({
   }, [loadThemes]);
 
   useEffect(() => {
-    const unsubscribe = window.electron.onCssInjected(() => {
+    const unsubscribe = window.electron.onCustomThemeUpdated(() => {
       loadThemes();
     });