Settings init is close to being ready to do

src/components/settings/Loader.astro

@@ -25,8 +25,21 @@
     */
     import { EventHandler } from "@utils/events";
     import { SW, createProxyScripts, checkProxyScripts, createBareMuxConn, setTransport } from "@utils/serviceWorker";
-    
+    import { log } from "@utils/index";
+    const titleText = ` 
+     _   _      _           _         ____                  _               
+    | \\ | | ___| |__  _   _| | __ _  / ___|  ___ _ ____   _(_) ___ ___  ___ 
+    |  \\| |/ _ \\ '_ \\| | | | |/ _' | \\___ \\ / _ \\ '__\\ \\ / / |/ __/ _ \\/ __|
+    | |\\  |  __/ |_) | |_| | | (_| |  ___) |  __/ |   \\ V /| | (_|  __/\\__ \\
+    |_| \\_|\\___|_.__/ \\__,_|_|\\__,_| |____/ \\___|_|    \\_/ |_|\\___\\___||___/
+    `;
+    const info = "Hello developer or curious individual & welcome to the console! \nThere isn't a whole lot here for you unless you have run into an error.";
+        const sysInfo = `In which case please include the info below when opening the issue: \n\nOS: ${navigator.platform} \nBrowser: ${navigator.userAgent} \nService workers: ${"serviceWorker" in navigator ? "Yes" : "No"}`
     const init = async () => {
+        log("normal", { bg: false, prefix: false }, titleText);
+        log("normal", { bg: true, prefix: false }, info);
+        log("normal", { bg: true, prefix: false }, sysInfo);
+        log("info", { bg: true, prefix: true }, "General init...");
         for (const script of createProxyScripts()) {
             document.body.appendChild(script);
         }
@@ -34,12 +47,21 @@
         const conn = await createBareMuxConn("/baremux/worker.js");
         await setTransport(conn, "libcurl");
         window.sw = new SW(conn);
+        log("info", { bg: true, prefix: true }, "General init completed");
     }
 
+    const settingsInit = async () => {
+        log("info", { bg: true, prefix: true }, "Initializing settings...");
+        log("info", { bg: true, prefix: true }, "Initialized Settings!");
+    };
+
     const eventHandler = new EventHandler({
         events: {
             "DOMContentLoaded": (async () => {
                 await init();
+            }),
+            "astro:page-load": (async () => {
+                await settingsInit();
             })
         },
         logging: true 

src/utils/index.ts

@@ -19,6 +19,13 @@ interface Props {
     position?: ToastPosition;
 }
 
+/**
+    * This allows us to call our toast notifs.
+    *
+    * @example
+    * import { toast } from "@utils/index";
+    * toast(".toastMessage");
+*/
 function toast(query: string) {
     const wrapper = document.getElementById("toastwrapper") as HTMLDivElement;
     wrapper.classList.remove("hidden");
@@ -28,6 +35,13 @@ function toast(query: string) {
     element.click();
 }
 
+/**
+    * Allows use to turn a basic phrase into a full URL. Mainly used when ther user enters something in for use in UV/SJ
+    *
+    * @example
+    * import { search } from "@utils/index";
+    * search("YES", "https://www.google.com/search?q=%s");
+*/
 function search(input: string, template: string) {
     try { return new URL(input).toString() } catch (_) {};
 
@@ -39,10 +53,67 @@ function search(input: string, template: string) {
     return template.replace("%s", encodeURIComponent(input));
 }
 
+type LogTypes = "normal" | "info" | "error" | "warn";
+/**
+    * Custom built log function with styles applied.
+    *
+    * @example
+    * import { log } from "@utils/index";
+    * log("info", opts: { bg: true, prefix: false }, message: "This is an example"); // BG can be true or false when BG is false, most of the time it reverts back to normal styling (except for the "normal" mode). When prefix is true, this adds a prefix of the type of message used.
+*/
+const log = (type: LogTypes, opts: { bg: boolean, prefix: boolean }, message: string) => {
+    const styles = {
+        warn: {
+            bg: {
+                color: "#ffffff",
+                bg: "#cc3300"
+            },
+            normal: "#ffffff"
+        },
+        error: {
+            bg: {
+                color: "#ffffff",
+                bg: "#cc0000"
+            },
+            normal: "#ffffff"
+        },
+        info: {
+            bg: {
+                color: "#ffffff",
+                bg: "#088F8F"
+            },
+            normal: "#088F8F"
+        },
+        normal: {
+            bg: {
+                color: "#ffffff",
+                bg: "#7967dd"
+            },
+            normal: "#7967dd"
+        }
+    }
+    switch(type) {
+        case "info": 
+            console.info(`%c${opts.prefix ? `Info: ${message}` : message}`, `${opts.bg ? `color: ${styles.info.bg.color}; background-color: ${styles.info.bg.bg}; padding: 2px 10px; font-weight: bold;` : `color: ${styles.info.normal}; font-weight: bold;`}`);
+            break;
+        case "error": 
+            console.error(`%c${opts.prefix ? `Error: ${message}` : message }`, `${opts.bg ? `color: ${styles.error.bg.color}; background-color: ${styles.error.bg.bg}; padding: 2px 10px;` : `color: ${styles.error.normal};`}`);
+            break;
+        case "warn": 
+            console.warn(`%c${opts.prefix ? `Warning: ${message}` : message}`, `${opts.bg ? `color: ${styles.warn.bg.color}; background-color: ${styles.warn.bg.bg}; padding: 2px 10px;` : `color: ${styles.warn.normal};`}`);
+            break;
+        case "normal": 
+            console.log(`%c${message}`, `${opts.bg ? `color: ${styles.normal.bg.color}; background-color: ${styles.normal.bg.bg}; padding: 2px 10px; font-weight: bold;` : `color: ${styles.normal.normal}; font-weight: bold;`}`);
+            break;
+    }
+};
+
+
 export { 
     type TType, 
     type ToastPosition, 
     type Props, 
     toast,
-    search
+    search,
+    log
 };

src/utils/values.ts

@@ -30,7 +30,20 @@ const SupportedSites: Record<string, "uv" | "sj"> = {
 */
 const SettingsVals = {
     proxy: {
-        wispServer: "wispServerUrl"
+        wispServer: "wispServerUrl",
+        proxy: "proxy",
+        searchEngine: "searchEngine",
+        transport: "transport"
+    },
+    tab: {
+        cloak: "cloak"
+    },
+    marketPlace: {
+        appearance: {
+            video: "video",
+            image: "image",
+            themeName: "themeName"
+        }
     }
 }