Create Alu.ts, and add support for DDG as a search engine.

src/alu.d.ts

@@ -1,6 +1,7 @@
 export declare global {
   namespace Alu {
     let store: AluStore;
+    let loadedContentStorage: Record<string, string>;
 
     type DefaultKeys = {
       [key: string]: AluKey;

src/components/SettingsContent/ProxyTab.astro

@@ -13,8 +13,11 @@ const proxyList = [
 
 const searchEngineList = [
   { name: "Google", value: "https://google.com/search?q=" },
+  { name: "DuckDuckGo", value: "https://duckduckgo.com/?q=" },
   { name: "Bing", value: "https://bing.com/search?q=" },
   { name: "Brave", value: "https://search.brave.com/search?q=" },
+  // Ecosia for some reason doesn't work with the proxy, hopefully I'll be able to add it eventually.
+  // { name: "Ecosia", value: "https://ecosia.org/search?q=" },
   { name: "Searx", value: "https://searxng.site/?q=" },
 ];
 
@@ -38,19 +41,19 @@ const wispURLList = [
 
 <div class="settings-container">
   <div class="setting__selected-proxy">
-    <label for="dropdown__selected-proxy" aria-label="Selected Proxy" class="setting-label">{t("settings.proxy.selectedProxy")}</label>
+    <label aria-label="Selected Proxy" for="dropdown__selected-proxy" class="setting-label">{t("settings.proxy.selectedProxy")}</label>
     <Dropdown buttonNameDefault="Ultraviolet" dropdownList={proxyList} localStorageKey="proxy" id="dropdown__selected-proxy" />
   </div>
   <div class="setting__search-engine">
-    <label for="dropdown__search-engine" aria-label="Search Engine" class="setting-label">{t("settings.proxy.searchEngine")}</label>
+    <label aria-label="Search Engine" for="dropdown__search-engine" class="setting-label">{t("settings.proxy.searchEngine")}</label>
     <Dropdown buttonNameDefault="Google" dropdownList={searchEngineList} localStorageKey="search" id="dropdown__search-engine" />
   </div>
   <div class="setting__open_with">
-    <label for="dropdown__open-with" aria-label="Open Page With" class="setting-label">{t("settings.proxy.openPageWith")}</label>
+    <label aria-label="Open Page With" for="dropdown__open-with" class="setting-label">{t("settings.proxy.openPageWith")}</label>
     <Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith} localStorageKey="openpage" id="dropdown__open-with" />
   </div>
   <div class="setting__wisp_url">
-    <label for="dropdown__wisp-url" aria-label="Wisp URL" for="dropdown__wisp-url" class="setting-label">{t("settings.proxy.wispURL")}</label>
+    <label aria-label="Wisp URL" for="dropdown__wisp-url" for="dropdown__wisp-url" class="setting-label">{t("settings.proxy.wispURL")}</label>
     <Dropdown buttonNameDefault={wispURLList[0].name} dropdownList={wispURLList} localStorageKey="wisp" id="dropdown__wisp-url" />
   </div>
   <div class="setting__bare_url">
@@ -58,11 +61,11 @@ const wispURLList = [
     <Input height="50px" inputName="bare-url" />
   </div>
   <div class="setting__transport">
-    <label for="dropdown__transport" aria-label="Wisp Transport" class="setting-label">{t("settings.proxy.transport")}</label>
+    <label aria-label="Wisp Transport" for="dropdown__transport" class="setting-label">{t("settings.proxy.transport")}</label>
     <Dropdown buttonNameDefault="Epoxy" dropdownList={transportsList} localStorageKey="transport" id="dropdown__transport" />
   </div>
 </div>
 <div class="setting__searxng-url">
   <label aria-label="SearXNG URL" for="searxng-url-input" class="setting-label">{t("settings.proxy.searxngURL")}</label>
-  <Input height="50px" inputName="searxng-url" defaultTextContent="https://searxng.site/?q=" />
+  <Input height="50px" inputName="searxng-url" defaultTextContent="https://searxng.site/" />
 </div>

src/components/ts/Alu.ts

@@ -0,0 +1,11 @@
+import AluStore from "./AluStore";
+
+function instantiateAlu() {
+  if (globalThis.Alu) return;
+  globalThis.Alu = {
+    store: new AluStore(),
+    loadedContentStorage: {},
+  };
+}
+
+export default instantiateAlu;

src/components/ts/AluStore.ts

@@ -63,6 +63,4 @@ class AluStore {
   }
 }
 
-globalThis.Alu = {
+export default AluStore;
-  store: new AluStore(),
-};

src/components/ts/settings.ts

@@ -82,6 +82,11 @@ function getLocalStorageValue(localStorageItem: Alu.ValidStoreKeys, dropdownID:
   // I was kinda dumb for not doing this earlier.
   const dropdown = document.getElementById(dropdownID);
   const dropdownMenu = document.getElementById(dropdownID + "-menu") as HTMLElement;
+  // Janky hack :D
+  if (dropdownID == "dropdown__search-engine") {
+    console.log(localStorageItem, dropdownID)
+    return Alu.store.get(localStorageItem).name;
+  }
 
   if (dropdown && dropdownMenu) {
     // Now we find the child that matches localStorageItem.value.
@@ -90,18 +95,21 @@ function getLocalStorageValue(localStorageItem: Alu.ValidStoreKeys, dropdownID:
       return Alu.store.get(localStorageItem).value == itemEl.dataset.setting;
     }) as HTMLElement;
     // Now set the inner text to the name in the dropdownItem.
+    if (dropdownItem) {
       return dropdownItem.innerText;
+    } else {
+      console.error("Dropdown item not found! " + dropdownID);
+    }
+
   }
 }
 
 function applySavedLocalStorage(localStorageItem: Alu.ValidStoreKeys, dropdownID: string) {
-  if (Alu.store.get(localStorageItem)) {
   const dropdown_toggle = document.getElementById(dropdownID) as HTMLElement;
-    if (dropdown_toggle) {
+    if (dropdown_toggle && Alu.store.get(localStorageItem)) {
       dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID)!;
     }
 }
-}
 
 function applyDropdownEventListeners(dropdown: HTMLElement, optionalCallback?: () => void) {
   const dropdownSibling = document.getElementById(dropdown.id + "-menu")!;
@@ -129,6 +137,12 @@ function applyInputListeners(input: HTMLInputElement, localStorageItem: Alu.Vali
   });
 }
 
+function searxngURLInputListener(input: HTMLInputElement) {
+  input.addEventListener("input", () => {
+    Alu.store.set("search", { name: "Searx", value: input.value + "?q=" });
+  });
+}
+
 function addThemeToDropdown(extension: ExtensionMetadata) {
   const dropdown = document.getElementById("dropdown__selected-theme-menu");
   if (dropdown) {
@@ -174,7 +188,7 @@ function setupProxySettings() {
   applyDropdownEventListeners(searchEngineDropdown!, checkSearxng);
   checkSearxng();
 
-  applyInputListeners(searxngUrlInput, "search");
+  searxngURLInputListener(searxngUrlInput);
   applyInputListeners(bareURLInput, "bareUrl");
 }
 
@@ -261,7 +275,6 @@ function setupCloakingSettings() {
       icon: cloakIcon,
       isCustom: true,
     };
-    // @ts-expect-error - Need to make cloak typing more standardized.
     Alu.store.set("cloak", cloakItem);
     if (cloakName == "None") {
       Alu.store.remove("cloak");

src/layouts/Layout.astro

@@ -57,7 +57,11 @@ const { title, optionalPreloads } = Astro.props;
       gtag("config", "G-P1JX4G9KSF");
     </script>
     <script>
+      import instantiateAlu from "@components/ts/Alu";
       import IDBManager from "@components/ts/IDBManager";
+
+      instantiateAlu();
+      
       if (!window.idb) {
         const db = IDBManager.loadIDB("AluDB", 1);
         db.onupgradeneeded = () => {