feat(workspace): tab row scrolls away and snaps; pinnable focus-mode bars

A wheel step over the workspace background (tab row, margins) pushes the
tab row (notes, to-dos, hashtags) out at the top so the note fills the
area, like the Kanban bar; note and sidebar keep scrolling only
themselves. In focus mode the header and the folder sidebar can be
pinned; the header's shadow is lighter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -6,6 +6,13 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 
 ## [Unreleased]
 
+### Added
+- Notizen (Desktop): Scrollen im Hintergrund (über der Leiste mit Notizen, To-Dos und Hashtags oder am Rand neben der Notiz) schiebt diese Leiste oben heraus und rastet ein, sodass die Notiz den ganzen Bereich nutzt – wie beim Kanban. Hochscrollen dort holt sie zurück. In der Notiz und in der Ordnerleiste scrollt das Mausrad wie bisher nur deren Inhalt.
+- Fokus-Modus: Die Ordnerleiste links und die Leiste oben haben einen Pin. Angepinnt bleiben sie stehen, statt wieder wegzugleiten; die Einstellung bleibt erhalten.
+
+### Changed
+- Fokus-Modus: Die obere Leiste wirft nur noch einen leichten Schatten.
+
 ## [0.66.0] - 2026-11-02
 
 ### Added

README.md

@@ -68,7 +68,7 @@ Die meisten Notiz- und Aufgaben-Apps verlangen Struktur im falschen Moment: Wenn
 ### 📝 Workspace: Outliner-Notizen
 
 * Jeder Gedanke ein Bullet: `Enter`, `Tab`/`Shift+Tab`, Ein-/Ausklappen, Drag & Drop ganzer Äste; am Handy eine Leiste über der Tastatur zum Ein-/Ausrücken und Verschieben. Text lässt sich mit der Maus über mehrere Punkte markieren und wie in einem Texteditor löschen, ersetzen oder kopieren.
-* **Zoom-Fokus** per Klick auf den Bullet, Breadcrumbs zum Zurücknavigieren; **Fokus-Modus** (`Strg+Umschalt+F`) zeigt nur die Notiz in Lesebreite, Ordner gleiten bei Bedarf von links herein.
+* **Zoom-Fokus** per Klick auf den Bullet, Breadcrumbs zum Zurücknavigieren; **Fokus-Modus** (`Strg+Umschalt+F`) zeigt nur die Notiz in Lesebreite, Ordner gleiten bei Bedarf von links herein, Ordnerleiste und obere Leiste lassen sich anpinnen. Am Desktop schiebt Scrollen im Hintergrund (neben der Notiz) die Leiste mit Notizen, To-Dos und Hashtags nach oben heraus.
 * **Journal:** eine Notiz pro Tag, alle Tage untereinander (heute oben, ältere laden beim Scrollen nach), mit Kalender zum Springen; einzelne Tage lassen sich teilen. Pro Gerät abschaltbar.
 * Blocktypen und Slash-Befehle: `/todo`, `/number` (nummerierte Liste: 1., a., i.), `/link`, `/h1`–`/h3`, `/code` (mit Syntax-Hervorhebung), `/callout`, `/divider`, `/extract`, `/image`, `/audio`, `/diktat`.
 * **Bilder & Audio in Notizen:** `/image` (Datei, Kamera, Zwischenablage oder Link), `/audio` (Sprachnotiz oder Datei-Upload) und `/diktat` (Live-Transkription).

frontend/src/features/workspace/WorkspaceView.tsx

@@ -25,6 +25,7 @@ import {
   Loader2,
   CalendarDays,
   Minimize2,
+  PinOff,
 } from 'lucide-react';
 import {
   Document,
@@ -474,6 +475,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   // Focus mode: the folder sidebar slides in from the left (button, title click or mouse at the edge)
   const [zenSidebar, setZenSidebar] = useState<'closed' | 'click' | 'hover'>('closed');
   const [zenActionsTarget, setZenActionsTarget] = useState<HTMLDivElement | null>(null);
+  // Focus mode: header and sidebar can be pinned so they stay instead of sliding back (kept across sessions)
+  const [zenPinTop, setZenPinTop] = useState(() => localStorage.getItem('mindsift_zen_pin_top') === '1');
+  const [zenPinSide, setZenPinSide] = useState(() => localStorage.getItem('mindsift_zen_pin_side') === '1');
+  useEffect(() => {
+    localStorage.setItem('mindsift_zen_pin_top', zenPinTop ? '1' : '0');
+    localStorage.setItem('mindsift_zen_pin_side', zenPinSide ? '1' : '0');
+  }, [zenPinTop, zenPinSide]);
+  const zenSideOpen = zenPinSide || zenSidebar !== 'closed';
 
 
   // Drag and Drop state
@@ -1232,6 +1241,49 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return () => window.removeEventListener('keydown', onKey);
   }, [canFocus, focusMode, zenSidebar]);
 
+  // Desktop: a wheel step down over the background (the tab row, the margins beside and below the workspace)
+  // pushes the tab row (notes, to-dos, hashtags) out at the top and snaps, so the note fills the whole area,
+  // like the bar above the Kanban board; a step up brings it back. Over the note and the folder sidebar the
+  // wheel only scrolls them. The workspace is higher than the app's scroll area by the row (wsBar); that
+  // area stays overflow-hidden and is only scrolled from here.
+  const workspaceRootRef = useRef<HTMLDivElement>(null);
+  const tabRowRef = useRef<HTMLDivElement>(null);
+  const [wsBar, setWsBar] = useState(0);
+  useEffect(() => {
+    const row = tabRowRef.current;
+    if (!row || typeof ResizeObserver === 'undefined') return;
+    // offsetHeight is 0 on phones (the row is hidden there); 12 px is the gap below it
+    const measure = () => setWsBar(row.offsetHeight ? row.offsetHeight + 12 : 0);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(row);
+    return () => ro.disconnect();
+  }, []);
+  useEffect(() => {
+    const root = workspaceRootRef.current;
+    const area = root?.closest<HTMLElement>('[data-app-scroll]');
+    if (!root || !area || !wsBar || focusMode) return;
+    let pending = 0; // trackpads send many small steps: move only once they add up
+    let lockedUntil = 0;
+    const onWheel = (e: WheelEvent) => {
+      if (e.ctrlKey || e.shiftKey || isPhoneWidth()) return;
+      if ((e.target as HTMLElement).closest?.('[data-ws-pane]')) return;
+      const dy = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY;
+      if (dy === 0) return;
+      const max = area.scrollHeight - area.clientHeight;
+      if (dy > 0 ? area.scrollTop >= max - 1 : area.scrollTop <= 0) return;
+      e.preventDefault();
+      if (Date.now() < lockedUntil) return;
+      pending += dy;
+      if (Math.abs(pending) < 40) return;
+      pending = 0;
+      lockedUntil = Date.now() + 450;
+      area.scrollTo({ top: dy > 0 ? max : 0, behavior: 'smooth' });
+    };
+    area.addEventListener('wheel', onWheel, { passive: false });
+    return () => area.removeEventListener('wheel', onWheel);
+  }, [wsBar, focusMode]);
+
   const allFolderPaths = useMemo(() => {
     const set = new Set<string>(folders);
     for (const d of docs) {
@@ -1612,10 +1664,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   }, [tagsSummary, tagSearchQuery, tagSortBy]);
 
   return (
-    <div className="w-full h-full min-h-0 flex flex-col gap-3">
+    <div
+      ref={workspaceRootRef}
+      className="w-full h-full min-h-0 flex flex-col gap-3"
+      style={wsBar ? { height: `calc(100% + ${wsBar}px)`, flexShrink: 0 } : undefined}
+    >
       {/* Top Header: Workspace Tabs & Actions */}
       {/* Phones: the views are switched in the menu at the top, so the row is hidden there */}
-      <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
+      <div ref={tabRowRef} className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
         {/* Workspace selector tabs & left sidebar toggle */}
         <div className="grid grid-cols-3 w-full gap-1 sm:flex sm:flex-wrap sm:items-center sm:w-auto">
           <button
@@ -1843,24 +1899,38 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
       {/* Main Workspace Split Pane */}
       <div
+        data-ws-pane
         className={
           focusMode
-            ? 'fixed inset-0 z-[45] flex bg-editor focus-mode-enter'
+            ? `fixed inset-0 z-[45] flex bg-editor focus-mode-enter ${zenPinTop ? 'lg:pt-[45px]' : ''} ${
+                zenPinSide ? 'lg:pl-80' : ''
+              }`
             : 'flex flex-1 min-h-0 bg-editor rounded-card border border-border overflow-hidden'
         }
       >
         {focusMode && (
           <>
-            {/* Header slides in when the mouse touches the top edge (large screens) */}
+            {/* Header slides in when the mouse touches the top edge (large screens); pinned, it stays */}
-            <div className="hidden lg:block fixed top-0 inset-x-0 h-3 z-[46] group">
+            {/* A pinned sidebar takes the full height unless the header is pinned too: the header starts beside it */}
-              <div className="absolute top-0 inset-x-0 flex items-center gap-2 px-6 py-2 bg-panel/95 backdrop-blur-sm border-b border-border shadow-panel -translate-y-full group-hover:translate-y-0 group-focus-within:translate-y-0 transition-transform duration-200">
+            <div
+              className={`hidden lg:block fixed top-0 right-0 h-3 z-[46] group ${
+                zenPinSide && !zenPinTop ? 'left-80' : 'left-0'
+              }`}
+            >
+              <div
+                className={`absolute top-0 inset-x-0 flex items-center gap-2 px-6 py-2 bg-panel/95 backdrop-blur-sm border-b border-border shadow-sm transition-transform duration-200 ${
+                  zenPinTop ? 'translate-y-0' : '-translate-y-full group-hover:translate-y-0 group-focus-within:translate-y-0'
+                }`}
+              >
                 <button
                   type="button"
-                  onClick={() => setZenSidebar((v) => (v === 'closed' ? 'click' : 'closed'))}
+                  onClick={() =>
+                    zenPinSide ? setZenPinSide(false) : setZenSidebar((v) => (v === 'closed' ? 'click' : 'closed'))
+                  }
                   className="btn-icon h-7 w-7 shrink-0"
-                  title="Ordner und Notizen einblenden"
+                  title={zenSideOpen ? 'Ordner und Notizen ausblenden' : 'Ordner und Notizen einblenden'}
-                  aria-label="Ordner und Notizen einblenden"
+                  aria-label={zenSideOpen ? 'Ordner und Notizen ausblenden' : 'Ordner und Notizen einblenden'}
-                  aria-expanded={zenSidebar !== 'closed'}
+                  aria-expanded={zenSideOpen}
                 >
                   <FolderOpen className="w-3.5 h-3.5" />
                 </button>
@@ -1873,6 +1943,20 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                   {[selectedDocObj?.icon, selectedDocObj?.title].filter(Boolean).join(' ')}
                 </button>
                 <div ref={setZenActionsTarget} className="flex items-center" />
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    // Unpinned, the header slides away once the mouse leaves (focus would keep it open)
+                    if (zenPinTop) e.currentTarget.blur();
+                    setZenPinTop((v) => !v);
+                  }}
+                  className={`btn-icon h-7 w-7 shrink-0 ${zenPinTop ? 'text-accent' : ''}`}
+                  title={zenPinTop ? 'Leiste lösen' : 'Leiste anpinnen'}
+                  aria-label={zenPinTop ? 'Leiste lösen' : 'Leiste anpinnen'}
+                  aria-pressed={zenPinTop}
+                >
+                  {zenPinTop ? <PinOff className="w-3.5 h-3.5" /> : <Pin className="w-3.5 h-3.5" />}
+                </button>
                 <button
                   type="button"
                   onClick={() => setFocusMode(false)}
@@ -1886,11 +1970,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             </div>
             {/* Wide screens: touching the left edge opens the sidebar (the note sits far from it) */}
             <div
-              className="hidden xl:block fixed left-0 inset-y-0 w-2 z-[46]"
+              className={`${zenPinSide ? 'hidden' : 'hidden xl:block'} fixed left-0 inset-y-0 w-2 z-[46]`}
               onMouseEnter={() => setZenSidebar((v) => (v === 'closed' ? 'hover' : v))}
               aria-hidden
             />
-            {zenSidebar === 'click' && (
+            {zenSidebar === 'click' && !zenPinSide && (
               <div className="fixed inset-0 z-[46] bg-overlay/30" onClick={() => setZenSidebar('closed')} aria-hidden />
             )}
             <button
@@ -1909,9 +1993,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           onMouseLeave={() => setZenSidebar((v) => (v === 'hover' ? 'closed' : v))}
           className={
             focusMode
-              ? `fixed left-0 inset-y-0 z-[47] w-80 max-w-[85vw] flex flex-col bg-sidebar border-r border-border shadow-panel transition-transform duration-300 ease-out ${
+              ? // Pinned: from lg on it stays open beside the note (below a pinned header), without shadow
-                  zenSidebar !== 'closed' ? 'translate-x-0' : '-translate-x-full'
+                `fixed left-0 inset-y-0 z-[47] w-80 max-w-[85vw] flex flex-col bg-sidebar border-r border-border transition-transform duration-300 ease-out ${
-                }`
+                  zenSidebar !== 'closed'
+                    ? 'translate-x-0 shadow-panel'
+                    : zenPinSide
+                    ? '-translate-x-full lg:translate-x-0'
+                    : '-translate-x-full'
+                } ${zenPinSide && zenPinTop ? 'lg:top-[45px]' : ''}`
               : `${
                   (subView !== 'editor' && subView !== 'trash' && subView !== 'journal') || isSidebarCollapsed
                     ? 'hidden'
@@ -1956,6 +2045,23 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               >
                 <FilePlus className="w-4 h-4" />
               </button>
+              {/* Focus mode: pin the sliding sidebar so it stays beside the note */}
+              {focusMode && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    // Unpinned, it stays until the mouse leaves it
+                    setZenSidebar(zenPinSide ? 'hover' : 'closed');
+                    setZenPinSide((v) => !v);
+                  }}
+                  className={`hidden lg:inline-flex btn-icon h-8 w-8 ${zenPinSide ? 'text-accent' : ''}`}
+                  title={zenPinSide ? 'Seitenleiste lösen' : 'Seitenleiste anpinnen'}
+                  aria-label={zenPinSide ? 'Seitenleiste lösen' : 'Seitenleiste anpinnen'}
+                  aria-pressed={zenPinSide}
+                >
+                  {zenPinSide ? <PinOff className="w-4 h-4" /> : <Pin className="w-4 h-4" />}
+                </button>
+              )}
             </div>
           </div>