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>
 
-<Toaster />
+<div class="hidden" id="toastwrapper">
-<slot />
+    <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,81 +1,98 @@
-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 faviconElement = document.getElementById("favicon") as HTMLLinkElement;
+
-    localStorage.setItem(Settings.tabCloak, cloak); 
+const tabSettings = {
-    switch(cloak) {
+    cloakTab: function(cloak: TabCloaks | string) {
-        case "google":
+        const faviconElement = document.getElementById("favicon") as HTMLLinkElement;
-            document.title = "Google";
+        localStorage.setItem(Settings.TabSettings.tabCloak, cloak); 
-            faviconElement.href = "/cloaks/google.png";
+        switch(cloak) {
-            break;
+            case "google":
-        case "wikipedia":
+                document.title = "Google";
-            document.title = "Wikipedia";
+                faviconElement.href = "/cloaks/google.png";
-            faviconElement.href = "/cloaks/wikipedia.ico";
+                break;
-            break;
+            case "wikipedia":
-        case "canvas":
+                document.title = "Wikipedia";
-            document.title = "Dashboard";
+                faviconElement.href = "/cloaks/wikipedia.ico";
-            faviconElement.href = "/cloaks/canvas.ico";
+                break;
-            break;
+            case "canvas":
-        case "classroom":
+                document.title = "Dashboard";
-            document.title = "Home";
+                faviconElement.href = "/cloaks/canvas.ico";
-            faviconElement.href = "/cloaks/classroom.png";
+                break;
-            break;
+            case "classroom":
-        case "powerschool":
+                document.title = "Home";
-            document.title = "PowerSchool";
+                faviconElement.href = "/cloaks/classroom.png";
-            faviconElement.href = "/cloaks/ps.ico";
+                break;
-            break;
+            case "powerschool":
-        case "reset":
+                document.title = "PowerSchool";
-            //force a reset of favicon & title
+                faviconElement.href = "/cloaks/ps.ico";
-            localStorage.setItem("nebula||tabCloak", "default");
+                break;
-            window.location.reload();
+            case "reset":
-        default:
+                //force a reset of favicon & title
-            return;
+                localStorage.setItem("nebula||tabCloak", "default");
+                window.location.reload();
+            default:
+                return;
+        }
+    },
+    abCloak: function(type: AbCloaks | string) {
+        localStorage.setItem(Settings.TabSettings.abblob, type);
+        switch(type) {
+            case "a:b":
+                window.location.replace('https://google.com');
+                const win = window.open();
+                win!.document.body.style.margin = '0';
+                win!.document.body.style.height = '100vh';
+                const iframe = win!.document.createElement('iframe');
+                iframe.style.border = 'none';
+                iframe.style.width = '100%';
+                iframe.style.height = '100%';
+                iframe.style.margin = '0';
+                const url = window.location.href;
+                iframe.src = url;
+                win!.document.body.appendChild(iframe);
+                break;
+            case "blob":
+                const htmlContent = `
+                    <!DOCTYPE html>
+                    <html>
+                    <head>
+                    <style type="text/css">
+                    body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
+                    </style>
+                    </head>
+                    <body>
+                    <iframe style="border: none; width: 100%; height: 100vh;" src="${window.location.href}"></iframe>
+                    </body>
+                    </html>
+                `;
+                window.location.replace("https://google.com");
+                const blob = new Blob([htmlContent], { type: 'text/html' });
+                const blobURL = URL.createObjectURL(blob);
+                window.open(blobURL, '_blank');
+                break;
+            default:
+                return;
+        }
     }
 }
 
-function abCloak(type: AbCloaks | string) {
+const proxySettings = {
-    localStorage.setItem(Settings.abblob, type);
+    changeProxy: function(proxy: Proxy | string) {
-    switch(type) {
+        localStorage.setItem(Settings.ProxySettings.proxy, proxy);
-        case "a:b":
-            window.location.replace('https://google.com');
-            const win = window.open();
-            win!.document.body.style.margin = '0';
-            win!.document.body.style.height = '100vh';
-            const iframe = win!.document.createElement('iframe');
-            iframe.style.border = 'none';
-            iframe.style.width = '100%';
-            iframe.style.height = '100%';
-            iframe.style.margin = '0';
-            const url = window.location.href;
-            iframe.src = url;
-            win!.document.body.appendChild(iframe);
-            break;
-        case "blob":
-            const htmlContent = `
-                <!DOCTYPE html>
-                <html>
-                <head>
-                <style type="text/css">
-                body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
-                </style>
-                </head>
-                <body>
-                <iframe style="border: none; width: 100%; height: 100vh;" src="${window.location.href}"></iframe>
-                </body>
-                </html>
-            `;
-            window.location.replace("https://google.com");
-            const blob = new Blob([htmlContent], { type: 'text/html' });
-            const blobURL = URL.createObjectURL(blob);
-            window.open(blobURL, '_blank');
-            break;
-        default:
-            return;
     }
 }
 
-export { cloakTab, abCloak, Settings }
+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