storage listener uses switch

interface/src/components/BackgroundSelector.tsx

@@ -15,12 +15,16 @@ export interface Background {
   isDownloaded?: boolean;
 }
 
-export default function BackgroundSelector() {
+interface BackgroundSelectorProps {
+  selectedType: "background" | "theme";
+  isEditMode: boolean;
+}
+
+export default function BackgroundSelector({ selectedType, isEditMode }: BackgroundSelectorProps) {
   const [backgrounds, setBackgrounds] = useState<Background[]>([]);
   const [selectedBackground, setSelectedBackground] = useState<string | null>(localStorage.getItem('selectedBackground'));
   const [downloadedPresetIds, setDownloadedPresetIds] = useState<string[]>([]);
   const [downloadProgress, setDownloadProgress] = useState<Record<string, number>>({});
-  const [isEditMode, setIsEditMode] = useState<boolean>(false);
 
   const handleFileChange = async (e: ChangeEvent<HTMLInputElement>): Promise<void> => {
     const file = e.target.files?.[0];
@@ -89,6 +93,7 @@ export default function BackgroundSelector() {
   };  
 
   const selectNoBackground = (): void => {
+    disableTheme();
     setSelectedBackground(null);
     localStorage.removeItem('selectedBackground');
   };
@@ -105,9 +110,6 @@ export default function BackgroundSelector() {
     {selectedBackground == null ? 'No Background' : 'Remove Background'}
     </button>
     <div className="relative">
-      <button className="absolute top-0 right-0 p-2 text-[0.8rem] text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
-        {isEditMode ? 'Done' : 'Edit'}
-      </button>
       <h2 className="pb-2 text-lg font-bold">Images</h2>
       <div className="flex flex-wrap gap-4">
         {/* Image uploader swatch */}
@@ -121,7 +123,7 @@ export default function BackgroundSelector() {
         {backgrounds.filter(bg => bg.type === 'image').map(bg => (
           <div key={bg.id}
             onClick={() => selectBackground(bg.id)} 
-            className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
+            className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
             {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={() => deleteBackground(bg.id)}>
@@ -167,7 +169,7 @@ export default function BackgroundSelector() {
           <input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
         </div>
         {backgrounds.filter(bg => bg.type === 'video').map(bg => (
-          <div key={bg.id} onClick={() => selectBackground(bg.id)} className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
+          <div key={bg.id} onClick={() => selectBackground(bg.id)} className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
             {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={() => deleteBackground(bg.id)}>

interface/src/pages/Themes.tsx

@@ -1,13 +1,22 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import BackgroundSelector from '../components/BackgroundSelector';
 import ThemeSelector from '../components/ThemeSelector';
 
 const Themes: FC = () => {
+  const [isEditMode, setIsEditMode] = useState<boolean>(false);
+  const [selectedType, setSelectedType] = useState<'background' | 'theme'>('background');
+
+  useEffect(() => {
+    setSelectedType('background');
+  }, [])
 
   return (
   <div>
-    <BackgroundSelector />
-    <ThemeSelector />
+      <button className="absolute top-0 right-0 p-2 text-[0.8rem] text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
+        {isEditMode ? 'Done' : 'Edit'}
+      </button>
+    <BackgroundSelector selectedType={selectedType} isEditMode={isEditMode} />
+    <ThemeSelector selectedType={selectedType} isEditMode={isEditMode} />
   </div>
   );
 };

src/seqta/ui/Themes.js

@@ -101,14 +101,14 @@ export const setTheme = async (themeName, themeUrl) => {
     await downloadTheme(themeName, themeUrl);
   }
 
-  localStorage.setItem("selectedTheme", themeName);
+  localforage.setItem("selectedTheme", themeName);
   await applyTheme(themeName).catch((error) => {
     console.error(`Failed to apply theme: ${error}`);
   });
 };
 
 export const enableCurrentTheme = async () => {
-  const currentTheme = localStorage.getItem("selectedTheme");
+  const currentTheme = localforage.getItem("selectedTheme");
   
   if (currentTheme) {
     console.log(`Enabling current theme: ${currentTheme}`);
@@ -116,7 +116,7 @@ export const enableCurrentTheme = async () => {
       console.error(`Failed to apply current theme: ${error}`);
     });
   } else {
-    console.log("No current theme set in localStorage.");
+    console.log("No current theme set in localforage.");
   }
 };
 
@@ -136,7 +136,7 @@ export const disableTheme = async () => {
   }
 
   // Remove any applied image URLs from the root element
-  const currentTheme = localStorage.getItem("selectedTheme");
+  const currentTheme = localforage.getItem("selectedTheme");
   if (currentTheme) {
     const themeData = await localforage.getItem(`css_${currentTheme}`);
     if (themeData && themeData.images) {
@@ -147,7 +147,7 @@ export const disableTheme = async () => {
     console.log("Current theme's images removed.");
   }
 
-  // Clear the selected theme from localStorage
-  localStorage.removeItem("selectedTheme");
+  // Clear the selected theme from localforage
+  localforage.removeItem("selectedTheme");
   console.log("Current theme disabled.");
 };

src/seqta/utils/StorageListener.js

@@ -19,45 +19,57 @@ export default class StorageListener {
   }
 
   handleStorageChanges(changes) {
-    if (changes.selectedColor) {
-      this.handleSelectedColorChange(changes.selectedColor.newValue);
-    }
+    Object.keys(changes).forEach((changeKey) => {
+      switch (changeKey) {
 
-    if (changes.shortcuts) {
-      this.handleShortcutsChange(
-        changes.shortcuts.oldValue,
-        changes.shortcuts.newValue
-      );
-    }
+      case "selectedColor":
+        this.handleSelectedColorChange(changes.selectedColor.newValue);
+        break;
 
-    if (changes.DarkMode) {
-      this.darkMode = changes.DarkMode.newValue;
-      console.log(this.darkMode);
-    }
+      case "shortcuts":
+        this.handleShortcutsChange(
+          changes.shortcuts.oldValue,
+          changes.shortcuts.newValue
+        );
+        break;
 
-    if (changes?.customshortcuts?.newValue) {
-      this.handleCustomShortcutsChange(
-        changes.customshortcuts.oldValue,
-        changes.customshortcuts.newValue
-      );
-    }
+      case "DarkMode":
+        this.darkMode = changes.DarkMode.newValue;
+        console.log(this.darkMode);
+        break;
 
-    if (changes.notificationcollector) {
-      this.handleNotificationCollectorChange(changes.notificationcollector);
-    }
+      case "customshortcuts":
+        if (changes.customshortcuts.newValue) {
+          this.handleCustomShortcutsChange(
+            changes.customshortcuts.oldValue,
+            changes.customshortcuts.newValue
+          );
+        }
+        break;
 
-    if (changes.bksliderinput) {
-      updateBgDurations(changes.bksliderinput.newValue);
-    }
+      case "notificationcollector":
+        this.handleNotificationCollectorChange(changes.notificationcollector);
+        break;
 
-    if (changes.animatedbk !== undefined) {
-      if (changes.animatedbk.newValue) {
-        CreateBackground();
-      } else {
-        RemoveBackground();
-        document.getElementById("container").style.background = "var(--background-secondary)";
+      case "bksliderinput":
+        updateBgDurations(changes.bksliderinput.newValue);
+        break;
+
+      case "animatedbk":
+        if (changes.animatedbk.newValue) {
+          CreateBackground();
+        } else {
+          RemoveBackground();
+          document.getElementById("container").style.background = "var(--background-secondary)";
+        }
+        break;
+
+      // Add default case if you need to handle a case where changeKey does not match any case
+      default:
+        // Handle unknown changeKey if necessary
+        break;
       }
-    }
+    });
   }  
 
   handleSelectedColorChange(newColor) {