Credit french translator, fix up dracula theme slightly, and mitigate a bug causing addThemeToDropdown to get called repeatedly.

public/marketplace/dracula-theme/theme.css

@@ -5,5 +5,5 @@
   --accent-color-brighter: #2d2f3c;
   --text-color: #f8f8f2;
   --text-color-accent: #dddddd;
-  --dropdown-background-color: #6272a4;
+  --dropdown-background-color: #343b52;
 }

src/components/SettingsContent/CreditsTab.astro

@@ -21,6 +21,9 @@ const t = i18n.inferLangUseTranslations(Astro.url);
     <p class="credit-item">
       Rosé Pine Theme - <Link href="https://rosepinetheme.com/" newTab>Rosé Pine</Link>
     </p>
+    <p class="credit-item">
+      French Translations - <Link href="https://github.com/notboeing747" newTab>notboeing747</Link>
+    </p>
   </div>
 </div>
 

src/components/SettingsContent/CustomizationTab.astro

@@ -19,11 +19,11 @@ const languageList = [
 
 <div class="settings-container">
   <div class="setting__theme">
-    <label aria-label="Theme" class="setting-label">{t("settings.customization.theme")}</label>
+    <label for="dropdown__selected-theme" aria-label="Theme" class="setting-label">{t("settings.customization.theme")}</label>
     <Dropdown buttonNameDefault="Alu" localStorageKey="alu__selectedTheme" dropdownList={themeList} id="dropdown__selected-theme" />
   </div>
   <div class="setting__language">
-    <label aria-label="Language" class="setting-label">{t("settings.customization.language")}</label>
+    <label for="dropdown__selected-language" aria-label="Language" class="setting-label">{t("settings.customization.language")}</label>
     <Dropdown buttonNameDefault="English" localStorageKey="alu__selectedLanguage" dropdownList={languageList} id="dropdown__selected-language" />
   </div>
 </div>

src/components/SettingsContent/ProxyTab.astro

@@ -38,19 +38,19 @@ const wispURLList = [
 
 <div class="settings-container">
   <div class="setting__selected-proxy">
-    <label aria-label="Selected Proxy" class="setting-label">{t("settings.proxy.selectedProxy")}</label>
+    <label for="dropdown__selected-proxy" aria-label="Selected Proxy" class="setting-label">{t("settings.proxy.selectedProxy")}</label>
     <Dropdown buttonNameDefault="Ultraviolet" dropdownList={proxyList} localStorageKey="alu__selectedProxy" id="dropdown__selected-proxy" />
   </div>
   <div class="setting__search-engine">
-    <label aria-label="Search Engine" class="setting-label">{t("settings.proxy.searchEngine")}</label>
+    <label for="dropdown__search-engine" aria-label="Search Engine" class="setting-label">{t("settings.proxy.searchEngine")}</label>
     <Dropdown buttonNameDefault="Google" dropdownList={searchEngineList} localStorageKey="alu__searchEngine" id="dropdown__search-engine" />
   </div>
   <div class="setting__open_with">
-    <label aria-label="Open Page With" class="setting-label">{t("settings.proxy.openPageWith")}</label>
+    <label for="dropdown__open-with" aria-label="Open Page With" class="setting-label">{t("settings.proxy.openPageWith")}</label>
     <Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith} localStorageKey="alu__selectedOpenWith" id="dropdown__open-with" />
   </div>
   <div class="setting__wisp_url">
-    <label aria-label="Wisp URL" for="dropdown__wisp-url" class="setting-label">{t("settings.proxy.wispURL")}</label>
+    <label for="dropdown__wisp-url" aria-label="Wisp URL" for="dropdown__wisp-url" class="setting-label">{t("settings.proxy.wispURL")}</label>
     <Dropdown buttonNameDefault="" dropdownList={wispURLList} localStorageKey="alu__selectedWisp" id="dropdown__wisp-url" />
   </div>
   <div class="setting__bare_url">
@@ -58,7 +58,7 @@ const wispURLList = [
     <Input height="50px" inputName="bare-url" />
   </div>
   <div class="setting__transport">
-    <label aria-label="Wisp Transport" class="setting-label">{t("settings.proxy.transport")}</label>
+    <label for="dropdown__transport" aria-label="Wisp Transport" class="setting-label">{t("settings.proxy.transport")}</label>
     <Dropdown buttonNameDefault="Epoxy" dropdownList={transportsList} localStorageKey="alu__selectedTransport" id="dropdown__transport" />
   </div>
 </div>

src/components/ThemeLoader.astro

@@ -1,14 +1,5 @@
 <script>
   import IDBManager from "@components/ts/IDBManager";
-  const tempDB = await IDBManager.loadIDBPromise("AluDB", 1);
-  if (tempDB instanceof Event) {
-    // Something has gone wrong, and the IDB can't be loaded, so we'll delete it and recreate it.
-    IDBManager.DeleteIDB("AluDB");
-    throw new Error("IDB has failed to load - It has been deleted and will be recreated when you refresh the page.");
-  }
-  if (!IDBManager.ValidateStoreExists("InstalledExtensions")) {
-    IDBManager.CreateStore("InstalledExtensions", { keyPath: "slug" });
-  }
 
   function switchTheme() {
     let currentTheme = localStorage.getItem("alu__selectedTheme");
@@ -32,9 +23,6 @@
   const idb = IDBManager.loadIDB("AluDB", 1);
 
   idb.onsuccess = () => {
-    const db = idb.result;
-    IDBManager.SetIDB(db);
-
     let store = IDBManager.GetStore("InstalledExtensions", "readonly");
     store.getAll().onsuccess = (event) => {
       const result = (event.target as IDBRequest).result;
@@ -42,20 +30,20 @@
         result.forEach((extension: IExtensionMetadata) => {
           if (extension.type === "theme" && extension.themeName) {
             // Load theme CSS
-            window.loadedThemeAtob = atob(extension.scriptCopy!);
+            console.log("Attempting to load theme", extension.themeName);
-            loadStyleFromAtob();
+            loadStyleFromAtob(atob(extension.scriptCopy!));
 
             document.addEventListener("astro:after-swap", () => {
-              loadStyleFromAtob();
+              loadStyleFromAtob(atob(extension.scriptCopy!));
             });
           }
         });
       }
     };
   };
-  function loadStyleFromAtob() {
+  function loadStyleFromAtob(style: string) {
-    const style = document.createElement("style");
+    const styleEl = document.createElement("style");
-    style.textContent = window.loadedThemeAtob;
+    styleEl.textContent = style;
-    document.head.appendChild(style);
+    document.head.appendChild(styleEl);
   }
 </script>

src/layouts/Layout.astro

@@ -55,6 +55,16 @@ const { title, optionalPreloads } = Astro.props;
 
       gtag("config", "G-P1JX4G9KSF");
     </script>
+    <script>
+      import IDBManager from "@components/ts/IDBManager";
+      if (!window.idb) {
+        let db = await IDBManager.loadIDBPromise("AluDB", 1);
+        if (db instanceof IDBDatabase) {
+          window.idb = db;
+        }
+      }
+
+    </script>
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <ViewTransitions />

src/pages/[lang]/settings.astro

@@ -55,13 +55,6 @@ export function getStaticPaths() {
       <div id="current-content"></div>
     </div>
   </main>
-  <script>
-    import IDBManager from "@components/ts/IDBManager";
-    let db = await IDBManager.loadIDBPromise("AluDB", 1);
-    if (db instanceof IDBDatabase) {
-      window.idb = db;
-    }
-  </script>
   <script is:inline>
     window.loadedContentStorage = {};
     window.currentlySelectedTab;
@@ -90,7 +83,6 @@ export function getStaticPaths() {
           setTimeout(() => {
             currentContent.innerHTML = window.loadedContentStorage[tabID];
             currentContent.style.opacity = "1";
-            document.dispatchEvent(new CustomEvent("setting-tabChange", { detail: tabID }));
             document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID }));
           }, 250);
         }
@@ -204,19 +196,21 @@ export function getStaticPaths() {
       function addThemeToDropdown(extension) {
         let dropdown = document.getElementById("dropdown__selected-theme-menu");
         if (dropdown) {
+          // TODO: Figure out why addThemeToDropdown is being called 6 times
+          // This when you go from another page and back to settings->customization.
+          let duplicateItem = Array.from(dropdown.children).find((item) => {
+            return item.dataset.setting == extension.themeName;
+          });
+          if (duplicateItem) return;
           let themeItem = document.createElement("li");
           themeItem.classList.add("dropdown-item");
           themeItem.dataset.setting = extension.themeName;
           themeItem.textContent = extension.title;
           dropdown.appendChild(themeItem);
-        } else {
-          setTimeout(() => {
-            addThemeToDropdown(extension);
-          }, 1000);
         }
       }
 
-      document.addEventListener("setting-tabChange", determineListener);
+      document.addEventListener("setting-tabLoad", determineListener);
 
       loadContent("setting-tab-proxy");