send images separately in themeManagement

src/interface/components/ThemeSelector.tsx

@@ -26,8 +26,6 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
       try {
         const { themes, selectedTheme } = await listThemes();
 
-        console.log(await listThemes());
-
         setThemes(themes);
         setSelectedThemeId(selectedTheme ? selectedTheme : null);
       } catch (error) {

src/interface/hooks/ThemeManagment.ts

@@ -62,39 +62,43 @@ export const deleteTheme = async (themeID: string) => {
   });
 }
 
-export const sendThemeUpdate = debounce((updatedTheme: CustomTheme, saveTheme?: boolean) => {
+export const sendThemeUpdate = (updatedTheme: CustomTheme, saveTheme?: boolean) => {
   // Create a copy of the updatedTheme object
   const updatedThemeCopy: CustomTheme = { ...updatedTheme };
 
   saveTheme = saveTheme || false;
 
-  // Convert image blobs to base64
-  const base64ConversionPromises = updatedThemeCopy.CustomImages.map(async (image) => {
-    const base64 = await blobToBase64(image.blob);
-    return { ...image, base64 };
+  // 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 => ({
+        id: image.id,
+        variableName: image.variableName,
+      })),
+    },
+    save: saveTheme,
   });
 
-  Promise.all(base64ConversionPromises)
-    .then((convertedImages) => {
-      // Update the CustomImages array with the converted base64 images
-      updatedThemeCopy.CustomImages = convertedImages;
-
-      // Send the updated theme to the content script for live preview
-      browser.runtime.sendMessage({
-        type: 'currentTab',
-        info: 'UpdateThemePreview',
-        body: updatedThemeCopy,
-        save: saveTheme,
-      });
-
-      if (saveTheme) {
-        browser.runtime.sendMessage({ type: 'currentTab', info: 'CloseThemeCreator' })
-      }
-    })
-    .catch((error) => {
-      console.error('Error converting image blobs to base64:', error);
+  // Send image data separately
+  updatedThemeCopy.CustomImages.forEach(async (image) => {
+    const base64 = await blobToBase64(image.blob);
+    browser.runtime.sendMessage({
+      type: 'currentTab',
+      info: 'UpdateThemeImageData',
+      body: {
+        id: image.id,
+        base64,
+      },
     });
-}, 100);
+  });
+
+  if (saveTheme) {
+    browser.runtime.sendMessage({ type: 'currentTab', info: 'CloseThemeCreator' });
+  }
+};
 
 // Helper function to convert a Blob to base64
 const blobToBase64 = (blob: Blob): Promise<string> => {

src/seqta/ui/Themes.ts

@@ -1,6 +1,6 @@
 import browser from 'webextension-polyfill'
 import localforage from 'localforage';
-import { CustomImageBase64, CustomTheme, CustomThemeBase64, ThemeList } from '../../interface/types/CustomThemes';
+import { CustomImage, CustomImageBase64, CustomTheme, CustomThemeBase64, ThemeList } from '../../interface/types/CustomThemes';
 
 const imageData: Record<string, { url: string; variableName: string }> = {};
 
@@ -95,7 +95,7 @@ export const saveTheme = async (theme: CustomThemeBase64) => {
   }
 };
 
-export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64) => {
+export const UpdateThemePreview = async (updatedTheme: Omit<CustomTheme, 'CustomImages'> & { CustomImages: Omit<CustomImage, 'blob'>[] }) => {
   const { CustomCSS, CustomImages, defaultColour } = updatedTheme;
 
   // Update image data
@@ -121,7 +121,7 @@ export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64) => {
     }
 
     imageData[image.id] = {
-      url: updateImage(image),
+      url: '',
       variableName: image.variableName,
     };
   });
@@ -133,14 +133,16 @@ export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64) => {
   if (defaultColour !== '') {
     browser.storage.local.set({ selectedColor: defaultColour });
   }
+};
 
-  // Apply custom images
-  CustomImages.forEach((image) => {
-    const imageUrl = imageData[image.id]?.url;
-    if (imageUrl) {
-      document.documentElement.style.setProperty('--' + image.variableName, `url(${imageUrl})`);
-    }
-  });
+export const UpdateImageData = (imageData2: { id: string; base64: string }) => {
+  const { id, base64 } = imageData2;
+
+  if (imageData[id]) {
+    imageData[id].url = base64;
+    const { variableName } = imageData[id];
+    document.documentElement.style.setProperty('--' + variableName, `url(${base64})`);
+  }
 };
 
 function applyCustomCSS(customCSS: string) {

src/seqta/utils/listeners/MessageListener.ts

@@ -1,7 +1,7 @@
 import browser from 'webextension-polyfill'
 
 import { MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup, closeSettings } from '../../../SEQTA';
-import { UpdateThemePreview, deleteTheme, disableTheme, getAvailableThemes, saveTheme, setTheme } from '../../ui/Themes';
+import { UpdateImageData, UpdateThemePreview, deleteTheme, disableTheme, getAvailableThemes, saveTheme, setTheme } from '../../ui/Themes';
 import { CloseThemeCreator, OpenThemeCreator } from '../../ui/ThemeCreator';
 
 export class MessageHandler {
@@ -28,6 +28,11 @@ export class MessageHandler {
           sendResponse({ status: 'success' });
         }
         break;
+
+      case 'UpdateThemeImageData':
+        UpdateImageData(request.body);
+        sendResponse({ status: 'success' });
+        break;
   
       case 'SaveTheme':
         saveTheme(request.body).then(() => {