fix(ThemeCreator): coverimage not loading on edit

src/seqta/ui/themes/getTheme.ts

@@ -1,10 +1,10 @@
 import localforage from 'localforage';
-import type { CustomTheme } from '@/types/CustomThemes';
+import type { LoadedCustomTheme } from '@/types/CustomThemes';
 
 
-export const getTheme = async (themeId: string): Promise<CustomTheme | null> => {
+export const getTheme = async (themeId: string): Promise<LoadedCustomTheme | null> => {
   try {
-    const theme = await localforage.getItem(themeId) as CustomTheme;
+    const theme = await localforage.getItem(themeId) as LoadedCustomTheme;
 
     return theme;
   } catch (error) {

src/seqta/ui/themes/saveTheme.ts

@@ -1,6 +1,7 @@
 import localforage from 'localforage';
 import type { LoadedCustomTheme } from '@/types/CustomThemes';
 import { disableTheme } from './disableTheme';
+import { themeUpdates } from '@/svelte-interface/hooks/ThemeUpdates';
 
 
 export const saveTheme = async (theme: LoadedCustomTheme) => {
@@ -9,9 +10,7 @@ export const saveTheme = async (theme: LoadedCustomTheme) => {
 
     console.debug('Theme to save:', theme);
    
-    console.log('stage 1')
     await localforage.setItem(theme.id, theme);
-    console.log('stage 2')
     await localforage.getItem('customThemes').then((themes: unknown) => {
       const themeList = themes as string[] | null;
       if (themeList) {
@@ -24,6 +23,7 @@ export const saveTheme = async (theme: LoadedCustomTheme) => {
       }
     });
     console.debug('Theme saved successfully!');
+    themeUpdates.triggerUpdate();
   } catch (error) {
     console.error('Error saving theme:', error);
   }

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

@@ -143,8 +143,8 @@
           {#if !isEditMode}
             <div
               class="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1/4 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2 -translate-y-1/2"
-              onclick={(event) => { event.stopPropagation(); OpenThemeCreator(theme.id) }}
-              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') OpenThemeCreator(theme.id) }}
+              onclick={(event) => { event.stopPropagation(); OpenThemeCreator(theme.id); closeExtensionPopup() }}
+              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') OpenThemeCreator(theme.id); closeExtensionPopup() }}
               role="button"
               tabindex="-1"
             >

src/svelte-interface/pages/themeCreator.svelte

@@ -26,6 +26,7 @@
   import { saveTheme } from '@/seqta/ui/themes/saveTheme'
   import { CloseThemeCreator } from '@/seqta/ui/ThemeCreator'
   import { themeUpdates } from '../hooks/ThemeUpdates'
+  import { disableTheme } from '@/seqta/ui/themes/disableTheme'
 
   const { themeID } = $props<{ themeID: string }>()
   let theme = $state<LoadedCustomTheme>({
@@ -54,6 +55,8 @@
   }
 
   onMount(async () => {
+    disableTheme();
+
     if (themeID) {
       const tempTheme = await getTheme(themeID)
 
@@ -65,7 +68,8 @@
         CustomImages: tempTheme.CustomImages.map(image => ({
           ...image,
           url: image.blob ? URL.createObjectURL(image.blob) : null
-        }))
+        })),
+        coverImageUrl: tempTheme.coverImage ? URL.createObjectURL(tempTheme.coverImage) : undefined
       }
 
       if (tempTheme) {
@@ -75,6 +79,8 @@
     } else {
       themeLoaded = true
     }
+
+    themeUpdates.triggerUpdate();
   });
 
   async function onImageUpload(event: Event) {
@@ -94,7 +100,6 @@
   }
 
   function submitTheme() {
-    console.log('saving theme', theme)
     const themeClone = JSON.parse(JSON.stringify(theme));
 
     // re-insert blobs into themeClone