I have literally lost track. Please save me, I am going crazy

src/interface/components/ThemeCover.tsx

@@ -66,7 +66,7 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
         </div>
       )}
       
-      { !isEditMode || !downloaded &&
+      { isEditMode || !downloaded &&
       <>
         <div
           className="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1 right-2 dark:bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-[1.25rem]"

src/interface/components/ThemeSelector.tsx

@@ -59,6 +59,17 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
       setThemes(themes);
       setDownloadedThemes(await getDownloadedThemes());
       setSelectedTheme(selectedTheme ? selectedTheme : '');
+
+      const matchingThemes = themes.filter(theme => downloadedThemes.some((downloadedTheme: DownloadedTheme) => downloadedTheme.id === theme.id));
+      if (matchingThemes.length > 0) {
+        matchingThemes.forEach((theme) => {
+          browser.runtime.sendMessage({
+            type: 'DeleteDownloadedTheme',
+            body: theme.id
+          })
+        })
+      }
+
     } catch (error) {
       console.error('Error fetching themes:', error);
     } finally {

src/interface/pages/Theme.tsx

@@ -7,6 +7,7 @@ import { LinkIcon } from "@heroicons/react/24/outline";
 import { ToastContainer, toast } from 'react-toastify';
 import browser from 'webextension-polyfill';
 import 'react-toastify/dist/ReactToastify.css';
+import localforage from "localforage";
 
 const pb = new PocketBase('https://betterseqta.pockethost.io');
 
@@ -16,6 +17,7 @@ const Theme = () => {
   const [themeID, setThemeID] = useState<string>('');
   const [justCreated, setJustCreated] = useState(false);
   const [displayConfetti, setDisplayConfetti] = useState(true);
+  const [currentThemes, setCurrentThemes] = useState<string[]>([]);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -37,6 +39,9 @@ const Theme = () => {
       console.log(theme);
       setIsLoading(false);
       setTheme(theme);
+
+      const availableThemes = await localforage.getItem('availableThemes') as string[];
+      setCurrentThemes(availableThemes)  
     }
 
     if (themeID && themeID !== 'null') {
@@ -94,12 +99,24 @@ const Theme = () => {
             <div className="text-center">
             <h2 className="mb-2 text-2xl font-bold">{theme.name}</h2>
             <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"
+              /* currentThemes.includes((theme.theme as { id: string }).id) */ false ?
-                onClick={() => browser.runtime.sendMessage({ type: 'DownloadTheme', body: { 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"
-              Install Theme
+              >
-            </button>
+                Theme Installed
+              </button>
+            :
+              <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: 'DownloadTheme', body: { theme } });
+                    setCurrentThemes([...currentThemes, (theme.theme as { id: string }).id]);
+                  }}
+              >
+                Install Theme
+              </button>
+            }
             </div>
           )}
           <ToastContainer theme="dark" />

src/seqta/ui/themes/downloadTheme.ts

@@ -2,7 +2,6 @@
 import localforage from 'localforage';
 import { ThemesResponse } from '../../../interface/types/pocketbase-types';
 import { CustomTheme } from '../../../interface/types/CustomThemes';
-import browser from 'webextension-polyfill';
 
 const DownloadTheme = async (theme: ThemesResponse & { theme: CustomTheme & { images: { id: string, variableName: string }[] } }) => {
   const images: { imageData: Blob, imageID: string }[] = []
@@ -36,12 +35,12 @@ const DownloadTheme = async (theme: ThemesResponse & { theme: CustomTheme & { im
     CustomImages: theme.theme.images.map((image) => {
       return {
         ...image,
-        blob: images.find((i) => i.imageID.split('_')[0] === image.id)?.imageData
+        blob: images.find((img) => {
+          return image.id.includes(img.imageID.split('_')[0]);
+        })?.imageData
       }
     })
   });
-
-  browser.runtime.sendMessage({ type: 'extensionPages', info: 'themeChanged' });
 }
 
 export default DownloadTheme;