Settings: revamp into seperate files.

server.js

@@ -293,18 +293,18 @@ app.use("/scripts/", express.static("./database_assets/scripts"));
 app.use(ssrHandler);
 app.use(express.static(publicPath));
 
-// await catalog_assets.create({
+//await catalog_assets.create({
-//   package_name: "com.nebula.cybermonay",
+//    package_name: "com.nebula.cybermonay",
-//   title: "Cyber Monay",
+//    title: "Cyber Monay",
-//   image: "cyber_monay.jpg",
+//    image: "cyber_monay.jpg",
-//   author: "Nebula Services",
+//    author: "Nebula Services",
-//   version: "1.0.0",
+//    version: "1.0.0",
-//   description: 'A parody of the famous "Cyber Monay" hack!',
+ //   description: 'A parody of the famous "Cyber Monay" hack!',
-//   tags: ["Hacking", "Animated", "Funny"],
+ //   tags: ["Hacking", "Animated", "Funny"],
-//   payload: "com.nebula.cybermonay.css",
+  //  payload: "com.nebula.cybermonay.css",
-//   background_video: "cyber_monay_test.mp4",
+   // background_video: "cyber_monay_test.mp4",
-//   type: "theme",
+    //type: "theme",
-// });
+//});
 
 // await catalog_assets.create({
 //   package_name: "com.neptune.neptune",

src/components/catalog/CatalogCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Settings } from "@utils/settings";
+import { Settings } from "@utils/settings/index";
 import { Suspense } from "@svelte-drama/suspense";
 export let page;
 async function getAssets() {

src/components/catalog/InstalledThemes.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Suspense } from "@svelte-drama/suspense";
-    import { Settings, marketPlaceSettings } from '@utils/settings';
+    import { Settings, settings } from '@utils/settings/index';
     import Parent from "./Parent.svelte";
     async function getItem(item) {
         try {
@@ -28,7 +28,7 @@
 </script>
 <Suspense let:suspend>
     <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
-        <div class="w-full" on:click={() => {marketPlaceSettings.changeTheme(true)}}>
+        <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(true)}}>
             <img src='/classic_theme.png' alt="Classic Nebula" class="aspect-[16/9] rounded-t-3xl"/>
         </div>
         <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
@@ -39,13 +39,13 @@
     {#each Object.entries(data) as [key, asset]}
         <Parent bind:this={compRef[key]}>
             <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
-                <div class="w-full" on:click={() => {marketPlaceSettings.changeTheme(false, asset.payload, asset.background_video, asset.background_image)}}>
+                <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(false, asset.payload, asset.background_video, asset.background_image)}}>
                     <img src={`/images/${asset.image}`} alt="theme" class="aspect-[16/9] rounded-t-3xl"/>
                 </div>
                 <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
                     <div class="text-2xl"> {asset.title} </div>
                     <div class="flex flex-row">
-                        <div class="h-8 w-8 cursor-pointer" on:click={() => {marketPlaceSettings.uninstall("theme", asset.package_name); marketPlaceSettings.changeTheme(true); compRef[key].$destroy()}}>
+                        <div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall("theme", asset.package_name); settings.marketPlaceSettings.changeTheme(true); compRef[key].$destroy()}}>
                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
                                 <path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
                             </svg>

src/components/settings/Loader.astro

@@ -1,15 +1,15 @@
 <script>
-    import { tabSettings, proxySettings, marketPlaceSettings, Settings } from "@utils/settings.ts";
+    import { settings, Settings } from "@utils/settings/index";
     // This loads the settings in a nice way
-    tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
+    settings.tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
-    proxySettings.changeProxy(localStorage.getItem(Settings.ProxySettings.proxy) as string || "automatic");
+    settings.proxySettings.changeProxy(localStorage.getItem(Settings.ProxySettings.proxy) as string || "automatic");
-    proxySettings.openIn(localStorage.getItem(Settings.ProxySettings.openIn) as string || "embed");
+    settings.proxySettings.openIn(localStorage.getItem(Settings.ProxySettings.openIn) as string || "embed");
-    proxySettings.setSearchEngine(localStorage.getItem(Settings.ProxySettings.searchEngine) as string || "ddg");
+    settings.proxySettings.setSearchEngine(localStorage.getItem(Settings.ProxySettings.searchEngine) as string || "ddg");
-    proxySettings.setWispURL(localStorage.getItem(Settings.ProxySettings.wispServerURL) as string || "default");
+    settings.proxySettings.setWispURL(localStorage.getItem(Settings.ProxySettings.wispServerURL) as string || "default");
-    proxySettings.setTransport(localStorage.getItem(Settings.ProxySettings.transport) as string || "epoxy");
+    settings.proxySettings.setTransport(localStorage.getItem(Settings.ProxySettings.transport) as string || "epoxy");
-    marketPlaceSettings.changeTheme(false, undefined, localStorage.getItem(Settings.AppearanceSettings.video) as string, localStorage.getItem(Settings.AppearanceSettings.image) as string);
+    settings.marketPlaceSettings.changeTheme(false, undefined, localStorage.getItem(Settings.AppearanceSettings.video) as string, localStorage.getItem(Settings.AppearanceSettings.image) as string);
     document.addEventListener("astro:after-swap", function() {
-        tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
+        settings.tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
-        //marketPlaceSettings.changeTheme(false);
+        //settings.marketPlaceSettings.changeTheme(false);
     });
 </script>

src/pages/[lang]/games.astro

@@ -12,7 +12,7 @@ export const prerender = true;
 </Layout>
 <script>
     import { initSw, setTransport } from "@utils/registerSW.ts"; //../../utils/registerSW.ts
-    import { Settings } from "@utils/settings.ts";
+    import { Settings } from "@utils/settings/index";
     document.addEventListener("astro:page-load", async function () {
         try {
             const iframe = document.getElementById("chango") as HTMLIFrameElement;

src/pages/[lang]/index.astro

@@ -54,7 +54,7 @@ const t = useTranslations(lang);
     SearchEngines,
     Settings,
     cloak,
-  } from "@utils/settings";
+  } from "@utils/settings/index";
   import { search } from "@utils/search.ts"; //../../utils/search.ts
   //@ts-expect-error No types, expected. See: https://github.com/ading2210/libcurl.js for docs on how to use.
   import { libcurl } from "libcurl.js-new/bundled";

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

@@ -132,7 +132,7 @@ export const prerender = true;
 </Layout>
 <script>
     import { toast } from "@utils/toast.ts";
-    import { proxySettings, Settings as SettingsEnum } from "@utils/settings.ts";
+    import { settings, Settings as SettingsEnum } from "@utils/settings/index";
     function setup(proxySelectVal: HTMLSelectElement, openInVal: HTMLSelectElement, searchEngineVal: HTMLSelectElement, wispServerVal: HTMLSelectElement, transportVal: HTMLSelectElement) {
         proxySelectVal.value = localStorage.getItem(SettingsEnum.ProxySettings.proxy) as string;
         openInVal.value = localStorage.getItem(SettingsEnum.ProxySettings.openIn) as string;
@@ -154,23 +154,23 @@ export const prerender = true;
             const transportVal = document.getElementById('transport') as HTMLSelectElement;
             setup(proxySelectVal, openInVal, searchEngineVal, wispServerVal, transportVal);
             proxyButton.addEventListener("click", () => {
-                proxySettings.changeProxy(proxySelectVal.value);
+                settings.proxySettings.changeProxy(proxySelectVal.value);
                 toast('.proxyMessage');
             });
             openInButton.addEventListener("click", () => {
-                proxySettings.openIn(openInVal.value)
+                settings.proxySettings.openIn(openInVal.value)
                 toast('.openInMessage');
             });
             searchEngineButton.addEventListener('click', () => {
-                proxySettings.setSearchEngine(searchEngineVal.value);
+                settings.proxySettings.setSearchEngine(searchEngineVal.value);
                 toast('.searchEngineMessage');
             });
             wispServerButton.addEventListener('click', () => {
-                proxySettings.setWispURL(wispServerVal.value);
+                settings.proxySettings.setWispURL(wispServerVal.value);
                 toast('.wispUrlMessage');
             });
             transportButton.addEventListener('click', () => {
-                proxySettings.setTransport(transportVal.value);
+                settings.proxySettings.setTransport(transportVal.value);
                 toast('.transportMessage');
             });
         }

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

@@ -55,7 +55,7 @@ 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 { tabSettings, Settings as SettingsEnum } from "@utils/settings.ts";
+    import { settings, Settings as SettingsEnum } from "@utils/settings/index";
     function setup(cloakValue: HTMLSelectElement, abValue: HTMLSelectElement) {
         const cloakLocal = localStorage.getItem(SettingsEnum.TabSettings.tabCloak);
         const abCloakLocal = localStorage.getItem(SettingsEnum.TabSettings.abblob);
@@ -70,12 +70,12 @@ export const prerender = true;
             const abValue = document.getElementById("aboutblank") as HTMLSelectElement;
             setup(cloakValue, abValue);
             cloakButton.addEventListener("click", () => {
-                tabSettings.cloakTab(cloakValue.value);
+                settings.tabSettings.cloakTab(cloakValue.value);
                 toast('.cloakMessageSuccess');
             });
             abButton.addEventListener("click", () => {
                 toast('.abCloakMessage');
-                tabSettings.abCloak(abValue.value);
+                settings.tabSettings.abCloak(abValue.value);
             });
         }
         catch (_) { /* We don't want to return anything on purpose */ }

src/pages/assets/[...packageName].astro

@@ -37,7 +37,7 @@ const assetsJson = await response.json();
     <variable-define data-assets={JSON.stringify(assetsJson)} data-name={packageName} data-type={assetsJson.type} />
 </Layout>
 <script>
-    import { Settings, type PackageType, marketPlaceSettings } from "@utils/settings";
+    import { settings, Settings, type PackageType } from "@utils/settings/index";
     let packageName: string;
     let assetsJson: any;
     let packageType: string;
@@ -63,13 +63,13 @@ const assetsJson = await response.json();
                 installButton.classList.add("hidden");
             }
             installButton.addEventListener("click", () => {
-                marketPlaceSettings.install({theme: {payload: payload.payload, video: payload.background_video, bgImage: payload.background_image}}, packageName, payload.payload).then(() => {
+                settings.marketPlaceSettings.install({theme: {payload: payload.payload, video: payload.background_video, bgImage: payload.background_image}}, packageName, payload.payload).then(() => {
                     installButton.classList.add("hidden");
                     uninstallButton.classList.remove("hidden");
                 })
             });
             uninstallButton.addEventListener("click", () => {
-                marketPlaceSettings.uninstall(packageType as PackageType, packageName).then(() => {
+                settings.marketPlaceSettings.uninstall(packageType as PackageType, packageName).then(() => {
                     uninstallButton.classList.add("hidden")
                     installButton.classList.remove("hidden");
                 });

src/utils/registerSW.ts

@@ -1,4 +1,4 @@
-import { Settings, WispServerURLS } from "./settings";
+import { Settings, WispServerURLS } from "./settings/index";
 function loadProxyScripts() {
   //wrap everything in a promise to avoid race conditions
   return new Promise<void>((resolve) => {

src/utils/settings.ts

@@ -1,232 +0,0 @@
-const wispUrl = (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/";
-const AppearanceSettings = {
-    themes: "nebula||themes",
-    stylePayload: "nebula||stylepayload",
-    video: "nebula||video",
-    image: "nebula||image"
-}
-const TabSettings = {
-  tabCloak: "nebula||tabCloak",
-  abblob: "nebula||abBlob"
-};
-const ProxySettings = {
-  proxy: "nebula||proxy",
-  openIn: "nebula||open",
-  searchEngine: "nebula||searchEngine",
-  wispServerURL: "nebula||wisp",
-  transport: "nebula||transport"
-};
-const Settings = {
-  AppearanceSettings,
-  TabSettings,
-  ProxySettings
-};
-
-type TabCloaks = "default" | "google" | "wikipedia" | "canvas" | "classroom" | "powerschool";
-type AbCloaks = "a:b" | "blob";
-type OpenIn = "a:b" | "blob" | "direct" | "embed";
-type Proxy = "automatic" | "uv" | "rh";
-type Transport = "epoxy" | "libcurl";    
-type PackageType = "theme" | "plugin"
-interface Package {
-    theme?: {
-        payload: string,
-        video?: string
-        bgImage?: string
-    }
-    plugin?: {}
-}
-const SearchEngines: Record<string, string> = {
-  ddg: "https://duckduckgo.com/?q=%s",
-  google: "https://google.com/search?q=%s",
-  bing: "https://bing.com/search?q=%s"
-};
-type SearchEngine = "ddg" | "google" | "bing";
-const WispServerURLS: Record<string, string> = {
-  default: wispUrl,
-  ruby: "wss://ruby.rubynetwork.co/wisp/"
-};
-
-function cloak(cloak: AbCloaks | string, redirect: string, url: string) {
-  switch (cloak) {
-    case "a:b":
-      window.location.replace(redirect);
-      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";
-      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;
-  }
-}
-
-const tabSettings = {
-  cloakTab: function (cloak: TabCloaks | string) {
-    const faviconElement = document.getElementById("favicon") as HTMLLinkElement;
-    localStorage.setItem(Settings.TabSettings.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;
-    }
-  },
-  abCloak: function (type: AbCloaks | string) {
-    localStorage.setItem(Settings.TabSettings.abblob, type);
-    cloak(type as AbCloaks, "https://google.com", window.location.href);
-  }
-};
-
-const proxySettings = {
-  changeProxy: function (proxy: Proxy | string) {
-    localStorage.setItem(Settings.ProxySettings.proxy, proxy);
-  },
-  openIn: function (type: OpenIn | string) {
-    localStorage.setItem(Settings.ProxySettings.openIn, type);
-  },
-  setSearchEngine: function (searchEngine: SearchEngine | string) {
-    localStorage.setItem(Settings.ProxySettings.searchEngine, searchEngine);
-  },
-  setWispURL: function (server: string) {
-    localStorage.setItem(Settings.ProxySettings.wispServerURL, server);
-  },
-  setTransport: function (transport: Transport | string) {
-    localStorage.setItem(Settings.ProxySettings.transport, transport);
-  }
-};
-
-const marketPlaceSettings = { 
-    install: function(p: Package, packageName: string, payload?: any) {
-        return new Promise<void>((resolve) => {
-            if (p.theme) {
-                let themes = localStorage.getItem(Settings.AppearanceSettings.themes) as any;
-                themes ? themes = JSON.parse(themes) : themes = [];
-                if (!themes.find((theme: any) => theme === packageName)) {
-                    themes.push(packageName);
-                    localStorage.setItem(Settings.AppearanceSettings.themes, JSON.stringify(themes));
-                    this.changeTheme(false, payload, p.theme.video, p.theme.bgImage); 
-                }
-                resolve();
-            }
-        });
-    },
-    uninstall: function(p: PackageType, packageName: string) {
-        return new Promise<void>((resolve) => {
-            if (p === "theme") {
-                let items = localStorage.getItem(Settings.AppearanceSettings.themes) as any;
-                items ? items = JSON.parse(items) : items = [];
-                if (items.find((theme: any) => theme === packageName)) {
-                    const idx = items.indexOf(packageName);
-                    items.splice(idx, 1);
-                    localStorage.setItem(Settings.AppearanceSettings.themes, JSON.stringify(items));
-                    this.changeTheme(true);
-                }
-                resolve();
-            }
-        });
-    },
-    changeTheme: async function(reset: Boolean, payload?: any, videoSource?: string, bgSource?: string) {
-        async function resetCSS() {
-            const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
-            localStorage.removeItem(Settings.AppearanceSettings.stylePayload);
-            stylesheet.href = "/nebula.css";
-        }
-        function resetVideo() {
-            localStorage.removeItem(Settings.AppearanceSettings.video);
-            const source = document.getElementById('nebulaVideo')! as HTMLVideoElement;
-            source.src = "";
-        }
-        function resetBGImage() {
-            localStorage.removeItem(Settings.AppearanceSettings.image);
-            const image = document.getElementById("nebulaImage")! as HTMLImageElement;
-            image.style.display = "none";
-            image.src = "";
-        }
-        if (reset === true) {
-            await resetCSS();
-            await resetCSS();
-            resetBGImage();
-            resetVideo();
-        }
-        if (videoSource || localStorage.getItem(Settings.AppearanceSettings.video)) {
-            resetBGImage();
-            resetVideo();
-            const source = document.getElementById("nebulaVideo")! as HTMLVideoElement;
-            if (!localStorage.getItem(Settings.AppearanceSettings.video)) {
-                localStorage.setItem(Settings.AppearanceSettings.video, videoSource as string);
-            }
-            source.src = `/videos/${videoSource ? videoSource : localStorage.getItem(Settings.AppearanceSettings.video)}`
-        }
-        if (bgSource || localStorage.getItem(Settings.AppearanceSettings.image)) {
-            resetVideo();
-            resetBGImage();
-            const image = document.getElementById("nebulaImage")! as HTMLImageElement;
-            if (!localStorage.getItem(Settings.AppearanceSettings.image)) {
-                localStorage.setItem(Settings.AppearanceSettings.image, bgSource as string);
-            }
-            image.style.display = "block";
-            image.src = `/images/${bgSource ? bgSource : localStorage.getItem(Settings.AppearanceSettings.image)}`
-        }
-        if (payload) {
-            const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
-            if (localStorage.getItem(Settings.AppearanceSettings.stylePayload) !== payload) {
-                localStorage.setItem(Settings.AppearanceSettings.stylePayload, payload);
-            }
-            stylesheet.href = `/styles/${localStorage.getItem(Settings.AppearanceSettings.stylePayload)}`;
-        }
-        else {
-            if (localStorage.getItem(Settings.AppearanceSettings.stylePayload)) {
-                const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
-                stylesheet.href = `/styles/${localStorage.getItem(Settings.AppearanceSettings.stylePayload)}`;
-            }
-        }
-    }
-}
-
-export { tabSettings, proxySettings, marketPlaceSettings, Settings, WispServerURLS, SearchEngines, cloak, type Proxy, type PackageType };

src/utils/settings/index.ts

@@ -0,0 +1,35 @@
+//Combine all of the other settings into one object. And export that (along with types and other things)
+import { AppearanceSettings, marketPlaceSettings } from "./marketplace";
+import { TabSettings, tabSettings, cloak } from "./tab";
+import { ProxySettings, proxySettings } from "./proxy";
+import { type TabCloaks, type AbCloaks, type OpenIn, type Proxy, type Transport, type PackageType, type Package, SearchEngines, type SearchEngine, WispServerURLS, wispUrl } from "./types";
+
+const Settings = {
+  AppearanceSettings,
+  TabSettings,
+  ProxySettings
+};
+
+const settings = {
+    marketPlaceSettings,
+    tabSettings,
+    proxySettings
+}
+
+//export all of the stuffs
+export {
+    Settings,
+    settings,
+    SearchEngines,
+    WispServerURLS,
+    wispUrl,
+    cloak,
+    type TabCloaks,
+    type AbCloaks,
+    type OpenIn,
+    type Proxy,
+    type Transport,
+    type PackageType,
+    type Package,
+    type SearchEngine
+}

src/utils/settings/marketplace.ts

@@ -0,0 +1,98 @@
+//marketplace code & handlers
+import { type Package, type PackageType } from "./types";
+const AppearanceSettings = {
+    themes: "nebula||themes",
+    stylePayload: "nebula||stylepayload",
+    video: "nebula||video",
+    image: "nebula||image"
+}
+
+const marketPlaceSettings = { 
+    install: function(p: Package, packageName: string, payload?: any) {
+        return new Promise<void>((resolve) => {
+            if (p.theme) {
+                let themes = localStorage.getItem(AppearanceSettings.themes) as any;
+                themes ? themes = JSON.parse(themes) : themes = [];
+                if (!themes.find((theme: any) => theme === packageName)) {
+                    themes.push(packageName);
+                    localStorage.setItem(AppearanceSettings.themes, JSON.stringify(themes));
+                    this.changeTheme(false, payload, p.theme.video, p.theme.bgImage); 
+                }
+                resolve();
+            }
+        });
+    },
+    uninstall: function(p: PackageType, packageName: string) {
+        return new Promise<void>((resolve) => {
+            if (p === "theme") {
+                let items = localStorage.getItem(AppearanceSettings.themes) as any;
+                items ? items = JSON.parse(items) : items = [];
+                if (items.find((theme: any) => theme === packageName)) {
+                    const idx = items.indexOf(packageName);
+                    items.splice(idx, 1);
+                    localStorage.setItem(AppearanceSettings.themes, JSON.stringify(items));
+                    this.changeTheme(true);
+                }
+                resolve();
+            }
+        });
+    },
+    changeTheme: async function(reset: Boolean, payload?: any, videoSource?: string, bgSource?: string) {
+        async function resetCSS() {
+            const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
+            localStorage.removeItem(AppearanceSettings.stylePayload);
+            stylesheet.href = "/nebula.css";
+        }
+        function resetVideo() {
+            localStorage.removeItem(AppearanceSettings.video);
+            const source = document.getElementById('nebulaVideo')! as HTMLVideoElement;
+            source.src = "";
+        }
+        function resetBGImage() {
+            localStorage.removeItem(AppearanceSettings.image);
+            const image = document.getElementById("nebulaImage")! as HTMLImageElement;
+            image.style.display = "none";
+            image.src = "";
+        }
+        if (reset === true) {
+            await resetCSS();
+            await resetCSS();
+            resetBGImage();
+            resetVideo();
+        }
+        if (videoSource || localStorage.getItem(AppearanceSettings.video)) {
+            resetBGImage();
+            resetVideo();
+            const source = document.getElementById("nebulaVideo")! as HTMLVideoElement;
+            if (!localStorage.getItem(AppearanceSettings.video)) {
+                localStorage.setItem(AppearanceSettings.video, videoSource as string);
+            }
+            source.src = `/videos/${videoSource ? videoSource : localStorage.getItem(AppearanceSettings.video)}`
+        }
+        if (bgSource || localStorage.getItem(AppearanceSettings.image)) {
+            resetVideo();
+            resetBGImage();
+            const image = document.getElementById("nebulaImage")! as HTMLImageElement;
+            if (!localStorage.getItem(AppearanceSettings.image)) {
+                localStorage.setItem(AppearanceSettings.image, bgSource as string);
+            }
+            image.style.display = "block";
+            image.src = `/images/${bgSource ? bgSource : localStorage.getItem(AppearanceSettings.image)}`
+        }
+        if (payload) {
+            const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
+            if (localStorage.getItem(AppearanceSettings.stylePayload) !== payload) {
+                localStorage.setItem(AppearanceSettings.stylePayload, payload);
+            }
+            stylesheet.href = `/styles/${localStorage.getItem(AppearanceSettings.stylePayload)}`;
+        }
+        else {
+            if (localStorage.getItem(AppearanceSettings.stylePayload)) {
+                const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
+                stylesheet.href = `/styles/${localStorage.getItem(AppearanceSettings.stylePayload)}`;
+            }
+        }
+    }
+}
+
+export { AppearanceSettings, marketPlaceSettings };

src/utils/settings/proxy.ts

@@ -0,0 +1,29 @@
+//Proxy specific settings.
+import { type Proxy, type OpenIn, type SearchEngine, type Transport } from "./types";
+const ProxySettings = {
+  proxy: "nebula||proxy",
+  openIn: "nebula||open",
+  searchEngine: "nebula||searchEngine",
+  wispServerURL: "nebula||wisp",
+  transport: "nebula||transport"
+};
+
+const proxySettings = {
+  changeProxy: function (proxy: Proxy | string) {
+    localStorage.setItem(ProxySettings.proxy, proxy);
+  },
+  openIn: function (type: OpenIn | string) {
+    localStorage.setItem(ProxySettings.openIn, type);
+  },
+  setSearchEngine: function (searchEngine: SearchEngine | string) {
+    localStorage.setItem(ProxySettings.searchEngine, searchEngine);
+  },
+  setWispURL: function (server: string) {
+    localStorage.setItem(ProxySettings.wispServerURL, server);
+  },
+  setTransport: function (transport: Transport | string) {
+    localStorage.setItem(ProxySettings.transport, transport);
+  }
+};
+
+export { ProxySettings, proxySettings };

src/utils/settings/tab.ts

@@ -0,0 +1,83 @@
+//Tab specific settings.
+import { type AbCloaks, type TabCloaks } from "./types";
+const TabSettings = {
+  tabCloak: "nebula||tabCloak",
+  abblob: "nebula||abBlob"
+};
+
+function cloak(cloak: AbCloaks | string, redirect: string, url: string) {
+  switch (cloak) {
+    case "a:b":
+      window.location.replace(redirect);
+      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";
+      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;
+  }
+}
+
+const tabSettings = {
+  cloakTab: function (cloak: TabCloaks | string) {
+    const faviconElement = document.getElementById("favicon") as HTMLLinkElement;
+    localStorage.setItem(TabSettings.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;
+    }
+  },
+  abCloak: function (type: AbCloaks | string) {
+    localStorage.setItem(TabSettings.abblob, type);
+    cloak(type as AbCloaks, "https://google.com", window.location.href);
+  }
+};
+export { tabSettings, TabSettings, cloak };

src/utils/settings/types.ts

@@ -0,0 +1,27 @@
+const wispUrl = (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/";
+type TabCloaks = "default" | "google" | "wikipedia" | "canvas" | "classroom" | "powerschool";
+type AbCloaks = "a:b" | "blob";
+type OpenIn = "a:b" | "blob" | "direct" | "embed";
+type Proxy = "automatic" | "uv" | "rh";
+type Transport = "epoxy" | "libcurl";    
+type PackageType = "theme" | "plugin"
+interface Package {
+    theme?: {
+        payload: string,
+        video?: string
+        bgImage?: string
+    }
+    plugin?: {}
+}
+const SearchEngines: Record<string, string> = {
+  ddg: "https://duckduckgo.com/?q=%s",
+  google: "https://google.com/search?q=%s",
+  bing: "https://bing.com/search?q=%s"
+};
+type SearchEngine = "ddg" | "google" | "bing";
+const WispServerURLS: Record<string, string> = {
+  default: wispUrl,
+  ruby: "wss://ruby.rubynetwork.co/wisp/"
+};
+
+export { type TabCloaks, type AbCloaks, type OpenIn, type Proxy, type Transport, type PackageType, type Package, SearchEngines, type SearchEngine, WispServerURLS, wispUrl }