From e1b5f31f87834317025e5c370a74da06837e9a77 Mon Sep 17 00:00:00 2001
From: Aleksey Shakhmatov <dev@shakhmatov.com>
Date: Fri, 22 May 2026 21:50:06 +0300
Subject: [PATCH] feat(ui): toggle the diagram-list sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a ☰ toolbar button (and ⌘/Ctrl+B shortcut) to show/hide the left sidebar
for a wider editing/preview area. The preview re-fits when the sidebar — or the
Optimize panel — toggles, so the diagram stays centred.
---
 src/App.svelte                    | 9 ++++++++-
 src/lib/components/Preview.svelte | 4 +++-
 src/lib/components/Toolbar.svelte | 6 ++++++
 src/lib/store.svelte.ts           | 2 ++
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 8b4efda..93724b6 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -34,6 +34,11 @@
       e.preventDefault();
       void store.save();
     }
+    // ⌘/Ctrl+B: toggle the diagram-list sidebar.
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'b') {
+      e.preventDefault();
+      store.showSidebar = !store.showSidebar;
+    }
     // ⌘/Ctrl+E: jump into viewer mode and toggle the quick-edit drawer.
     if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'e') {
       e.preventDefault();
@@ -54,7 +59,9 @@
   <div class="app">
     <Toolbar />
     <div class="body">
-      <Sidebar />
+      {#if store.showSidebar}
+        <Sidebar />
+      {/if}
       {#if store.activeId}
         <div class="split" bind:this={splitHost} class:splitting>
           {#if store.layout !== 'preview'}
diff --git a/src/lib/components/Preview.svelte b/src/lib/components/Preview.svelte
index 42a0bbe..c8cbebb 100644
--- a/src/lib/components/Preview.svelte
+++ b/src/lib/components/Preview.svelte
@@ -26,10 +26,12 @@
     return () => clearTimeout(timer);
   });
 
-  // Re-fit when the available space changes (layout / panel toggles).
+  // Re-fit when the available space changes (layout / panel / sidebar toggles).
   $effect(() => {
     void store.layout;
     void store.showGit;
+    void store.showOptimize;
+    void store.showSidebar;
     tick().then(fit);
   });
 
diff --git a/src/lib/components/Toolbar.svelte b/src/lib/components/Toolbar.svelte
index beb375d..6250ce0 100644
--- a/src/lib/components/Toolbar.svelte
+++ b/src/lib/components/Toolbar.svelte
@@ -50,6 +50,12 @@
 
 <header class="toolbar">
   <div class="left">
+    <button
+      class="ghost icon"
+      class:on={store.showSidebar}
+      title="Toggle diagram list (⌘B)"
+      onclick={() => (store.showSidebar = !store.showSidebar)}>☰</button
+    >
     <span class="logo">Mermix</span>
     <span class="divider"></span>
     {#if store.activeId}
diff --git a/src/lib/store.svelte.ts b/src/lib/store.svelte.ts
index d71b17a..2acdd25 100644
--- a/src/lib/store.svelte.ts
+++ b/src/lib/store.svelte.ts
@@ -42,6 +42,8 @@ class Store {
   toasts = $state<Toast[]>([]);
   /** Most recent successfully rendered SVG, used for export. */
   lastSvg = $state('');
+  /** Whether the left sidebar (diagram list) is visible. */
+  showSidebar = $state(true);
   /** Whether the Git side panel is visible. */
   showGit = $state(true);
   /** Whether the Optimize (Diagram Doctor) side panel is visible. */