format: run prettify

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

@@ -1,10 +1,10 @@
-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"
-import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+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";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 
-let themeCreatorSvelteApp: any = null
+let themeCreatorSvelteApp: any = null;
 const themeManager = ThemeManager.getInstance();
 
 /**
@@ -13,76 +13,79 @@ const themeManager = ThemeManager.getInstance();
  * @returns void
  */
 export function OpenThemeCreator(themeID: string = "") {
-  CloseThemeCreator()
+  CloseThemeCreator();
 
   // Only store original color if we're not editing an existing theme
-  localStorage.setItem('themeCreatorOpen', 'true');
+  localStorage.setItem("themeCreatorOpen", "true");
   if (!themeID) {
-    localStorage.setItem('originalPreviewColor', settingsState.selectedColor);
+    localStorage.setItem("originalPreviewColor", settingsState.selectedColor);
   }
 
-  const width = "310px"
+  const width = "310px";
 
-  const themeCreatorDiv: HTMLDivElement = document.createElement("div")
-  themeCreatorDiv.id = "themeCreator"
-  themeCreatorDiv.style.width = width
+  const themeCreatorDiv: HTMLDivElement = document.createElement("div");
+  themeCreatorDiv.id = "themeCreator";
+  themeCreatorDiv.style.width = width;
 
-  const shadow = themeCreatorDiv.attachShadow({ mode: "open" })
+  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})`
+  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 = "×"
+  const closeButton = document.createElement("button");
+  closeButton.classList.add("themeCloseButton");
+  closeButton.textContent = "×";
   closeButton.addEventListener("click", () => {
-    CloseThemeCreator()
-    themeManager.clearPreview()
-  })
+    CloseThemeCreator();
+    themeManager.clearPreview();
+  });
 
-  document.body.appendChild(closeButton)
+  document.body.appendChild(closeButton);
 
-  const resizeBar = document.createElement("div")
-  resizeBar.classList.add("resizeBar")
-  resizeBar.style.right = "307.5px"
+  const resizeBar = document.createElement("div");
+  resizeBar.classList.add("resizeBar");
+  resizeBar.style.right = "307.5px";
 
-  let isDragging = false
+  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"
-  }
+    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`
-  }
+    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"
-  }
+    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"))
+  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)
+  document.body.appendChild(themeCreatorDiv);
+  document.body.appendChild(resizeBar);
 }
 
 /**
@@ -91,19 +94,19 @@ export function OpenThemeCreator(themeID: string = "") {
  */
 export function CloseThemeCreator() {
   // Remove the stored flag
-  localStorage.removeItem('themeCreatorOpen');
+  localStorage.removeItem("themeCreatorOpen");
 
-  const themeCreator = document.getElementById("themeCreator")
+  const themeCreator = document.getElementById("themeCreator");
   const closeButton = document.querySelector(
     ".themeCloseButton",
-  ) as HTMLButtonElement
-  const resizeBar = document.querySelector(".resizeBar") as HTMLDivElement
+  ) 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()
+  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%"
+  const mainContent = document.querySelector("#container") as HTMLDivElement;
+  if (mainContent) mainContent.style.width = "100%";
 }