storage listener uses switch

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,46 +19,58 @@ 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) {
     try {