added theme deletion

interface/src/components/BackgroundSelector.tsx

@@ -95,6 +95,7 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
   };  
 
   const selectNoBackground = (): void => {
+    setSelectedType('background');
     disableTheme();
     setSelectedBackground(null);
     localStorage.removeItem('selectedBackground');

interface/src/components/ThemeSelector.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import themesList from '../assets/themes';
-import { listThemes, disableTheme, downloadTheme, setTheme } from "../hooks/ThemeManagment";
+import { listThemes, disableTheme, downloadTheme, setTheme, deleteTheme } from "../hooks/ThemeManagment";
 
 interface Theme {
   name: string;
@@ -30,12 +30,38 @@ const ThemeSelector = ({ selectedType, setSelectedType, isEditMode }: ThemeSelec
         isLoading: false
       }));
 
+      initializedThemes.sort((a, b) => Number(b.isDownloaded) - Number(a.isDownloaded));
+
       setThemes(initializedThemes);
     };
 
     initializeThemes();
   }, []);
 
+  const handleDeleteTheme = async (themeName: string) => {
+    await deleteTheme(themeName);
+    setThemes(prevThemes => {
+      // Update the theme's isDownloaded property to false
+      const updatedThemes = prevThemes.map(theme => {
+        if (theme.name === themeName) {
+          return { ...theme, isDownloaded: false };
+        }
+        return theme;
+      });
+  
+      // Sort themes so non-downloaded ones appear last
+      updatedThemes.sort((a, b) => Number(b.isDownloaded) - Number(a.isDownloaded));
+  
+      return updatedThemes;
+    });
+  
+    // Reset the enabled theme name if the deleted theme was the currently enabled one
+    if (enabledThemeName === themeName) {
+      setEnabledThemeName('');
+      setSelectedType('background');
+    }
+  };
+  
   const handleThemeAction = async (themeName: string, themeURL: string) => {
     const startLoading = (name: string) => (
       setThemes(prevThemes => prevThemes.map(theme => 
@@ -103,36 +129,39 @@ const ThemeSelector = ({ selectedType, setSelectedType, isEditMode }: ThemeSelec
 
   return (
     <div className="my-2">
-      <h2 className="pb-2 text-lg font-bold">Themes</h2>
+      {(isEditMode ? themes.some(theme => theme.isDownloaded) : themes.length > 0) && (
+        <h2 className="pb-2 text-lg font-bold">Themes</h2>)}
       <div className="flex flex-col gap-4">
-        {themes.map((theme) => (
-          <button
-            key={theme.name}
-            className={`relative w-full h-16 flex justify-center items-center rounded-lg bg-zinc-700 transition ring dark:ring-white ring-zinc-300 ${enabledThemeName == theme.name && selectedType == "theme" ? 'dark:ring-2 ring-4' : 'ring-0'}`}
-            onClick={() => handleThemeAction(theme.name, theme.url)}
-            disabled={theme.isLoading}
-          >
-            {isEditMode && (
-              <div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
-                  onClick={() => console.log("Deleted!")}>
-                <div className="w-4 h-0.5 bg-white"></div>
-              </div>
-            )}
-            <div className={`relative transition rounded-lg overflow-hidden top-0 z-10 flex justify-center w-full h-full text-white group place-items-center ${ theme.isDownloaded ? '' : 'hover:bg-black/20'}`}>
-              <span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100">
-                { theme.isDownloaded || theme.isLoading ? '' : ''}
-              </span>
-              
-              { theme.isLoading &&
-              <div className="z-10 inline-block w-6 h-6 border-4 border-current rounded-full animate-spin border-t-transparent" role="status">
-                <span className="sr-only">Loading...</span>
-              </div> }
+        {themes
+          .filter(theme => !isEditMode || theme.isDownloaded) // Only show downloaded themes in edit mode
+          .map((theme) => (
+            <button
+              key={theme.name}
+              className={`relative w-full h-16 flex justify-center items-center rounded-lg bg-zinc-700 transition ring dark:ring-white ring-zinc-300 ${enabledThemeName == theme.name && selectedType == "theme" ? 'dark:ring-2 ring-4' : 'ring-0'}`}
+              onClick={() => handleThemeAction(theme.name, theme.url)}
+              disabled={theme.isLoading}
+            >
+              {isEditMode && (
+                <div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
+                  onClick={(e) => { e.stopPropagation(); handleDeleteTheme(theme.name); }}>
+                  <div className="w-4 h-0.5 bg-white"></div>
+                </div>
+              )}
+              <div className={`relative transition rounded-lg overflow-hidden top-0 z-10 flex justify-center w-full h-full text-white group place-items-center ${ theme.isDownloaded ? '' : 'hover:bg-black/20'}`}>
+                <span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100">
+                  { theme.isDownloaded || theme.isLoading ? '' : ''}
+                </span>
+                
+                { theme.isLoading &&
+                <div className="z-10 inline-block w-6 h-6 border-4 border-current rounded-full animate-spin border-t-transparent" role="status">
+                  <span className="sr-only">Loading...</span>
+                </div> }
 
-            </div>
-            <div className="absolute inset-0 z-0 overflow-hidden rounded-lg">
-              {theme.coverImage}
-            </div>
-          </button>
+              </div>
+              <div className="absolute inset-0 z-0 overflow-hidden rounded-lg">
+                {theme.coverImage}
+              </div>
+            </button>
         ))}
       </div>
     </div>

interface/src/hooks/ThemeManagment.tsx

@@ -49,4 +49,14 @@ export const disableTheme = async () => {
     type: 'currentTab',
     info: 'DisableTheme',
   });
-};
+};
+
+export const deleteTheme = async (themeName: string) => {
+  await chrome.runtime.sendMessage({
+    type: 'currentTab',
+    info: 'DeleteTheme',
+    body: {
+      themeName: themeName
+    }
+  });
+}

src/seqta/ui/Themes.js

@@ -47,33 +47,26 @@ const saveToIndexedDB = async (theme, themeName) => {
 
 // Apply theme from storage via localForage to document
 const applyTheme = async (themeName) => {
-  // Remove previous theme's style if it exists
-  if (currentThemeStyle) {
-    document.head.removeChild(currentThemeStyle);
-    currentThemeStyle = null;
-  }
-
-  // Remove previous theme's class if it exists
-  if (currentThemeClass) {
-    document.body.classList.remove(currentThemeClass);
-    currentThemeClass = "";
-  }
-
   const { css, className, images } = await localforage.getItem(`css_${themeName}`);
   
-  // Apply CSS
-  const style = document.createElement("style");
-  style.innerHTML = css;
-  document.head.appendChild(style);
-  currentThemeStyle = style; // Keep track of the new style element
-
-  // Apply className
-  if (className) {
-    document.body.classList.add(className);
-    currentThemeClass = className; // Keep track of the new class
+  const newStyle = document.createElement("style");
+  newStyle.innerHTML = css;
+  document.head.appendChild(newStyle);
+  
+  if (window.currentThemeStyle) {
+    document.head.removeChild(window.currentThemeStyle);
+  }
+
+  window.currentThemeStyle = newStyle;
+
+  if (window.currentThemeClass) {
+    document.body.classList.remove(window.currentThemeClass);
+  }
+  if (className) {
+    document.body.classList.add(className);
+    window.currentThemeClass = className;
   }
 
-  // Apply images
   if (images) {
     await Promise.all(
       Object.keys(images).map(async (cssVar) => {
@@ -101,6 +94,15 @@ export const downloadTheme = async (themeName, themeUrl) => {
   console.log(`Theme ${themeName} saved to IndexedDB`);
 };
 
+export const deleteTheme = async (themeName) => {
+  console.log(`Deleting theme ${themeName}...`);
+  await localforage.removeItem(`css_${themeName}`);
+  await Promise.all(
+    (await localforage.keys()).filter((key) => key.startsWith(`images_${themeName}`)).map((key) => localforage.removeItem(key))
+  );
+  console.log(`Theme ${themeName} deleted.`);
+}
+
 export const setTheme = async (themeName, themeUrl) => {
   if (!(await themeExistsInDB(themeName))) {
     await downloadTheme(themeName, themeUrl);

src/seqta/utils/MessageListener.js

@@ -1,7 +1,7 @@
 /* global chrome */
 
 import { MenuOptionsOpen, OpenMenuOptions, closeSettings } from "../../SEQTA.js";
-import { disableTheme, downloadTheme, listThemes, setTheme } from "../ui/Themes.js";
+import { deleteTheme, disableTheme, downloadTheme, listThemes, setTheme } from "../ui/Themes.js";
 
 export class MessageHandler {
   constructor() {
@@ -37,6 +37,11 @@ export class MessageHandler {
         sendResponse({ status: "success" });
       });
       return true;
+    case "DeleteTheme":
+      deleteTheme(request.body.themeName).then(() => {
+        sendResponse({ status: "success" });
+      });
+      return true;
     
     default:
       console.log("Unknown request info:", request.info);