fix: building working, (lots of bugs)

package.json

@@ -43,6 +43,7 @@
     "sass": "^1.70.0",
     "sass-loader": "^13.3.3",
     "semver": "^7.6.3",
+    "svelte-preprocess": "^6.0.2",
     "url": "^0.11.3"
   },
   "dependencies": {
@@ -53,7 +54,9 @@
     "@codemirror/lang-less": "^6.0.2",
     "@heroicons/react": "^2.1.3",
     "@million/lint": "latest",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@tailwindcss/forms": "^0.5.7",
+    "@tsconfig/svelte": "^5.0.4",
     "@types/color": "^3.0.6",
     "@types/dompurify": "^3.0.5",
     "@types/lodash": "^4.17.4",
@@ -85,10 +88,13 @@
     "react-toastify": "^10.0.5",
     "rimraf": "^5.0.5",
     "sortablejs": "^1.15.2",
+    "svelte": "^4.2.19",
+    "svelte-hash-router": "^1.0.1",
+    "svelte-motion": "^0.12.2",
     "swiper": "latest",
     "tailwindcss": "^3.4.1",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.4",
     "uuid": "^9.0.1",
     "vite": "^5.4.2",
     "webextension-polyfill": "^0.10.0"

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) {
+    // hide extension frame
-      ExtensionIframe.contentWindow.postMessage('popupClosed', '*')
-    }
   }
 
   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')
+  /* const extensionIframe: HTMLIFrameElement = document.createElement('iframe')
-  extensionIframe.src = `${browser.runtime.getURL('interface/index.html')}#settings/embedded`
+  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) {
+    // tell it popup closed
-      ExtensionIframe.contentWindow.postMessage('popupClosed', '*')
-    }
     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(),
+}

tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
@@ -24,4 +25,5 @@
       "@/*": ["./src/*"]
     }
   },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
 }

vite-project/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

vite-project/README.md

@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

vite-project/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

vite-project/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "vite-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.5",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1"
+  }
+}

vite-project/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

vite-project/src/App.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import svelteLogo from './assets/svelte.svg'
+  import viteLogo from '/vite.svg'
+  import Counter from './lib/Counter.svelte'
+</script>
+
+<main>
+  <div>
+    <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+      <img src={viteLogo} class="logo" alt="Vite Logo" />
+    </a>
+    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
+      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
+    </a>
+  </div>
+  <h1>Vite + Svelte</h1>
+
+  <div class="card">
+    <Counter />
+  </div>
+
+  <p>
+    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
+  </p>
+
+  <p class="read-the-docs">
+    Click on the Vite and Svelte logos to learn more
+  </p>
+</main>
+
+<style>
+  .logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+  .read-the-docs {
+    color: #888;
+  }
+</style>

vite-project/src/app.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

vite-project/src/assets/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

vite-project/src/lib/Counter.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  let count: number = 0
+  const increment = () => {
+    count += 1
+  }
+</script>
+
+<button on:click={increment}>
+  count is {count}
+</button>