fix: building working, (lots of bugs)

src/SEQTA.ts

@@ -35,6 +35,7 @@ import coursesicon from '@/seqta/icons/coursesIcon'
 import iframeCSS from '@/css/iframe.scss?raw'
 import injectedCSS from '@/css/injected.scss?inline'
 import documentLoadCSS from '@/css/documentload.scss?inline'
+import initSvelteInterface from './svelte-interface/main'
 
 let SettingsClicked = false
 export let MenuOptionsOpen = false
@@ -936,7 +937,7 @@ export function AppendElementsToDisabledPage() {
 
 export function closeSettings() {
   const ExtensionSettings = document.getElementById('ExtensionPopup')!
-  const ExtensionIframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement
+  // = document.getElementById('ExtensionIframe') as HTMLIFrameElement
 
   if (SettingsClicked == true) {
     ExtensionSettings!.classList.add('hide')
@@ -952,9 +953,7 @@ export function closeSettings() {
     }
     SettingsClicked = false
 
-    if (ExtensionIframe.contentWindow) {
-      ExtensionIframe.contentWindow.postMessage('popupClosed', '*')
-    }
+    // hide extension frame
   }
 
   ExtensionSettings!.classList.add('hide')
@@ -968,23 +967,26 @@ export function addExtensionSettings() {
   const extensionContainer = document.querySelector('#container') as HTMLDivElement
   if (extensionContainer) extensionContainer.appendChild(extensionPopup)
 
-  const extensionIframe: HTMLIFrameElement = document.createElement('iframe')
-  extensionIframe.src = `${browser.runtime.getURL('interface/index.html')}#settings/embedded`
+  /* const extensionIframe: HTMLIFrameElement = document.createElement('iframe')
+  extensionIframe.src = `${browser.runtime.getURL('svelte-interface/index.html')}#settings/embedded`
   extensionIframe.id = 'ExtensionIframe'
   extensionIframe.setAttribute('allowTransparency', 'true')
   extensionIframe.setAttribute('excludeDarkCheck', 'true')
   extensionIframe.style.width = '384px'
   extensionIframe.style.height = '100%'
   extensionIframe.style.border = 'none'
-  extensionPopup.appendChild(extensionIframe)
+  extensionPopup.appendChild(extensionIframe) */
+
+  // create shadow dom and render svelte app
+  const shadow = extensionPopup.attachShadow({ mode: 'open' });
+  const svelteApp = initSvelteInterface(shadow);
+  console.log(svelteApp)
 
   const container = document.getElementById('container')
 
   new SettingsResizer();
   
   const closeExtensionPopup = () => {
-    const ExtensionIframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement
-
     extensionPopup.classList.add('hide')
     if (settingsState.animations) {
       animate(
@@ -996,14 +998,13 @@ export function addExtensionSettings() {
       extensionPopup.style.opacity = '0'
       extensionPopup.style.transform = 'scale(0)'
     }
-    if (ExtensionIframe.contentWindow) {
-      ExtensionIframe.contentWindow.postMessage('popupClosed', '*')
-    }
+    // tell it popup closed
     SettingsClicked = false
   }
 
   container!.onclick = (event) => {
     if ((event.target as HTMLElement).closest('#AddedSettings') == null && SettingsClicked) {
+      if (event.target == extensionPopup) return;
       closeExtensionPopup()
     }
   }
@@ -1247,7 +1248,7 @@ export function setupSettingsButton() {
         extensionPopup!.style.opacity = '0'
         extensionPopup!.style.transform = 'scale(0)'
       }
-      (document.getElementById('ExtensionIframe')! as HTMLIFrameElement).contentWindow!.postMessage('popupClosed', '*');
+      /* (document.getElementById('ExtensionIframe')! as HTMLIFrameElement).contentWindow!.postMessage('popupClosed', '*'); */
       SettingsClicked = false;
     } else {
       extensionPopup!.classList.remove('hide');

src/manifests/manifest.json

@@ -10,7 +10,7 @@
   },
   "action": {
     "browser_style": true,
-    "default_popup": "interface/index.html#settings",
+    "default_popup": "svelte-interface/index.html#settings",
     "default_icon": {
       "32": "resources/icons/icon-32.png",
       "48": "resources/icons/icon-48.png",
@@ -30,10 +30,6 @@
     }
   ],
   "web_accessible_resources": [
-    {
-      "resources": ["interface/index.html"],
-      "matches": ["*://*/*"]
-    },
     {
       "resources": ["seqta/ui/background/background.html"],
       "matches": ["*://*/*"]

src/seqta/ui/themes/UpdateThemePreview.ts

@@ -1,4 +1,4 @@
-import { CustomThemeBase64 } from '@/interface/types/CustomThemes';
+import type { CustomThemeBase64 } from '@/old-interface/types/CustomThemes';
 import { applyCustomCSS, imageData, removeImageFromDocument, UpdateImageData } from './Themes';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 

src/seqta/ui/themes/applyTheme.ts

@@ -1,4 +1,4 @@
-import { CustomImage, CustomTheme } from '@/interface/types/CustomThemes';
+import type { CustomImage, CustomTheme } from '@/old-interface/types/CustomThemes';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 import { applyCustomCSS } from './Themes';
 

src/seqta/ui/themes/deleteTheme.ts

@@ -1,5 +1,5 @@
 import localforage from 'localforage';
-import { CustomTheme } from '@/interface/types/CustomThemes';
+import type { CustomTheme } from '@/old-interface/types/CustomThemes';
 import { removeTheme } from './removeTheme';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 

src/seqta/ui/themes/disableTheme.ts

@@ -1,5 +1,5 @@
 import localforage from 'localforage';
-import { CustomTheme } from '@/interface/types/CustomThemes';
+import type { CustomTheme } from '@/old-interface/types/CustomThemes';
 import { removeTheme } from './removeTheme';
 import { Mutex } from '@/seqta/utils/mutex';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';

src/seqta/ui/themes/downloadTheme.ts

@@ -1,5 +1,5 @@
 import localforage from 'localforage';
-import { Theme } from '@/interface/pages/Store';
+import type { Theme } from '@/old-interface/pages/Store';
 import base64ToBlob from '@/seqta/utils/base64ToBlob';
 
 type ThemeContent = {

src/seqta/ui/themes/enableCurrent.ts

@@ -1,5 +1,5 @@
 import localforage from 'localforage';
-import { CustomTheme } from '@/interface/types/CustomThemes';
+import type { CustomTheme } from '@/old-interface/types/CustomThemes';
 import { applyTheme } from './applyTheme';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 

src/seqta/ui/themes/getAvailableThemes.ts

@@ -1,5 +1,5 @@
 import localforage from 'localforage';
-import { CustomTheme, ThemeList } from '@/interface/types/CustomThemes';
+import type { CustomTheme, ThemeList } from '@/old-interface/types/CustomThemes';
 import { blobToBase64 } from '@/seqta/utils/blobToBase64';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 

src/seqta/ui/themes/getTheme.ts

@@ -1,5 +1,5 @@
 import localforage from 'localforage';
-import { CustomImageBase64, CustomTheme, CustomThemeBase64 } from '@/interface/types/CustomThemes';
+import type { CustomImageBase64, CustomTheme, CustomThemeBase64 } from '@/old-interface/types/CustomThemes';
 import { blobToBase64 } from '@/seqta/utils/blobToBase64'; 
 
 

src/seqta/ui/themes/removeTheme.ts

@@ -1,5 +1,5 @@
 import localforage from 'localforage';
-import { CustomTheme } from '@/interface/types/CustomThemes';
+import type { CustomTheme } from '@/old-interface/types/CustomThemes';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 
 export const removeTheme = async (theme: CustomTheme) => {

src/seqta/ui/themes/saveTheme.ts

@@ -1,5 +1,5 @@
 import localforage from 'localforage';
-import { CustomTheme, CustomThemeBase64 } from '@/interface/types/CustomThemes';
+import type { CustomTheme, CustomThemeBase64 } from '@/old-interface/types/CustomThemes';
 import { disableTheme } from './disableTheme';
 
 

src/seqta/ui/themes/setTheme.ts

@@ -1,5 +1,5 @@
 import localforage from 'localforage';
-import { CustomTheme } from '@/interface/types/CustomThemes';
+import type { CustomTheme } from '@/old-interface/types/CustomThemes';
 import { applyTheme } from './applyTheme';
 import { removeTheme } from './removeTheme';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';

src/seqta/utils/listeners/SettingsState.ts

@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill';
-import { SettingsState } from '@/types/storage';
+import type { SettingsState } from '@/types/storage';
 
 type ChangeListener = (newValue: any, oldValue: any) => void;
 

src/seqta/utils/listeners/StorageChanges.ts

@@ -12,7 +12,7 @@ import {
 } from '@/SEQTA';
 import { updateBgDurations } from '@/seqta/ui/Animation';
 import browser from 'webextension-polyfill';
-import { CustomShortcut } from '@/types/storage';
+import type { CustomShortcut } from '@/types/storage';
 
 export class StorageChangeHandler {
   constructor() {

src/seqta/utils/sendThemeUpdate.ts

@@ -1,6 +1,6 @@
 export default function sendThemeUpdate() {
-  const iframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement
+  /* const iframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement
   if (iframe) {
     iframe.contentWindow?.postMessage({ type: 'themeChanged' }, '*');
-  }
+  } */
 }

src/svelte-interface/+layout.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  // @ts-expect-error - svelte-hash-router is not typed
+  import Router from 'svelte-hash-router'
+  import browser from 'webextension-polyfill';
+
+  const style = document.createElement("style");
+  style.setAttribute("type", "text/css");
+  style.innerHTML = `
+  @font-face {
+    font-family: 'IconFamily';
+    src: url('${browser.runtime.getURL('resources/fonts/IconFamily.woff')}') format('woff'),
+         url('${browser.runtime.getURL('resources/fonts/IconFamily.woff2')}') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+  }`;
+  document.head.appendChild(style);
+</script>
+
+<Router />

src/svelte-interface/components/Button.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let onClick: () => void;
+  export let text: string;
+</script>
+
+<button on:click={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
+  {text}
+</button>

src/svelte-interface/components/PickerSwatch.svelte

@@ -0,0 +1,129 @@
+<!-- <script lang="ts">
+  import { onMount } from 'svelte';
+  import iro from '@jaames/iro';
+
+  type GradientStop = { color: string; position: number };
+
+  let ColorPicker: iro.ColorPicker;
+  let gradientStops: GradientStop[] = [
+    { color: '#ff0000', position: 0 },
+    { color: '#00ff00', position: 0.5 },
+    { color: '#0000ff', position: 1 },
+  ];
+  let currentStop = 0;
+  let draggingStop = -1;
+  let initialDragPosition = 0;
+
+  onMount(() => {
+    ColorPicker = new (iro.ColorPicker as any)('#picker', {
+      width: 320,
+      color: gradientStops[0].color,
+      layout: [
+        {
+          component: iro.ui.Box,
+        },
+        {
+          component: iro.ui.Slider,
+          options: {
+            id: 'hue-slider',
+            sliderType: 'hue',
+          },
+        },
+        {
+          component: iro.ui.Slider,
+          options: {
+            id: 'alpha-slider',
+            sliderType: 'alpha',
+          },
+        },
+      ],
+    });
+
+    ColorPicker.on('color:change', () => {
+      gradientStops[currentStop].color = ColorPicker.color.rgbaString;
+    });
+
+    console.log(ColorPicker.color.rgba);
+  });
+
+  function handleDragStart(event: PointerEvent, index: number) {
+    if (draggingStop !== -1) {
+      // Prevent starting a new drag if one is already in progress.
+      event.preventDefault(); // This stops the pointerdown event from taking any effect.
+      return;
+    }
+
+    draggingStop = index; // Mark this stop as being dragged.
+    initialDragPosition = event.clientX;
+  }
+
+  function handleDragMove(event: PointerEvent) {
+    if (draggingStop === -1) return;
+
+    const container = event.currentTarget as HTMLDivElement;
+    const stopWidth = container.offsetWidth;
+    const containerOffset = container.getBoundingClientRect().left;
+    const relativePosition = (event.clientX - containerOffset) / stopWidth;
+
+    const sortedStops = [...gradientStops];
+    sortedStops.sort((a, b) => a.position - b.position);
+
+    const prevStopIndex = sortedStops.findIndex(
+      (stop, index) => index < draggingStop && stop.position < relativePosition
+    );
+    const nextStopIndex = sortedStops.findIndex(
+      (stop, index) => index > draggingStop && stop.position > relativePosition
+    );
+
+    const prevStop = prevStopIndex >= 0 ? sortedStops[prevStopIndex] : { position: 0 };
+    const nextStop = nextStopIndex >= 0 ? sortedStops[nextStopIndex] : { position: 1 };
+
+    const clampedPosition = Math.max(prevStop.position, Math.min(nextStop.position, relativePosition));
+
+    const newGradientStops = gradientStops.slice();
+    newGradientStops.sort((a, b) => a.position - b.position);
+
+    const draggedStop = newGradientStops[draggingStop];
+    newGradientStops.splice(draggingStop, 1);
+
+    const insertIndex = newGradientStops.findIndex(stop => stop.position >= clampedPosition);
+    newGradientStops.splice(insertIndex, 0, { ...draggedStop, position: clampedPosition });
+
+    gradientStops = newGradientStops;
+  }
+
+  function handleDragEnd() {
+    draggingStop = -1;
+  }
+</script>
+
+<div
+  class="w-16 h-8 rounded-md swatch"
+  style="background: linear-gradient(to right, {gradientStops
+    .map(({ color, position }) => `${color} ${position * 100}%`)
+    .join(', ')});"
+></div>
+<div class="fixed top-0 left-0 z-20 flex flex-col w-48 h-32 gap-8">
+  <div id="picker"></div>
+
+  <div
+    class="w-[320px] h-4 relative"
+    style={`background: linear-gradient(to right, ${gradientStops
+      .map(({ color, position }) => `${color} ${position * 100}%`)
+      .join(', ')});`}
+    on:pointermove={handleDragMove}
+    on:pointerup={handleDragEnd}
+  >
+    <span class="opacity-0">This makes the gradient show up</span>
+    {#each gradientStops as { position }, index}
+      <button
+        class="absolute w-4 h-4 bg-white rounded-md top-1/2"
+        style={`left: ${position * 100}%; transform: translate(-50%, -50%);`}
+        on:click={() => (currentStop = index)}
+        on:pointerdown={(event) => handleDragStart(event, index)}
+      ></button>
+    {/each}
+  </div>
+</div> -->
+
+<script></script>

src/svelte-interface/components/Slider.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  export let state: number;
+  export let onChange: (value: number) => void;
+</script>
+
+<div class="relative w-full max-w-lg py-8 mx-auto">
+  <input
+    type="range"
+    min="0"
+    max="100"
+    bind:value={state}
+    on:change={(e) => onChange(Number(e.currentTarget.value))}
+    class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider"
+  />
+</div>
+
+<style>
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 24px;
+    height: 24px;
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+    background: white;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
+  .slider::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+    background: white;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+</style>

src/svelte-interface/components/Switch.css

@@ -0,0 +1,4 @@
+.dark .switch[data-ison="true"],
+.switch[data-ison="true"] {
+  background-color: #30D259;
+}

src/svelte-interface/components/Switch.svelte

@@ -0,0 +1,64 @@
+<script>
+	import { settingsState } from '../state/SettingsState.ts';
+  import { animate, spring } from 'motion';
+  import './Switch.css'
+  import { onMount } from "svelte"
+  import { delay } from "../../seqta/utils/delay"
+
+  export let setting;
+  export let onChange = () => {}
+
+  const toggleSwitch = () => {
+    const newIsOn = !$settingsState[setting]
+    onChange(newIsOn)
+  }
+
+  const springParams = {
+    type: 'spring',
+    stiffness: 700,
+    damping: 30,
+  }
+
+  let handle;
+
+  const animation = (enabled) => {
+    if (handle) {
+      animate(
+        handle,
+        {
+          x: enabled ? 24 : 0,
+        },
+        {
+          easing: spring({ stiffness: 500, damping: 30 })
+        }
+      )
+    }
+  }
+
+  $: ((enabled) => {
+      if (handle) {
+        animate(
+          handle,
+          { x: enabled ? 24 : 0 },
+          { easing: spring({ stiffness: 500, damping: 30 }) }
+        )
+      }
+    })($settingsState[setting])
+
+</script>
+
+<div
+  id={setting}
+  class="flex w-14 p-1 cursor-pointer transition rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
+  data-ison={$settingsState[setting]}
+  on:click={toggleSwitch}
+  on:keydown={(e) => e.key === "Enter" && toggleSwitch()}
+  role="switch"
+  aria-checked={$settingsState[setting]}
+  tabindex="0"
+>
+  <div
+    bind:this={handle}
+    class="w-6 h-6 bg-white dark:bg-[#FEFEFE] rounded-full drop-shadow-md"
+  />
+</div>

src/svelte-interface/components/TabbedContainer.css

@@ -0,0 +1,3 @@
+.tab-width {
+  width: var(--tab-width);
+}

src/svelte-interface/components/TabbedContainer.svelte

@@ -0,0 +1,83 @@
+<script>
+  import { MotionDiv } from 'svelte-motion';
+  import { onMount, onDestroy } from 'svelte';
+  import { writable, derived } from 'svelte/store';
+  import './TabbedContainer.css';
+
+  export let tabs = [];
+
+  let activeTab = writable(0);
+  const hoveredTab = writable(null);
+  const position = writable(0);
+  let tabWidth = 0;
+  let containerRef;
+
+  const springTransition = { type: 'spring', stiffness: 250, damping: 25 };
+
+  // Calculate tabWidth dynamically based on tabs length
+  onMount(() => {
+    if (containerRef) {
+
+      tabWidth = 100 / tabs.length;
+      document.documentElement.style.setProperty('--tab-width', `${tabWidth}%`);
+
+      calcXPos = (index) => tabWidth * (index !== null ? index : $activeTab) * (containerRef !== null ? containerRef.getBoundingClientRect().width : 0) / 100;
+    }
+
+    // Listen for messages
+    const handleMessage = (event) => {
+      if (event.data === "popupClosed") {
+        activeTab.set(0);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  });
+
+  let calcXPos = (index) => tabWidth * (index !== null ? index : $activeTab);
+</script>
+
+<div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4">
+  <div class="hidden tab-width"></div>
+  <div class="relative flex">
+    <MotionDiv
+      class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] tab-width rounded-full opacity-40"
+      animate={{ x: calcXPos($hoveredTab) }}
+      transition={springTransition}
+    />
+    {#each tabs as { title }, index}
+      <button
+        class="relative z-10 flex-1 px-4 py-2"
+        on:click={() => activeTab.set(index)}
+        on:mouseenter={() => hoveredTab.set(index)}
+        on:mouseleave={() => hoveredTab.set(null)}
+      >
+        {title}
+      </button>
+    {/each}
+  </div>
+</div>
+<div class="h-full px-4 overflow-y-scroll overflow-x-clip">
+  <MotionDiv
+    animate={{ x: `${-$activeTab * 100}%` }}
+    transition={springTransition}
+  >
+    <div class="flex">
+      {#each tabs as { content }, index}
+      <div class="absolute w-full transition-opacity duration-300 pb-4 {$activeTab === index ? 'opacity-100' : 'opacity-0'}"
+        style="left: {index * 100}%;">
+        <svelte:component this={content} />
+      </div>
+      {/each}
+    </div>
+  </MotionDiv>
+</div>
+
+<style>
+  :root {
+    --tab-width: 0px;
+  }
+</style>

src/svelte-interface/index.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}

src/svelte-interface/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BetterSEQTA+ Settings</title>
+  </head>
+  <body style="background-color: red;">
+    asdasds
+  </body>
+</html>
+

src/svelte-interface/main.d.ts

@@ -0,0 +1,6 @@
+import './index.css';
+
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpeg";
+declare module "*.jpg";

src/svelte-interface/main.ts

@@ -0,0 +1,25 @@
+// @ts-expect-error - Svelte Hash Router is not typed (yet)
+import { routes } from 'svelte-hash-router'
+import App from './+layout.svelte';
+import Settings from './pages/settings.svelte';
+import styles from './index.css?inline';
+
+export default function initSvelteInterface(shadow: ShadowRoot) {
+  console.log(shadow)
+
+  routes.set({
+    'settings': Settings,
+    '*': Settings
+  })
+  
+  const app = new App({
+    target: shadow,
+  });
+
+  const style2 = document.createElement("style");
+  style2.setAttribute("type", "text/css");
+  style2.innerHTML = styles;
+  shadow.appendChild(style2);
+  
+  return app;
+}

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>

src/svelte-interface/state/SettingsState.ts

@@ -0,0 +1,91 @@
+import browser from "webextension-polyfill";
+import type { MainConfig, SettingsState } from "../types/AppProps";
+import { writable } from "svelte/store";
+
+const initialState: SettingsState = {
+  notificationCollector: false,
+  lessonAlerts: false,
+  telemetry: false,
+  animatedBackground: false,
+  animatedBackgroundSpeed: '0',
+  customThemeColor: '',
+  betterSEQTAPlus: false,
+  shortcuts: [],
+  customshortcuts: [],
+  transparencyEffects: false,
+  theme: ''
+};
+
+const keyToStateMap: { [key: string]: string } = {
+  notificationcollector: 'notificationCollector',
+  lessonalert: 'lessonAlerts',
+  telemetry: 'telemetry',
+  animatedbk: 'animatedBackground',
+  bksliderinput: 'animatedBackgroundSpeed',
+  selectedColor: 'customThemeColor',
+  onoff: 'betterSEQTAPlus',
+  shortcuts: 'shortcuts',
+  customshortcuts: 'customshortcuts',
+  transparencyEffects: 'transparencyEffects'
+};
+
+const stateToKeyMap = Object.fromEntries(
+  Object.entries(keyToStateMap).map(([key, value]) => [value, key])
+);
+
+const storageChangeListener = async (changes: browser.Storage.StorageChange) => {
+  for (const [key, { newValue }] of Object.entries(changes)) {
+    const stateKey = keyToStateMap[key] || key;
+
+    if (stateKey === 'DarkMode') {
+      if (newValue) {
+        document.body.classList.add('dark');
+      } else {
+        document.body.classList.remove('dark');
+      }
+    }
+    settingsState.update((prevState) => ({ ...prevState, [stateKey]: newValue }));
+  }
+}
+
+const initialStorageLoad = async (storage: MainConfig) => {
+  for (const [key, value] of Object.entries(storage)) {
+    const stateKey = keyToStateMap[key] || key;
+
+    if (stateKey === 'DarkMode') {
+      if (value) {
+        document.body.classList.add('dark');
+      } else {
+        document.body.classList.remove('dark');
+      }
+    }
+    settingsState.update((prevState) => ({ ...prevState, [stateKey]: value }));
+  }
+}
+
+const settingsSubscription = (/* set: (value: SettingsState) => void */) => {
+  settingsState.subscribe((newState) => {
+    const stateToSave = Object.fromEntries(
+      Object.entries(newState).map(([key, value]) => [stateToKeyMap[key] || key, value])
+    );
+    browser.storage.local.set(stateToSave);
+    /* set(newState); */
+  });
+}
+
+export const initializeListeners = async () => {
+  const result = await browser.storage.local.get() as MainConfig;
+
+  await initialStorageLoad(result);
+
+  settingsSubscription();
+
+  browser.storage.onChanged.addListener(storageChangeListener);
+}
+
+
+export const settingsState = writable(initialState);
+
+export const setSettingsValue = <K extends keyof SettingsState>(key: K, value: SettingsState[K]) => {
+  settingsState.update((prevState) => ({ ...prevState, [key]: value }));
+}

src/svelte-interface/test.svelte

@@ -0,0 +1 @@
+<h1>HI THERE!!!!</h1>

src/svelte-interface/types/AppProps.ts

@@ -0,0 +1,64 @@
+export interface SettingsState {
+  notificationCollector: boolean;
+  theme: string;
+  lessonAlerts: boolean;
+  telemetry: boolean;
+  animatedBackground: boolean;
+  animatedBackgroundSpeed: string;
+  customThemeColor: string;
+  betterSEQTAPlus: boolean;
+  shortcuts: Shortcut[];
+  customshortcuts: CustomShortcut[];
+  transparencyEffects: boolean;
+}
+
+interface ToggleItem {
+  toggle: boolean;
+}
+
+interface Shortcut {
+  enabled: boolean;
+  name: string;
+}
+
+export interface CustomShortcut {
+  name: string;
+  url: string;
+  icon: string;
+}
+
+export interface MainConfig {
+  DarkMode: boolean;
+  animatedbk: boolean;
+  bksliderinput: string;
+  customshortcuts: CustomShortcut[];
+  defaultmenuorder: any[];
+  lessonalert: boolean;
+  menuitems: {
+    assessments: ToggleItem;
+    courses: ToggleItem;
+    dashboard: ToggleItem;
+    documents: ToggleItem;
+    forums: ToggleItem;
+    goals: ToggleItem;
+    home: ToggleItem;
+    messages: ToggleItem;
+    myed: ToggleItem;
+    news: ToggleItem;
+    notices: ToggleItem;
+    portals: ToggleItem;
+    reports: ToggleItem;
+    settings: ToggleItem;
+    timetable: ToggleItem;
+    welcome: ToggleItem;
+  };
+  menuorder: any[];
+  notificationcollector: boolean;
+  telemetry: boolean;
+  onoff: boolean;
+  selectedColor: string;
+  shortcuts: Shortcut[];
+  subjectfilters: Record<string, any>;
+  transparencyEffects: boolean;
+  theme: string;
+}

src/svelte-interface/types/ColorPickerProps.ts

@@ -0,0 +1,5 @@
+export interface ColorPickerProps {
+    color: string;
+    onChange: (color: string) => void;
+    id: string;
+}

src/svelte-interface/types/SettingsProps.ts

@@ -0,0 +1,14 @@
+import type { SettingsState } from './AppProps';
+import { ComponentType } from 'svelte';
+
+export interface SettingsList {
+  title: string;
+  id: number;
+  description: string;
+  component: ComponentType;
+  props?: any;
+}
+export interface SettingsProps {
+  settingsState: SettingsState;
+  setSettingsState: React.Dispatch<React.SetStateAction<SettingsState>>;
+}

src/svelte-interface/types/SliderProps.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import "./Slider.css";
+export interface Slider {
+    onValueChange: (value: number) => void;
+}
+declare const Slider: React.FC<Slider>;
+export default Slider;

src/svelte-interface/types/SwitchProps.ts

@@ -0,0 +1,6 @@
+import "./Switch.css";
+
+export interface SwitchProps {
+    onChange: (isOn: boolean) => void;
+    state: boolean;
+}

src/svelte-interface/types/TabbedContainerProps.ts

@@ -0,0 +1,10 @@
+import React, { JSX } from 'react';
+export interface Tab {
+    title: string;
+    content: JSX.Element;
+}
+export interface TabbedContainerProps {
+    tabs: Tab[];
+}
+declare const TabbedContainer: React.FC<TabbedContainerProps>;
+export default TabbedContainer;

src/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}