feat: fixes and improvements to app store icons plugins

src/plugins/built-in/appIcons/index.ts

@@ -1,83 +1,82 @@
-import type { Plugin } from "../../core/types";
+import type { Plugin } from "@/plugins/core/types";
+import { resolveExtensionAssetUrl } from "@/lib/extensionAssetUrl";
 import appstoredark from "@/resources/icons/dlappstore-dark.svg";
 import appstorelight from "@/resources/icons/dlappstore-light.svg";
 import gplayicon from "@/resources/icons/googleplay.svg";
+import styles from "./styles.css?inline";
+
+const APPSTORE =
+  'a[href="https://itunes.apple.com/au/app/seqta-learn/id1143069793"]>img';
+const GOOGLEPLAY =
+  'a[href="https://play.google.com/store/apps/details?id=com.seqta.android.learn"]>img';
+
+const APPSTORE_DARK = resolveExtensionAssetUrl(appstoredark);
+const APPSTORE_LIGHT = resolveExtensionAssetUrl(appstorelight);
+const GOOGLEPLAY_ICON = resolveExtensionAssetUrl(gplayicon);
 
 const appIconPlugin: Plugin<{}, {}> = {
   id: "app-icons",
   name: "App Icons",
-    description: "Fixes the unthemed playstore and app store icons in the SEQTA download page in settings.",
+  description:
+    "Fixes unthemed App Store and Google Play icons on the SEQTA settings download page.",
   version: "1.0.0",
   settings: {},
   disableToggle: true,
+  styles,
 
   run: async (api) => {
-        const appstoreSelector =
-            'a[href="https://itunes.apple.com/au/app/seqta-learn/id1143069793"]>img';
-        const googleplaySelector =
-            'a[href="https://play.google.com/store/apps/details?id=com.seqta.android.learn"]>img';
-
-        let observer: MutationObserver | null = null;
-        let classObserver: MutationObserver | null = null;
+    let domObserver: MutationObserver | null = null;
 
     const updateIcons = () => {
-            const appstore =
-                document.querySelector<HTMLImageElement>(appstoreSelector);
-            const googleplay =
-                document.querySelector<HTMLImageElement>(googleplaySelector);
-
-            const isDark =
-                document.documentElement.classList.contains("dark");
+      const appstore = document.querySelector<HTMLImageElement>(APPSTORE);
+      const googleplay = document.querySelector<HTMLImageElement>(GOOGLEPLAY);
+      const dark = document.documentElement.classList.contains("dark");
 
       if (appstore) {
-                appstore.src = isDark ? appstoredark : appstorelight;
+        appstore.src = dark ? APPSTORE_DARK : APPSTORE_LIGHT;
       }
 
-            if (googleplay && appstore) {
-                googleplay.src = gplayicon;
-                googleplay.style.width = `130px`;
-                googleplay.style.height = `40px`;
-                googleplay.style.objectFit = "contain";
-                googleplay.style.flexShrink = "0";
-                googleplay.style.marginLeft = "8px";
+      if (googleplay) {
+        googleplay.src = GOOGLEPLAY_ICON;
+        googleplay.classList.add("bsplus-googleplay-badge");
       }
     };
 
-        const ensureObserver = () => {
-            observer?.disconnect();
-
-            observer = new MutationObserver(() => {
-                updateIcons();
-            });
-
-            observer.observe(document.body, {
-                childList: true,
-                subtree: true,
-            });
+    const watchDom = () => {
+      domObserver?.disconnect();
+      domObserver = new MutationObserver(updateIcons);
+      domObserver.observe(document.body, { childList: true, subtree: true });
     };
 
-        const onHashChange = () => {
-            if (window.location.hash === "#?page=/settings") {
+    const stopDomWatch = () => {
+      domObserver?.disconnect();
+      domObserver = null;
+    };
+
+    const onSettingsPage = (page: string) => {
+      if (page === "settings") {
         updateIcons();
-                ensureObserver();
+        watchDom();
       } else {
-                observer?.disconnect();
-                observer = null;
+        stopDomWatch();
       }
     };
 
-        window.addEventListener("hashchange", onHashChange);
+    const pageChange = api.seqta.onPageChange(onSettingsPage);
 
-        classObserver = new MutationObserver(updateIcons);
-        classObserver.observe(document.documentElement, {
+    const themeObserver = new MutationObserver(updateIcons);
+    themeObserver.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ["class"],
     });
 
-        if (window.location.hash === "#?page=/settings") {
-            updateIcons();
-            ensureObserver();
-        }
+    onSettingsPage(api.seqta.getCurrentPage());
+
+    return () => {
+      pageChange.unregister();
+      stopDomWatch();
+      themeObserver.disconnect();
+    };
   },
 };
 

src/plugins/built-in/appIcons/styles.css

@@ -0,0 +1,7 @@
+.bsplus-googleplay-badge {
+  width: 130px;
+  height: 40px;
+  object-fit: contain;
+  flex-shrink: 0;
+  margin-left: 8px;
+}