Add AluStore, will do more with this soon

src/components/SettingsContent/ProxyTab.astro

@@ -51,7 +51,7 @@ const wispURLList = [
   </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>
-    <Dropdown buttonNameDefault="" dropdownList={wispURLList} localStorageKey="alu__selectedWisp" id="dropdown__wisp-url" />
+    <Dropdown buttonNameDefault={wispURLList[0].name} dropdownList={wispURLList} localStorageKey="alu__selectedWispURL" id="dropdown__wisp-url" />
   </div>
   <div class="setting__bare_url">
     <label aria-label="Bare Server URL" for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>

src/components/ts/AluStore.ts

@@ -0,0 +1,64 @@
+const KEYSTORE: AluDefaultKeys = {
+  proxy: {
+    name: "Ultraviolet",
+    value: "ultraviolet",
+  },
+  search: {
+    name: "Google",
+    value: "google",
+  },
+  openpage: {
+    name: "Embed",
+    value: "embed",
+  },
+  wisp: {
+    name: "Alu (US)",
+    value: "alu",
+  },
+  bareUrl: {
+    name: `${window.location.protocol}//${window.location.host}/bare/`,
+    value: `${window.location.protocol}//${window.location.host}/bare/`,
+  },
+  theme: {
+    name: "Alu",
+    value: "alu",
+  },
+  transport: {
+    name: "Epoxy",
+    value: "epoxy",
+  },
+  searxng: {
+    name: "https://searxng.site",
+    value: "https://searxng.site",
+  },
+};
+
+if (localStorage.getItem("AluStore") === null) {
+  localStorage.setItem("AluStore", JSON.stringify(KEYSTORE));
+}
+
+class AluStore {
+  private store: AluDefaultKeys = KEYSTORE;
+  constructor() {
+    const localstore = localStorage.getItem("AluStore");
+    if (!localstore) {
+      localStorage.setItem("AluStore", JSON.stringify(KEYSTORE));
+    }
+    this.store = JSON.parse(localStorage.getItem("AluStore") || "{}");
+  }
+  public getStore(): AluDefaultKeys {
+    return this.store;
+  }
+  public get(key: string): AluKey {
+    return this.store[key];
+  }
+  public set(key: string, value: AluKey): void {
+    this.store[key] = value;
+    this.save();
+  }
+  private save(): void {
+    localStorage.setItem("AluStore", JSON.stringify(this.store));
+  }
+}
+
+window.AluStore = new AluStore();

src/layouts/Layout.astro

@@ -69,6 +69,7 @@ const { title, optionalPreloads } = Astro.props;
         };
       }
     </script>
+    <script src="@components/ts/AluStore.ts"></script>
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <ViewTransitions />

src/pages/[lang]/settings.astro

@@ -323,6 +323,7 @@ export function getStaticPaths() {
         applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy");
         applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
         applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
+        applySavedLocalStorage("alu__selectedWispURL", "dropdown__wisp-url");
         applySavedLocalStorage("alu__selectedTransport", "dropdown__transport");
         // Dropdowns
         const selectedProxyDropdown = document.getElementById("dropdown__selected-proxy");

src/types.d.ts

@@ -1,4 +1,5 @@
 interface Window {
+  AluStore: AluStore;
   __uv$config: {
     prefix: string;
     encodeUrl: (url: string) => string;
@@ -12,6 +13,15 @@ interface Window {
   wispData: WispData[];
 }
 
+declare global {
+  interface Global {
+    AluStore: AluStore;
+  }
+
+  // Add the property to globalThis
+  let AluStore: AluStore;
+}
+
 type ExtType = "serviceWorker" | "theme" | "page";
 
 type Extension = {
@@ -75,3 +85,9 @@ type WispData = {
   server: WispServer;
   time: number;
 };
+
+type AluKey = Record<string, string>;
+
+type AluDefaultKeys = {
+  [key: string]: AluKey;
+};