feat(ui): toggle the diagram-list sidebar

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.
This commit is contained in:
2026-05-22 21:50:06 +03:00
parent c35960761b
commit e1b5f31f87
4 changed files with 19 additions and 2 deletions

View File

@@ -34,6 +34,11 @@
e.preventDefault(); e.preventDefault();
void store.save(); 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. // ⌘/Ctrl+E: jump into viewer mode and toggle the quick-edit drawer.
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'e') { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'e') {
e.preventDefault(); e.preventDefault();
@@ -54,7 +59,9 @@
<div class="app"> <div class="app">
<Toolbar /> <Toolbar />
<div class="body"> <div class="body">
{#if store.showSidebar}
<Sidebar /> <Sidebar />
{/if}
{#if store.activeId} {#if store.activeId}
<div class="split" bind:this={splitHost} class:splitting> <div class="split" bind:this={splitHost} class:splitting>
{#if store.layout !== 'preview'} {#if store.layout !== 'preview'}

View File

@@ -26,10 +26,12 @@
return () => clearTimeout(timer); 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(() => { $effect(() => {
void store.layout; void store.layout;
void store.showGit; void store.showGit;
void store.showOptimize;
void store.showSidebar;
tick().then(fit); tick().then(fit);
}); });

View File

@@ -50,6 +50,12 @@
<header class="toolbar"> <header class="toolbar">
<div class="left"> <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="logo">Mermix</span>
<span class="divider"></span> <span class="divider"></span>
{#if store.activeId} {#if store.activeId}

View File

@@ -42,6 +42,8 @@ class Store {
toasts = $state<Toast[]>([]); toasts = $state<Toast[]>([]);
/** Most recent successfully rendered SVG, used for export. */ /** Most recent successfully rendered SVG, used for export. */
lastSvg = $state(''); lastSvg = $state('');
/** Whether the left sidebar (diagram list) is visible. */
showSidebar = $state(true);
/** Whether the Git side panel is visible. */ /** Whether the Git side panel is visible. */
showGit = $state(true); showGit = $state(true);
/** Whether the Optimize (Diagram Doctor) side panel is visible. */ /** Whether the Optimize (Diagram Doctor) side panel is visible. */