From b2bb5b2bef7f8e29646bc28f088702e5d53bdd86 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 14 Mar 2025 19:37:25 -0700
Subject: [PATCH] chore: Minor cleanup

---
 src/lib/components/Actions.svelte   | 43 +++++++++++++++++------------
 src/lib/components/Card/Card.svelte | 15 ++++++----
 src/lib/components/Card/Tabs.svelte |  7 +++--
 src/lib/components/Editor.svelte    | 10 +++----
 src/lib/components/Navbar.svelte    |  5 ++--
 src/lib/util/state.ts               |  6 +---
 src/routes/+layout.svelte           |  6 ++--
 src/routes/edit/+page.svelte        |  1 +
 8 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
index 77a91ffc..a2be5a33 100644
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -19,13 +19,19 @@
   import CopyInput from './CopyInput.svelte';
 
   const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`;
-
   const { krokiRendererUrl } = env;
+
   type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
 
   const getFileName = (extension: string) =>
     `mermaid-diagram-${dayjs().format('YYYY-MM-DD-HHmmss')}.${extension}`;
 
+  const getSvgElement = () => {
+    const svgElement = document.querySelector('#container svg')?.cloneNode(true) as HTMLElement;
+    svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+    return svgElement;
+  };
+
   const getBase64SVG = (svg?: HTMLElement, width?: number, height?: number): string => {
     if (svg) {
       // Prevents the SVG size of the interface from being changed
@@ -33,9 +39,11 @@
     }
     height && svg?.setAttribute('height', `${height}px`);
     width && svg?.setAttribute('width', `${width}px`); // Workaround https://stackoverflow.com/questions/28690643/firefox-error-rendering-an-svg-image-to-html5-canvas-with-drawimage
+
     if (!svg) {
       svg = getSvgElement();
     }
+
     const svgString = svg.outerHTML
       .replaceAll('<br>', '<br/>')
       .replaceAll(/<img([^>]*)>/g, (m, g: string) => `<img ${g} />`);
@@ -45,19 +53,30 @@
 ${svgString}`);
   };
 
+  const simulateDownload = (download: string, href: string): void => {
+    const a = document.createElement('a');
+    a.download = download;
+    a.href = href;
+    a.click();
+    a.remove();
+  };
+
   const exportImage = async (event: Event, exporter: Exporter) => {
     await waitForRender();
     if (document.querySelector('.outOfSync')) {
       throw new Error('Diagram is out of sync');
     }
-    const canvas: HTMLCanvasElement = document.createElement('canvas');
+
+    const canvas = document.createElement('canvas');
     const svg = document.querySelector<HTMLElement>('#container svg');
     if (!svg) {
       throw new Error('svg not found');
     }
-    const box: DOMRect = svg.getBoundingClientRect();
+
+    const box = svg.getBoundingClientRect();
     canvas.width = box.width;
     canvas.height = box.height;
+
     if (imageSizeMode === 'width') {
       const ratio = box.height / box.width;
       canvas.width = imageSize;
@@ -72,6 +91,7 @@ ${svgString}`);
     if (!context) {
       throw new Error('context not found');
     }
+
     context.fillStyle = `hsl(${window.getComputedStyle(document.body).getPropertyValue('--b1')})`;
     context.fillRect(0, 0, canvas.width, canvas.height);
 
@@ -83,19 +103,6 @@ ${svgString}`);
     event.preventDefault();
   };
 
-  const getSvgElement = () => {
-    const svgElement = document.querySelector('#container svg')?.cloneNode(true) as HTMLElement;
-    svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
-    return svgElement;
-  };
-
-  const simulateDownload = (download: string, href: string): void => {
-    const a = document.createElement('a');
-    a.download = download;
-    a.href = href;
-    a.click();
-    a.remove();
-  };
   const downloadImage: Exporter = (context, image) => {
     return () => {
       const { canvas } = context;
@@ -108,7 +115,7 @@ ${svgString}`);
   };
 
   const isClipboardAvailable = (): boolean => {
-    return Object.prototype.hasOwnProperty.call(window, 'ClipboardItem') as boolean;
+    return Object.prototype.hasOwnProperty.call(window, 'ClipboardItem');
   };
 
   const clipboardCopy: Exporter = (context, image) => {
@@ -161,7 +168,7 @@ ${svgString}`);
 
   const loadGist = () => {
     if (!gistURL) {
-      alert('Please enter a Gist URL first');
+      return alert('Please enter a Gist URL first');
     }
     window.location.href = `${window.location.pathname}?gist=${gistURL}`;
     logEvent('loadGist');
diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte
index b08b1576..748f46e5 100644
--- a/src/lib/components/Card/Card.svelte
+++ b/src/lib/components/Card/Card.svelte
@@ -44,15 +44,18 @@
 </script>
 
 <div
-  class="card flex h-fit {isOpen ? 'isOpen flex-grow' : ''} {isStackable
-    ? 'flex-1 group-has-[.isOpen]:w-full group-has-[.isOpen]:flex-none'
-    : 'w-full'} flex-col overflow-hidden rounded-2xl border-2 border-muted">
+  class={[
+    'border-muted card flex h-fit flex-col overflow-hidden rounded-2xl border-2',
+    isOpen && 'isOpen flex-grow',
+    isStackable ? 'flex-1 group-has-[.isOpen]:w-full group-has-[.isOpen]:flex-none' : 'w-full'
+  ]}>
   <div
     role="toolbar"
     tabindex="0"
-    class="bg-muted p-2 {isTabsShown
-      ? 'pb-1'
-      : ''} flex h-11 flex-none cursor-pointer items-center justify-between whitespace-nowrap"
+    class={[
+      'bg-muted flex h-11 flex-none cursor-pointer items-center justify-between whitespace-nowrap p-2',
+      isTabsShown && 'pb-1'
+    ]}
     onclick={toggleCardOpen}
     onkeypress={toggleCardOpen}>
     {#if icon || title}
diff --git a/src/lib/components/Card/Tabs.svelte b/src/lib/components/Card/Tabs.svelte
index 9b6ec02a..91d52788 100644
--- a/src/lib/components/Card/Tabs.svelte
+++ b/src/lib/components/Card/Tabs.svelte
@@ -32,9 +32,10 @@
       <Button
         role="tab"
         variant="ghost"
-        class="px-2 {activeTabID === tab.id
-          ? 'rounded-b-none border-b-2 border-b-primary-foreground/50'
-          : ''}"
+        class={[
+          'px-2',
+          activeTabID === tab.id && 'border-b-primary-foreground/50 rounded-b-none border-b-2'
+        ]}
         onclick={toggleTabs(tab)}
         onkeypress={toggleTabs(tab)}>
         <tab.icon />
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index d9d14725..de439711 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -36,7 +36,6 @@
   let text = '';
 
   stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
-    // console.log('editor store subscription', { code, mermaid });
     if (!editor) {
       return;
     }
@@ -44,7 +43,6 @@
     // Update editor text if it's different
     const newText = editorMode === 'code' ? code : mermaid;
     if (newText !== text) {
-      // console.log('updating editor text', newText);
       editor.setScrollTop(0);
       editor.setValue(newText);
       text = newText;
@@ -70,7 +68,6 @@
   });
 
   const handleUpdate = (text: string, mode: EditorMode) => {
-    // console.log('editor HandleUpdate', { text, mode });
     if (mode === 'code') {
       updateCode(text);
     } else {
@@ -91,7 +88,7 @@
     if (!divElement) {
       throw new Error('divEl is undefined');
     }
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+
     initEditor(monaco);
     errorDebug();
     editor = monaco.editor.create(divElement, editorOptions);
@@ -103,6 +100,7 @@
       text = newText;
       handleUpdate(text, $stateStore.editorMode);
     });
+
     editor.addAction({
       id: 'mermaid-render-diagram',
       label: 'Render Diagram',
@@ -142,7 +140,7 @@
     <div class="flex flex-col text-sm">
       <div class="flex items-center justify-between gap-2 bg-slate-900 p-2 text-white">
         <div class="flex w-fit items-center gap-2">
-          <ExclamationCircleIcon class="size-6 text-destructive" aria-hidden="true" />
+          <ExclamationCircleIcon class="text-destructive size-6" aria-hidden="true" />
           <div class="flex flex-col">
             <p>Syntax error</p>
             {#if env.isEnabledMermaidChartLinks}
@@ -159,7 +157,7 @@
           </McTooltip>
         {/if}
       </div>
-      <div class="max-h-32 overflow-auto bg-muted p-2 font-mono">
+      <div class="bg-muted max-h-32 overflow-auto p-2 font-mono">
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
         {@html sanitizeText($stateStore.error?.toString().replaceAll('\n', '<br />'))}
       </div>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index a02eaa74..287ac6de 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,6 +1,7 @@
-<script module lang="ts">
+<script lang="ts" module>
   import { logEvent, plausible } from '$lib/util/stats';
   import { version } from 'mermaid/package.json';
+
   void logEvent('version', {
     mermaidVersion: version
   });
@@ -96,7 +97,7 @@
       </a>
       {#if env.isEnabledMermaidChartLinks}
         <McTooltip>
-          <div class=" hidden items-center justify-center gap-4 md:flex">
+          <div class="hidden items-center justify-center gap-4 md:flex">
             <Separator orientation="vertical" />
             <Switch
               id="editorMode"
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
index 440891b8..69adf526 100644
--- a/src/lib/util/state.ts
+++ b/src/lib/util/state.ts
@@ -195,10 +195,7 @@ export const updateCode = (
 };
 
 export const updateConfig = (config: string): void => {
-  // console.log('updateConfig', config);
-  inputStateStore.update((state) => {
-    return { ...state, mermaid: config };
-  });
+  updateCodeStore({ mermaid: config });
 };
 
 export const toggleDarkTheme = (dark: boolean): void => {
@@ -207,7 +204,6 @@ export const toggleDarkTheme = (dark: boolean): void => {
     if (!config.theme || ['dark', 'default'].includes(config.theme)) {
       config.theme = dark ? 'dark' : 'default';
     }
-
     return { ...state, mermaid: formatJSON(config) };
   });
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e99a7258..aaf7543c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -32,10 +32,10 @@
           console.log('Service worker registration failed, error:', error);
         });
     }
+  });
 
-    mode.subscribe((mode) => {
-      toggleDarkTheme(mode === 'dark');
-    });
+  $effect(() => {
+    toggleDarkTheme($mode === 'dark');
   });
 </script>
 
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index ebfe88e5..b2646d88 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -67,6 +67,7 @@
       </McTooltip>
     {/if}
   </Navbar>
+
   <div class="flex flex-1 overflow-hidden">
     <Resizable.PaneGroup direction="horizontal" autoSaveId="liveEditor" class="p-6 pt-0">
       <Resizable.Pane defaultSize={30} minSize={15} class="hidden md:block">