fix theme live preview

src/interface/hooks/ThemeManagment.ts

@@ -61,42 +61,42 @@ export const deleteTheme = async (themeID: string) => {
   });
 }
 
-export const sendThemeUpdate = (updatedTheme: CustomTheme, saveTheme?: boolean) => {
-  // Create a copy of the updatedTheme object
-  const updatedThemeCopy: CustomTheme = { ...updatedTheme };
-
+export const sendThemeUpdate = (updatedTheme: CustomTheme, saveTheme?: boolean, updateImages?: boolean) => {
   saveTheme = saveTheme || false;
 
-  // Send the updated theme (without image data) to the content script for live preview
-  browser.runtime.sendMessage({
-    type: 'currentTab',
-    info: 'UpdateThemePreview',
-    body: {
-      ...updatedThemeCopy,
-      CustomImages: updatedThemeCopy.CustomImages.map(image => ({
+  const imageDataPromises = updatedTheme.CustomImages.map(async (image) => {
+    if (saveTheme || updateImages) {
+      console.log('Saving image:', image);
+      const base64 = await blobToBase64(image.blob);
+      return {
         id: image.id,
         variableName: image.variableName,
-      })),
-    },
-    save: saveTheme,
+        url: base64,
+      };
+    }
+    return {
+      id: image.id,
+      variableName: image.variableName,
+      url: ''
+    };
   });
 
-  // Send image data separately
-  updatedThemeCopy.CustomImages.forEach(async (image) => {
-    const base64 = await blobToBase64(image.blob);
+  Promise.all(imageDataPromises).then((imageData) => {
+    // Send the updated theme with image data to the content script for live preview or saving
     browser.runtime.sendMessage({
       type: 'currentTab',
-      info: 'UpdateThemeImageData',
+      info: 'UpdateThemePreview',
       body: {
-        id: image.id,
-        base64,
+        ...updatedTheme,
+        CustomImages: imageData,
       },
+      save: saveTheme,
     });
-  });
 
-  if (saveTheme) {
-    browser.runtime.sendMessage({ type: 'currentTab', info: 'CloseThemeCreator' });
-  }
+    if (saveTheme) {
+      browser.runtime.sendMessage({ type: 'currentTab', info: 'CloseThemeCreator' });
+    }
+  });
 };
 
 // Helper function to convert a Blob to base64

src/interface/pages/ThemeCreator.tsx

@@ -47,7 +47,7 @@ function ThemeCreator({ themeID }: { themeID?: string }) {
           CustomImages: [...theme.CustomImages, { id: imageId, blob: imageBlob, variableName }],
         };
         setTheme(updatedTheme);
-        sendThemeUpdate(updatedTheme);
+        sendThemeUpdate(updatedTheme, false, true);
       };
       reader.readAsDataURL(file);
     }

src/seqta/ui/Themes.ts

@@ -95,7 +95,7 @@ export const saveTheme = async (theme: CustomThemeBase64) => {
   }
 };
 
-export const UpdateThemePreview = async (updatedTheme: Omit<CustomTheme, 'CustomImages'> & { CustomImages: Omit<CustomImage, 'blob'>[] }) => {
+export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64 /* Omit<CustomTheme, 'CustomImages'> & { CustomImages: Omit<CustomImage, 'blob'>[] } */) => {
   const { CustomCSS, CustomImages, defaultColour } = updatedTheme;
 
   // Update image data
@@ -120,6 +120,13 @@ export const UpdateThemePreview = async (updatedTheme: Omit<CustomTheme, 'Custom
       removeImageFromDocument(existingImage.variableName);
     }
 
+    if (image.url) {
+      UpdateImageData({
+        id: image.id,
+        base64: image.url
+      });
+    }
+
     imageData[image.id] = {
       url: '',
       variableName: image.variableName,
@@ -139,9 +146,9 @@ export const UpdateImageData = (imageData2: { id: string; base64: string }) => {
   const { id, base64 } = imageData2;
 
   if (imageData[id]) {
-    imageData[id].url = base64;
+    imageData[id].url = updateImage({ id, url: base64, variableName: imageData[id].variableName });
     const { variableName } = imageData[id];
-    document.documentElement.style.setProperty('--' + variableName, `url(${base64})`);
+    document.documentElement.style.setProperty('--' + variableName, `url(${imageData[id].url})`);
   }
 };
 
@@ -180,7 +187,13 @@ export function updateImage(image: CustomImageBase64) {
 }
 
 const applyTheme = async (theme: CustomTheme) => {
-  const { CustomCSS, CustomImages, defaultColour } = theme;
+  let CustomCSS = '';
+  let CustomImages: CustomImage[] = [];
+  let defaultColour = '';
+
+  if (theme?.CustomCSS) CustomCSS = theme.CustomCSS;
+  if (theme?.CustomImages) CustomImages = theme.CustomImages;
+  if (theme?.defaultColour) defaultColour = theme.defaultColour; 
 
   // Apply custom CSS
   applyCustomCSS(CustomCSS);