feat(toolbar): add sidebar toggle button

frontend/src/App.tsx

@@ -258,7 +258,7 @@ export default function App() {
   }, [])
 
   return (
-    <div className="app">
+    <div className={`app${session.sidebarOpen ? '' : ' sidebar-hidden'}`}>
       <QueryBar
         query={session.query}
         onQueryChange={(q) => updateSession({ query: q })}
@@ -269,6 +269,8 @@ export default function App() {
       <Toolbar
         theme={session.theme}
         onThemeChange={(t) => updateSession({ theme: t })}
+        sidebarOpen={session.sidebarOpen}
+        onSidebarOpenChange={(v) => updateSession({ sidebarOpen: v })}
         wideView={session.wideView}
         onWideViewChange={(w) => updateSession({ wideView: w })}
         showToc={session.showToc}

frontend/src/components/Toolbar.tsx

@@ -1,14 +1,16 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import {
   Sun, Moon, Monitor, ChevronsLeftRight, List,
-  Copy, Check, RotateCcw, ChevronDown, AlertCircle,
+  Copy, Check, RotateCcw, ChevronDown, AlertCircle, PanelLeft,
 } from 'lucide-react'
 import type { Session } from '../types'
 import type { ParseResult } from '../lib/markdown'
 
 interface Props {
   theme: Session['theme']
   onThemeChange: (t: Session['theme']) => void
+  sidebarOpen: boolean
+  onSidebarOpenChange: (v: boolean) => void
   wideView: boolean
   onWideViewChange: (w: boolean) => void
   showToc: boolean
@@ -49,9 +51,9 @@ async function writeToClipboard(text: string): Promise<void> {
 const ICON_SIZE = 15
 
 export default function Toolbar({
-  theme, onThemeChange, wideView, onWideViewChange,
-  showToc, onShowTocChange, showRaw, onShowRawChange,
-  rawContent, parseResult, onRestart,
+  theme, onThemeChange, sidebarOpen, onSidebarOpenChange,
+  wideView, onWideViewChange, showToc, onShowTocChange,
+  showRaw, onShowRawChange, rawContent, parseResult, onRestart,
 }: Props) {
   const [copyState, setCopyState] = useState<CopyState>('idle')
   const [showCopyMenu, setShowCopyMenu] = useState(false)
@@ -94,6 +96,13 @@ export default function Toolbar({
 
   return (
     <div className="toolbar">
+      <button
+        className={`bar-btn ${sidebarOpen ? 'active' : ''}`}
+        onClick={() => onSidebarOpenChange(!sidebarOpen)}
+        title="Toggle sidebar"
+      >
+        <PanelLeft size={ICON_SIZE} />
+      </button>
       <button
         className="bar-btn"
         onClick={() => onThemeChange(nextTheme)}

frontend/src/index.css

@@ -62,6 +62,15 @@ html, body {
   grid-template-columns: var(--sidebar-w) 1fr;
   height: 100vh;
   overflow: hidden;
+  transition: grid-template-columns 0.2s ease;
+}
+
+.app.sidebar-hidden {
+  grid-template-columns: 0 1fr;
+}
+
+.app.sidebar-hidden .sidebar {
+  visibility: hidden;
 }
 
 /* ── Query bar ── */

frontend/src/store/session.ts

@@ -14,6 +14,7 @@ const defaultSession: Session = {
   groupOrder: [],
   fileOrder: {},
   sidebarLabel: {},
+  sidebarOpen: true,
 };
 
 export function loadSession(): Session {

frontend/src/types.ts

@@ -34,4 +34,5 @@ export interface Session {
   groupOrder: string[];
   fileOrder: Record<string, string[]>;
   sidebarLabel: Record<string, "name" | "heading">;
+  sidebarOpen: boolean;
 }