feat: debounce creator + general improvements

src/interface/pages/themeCreator.svelte

@@ -21,7 +21,7 @@
     handleImageVariableChange,
     handleCoverImageUpload
   } from '../utils/themeImageHandlers';
-  import { CloseThemeCreator } from '@/seqta/ui/ThemeCreator'
+  import { CloseThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
   import { themeUpdates } from '../hooks/ThemeUpdates'
   import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
 
@@ -121,7 +121,7 @@
 
   $effect(() => {
     if (themeLoaded) {
-      void themeManager.updatePreview(theme);
+      void themeManager.updatePreviewDebounced(theme);
     }
   });
 

src/plugins/built-in/themes/ThemeCreator.ts

@@ -1,9 +1,10 @@
 import renderSvelte from "@/interface/main"
 import themeCreator from "@/interface/pages/themeCreator.svelte"
 import { unmount } from "svelte"
-import { ClearThemePreview } from "./themes/UpdateThemePreview"
+import { ThemeManager } from "@/plugins/built-in/themes/theme-manager"
 
 let themeCreatorSvelteApp: any = null
+const themeManager = ThemeManager.getInstance();
 
 /**
  * Open the Theme Creator sidebar, it is an embedded page loaded similar to the extension popup
@@ -33,7 +34,7 @@ export function OpenThemeCreator(themeID: string = "") {
   closeButton.textContent = "×"
   closeButton.addEventListener("click", () => {
     CloseThemeCreator()
-    ClearThemePreview()
+    themeManager.clearPreview()
   })
 
   document.body.appendChild(closeButton)

src/plugins/built-in/themes/theme-manager.ts

@@ -1,6 +1,7 @@
 import localforage from 'localforage';
 import type { CustomTheme, LoadedCustomTheme } from '@/types/CustomThemes';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';
+import debounce from '@/seqta/utils/debounce';
 
 type ThemeContent = {
   id: string;
@@ -517,6 +518,14 @@ export class ThemeManager {
     }
   }
 
+  /**
+   * Update the preview of a theme (debounced)
+   * @param theme - The theme to update the preview of
+   */
+  public updatePreviewDebounced = debounce((theme: Partial<LoadedCustomTheme>): void => {
+    this.updatePreview(theme);
+  }, 2);
+
   /**
    * Clear theme preview
    */

src/seqta/utils/debounce.ts

@@ -0,0 +1,7 @@
+export default function debounce<T extends (...args: any[]) => void>(fn: T, delay: number): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout>;
+  return function(this: ThisParameterType<T>, ...args: Parameters<T>) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn.apply(this, args), delay);
+  };
+}

src/seqta/utils/listeners/MessageListener.ts

@@ -3,7 +3,7 @@ import browser from 'webextension-polyfill'
 import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
 import { MenuOptionsOpen, OpenMenuOptions } from "@/seqta/utils/Openers/OpenMenuOptions"
 
-import { CloseThemeCreator, OpenThemeCreator } from '@/seqta/ui/ThemeCreator';
+import { CloseThemeCreator, OpenThemeCreator } from '@/plugins/built-in/themes/ThemeCreator';
 import sendThemeUpdate from '@/seqta/utils/sendThemeUpdate';
 import hideSensitiveContent from '@/seqta/ui/dev/hideSensitiveContent';
 import { ThemeManager } from '@/plugins/built-in/themes/theme-manager';