refactor: reduce browser storage dependence, remove unused code

src/SEQTA.ts

@@ -33,7 +33,6 @@ declare global {
   }
 }
 
-export let isChrome = window.chrome
 let SettingsClicked = false
 export let MenuOptionsOpen = false
 let currentSelectedDate = new Date()
@@ -283,7 +282,7 @@ export function OpenWhatsNewPopup() {
     }
   )
 
-  browser.storage.local.remove(['justupdated'])
+  delete settingsState.justupdated
 
   bkelement!.addEventListener('click', function (event) {
     // Check if the click event originated from the element itself and not any of its children

src/seqta/ui/themes/UpdateThemePreview.ts

@@ -1,6 +1,6 @@
-import browser from 'webextension-polyfill';
 import { CustomThemeBase64 } from '../../../interface/types/CustomThemes';
 import { imageData, removeImageFromDocument, UpdateImageData, applyCustomCSS } from './Themes';
+import { settingsState } from '../../utils/listeners/SettingsState';
 
 
 export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64 /* Omit<CustomTheme, 'CustomImages'> & { CustomImages: Omit<CustomImage, 'blob'>[] } */) => {
@@ -52,6 +52,6 @@ export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64 /* Omit
 
   // Apply default color
   if (defaultColour !== '') {
-    browser.storage.local.set({ selectedColor: defaultColour });
+    settingsState.selectedColor = defaultColour
   }
 };

src/seqta/ui/themes/deleteTheme.ts

@@ -1,7 +1,7 @@
-import browser from 'webextension-polyfill';
 import localforage from 'localforage';
 import { CustomTheme } from '../../../interface/types/CustomThemes';
 import { removeTheme } from './removeTheme';
+import { settingsState } from '../../utils/listeners/SettingsState';
 
 
 export const deleteTheme = async (themeId: string) => {
@@ -16,7 +16,7 @@ export const deleteTheme = async (themeId: string) => {
       await localforage.setItem('customThemes', updatedThemeIds);
     }
 
-    await browser.storage.local.set({ selectedTheme: '' });
+    settingsState.selectedTheme = ''
   } catch (error) {
     console.error('Error deleting theme:', error);
   }

src/seqta/ui/themes/disableTheme.ts

@@ -1,32 +1,33 @@
-import browser from 'webextension-polyfill';
 import localforage from 'localforage';
 import { CustomTheme } from '../../../interface/types/CustomThemes';
 import { removeTheme } from './removeTheme';
 import { Mutex } from '../../utils/mutex';
+import { settingsState } from '../../utils/listeners/SettingsState';
 
 const mutex = new Mutex();
 let isDisabling = false;
 
 export const disableTheme = async () => {
+  console.log('Disabling theme', isDisabling)
   if (isDisabling) return;
 
-  const { selectedTheme } = await browser.storage.local.get('selectedTheme') as { selectedTheme: string; };
+  if (!settingsState.selectedTheme || settingsState.selectedTheme === '') {
-  if (!selectedTheme || selectedTheme === '') {
+    console.log('Theme is already disabled, exit early')
     // Theme is already disabled, exit early
     return;
   }
   isDisabling = true;
   const unlock = await mutex.lock();
   try {
-    await browser.storage.local.set({ selectedTheme: '' });
+    if (settingsState.selectedTheme) {
-
+      console.log('Disabling theme:', settingsState.selectedTheme);
-    if (selectedTheme) {
+      const theme = await localforage.getItem(settingsState.selectedTheme) as CustomTheme;
-      const theme = await localforage.getItem(selectedTheme) as CustomTheme;
       if (theme) {
         await removeTheme(theme);
       }
     }
-    await browser.storage.local.set({ selectedTheme: '' });
+
+    settingsState.selectedTheme = ''
   } catch (error) {
     console.error('Error disabling theme:', error);
   } finally {

src/seqta/ui/themes/enableCurrent.ts

@@ -1,13 +1,12 @@
-import browser from 'webextension-polyfill';
 import localforage from 'localforage';
 import { CustomTheme } from '../../../interface/types/CustomThemes';
 import { applyTheme } from './applyTheme';
+import { settingsState } from '../../utils/listeners/SettingsState';
 
 
 export const enableCurrentTheme = async () => {
-  const { selectedTheme } = await browser.storage.local.get('selectedTheme') as { selectedTheme: string; };
+  if (settingsState.selectedTheme) {
-  if (selectedTheme) {
+    const theme = await localforage.getItem(settingsState.selectedTheme) as CustomTheme;
-    const theme = await localforage.getItem(selectedTheme) as CustomTheme;
     if (theme) {
       await applyTheme(theme);
     }

src/seqta/ui/themes/getAvailableThemes.ts

@@ -1,8 +1,7 @@
-import browser from 'webextension-polyfill';
 import localforage from 'localforage';
 import { CustomTheme, ThemeList } from '../../../interface/types/CustomThemes';
 import { blobToBase64 } from '../../utils/blobToBase64';
-
+import { settingsState } from '../../utils/listeners/SettingsState';
 
 export const getAvailableThemes = async (): Promise<ThemeList | {}> => {
   try {
@@ -19,9 +18,7 @@ export const getAvailableThemes = async (): Promise<ThemeList | {}> => {
         })
       );
 
-      const selectedTheme = await browser.storage.local.get('selectedTheme') as { selectedTheme: string; };
+      return { themes, selectedTheme: settingsState.selectedTheme ? settingsState.selectedTheme : '' };
-
-      return { themes, selectedTheme: selectedTheme.selectedTheme ? selectedTheme.selectedTheme : '' };
     }
     return {
       themes: [],

src/seqta/ui/themes/removeTheme.ts

@@ -1,6 +1,6 @@
 import localforage from 'localforage';
 import { CustomTheme } from '../../../interface/types/CustomThemes';
-import browser from 'webextension-polyfill';
+import { settingsState } from '../../utils/listeners/SettingsState';
 
 export const removeTheme = async (theme: CustomTheme) => {
   // Remove custom CSS
@@ -9,18 +9,15 @@ export const removeTheme = async (theme: CustomTheme) => {
     styleElement.parentNode?.removeChild(styleElement);
   }
 
-  const themeSelectedColor = await browser.storage.local.get('selectedColor') as { selectedColor: string; };
-
   const selectedTheme = await localforage.getItem(theme.id) as CustomTheme;
   localforage.setItem(theme.id, {
     ...selectedTheme,
-    selectedColor: themeSelectedColor.selectedColor
+    selectedColor: settingsState.selectedColor
   })
   
   // Reset default color
-  const originalSelectedColor = await browser.storage.local.get('originalSelectedColor') as { originalSelectedColor: string; };
+  if (settingsState.originalSelectedColor !== '') {
-  if (originalSelectedColor.originalSelectedColor !== '') {
+    settingsState.selectedColor = settingsState.originalSelectedColor
-    await browser.storage.local.set({ selectedColor: originalSelectedColor.originalSelectedColor });
   }
   
   // Remove custom images

src/seqta/ui/themes/setTheme.ts

@@ -3,11 +3,11 @@ import localforage from 'localforage';
 import { CustomTheme } from '../../../interface/types/CustomThemes';
 import { applyTheme } from './applyTheme';
 import { removeTheme } from './removeTheme';
+import { settingsState } from '../../utils/listeners/SettingsState';
 
 
 export const setTheme = async (themeId: string) => {
   try {
-    const enabledTheme = await browser.storage.local.get('selectedTheme') as { selectedTheme: string; };
     const theme = await localforage.getItem(themeId) as CustomTheme;
 
     console.debug('Loading theme', theme);
@@ -17,25 +17,21 @@ export const setTheme = async (themeId: string) => {
     const styleElement = document.getElementById('custom-theme');
 
     // Remove the currently enabled theme
-    if (enabledTheme.selectedTheme || styleElement) {
+    if (settingsState.selectedTheme || styleElement) {
-      const currentTheme = await localforage.getItem(enabledTheme.selectedTheme) as CustomTheme;
+      const currentTheme = await localforage.getItem(settingsState.selectedTheme) as CustomTheme;
       if (currentTheme) {
         await removeTheme(currentTheme);
       }
-      const color = await browser.storage.local.get('originalSelectedColor') as { originalSelectedColor: string; };
+      originalSelectedColor = { selectedColor: settingsState.originalSelectedColor };
-      originalSelectedColor = { selectedColor: color.originalSelectedColor };
     } else {
-      originalSelectedColor = await browser.storage.local.get('selectedColor') as { selectedColor: string; };
+      originalSelectedColor = { selectedColor: settingsState.selectedColor };
     }
 
     await applyTheme(theme);
 
-    await browser.storage.local.set({
+    settingsState.selectedTheme = themeId
-      selectedTheme: themeId,
+    settingsState.selectedColor = theme.selectedColor ? theme.selectedColor : (theme.defaultColour !== '' ? theme.defaultColour : '#007bff')
-      selectedColor: theme.selectedColor ? theme.selectedColor : (theme.defaultColour !== '' ? theme.defaultColour : '#007bff'),
+    settingsState.originalSelectedColor = originalSelectedColor.selectedColor
-      originalSelectedColor: originalSelectedColor.selectedColor
-    });
-
   } catch (error) {
     console.error('Error setting theme:', error);
   }

src/seqta/utils/listeners/SettingsState.ts

@@ -24,6 +24,19 @@ class StorageManager {
         Reflect.set(target.data, prop, value);
         target.saveToStorage();
         return true;
+      },
+      deleteProperty: (target, prop: keyof SettingsState) => {
+        const oldValue = target.data[prop];
+        if (oldValue !== undefined) {
+          delete target.data[prop];
+          target.removeFromStorage(prop);
+          if (target.listeners[prop]) {
+            for (const listener of target.listeners[prop]) {
+              listener(undefined, oldValue);
+            }
+          }
+        }
+        return true;
       }
     };
 
@@ -54,6 +67,10 @@ class StorageManager {
     await browser.storage.local.set(this.data);
   }
 
+  private async removeFromStorage(key: string): Promise<void> {
+    await browser.storage.local.remove(key);
+  }
+
   private initStorageListener(): void {
     browser.storage.onChanged.addListener((changes, areaName) => {
       if (areaName === 'local') {
@@ -73,6 +90,11 @@ class StorageManager {
     });
   }
 
+  /**
+   * Register a listener for a setting.
+   * @param prop The setting to listen to.
+   * @param listener The listener to call when the setting changes.
+   */
   public register(prop: keyof SettingsState, listener: ChangeListener): void {
     if (!this.listeners[prop]) {
       this.listeners[prop] = [];