fix: standalone not correctly being set

src/svelte-interface/components/Switch.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { animate, spring } from 'motion';
-  import { createStandalone } from '../utils/standalone.svelte'
+  import { standalone } from '../utils/standalone.svelte'
 
   let { state, onChange } = $props<{ state: boolean, onChange: (newState: boolean) => void }>();
   let handle: HTMLElement | null = null;
-  let standalone = createStandalone();
 
   const springParams = {
     stiffness: 600,

src/svelte-interface/index.ts

@@ -2,6 +2,8 @@ import "./index.css"
 import { mount } from "svelte"
 import type { ComponentType } from "svelte"
 import Settings from "./pages/settings.svelte"
+import IconFamily from '@/resources/fonts/IconFamily.woff'
+import browser from "webextension-polyfill"
 
 export default function renderSvelte(
   Component: ComponentType | any,
@@ -19,10 +21,26 @@ export default function renderSvelte(
   return app
 }
 
+function InjectCustomIcons() {
+  console.info('[BetterSEQTA+] Injecting Icons')
+
+  const style = document.createElement('style')
+  style.setAttribute('type', 'text/css')
+  style.innerHTML = `
+    @font-face {
+      font-family: 'IconFamily';
+      src: url('${browser.runtime.getURL(IconFamily)}') format('woff');
+      font-weight: normal;
+      font-style: normal;
+    }`
+  document.head.appendChild(style)
+}
+
 const mountPoint = document.getElementById('app')
 if (!mountPoint) {
   console.error('Mount point #app not found')
   throw new Error('Mount point #app not found')
 }
 
+InjectCustomIcons()
 renderSvelte(Settings, mountPoint)

src/svelte-interface/pages/settings.svelte

@@ -5,7 +5,7 @@
   import Theme from './settings/theme.svelte';
   import browser from 'webextension-polyfill';
 
-  import { createStandalone } from '../utils/standalone.svelte';
+  import { standalone as StandaloneStore } from '../utils/standalone.svelte';
   import { onMount } from 'svelte'
   import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
 
@@ -46,7 +46,7 @@
     closeExtensionPopup();
   };
     
-  let { standalone = false } = $props<{ standalone?: boolean }>();
+  let { standalone } = $props<{ standalone?: boolean }>();
   let showColourPicker = $state<boolean>(false);
 
   onMount(() => {
@@ -56,10 +56,7 @@
     
     if (!standalone) return;
     initializeSettingsState();
-    // @ts-ignore
-    let globalStandalone = createStandalone();
-    globalStandalone = standalone;
-
+    StandaloneStore.setStandalone(true);
   });
 </script>
 

src/svelte-interface/utils/standalone.svelte.ts

@@ -1,16 +1,36 @@
-export function createStandalone() {
-	let standalone = $state(false);
+import type { Subscriber, Unsubscriber } from "svelte/store";
 
-	function setStandalone(value: boolean) {
-		standalone = value;
+export class Standalone {
+	private static instance: Standalone;
+	private _standalone = $state(false);
+	private subscribers = new Set<Subscriber<boolean>>();
+
+	private constructor() {}
+
+	public static getInstance(): Standalone {
+		if (!Standalone.instance) {
+			Standalone.instance = new Standalone();
+		}
+		return Standalone.instance;
 	}
 
-	return {
-		get standalone() {
-			return standalone;
-		},
-		setStandalone
-	};
+	public setStandalone(value: boolean) {
+		this._standalone = value;
+		this.subscribers.forEach(subscriber => subscriber(value));
+	}
+
+	public get standalone() {
+		return this._standalone;
+	}
+
+	public subscribe(run: Subscriber<boolean>): Unsubscriber {
+		this.subscribers.add(run);
+		run(this._standalone);
+
+		return () => {
+			this.subscribers.delete(run);
+		};
+	}
 }
 
-export const standalone = createStandalone();
+export const standalone = Standalone.getInstance();