automatic theme deduplication on load

src/background.ts

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

src/interface/components/ThemeCover.tsx

@@ -3,6 +3,7 @@ import { CustomTheme, DownloadedTheme } from '../types/CustomThemes';
 import browser from 'webextension-polyfill';
 import { ArrowUpOnSquareIcon, PencilIcon } from '@heroicons/react/24/outline';
 import { sendThemeUpdate, setTheme } from '../hooks/ThemeManagment';
+import { DeleteDownloadedTheme } from '../pages/Store';
 
 type ThemeCoverProps = {
   theme: Omit<CustomTheme, 'CustomImages'> | DownloadedTheme;
@@ -26,10 +27,7 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
     if (isEditMode) return;
     if (downloaded) {
       await sendThemeUpdate(theme as DownloadedTheme, true)
-      await browser.runtime.sendMessage({
-        type: 'DeleteDownloadedTheme',
-        body: theme.id
-      })
+      DeleteDownloadedTheme(theme.id);
       setTheme(theme.id);
     } else {
       onThemeSelect(theme.id);
@@ -39,10 +37,7 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
   const handleDeleteClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     if (downloaded) {
-      browser.runtime.sendMessage({
-        type: 'DeleteDownloadedTheme',
-        body: theme.id
-      })
+      DeleteDownloadedTheme(theme.id);
     } else {
       onThemeDelete(theme.id);
     }

src/interface/components/ThemeSelector.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useCallback, forwardRef, useImperativeHandle, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { listThemes, deleteTheme, setTheme, disableTheme, getDownloadedThemes } from '../hooks/ThemeManagment';
+import { DeleteDownloadedTheme } from '../pages/Store';
 import { ThemeCover } from './ThemeCover';
 import browser from 'webextension-polyfill';
 import { CustomTheme, DownloadedTheme } from '../types/CustomThemes';
@@ -56,21 +57,23 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
   const fetchThemes = async () => {
     try {
       const { themes, selectedTheme } = await listThemes();
-
+      const tempDownloadedThemes = await getDownloadedThemes();
+      
       setThemes(themes);
-      setDownloadedThemes(await getDownloadedThemes());
+      setDownloadedThemes(tempDownloadedThemes);
       setSelectedTheme(selectedTheme ? selectedTheme : '');
-
+            
       const matchingThemes = themes.filter(theme => 
-        downloadedThemes.some(downloadedTheme => downloadedTheme.id === theme.id)
+        tempDownloadedThemes.some(downloadedTheme => downloadedTheme.id === theme.id)
       );
 
       if (matchingThemes.length > 0) {
         matchingThemes.forEach((theme) => {
-          browser.runtime.sendMessage({
-            type: 'DeleteDownloadedTheme',
-            body: theme.id
-          })
+          DeleteDownloadedTheme(theme.id);
+          
+          setDownloadedThemes(
+            downloadedThemes.filter(downloadedTheme => downloadedTheme.id !== theme.id)
+          )
         })
       }
 
@@ -149,10 +152,10 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
           />
         ))}
 
-        <div
+        { downloadedThemes.length + themes.length > 0 && <div
           id="divider"
           className="w-full h-[1px] my-2 bg-zinc-100 dark:bg-zinc-600"
-        ></div>
+        ></div> }
 
         <button
           onClick={() => browser.tabs.create({ url: browser.runtime.getURL('src/interface/index.html#store')})}

src/interface/pages/Store.tsx

@@ -24,8 +24,8 @@ type ThemesResponse = {
   themes: Theme[];
 }
 
-const DeleteDownloadedTheme = async (themeID: string) => {
-  console.log('DeleteDownloaded Theme:', themeID)
+export const DeleteDownloadedTheme = async (themeID: string) => {
+  console.debug('DeleteDownloaded Theme:', themeID)
   await localforage.removeItem(themeID);
 
   const availableThemesList = await localforage.getItem('availableThemes') as string[];