add custom cover images to themes.

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,