From ad2ad4d456261f419613826d83da143b7f351073 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Fri, 28 Mar 2025 00:14:29 +1100
Subject: [PATCH] feat: debounce creator + general improvements

---
 src/interface/pages/themeCreator.svelte                  | 4 ++--
 .../ui => plugins/built-in/themes}/ThemeCreator.ts       | 5 +++--
 src/plugins/built-in/themes/theme-manager.ts             | 9 +++++++++
 src/seqta/utils/debounce.ts                              | 7 +++++++
 src/seqta/utils/listeners/MessageListener.ts             | 2 +-
 5 files changed, 22 insertions(+), 5 deletions(-)
 rename src/{seqta/ui => plugins/built-in/themes}/ThemeCreator.ts (95%)
 create mode 100644 src/seqta/utils/debounce.ts

diff --git a/src/interface/pages/themeCreator.svelte b/src/interface/pages/themeCreator.svelte
index fb219c3f..32b57c28 100644
--- a/src/interface/pages/themeCreator.svelte
+++ b/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);
     }
   });
 
diff --git a/src/seqta/ui/ThemeCreator.ts b/src/plugins/built-in/themes/ThemeCreator.ts
similarity index 95%
rename from src/seqta/ui/ThemeCreator.ts
rename to src/plugins/built-in/themes/ThemeCreator.ts
index 963d008d..dd23ca1f 100644
--- a/src/seqta/ui/ThemeCreator.ts
+++ b/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)
diff --git a/src/plugins/built-in/themes/theme-manager.ts b/src/plugins/built-in/themes/theme-manager.ts
index 9358bfe9..01130b9b 100644
--- a/src/plugins/built-in/themes/theme-manager.ts
+++ b/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
    */
diff --git a/src/seqta/utils/debounce.ts b/src/seqta/utils/debounce.ts
new file mode 100644
index 00000000..916e8933
--- /dev/null
+++ b/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);
+  };
+}
diff --git a/src/seqta/utils/listeners/MessageListener.ts b/src/seqta/utils/listeners/MessageListener.ts
index 2745caa4..673ca435 100644
--- a/src/seqta/utils/listeners/MessageListener.ts
+++ b/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';