fix: building working, (lots of bugs)

src/svelte-interface/pages/settings.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import TabbedContainer from '../components/TabbedContainer.svelte';
+  import Settings from './settings/general.svelte';
+  import Shortcuts from './settings/shortcuts.svelte';
+  import Theme from './settings/theme.svelte';
+  /* import Picker from './components/Picker.svelte'; */
+  import browser from 'webextension-polyfill';
+
+  const openChangelog = () => {
+    browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' });
+  };
+
+  
+  import logo from '../../resources/icons/betterseqta-dark-full.png';
+  import logoDark from '../../resources/icons/betterseqta-light-full.png';
+  
+  let standalone = false;
+
+  // Define the tabs array
+  const tabs = [
+    { title: 'Settings', content: Settings },
+    { title: 'Shortcuts', content: Shortcuts },
+    { title: 'Themes', content: Theme },
+  ];
+</script>
+
+<div class="relative flex flex-col w-[384px] shadow-2xl gap-2 bg-white {standalone ? '' : 'rounded-xl'} h-[100vh] overflow-clip dark:bg-zinc-800 dark:text-white">
+  <div class="grid border-b border-b-zinc-200/40 place-items-center">
+    <img src={logo} class="w-4/5 dark:hidden" alt="Light logo" />
+    <img src={logoDark} class="hidden w-4/5 dark:block" alt="Dark logo" />
+    <button on:click={openChangelog} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700"></button>
+  </div>
+  <!-- <Picker /> -->
+  <TabbedContainer {tabs} />
+</div>

src/svelte-interface/pages/settings/general.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import Switch from "../../components/Switch.svelte"
+  import Button from "../../components/Button.svelte"
+  import PickerSwatch from "../../components/PickerSwatch.svelte"
+  import Slider from "../../components/Slider.svelte"
+
+  import browser from "webextension-polyfill"
+  
+  import type { SettingsList } from "../../types/SettingsProps"
+  import { setSettingsValue } from "../../state/SettingsState"
+  
+  const settings: SettingsList[] = [
+    {
+      title: "Transparency Effects",
+      description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
+      id: 1,
+      component: Switch,
+      props: {
+        state: 'transparencyEffects',
+        onChange: (isOn: boolean) => setSettingsValue('transparencyEffects', isOn)
+      }
+    },
+    {
+      title: "Animated Background",
+      description: "Adds an animated background to BetterSEQTA. (May impact battery life)",
+      id: 2,
+      component: Switch,
+      props: {
+        state: 'animatedBackground',
+        onChange: (isOn: boolean) => setSettingsValue('animatedBackground', isOn)
+      }
+    },
+    {
+      title: "Animated Background Speed",
+      description: "Controls the speed of the animated background.",
+      id: 3,
+      component: Slider,
+      props: {
+        state: 'animatedBackgroundSpeed',
+        onChange: (value: number) => setSettingsValue('animatedBackgroundSpeed', `${value}`)
+      }
+    },
+    {
+      title: "Custom Theme Colour",
+      description: "Customise the overall theme colour of SEQTA Learn.",
+      id: 4,
+      component: PickerSwatch
+    },
+    {
+      title: "Telemetry",
+      description: "Enables/disables error collecting.",
+      id: 5,
+      component: Switch,
+      props: {
+        state: 'telemetry',
+        onChange: (isOn: boolean) => setSettingsValue('telemetry', isOn)
+      }
+    },
+    {
+      title: "Edit Sidebar Layout",
+      description: "Customise the sidebar layout.",
+      id: 6,
+      component: Button,
+      props: {
+        onClick: () => browser.runtime.sendMessage({ type: 'currentTab', info: 'EditSidebar' }),
+        text: "Edit"
+      }
+    },
+    {
+      title: "Notification Collector",
+      description: "Uncaps the 9+ limit for notifications, showing the real number.",
+      id: 7,
+      component: Switch,
+      props: {
+        state: 'notificationCollector',
+        onChange: (isOn: boolean) => setSettingsValue('notificationCollector', isOn)
+      }
+    },
+    {
+      title: "Lesson Alerts",
+      description: "Sends a native browser notification ~5 minutes prior to lessons.",
+      id: 8,
+      component: Switch,
+      props: {
+        state: 'lessonAlerts',
+        onChange: (isOn: boolean) => setSettingsValue('lessonAlerts', isOn)
+      }
+    },
+    {
+      title: "BetterSEQTA+",
+      description: "Enables BetterSEQTA+ features",
+      id: 9,
+      component: Switch,
+      props: {
+        state: 'betterSEQTAPlus',
+        onChange: (isOn: boolean) => setSettingsValue('betterSEQTAPlus', isOn)
+      }
+    }
+  ];
+</script>
+
+<div class="flex flex-col -mt-4 overflow-y-scroll divide-y divide-zinc-100 dark:divide-zinc-700">
+  {#each settings as { title, description, component: Component, props, id } (id)}
+    <div  class="flex items-center justify-between px-4 py-3">
+      <div class="pr-4">
+        <h2 class="text-sm font-bold">{title}</h2>
+        <p class="text-xs">{description}</p>
+      </div>
+      <div>
+        {#if props?.state !== undefined}
+          <svelte:component this={Component} {...props} bind:setting={props.state} />
+        {:else}
+          <svelte:component this={Component} {...props} />
+        {/if}
+      </div>
+    </div>
+  {/each}
+</div>

src/svelte-interface/pages/settings/shortcuts.svelte

@@ -0,0 +1 @@
+<div class="text-xl">shortcuts tab</div>

src/svelte-interface/pages/settings/theme.svelte

@@ -0,0 +1 @@
+<div class="text-xl">theme tab</div>