add store downloading

src/background.ts

@@ -2,7 +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";
+import DownloadTheme, { StoreDownloadTheme } from "./seqta/ui/themes/downloadTheme";
 import localforage from "localforage";
 
 browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
@@ -166,6 +166,10 @@ browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse:
   case 'DownloadTheme':
     DownloadTheme(request.body.theme);
     break;
+  
+  case 'StoreDownloadTheme':
+    StoreDownloadTheme(request.body);
+    break;
 
   case 'DeleteDownloadedTheme':
     DeleteDownloadedTheme(request.body);

src/interface/pages/Store.tsx

@@ -1,14 +1,16 @@
 import { useEffect, useRef, useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay } from 'swiper/modules';
 import Header from '../components/store/header';
+import browser from 'webextension-polyfill';
+import { Autoplay } from 'swiper/modules';
 import { motion } from 'framer-motion';
+
 import 'swiper/css';
 import 'swiper/css/pagination';
 import 'swiper/css/scrollbar';
 import 'swiper/css/autoplay';
 
-interface Theme {
+export type Theme = {
   name: string;
   description: string;
   coverImage: string;
@@ -16,7 +18,7 @@ interface Theme {
   id: string;
 }
 
-interface ThemesResponse {
+type ThemesResponse = {
   themes: Theme[];
 }
 
@@ -46,7 +48,13 @@ const Store = () => {
   }, [searchTerm, gridThemes]);
 
   const downloadTheme = (id: string) => {
-    window.open(`https://betterseqta.pockethost.io/api/v1/themes/${id}/download`, '_blank');
+    const themeContent = gridThemes.find(theme => theme.id === id);
+    if (!themeContent) {
+      alert('There was an error, The theme was not found!')
+      return
+    };
+
+    browser.runtime.sendMessage({ type: 'StoreDownloadTheme', body: { themeContent } });
   };
 
   return (
@@ -138,7 +146,7 @@ const Store = () => {
                   <button
                     onClick={() => downloadTheme(theme.id)}
                     className="px-4 py-2 mt-4 transition rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-800 dark:hover:bg-zinc-700 hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2">
-                    Download
+                    Install
                   </button>
                 </div>
               </div>

src/interface/pages/Theme.tsx

@@ -35,7 +35,7 @@ const Theme = () => {
 
     const getTheme = async (themeID: string) => {
       const theme = await pb.collection<ThemesRecord>('themes').getOne(themeID);
-      console.log(theme);
+      console.debug(theme);
       setIsLoading(false);
       setTheme(theme);
 
@@ -104,7 +104,7 @@ const Theme = () => {
                   <button
                       className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-not-allowed rounded-2xl ring-white/20 ring-1 bg-zinc-950/20"
                   >
-                    Theme Downloaded!
+                    Theme Installed!
                   </button>
                 :
                   <button
@@ -114,7 +114,7 @@ const Theme = () => {
                         setCurrentThemes([...currentThemes, (theme.theme as { id: string }).id]);
                       }}
                   >
-                    Download Theme
+                    Install Theme
                   </button>
                 }
               </>

src/seqta/ui/themes/downloadTheme.ts

@@ -2,6 +2,7 @@
 import localforage from 'localforage';
 import { ThemesResponse } from '../../../interface/types/pocketbase-types';
 import { CustomTheme } from '../../../interface/types/CustomThemes';
+import { Theme } from '../../../interface/pages/Store';
 
 const DownloadTheme = async (theme: ThemesResponse & { theme: CustomTheme & { images: { id: string, variableName: string }[] } }) => {
   const images: { imageData: Blob, imageID: string }[] = []
@@ -43,4 +44,61 @@ const DownloadTheme = async (theme: ThemesResponse & { theme: CustomTheme & { im
   });
 }
 
+type ThemeContent = {
+  id: string;
+  name: string;
+  coverImage: string;
+  description: string;
+  defaultColour: string;
+  CanChangeColour: boolean;
+  CustomCSS: string;
+  hideThemeName: boolean;
+  images: { id: string, variableName: string }[];
+}
+
+export const StoreDownloadTheme = async (theme: { themeContent: Theme }) => {
+  console.log(theme.themeContent.id);
+  if (!theme.themeContent.id) return;
+  const themeContent = await fetch(`https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes/${theme.themeContent.id}/theme.json`);
+  const themeData = await themeContent.json() as ThemeContent;
+
+  const images: { imageData: Blob, imageID: string }[] = []
+  for (const image of themeData.images) {
+    const data = await fetch(
+      `https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes/${themeData.id}/images/${image.id}`
+    )
+    const imageData = await data.blob();
+
+    images.push({ imageData, imageID: image.id });
+  }
+
+  const coverImage = await fetch(
+    `https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes/${themeData.id}/images/${themeData.coverImage}`
+  );
+
+  // add to temp storage index
+  let availableThemes = await localforage.getItem('availableThemes') as string[];
+  if (availableThemes && !availableThemes.includes(themeData.id)) {
+    availableThemes.push(themeData.id);
+  } else if (!availableThemes) {
+    availableThemes = [themeData.id];
+  }
+  localforage.setItem('availableThemes', availableThemes);
+
+  localforage.setItem(themeData.id, {
+    ...themeData,
+    webURL: theme.themeContent.id,
+    coverImage: await coverImage.blob(),
+    CustomImages: themeData.images.map((image) => {
+      return {
+        ...image,
+        blob: images.find((img) => {
+          return image.id.includes(img.imageID.split('_')[0]);
+        })?.imageData
+      }
+    })
+  });
+}
+
+
 export default DownloadTheme;