chore: Migrate navbar

.prettierrc

@@ -4,6 +4,6 @@
   "bracketSameLine": true,
   "trailingComma": "none",
   "printWidth": 100,
-  "tailwindConfig": "./tailwind.config.cjs",
+  "tailwindConfig": "./tailwind.config.js",
   "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
 }

.vscode/settings.json

@@ -28,5 +28,8 @@
   "vitest.enable": true,
   "testing.autoRun.mode": "rerun",
   "svelte.enable-ts-plugin": true,
-  "githubPullRequests.ignoredPullRequestBranches": ["develop"]
+  "githubPullRequests.ignoredPullRequestBranches": ["develop"],
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  }
 }

package.json

@@ -37,7 +37,7 @@
     "@typescript-eslint/parser": "6.21.0",
     "@vitest/ui": "^2.1.4",
     "autoprefixer": "^10.4.14",
-    "bits-ui": "^1.3.4",
+    "bits-ui": "^1.3.6",
     "c8": "7.14.0",
     "chai": "^4.3.7",
     "clsx": "^2.1.1",

src/app.postcss

@@ -3,73 +3,73 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
- 
-    --primary: 222.2 47.4% 11.2%;
+
+    --primary: 344 100% 61%;
     --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
+    --secondary: 248 24% 14%;
+    --secondary-foreground: 0 0% 100%;
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 72.2% 50.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
+
+    --primary: 344 100% 61%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 248 24% 14%;
+    --secondary-foreground: 0 0% 100%;
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 212.7 26.8% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
@@ -79,7 +79,6 @@
   }
 }
 
-
 .d {
   @apply border border-red-500;
 }

src/lib/components/DropdownNavMenu.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import * as Popover from '$lib/components/ui/popover/index.js';
+
   interface Props {
     links: { title: string; href: string }[];
     label?: string;
@@ -8,8 +10,8 @@
   let { links, label, icon }: Props = $props();
 </script>
 
-<div class="dropdown dropdown-end">
-  <button class="btn btn-ghost">
+<Popover.Root>
+  <Popover.Trigger class="flex items-center gap-0">
     {#if icon}
       <i class={icon}></i>
     {/if}
@@ -22,11 +24,10 @@
       class="ml-1 inline-block h-4 w-4 fill-current"
       ><path
         d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" /></svg>
-  </button>
-  <div
-    class="dropdown-content menu top-14 size-fit overflow-y-auto bg-base-200 text-base-content shadow-2xl">
+  </Popover.Trigger>
+  <Popover.Content>
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-    <ul tabindex="0" class="menu compact p-4">
+    <ul tabindex="0" class="menu flex flex-col gap-2">
       {#each links as { href, title }}
         <li>
           <a
@@ -40,5 +41,5 @@
         </li>
       {/each}
     </ul>
-  </div>
-</div>
+  </Popover.Content>
+</Popover.Root>

src/lib/components/Navbar.svelte

@@ -13,8 +13,9 @@
   import { MCBaseURL } from '$lib/util/util';
   import type { ComponentProps } from 'svelte';
   import DropdownNavMenu from './DropdownNavMenu.svelte';
-  import Privacy from './Privacy.svelte';
-  import Theme from './Theme.svelte';
+  import { Button } from './ui/button';
+  import { Separator } from './ui/separator';
+  import { Switch } from './ui/switch';
 
   const { isEnabledMermaidChartLinks } = env;
 
@@ -83,12 +84,14 @@
   </div>
 {/if}
 
-<div class="navbar z-50 bg-primary p-0 shadow-lg">
-  <div class="mx-2 flex flex-1 gap-2 px-2">
-    <a href="/"><img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" /></a>
+<nav class="z-50 flex p-4">
+  <div class="flex flex-1 items-center gap-4">
+    <Button variant="link" size="icon" href="/">
+      <img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" />
+    </Button>
     <div
       id="switcher"
-      class="flex items-center justify-center gap-2 font-bold"
+      class="flex items-center justify-center gap-4 font-medium"
       class:flex-row-reverse={isReferral}>
       <a href="/">
         {#if !isReferral}
@@ -97,9 +100,7 @@
         Live Editor
       </a>
       {#if isEnabledMermaidChartLinks}
-        <input
-          type="checkbox"
-          class="toggle toggle-primary"
+        <Switch
           id="editorMode"
           checked={isReferral}
           onclick={() => {
@@ -111,7 +112,10 @@
               isReferral ? 'noreferrer' : ''
             );
           }} />
-        <a href="{MCBaseURL}/play#{$stateStore.serialized}">Playground</a>
+
+        <a href="{MCBaseURL}/play#{$stateStore.serialized}"
+          >Playground <span class="text-sm opacity-50">- more features, no account required</span
+          ></a>
       {/if}
     </div>
   </div>
@@ -156,31 +160,24 @@
     onclick={toggleMenu} />
 
   <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
-    <span class="text-sm">v{version}</span>
-    <ul class="items-center justify-between pt-4 text-base lg:flex lg:pt-0">
-      <li>
+    <!-- <span class="text-sm">v{version}</span> -->
+    <div class="h-full items-center justify-between gap-2 pt-4 text-base lg:flex lg:pt-0">
+      <!-- <li>
         <Privacy />
-      </li>
-      <li>
-        <Theme />
-      </li>
-      <li>
-        <DropdownNavMenu label="Documentation" links={documentationLinks} />
-      </li>
-      <li>
-        <DropdownNavMenu icon="fab fa-github fa-lg" links={githubLinks} />
-      </li>
+      </li> -->
 
+      <!-- <DropdownNavMenu label="Documentation" links={documentationLinks} /> -->
+
+      <DropdownNavMenu icon="fab fa-github fa-lg" links={githubLinks} />
+      <Separator orientation="vertical" class="min-h-[50%]" />
+      <Button variant="secondary" size="sm">Share</Button>
       {#if isEnabledMermaidChartLinks}
-        <li>
-          <a class="btn btn-ghost" target="_blank" href="https://mermaidchart.com">
-            <img class="size-6" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
-          </a>
-        </li>
+        <Button size="sm" target="_blank" href="https://mermaidchart.com"
+          ><img class="size-6" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />Save diagram</Button>
       {/if}
-    </ul>
+    </div>
   </div>
-</div>
+</nav>
 
 <style>
   #menu-toggle:checked + #menu {

src/lib/components/Theme.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-  import { setTheme, themeStore } from '$lib/util/theme';
-
-  const themes = [
-    '🌝 light',
-    '🌚 dark',
-    '🧁 cupcake',
-    '🐝 bumblebee',
-    '✳️ emerald',
-    '🏢 corporate',
-    '🌃 synthwave',
-    '👴 retro',
-    '🤖 cyberpunk',
-    '🌸 valentine',
-    '🎃 halloween',
-    '🌷 garden',
-    '🌲 forest',
-    '🐟 aqua',
-    '👓 lofi',
-    '🖍 pastel',
-    '🧚‍♀️ fantasy',
-    '📝 wireframe',
-    '🏴 black',
-    '💎 luxury',
-    '🧛‍♂️ dracula'
-  ];
-</script>
-
-<div class="dropdown hidden lg:block">
-  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-  <div tabindex="0" class="btn btn-ghost">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      class="inline-block h-6 w-6 stroke-current md:mr-2"
-      ><path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /></svg>
-    <span class="hidden md:inline">Theme</span>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 1792 1792"
-      class="ml-1 inline-block h-4 w-4 fill-current"
-      ><path
-        d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" /></svg>
-  </div>
-  <div
-    class="dropdown-content top-px mt-14 h-96 w-56 overflow-y-auto bg-base-200 text-base-content shadow-2xl">
-    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-    <ul tabindex="0" class="menu compact p-4">
-      {#each themes as theme}
-        <li class:bordered={$themeStore.theme !== undefined && theme.includes($themeStore.theme)}>
-          <span
-            role="menuitem"
-            tabindex="0"
-            class="btn btn-ghost justify-start"
-            onclick={() => setTheme(theme)}
-            onkeypress={() => setTheme(theme)}>{theme}</span>
-        </li>
-      {/each}
-    </ul>
-  </div>
-</div>

src/lib/components/ui/popover/index.ts

@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+};

src/lib/components/ui/popover/popover-content.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "center",
+		sideOffset = 4,
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: PopoverPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		{align}
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>

src/lib/components/ui/separator/index.ts

@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};

src/lib/components/ui/separator/separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "horizontal",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	class={cn(
+		"bg-border shrink-0",
+		orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{...restProps}
+/>

src/lib/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};

src/lib/components/ui/switch/switch.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	class={cn(
+		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>

yarn.lock

@@ -1723,10 +1723,10 @@ bindings@^1.5.0:
   dependencies:
     file-uri-to-path "1.0.0"
 
-bits-ui@^1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/bits-ui/-/bits-ui-1.3.4.tgz#8099427ef0ce870e5d9ef843b8b41e929705d09f"
-  integrity sha512-hmrYbmb5D3ecRHP9GWTlkoo/9IGsPwMCmy3dAPKAfztG/NhWk49JcpuPbWi/eIggetVnv5nYrFp3N8zWscePCA==
+bits-ui@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/bits-ui/-/bits-ui-1.3.6.tgz#9b0fe5db7934db06fa0cea9b468251bfe991ca58"
+  integrity sha512-0Ee7Ox5KqIBdio/+TG387Xlj6QJ0S7tHVS2K4DYiBHxBRbm6ni13i/pOoNDjeME6NOGUZxbSe4dNZIW3pGlxZA==
   dependencies:
     "@floating-ui/core" "^1.6.4"
     "@floating-ui/dom" "^1.6.7"