Much better i18n in settings, fully translate current options. 🎉

src/components/SettingsContent/CustomizationTab.astro

@@ -1,25 +1,29 @@
 ---
-    import Dropdown from "../Dropdown.astro"
+import Dropdown from "../Dropdown.astro"
 
-    const themeList = [
+import { getLangFromUrl, useTranslations } from "../../i18n/utils"
-        {"name": "Alu", "value": "alu"},
+const lang = getLangFromUrl(Astro.url);
-        {"name": "Macchiato", "value": "macchiato"},
+const t = useTranslations(lang);
-        {"name": "Mocha", "value": "mocha"}
-    ]
 
-    const languageList = [
+const themeList = [
+    {"name": t("settings.customization.theme.Alu"), "value": "alu"},
+    {"name": t("settings.customization.theme.Macchiato"), "value": "macchiato"},
+    {"name": t("settings.customization.theme.Mocha"), "value": "mocha"}
+]
+
+const languageList = [
     {"name": "English", "value": "en"},
     {"name": "日本語", "value": "jp"}
-    ]
+]
 ---
 
 <div class="settings-container">
     <div class="setting__theme">
-        <label class="setting-label">Theme</label>
+        <label class="setting-label">{t("settings.customization.theme")}</label>
         <Dropdown buttonNameDefault="Alu" dropdownList={themeList}, id="dropdown__selected-theme" />
     </div>
     <div class="setting__language">
-        <label class="setting-label">Language</label>
+        <label class="setting-label">{t("settings.customization.language")}</label>
         <Dropdown buttonNameDefault="English" dropdownList={languageList}, id="dropdown__selected-language" />
     </div>
 </div>

src/components/SettingsContent/ProxyTab.astro

@@ -21,9 +21,9 @@ const searchEngineList = [
 ]
 
 const openPageWith = [
-  { "name": t("settings.proxy.openPageWith.embed"), "value": "embed"},
+  { "name": t("settings.proxy.openPageWith.embed"), "value": "embed" },
   { "name": "About:Blank", "value": "about:blank" },
-  { "name": t("settings.proxy.openPageWith.newTab"), "value": "newTab"}
+  { "name": t("settings.proxy.openPageWith.newTab"), "value": "newTab" },
 ]
 ---
 
@@ -41,7 +41,7 @@ const openPageWith = [
       <Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith}, id="dropdown__open-with" />
     </div>
     <div class="setting__bare-url">
-      <label class="setting-label">{t("settings.proxy.bareURL")}</label>
+      <label class="setting-label" for="bare-url-input">{t("settings.proxy.bareURL")}</label>
       <Input inputName="bare-url" />
     </div>
 </div>

src/components/SettingsTablist.astro

@@ -1,16 +1,20 @@
 ---
 import ProxyTab from "./SettingsContent/ProxyTab.astro";
 import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
+
+import { getLangFromUrl, useTranslations } from "../i18n/utils"
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
 ---
 
 <div class="content-hidden">
     <div id="content-setting-tab-proxy">
-        <h1 class="content-setting-header">Proxy</h1>
+        <h1 class="content-setting-header">{t("settings.proxy")}</h1>
         <ProxyTab />
 
     </div>
     <div id="content-setting-tab-customization">
-        <h1 class="content-setting-header">Customization</h1>
+        <h1 class="content-setting-header">{t("settings.customization")}</h1>
         <CustomizationTab />
     </div>
     <div id="content-setting-tab-cloaking">
@@ -116,11 +120,26 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
       }
     }
 
+    function getLocalStorageValue(localStorageItem, dropdownID) {
+      // I was kinda dumb for not doing this earlier.
+      let dropdown = document.getElementById(dropdownID);
+      let dropdownMenu = document.getElementById(dropdownID + "-menu");
+
+      if (dropdown && dropdownMenu) {
+        // Now we find the child that matches localStorageItem.value.
+        let dropdownItem = Array.from(dropdownMenu.children).find((item) => {
+          return JSON.parse(localStorage.getItem(localStorageItem)).value == item.dataset.setting
+        })
+        // Now set the inner text to the name in the dropdownItem.
+        return dropdownItem.innerText
+      }
+    }
+
     function applySavedLocalStorage(localStorageItem, dropdownID) {
       if (localStorage.getItem(localStorageItem)) {
         let dropdown_toggle = document.getElementById(dropdownID);
         if (dropdown_toggle) {
-          dropdown_toggle.innerText = JSON.parse(localStorage.getItem(localStorageItem)).name.charAt(0).toUpperCase() + JSON.parse(localStorage.getItem(localStorageItem)).name.slice(1)
+          dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID)
         }
       }
     }
@@ -128,11 +147,12 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
     function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
       Array.from(item.children).forEach((item) => {
         item.addEventListener('click', () => {
-          // Get position in item.children array
+          let localStorageItemContent = {
-          localStorage.setItem(localStorageItem, JSON.stringify({
             "name": item.innerText,
-            "value": item.dataset.setting
+            "value": item.dataset.setting,
-          }))
+          }
+          console.log(localStorageItem)
+          localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent))
           applySavedLocalStorage(localStorageItem, dropdownID)
           closeDropdown(item.parentElement.id);
           if (typeof optionalCallback == "function") {
@@ -196,7 +216,7 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
           let savedSearxngUrl = localStorage.getItem("alu__searxngUrl")
           if (savedSearxngUrl != undefined) {
             if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/")
-            searxngUrlInput.value = JSON.parse(localStorage.getItem("alu__searxngUrl")).value
+            searxngUrlInput.value = localStorage.getItem("alu__searxngUrl")
           }
           // Proxy settings
           applyInputListeners(bareUrlInput, 'alu__bareUrl')
@@ -255,10 +275,12 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
 }
 .content-setting-header {
   color: var(--text-color);
+  font-weight: 400;
 }
 .setting-label {
   color: var(--text-color);
   font-size: 18px;
+  font-weight: 400;
   /* annoying stuff with label elements. */
   display: block;
   opacity: 1.0;
@@ -266,6 +288,7 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
   margin-inline: 0;
   user-select: none;
   width: 100%;
+  cursor: auto;
 }
 
 .setting__searxng-url {
@@ -278,7 +301,7 @@ label {
   font-weight: 700; 
   cursor: pointer; 
   color: #d8d8d8; 
-  opacity: .4; 
+  opacity: .6; 
   transition: opacity .4s ease-in-out;
   display: block; 
   width: calc(100% - 48px) ;

src/i18n/en.json

@@ -23,5 +23,12 @@
     "settings.proxy.openPageWith.embed": "Embed",
     "settings.proxy.openPageWith.newTab": "New Tab",
     "settings.proxy.searxngURL": "Searx URL",
-    "settings.proxy.bareURL": "Bare URL"
+    "settings.proxy.bareURL": "Bare URL",
+
+    "settings.customization": "Customization",
+    "settings.customization.theme": "Theme",
+    "settings.customization.theme.Alu": "Alu",
+    "settings.customization.theme.Macchiato": "Macchiato",
+    "settings.customization.theme.Mocha": "Mocha",
+    "settings.customization.language": "Language"
 }

src/i18n/jp.json

@@ -22,5 +22,12 @@
     "settings.proxy.searxngURL": "SearxのURL",
     "settings.proxy.openPageWith.embed": "埋め込み",
     "settings.proxy.openPageWith.newTab": "新しいタブ",
-    "settings.proxy.bareURL": "BareのURL"
+    "settings.proxy.bareURL": "BareのURL",
+
+    "settings.customization": "カスタマイズ",
+    "settings.customization.theme": "テーマ",
+    "settings.customization.theme.Alu": "アルー",
+    "settings.customization.theme.Macchiato": "マキアート",
+    "settings.customization.theme.Mocha": "モカ",
+    "settings.customization.language": "言語"
 }

src/layouts/Layout.astro

@@ -6,9 +6,10 @@ import ThemeLoader from '../components/ThemeLoader.astro';
 
 interface Props {
 	title: string;
+  optionalPreloads?: string[];
 }
 
-const { title } = Astro.props;
+const { title, optionalPreloads } = Astro.props;
 
 import i18next from 'i18next';
 ---
@@ -23,7 +24,10 @@ import i18next from 'i18next';
 		<link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet" as="style">
+    {optionalPreloads?.map((item) => {
+      return <link rel="preload" href={item} />
+    })}
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
     <ViewTransitions />

src/pages/[lang]/settings.astro

@@ -10,7 +10,7 @@ export function getStaticPaths () {
 }
 ---
 
-<Layout title="Settings | Alu">
+<Layout title="Settings | Alu" optionalPreloads={["/img/aluwaves.svg", "/img/macchiatowaves.svg", "/img/mochawaves.svg"]}>
     <h1 class="title-text">Settings</h1>
     <SettingsTablist />
 </Layout>