From d0b2cf49da0ad4b4f2eeafa0f75d381d6023890f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 17 Mar 2025 12:43:32 -0700
Subject: [PATCH] chore: Update imports, cleanup classes

---
 src/lib/components/MainMenu.svelte            |  2 +-
 src/lib/components/PanZoomToolbar.svelte      |  2 +-
 src/lib/components/Preset.svelte              |  2 +-
 src/lib/components/Share.svelte               | 11 ++++++---
 src/lib/components/SyncRoughToolbar.svelte    |  2 +-
 .../components/VersionSecurityToolbar.svelte  |  4 ++--
 src/lib/components/View.svelte                | 12 +++++-----
 src/lib/types.d.ts                            | 13 +++++++----
 src/lib/util/util.ts                          | 15 ++++--------
 src/routes/+layout.svelte                     |  8 +++----
 src/routes/edit/+page.svelte                  | 23 ++++++++-----------
 src/routes/view/+page.svelte                  |  4 ++--
 12 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/src/lib/components/MainMenu.svelte b/src/lib/components/MainMenu.svelte
index 9567e898..a847c2e8 100644
--- a/src/lib/components/MainMenu.svelte
+++ b/src/lib/components/MainMenu.svelte
@@ -38,7 +38,7 @@
 
 <Popover.Root>
   <Popover.Trigger class="shrink-0">
-    <img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" />
+    <img class="size-6" src="/favicon.svg" alt="Mermaid Live Editor" />
   </Popover.Trigger>
   <Popover.Content align="start" class="flex flex-col overflow-hidden p-0" sideOffset={16}>
     {#each menuItems as item}
diff --git a/src/lib/components/PanZoomToolbar.svelte b/src/lib/components/PanZoomToolbar.svelte
index 12bd8517..ff4193d9 100644
--- a/src/lib/components/PanZoomToolbar.svelte
+++ b/src/lib/components/PanZoomToolbar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import FloatingToolbar from '$/components/FloatingToolbar.svelte';
   import { Button } from '$/components/ui/button';
   import { Separator } from '$/components/ui/separator';
   import type { PanZoomState } from '$/util/panZoom';
@@ -7,7 +8,6 @@
   import ArrowsToCircleIcon from '~icons/material-symbols/screenshot-frame-2';
   import MagnifyingGlassPlusIcon from '~icons/material-symbols/zoom-in';
   import MagnifyingGlassMinusIcon from '~icons/material-symbols/zoom-out';
-  import FloatingToolbar from './FloatingToolbar.svelte';
 
   let { panZoomState }: { panZoomState: PanZoomState } = $props();
 </script>
diff --git a/src/lib/components/Preset.svelte b/src/lib/components/Preset.svelte
index 5f77ef91..43447ea6 100644
--- a/src/lib/components/Preset.svelte
+++ b/src/lib/components/Preset.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+  import Card from '$/components/Card/Card.svelte';
   import { Button } from '$/components/ui/button';
-  import Card from '$lib/components/Card/Card.svelte';
   import { updateCode } from '$lib/util/state';
   import { logEvent } from '$lib/util/stats';
   import ShapesIcon from '~icons/material-symbols/account-tree-outline-rounded';
diff --git a/src/lib/components/Share.svelte b/src/lib/components/Share.svelte
index 076876bb..0bfdd249 100644
--- a/src/lib/components/Share.svelte
+++ b/src/lib/components/Share.svelte
@@ -4,6 +4,7 @@
   import { Separator } from '$/components/ui/separator';
   import { env } from '$/util/env';
   import { urlsStore } from '$/util/state';
+  import ShareIcon from '~icons/material-symbols/share';
   import CopyInput from './CopyInput.svelte';
 </script>
 
@@ -11,14 +12,17 @@
   <Dialog.Trigger class={buttonVariants({ size: 'sm' })}>Share</Dialog.Trigger>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title class="flex items-center gap-2 text-xl">Shareable links</Dialog.Title>
+      <Dialog.Title class="flex items-center gap-2 text-xl">
+        <ShareIcon class="size-5" /> Shareable links
+      </Dialog.Title>
       <Dialog.Description>Share your diagrams with others.</Dialog.Description>
     </Dialog.Header>
 
     <div class="flex flex-col gap-4">
       <div class="flex flex-col gap-2">
         <h2 class="flex items-center gap-2">
-          <img class="size-4" src="./favicon.svg" alt="Mermaid Live Editor" /> Mermaid Live Editor
+          <img class="size-5" src="./favicon.svg" alt="Mermaid Live Editor" />
+          Mermaid Live Editor
         </h2>
         <CopyInput value={window.location.href} />
         <Dialog.Description>
@@ -29,7 +33,8 @@
         <Separator />
         <div class="flex flex-col gap-2">
           <h2 class="flex items-center gap-2">
-            <img class="size-4" src="./mermaidchart-logo.svg" alt="Mermaid Chart" /> Mermaid Chart Playground
+            <img class="size-5" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
+            Mermaid Chart Playground
           </h2>
           <CopyInput value={$urlsStore.mermaidChart.playground} />
           <Dialog.Description>
diff --git a/src/lib/components/SyncRoughToolbar.svelte b/src/lib/components/SyncRoughToolbar.svelte
index 0f56fd84..9286555e 100644
--- a/src/lib/components/SyncRoughToolbar.svelte
+++ b/src/lib/components/SyncRoughToolbar.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+  import FloatingToolbar from '$/components/FloatingToolbar.svelte';
   import { Separator } from '$/components/ui/separator';
   import { Switch } from '$/components/ui/switch';
   import { defaultState, inputStateStore } from '$/util/state';
-  import FloatingToolbar from './FloatingToolbar.svelte';
 
   if ($inputStateStore.grid === undefined) {
     // Handle cases where old states were saved without grid option
diff --git a/src/lib/components/VersionSecurityToolbar.svelte b/src/lib/components/VersionSecurityToolbar.svelte
index 34ffda7a..ccf6008e 100644
--- a/src/lib/components/VersionSecurityToolbar.svelte
+++ b/src/lib/components/VersionSecurityToolbar.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
+  import FloatingToolbar from '$/components/FloatingToolbar.svelte';
+  import Privacy from '$/components/Privacy.svelte';
   import { Button } from '$/components/ui/button';
   import { Separator } from '$/components/ui/separator';
   import { version } from 'mermaid/package.json';
   import QuestionCircleIcon from '~icons/material-symbols/help-outline-rounded';
-  import FloatingToolbar from './FloatingToolbar.svelte';
-  import Privacy from './Privacy.svelte';
 </script>
 
 <FloatingToolbar>
diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte
index 5ea4f8df..e0702f64 100644
--- a/src/lib/components/View.svelte
+++ b/src/lib/components/View.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
+  import type { State, ValidatedState } from '$/types';
+  import { recordRenderTime, shouldRefreshView } from '$/util/autoSync';
+  import { render as renderDiagram } from '$/util/mermaid';
   import { PanZoomState } from '$/util/panZoom';
-  import type { State, ValidatedState } from '$lib/types';
-  import { recordRenderTime, shouldRefreshView } from '$lib/util/autoSync';
-  import { render as renderDiagram } from '$lib/util/mermaid';
-  import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
-  import { logEvent, saveStatistics } from '$lib/util/stats';
+  import { inputStateStore, stateStore, updateCodeStore } from '$/util/state';
+  import { logEvent, saveStatistics } from '$/util/stats';
   import uniqueID from 'lodash-es/uniqueId';
   import type { MermaidConfig } from 'mermaid';
   import { mode } from 'mode-watcher';
@@ -139,7 +139,7 @@
 <div
   id="view"
   bind:this={view}
-  class={[shouldShowGrid && `grid-bg-${$mode}`, error && 'opacity-50', 'h-full w-full']}>
+  class={['h-full w-full', shouldShowGrid && `grid-bg-${$mode}`, error && 'opacity-50']}>
   <div id="container" bind:this={container} class="h-full overflow-auto"></div>
 </div>
 
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
index 410d0599..8e49b1cc 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@@ -57,10 +57,15 @@ export interface FileLoaderConfig {
   codeURL: string;
   configURL?: string;
 }
-export interface LoaderConfig {
-  type: 'gist' | 'files';
-  config: GistLoaderConfig | FileLoaderConfig;
-}
+export type LoaderConfig =
+  | {
+      type: 'gist';
+      config: GistLoaderConfig;
+    }
+  | {
+      type: 'files';
+      config: FileLoaderConfig;
+    };
 export type HistoryType = 'auto' | 'manual' | 'loader';
 export type HistoryEntry = { id: string; state: State; time: number; url?: string } & (
   | {
diff --git a/src/lib/util/util.ts b/src/lib/util/util.ts
index c2b0d8ec..e6d9b766 100644
--- a/src/lib/util/util.ts
+++ b/src/lib/util/util.ts
@@ -52,14 +52,10 @@ export const fetchText = async (url: string): Promise<string> => {
 };
 
 export const copyToClipboard = async (text: string) => {
-  if (!navigator.clipboard) {
-    return fallbackCopyToClipboard(text);
-  }
   try {
     await navigator.clipboard.writeText(text);
-    return true;
   } catch {
-    return fallbackCopyToClipboard(text);
+    fallbackCopyToClipboard(text);
   }
 };
 
@@ -75,14 +71,13 @@ function fallbackCopyToClipboard(text: string) {
   textArea.focus();
   textArea.select();
 
-  let success = false;
   try {
     // The deprecated but widely supported method
-    success = document.execCommand('copy');
+    document.execCommand('copy');
   } catch (error) {
     console.error('Failed to copy:', error);
+    throw error;
+  } finally {
+    textArea.remove();
   }
-
-  textArea.remove();
-  return success;
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index aaf7543c..76ef2c6d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+  import { Toaster } from '$/components/ui/sonner/index.js';
+  import { loadingStateStore } from '$/util/loading';
+  import { toggleDarkTheme } from '$/util/state';
+  import { initHandler } from '$/util/util';
   import { base } from '$app/paths';
-  import { Toaster } from '$lib/components/ui/sonner/index.js';
-  import { loadingStateStore } from '$lib/util/loading';
-  import { toggleDarkTheme } from '$lib/util/state';
-  import { initHandler } from '$lib/util/util';
   import { mode, ModeWatcher } from 'mode-watcher';
   import { onMount, type Snippet } from 'svelte';
   import '../app.postcss';
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index 0a488bfb..6bae63f1 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
+  import Actions from '$/components/Actions.svelte';
+  import Card from '$/components/Card/Card.svelte';
   import DiagramDocButton from '$/components/DiagramDocumentationButton.svelte';
+  import Editor from '$/components/Editor.svelte';
   import History from '$/components/History/History.svelte';
   import McWrapper from '$/components/McWrapper.svelte';
+  import Navbar from '$/components/Navbar.svelte';
   import PanZoomToolbar from '$/components/PanZoomToolbar.svelte';
+  import Preset from '$/components/Preset.svelte';
   import Share from '$/components/Share.svelte';
   import SyncRoughToolbar from '$/components/SyncRoughToolbar.svelte';
   import { Button } from '$/components/ui/button';
   import * as Resizable from '$/components/ui/resizable';
   import { Toggle } from '$/components/ui/toggle';
   import VersionSecurityToolbar from '$/components/VersionSecurityToolbar.svelte';
+  import View from '$/components/View.svelte';
+  import type { EditorMode, Tab } from '$/types';
   import { PanZoomState } from '$/util/panZoom';
-  import Actions from '$lib/components/Actions.svelte';
-  import Card from '$lib/components/Card/Card.svelte';
-  import Editor from '$lib/components/Editor.svelte';
-  import Navbar from '$lib/components/Navbar.svelte';
-  import Preset from '$lib/components/Preset.svelte';
-  import View from '$lib/components/View.svelte';
-  import type { EditorMode, Tab } from '$lib/types';
-  import { stateStore, updateCodeStore, urlsStore } from '$lib/util/state';
-  import { initHandler } from '$lib/util/util';
+  import { stateStore, updateCodeStore, urlsStore } from '$/util/state';
+  import { initHandler } from '$/util/util';
   import { onMount } from 'svelte';
   import CodeIcon from '~icons/material-symbols/code-blocks-outline';
   import HistoryIcon from '~icons/material-symbols/history';
@@ -99,10 +99,7 @@
       </Resizable.Pane>
       {#if isHistoryOpen}
         <Resizable.Handle class="ml-1 hidden opacity-0 md:block" />
-        <Resizable.Pane
-          minSize={15}
-          defaultSize={30}
-          class="hidden h-full flex-grow flex-col md:flex">
+        <Resizable.Pane minSize={15} defaultSize={30} class="hidden h-full flex-grow md:flex">
           <History />
         </Resizable.Pane>
       {/if}
diff --git a/src/routes/view/+page.svelte b/src/routes/view/+page.svelte
index 3a794b6b..0f915b09 100644
--- a/src/routes/view/+page.svelte
+++ b/src/routes/view/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import View from '$lib/components/View.svelte';
-  import { initHandler } from '$lib/util/util';
+  import View from '$/components/View.svelte';
+  import { initHandler } from '$/util/util';
   import { onMount } from 'svelte';
   onMount(initHandler);
 </script>