Dude, what did I breakkk

package.json

@@ -11,32 +11,32 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.8.2",
+    "@astrojs/check": "^0.8.3",
-    "@astrojs/node": "^8.3.2",
+    "@astrojs/node": "^8.3.4",
-    "@astrojs/svelte": "^5.7.0",
+    "@astrojs/svelte": "^5.7.1",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/tailwind": "^5.1.1",
     "@fastify/compress": "^7.0.3",
     "@fastify/static": "^7.0.4",
-    "@iconify-json/ph": "^1.1.13",
+    "@iconify-json/ph": "^1.2.0",
     "@mercuryworkshop/bare-mux": "1.1.1",
     "@mercuryworkshop/epoxy-tls": "2.1.4-1",
     "@mercuryworkshop/epoxy-transport": "2.0.1",
     "@titaniumnetwork-dev/ultraviolet": "3.1.2",
-    "astro": "^4.12.2",
+    "astro": "^4.15.9",
-    "astro-icon": "^1.1.0",
+    "astro-icon": "^1.1.1",
     "concurrently": "^8.2.2",
-    "express": "^4.19.2",
+    "express": "^4.21.0",
     "fastify": "^4.28.1",
     "form-data": "^4.0.0",
     "formdata-node": "^6.0.3",
-    "multer": "^1.4.5-lts.1",
+    "multer": "1.4.5-lts.1",
     "nanostores": "^0.10.3",
     "sequelize": "^6.37.3",
     "sqlite3": "^5.1.7",
-    "svelte": "^4.2.18",
+    "svelte": "^4.2.19",
-    "tailwindcss": "^3.4.6",
+    "tailwindcss": "^3.4.13",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
     "vite-plugin-static-copy": "^1.0.6",
-    "wisp-server-node": "^1.1.3"
+    "wisp-server-node": "^1.1.7"
   }
 }

src/components/settings/SettingsCard.astro

@@ -0,0 +1,53 @@
+---
+interface Inputs {
+    input: boolean;
+    required?: boolean;
+    placeholder?: string;
+}
+interface SelectOptions {
+    value: string;
+    name: string;
+    disabled: boolean;
+}
+interface Selects {
+    select: boolean;
+    name?: string;
+    multiple?: boolean;
+    options?: SelectOptions[];
+}
+interface Buttons {
+    name: string;
+    id: string;
+}
+interface Props {
+    title: string;
+    description: string;
+    input: Inputs;
+    select: Selects;
+    button: Buttons;
+}
+
+const { title, description, input, select, button } = Astro.props;
+---
+
+<div class="w-64 rounded-3xl bg-navbar-color h-64 flex flex-col items-center p-4">
+    <h1 class="text-3xl font-bold mb-2"> { title } </h1>
+    <p class="text-md w-full text-ellipsis text-center"> { description } </p>
+    <div class="w-full h-full flex-grow flex justify-center items-center flex-col gap-4">
+        <!-- We only want to render an input if it's enabled -->
+        {input.input &&
+            <input class="text-md w-full h-10 p-2 bg-input border border-input-border-color rounded-md text-input-text" required={input.required} placeholder={input.placeholder}></input>
+        }
+        <!-- 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.options!.map((option) => (
+                    <option disabled={option.disabled} value={option.value}>{option.name}</option>
+                ))}
+            </select>
+        }
+        <button id={button.id.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()} class="w-36 h-10 rounded-md border border-input-border-color text-input-text bg-input hover:border-input hover:bg-input-border-color hover:text-input hover:font-bold active:bg-input active:text-input-text transition-all duration-200"> 
+            {button.name}
+        </button>
+    </div>
+</div>

src/layouts/Layout.astro

@@ -1,7 +1,7 @@
 ---
-import Header from "../components/Header.astro";
+import Header from "@components/Header.astro";
 import { ViewTransitions } from "astro:transitions";
-import MobileNavigation from "../components/MobileNavigation.astro";
+import MobileNavigation from "@components/MobileNavigation.astro";
 
 interface Props {
   title: string;

src/layouts/SettingsLayout.astro

@@ -3,7 +3,7 @@ import { getLangFromUrl, useTranslations } from "../i18n/utils";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 const { title } = Astro.props;
-import SidebarButton from "../components/SidebarButton.astro";
+import SidebarButton from "@components/SidebarButton.astro";
 import { Icon } from "astro-icon/components";
 ---
 

src/pages/[lang]/games.astro

@@ -1,5 +1,5 @@
 ---
-import Layout from "../../layouts/Layout.astro";
+import Layout from "@layouts/Layout.astro";
 export function getStaticPaths() {
   const STATIC_PATHS = [
     { params: { lang: "en_US" } },

src/pages/[lang]/index.astro

@@ -1,6 +1,6 @@
 ---
-import Layout from "../../layouts/Layout.astro";
+import Layout from "@layouts/Layout.astro";
-import Logo from "../../components/Logo.astro";
+import Logo from "@components/Logo.astro";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 export function getStaticPaths() {
   const STATIC_PATHS = [

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

@@ -1,13 +1,13 @@
 ---
-import Layout from "../../../layouts/Layout.astro";
+import Layout from "@layouts/Layout.astro";
-import SettingsLayout from "../../../layouts/SettingsLayout.astro";
+import SettingsLayout from "@layouts/SettingsLayout.astro";
-import SettingsSection from "../../../layouts/SettingsSection.astro";
+import SettingsSection from "@layouts/SettingsSection.astro";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
-import ThemeCard from "../../../components/settings/ThemeCard.astro";
+import ThemeCard from "@components/settings/ThemeCard.astro";
 import { Icon } from "astro-icon/components";
 import fortnite from "../../../assets/fortnite.jpg";
 import ClassicNebula from "../../../assets/classic_theme.png";
-import InstalledThemes from "../../../components/catalog/InstalledThemes.svelte";
+import InstalledThemes from "@components/catalog/InstalledThemes.svelte";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 export function getStaticPaths() {

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

@@ -1,7 +1,7 @@
 ---
-import Layout from "../../../layouts/Layout.astro";
+import Layout from "@layouts/Layout.astro";
-import SettingsLayout from "../../../layouts/SettingsLayout.astro";
+import SettingsLayout from "@layouts/SettingsLayout.astro";
-import SettingsSection from "../../../layouts/SettingsSection.astro";
+import SettingsSection from "@layouts/SettingsSection.astro";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 
 const lang = getLangFromUrl(Astro.url);

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

@@ -1,7 +1,8 @@
 ---
-import Layout from "../../../layouts/Layout.astro";
+import Layout from "@layouts/Layout.astro";
-import SettingsLayout from "../../../layouts/SettingsLayout.astro";
+import SettingsLayout from "@layouts/SettingsLayout.astro";
-import SettingsSection from "../../../layouts/SettingsSection.astro";
+import SettingsSection from "@layouts/SettingsSection.astro";
+import SettingsCard from "@components/settings/SettingsCard.astro";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 
 const lang = getLangFromUrl(Astro.url);
@@ -19,7 +20,28 @@ export const prerender = true;
 <Layout title="Settings">
   <SettingsLayout title={t("settings.tab")}>
     <SettingsSection title="Tab" subtitle="Customize and cloak your tab.">
-        Guhh
+        <div class="w-full h-full flex 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: [
+                    {name: 'Google', value: 'google', disabled: false }, 
+                    { name: 'Wikipedia', value: 'wikipedia', disabled: false}
+                    ] }}>
+            </SettingsCard
+            <SettingsCard
+                title="A:B & Blob" 
+                description="Choose to open your tab in about:blank or blob" 
+                input={{input: false}} 
+                button={{name: "Go!", id: "aboutblank"}} 
+                select={{ select: true, name: 'aboutblank', options: [
+                    {name: 'About:Blank', value: 'a:b', disabled: false}, 
+                    {name: 'Blob', value: 'blob', disabled: false}
+                    ] }}>
+            </SettingsCard>
+        </div>
     </SettingsSection>
   </SettingsLayout>
 </Layout>

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

@@ -1,6 +1,6 @@
 ---
 const { package_name } = Astro.params;
-import Layout from "../../layouts/Layout.astro";
+import Layout from "@layouts/Layout.astro";
 const response = await fetch(
   new URL("/api/packages/" + package_name, Astro.url)
 );

src/pages/catalog/[...page].astro

@@ -1,6 +1,6 @@
 ---
-import Layout from "../../layouts/Layout.astro";
+import Layout from "@layouts/Layout.astro";
-import CatalogCard from "../../components/catalog/CatalogCard.svelte";
+import CatalogCard from "@components/catalog/CatalogCard.svelte";
 import Pagnation from "./pagnation.astro";
 
 const { page } = Astro.params;

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
-import Layout from "../layouts/Layout.astro";
+import Layout from "@layouts/Layout.astro";
-import Card from "../components/Card.astro";
+import Card from "@components/Card.astro";
 ---
 
 loading...

tsconfig.json

@@ -4,6 +4,8 @@
   "compilerOptions": {
       "baseUrl": ".",
       "paths": {
+          "@components/*": ["src/components/*"],
+          "@layouts/*": ["src/layouts/*"],
           "@utils/*" : ["src/utils/*"]
       }
   }