From 7555b0ff14ca7e20b5a732d604a2dfa5c82a0bc2 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Sat, 5 Oct 2024 21:38:52 +1000
Subject: [PATCH] fix(ThemeCreator): saving and editing with images not working

---
 src/seqta/ui/themes/saveTheme.ts               | 13 ++++++-------
 src/svelte-interface/pages/themeCreator.svelte | 12 +++++++++++-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/seqta/ui/themes/saveTheme.ts b/src/seqta/ui/themes/saveTheme.ts
index febe17f8..e986ddac 100644
--- a/src/seqta/ui/themes/saveTheme.ts
+++ b/src/seqta/ui/themes/saveTheme.ts
@@ -8,20 +8,19 @@ export const saveTheme = async (theme: LoadedCustomTheme) => {
     disableTheme();
 
     console.debug('Theme to save:', theme);
-
-    /* remove blob urls from theme */
-    const updatedTheme = { ...theme, CustomImages: theme.CustomImages.map((image) => ({ ...image, blob: null })) }
    
-    await localforage.setItem(theme.id, updatedTheme);
+    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) {
-        if (!themeList.includes(updatedTheme.id)) {
-          themeList.push(updatedTheme.id);
+        if (!themeList.includes(theme.id)) {
+          themeList.push(theme.id);
           localforage.setItem('customThemes', themeList);
         }
       } else {
-        localforage.setItem('customThemes', [updatedTheme.id]);
+        localforage.setItem('customThemes', [theme.id]);
       }
     });
     console.debug('Theme saved successfully!');
diff --git a/src/svelte-interface/pages/themeCreator.svelte b/src/svelte-interface/pages/themeCreator.svelte
index 03bb8e9f..d5848c07 100644
--- a/src/svelte-interface/pages/themeCreator.svelte
+++ b/src/svelte-interface/pages/themeCreator.svelte
@@ -25,6 +25,7 @@
   import { ClearThemePreview, UpdateThemePreview } from '@/seqta/ui/themes/UpdateThemePreview'
   import { saveTheme } from '@/seqta/ui/themes/saveTheme'
   import { CloseThemeCreator } from '@/seqta/ui/ThemeCreator'
+  import { themeUpdates } from '../hooks/ThemeUpdates'
 
   const { themeID } = $props<{ themeID: string }>()
   let theme = $state<LoadedCustomTheme>({
@@ -88,9 +89,18 @@
 
   function submitTheme() {
     console.log('saving theme', theme)
+    const themeClone = JSON.parse(JSON.stringify(theme));
+
+    // re-insert blobs into themeClone
+    themeClone.CustomImages = theme.CustomImages.map((image) => ({
+      ...image,
+      blob: image.blob
+    }))
+    themeClone.coverImage = theme.coverImage
 
     ClearThemePreview();
-    saveTheme(theme);
+    saveTheme(themeClone);
+    themeUpdates.triggerUpdate();
     CloseThemeCreator();
   }