fix my scuffed toast notifs

src/components/settings/Loader.astro

@@ -1,8 +1,9 @@
 <script>
-    import { cloakTab, Settings } from "@utils/settings.ts";
+    import { tabSettings, proxySettings, Settings } from "@utils/settings.ts";
     // This loads the settings in a nice way
-    cloakTab(localStorage.getItem(Settings.tabCloak) as string || "default");
+    tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
+    proxySettings.changeProxy(localStorage.getItem(Settings.ProxySettings.proxy as string) || "automatic");
     document.addEventListener("astro:after-swap", function() {
-        cloakTab(localStorage.getItem(Settings.tabCloak) as string || "default");
+        tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
     });
 </script>

src/components/toasts/ToastWrapper.svelte

@@ -2,5 +2,7 @@
     import { Toaster } from "svelte-french-toast";
 </script>
 
+<div class="hidden" id="toastwrapper">
     <Toaster />
     <slot />
+</div>

src/pages/[lang]/settings/pr.astro

@@ -2,6 +2,9 @@
 import Layout from "@layouts/Layout.astro";
 import SettingsLayout from "@layouts/SettingsLayout.astro";
 import SettingsSection from "@layouts/SettingsSection.astro";
+import SettingsCard from "@components/settings/SettingsCard.astro";
+import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
+import Toast from "@components/toasts/Toast.svelte";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 
 const lang = getLangFromUrl(Astro.url);
@@ -18,8 +21,109 @@ export const prerender = true;
 
 <Layout title="Settings">
   <SettingsLayout title={t("settings.proxy")}>
-    <SettingsSection title="Proxy" subtitle="Choose the rewriter/proxy to use.">
+  <SettingsSection title="Proxy" subtitle="A wide variety of settings for the proxy/rewriter itself.">
-        Guhh
+    <div class="w-full h-full flex flex-col items-center justify-center flex-wrap md:flex-row md:items-start md:justify-start gap-4">
+        <SettingsCard 
+            title="Proxy"
+            description="Choose the proxy/rewriter that fits your needs"
+            input={{input:false}}
+            button={{name: 'Change', id: 'setproxy'}}
+            select={{
+                select: true,
+                name: 'proxy',
+                options: [
+                    {name: 'Automatic', value: 'automatic', disabled: false},
+                    {name: 'Ultraviolet', value: 'uv', disabled: false},
+                    {name: 'Rammerhead', value: 'rh', disabled: false}
+                ]
+            }}
+        />
+        <SettingsCard
+            title="Open in"
+            description="Choose how to open your sites"
+            input={{input:false}}
+            button={{name: 'Set', id: 'setopenin'}}
+            select={{
+                select: true,
+                name: 'openin',
+                options: [
+                    {name: 'Embed', value: 'embed', disabled: false},
+                    {name: 'About:Blank', value: 'a:b', disabled: false},
+                    {name: 'Blob', value: 'blob', disabled: false}
+                ]
+            }}
+        />
+        <SettingsCard
+            title="Search Engine"
+            description="Choose your search engine"
+            input={{input: false}}
+            button={{name: 'Set Search Engine', id: 'setsearchengine'}}
+            select={{
+                select: true,
+                name: 'searchengine',
+                options: [
+                    {name: 'DuckDuckGo', value: 'ddg', disabled: false},
+                    {name: 'Google', value: 'google', disabled: false},
+                    {name: 'Bing', value: 'bing', disabled: false}
+                ]
+            }}
+        />
+        <SettingsCard
+            title="Wisp Server"
+            description="Choose the wisp server you feel is the fastest"
+            input={{input: false}}
+            button={{name: 'Select', id: 'setwispurl'}}
+            select={{
+                select: true,
+                name: 'wispurl',
+                options: [
+                    {name: 'Automatic', value: 'automatic', disabled: false},
+                    {name: 'US-1', value: 'us-1', disabled: true}
+                ]
+            }}
+        />
+        <SettingsCard
+            title="Transport"
+            description="Select the transport to use"
+            input={{input: false}}
+            button={{name: 'Set transport', id: 'settransport'}}
+            select={{
+                select: true,
+                name: 'transport',
+                options: [
+                    {name: 'Libcurl', value: 'libcurl', disabled: false},
+                    {name: 'Epoxy', value: 'epoxy', disabled: false}
+                ]
+            }}
+        />
+      </div>
     </SettingsSection>
   </SettingsLayout>
+  <ToastWrapper client:load>
+    <Toast toastProp={{
+            toastType: 'success',
+            text: 'Successfully changed proxy!',
+            class: 'proxyMessage'
+        }}
+    client:load />
+  </ToastWrapper>
 </Layout>
+<script>
+    import { toast } from "@utils/toast.ts";
+    import { proxySettings, Settings as SettingsEnum } from "@utils/settings.ts";
+    function setup(proxySelectVal: HTMLSelectElement) {
+        proxySelectVal.value = localStorage.getItem(SettingsEnum.ProxySettings.proxy) as string;
+    }
+    document.addEventListener("astro:page-load", () => {
+        try {
+            const proxyButton = document.getElementById("setproxy") as HTMLButtonElement;
+            const proxySelectVal = document.getElementById('proxy') as HTMLSelectElement;
+            setup(proxySelectVal);
+            proxyButton.addEventListener("click", () => {
+                proxySettings.changeProxy(proxySelectVal.value);
+                toast('.proxyMessage');
+            });
+        }
+        catch(_) {/* Don't return anything on purpose */}
+    })
+</script>

src/pages/[lang]/settings/tab.astro

@@ -58,10 +58,10 @@ export const prerender = true;
 
 <script>
     import { toast } from "@utils/toast.ts"; //A helper function so we don't have to run this logic everytime.
-    import { cloakTab, abCloak, Settings as SettingsEnum } from "@utils/settings.ts";
+    import { tabSettings, Settings as SettingsEnum } from "@utils/settings.ts";
     function setup(cloakValue: HTMLSelectElement, abValue: HTMLSelectElement) {
-        const cloakLocal = localStorage.getItem(SettingsEnum.tabCloak);
+        const cloakLocal = localStorage.getItem(SettingsEnum.TabSettings.tabCloak);
-        const abCloakLocal = localStorage.getItem(SettingsEnum.abblob);
+        const abCloakLocal = localStorage.getItem(SettingsEnum.TabSettings.abblob);
         cloakLocal === "default" ? cloakValue.value = "reset" : cloakValue.value = cloakLocal as string;
         abValue.value = abCloakLocal as string;
     }
@@ -73,13 +73,13 @@ export const prerender = true;
             const abValue = document.getElementById("aboutblank") as HTMLSelectElement;
             setup(cloakValue, abValue);
             cloakButton.addEventListener("click", () => {
-                cloakTab(cloakValue.value);
+                tabSettings.cloakTab(cloakValue.value);
                 toast('.cloakMessageSuccess');
             });
             abButton.addEventListener("click", () => {
                 toast('.abCloakMessage');
-                abCloak(abValue.value);
+                tabSettings.abCloak(abValue.value);
-            })
+            });
         }
         catch (_) { /* We don't want to return anything on purpose */ }
     })

src/utils/settings.ts

@@ -1,12 +1,23 @@
-enum Settings {
+enum TabSettings {
-    "tabCloak" = "nebula||tabCloak",
+    tabCloak = "nebula||tabCloak",
-    "abblob" = "nebula||abBlob"
+    abblob = "nebula||abBlob"
 }
+enum ProxySettings {
+    proxy = "nebula||proxy"
+}
+const Settings = {
+    TabSettings,
+    ProxySettings
+}
+
 type TabCloaks = "default" | "google" | "wikipedia" | "canvas" | "classroom" | "powerschool";
-type AbCloaks = "a:b" | "blob"
+type AbCloaks = "a:b" | "blob";
-function cloakTab(cloak: TabCloaks | string) {
+type Proxy = "automatic" | "uv" | "rh"
+
+const tabSettings = {
+    cloakTab: function(cloak: TabCloaks | string) {
         const faviconElement = document.getElementById("favicon") as HTMLLinkElement;
-    localStorage.setItem(Settings.tabCloak, cloak); 
+        localStorage.setItem(Settings.TabSettings.tabCloak, cloak); 
         switch(cloak) {
             case "google":
                 document.title = "Google";
@@ -35,10 +46,9 @@ function cloakTab(cloak: TabCloaks | string) {
             default:
                 return;
         }
-}
+    },
-
+    abCloak: function(type: AbCloaks | string) {
-function abCloak(type: AbCloaks | string) {
+        localStorage.setItem(Settings.TabSettings.abblob, type);
-    localStorage.setItem(Settings.abblob, type);
         switch(type) {
             case "a:b":
                 window.location.replace('https://google.com');
@@ -77,5 +87,12 @@ function abCloak(type: AbCloaks | string) {
                 return;
         }
     }
+}
 
-export { cloakTab, abCloak, Settings }
+const proxySettings = {
+    changeProxy: function(proxy: Proxy | string) {
+        localStorage.setItem(Settings.ProxySettings.proxy, proxy);
+    }
+}
+
+export { tabSettings, proxySettings, Settings }

src/utils/toast.ts

@@ -11,6 +11,8 @@ interface Props {
 } 
 
 function toast(query: string) {
+    const wrapper = document.getElementById("toastwrapper") as HTMLDivElement;
+    wrapper.classList.remove("hidden");
     //this is a really hacky solution for toast notifications LOL
     const element = document.querySelector(query) as HTMLElement;
     //click the element