feat(settings_sync): add syncing with store

src/seqta/ui/themes/disableTheme.ts

@@ -8,11 +8,10 @@ const mutex = new Mutex();
 let isDisabling = false;
 
 export const disableTheme = async () => {
-  console.log('Disabling theme', isDisabling)
   if (isDisabling) return;
 
   if (!settingsState.selectedTheme || settingsState.selectedTheme === '') {
-    console.log('Theme is already disabled, exit early')
+    console.debug('Theme is already disabled, exit early')
     // Theme is already disabled, exit early
     return;
   }
@@ -20,7 +19,7 @@ export const disableTheme = async () => {
   const unlock = await mutex.lock();
   try {
     if (settingsState.selectedTheme) {
-      console.log('Disabling theme:', settingsState.selectedTheme);
+      console.debug('Disabling theme:', settingsState.selectedTheme);
       const theme = await localforage.getItem(settingsState.selectedTheme) as CustomTheme;
       if (theme) {
         await removeTheme(theme);

src/svelte-interface/components/themes/ThemeSelector.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
   import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
-  import { onMount } from 'svelte'
+  import { onDestroy, onMount } from 'svelte'
   import { OpenThemeCreator } from '@/seqta/ui/ThemeCreator'
   import shareTheme from '@/seqta/ui/themes/shareTheme'
   import { InstallTheme } from '@/seqta/ui/themes/downloadTheme'
@@ -9,6 +9,7 @@
   import { setTheme } from '@/seqta/ui/themes/setTheme'
   import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
   import { OpenStorePage } from '@/seqta/ui/renderStore'
+  import { themeUpdates } from '@/svelte-interface/hooks/ThemeUpdates'
 
   let themes = $state<ThemeList | null>(null);
   let { isEditMode } = $props<{ isEditMode: boolean }>();
@@ -72,11 +73,10 @@
         tempTheme = result;
         await InstallTheme(result);
         await fetchThemes();
-        tempTheme = null;
       } catch (error) {
         alert('Error parsing file. Please upload a valid JSON theme file.');
-        tempTheme = null;
       }
+      tempTheme = null;
     };
     reader.readAsText(file);
   }
@@ -87,6 +87,12 @@
 
   onMount(async () => {
     await fetchThemes();
+
+    themeUpdates.addListener(fetchThemes);
+  })
+
+  onDestroy(() => {
+    themeUpdates.removeListener(fetchThemes);
   })
 </script>
 

src/svelte-interface/hooks/ThemeUpdates.ts

@@ -0,0 +1,29 @@
+type ThemeUpdateCallback = () => void;
+
+class ThemeUpdates {
+  private static instance: ThemeUpdates;
+  private listeners: Set<ThemeUpdateCallback> = new Set();
+
+  private constructor() {}
+
+  public static getInstance(): ThemeUpdates {
+    if (!ThemeUpdates.instance) {
+      ThemeUpdates.instance = new ThemeUpdates();
+    }
+    return ThemeUpdates.instance;
+  }
+
+  public addListener(callback: ThemeUpdateCallback): void {
+    this.listeners.add(callback);
+  }
+
+  public removeListener(callback: ThemeUpdateCallback): void {
+    this.listeners.delete(callback);
+  }
+
+  public triggerUpdate(): void {
+    this.listeners.forEach(callback => callback());
+  }
+}
+
+export const themeUpdates = ThemeUpdates.getInstance();

src/svelte-interface/pages/store.svelte

@@ -14,6 +14,7 @@
   import Header from '../components/store/Header.svelte'
   import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
   import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
+  import { themeUpdates } from '../hooks/ThemeUpdates'
 
   // State variables
   let searchTerm = $state<string>('');
@@ -97,12 +98,14 @@
               await StoreDownloadTheme({themeContent: displayTheme})
               // @ts-ignore
               setTheme(displayTheme.id);
+              themeUpdates.triggerUpdate();
               await fetchCurrentThemes();
             }
           }} onRemove={async () => {
             if (displayTheme?.id) {
-              console.log('deleting theme', displayTheme.id);
+              console.debug('deleting theme', displayTheme.id);
               deleteTheme(displayTheme.id)
+              themeUpdates.triggerUpdate();
               await fetchCurrentThemes();
             }
           }} />