make downloading themes possible from background script

src/background.ts

@@ -2,6 +2,7 @@ import * as Sentry from "@sentry/browser";
 import browser from 'webextension-polyfill'
 import { onError } from './seqta/utils/onError';
 import { SettingsState } from "./types/storage";
+import DownloadTheme from "./seqta/ui/themes/downloadTheme";
 
 browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
   if (telemetry.telemetry === true) {
@@ -140,6 +141,10 @@ browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse:
 
     GetNews(sendResponse, url);
     return true;
+  
+  case 'DownloadTheme':
+    DownloadTheme(request.body.theme);
+    break;
       
   default:
     console.log('Unknown request type');

src/interface/pages/Theme.tsx

@@ -96,7 +96,7 @@ const Theme = () => {
             <p className="mb-8">{theme.description}</p>
             <button
                 className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-pointer rounded-2xl ring-white/20 hover:ring-white/10 ring-1 bg-zinc-950/20 hover:bg-zinc-950/40"
-                onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'DownloadTheme', body: { themeID: themeID } }) }
+                onClick={() => browser.runtime.sendMessage({ type: 'DownloadTheme', body: { theme } }) }
             >
               Install Theme
             </button>

src/interface/pages/ThemeCreator.tsx

@@ -99,7 +99,7 @@ function ThemeCreator() {
   }, []);
 
   const generateImageId = () => {
-    return '_' + Math.random().toString(36).substr(2, 9);
+    return Math.random().toString(36).substr(2, 9);
   };
 
   const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {

src/seqta/ui/themes/downloadTheme.ts

@@ -0,0 +1,41 @@
+//import PocketBase from 'pocketbase';
+import localforage from 'localforage';
+import { ThemesResponse } from '../../../interface/types/pocketbase-types';
+import { CustomTheme } from '../../../interface/types/CustomThemes';
+
+const DownloadTheme = async (theme: ThemesResponse & { theme: CustomTheme & { images: { id: string, variableName: string }[] } }) => {
+  const images: { imageData: Blob, imageID: string }[] = []
+  for (const imageID of theme.images) {
+    console.log(theme.images, `https://betterseqta.pockethost.io/api/files/${theme.collectionId}/${theme.id}/${imageID}`);
+    const image = await fetch(
+      `https://betterseqta.pockethost.io/api/files/${theme.collectionId}/${theme.id}/${imageID}`
+    )
+    const imageData = await image.blob();
+
+    images.push({ imageData, imageID });
+  }
+
+  console.log("Original Theme", theme);
+
+  // add to temp storage index
+  let availableThemes = await localforage.getItem('availableThemes') as string[];
+  if (availableThemes && !availableThemes.includes(theme.theme.id)) {
+    availableThemes.push(theme.theme.id);
+  } else if (!availableThemes) {
+    availableThemes = [theme.theme.id];
+  }
+  localforage.setItem('availableThemes', availableThemes);
+
+  // save the theme to the temp storage
+  localforage.setItem(theme.theme.id, {
+    ...theme.theme,
+    images: theme.theme.images.map((image) => {
+      return {
+        ...image,
+        imageData: images.find((i) => i.imageID.split('_')[0] === image.id)?.imageData
+      }
+    })
+  });
+}
+
+export default DownloadTheme;

src/seqta/ui/themes/shareTheme.ts

@@ -25,7 +25,6 @@ const shareTheme = async (themeID: string) => {
         id: image.id,
         data: finalImage,
       });
-
     }