Language switching suboptimally implemented.

astro-i18next.config.ts

@@ -1,4 +0,0 @@
-export default {
-	defaultLocale: "en",
-	locales: ["en", "jp"],
-  };

src/components/SettingsTablist.astro

@@ -42,14 +42,25 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
         
     </div>
   </div>
-  <script is:inline>
+  <script>
+    import { navigate } from 'astro:transitions/client';
+
+    // Extend window object to store currently selected tab.
+    declare global {
+        interface Window { 
+          currentlySelectedTab: string,
+          loadedContentStorage: any // Technically this is an object storing strings of html, but im lazy.
+        }
+    }
+
     document.addEventListener("astro:before-swap", () => {
       window.currentlySelectedTab = ""
-      document.removeEventListener('setting-tabChange', determineListener)
+      document.removeEventListener('setting-tabChange', determineListener as EventListener)
     })
     window.currentlySelectedTab;
     window.loadedContentStorage = {}
 
+    function beginLoad() {
         Array.from(document.getElementsByClassName('setting-tab')).forEach((tab)=>{
           let contentToLoad = document.getElementById('content-' + tab.id)
           if (contentToLoad) {
@@ -58,19 +69,26 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
           }
 
           tab.addEventListener('click', (event) => {
-        loadContent(event.target.id)
+            loadContent((event.target as HTMLElement).id)
           })
       })
+    }
+    beginLoad();
 
-    function loadContent(tabID) {
+
+    function loadContent(tabID: string) {
       if (window.currentlySelectedTab == tabID) return
         else window.currentlySelectedTab = tabID
         let currentContent = document.getElementById('current-content')
         if (currentContent) {
           currentContent.style.opacity = '0'
           setTimeout(() => {
+            if (currentContent) {
               currentContent.innerHTML = window.loadedContentStorage[tabID]
               currentContent.style.opacity = '1'
+            } else {
+              throw new Error("Current content not found!")
+            }
             document.dispatchEvent(new CustomEvent('setting-tabChange', {detail: tabID }))
             document.dispatchEvent(new CustomEvent('setting-tabLoad', {detail: tabID }))
           }, 250);
@@ -85,11 +103,11 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
           if (dropdown) {
             if (dropdown.style.maxHeight == '0px' || dropdown.style.maxHeight == '') {
               dropdown.style.maxHeight = dropdown.scrollHeight + 'px';
-              toggle.style.borderRadius = '10px 10px 0 0';
+              document.getElementById(toggle.id)!.style.borderRadius = '10px 10px 0 0';
             } else {
               dropdown.style.maxHeight = '0px';
               setTimeout(() => {
-                toggle.style.borderRadius = '10px';
+                document.getElementById(toggle.id)!.style.borderRadius = '10px';
               }, 300);
             }
           }
@@ -97,7 +115,7 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
       })
     }
 
-    function determineListener(event) {
+    function determineListener(event: CustomEvent) {
       if (event.detail == "setting-tab-proxy") {
         addDropdownListener()
       } else if (event.detail == "setting-tab-customization") {
@@ -105,32 +123,39 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
       }
     }
 
-    function closeDropdown(dropdownID) {
+    function closeDropdown(dropdownID: string) {
       let dropdown = document.getElementById(dropdownID)
       if (dropdown) {
         dropdown.style.maxHeight = '0px';
         setTimeout(() => {
           let dropdown_toggle = document.getElementById(dropdownID.replace('-menu', ''));
+          if (dropdown_toggle) {
             dropdown_toggle.style.borderRadius = '10px';
+          } else {
+            throw new Error("Dropdown toggle not found!")
+          }
         }, 300);
       }
     }
 
-    function applySavedLocalStorage(localStorageItem, dropdownID) {
+    function applySavedLocalStorage(localStorageItem: string, dropdownID: string) {
       if (localStorage.getItem(localStorageItem)) {
         let dropdown_toggle = document.getElementById(dropdownID);
         if (dropdown_toggle) {
-          dropdown_toggle.innerText = localStorage.getItem(localStorageItem).charAt(0).toUpperCase() + localStorage.getItem(localStorageItem).slice(1)
+          dropdown_toggle.innerText = (localStorage.getItem(localStorageItem) || "").charAt(0).toUpperCase() + (localStorage.getItem(localStorageItem) || "").slice(1)
         }
       }
     }
 
-    function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
+    function applyDropdownEventListeners(item: HTMLElement, dropdownID: string, localStorageItem: string, optionalCallback: Function | undefined = undefined) {
       Array.from(item.children).forEach((item) => {
           item.addEventListener('click', () => {
-            localStorage.setItem(localStorageItem, item.dataset.setting)
+            // TODO: Allow an optional field for a custom localStorage value, instead of the input value.
+            localStorage.setItem(localStorageItem, ((item as HTMLElement).dataset.setting) || "")
             applySavedLocalStorage(localStorageItem, dropdownID)
+            if (item.parentElement) {
               closeDropdown(item.parentElement.id);
+            }
 
             if (typeof optionalCallback == "function") {
               optionalCallback();
@@ -139,27 +164,45 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
         })
     }
 
-    function applyInputListeners(item, localStorageItem) {
+    function applyInputListeners(item: HTMLInputElement, localStorageItem: string) {
       item.addEventListener('input', () => {
+        // TODO: Allow an optional field for a custom localStorage value, instead of the input value.
         localStorage.setItem(localStorageItem, item.value)
       })
     }
 
-    document.addEventListener('setting-tabChange', determineListener)
+    document.addEventListener('setting-tabChange', determineListener as EventListener)
 
     loadContent('setting-tab-proxy')
 
     function setupCustomizationSettings() {
       applySavedLocalStorage('alu__selectedTheme', 'dropdown__selected-theme');
       applySavedLocalStorage('alu__selectedLanguage', 'dropdown__selected-language');
-      let dropdownTheme = document.getElementById('dropdown__selected-theme-menu')
+      // TODO: Null checking lol.
-      let dropdownLanguage = document.getElementById('dropdown__selected-language-menu')
+      let dropdownTheme = document.getElementById('dropdown__selected-theme-menu') as HTMLElement
+      let dropdownLanguage = document.getElementById('dropdown__selected-language-menu') as HTMLElement
       applyDropdownEventListeners(dropdownTheme, 'dropdown__selected-theme', 'alu__selectedTheme', changeTheme);
-      applyDropdownEventListeners(dropdownLanguage, 'dropdown__selected-language', 'alu__selectedLanguage');
+      applyDropdownEventListeners(dropdownLanguage, 'dropdown__selected-language', 'alu__selectedLanguage', navigateToNewLangaugePage);
+    }
+
+    function navigateToNewLangaugePage() {
+      console.log("Here")
+      console.log(localStorage.getItem("alu__selectedLanguage"))
+      switch (localStorage.getItem("alu__selectedLanguage")) {
+        case "English":
+          window.location.href = "/en/settings/"
+          break;
+        case "日本語":
+          window.location.href = "/jp/settings/"
+          break;
+      }
+      beginLoad();
+
     }
 
     function changeTheme() {
-      let theme = localStorage.getItem('alu__selectedTheme')
+      // || "" is safe to use here, because it will default to the default theme if the localStorage item is not found.
+      let theme = localStorage.getItem('alu__selectedTheme') || ""
       if (theme) {
         document.documentElement.setAttribute('data-theme', theme.toLowerCase())
       }
@@ -169,20 +212,21 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
       }
     }
 
-    function setupSettings(event) {
+    function setupSettings(event: CustomEvent) {
       if (event.detail == "setting-tab-proxy") {
           applySavedLocalStorage('alu__selectedProxy', 'dropdown__selected-proxy');
           applySavedLocalStorage('alu__search_engine', 'dropdown__search-engine');
           applySavedLocalStorage("alu__selectedOpenWith", 'dropdown__open-with');
-          let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu')
+          let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu') as HTMLElement
-          let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu')
+          let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu') as HTMLElement
-          let openWithDropdown = document.getElementById('dropdown__open-with-menu')
+          let openWithDropdown = document.getElementById('dropdown__open-with-menu') as HTMLElement
-          let bareUrlInput = document.getElementById('bare-url-input')
+          let bareUrlInput = document.getElementById('bare-url-input') as HTMLInputElement
-          let searxngUrlInput = document.getElementById('searxng-url-input')
+          let searxngUrlInput = document.getElementById('searxng-url-input') as HTMLInputElement
           let savedSearxngUrl = localStorage.getItem("alu__searxngUrl")
           if (savedSearxngUrl != undefined) {
             if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/")
-            searxngUrlInput.value = localStorage.getItem("alu__searxngUrl")
+            // Typescript.. we literally make sure that it won't be undefined RIGHT ABOVE THIS COMMENT.
+            if (searxngUrlInput) searxngUrlInput.value = localStorage.getItem("alu__searxngUrl") || "https://searxng.site/"
           }
           // Proxy settings
           applyInputListeners(bareUrlInput, 'alu__bareUrl')
@@ -190,8 +234,9 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
           applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'alu__search_engine', checkSearxng);
           applyDropdownEventListeners(selectedProxyDropdown, 'dropdown__selected-proxy', 'alu__selectedProxy');
           applyDropdownEventListeners(openWithDropdown, 'dropdown__open-with', 'alu__selectedOpenWith');
-          if (localStorage.getItem('bareUrl')) {
+          // Currently does nothing functionally, but it's here for future use.
-            bareUrlInput.value = localStorage.getItem('bareUrl')
+          if (localStorage.getItem('alu__bareUrl')) {
+            bareUrlInput.value = localStorage.getItem('bareUrl') || ""
           } else {
             bareUrlInput.value = '/bare/'
           }
@@ -204,15 +249,15 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
     function checkSearxng() {
       // This function checks if the "searxng" option was clicked, display an additional option if so.
       if (localStorage.getItem("alu__search_engine")) {
-        if (localStorage.getItem("alu__search_engine").toLowerCase() == "searx") {
+        if ((localStorage.getItem("alu__search_engine") || "").toLowerCase() == "searx") {
-          document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '1'
+          (document.getElementsByClassName('setting__searxng-url')[0] as HTMLElement).style.opacity = '1'
         } else {
-          document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '0'
+          (document.getElementsByClassName('setting__searxng-url')[0] as HTMLElement).style.opacity = '0'
         }
       }
     }
 
-    document.addEventListener('setting-tabLoad', setupSettings)
+    document.addEventListener('setting-tabLoad', setupSettings as EventListener);
 </script>
 <style is:global>
 .content-hidden {