auto delete theme duplicate

src/background.ts

@@ -3,6 +3,7 @@ import browser from 'webextension-polyfill'
 import { onError } from './seqta/utils/onError';
 import { SettingsState } from "./types/storage";
 import DownloadTheme from "./seqta/ui/themes/downloadTheme";
+import localforage from "localforage";
 
 browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
   if (telemetry.telemetry === true) {
@@ -17,6 +18,26 @@ browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
   }
 })
 
+const DeleteDownloadedTheme = async (themeID: string) => {
+  console.log('DeleteDownloaded Theme:', themeID)
+  await localforage.removeItem(themeID);
+
+  const availableThemesList = await localforage.getItem('availableThemes') as string[];
+  const updatedThemesList = availableThemesList.filter(theme => theme !== themeID);
+
+  await localforage.setItem('availableThemes', updatedThemesList);
+
+  browser.tabs.query({}).then(function (tabs) {
+    for (let tab of tabs) {
+      if (tab.url?.includes('chrome-extension://')) {
+        browser.tabs.sendMessage(tab.id!, {
+          info: 'themeChanged'
+        });
+      }
+    }
+  });
+}
+
 export const openDB = () => {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open('MyDatabase', 1);
@@ -146,6 +167,10 @@ browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse:
     DownloadTheme(request.body.theme);
     break;
 
+  case 'DeleteDownloadedTheme':
+    DeleteDownloadedTheme(request.body);
+    break;
+      
   default:
     console.log('Unknown request type');
   }

src/interface/components/ThemeCover.tsx

@@ -22,10 +22,14 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
   onThemeDelete,
 }) => {
   const [uploading, setUploading] = useState<boolean>(false);
-  const handleThemeClick = () => {
+  const handleThemeClick = async () => {
     if (isEditMode) return;
     if (downloaded) {
-      sendThemeUpdate(theme as DownloadedTheme, true)
+      await sendThemeUpdate(theme as DownloadedTheme, true)
+      browser.runtime.sendMessage({
+        type: 'DeleteDownloadedTheme',
+        body: theme.id
+      })
     } else {
       console.log(theme)
       onThemeSelect(theme.id);

src/interface/components/ThemeSelector.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback, forwardRef, useImperativeHandle, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { listThemes, deleteTheme, setTheme, disableTheme, getDownloadedThemes } from '../hooks/ThemeManagment';
 import { ThemeCover } from './ThemeCover';
-import Browser from 'webextension-polyfill';
+import browser from 'webextension-polyfill';
 import { CustomTheme, DownloadedTheme } from '../types/CustomThemes';
 import { useSettingsContext } from '../SettingsContext';
 import { SettingsState } from '../types/AppProps';
@@ -37,14 +37,14 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
       fetchThemes();
     };
 
-    Browser.runtime.onMessage.addListener((message) => {
+    browser.runtime.onMessage.addListener((message) => {
       if (message.info === 'themeChanged') {
         handleThemeChange();
       }
     });
 
     return () => {
-      Browser.runtime.onMessage.removeListener((message) => {
+      browser.runtime.onMessage.removeListener((message) => {
         if (message.info === 'themeChanged') {
           handleThemeChange();
         }
@@ -133,7 +133,7 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
         ))}
 
         <button
-          onClick={() => Browser.tabs.create({ url: Browser.runtime.getURL('src/interface/index.html#store')})}
+          onClick={() => browser.tabs.create({ url: browser.runtime.getURL('src/interface/index.html#store')})}
           className="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
         >
           <span className="text-xl font-IconFamily">{'\uecc5'}</span>
@@ -141,7 +141,7 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
         </button>
 
         <button
-          onClick={() => Browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator' })}
+          onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator' })}
           className="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
         >
           <span className="text-xl font-IconFamily">{'\uec60'}</span>

src/interface/hooks/ThemeManagment.ts

@@ -96,7 +96,7 @@ export const deleteTheme = async (themeID: string) => {
   });
 }
 
-export const sendThemeUpdate = (updatedTheme: CustomTheme | DownloadedTheme, saveTheme?: boolean, updateImages?: boolean) => {
+export const sendThemeUpdate = async (updatedTheme: CustomTheme | DownloadedTheme, saveTheme?: boolean, updateImages?: boolean) => {
   saveTheme = saveTheme || false;
 
   const imageDataPromises = updatedTheme.CustomImages.map(async (image) => {

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 browser from 'webextension-polyfill';
 
 const DownloadTheme = async (theme: ThemesResponse & { theme: CustomTheme & { images: { id: string, variableName: string }[] } }) => {
   const images: { imageData: Blob, imageID: string }[] = []
@@ -39,6 +40,8 @@ const DownloadTheme = async (theme: ThemesResponse & { theme: CustomTheme & { im
       }
     })
   });
+
+  browser.runtime.sendMessage({ type: 'extensionPages', info: 'themeChanged' });
 }
 
 export default DownloadTheme;

src/seqta/utils/listeners/MessageListener.ts

@@ -31,6 +31,7 @@ export class MessageHandler {
             await saveTheme(request.body)
             await setTheme(request.body.id)
             sendResponse({ status: 'success' });
+            browser.runtime.sendMessage({ type: 'extensionPages', info: 'themeChanged' });
           }
           save()
         } else {