feat: use shadow dom on theme editor for achievement notifications

src/main/services/window-manager.ts

@@ -395,7 +395,16 @@ export class WindowManager {
     this.notificationWindow?.webContents.send(
       "on-achievement-unlocked",
       userPreferences.achievementCustomNotificationPosition ?? "top-left",
-      [generateAchievementCustomNotificationTest(t, language)]
+      [
+        generateAchievementCustomNotificationTest(t, language),
+        generateAchievementCustomNotificationTest(t, language, {
+          isRare: true,
+          isHidden: true,
+        }),
+        generateAchievementCustomNotificationTest(t, language, {
+          isPlatinum: true,
+        }),
+      ]
     );
   }
 

src/renderer/src/pages/theme-editor/theme-editor.tsx

@@ -11,6 +11,9 @@ import { injectCustomCss } from "@renderer/helpers";
 import { AchievementNotificationItem } from "@renderer/components/achievements/notification/achievement-notification";
 import { generateAchievementCustomNotificationTest } from "@shared";
 import { CollapsedMenu } from "@renderer/components/collapsed-menu/collapsed-menu";
+import app from "../../app.scss?inline";
+import styles from "../../components/achievements/notification/achievement-notification.scss?inline";
+import root from "react-shadow";
 
 const notificationVariations = {
   default: "default",
@@ -36,14 +39,15 @@ export default function ThemeEditor() {
   const [notificationAlignment, setNotificationAlignment] =
     useState<AchievementCustomNotificationPosition>("top-left");
 
+  const [shadowRootRef, setShadowRootRef] = useState<HTMLElement | null>(null);
+
   const achievementPreview = useMemo(() => {
     return {
-      achievement: {
-        ...generateAchievementCustomNotificationTest(t, i18n.language),
+      achievement: generateAchievementCustomNotificationTest(t, i18n.language, {
         isRare: notificationVariation === "rare",
         isHidden: notificationVariation === "hidden",
         isPlatinum: notificationVariation === "platinum",
-      },
+      }),
       position: notificationAlignment,
     };
   }, [t, i18n.language, notificationVariation, notificationAlignment]);
@@ -58,10 +62,13 @@ export default function ThemeEditor() {
         if (loadedTheme) {
           setTheme(loadedTheme);
           setCode(loadedTheme.code);
+          if (shadowRootRef) {
+            injectCustomCss(loadedTheme.code, shadowRootRef);
+          }
         }
       });
     }
-  }, [themeId]);
+  }, [themeId, shadowRootRef]);
 
   const handleSave = useCallback(async () => {
     if (theme) {
@@ -69,11 +76,14 @@ export default function ThemeEditor() {
       setHasUnsavedChanges(false);
       setIsClosingNotifications(true);
       setTimeout(() => {
-        injectCustomCss(code);
+        if (shadowRootRef) {
+          injectCustomCss(code, shadowRootRef);
+        }
+
         setIsClosingNotifications(false);
       }, 450);
     }
-  }, [code, theme]);
+  }, [code, theme, shadowRootRef]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -185,11 +195,18 @@ export default function ThemeEditor() {
             />
 
             <div className="theme-editor__notification-preview-wrapper">
-              <AchievementNotificationItem
-                position={achievementPreview.position}
-                achievement={achievementPreview.achievement}
-                isClosing={isClosingNotifications}
-              />
+              <root.div>
+                <style type="text/css">
+                  {app} {styles}
+                </style>
+                <section ref={(ref) => setShadowRootRef(ref)}>
+                  <AchievementNotificationItem
+                    position={achievementPreview.position}
+                    achievement={achievementPreview.achievement}
+                    isClosing={isClosingNotifications}
+                  />
+                </section>
+              </root.div>
             </div>
           </div>
         </CollapsedMenu>

src/shared/index.ts

@@ -179,7 +179,8 @@ export const formatDate = (
 
 export const generateAchievementCustomNotificationTest = (
   t: any,
-  language?: string
+  language?: string,
+  options: { isHidden?: boolean; isRare?: boolean; isPlatinum?: boolean } = {}
 ): AchievementNotificationInfo => {
   return {
     title: t("test_achievement_notification_title", {
@@ -192,8 +193,8 @@ export const generateAchievementCustomNotificationTest = (
     }),
     iconUrl: "https://cdn.losbroxas.org/favicon.svg",
     points: 2440,
-    isHidden: false,
-    isRare: false,
-    isPlatinum: false,
+    isHidden: options.isHidden ?? false,
+    isRare: options.isRare ?? false,
+    isPlatinum: options.isPlatinum ?? false,
   };
 };