Feat: Tab cloaking

package.json

@@ -19,8 +19,8 @@
     "@fastify/static": "^7.0.4",
     "@iconify-json/ph": "^1.2.0",
     "@mercuryworkshop/bare-mux": "1.1.1",
-    "@mercuryworkshop/epoxy-tls-new": "npm:@mercuryworkshop/epoxy-tls@^2.1.4-1",
     "@mercuryworkshop/epoxy-tls": "2.0.0-3",
+    "@mercuryworkshop/epoxy-tls-new": "npm:@mercuryworkshop/epoxy-tls@^2.1.4-1",
     "@mercuryworkshop/epoxy-transport": "2.0.1",
     "@titaniumnetwork-dev/ultraviolet": "3.1.2",
     "astro": "^4.15.9",
@@ -35,6 +35,7 @@
     "sequelize": "^6.37.3",
     "sqlite3": "^5.1.7",
     "svelte": "^4.2.19",
+    "svelte-french-toast": "^1.2.0",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.2",
     "vite-plugin-static-copy": "^1.0.6",

pnpm-lock.yaml

@@ -13,13 +13,13 @@ importers:
         version: 0.8.3(typescript@5.6.2)
       '@astrojs/node':
         specifier: ^8.3.4
-        version: 8.3.4(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(typescript@5.6.2))
+        version: 8.3.4(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2))
       '@astrojs/svelte':
         specifier: ^5.7.1
-        version: 5.7.1(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(typescript@5.6.2))(svelte@4.2.19)(typescript@5.6.2)(vite@5.4.8(@types/node@22.7.4))
+        version: 5.7.1(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2))(svelte@4.2.19)(typescript@5.6.2)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4))
       '@astrojs/tailwind':
         specifier: ^5.1.1
-        version: 5.1.1(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(typescript@5.6.2))(tailwindcss@3.4.13)
+        version: 5.1.1(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2))(tailwindcss@3.4.13)
       '@fastify/compress':
         specifier: ^7.0.3
         version: 7.0.3
@@ -46,7 +46,7 @@ importers:
         version: 3.1.2
       astro:
         specifier: ^4.15.9
-        version: 4.15.9(@types/node@22.7.4)(rollup@4.22.5)(typescript@5.6.2)
+        version: 4.15.9(@types/node@22.7.4)(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2)
       astro-icon:
         specifier: ^1.1.1
         version: 1.1.1
@@ -80,6 +80,9 @@ importers:
       svelte:
         specifier: ^4.2.19
         version: 4.2.19
+      svelte-french-toast:
+        specifier: ^1.2.0
+        version: 1.2.0(svelte@4.2.19)
       tailwindcss:
         specifier: ^3.4.13
         version: 3.4.13
@@ -88,7 +91,7 @@ importers:
         version: 5.6.2
       vite-plugin-static-copy:
         specifier: ^1.0.6
-        version: 1.0.6(vite@5.4.8(@types/node@22.7.4))
+        version: 1.0.6(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4))
       wisp-server-node:
         specifier: ^1.1.7
         version: 1.1.7
@@ -1122,6 +1125,10 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  chokidar@4.0.1:
+    resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
+    engines: {node: '>= 14.16.0'}
+
   chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
 
@@ -1804,6 +1811,9 @@ packages:
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
+  immutable@4.3.7:
+    resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
+
   import-meta-resolve@4.1.0:
     resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
 
@@ -2688,6 +2698,10 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  readdirp@4.0.1:
+    resolution: {integrity: sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==}
+    engines: {node: '>= 14.16.0'}
+
   real-require@0.2.0:
     resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
     engines: {node: '>= 12.13.0'}
@@ -2825,6 +2839,11 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  sass@1.79.4:
+    resolution: {integrity: sha512-K0QDSNPXgyqO4GZq2HO5Q70TLxTH6cIT59RdoCHMivrC8rqzaTw5ab9prjz9KUN1El4FLXrBXJhik61JR4HcGg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   section-matter@1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
@@ -3062,12 +3081,22 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svelte-french-toast@1.2.0:
+    resolution: {integrity: sha512-5PW+6RFX3xQPbR44CngYAP1Sd9oCq9P2FOox4FZffzJuZI2mHOB7q5gJBVnOiLF5y3moVGZ7u2bYt7+yPAgcEQ==}
+    peerDependencies:
+      svelte: ^3.57.0 || ^4.0.0
+
   svelte-hmr@0.16.0:
     resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0
 
+  svelte-writable-derived@3.1.1:
+    resolution: {integrity: sha512-w4LR6/bYZEuCs7SGr+M54oipk/UQKtiMadyOhW0PTwAtJ/Ai12QS77sLngEcfBx2q4H8ZBQucc9ktSA5sUGZWw==}
+    peerDependencies:
+      svelte: ^3.2.1 || ^4.0.0-next.1 || ^5.0.0-next.94
+
   svelte2tsx@0.7.21:
     resolution: {integrity: sha512-cdYR5gYBK0Ys3/jzGu9yfW9oxGLtLAnxcKtS7oJy2pjLhLLYSZcWeeeuaY9SMULwlqMZ1HfngGH3n5VdquRC3Q==}
     peerDependencies:
@@ -3656,9 +3685,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/node@8.3.4(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(typescript@5.6.2))':
+  '@astrojs/node@8.3.4(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2))':
     dependencies:
-      astro: 4.15.9(@types/node@22.7.4)(rollup@4.22.5)(typescript@5.6.2)
+      astro: 4.15.9(@types/node@22.7.4)(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2)
       send: 0.19.0
       server-destroy: 1.0.1
     transitivePeerDependencies:
@@ -3668,10 +3697,10 @@ snapshots:
     dependencies:
       prismjs: 1.29.0
 
-  '@astrojs/svelte@5.7.1(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(typescript@5.6.2))(svelte@4.2.19)(typescript@5.6.2)(vite@5.4.8(@types/node@22.7.4))':
+  '@astrojs/svelte@5.7.1(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2))(svelte@4.2.19)(typescript@5.6.2)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4))
+      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4))
-      astro: 4.15.9(@types/node@22.7.4)(rollup@4.22.5)(typescript@5.6.2)
+      astro: 4.15.9(@types/node@22.7.4)(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2)
       svelte: 4.2.19
       svelte2tsx: 0.7.21(svelte@4.2.19)(typescript@5.6.2)
       typescript: 5.6.2
@@ -3679,9 +3708,9 @@ snapshots:
       - supports-color
       - vite
 
-  '@astrojs/tailwind@5.1.1(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(typescript@5.6.2))(tailwindcss@3.4.13)':
+  '@astrojs/tailwind@5.1.1(astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2))(tailwindcss@3.4.13)':
     dependencies:
-      astro: 4.15.9(@types/node@22.7.4)(rollup@4.22.5)(typescript@5.6.2)
+      astro: 4.15.9(@types/node@22.7.4)(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2)
       autoprefixer: 10.4.20(postcss@8.4.47)
       postcss: 8.4.47
       postcss-load-config: 4.0.2(postcss@8.4.47)
@@ -4266,26 +4295,26 @@ snapshots:
 
   '@shikijs/vscode-textmate@9.2.2': {}
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4)))(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4))':
+  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)))(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4))
+      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4))
       debug: 4.3.7
       svelte: 4.2.19
-      vite: 5.4.8(@types/node@22.7.4)
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4))':
+  '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4)))(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4))
+      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)))(svelte@4.2.19)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4))
       debug: 4.3.7
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.11
       svelte: 4.2.19
       svelte-hmr: 0.16.0(svelte@4.2.19)
-      vite: 5.4.8(@types/node@22.7.4)
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)
-      vitefu: 0.2.5(vite@5.4.8(@types/node@22.7.4))
+      vitefu: 0.2.5(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4))
     transitivePeerDependencies:
       - supports-color
 
@@ -4523,7 +4552,7 @@ snapshots:
       - debug
       - supports-color
 
-  astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(typescript@5.6.2):
+  astro@4.15.9(@types/node@22.7.4)(rollup@4.22.5)(sass@1.79.4)(typescript@5.6.2):
     dependencies:
       '@astrojs/compiler': 2.10.3
       '@astrojs/internal-helpers': 0.4.1
@@ -4582,8 +4611,8 @@ snapshots:
       tsconfck: 3.1.3(typescript@5.6.2)
       unist-util-visit: 5.0.0
       vfile: 6.0.3
-      vite: 5.4.8(@types/node@22.7.4)
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)
-      vitefu: 1.0.2(vite@5.4.8(@types/node@22.7.4))
+      vitefu: 1.0.2(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4))
       which-pm: 3.0.0
       xxhash-wasm: 1.0.2
       yargs-parser: 21.1.1
@@ -4825,6 +4854,11 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chokidar@4.0.1:
+    dependencies:
+      readdirp: 4.0.1
+    optional: true
+
   chownr@1.1.4: {}
 
   chownr@2.0.0: {}
@@ -5617,6 +5651,9 @@ snapshots:
 
   ieee754@1.2.1: {}
 
+  immutable@4.3.7:
+    optional: true
+
   import-meta-resolve@4.1.0: {}
 
   imurmurhash@0.1.4:
@@ -6688,6 +6725,9 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  readdirp@4.0.1:
+    optional: true
+
   real-require@0.2.0: {}
 
   regenerator-runtime@0.14.1: {}
@@ -6885,6 +6925,13 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  sass@1.79.4:
+    dependencies:
+      chokidar: 4.0.1
+      immutable: 4.3.7
+      source-map-js: 1.2.1
+    optional: true
+
   section-matter@1.0.0:
     dependencies:
       extend-shallow: 2.0.1
@@ -7166,10 +7213,19 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svelte-french-toast@1.2.0(svelte@4.2.19):
+    dependencies:
+      svelte: 4.2.19
+      svelte-writable-derived: 3.1.1(svelte@4.2.19)
+
   svelte-hmr@0.16.0(svelte@4.2.19):
     dependencies:
       svelte: 4.2.19
 
+  svelte-writable-derived@3.1.1(svelte@4.2.19):
+    dependencies:
+      svelte: 4.2.19
+
   svelte2tsx@0.7.21(svelte@4.2.19)(typescript@5.6.2):
     dependencies:
       dedent-js: 1.0.1
@@ -7430,15 +7486,15 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-plugin-static-copy@1.0.6(vite@5.4.8(@types/node@22.7.4)):
+  vite-plugin-static-copy@1.0.6(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)):
     dependencies:
       chokidar: 3.6.0
       fast-glob: 3.3.2
       fs-extra: 11.2.0
       picocolors: 1.1.0
-      vite: 5.4.8(@types/node@22.7.4)
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)
 
-  vite@5.4.8(@types/node@22.7.4):
+  vite@5.4.8(@types/node@22.7.4)(sass@1.79.4):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
@@ -7446,14 +7502,15 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.7.4
       fsevents: 2.3.3
+      sass: 1.79.4
 
-  vitefu@0.2.5(vite@5.4.8(@types/node@22.7.4)):
+  vitefu@0.2.5(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)):
     optionalDependencies:
-      vite: 5.4.8(@types/node@22.7.4)
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)
 
-  vitefu@1.0.2(vite@5.4.8(@types/node@22.7.4)):
+  vitefu@1.0.2(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)):
     optionalDependencies:
-      vite: 5.4.8(@types/node@22.7.4)
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)
 
   volar-service-css@0.0.61(@volar/language-service@2.4.5):
     dependencies:

src/components/settings/Loader.astro

@@ -0,0 +1,7 @@
+<script>
+    import { cloakTab } from "@utils/settings.ts";
+    // This loads the settings in a nice way
+    document.addEventListener("astro:after-swap", function() {
+        cloakTab(localStorage.getItem("nebula||tabCloak") as string || "default");
+    });
+</script>

src/components/settings/SettingsCard.astro

@@ -40,7 +40,7 @@ const { title, description, input, select, button } = Astro.props;
         }
         <!-- Same with dropdown selections -->
         {select.select &&
-            <select class="text-md w-full h-10 p-2 bg-input border border-input-border-color rounded-md text-input-text" multiple={select.multiple} name={select.name}>
+        <select id={select.name.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()} class="text-md w-full h-10 p-2 bg-input border border-input-border-color rounded-md text-input-text" multiple={select.multiple} name={select.name}>
                 {select.options!.map((option) => (
                     <option disabled={option.disabled} value={option.value}>{option.name}</option>
                 ))}

src/components/toasts/Toast.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import toast from 'svelte-french-toast';
+    import { type ToastType, type Position, type Props } from "@utils/toast.ts";
+    export let toastProp: Props;
+    function handleToast(toastProp: Props) {
+        switch(toastProp.toastType) {
+            case "success":
+                toast.success(toastProp.text, {
+                    style: 'background: var(--navbar-color); color: var(--input-text-color);',
+                    icon: toastProp.emoji,
+                    position: toastProp.position ?? 'bottom-right',
+                    duration: toastProp.duration
+                });
+                break;
+            case "error":
+                toast.error(toastProp.text, {
+                    style: 'background: var(--navbar-color); color: var(--input-text-color);',
+                    icon: toastProp.emoji,
+                    position: toastProp.position ?? 'bottom-right',
+                    duration: toastProp.duration
+                });
+                break;
+            case "promise":
+                throw new Error("Due to the way astro renders promise toasts are not available (ish)");
+                break;
+            case "multiline":
+                toast(toastProp.text, {
+                    style: 'background: var(--navbar-color); color: var(--input-text-color);',
+                    icon: toastProp.emoji,
+                    position: toastProp.position ?? 'bottom-right',
+                    duration: toastProp.duration
+                })
+                break;
+            default:
+                throw new Error("Something isn't right...");
+                break
+        }
+    }
+</script>
+<!-- A hacky way to get this to be called. Just click this button (see ../../utils/toast.ts) -->
+<button id={toastProp.id} class:hidden={'hidden'} class={toastProp.class} on:click={() => {return handleToast(toastProp)}}>Auto clicked for toast notifs</button>

src/components/toasts/ToastWrapper.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+    import { Toaster } from "svelte-french-toast";
+</script>
+
+<Toaster />
+<slot />

src/layouts/Layout.astro

@@ -2,7 +2,7 @@
 import Header from "@components/Header.astro";
 import { ViewTransitions } from "astro:transitions";
 import MobileNavigation from "@components/MobileNavigation.astro";
-
+import SettingsLoader from '@components/settings/Loader.astro';
 interface Props {
   title: string;
 }
@@ -13,10 +13,11 @@ const { title } = Astro.props;
 <!doctype html>
 <html lang="en">
   <head>
+    <SettingsLoader transition:persist />
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
     <link
       rel="stylesheet"
       href="/nebula.css"

src/pages/[lang]/index.astro

@@ -82,7 +82,6 @@ const t = useTranslations(lang);
                     omnibox.classList.add("hidden");
                 }
                 if (value.length >= 3) {
-                    console.log("YUH");
                     const resp = await epoxyClient.fetch(`https://api.duckduckgo.com/ac?q=${encodeURIComponent(value)}&format=json`);
                     const data = await resp.json();
                     if (data) {

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

@@ -3,8 +3,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);
 const t = useTranslations(lang);
 export function getStaticPaths() {
@@ -20,17 +21,21 @@ export const prerender = true;
 <Layout title="Settings">
   <SettingsLayout title={t("settings.tab")}>
     <SettingsSection title="Tab" subtitle="Customize and cloak your tab.">
-        <div class="w-full h-full flex gap-4">
+        <div class="w-full h-full flex flex-col items-center justify-center md:flex-row md:items-start md:justify-start gap-4">
             <SettingsCard 
                 title="Cloaking" 
                 description="Choose how your tab looks" 
                 input={{input: false}} 
                 button={{name: "Cloak!", id: "cloak"}} 
-                select={{ select: true, name: 'cloak', options: [
+                select={{ select: true, name: 'cloakselect', options: [
+                    {name: 'Default', value: 'reset', disabled: false},
                     {name: 'Google', value: 'google', disabled: false },
-                    { name: 'Wikipedia', value: 'wikipedia', disabled: false}
+                    {name: 'Wikipedia', value: 'wikipedia', disabled: false},
-                    ] }}>
+                    {name: 'Canvas', value: 'canvas', disabled: false},
-            </SettingsCard>
+                    {name: 'Google Classroom', value: 'classroom', disabled: false},
+                    {name: 'Powerschool', value: 'powerschool', disabled: false}
+                    ] }}
+            />
             <SettingsCard
                 title="A:B & Blob" 
                 description="Choose to open your tab in about:blank or blob" 
@@ -39,9 +44,39 @@ export const prerender = true;
                 select={{ select: true, name: 'aboutblank', options: [
                     {name: 'About:Blank', value: 'a:b', disabled: false}, 
                     {name: 'Blob', value: 'blob', disabled: false}
-                    ] }}>
+                    ] }}
-            </SettingsCard>
+            />
         </div>
     </SettingsSection>
   </SettingsLayout>
+  { /* The toast notifications :D */ }
+  <ToastWrapper client:load>
+    <Toast toastProp={{toastType: "success", text: "Successfully set cloak!", class: "cloakMessageSuccess"}} client:load />
+  </ToastWrapper>
 </Layout>
+
+<script>
+    import { toast } from "@utils/toast.ts"; //A helper function so we don't have to run this logic everytime.
+    import { cloakTab } from "@utils/settings.ts";
+    function setup(cloakValue: HTMLSelectElement) {
+        const cloakLocal = localStorage.getItem("nebula||tabCloak");
+        if (cloakLocal === "default") {
+            cloakValue.value = "reset";
+        }
+        else {
+            cloakValue.value = cloakLocal;
+        }
+    }
+    document.addEventListener("astro:page-load", function() {
+        try {
+            const cloakButton = document.getElementById("cloak") as HTMLElement;
+            const cloakValue = document.getElementById("cloakselect") as HTMLSelectElement;
+            setup(cloakValue);
+            cloakButton.addEventListener("click", () => {
+                cloakTab(cloakValue.value);
+                toast('.cloakMessageSuccess');
+            });
+        }
+        catch (_) { /* We don't want to return anything on purpose */ }
+    })
+</script>

src/utils/settings.ts

@@ -0,0 +1,35 @@
+type TabCloaks = "default" | "google" | "wikipedia" | "canvas" | "classroom" | "powerschool"
+function cloakTab(cloak: TabCloaks | string) {
+    const faviconElement = document.getElementById("favicon") as HTMLLinkElement;
+    localStorage.setItem("nebula||tabCloak", cloak); 
+    switch(cloak) {
+        case "google":
+            document.title = "Google";
+            faviconElement.href = "/cloaks/google.png";
+            break;
+        case "wikipedia":
+            document.title = "Wikipedia";
+            faviconElement.href = "/cloaks/wikipedia.ico";
+            break;
+        case "canvas":
+            document.title = "Dashboard";
+            faviconElement.href = "/cloaks/canvas.ico";
+            break;
+        case "classroom":
+            document.title = "Home";
+            faviconElement.href = "/cloaks/classroom.png";
+            break;
+        case "powerschool":
+            document.title = "PowerSchool";
+            faviconElement.href = "/cloaks/ps.ico";
+            break;
+        case "reset":
+            //force a reset of favicon & title
+            localStorage.setItem("nebula||tabCloak", "default");
+            window.location.reload();
+        default:
+            return;
+    }
+}
+
+export { cloakTab }

src/utils/toast.ts

@@ -0,0 +1,20 @@
+type ToastType = "success" | "error" | "promise" | "multiline";
+type Position = "top-left" | "top-middle" | "top-right" | "bottom-left" | "bottom-right" | "bottom-center";
+interface Props {
+    toastType: ToastType;
+    text: string;
+    class: string;
+    id?: string;
+    duration?: number;
+    emoji?: any;
+    position?: Position;
+} 
+
+function toast(query: string) {
+    //this is a really hacky solution for toast notifications LOL
+    const element = document.querySelector(query) as HTMLElement;
+    //click the element
+    element.click();
+}
+
+export { type ToastType, type Position, type Props, toast }