feat(workspace): focus mode for notes

Ctrl+Shift+F or the note menu shows only the note over the whole window
at reading width; the header (title, actions, leave) slides in at the
top edge, Escape leaves; phones get a round exit button.

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

frontend/src/features/workspace/DocumentEditor.tsx

@@ -7,6 +7,7 @@ import {
   Trash2,
   RotateCcw,
   Download,
+  Maximize2,
   FileText,
   Loader2,
   ArrowLeft,
@@ -67,6 +68,9 @@ export interface DocumentEditorProps {
   variant?: 'page' | 'journal';
   /** Large screens: the action buttons render into this element (the workspace tab bar) */
   actionsTarget?: HTMLElement | null;
+  /** Distraction-free mode: reading width, menu entry to leave it */
+  focusMode?: boolean;
+  onToggleFocusMode?: () => void;
 }
 
 // Large screens (lg) put the note's actions into the workspace tab bar and drop the editor header
@@ -231,6 +235,8 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   onDocRemoved,
   variant = 'page',
   actionsTarget,
+  focusMode = false,
+  onToggleFocusMode,
 }) => {
   const inJournal = variant === 'journal';
   const large = useSyncExternalStore(subscribeLarge, isLargeScreen, () => false);
@@ -971,6 +977,26 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
               </button>
             )}
 
+            {onToggleFocusMode && (
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  setShowActionsMenu(false);
+                  onToggleFocusMode();
+                }}
+                className="w-full min-h-[44px] sm:min-h-0 px-2.5 py-2 sm:py-1.5 rounded-btn hover:bg-panel-elevated text-left text-main font-medium flex items-center gap-2 transition-colors cursor-pointer"
+              >
+                {focusMode ? (
+                  <Minimize2 className="w-3.5 h-3.5 text-accent shrink-0" />
+                ) : (
+                  <Maximize2 className="w-3.5 h-3.5 text-accent shrink-0" />
+                )}
+                <span className="flex-1">{focusMode ? 'Fokus-Modus beenden' : 'Fokus-Modus starten'}</span>
+                <kbd className="hidden sm:inline text-[10px] text-faint font-mono">Strg+⇧+F</kbd>
+              </button>
+            )}
+
             <button
               type="button"
               role="menuitem"
@@ -1119,7 +1145,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
       <div
         className={`w-full pl-2 pr-1 sm:px-8 flex-auto shrink-0 overflow-x-auto sm:overflow-x-visible [-webkit-overflow-scrolling:touch] ${
           inJournal ? 'py-3' : 'py-5'
-        }`}
+        } ${focusMode ? 'max-w-3xl mx-auto' : ''}`}
       >
         {desktopBar && zoomedBlock && breadcrumbs.length > 0 && <div className="mb-3">{breadcrumbNav}</div>}
         {zoomedBlock ? (