Feat: wisp server switcher

src/components/Loader.astro

@@ -3,8 +3,13 @@
     import { SW } from "@utils/proxy.ts";
     const settings = new Settings();
     const sw = new SW();
+    
+    const init = async () => {
+        settings.searchEngine();
+        await sw.wispServer();
+    }
 
-
+    init();
     document.addEventListener('astro:after-swap', async () => {
         //const settings = await Settings.getInstance();
         settings.theme();

src/components/ui/Button.astro

@@ -0,0 +1,14 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+    id: string;
+    text: string;
+    icon?: string
+}
+const { id, text, icon } = Astro.props;
+---
+<button id={id} class="bg-(--primary) hover:bg-(--primary)/90 cursor-pointer text-(--primary-foreground) inline-flex items-center jusitfy-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors h-10 px-4 py-2">
+    {icon ? <Icon name={icon} class="text-(--primary-foreground) h-5 w-5 mr-2" /> : null}  
+    {text}
+</button>

src/components/ui/Dropdown.astro

@@ -7,7 +7,7 @@ interface Props {
 
 const { id, options } = Astro.props;
 ---
-<select id=`dropdownBox-${id}` class="flex h-10 w-[180px] items-center justify-between text-(--foreground) background-(--background) rounded-lg border border-(--border) px-3 py-2">
+<select id=`dropdownBox-${id}` class="cursor-pointer flex h-10 w-[180px] items-center justify-between text-(--foreground) background-(--background) rounded-lg border border-(--border) px-3 py-2">
     {options.map((el) => 
         <option class="w-full bg-(--accent) rounded-sm p-1" value={el.value}>{el.name}</option>
     )}

src/components/ui/Input.astro

@@ -0,0 +1,8 @@
+---
+interface Props {
+    placeholder: string;
+    id: string;
+}
+const { placeholder, id } = Astro.props;
+---
+<input class="h-10 w-full rounded-md border border-(--border) px-3 py-2 text-sm" placeholder={placeholder} id={id} ></input>

src/pages/[...settings]/index.astro

@@ -2,6 +2,7 @@
 import SettingsLayout from "@layouts/SettingsLayout.astro";
 import Dropdown from "@components/ui/Dropdown.astro";
 import Input from "@components/ui/Input.astro";
+import Button from "@components/ui/Button.astro";
 import { SearchEngines, type DropdownOptions } from "@utils/types";
 const SearchEngineOptions: DropdownOptions[] = [];
 Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
@@ -35,9 +36,18 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
                 <p> Search Engine </p>
                 <Dropdown id="sSwitcher" options={SearchEngineOptions} />
             </div>
-            <div class="mt-2">
+            <div class="mt-2 w-80">
-                <p> Wisp Server </p>
+                <div>
-                <Input />
+                    <p> Wisp Server </p>
+                    <Input id="wispServerSwitcher" placeholder="Wisp server URL (EX: wss://radiusproxy.app/wisp/" />
+                </div>
+                <div class="mt-2 mb-2 hidden" id="wispServerInfo">
+                    <p class="text-blue-500" id="wispServerInfo-inner"> Checking URL... </p>
+                </div>
+                <div class="mt-2 flex flex-row gap-4">
+                    <Button id="wispServerSave" text="Save Changes" icon="lucide:save" />
+                    <Button id="wispServerReset" text="Reset" icon="lucide:rotate-ccw" />
+                </div>
             </div>
         </div>
     </div>
@@ -76,12 +86,59 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
 
     const searchEngine = async (opts: Options) => {
         const seEl = document.getElementById("dropdownBox-sSwitcher") as HTMLSelectElement;
-        seEl.value = opts.storageManager.getVal("searchEngine") || "ddg";
+        seEl.value = opts.storageManager.getVal("searchEngine") || SearchEngines.DuckDuckGo;
         seEl.addEventListener("change", async () => {
             opts.settings.searchEngine(seEl.value);
         });
     }
 
+    const wispServer = async (opts: Options) => {
+        const wispServerSwitcher = document.getElementById("wispServerSwitcher") as HTMLInputElement;
+        const wispServerInfo = document.getElementById("wispServerInfo") as HTMLElement;
+        const wispServerInfoInner = document.getElementById("wispServerInfo-inner") as HTMLParagraphElement;
+        const wispServerSave = document.getElementById("wispServerSave") as HTMLButtonElement;
+        const wispServerReset = document.getElementById("wispServerReset") as HTMLButtonElement;
+
+        wispServerSwitcher.value = opts.storageManager.getVal("wispServer");
+        
+        const reset = (hide: boolean = true) => {
+            if (hide) wispServerInfo.classList.add("hidden");
+            wispServerInfoInner.innerText = "Checking URL..."
+            wispServerInfoInner.classList.remove("text-red-500");
+            wispServerInfoInner.classList.remove("text-green-500");
+        };
+
+        wispServerSave.addEventListener("click", async () => {
+            const server = wispServerSwitcher.value;
+            wispServerInfo.classList.remove("hidden"); 
+
+            if (!server.match(/^wss?:\/\/.*/)) {
+                reset(false);
+                wispServerInfoInner.innerText = "Invalid URL! \nURL's MUST start with wss:// or ws://";
+                wispServerInfoInner.classList.add("text-red-500");
+            }
+            else {
+                //TODO: we need to actually check if the wisp server exists. But for now, this will work
+                reset(false);
+                wispServerInfoInner.innerText = "Wisp Server Set!";
+                wispServerInfoInner.classList.add("text-green-500");
+                await opts.sw.wispServer(wispServerSwitcher.value, true);
+            }
+
+            // We reset this after 4 seconds (any errors OR success)
+            setTimeout(reset, 4000);
+        });
+
+        wispServerReset.addEventListener("click", async () => {
+            wispServerInfo.classList.remove("hidden");
+            wispServerInfoInner.innerText = "Wisp Server Reset!";
+            wispServerInfoInner.classList.add("text-green-500");
+            await opts.sw.wispServer(`${(location.protocol === "https:" ? "wss://" : "ws://")}${location.host}/wisp/`, true);
+            wispServerSwitcher.value = opts.storageManager.getVal("wispServer");
+            setTimeout(reset, 4000);
+        });
+    }
+
     document.addEventListener("astro:page-load", async () => {
         try {
             const settings = await Settings.getInstance();
@@ -90,6 +147,7 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
             await transport({settings, sw, storageManager});
             await proxy({settings, sw, storageManager});
             await searchEngine({settings, sw, storageManager});
+            await wispServer({settings, sw, storageManager});
         } catch (err) { console.log(err) }
     });
 </script>

src/utils/proxy.ts

@@ -60,17 +60,22 @@ class SW {
         this.#storageManager.setVal("transport", transport || this.#storageManager.getVal("transport") || 'epoxy');
         switch(transport) {
             case 'epoxy': {
-                await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: 'ws://localhost:4321/wisp/' }]);
+                await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: this.#storageManager.getVal('wispServer') }]);
             }
             case 'libcurl': {
-                await this.#baremuxConn!.setTransport("/libcurl/index.mjs", [ { wisp: 'ws://localhost:4321/wisp/' }]);
+                await this.#baremuxConn!.setTransport("/libcurl/index.mjs", [ { wisp: this.#storageManager.getVal('wispServer') }]);
             }
             default: {
-                await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: 'ws://localhost:4321/wisp/' }]);
+                await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: this.#storageManager.getVal('wispServer') }]);
             }
         }
     }
 
+    async wispServer(wispServer?: string, set?: true) {
+        this.#storageManager.setVal("wispServer", wispServer ||  this.#storageManager.getVal('wispServer') || (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/");
+        if (set) await this.setTransport();
+    }
+
     constructor() {
         SW.#instance.add(this);
         this.#storageManager = new StoreManager("radius||settings");

src/utils/settings.ts

@@ -1,6 +1,7 @@
 import { StoreManager } from "./storage";
 import { BareMuxConnection } from "@mercuryworkshop/bare-mux";
 import { SW } from "@utils/proxy.ts";
+import { SearchEngines } from "./types";
 /**
     * The settings class
     * Initializes it's own StorageManager, and handles everything within the class itself
@@ -75,8 +76,8 @@ class Settings {
         this.#storageManager.setVal('proxy', prox);
     }
 
-    searchEngine(engine: string) {
+    searchEngine(engine?: string) {
-        this.#storageManager.setVal('searchEngine', engine);
+        this.#storageManager.setVal('searchEngine', engine || SearchEngines.DuckDuckGo);
     }
  
     async *#init() {