improve theme selection + bug fixes

src/seqta/ui/themes/applyTheme.ts

@@ -1,4 +1,3 @@
-import browser from 'webextension-polyfill';
 import { CustomImage, CustomTheme } from '../../../interface/types/CustomThemes';
 import { applyCustomCSS } from './Themes';
 
@@ -6,20 +5,13 @@ import { applyCustomCSS } from './Themes';
 export const applyTheme = async (theme: CustomTheme) => {
   let CustomCSS = '';
   let CustomImages: CustomImage[] = [];
-  let defaultColour = '';
 
   if (theme?.CustomCSS) CustomCSS = theme.CustomCSS;
   if (theme?.CustomImages) CustomImages = theme.CustomImages;
-  if (theme?.defaultColour) defaultColour = theme.defaultColour;
 
   // Apply custom CSS
   applyCustomCSS(CustomCSS);
 
-  // Apply default color
-  if (defaultColour !== '') {
-    browser.storage.local.set({ selectedColor: defaultColour });
-  }
-
   // Apply custom images
   CustomImages.forEach((image) => {
     const imageUrl = URL.createObjectURL(image.blob);

src/seqta/ui/themes/disableTheme.ts

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

src/seqta/ui/themes/enableCurrent.ts

@@ -5,9 +5,9 @@ import { applyTheme } from './applyTheme';
 
 
 export const enableCurrentTheme = async () => {
-  const themeId = await browser.storage.local.get('selectedTheme') as { selectedTheme: string; };
-  if (themeId.selectedTheme) {
-    const theme = await localforage.getItem(themeId.selectedTheme) as CustomTheme;
+  const { selectedTheme } = await browser.storage.local.get('selectedTheme') as { selectedTheme: string; };
+  if (selectedTheme) {
+    const theme = await localforage.getItem(selectedTheme) as CustomTheme;
     if (theme) {
       await applyTheme(theme);
     }

src/seqta/ui/themes/removeTheme.ts

@@ -26,6 +26,9 @@ export const removeTheme = async (theme: CustomTheme) => {
   // Remove custom images
   const customImageVariables = theme.CustomImages.map((image) => image.variableName);
   customImageVariables.forEach((variableName) => {
+    const blobUrl = document.documentElement.style.getPropertyValue('--' + variableName);
+    URL.revokeObjectURL(blobUrl);
+
     document.documentElement.style.removeProperty('--' + variableName);
   });
 };

src/seqta/utils/mutex.ts

@@ -0,0 +1,12 @@
+// Simple mutex implementation
+export class Mutex {
+  private mutex = Promise.resolve();
+
+  lock(): PromiseLike<() => void> {
+    let begin: (unlock: () => void) => void;
+
+    this.mutex = this.mutex.then(() => new Promise(begin));
+
+    return new Promise(res => begin = res);
+  }
+}