add custom cover images to themes.

src/interface/components/ThemeCover.tsx

@@ -54,16 +54,13 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
       }
 
       <div className="relative top-0 z-10 flex justify-center w-full h-full overflow-hidden transition dark:text-white rounded-xl group place-items-center bg-zinc-100 dark:bg-zinc-900">
-        {/* Render theme cover image or placeholder */}
-        {/* {theme.CustomImages.length > 0 ? (
+        {theme.coverImage &&
           <img
-            src={URL.createObjectURL(theme.CustomImages[0].blob)}
+            src={theme.coverImage as string}
             alt={theme.name}
             className="absolute inset-0 z-0 object-cover"
           />
-        ) : (
-          <div className="absolute inset-0 z-0 bg-gray-300 rounded-lg"></div>
-        )} */}
+        }
         <div className="z-10">{theme.name}</div>
       </div>
     </button>

src/interface/hooks/ThemeManagment.ts

@@ -30,8 +30,19 @@ export const listThemes = async (): Promise<ThemeList> => {
     browser.runtime.sendMessage({
       type: 'currentTab',
       info: 'ListThemes'
-    }).then((response) => {
+    }).then(async (response) => {
       if (response) {
+        // convert the response themes coverImage to a bloburl
+        response.themes = await Promise.all(
+          response.themes.map(async (theme: Omit<CustomTheme, 'CustomImages'>) => {
+            if (theme.coverImage) {
+              const blob = await fetch(theme.coverImage as string).then((res) => res.blob());
+              theme.coverImage = URL.createObjectURL(blob);
+            }
+            return theme;
+          })
+        );
+
         resolve(response);
       } else {
         reject(new Error('Failed to get response'));
@@ -81,15 +92,22 @@ export const sendThemeUpdate = (updatedTheme: CustomTheme, saveTheme?: boolean,
     };
   });
 
-  Promise.all(imageDataPromises).then((imageData) => {
-    // Send the updated theme with image data to the content script for live preview or saving
+  Promise.all(imageDataPromises).then(async (imageData) => {
+    const themeData = {
+      ...updatedTheme,
+      CustomImages: imageData,
+    };
+
+    if (saveTheme) {
+      themeData.coverImage = await blobToBase64(updatedTheme.coverImage as Blob);
+    } else {
+      themeData.coverImage = null;
+    }
+
     browser.runtime.sendMessage({
       type: 'currentTab',
       info: 'UpdateThemePreview',
-      body: {
-        ...updatedTheme,
-        CustomImages: imageData,
-      },
+      body: themeData,
       save: saveTheme,
     });
 

src/interface/pages/ThemeCreator.tsx

@@ -33,7 +33,7 @@ function ThemeCreator() {
         }
       }) as CustomThemeBase64 | undefined;
 
-      if (theme) {        
+      if (theme) {
         // base64toblob to convert it to a blob url
         const CustomImages = theme.CustomImages.map((image) => {
           const base64Index = image.url.indexOf(',') + 1;
@@ -55,9 +55,27 @@ function ThemeCreator() {
           };
         });
 
+        const coverImageBase64 = theme.coverImage;
+        let coverImageBlob = null;
+
+        if (coverImageBase64) {
+          const base64Index = coverImageBase64.indexOf(',') + 1;
+          const imageBase64 = coverImageBase64.substring(base64Index);
+        
+          // Convert base64 to blob
+          const byteCharacters = atob(imageBase64);
+          const byteNumbers = new Uint8Array(byteCharacters.length);
+          for (let i = 0; i < byteCharacters.length; i++) {
+            byteNumbers[i] = byteCharacters.charCodeAt(i);
+          }
+          const byteArray = new Uint8Array(byteNumbers);
+          coverImageBlob = new Blob([byteArray], { type: 'image/png' });
+        }
+
         setTheme({
           ...theme,
           CustomImages,
+          coverImage: coverImageBlob
         });
         
         sendThemeUpdate({
@@ -189,7 +207,7 @@ function ThemeCreator() {
             theme.coverImage && (
               <>
               <div className="absolute z-20 w-full h-full transition-opacity opacity-0 pointer-events-none group-hover:opacity-100 bg-black/20"></div>
-              <img src={URL.createObjectURL(theme.coverImage)} alt='Cover Image' className="absolute z-0 object-cover w-full h-full rounded" />
+              <img src={URL.createObjectURL(theme.coverImage as Blob)} alt='Cover Image' className="absolute z-0 object-cover w-full h-full rounded" />
               </>
             )
           }

src/interface/types/CustomThemes.ts

@@ -7,7 +7,7 @@ export type CustomTheme = {
   allowBackgrounds: boolean;
   CustomCSS: string;
   CustomImages: CustomImage[];
-  coverImage: Blob | null;
+  coverImage: Blob | string | null;
   isEditable: boolean;
 }
 

src/seqta/ui/themes/getAvailableThemes.ts

@@ -1,6 +1,7 @@
 import browser from 'webextension-polyfill';
 import localforage from 'localforage';
 import { CustomTheme, ThemeList } from '../../../interface/types/CustomThemes';
+import { blobToBase64 } from '../../utils/blobToBase64';
 
 
 export const getAvailableThemes = async (): Promise<ThemeList | {}> => {
@@ -11,8 +12,12 @@ export const getAvailableThemes = async (): Promise<ThemeList | {}> => {
       const themes = await Promise.all(
         themeIds.map(async (id) => {
           const theme = await localforage.getItem(id) as CustomTheme;
+          console.log('CoverImage: ', theme.coverImage)
           const { CustomImages, ...themeWithoutImages } = theme;
-          return themeWithoutImages;
+          return {
+            ...themeWithoutImages,
+            coverImage: theme.coverImage ? await blobToBase64(theme.coverImage as Blob) : '',
+          };
         })
       );
 

src/seqta/ui/themes/getTheme.ts

@@ -20,6 +20,7 @@ export const getTheme = async (themeId: string): Promise<CustomThemeBase64 | nul
 
     return {
       ...theme,
+      coverImage: theme.coverImage ? await blobToBase64(theme.coverImage as Blob) : null,
       CustomImages,
     };
   } catch (error) {

src/seqta/ui/themes/saveTheme.ts

@@ -7,6 +7,7 @@ export const saveTheme = async (theme: CustomThemeBase64) => {
   try {
     const updatedTheme: CustomTheme = {
       ...theme,
+      coverImage: theme.coverImage ? await fetch(theme.coverImage).then((res) => res.blob()) : null,
       CustomImages: await Promise.all(
         theme.CustomImages.map(async (image) => ({
           id: image.id,