From 3b2c7caf077ca20db91e8a4d599eece99d63997c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 18 Mar 2025 11:11:31 -0700
Subject: [PATCH] fix: New diagram button, add MC links

---
 src/lib/components/Editor.svelte           |  3 +-
 src/lib/components/MainMenu.svelte         | 47 +++++++++++++++-------
 src/lib/components/McWrapper.svelte        | 13 ++++--
 src/lib/components/MermaidChartIcon.svelte |  7 ++++
 src/lib/components/Share.svelte            |  3 +-
 src/lib/util/state.ts                      |  1 +
 src/routes/edit/+page.svelte               |  3 +-
 7 files changed, 56 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/components/MermaidChartIcon.svelte

diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index 8e639c0b..b5b58898 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -9,6 +9,7 @@
 
 <script lang="ts">
   import McWrapper from '$/components/McWrapper.svelte';
+  import MermaidChartIcon from '$/components/MermaidChartIcon.svelte';
   import { Button } from '$/components/ui/button';
   import { env } from '$/util/env';
   import type { EditorMode } from '$lib/types';
@@ -137,7 +138,7 @@
         </div>
         <McWrapper>
           <Button variant="accent" size="sm" href={$urlsStore.mermaidChart.save}>
-            <img class="size-4" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
+            <MermaidChartIcon />
             AI Repair
           </Button>
         </McWrapper>
diff --git a/src/lib/components/MainMenu.svelte b/src/lib/components/MainMenu.svelte
index 6c6818b1..fb506f3e 100644
--- a/src/lib/components/MainMenu.svelte
+++ b/src/lib/components/MainMenu.svelte
@@ -9,16 +9,34 @@
   import type { Component } from 'svelte';
   import AddIcon from '~icons/material-symbols/add-2-rounded';
   import BookIcon from '~icons/material-symbols/book-2-outline-rounded';
-  import HelpIcon from '~icons/material-symbols/help-outline-rounded';
+  import PluginIcon from '~icons/material-symbols/extension-outline';
   import HomeIcon from '~icons/material-symbols/house-outline-rounded';
+  import CommunityIcon from '~icons/material-symbols/person-play-outline-rounded';
   import PlaygroundIcon from '~icons/material-symbols/shape-line-outline';
+  import MermaidChartIcon from './MermaidChartIcon.svelte';
 
-  const menuItems = [
-    { label: 'New Diagram', icon: AddIcon, href: '/' },
+  const menuItems = $derived([
+    { label: 'New Diagram', icon: AddIcon, href: $urlsStore.new },
     { label: 'Home', icon: HomeIcon, href: 'https://mermaid.js.org/' },
-    { label: 'Docs', icon: BookIcon, href: 'https://mermaid.js.org/intro/' },
-    { label: 'Help', icon: HelpIcon, href: 'https://discord.gg/sKeNQX4Wtj' }
-  ];
+    { label: 'Documentation', icon: BookIcon, href: 'https://mermaid.js.org/intro/' },
+    { label: 'Community', icon: CommunityIcon, href: 'https://discord.gg/sKeNQX4Wtj' }
+  ]);
+
+  const mermaidChartMenuItems = $derived([
+    { label: 'Edit in Playground', icon: PlaygroundIcon, href: $urlsStore.mermaidChart.playground },
+    {
+      label: 'Plugins',
+      icon: PluginIcon,
+      href: 'https://www.mermaidchart.com/plugins',
+      checkDiagramType: false
+    },
+    {
+      label: 'MermaidChart',
+      icon: MermaidChartIcon,
+      href: 'https://www.mermaidchart.com',
+      checkDiagramType: false
+    }
+  ]);
 </script>
 
 {#snippet menuItem(options: { label: string; icon: Component; href: string; class?: string })}
@@ -51,13 +69,14 @@
         checked={$mode === 'dark'}
         onCheckedChange={(dark) => setMode(dark ? 'dark' : 'light')} />
     </div>
-    <McWrapper>
-      {@render menuItem({
-        label: 'Edit in Playground',
-        icon: PlaygroundIcon,
-        href: $urlsStore.mermaidChart.playground,
-        class: 'text-accent bg-background hover:bg-background/50'
-      })}
-    </McWrapper>
+
+    {#each mermaidChartMenuItems as item}
+      <McWrapper side="right" shouldCheckDiagramType={item.checkDiagramType}>
+        {@render menuItem({
+          ...item,
+          class: 'text-accent bg-background hover:bg-muted'
+        })}
+      </McWrapper>
+    {/each}
   </Popover.Content>
 </Popover.Root>
diff --git a/src/lib/components/McWrapper.svelte b/src/lib/components/McWrapper.svelte
index c49192a4..d80bec7d 100644
--- a/src/lib/components/McWrapper.svelte
+++ b/src/lib/components/McWrapper.svelte
@@ -2,13 +2,18 @@
   import { env } from '$/util/env';
   import { stateStore } from '$/util/state';
   import * as Tooltip from '$lib/components/ui/tooltip';
-  import type { Snippet } from 'svelte';
+  import type { ComponentProps, Snippet } from 'svelte';
   import ExternalLinkIcon from '~icons/material-symbols/open-in-new-rounded';
 
   let {
     children,
-    shouldCheckDiagramType = true
-  }: { children: Snippet; shouldCheckDiagramType?: boolean } = $props();
+    shouldCheckDiagramType = true,
+    side = 'bottom'
+  }: {
+    children: Snippet;
+    shouldCheckDiagramType?: boolean;
+    side?: ComponentProps<typeof Tooltip.Content>['side'];
+  } = $props();
 
   let shouldDisableComponent = $derived(
     shouldCheckDiagramType && $stateStore.diagramType === 'zenuml'
@@ -23,7 +28,7 @@
           {@render children()}
         </div>
       </Tooltip.Trigger>
-      <Tooltip.Content side="bottom">
+      <Tooltip.Content {side}>
         <div class="flex items-center gap-2">
           {#if shouldDisableComponent}
             <div class="text-muted-foreground">
diff --git a/src/lib/components/MermaidChartIcon.svelte b/src/lib/components/MermaidChartIcon.svelte
new file mode 100644
index 00000000..058e2185
--- /dev/null
+++ b/src/lib/components/MermaidChartIcon.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import type { ClassValue } from 'svelte/elements';
+
+  let { class: className }: { class?: ClassValue } = $props();
+</script>
+
+<img class={['size-4', className]} src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
diff --git a/src/lib/components/Share.svelte b/src/lib/components/Share.svelte
index 0bfdd249..abd56f88 100644
--- a/src/lib/components/Share.svelte
+++ b/src/lib/components/Share.svelte
@@ -6,6 +6,7 @@
   import { urlsStore } from '$/util/state';
   import ShareIcon from '~icons/material-symbols/share';
   import CopyInput from './CopyInput.svelte';
+  import MermaidChartIcon from './MermaidChartIcon.svelte';
 </script>
 
 <Dialog.Root>
@@ -33,7 +34,7 @@
         <Separator />
         <div class="flex flex-col gap-2">
           <h2 class="flex items-center gap-2">
-            <img class="size-5" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
+            <MermaidChartIcon class="size-5" />
             Mermaid Chart Playground
           </h2>
           <CopyInput value={$urlsStore.mermaidChart.playground} />
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
index cdb56cb1..eac0c449 100644
--- a/src/lib/util/state.ts
+++ b/src/lib/util/state.ts
@@ -132,6 +132,7 @@ export const urlsStore = derived([stateStore], ([{ code, serialized }]) => {
       save: `${MCBaseURL}/app/plugin/save?state=${serialized}`,
       playground: `${MCBaseURL}/play#${serialized}`
     },
+    new: `${window.location.protocol}//${window.location.host}${window.location.pathname}/#${serializeState(defaultState)}`,
     png,
     svg: `${rendererUrl}/svg/${serialized}`,
     view: `/view#${serialized}`
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index 8b440c5f..235405b3 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -5,6 +5,7 @@
   import Editor from '$/components/Editor.svelte';
   import History from '$/components/History/History.svelte';
   import McWrapper from '$/components/McWrapper.svelte';
+  import MermaidChartIcon from '$/components/MermaidChartIcon.svelte';
   import Navbar from '$/components/Navbar.svelte';
   import PanZoomToolbar from '$/components/PanZoomToolbar.svelte';
   import Preset from '$/components/Preset.svelte';
@@ -59,7 +60,7 @@
     <Share />
     <McWrapper>
       <Button variant="accent" size="sm" href={$urlsStore.mermaidChart.save} target="_blank">
-        <img class="size-4" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
+        <MermaidChartIcon />
         Save diagram
       </Button>
     </McWrapper>