add store downloading

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>
                 }
               </>