improve selection logic

src/interface/components/ThemeCover.tsx

@@ -32,7 +32,6 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
       })
       setTheme(theme.id);
     } else {
-      console.log(theme)
       onThemeSelect(theme.id);
     }
   };

src/interface/components/ThemeSelector.tsx

@@ -5,6 +5,7 @@ import browser from 'webextension-polyfill';
 import { CustomTheme, DownloadedTheme } from '../types/CustomThemes';
 import { useSettingsContext } from '../SettingsContext';
 import { SettingsState } from '../types/AppProps';
+import { debounce } from 'lodash';
 
 interface ThemeSelectorProps {
   isEditMode: boolean;
@@ -22,6 +23,13 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
       ...prevState,
       selectedTheme: themeId,
     }));
+
+    /* debounce(() => {
+      setSettingsState((prevState: SettingsState) => ({
+        ...prevState,
+        selectedTheme: themeId,
+      }));
+    }, 50); */
   }
 
   useImperativeHandle(ref, () => ({
@@ -33,19 +41,19 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
 
   useEffect(() => {
     const handleThemeChange = async () => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
+      //await new Promise((resolve) => setTimeout(resolve, 500));
       fetchThemes();
     };
 
-    browser.runtime.onMessage.addListener((message) => {
-      if (message.info === 'themeChanged') {
+    window.addEventListener('message', (message) => {
+      if (message.data.type === 'themeChanged') {
         handleThemeChange();
       }
     });
 
     return () => {
-      browser.runtime.onMessage.removeListener((message) => {
-        if (message.info === 'themeChanged') {
+      window.removeEventListener('message', (message) => {
+        if (message.data.type === 'themeChanged') {
           handleThemeChange();
         }
       });
@@ -91,6 +99,7 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
         if (selectedTheme) {
           await setTheme(selectedTheme.id);
           setSelectedTheme(themeId);
+          //debounce(() => setSelectedTheme(selectedTheme.id), 100);
         }
       }
     },
@@ -113,7 +122,7 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
   );
 
   if (isLoading) {
-    return <div>Loading themes...</div>;
+    return <div className='text-center'>Loading themes...</div>;
   }
 
   return (

src/interface/hooks/ThemeManagment.ts

@@ -136,7 +136,6 @@ export const sendThemeUpdate = async (updatedTheme: CustomTheme | DownloadedThem
 
     if (saveTheme) {
       browser.runtime.sendMessage({ type: 'currentTab', info: 'CloseThemeCreator' });
-      browser.runtime.sendMessage({ type: 'extensionPages', info: 'themeChanged' });
     }
   });
 };

src/seqta/ui/themes/removeTheme.ts

@@ -1,5 +1,6 @@
 import { CustomTheme } from '../../../interface/types/CustomThemes';
 import browser from 'webextension-polyfill';
+import sendThemeUpdate from '../../utils/sendThemeUpdate';
 
 export const removeTheme = async (theme: CustomTheme) => {
   // Remove custom CSS
@@ -19,4 +20,6 @@ export const removeTheme = async (theme: CustomTheme) => {
   customImageVariables.forEach((variableName) => {
     document.documentElement.style.removeProperty('--' + variableName);
   });
+
+  sendThemeUpdate();
 };

src/seqta/ui/themes/setTheme.ts

@@ -3,6 +3,7 @@ import localforage from 'localforage';
 import { CustomTheme } from '../../../interface/types/CustomThemes';
 import { applyTheme } from './applyTheme';
 import { removeTheme } from './removeTheme';
+import sendThemeUpdate from '../../utils/sendThemeUpdate';
 
 
 export const setTheme = async (themeId: string) => {
@@ -10,12 +11,16 @@ export const setTheme = async (themeId: string) => {
     const enabledTheme = await browser.storage.local.get('selectedTheme') as { selectedTheme: string; };
     const theme = await localforage.getItem(themeId) as CustomTheme;
 
+    console.log(enabledTheme, theme)
+
     console.debug('Loading theme', theme);
 
     let originalSelectedColor = { selectedColor: '' };
 
+    const styleElement = document.getElementById('custom-theme');
+
     // Remove the currently enabled theme
-    if (enabledTheme.selectedTheme) {
+    if (enabledTheme.selectedTheme || styleElement) {
       const currentTheme = await localforage.getItem(enabledTheme.selectedTheme) as CustomTheme;
       if (currentTheme) {
         await removeTheme(currentTheme);
@@ -34,7 +39,7 @@ export const setTheme = async (themeId: string) => {
       originalSelectedColor: originalSelectedColor.selectedColor
     });
 
-    browser.runtime.sendMessage({ type: 'extensionPages', info: 'themeChanged' });
+    sendThemeUpdate();
   } catch (error) {
     console.error('Error setting theme:', error);
   }

src/seqta/utils/listeners/MessageListener.ts

@@ -10,6 +10,7 @@ import { setTheme } from '../../ui/themes/setTheme';
 import { disableTheme } from '../../ui/themes/disableTheme';
 import { CloseThemeCreator, OpenThemeCreator } from '../../ui/ThemeCreator';
 import ShareTheme from '../../ui/themes/shareTheme';
+import sendThemeUpdate from '../sendThemeUpdate';
 
 export class MessageHandler {
   constructor() {
@@ -30,8 +31,8 @@ export class MessageHandler {
           const save = async () => {
             await saveTheme(request.body)
             await setTheme(request.body.id)
-            sendResponse({ status: 'success' });
-            browser.runtime.sendMessage({ type: 'extensionPages', info: 'themeChanged' });
+            sendResponse({ status: 'success' })
+            sendThemeUpdate()
           }
           save()
         } else {

src/seqta/utils/sendThemeUpdate.ts

@@ -0,0 +1,6 @@
+export default function sendThemeUpdate() {
+  const iframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement
+  if (iframe) {
+    iframe.contentWindow?.postMessage({ type: 'themeChanged' }, '*');
+  }
+}