feat: debounce creator + general improvements

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

@@ -0,0 +1,99 @@
+import renderSvelte from "@/interface/main"
+import themeCreator from "@/interface/pages/themeCreator.svelte"
+import { unmount } from "svelte"
+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
+ * @param themeID - The ID of the theme to load in the Theme Creator
+ * @returns void
+ */
+export function OpenThemeCreator(themeID: string = "") {
+  CloseThemeCreator()
+
+  const width = "310px"
+
+  const themeCreatorDiv: HTMLDivElement = document.createElement("div")
+  themeCreatorDiv.id = "themeCreator"
+  themeCreatorDiv.style.width = width
+
+  const shadow = themeCreatorDiv.attachShadow({ mode: "open" })
+  themeCreatorSvelteApp = renderSvelte(themeCreator, shadow, {
+    themeID: themeID,
+  })
+
+  const mainContent = document.querySelector("#container") as HTMLDivElement
+  if (mainContent) mainContent.style.width = `calc(100% - ${width})`
+
+  // close button
+  const closeButton = document.createElement("button")
+  closeButton.classList.add("themeCloseButton")
+  closeButton.textContent = "×"
+  closeButton.addEventListener("click", () => {
+    CloseThemeCreator()
+    themeManager.clearPreview()
+  })
+
+  document.body.appendChild(closeButton)
+
+  const resizeBar = document.createElement("div")
+  resizeBar.classList.add("resizeBar")
+  resizeBar.style.right = "307.5px"
+
+  let isDragging = false
+
+  const mouseDownHandler = (_: MouseEvent) => {
+    isDragging = true
+    document.addEventListener("mousemove", mouseMoveHandler)
+    document.addEventListener("mouseup", mouseUpHandler)
+    document.body.style.userSelect = "none"
+    themeCreatorDiv.style.pointerEvents = "none"
+  }
+
+  const mouseMoveHandler = (e: MouseEvent) => {
+    if (!isDragging) return
+    const windowWidth = window.innerWidth
+    const newWidth = Math.max(310, windowWidth - e.clientX)
+    themeCreatorDiv.style.width = `${newWidth}px`
+    mainContent.style.width = `calc(100% - ${newWidth}px)`
+    resizeBar.style.right = `${newWidth - 2.5}px`
+  }
+
+  const mouseUpHandler = () => {
+    isDragging = false
+    document.removeEventListener("mousemove", mouseMoveHandler)
+    document.removeEventListener("mouseup", mouseUpHandler)
+    document.body.style.userSelect = ""
+    themeCreatorDiv.style.pointerEvents = "auto"
+  }
+
+  resizeBar.addEventListener("mousedown", mouseDownHandler)
+  resizeBar.addEventListener("mouseover", () => (resizeBar.style.opacity = "1"))
+  resizeBar.addEventListener("mouseout", () => (resizeBar.style.opacity = "0"))
+
+  document.body.appendChild(themeCreatorDiv)
+  document.body.appendChild(resizeBar)
+}
+
+/**
+ * Close the Theme Creator sidebar
+ * @returns void
+ */
+export function CloseThemeCreator() {
+  const themeCreator = document.getElementById("themeCreator")
+  const closeButton = document.querySelector(
+    ".themeCloseButton",
+  ) as HTMLButtonElement
+  const resizeBar = document.querySelector(".resizeBar") as HTMLDivElement
+
+  if (themeCreatorSvelteApp) unmount(themeCreatorSvelteApp)
+  if (themeCreator) themeCreator.remove()
+  if (closeButton) closeButton.remove()
+  if (resizeBar) resizeBar.remove()
+
+  const mainContent = document.querySelector("#container") as HTMLDivElement
+  if (mainContent) mainContent.style.width = "100%"
+}

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
    */