From f90b0d5eb95de4bff20806e0809b3eaf46e15d6f Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 19:08:45 +0100
Subject: [PATCH 01/33] fix(realtime): eliminate cpu reconnect loop, singleton
 global connection & fix disappearing notes

---
 Doku/flaws.md                                 |   2 +-
 frontend/src/App.tsx                          |   6 +-
 .../src/features/lists/SharedListsView.tsx    |   1 -
 .../src/features/workspace/WorkspaceView.tsx  | 150 +++-----
 frontend/src/lib/api.ts                       | 334 ++++++++----------
 internal/ws/hub.go                            |  22 +-
 6 files changed, 221 insertions(+), 294 deletions(-)

diff --git a/Doku/flaws.md b/Doku/flaws.md
index 13b33a8..05855fc 100644
--- a/Doku/flaws.md
+++ b/Doku/flaws.md
@@ -10,7 +10,7 @@ Diese Datei dokumentiert eine ehrliche und schonungslose technische Analyse alle
 |---|---|---|---|---|
 | **FLAW-01** | Workspace Sync | Kein echtes CRDT/OT – Lock-Heartbeat-Modell mit Last-Write-Wins | **Gelöst (v2.1)** | Behoben durch Yjs CRDT-Engine & blockbasierte kollaborative Bearbeitung |
 | **FLAW-02** | Storage | Dual-Storage Drift (SQLite vs. Dateisystem) | **Obsolet / Gelöst** | Kein Risiko: MindSift nutzt Pure-DB (keine `.md`-Dateien auf Platte) |
-| **FLAW-03** | Netzwerk / WS | Proxy-Inkompatibilität bei WebSocket-Upgrades & Polling-Fallback | **Mittel** | Verzögerte Synchronisierung (1–3s Polling) in Firmennetzwerken |
+| **FLAW-03** | Netzwerk / WS | Proxy-Inkompatibilität bei WebSocket-Upgrades & Polling-Fallback | **Gelöst (v2.2)** | Behoben durch Dual-Transport SSE-Fallback & globale Singleton-Verbindung |
 | **FLAW-04** | Datenbank / Suche | Volltextsuche via `LIKE '%query%'` statt SQLite FTS5 | **Mittel** | Performance-Einbrüche bei wachsenden Notizbeständen (>10.000 Blöcke) |
 | **FLAW-05** | Frontend DOM | Fehlende Virtualisierung im Outliner-Baum | **Mittel** | Frame-Drops und Lags bei Dokumenten mit >500 Blöcken auf Mobilgeräten |
 | **FLAW-06** | SQLite Concurrency | Single-Writer-Bottleneck bei hohem parallelem Schreibaufkommen | **Mittel** | `SQLITE_BUSY` Fehler bei vielen gleichzeitigen Team-Nutzern |
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a0bfd16..0cc26a1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Layers,
   CheckSquare,
@@ -414,7 +414,7 @@ export const App: React.FC = () => {
     setActiveThemeState(themeId);
   };
 
-  const refreshAll = async () => {
+  const refreshAll = useCallback(async () => {
     try {
       const [meRes, deckRes, listsRes] = await Promise.all([
         api.getMe(),
@@ -428,7 +428,7 @@ export const App: React.FC = () => {
     } catch {
       // If token expired or invalid, api.ts dispatches mindsift:unauthorized
     }
-  };
+  }, []);
 
   const checkBootAndAuth = async () => {
     setBootLoading(true);
diff --git a/frontend/src/features/lists/SharedListsView.tsx b/frontend/src/features/lists/SharedListsView.tsx
index 8fc62f0..03b737d 100644
--- a/frontend/src/features/lists/SharedListsView.tsx
+++ b/frontend/src/features/lists/SharedListsView.tsx
@@ -105,7 +105,6 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
   const [dragOverItemTarget, setDragOverItemTarget] = useState<{ itemId: string; position: 'before' | 'after' } | null>(null);
   const [dragOverCategoryTarget, setDragOverCategoryTarget] = useState<string | null>(null);
 
-  const wsRef = useRef<WebSocket | null>(null);
   const realtimeConnRef = useRef<any>(null);
 
   const loadLists = async () => {
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 4b46cf6..d0f7760 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -50,7 +50,7 @@ import {
   Radio,
 } from 'lucide-react';
 import { BlockType, Document, DocumentBlock, DocBlocksPatchEvent, DocLockInfo, DocShare, FolderShare, SharedFolder, TagDetails, TagSummary, Team, User } from '../../lib/types';
-import { api, getToken, triggerHaptic, onWebSocketStatus, isWebSocketConnected, buildWebSocketURL, createRealtimeConnection, RealtimeTransport } from '../../lib/api';
+import { api, getToken, triggerHaptic, onWebSocketStatus, isWebSocketConnected, sendWebSocketMessage, createRealtimeConnection, RealtimeTransport } from '../../lib/api';
 import { CodeBlockItem } from './CodeBlockItem';
 import { UserAutocomplete } from '../UserAutocomplete';
 import { UnifiedShareModal } from '../../components/UnifiedShareModal';
@@ -130,14 +130,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [showIconPicker, setShowIconPicker] = useState(false);
   const [showWikiLinkMenu, setShowWikiLinkMenu] = useState(false);
 
-  // Dedicated WebSocket/SSE connection & status for live indicator
-  const wsRef = useRef<WebSocket | null>(null);
+  // Realtime connection & status for live indicator
   const realtimeConnRef = useRef<any>(null);
-  const wsReconnectTimerRef = useRef<any>(null);
-  const wsReconnectDelayRef = useRef<number>(2000);
   const [wsConnected, setWsConnected] = useState<boolean>(false);
   const [realtimeTransport, setRealtimeTransport] = useState<RealtimeTransport>('none');
   const [wsDisconnectReason, setWsDisconnectReason] = useState<string | null>(null);
+  const onStatsChangeRef = useRef(onStatsChange);
+  onStatsChangeRef.current = onStatsChange;
+  const lastLocalEditTimestampRef = useRef<number>(0);
+  const isSavingToBackendRef = useRef<boolean>(false);
 
   // Folder state (synchronized with server)
   const [customFolders, setCustomFolders] = useState<string[]>([]);
@@ -441,25 +442,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       color: getCollaboratorColor(currentUser?.id || ''),
       lastActive: Date.now(),
     };
-    if (realtimeConnRef.current && realtimeConnRef.current.isConnected()) {
-      realtimeConnRef.current.send({
-        event: 'CRDT_AWARENESS',
-        docId: selectedDoc.id,
-        payload,
-      });
-    } else if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-      try {
-        wsRef.current.send(
-          JSON.stringify({
-            event: 'CRDT_AWARENESS',
-            docId: selectedDoc.id,
-            payload,
-          })
-        );
-      } catch {}
-    } else {
-      api.sendDocumentAwareness(selectedDoc.id, payload).catch(() => {});
-    }
+    sendWebSocketMessage({
+      event: 'CRDT_AWARENESS',
+      docId: selectedDoc.id,
+      payload,
+    });
   };
 
   const handleBlockFocus = (blockIdOrEvent?: string | React.FocusEvent<any>) => {
@@ -501,6 +488,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const executeSaveToBackend = async (docToSave: Document) => {
     if (isReadOnly) return;
     let saveSucceeded = false;
+    isSavingToBackendRef.current = true;
     try {
       const docId = docToSave.id;
       const dirtyMap = localDirtyBlocksRef.current.get(docId);
@@ -582,7 +570,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       }
 
       saveSucceeded = true;
-      onStatsChange();
+      onStatsChangeRef.current();
       api.getWorkspaceTags().then(setWorkspaceTags).catch(() => {});
       if (selectedTag) {
         api.getTagDetails(selectedTag).then(setTagDetails).catch(() => {});
@@ -590,6 +578,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     } catch (e: any) {
       console.error('Failed to save document to backend', e);
     } finally {
+      isSavingToBackendRef.current = false;
       if (saveSucceeded) {
         if (pendingSaveDocRef.current === null || pendingSaveDocRef.current === docToSave) {
           pendingSaveDocRef.current = null;
@@ -626,6 +615,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const persistDocument = async (updatedDoc: Document, immediate = false) => {
     if (isReadOnly) return;
     ensureLock();
+    lastLocalEditTimestampRef.current = Date.now();
 
     // Record block-level delta against previous local state and server baseline
     const docId = updatedDoc.id;
@@ -792,15 +782,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     if (prevId && prevId !== selectedDoc?.id) {
       flushPendingSave();
       releaseMyLock(prevId);
-      if (realtimeConnRef.current && realtimeConnRef.current.isConnected()) {
-        realtimeConnRef.current.send({ event: 'CRDT_LEAVE', docId: prevId });
-      } else if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-        try {
-          wsRef.current.send(JSON.stringify({ event: 'CRDT_LEAVE', docId: prevId }));
-        } catch {}
-      } else {
-        api.clearDocumentAwareness(prevId).catch(() => {});
-      }
+      sendWebSocketMessage({ event: 'CRDT_LEAVE', docId: prevId });
       if (crdtSessionRef.current) {
         crdtSessionRef.current.destroy();
         crdtSessionRef.current = null;
@@ -814,39 +796,24 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       const session = new DocumentCRDTSession(targetDoc.id);
       session.initFromBlocks(targetDoc.blocks || []);
       session.onLocalUpdate = (b64Update) => {
-        if (realtimeConnRef.current && realtimeConnRef.current.isConnected()) {
-          realtimeConnRef.current.send({
-            event: 'CRDT_UPDATE',
-            docId: targetDoc.id,
-            payload: { update: b64Update },
-          });
-        } else if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-          try {
-            wsRef.current.send(
-              JSON.stringify({
-                event: 'CRDT_UPDATE',
-                docId: targetDoc.id,
-                payload: { update: b64Update },
-              })
-            );
-          } catch {}
-        } else {
-          api.saveDocumentCRDT(targetDoc.id, { update: b64Update }).catch(() => {});
-        }
+        sendWebSocketMessage({
+          event: 'CRDT_UPDATE',
+          docId: targetDoc.id,
+          payload: { update: b64Update },
+        });
       };
       session.onRemoteChange = (crdtBlocks) => {
-        setSelectedDoc((prev) => (prev && prev.id === targetDoc.id ? { ...prev, blocks: crdtBlocks } : prev));
-        setDocs((prev) => prev.map((d) => (d.id === targetDoc.id ? { ...d, blocks: crdtBlocks } : d)));
+        const recentlyEdited = Date.now() - lastLocalEditTimestampRef.current < 2500;
+        const hasPendingSave = pendingSaveDocRef.current !== null || isSavingToBackendRef.current;
+        const hasDirtyBlocks = (localDirtyBlocksRef.current.get(targetDoc.id)?.size || 0) > 0;
+        if (!recentlyEdited && !hasPendingSave && !hasDirtyBlocks) {
+          setSelectedDoc((prev) => (prev && prev.id === targetDoc.id ? { ...prev, blocks: crdtBlocks } : prev));
+          setDocs((prev) => prev.map((d) => (d.id === targetDoc.id ? { ...d, blocks: crdtBlocks } : d)));
+        }
       };
       crdtSessionRef.current = session;
 
-      if (realtimeConnRef.current && realtimeConnRef.current.isConnected()) {
-        realtimeConnRef.current.send({ event: 'CRDT_JOIN', docId: targetDoc.id });
-      } else if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-        try {
-          wsRef.current.send(JSON.stringify({ event: 'CRDT_JOIN', docId: targetDoc.id }));
-        } catch {}
-      }
+      sendWebSocketMessage({ event: 'CRDT_JOIN', docId: targetDoc.id });
 
       api
         .getDocumentCRDT(targetDoc.id)
@@ -859,7 +826,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               crdtSessionRef.current.applyRemoteUpdates(res.updates);
             }
             const blocks = crdtSessionRef.current.getBlocks();
-            if (blocks.length > 0) {
+            const recentlyEdited = Date.now() - lastLocalEditTimestampRef.current < 2500;
+            const hasPendingSave = pendingSaveDocRef.current !== null || isSavingToBackendRef.current;
+            const hasDirtyBlocks = (localDirtyBlocksRef.current.get(targetDoc.id)?.size || 0) > 0;
+            if (blocks.length > 0 && !recentlyEdited && !hasPendingSave && !hasDirtyBlocks) {
               setSelectedDoc((prev) => (prev && prev.id === targetDoc.id ? { ...prev, blocks } : prev));
               setDocs((prev) => prev.map((d) => (d.id === targetDoc.id ? { ...d, blocks } : d)));
             }
@@ -884,15 +854,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return () => {
       flushPendingSave();
       if (currentDocIdRef.current) {
-        if (realtimeConnRef.current && realtimeConnRef.current.isConnected()) {
-          realtimeConnRef.current.send({ event: 'CRDT_LEAVE', docId: currentDocIdRef.current });
-        } else if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-          try {
-            wsRef.current.send(JSON.stringify({ event: 'CRDT_LEAVE', docId: currentDocIdRef.current }));
-          } catch {}
-        } else {
-          api.clearDocumentAwareness(currentDocIdRef.current).catch(() => {});
-        }
+        sendWebSocketMessage({ event: 'CRDT_LEAVE', docId: currentDocIdRef.current });
         if (crdtSessionRef.current) {
           crdtSessionRef.current.destroy();
           crdtSessionRef.current = null;
@@ -967,7 +929,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             crdtSessionRef.current.applyRemoteUpdates(payload.updates);
           }
           const blocks = crdtSessionRef.current.getBlocks();
-          if (blocks.length > 0) {
+          const recentlyEdited = Date.now() - lastLocalEditTimestampRef.current < 2500;
+          const hasPendingSave = pendingSaveDocRef.current !== null || isSavingToBackendRef.current;
+          const hasDirtyBlocks = (localDirtyBlocksRef.current.get(payload.docId)?.size || 0) > 0;
+          if (blocks.length > 0 && !recentlyEdited && !hasPendingSave && !hasDirtyBlocks) {
             setSelectedDoc((prev) => (prev && prev.id === payload.docId ? { ...prev, blocks } : prev));
             setDocs((prev) => prev.map((d) => (d.id === payload.docId ? { ...d, blocks } : d)));
           }
@@ -978,7 +943,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           if (payload.fromUserId !== currentUserIdRef.current) {
             crdtSessionRef.current.applyRemoteUpdate(payload.update);
             const blocks = crdtSessionRef.current.getBlocks();
-            if (blocks && blocks.length > 0) {
+            const recentlyEdited = Date.now() - lastLocalEditTimestampRef.current < 2500;
+            const hasPendingSave = pendingSaveDocRef.current !== null || isSavingToBackendRef.current;
+            const hasDirtyBlocks = (localDirtyBlocksRef.current.get(payload.docId)?.size || 0) > 0;
+            if (blocks && blocks.length > 0 && !recentlyEdited && !hasPendingSave && !hasDirtyBlocks) {
               setSelectedDoc((prev) => (prev && prev.id === payload.docId ? { ...prev, blocks } : prev));
               setDocs((prev) => prev.map((d) => (d.id === payload.docId ? { ...d, blocks } : d)));
             }
@@ -1046,7 +1014,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         if (created && created.id) {
           recordSyncedDoc(created);
           setDocs((prev) => (prev.some((d) => d.id === created.id) ? prev : [created, ...prev]));
-          onStatsChange();
+          onStatsChangeRef.current();
         }
       } else if (msg.event === 'DOC_UPDATED') {
         const updated = msg.payload as Document;
@@ -1089,7 +1057,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               return nextDoc;
             });
           }
-          onStatsChange();
+          onStatsChangeRef.current();
         }
       } else if (msg.event === 'DOC_DELETED') {
         const deletedId = typeof msg.payload === 'string' ? msg.payload : msg.payload?.id;
@@ -1098,7 +1066,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           if (selectedDocIdRef.current === deletedId) {
             setSelectedDoc(null);
           }
-          onStatsChange();
+          onStatsChangeRef.current();
         }
       } else if (msg.event === 'WORKSPACE_FOLDERS_UPDATED') {
         api.getFolders().then(setCustomFolders).catch(() => {});
@@ -1177,7 +1145,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       }
       window.removeEventListener('mindsift:ws', handleGlobalCustomEvent);
     };
-  }, [onStatsChange]);
+  }, []);
 
   // Fallback HTTP polling when WebSocket is disconnected (e.g. corporate proxy / firewall blocking WebSockets)
   useEffect(() => {
@@ -1200,7 +1168,16 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       }
 
       // 2. Poll document content if not actively typing and document has changed on server
-      if (selectedDocIdRef.current && !isEditorFocusedRef.current && !pendingSaveDocRef.current) {
+      const recentlyEdited = Date.now() - lastLocalEditTimestampRef.current < 4000;
+      const hasPendingSave = pendingSaveDocRef.current !== null || isSavingToBackendRef.current;
+      const hasDirtyBlocks = (localDirtyBlocksRef.current.get(selectedDocIdRef.current || '')?.size || 0) > 0;
+      if (
+        selectedDocIdRef.current &&
+        !isEditorFocusedRef.current &&
+        !hasPendingSave &&
+        !hasDirtyBlocks &&
+        !recentlyEdited
+      ) {
         try {
           const fresh = await api.getDocument(selectedDocIdRef.current);
           if (fresh && (!selectedDoc || fresh.updatedAt !== selectedDoc.updatedAt)) {
@@ -1889,20 +1866,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         : b
     );
     nextBlocks.splice(afterIndex + 1, 0, newBlock);
+    lastLocalEditTimestampRef.current = Date.now();
     persistDocument({ ...selectedDoc, blocks: nextBlocks });
-    setLastFocusedBlockId(newBlock.id);
-    setBlockCursor(newBlock.id, 0);
-
-    // Focus into the new element next tick
-    setTimeout(() => {
-      const el = blockInputRefs.current[newBlock.id];
-      if (el) {
-        el.focus();
-        if ('setSelectionRange' in el && typeof (el as any).value === 'string') {
-          (el as any).setSelectionRange(0, 0);
-        }
-      }
-    }, 20);
+    focusBlock(newBlock.id, 0);
   };
 
   // Indent block (Tab): increase level by 1 and move all descendant sub-bullets along
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index be47083..765ffc2 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1140,6 +1140,11 @@ export function onRealtimeStatus(callback: (connected: boolean, transport: Realt
   };
 }
 
+let isWsBlockedByProxy = false;
+let sseReconnectTimer: any = null;
+let sseReconnectDelay = 2000;
+const globalSubscribedRooms = new Set<string>();
+
 function notifyRealtimeStatusChange(connected: boolean, transport: RealtimeTransport) {
   isRealtimeConnectedState = connected;
   activeTransport = transport;
@@ -1154,20 +1159,32 @@ function notifyRealtimeStatusChange(connected: boolean, transport: RealtimeTrans
 }
 
 export function connectSSE(rooms?: string[]): void {
+  if (rooms) {
+    rooms.forEach((r) => globalSubscribedRooms.add(r));
+  }
+  clearTimeout(sseReconnectTimer);
+  clearTimeout(wsReconnectTimer);
+  clearTimeout(wsConnectionWatchdog);
+
   if (activeGlobalSSE) {
     try { activeGlobalSSE.close(); } catch {}
     activeGlobalSSE = null;
   }
 
   try {
-    const url = buildSSEURL(undefined, undefined, rooms);
+    const url = buildSSEURL(undefined, undefined, Array.from(globalSubscribedRooms));
     const es = new EventSource(url);
     activeGlobalSSE = es;
 
     es.onopen = () => {
       console.info('[MindSift Realtime] Server-Sent Events (SSE) verbunden (Proxy-Fallback aktiv).');
-      wsReconnectDelay = 2000;
+      sseReconnectDelay = 2000;
       notifyRealtimeStatusChange(true, 'sse');
+      if (activeSSEId && globalSubscribedRooms.size > 0) {
+        globalSubscribedRooms.forEach((room) => {
+          api.joinSSERoom(activeSSEId!, room, 'join').catch(() => {});
+        });
+      }
     };
 
     es.onmessage = (event) => {
@@ -1175,6 +1192,11 @@ export function connectSSE(rooms?: string[]): void {
         const msg = JSON.parse(event.data) as WSMessage;
         if (msg.event === 'SSE_CONNECTED') {
           activeSSEId = msg.payload?.sseId || null;
+          if (activeSSEId && globalSubscribedRooms.size > 0) {
+            globalSubscribedRooms.forEach((room) => {
+              api.joinSSERoom(activeSSEId!, room, 'join').catch(() => {});
+            });
+          }
         }
         wsListeners.forEach((fn) => {
           try {
@@ -1190,17 +1212,24 @@ export function connectSSE(rooms?: string[]): void {
     };
 
     es.onerror = (e) => {
-      console.warn('[MindSift Realtime] SSE getrennt oder Fehler aufgetreten:', e);
       if (activeTransport === 'sse') {
         notifyRealtimeStatusChange(false, 'none');
       }
       try { es.close(); } catch {}
       activeGlobalSSE = null;
       if (!manualDisconnect && getToken()) {
-        clearTimeout(wsReconnectTimer);
-        wsReconnectTimer = setTimeout(() => {
-          connectWebSocket();
-        }, 5000);
+        clearTimeout(sseReconnectTimer);
+        const delay = sseReconnectDelay;
+        sseReconnectDelay = Math.min(30000, Math.round(sseReconnectDelay * 1.5));
+        sseReconnectTimer = setTimeout(() => {
+          if (!manualDisconnect && getToken()) {
+            if (isWsBlockedByProxy) {
+              connectSSE();
+            } else {
+              connectWebSocket();
+            }
+          }
+        }, delay);
       }
     };
   } catch (err) {
@@ -1214,11 +1243,19 @@ export function connectWebSocket(): void {
   if (!token) return;
   manualDisconnect = false;
 
+  // If proxy blocked WebSocket previously, do not attempt failing WebSocket; stay on SSE
+  if (isWsBlockedByProxy) {
+    connectSSE();
+    return;
+  }
+
   if (activeGlobalWS && (activeGlobalWS.readyState === WebSocket.OPEN || activeGlobalWS.readyState === WebSocket.CONNECTING)) {
     return;
   }
 
   clearTimeout(wsConnectionWatchdog);
+  clearTimeout(wsReconnectTimer);
+  clearTimeout(sseReconnectTimer);
 
   try {
     const url = buildWebSocketURL();
@@ -1229,6 +1266,7 @@ export function connectWebSocket(): void {
     wsConnectionWatchdog = setTimeout(() => {
       if (ws && ws.readyState !== WebSocket.OPEN) {
         console.warn('[MindSift Realtime] WebSocket connection timeout (Proxy Upgrade Block). Wechsle automatisch zu SSE...');
+        isWsBlockedByProxy = true;
         try { ws.close(); } catch {}
         activeGlobalWS = null;
         connectSSE();
@@ -1243,6 +1281,13 @@ export function connectWebSocket(): void {
       }
       wsReconnectDelay = 2000;
       notifyRealtimeStatusChange(true, 'ws');
+      if (globalSubscribedRooms.size > 0) {
+        globalSubscribedRooms.forEach((room) => {
+          try {
+            ws.send(JSON.stringify({ event: 'JOIN_ROOM', room }));
+          } catch {}
+        });
+      }
     };
 
     ws.onmessage = (event) => {
@@ -1264,11 +1309,11 @@ export function connectWebSocket(): void {
     ws.onclose = (evt: CloseEvent) => {
       clearTimeout(wsConnectionWatchdog);
       activeGlobalWS = null;
-      console.warn('[MindSift Global WS] Closed with code:', evt?.code, 'reason:', evt?.reason);
 
       const isProxyIssue = evt?.code === 1006 || evt?.code === 1002 || evt?.code === 1008;
       if (isProxyIssue && !manualDisconnect && getToken()) {
-        console.warn('[MindSift Realtime] Proxy/Firewall Inkompatibilität erkannt (Code ' + evt.code + '). Wechsle zu SSE...');
+        console.warn('[MindSift Realtime] Proxy/Firewall Inkompatibilität erkannt (Code ' + evt.code + '). Wechsle dauerhaft zu SSE...');
+        isWsBlockedByProxy = true;
         connectSSE();
         return;
       }
@@ -1282,21 +1327,22 @@ export function connectWebSocket(): void {
         const delay = wsReconnectDelay;
         wsReconnectDelay = Math.min(30000, Math.round(wsReconnectDelay * 1.5));
         wsReconnectTimer = setTimeout(() => {
-          connectWebSocket();
+          if (!manualDisconnect && getToken()) {
+            connectWebSocket();
+          }
         }, delay);
       }
     };
 
     ws.onerror = (e) => {
       clearTimeout(wsConnectionWatchdog);
-      console.warn('[MindSift Global WS] Error:', e);
       try {
         ws.close();
       } catch {}
     };
   } catch (e) {
     clearTimeout(wsConnectionWatchdog);
-    console.warn('Failed to connect WebSocket, switching to SSE:', e);
+    isWsBlockedByProxy = true;
     connectSSE();
   }
 }
@@ -1305,12 +1351,20 @@ export function connectWebSocket(): void {
 if (typeof window !== 'undefined') {
   window.addEventListener('online', () => {
     if (getToken() && !isRealtimeConnected()) {
-      connectWebSocket();
+      if (isWsBlockedByProxy) {
+        connectSSE();
+      } else {
+        connectWebSocket();
+      }
     }
   });
   document.addEventListener('visibilitychange', () => {
     if (document.visibilityState === 'visible' && getToken() && !isRealtimeConnected()) {
-      connectWebSocket();
+      if (isWsBlockedByProxy) {
+        connectSSE();
+      } else {
+        connectWebSocket();
+      }
     }
   });
 }
@@ -1319,6 +1373,7 @@ export function disconnectWebSocket(): void {
   manualDisconnect = true;
   clearTimeout(wsReconnectTimer);
   clearTimeout(wsConnectionWatchdog);
+  clearTimeout(sseReconnectTimer);
   if (activeGlobalWS) {
     try {
       activeGlobalWS.close();
@@ -1344,18 +1399,22 @@ export function sendWebSocketMessage(msg: any): void {
   try {
     const parsed = typeof msg === 'string' ? JSON.parse(msg) : msg;
     if (parsed.event === 'CRDT_UPDATE' && parsed.docId) {
-      api.saveDocumentCRDT(parsed.docId, { update: parsed.payload?.update });
+      api.saveDocumentCRDT(parsed.docId, { update: parsed.payload?.update }).catch(() => {});
     } else if (parsed.event === 'CRDT_AWARENESS' && parsed.docId) {
-      api.sendDocumentAwareness(parsed.docId, parsed.payload);
+      api.sendDocumentAwareness(parsed.docId, parsed.payload).catch(() => {});
     } else if (parsed.event === 'CRDT_LEAVE' && parsed.docId) {
-      api.clearDocumentAwareness(parsed.docId);
-      if (activeSSEId) api.joinSSERoom(activeSSEId, `doc:${parsed.docId}`, 'leave');
+      api.clearDocumentAwareness(parsed.docId).catch(() => {});
+      if (activeSSEId) api.joinSSERoom(activeSSEId, `doc:${parsed.docId}`, 'leave').catch(() => {});
     } else if (parsed.event === 'CRDT_JOIN' && parsed.docId) {
-      if (activeSSEId) api.joinSSERoom(activeSSEId, `doc:${parsed.docId}`, 'join');
+      if (activeSSEId) api.joinSSERoom(activeSSEId, `doc:${parsed.docId}`, 'join').catch(() => {});
+    } else if (parsed.event === 'JOIN_ROOM' && parsed.room) {
+      if (activeSSEId) api.joinSSERoom(activeSSEId, parsed.room, 'join').catch(() => {});
+    } else if (parsed.event === 'LEAVE_ROOM' && parsed.room) {
+      if (activeSSEId) api.joinSSERoom(activeSSEId, parsed.room, 'leave').catch(() => {});
     } else if (parsed.event === 'LOCK_DOC' && parsed.docId) {
-      api.lockDocument(parsed.docId);
+      api.lockDocument(parsed.docId).catch(() => {});
     } else if (parsed.event === 'UNLOCK_DOC' && parsed.docId) {
-      api.unlockDocument(parsed.docId);
+      api.unlockDocument(parsed.docId).catch(() => {});
     }
   } catch (err) {
     console.error('Error dispatching fallback REST message for SSE:', err);
@@ -1377,196 +1436,79 @@ export function createRealtimeConnection(options: {
   onStatusChange?: (status: { connected: boolean; transport: RealtimeTransport; reason?: string }) => void;
 }) {
   let isClosed = false;
-  let currentTransport: RealtimeTransport = 'none';
-  let ws: WebSocket | null = null;
-  let es: EventSource | null = null;
-  let watchdogTimer: any = null;
-  let reconnectTimer: any = null;
-  let reconnectDelay = 2000;
-  let sseId: string | null = null;
 
-  const notify = (connected: boolean, transport: RealtimeTransport, reason?: string) => {
-    currentTransport = transport;
-    options.onStatusChange?.({ connected, transport, reason });
-  };
+  const joinedRooms: string[] = [];
+  if (options.docId) joinedRooms.push(`doc:${options.docId}`);
+  if (options.listId) joinedRooms.push(options.listId);
+  if (options.rooms) {
+    options.rooms.forEach((r) => {
+      if (!joinedRooms.includes(r)) joinedRooms.push(r);
+    });
+  }
 
-  const connectSSE = () => {
+  joinedRooms.forEach((r) => globalSubscribedRooms.add(r));
+
+  // Subscribe to status changes
+  const unsubStatus = onRealtimeStatus((connected, transport) => {
     if (isClosed) return;
-    if (es) {
-      try { es.close(); } catch {}
-      es = null;
-    }
+    options.onStatusChange?.({
+      connected,
+      transport,
+      reason: connected ? undefined : 'Verbindung getrennt',
+    });
+  });
 
-    try {
-      const allRooms = [...(options.rooms || [])];
-      if (options.docId) allRooms.push(`doc:${options.docId}`);
-      if (options.listId) allRooms.push(options.listId);
-      const url = buildSSEURL(options.listId, options.docId, allRooms);
-      es = new EventSource(url);
+  // Subscribe to messages
+  let unsubMsg: (() => void) | null = null;
+  if (options.onMessage) {
+    unsubMsg = onWebSocketMessage((msg) => {
+      if (isClosed) return;
+      options.onMessage?.(msg);
+    });
+  }
 
-      es.onopen = () => {
-        if (isClosed) return;
-        reconnectDelay = 2000;
-        notify(true, 'sse');
-      };
-
-      es.onmessage = (evt) => {
-        if (isClosed) return;
-        try {
-          const msg = JSON.parse(evt.data) as WSMessage;
-          if (msg.event === 'SSE_CONNECTED') {
-            sseId = msg.payload?.sseId || null;
-          }
-          options.onMessage?.(msg);
-        } catch (e) {
-          console.error('SSE JSON error', e);
-        }
-      };
-
-      es.onerror = (e) => {
-        if (isClosed) return;
-        notify(false, 'none', 'SSE-Verbindungsabbruch');
-        try { es?.close(); } catch {}
-        es = null;
-        clearTimeout(reconnectTimer);
-        reconnectTimer = setTimeout(() => {
-          if (!isClosed) connectWS();
-        }, 5000);
-      };
-    } catch (e: any) {
-      notify(false, 'none', e?.message || 'SSE Initialisierungsfehler');
-    }
+  // Join rooms on the active connection
+  const joinAll = () => {
+    joinedRooms.forEach((r) => {
+      if (r.startsWith('doc:')) {
+        sendWebSocketMessage({ event: 'CRDT_JOIN', docId: r.slice(4) });
+      } else {
+        sendWebSocketMessage({ event: 'JOIN_ROOM', room: r });
+      }
+    });
   };
 
-  const connectWS = () => {
+  if (isRealtimeConnected()) {
+    joinAll();
+  }
+
+  const unsubRejoin = onRealtimeStatus((connected) => {
     if (isClosed) return;
-    const token = getToken();
-    if (!token) {
-      notify(false, 'none', 'Kein Authentifizierungs-Token vorhanden');
-      return;
+    if (connected) {
+      joinAll();
     }
-
-    if (ws) {
-      try { ws.close(); } catch {}
-      ws = null;
-    }
-
-    clearTimeout(watchdogTimer);
-
-    try {
-      const url = buildWebSocketURL(options.listId);
-      ws = new WebSocket(url);
-
-      // 3.5s watchdog for corporate proxies silently discarding Upgrade header
-      watchdogTimer = setTimeout(() => {
-        if (ws && ws.readyState !== WebSocket.OPEN && !isClosed) {
-          console.warn('[MindSift Realtime] WebSocket connection timeout (Proxy Upgrade block). Falling back to SSE...');
-          try { ws.close(); } catch {}
-          ws = null;
-          connectSSE();
-        }
-      }, 3500);
-
-      ws.onopen = () => {
-        if (isClosed) return;
-        clearTimeout(watchdogTimer);
-        reconnectDelay = 2000;
-        notify(true, 'ws');
-        if (options.docId) {
-          try {
-            ws?.send(JSON.stringify({ event: 'CRDT_JOIN', docId: options.docId }));
-          } catch {}
-        }
-      };
-
-      ws.onmessage = (evt) => {
-        if (isClosed) return;
-        try {
-          const msg = JSON.parse(evt.data) as WSMessage;
-          options.onMessage?.(msg);
-        } catch (e) {
-          console.error('WS JSON error', e);
-        }
-      };
-
-      ws.onclose = (evt: CloseEvent) => {
-        if (isClosed) return;
-        clearTimeout(watchdogTimer);
-        ws = null;
-
-        const isProxyError = evt?.code === 1006 || evt?.code === 1002 || evt?.code === 1008;
-        if (isProxyError) {
-          console.warn(`[MindSift Realtime] Proxy WebSocket rejection detected (Code ${evt.code}). Falling back to SSE...`);
-          connectSSE();
-          return;
-        }
-
-        const reason = evt.reason || (evt.code === 1000 ? 'Normal geschlossen' : `Code ${evt.code}`);
-        notify(false, 'none', reason);
-
-        clearTimeout(reconnectTimer);
-        const delay = reconnectDelay;
-        reconnectDelay = Math.min(30000, Math.round(reconnectDelay * 1.5));
-        reconnectTimer = setTimeout(connectWS, delay);
-      };
-
-      ws.onerror = (e) => {
-        if (isClosed) return;
-        clearTimeout(watchdogTimer);
-        try { ws?.close(); } catch {}
-      };
-    } catch (e: any) {
-      clearTimeout(watchdogTimer);
-      console.warn('[MindSift Realtime] WebSocket constructor failed, trying SSE fallback:', e);
-      connectSSE();
-    }
-  };
-
-  connectWS();
+  });
 
   return {
-    getTransport: () => currentTransport,
-    isConnected: () => currentTransport !== 'none',
+    getTransport: () => activeTransport,
+    isConnected: () => isRealtimeConnected(),
     send: (msg: any) => {
-      const str = typeof msg === 'string' ? msg : JSON.stringify(msg);
-      if (ws && ws.readyState === WebSocket.OPEN) {
-        ws.send(str);
-        return;
-      }
-      // SSE Fallback: dispatch via REST endpoints
-      try {
-        const parsed = typeof msg === 'string' ? JSON.parse(msg) : msg;
-        if (parsed.event === 'CRDT_UPDATE' && parsed.docId) {
-          api.saveDocumentCRDT(parsed.docId, { update: parsed.payload?.update });
-        } else if (parsed.event === 'CRDT_AWARENESS' && parsed.docId) {
-          api.sendDocumentAwareness(parsed.docId, parsed.payload);
-        } else if (parsed.event === 'CRDT_LEAVE' && parsed.docId) {
-          api.clearDocumentAwareness(parsed.docId);
-          if (sseId) api.joinSSERoom(sseId, `doc:${parsed.docId}`, 'leave');
-        } else if (parsed.event === 'CRDT_JOIN' && parsed.docId) {
-          if (sseId) api.joinSSERoom(sseId, `doc:${parsed.docId}`, 'join');
-        } else if (parsed.event === 'LOCK_DOC' && parsed.docId) {
-          api.lockDocument(parsed.docId);
-        } else if (parsed.event === 'UNLOCK_DOC' && parsed.docId) {
-          api.unlockDocument(parsed.docId);
-        }
-      } catch (err) {
-        console.error('Error dispatching fallback REST message for connection:', err);
-      }
+      if (isClosed) return;
+      sendWebSocketMessage(msg);
     },
     close: () => {
       isClosed = true;
-      clearTimeout(watchdogTimer);
-      clearTimeout(reconnectTimer);
-      if (ws) {
-        try { ws.close(); } catch {}
-        ws = null;
-      }
-      if (es) {
-        try { es.close(); } catch {}
-        es = null;
-      }
-      notify(false, 'none');
+      unsubStatus();
+      unsubRejoin();
+      if (unsubMsg) unsubMsg();
+      joinedRooms.forEach((r) => {
+        globalSubscribedRooms.delete(r);
+        if (r.startsWith('doc:')) {
+          sendWebSocketMessage({ event: 'CRDT_LEAVE', docId: r.slice(4) });
+        } else {
+          sendWebSocketMessage({ event: 'LEAVE_ROOM', room: r });
+        }
+      });
     },
   };
 }
diff --git a/internal/ws/hub.go b/internal/ws/hub.go
index 6863cbc..56cf61a 100644
--- a/internal/ws/hub.go
+++ b/internal/ws/hub.go
@@ -761,10 +761,11 @@ func (c *Client) readPump() {
 			break
 		}
 
-		// Handle client-initiated lock, CRDT, and presence messages
+		// Handle client-initiated lock, CRDT, room subscription, and presence messages
 		var incoming struct {
 			Event   string          `json:"event"`
 			DocID   string          `json:"docId"`
+			Room    string          `json:"room"`
 			Payload json.RawMessage `json:"payload"`
 		}
 		if json.Unmarshal(message, &incoming) == nil && c.userID != "" && c.userID != "anonymous" {
@@ -777,6 +778,25 @@ func (c *Client) readPump() {
 				docID = p.DocID
 			}
 
+			// Room subscription without requiring docID
+			if incoming.Event == "JOIN_ROOM" {
+				room := incoming.Room
+				if room == "" {
+					room = docID
+				}
+				if room != "" {
+					c.hub.JoinRoom(c, room)
+				}
+			} else if incoming.Event == "LEAVE_ROOM" {
+				room := incoming.Room
+				if room == "" {
+					room = docID
+				}
+				if room != "" {
+					c.hub.LeaveRoom(c, room)
+				}
+			}
+
 			if docID != "" {
 				switch incoming.Event {
 				case "LOCK_DOC":
-- 
2.54.0


From 297f3ed1113b5fdca149051386502ad4f0cdcb13 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 19:14:21 +0100
Subject: [PATCH 02/33] docs: remove non-existent flaw FLAW-09 (virtual
 keyboard viewport)

---
 Doku/flaws.md | 21 +++++----------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/Doku/flaws.md b/Doku/flaws.md
index 05855fc..2f0993e 100644
--- a/Doku/flaws.md
+++ b/Doku/flaws.md
@@ -16,8 +16,7 @@ Diese Datei dokumentiert eine ehrliche und schonungslose technische Analyse alle
 | **FLAW-06** | SQLite Concurrency | Single-Writer-Bottleneck bei hohem parallelem Schreibaufkommen | **Mittel** | `SQLITE_BUSY` Fehler bei vielen gleichzeitigen Team-Nutzern |
 | **FLAW-07** | Benachrichtigungen | Fehlende Dead-Letter-Queue für Webhook- & E-Mail-Alarme | **Niedrig** | Verlorene Benachrichtigungen bei temporärem Ausfall von Drittsystemen |
 | **FLAW-08** | Sicherheit / Auth | Statische JWT-Tokens ohne rotierende Refresh-Tokens & Blacklisting | **Niedrig** | Keine sofortige Sitzungsinvalidierung bei Rechteentzug |
-| **FLAW-09** | Mobile UX | Viewport-Verschiebung durch Virtual-Keyboard auf iOS/Android | **Niedrig** | Verdeckte Eingabefelder und springende Bottom-Navigationsleisten |
-| **FLAW-10** | Outliner UX | Kein hierarchischer Undo/Redo-Stack für Strukturmutationen | **Mittel** | Versehentliches Löschen/Einrücken von Blöcken nicht per `Ctrl+Z` rückgängig machbar |
+| **FLAW-09** | Outliner UX | Kein hierarchischer Undo/Redo-Stack für Strukturmutationen | **Mittel** | Versehentliches Löschen/Einrücken von Blöcken nicht per `Ctrl+Z` rückgängig machbar |
 
 ---
 
@@ -84,7 +83,7 @@ Diese Datei dokumentiert eine ehrliche und schonungslose technische Analyse alle
 ---
 
 ### FLAW-05: Fehlende Virtualisierung im Outliner-Baum
-- **Betroffene Komponenten:** [`modules/workspace.md`](./modules/workspace.md), `frontend/src/lib/components/Outliner.svelte`
+- **Betroffene Komponenten:** [`modules/workspace.md`](./modules/workspace.md), `frontend/src/features/workspace/WorkspaceView.tsx`
 - **Ursache:** Jeder Block im Notizbaum wird als eigenes DOM-Element gerendert. Enthält ein Dokument 500 bis 2000 Blöcke (z. B. lange Projektjournale oder Besprechungsprotokolle), befinden sich tausende verschachtelte `div`- und `contenteditable`-Elemente gleichzeitig im DOM.
 - **Folgen:** Auf älteren Smartphones oder bei schnellem Tippen kommt es zu spürbaren Input-Latenzen und Ruckeln beim Scrollen.
 - **Empfohlene Lösung:**
@@ -123,19 +122,9 @@ Diese Datei dokumentiert eine ehrliche und schonungslose technische Analyse alle
 
 ---
 
-### FLAW-09: Mobile Viewport-Verschiebung durch Virtual-Keyboard
-- **Betroffene Komponenten:** `frontend/src/routes/+layout.svelte`, `frontend/src/lib/components/BottomNav.svelte`
-- **Ursache:** Öffnet sich auf iOS Safari oder Android Chrome die Bildschirmtastatur, ändert der Browser die Höhe des sichtbaren Viewports dynamisch. Feste CSS-Attribute wie `height: 100vh` oder `fixed bottom-0` führen dazu, dass Eingabefelder unter die Tastatur rutschen oder die Navigationsleiste den Bildschirm verdeckt.
-- **Folgen:** In der mobilen Triage- und Aufgabenansicht muss der Nutzer manuell scrollen, um die Speichern-Buttons zu erreichen.
-- **Empfohlene Lösung:**
-  1. Nutzung der modernen `window.visualViewport`-API in Svelte.
-  2. Dynamisches Setzen einer CSS-Variable `--vvh` (`visualViewport.height`) zur präzisen Anpassung von Modals und Bottom-Sheets.
-
----
-
-### FLAW-10: Kein hierarchischer Undo/Redo-Stack im Outliner
-- **Betroffene Komponenten:** [`modules/workspace.md`](./modules/workspace.md), `frontend/src/lib/components/Outliner.svelte`
-- **Ursache:** Standardmäßiges Browser-`Ctrl+Z` funktioniert nur innerhalb eines einzelnen aktiven Textfelds (`contenteditable`). Strukturelle Aktionen – wie das Verschieben von Blöcken via Drag & Drop, Einrücken (`Tab`), Ausrücken (`Shift+Tab`) oder das Löschen ganzer Unterbäume – sind im Standard-Browser-Undo-Stack nicht enthalten.
+### FLAW-09: Kein hierarchischer Undo/Redo-Stack im Outliner
+- **Betroffene Komponenten:** [`modules/workspace.md`](./modules/workspace.md), `frontend/src/features/workspace/WorkspaceView.tsx`
+- **Ursache:** Standardmäßiges Browser-`Ctrl+Z` funktioniert nur innerhalb eines einzelnen aktiven Textfelds (`contenteditable` / Textarea). Strukturelle Aktionen – wie das Verschieben von Blöcken via Drag & Drop, Einrücken (`Tab`), Ausrücken (`Shift+Tab`) oder das Löschen ganzer Unterbäume – sind im Standard-Browser-Undo-Stack nicht enthalten.
 - **Folgen:** Verschiebt ein Nutzer versehentlich einen Block samt 10 Unterpunkten, kann dies nicht mit `Ctrl+Z` rückgängig gemacht werden.
 - **Empfohlene Lösung:**
   1. Implementierung eines expliziten In-Memory Command-Stacks im Frontend (Command-Pattern: `execute()` / `undo()`).
-- 
2.54.0


From f3b3f07e04bcd630751a2cef13d482fb8de1f968 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 19:54:51 +0100
Subject: [PATCH 03/33] refactor(crdt): implement proxy-resilient Yjs
 dual-transport sync with indexeddb offline-first and debounced sqlite
 persistence

---
 Doku/flaws.md                                 |  13 +-
 Doku/reverse-proxy.md                         |   4 +-
 frontend/package-lock.json                    |  21 +
 frontend/package.json                         |   1 +
 .../src/features/workspace/WorkspaceView.tsx  | 459 ++++-------------
 frontend/src/lib/yjs-provider.ts              | 380 ++++++++++++++
 internal/api/server.go                        | 254 ++++++----
 internal/api/server_test.go                   |  81 +++
 internal/ws/docroom.go                        | 473 ++++++++++++++++++
 internal/ws/hub.go                            |  46 +-
 10 files changed, 1248 insertions(+), 484 deletions(-)
 create mode 100644 frontend/src/lib/yjs-provider.ts
 create mode 100644 internal/ws/docroom.go

diff --git a/Doku/flaws.md b/Doku/flaws.md
index 2f0993e..b00cb7e 100644
--- a/Doku/flaws.md
+++ b/Doku/flaws.md
@@ -27,11 +27,14 @@ Diese Datei dokumentiert eine ehrliche und schonungslose technische Analyse alle
 - **Betroffene Komponenten:** [`api/websocket.md`](./api/websocket.md), [`modules/workspace.md`](./modules/workspace.md), `internal/ws/hub.go`, `internal/storage/sqlite.go`, `frontend/src/lib/crdt.ts`, `frontend/src/features/workspace/WorkspaceView.tsx`
 - **Ursache (Historisch):** MindSift nutzte ein kooperatives Dokumenten-Lease-Locking mit Last-Write-Wins. Bei parallelem Zugriff oder Netztrennung konnten Änderungen überschrieben werden.
 - **Implementierte Lösung (Yjs CRDT):**
-  1. **Block-Level Yjs CRDT:** Implementierung eines vollwertigen CRDT-Modells mit `Y.Doc`. Die Blockreihenfolge wird über ein `Y.Array<string>` (Block-IDs) konfliktfrei mit dem YATA-Algorithmus aufgelöst. Inhalte und Metadaten (Text, Level, Checked, Collapsed) sind in `Y.Map` gekapselt.
-  2. **Wegfall von Ganzdokument-Sperren:** Keine blockierenden Sperren mehr (`isLockedByOther` entfernt). Mehrere Nutzer können zeitgleich am selben Dokument schreiben.
-  3. **Dual-Persistence:** CRDT-Zustände und Delta-Updates werden binär/Base64 in SQLite (`document_crdt_state`, `document_crdt_updates`) persistiert. Zur Aufrechterhaltung relationaler Indizes (Global To-Dos, Tag-Indizierung, Suche) werden Blöcke parallel in `document_blocks` materialisiert.
-  4. **Live-Awareness & Presence:** Block-Fokus und Cursor-Zustand werden via `CRDT_AWARENESS` übertragen. Nutzer sehen ein Live-Badge im Header (`Live (N)`) sowie farbige Kollaborator-Pillen an aktiven Blöcken.
-  5. **REST- & Proxy-Sicherheit:** Ergänzend zu WebSockets stehen Endpunkte `GET /api/v1/documents/:id/crdt` und `PUT /api/v1/documents/:id/crdt` bereit.
+  1. **Block-Level Yjs CRDT:** Implementierung eines vollwertigen CRDT-Modells mit `Y.Doc`. Die Blockreihenfolge wird über ein `Y.Array<string>` (Block-IDs) konfliktfrei mit dem YATA-Algorithmus aufgelöst. Inhalte und Metadaten sind in `Y.Map` gekapselt.
+  2. **Vollständige Eliminierung des Lock-Managers:** Alle pessimistischen Dokumentensperren (`isLockedByOther`, Lease-Heartbeats, 423 Locked) wurden restlos entfernt. Mehrere Nutzer können zeitgleich an denselben Absätzen und Blöcken arbeiten.
+  3. **Proxy-Resiliente Dual-Transport-Architektur:**
+     - **Primary:** Gorilla WebSocket (`/api/v1/ws/docs/:id`) mit binärer Übertragung.
+     - **Fallback:** 4-Sekunden-Watchdog schaltet bei blockiertem WebSocket-Upgrade automatisch auf HTTP-Transport um: Downstream via Server-Sent Events (`GET /api/v1/sync/docs/:id/stream`) und Upstream via HTTP POST (`POST /api/v1/sync/docs/:id/update`).
+  4. **Offline-First via IndexedDB:** Lokale Eingaben landen sofort und unterbrechungsfrei in `y-indexeddb`. Daten gehen auch bei Netzwerkabbrüchen nicht verloren.
+  5. **Asynchroner DocRoom-Hub & Debounced SQLite-Persistenz:** In-Memory `DocRoom` pro aktivem Dokument; SQLite-Schreibvorgänge laufen debounced (2.5 Sekunden Inaktivität oder Raum-Austritt) rein asynchron im Hintergrund, ohne API-Threads oder Tastenschläge zu blockieren.
+  6. **UI Status-Indikator:** Dezent im Header visualisiert: Grün ("Live (WebSocket)"), Gelb ("Eingeschränkt (HTTP-Proxy-Modus)") und Grau ("Offline (Lokal gesichert)").
 
 ---
 
diff --git a/Doku/reverse-proxy.md b/Doku/reverse-proxy.md
index 1cb3e52..7a3615e 100644
--- a/Doku/reverse-proxy.md
+++ b/Doku/reverse-proxy.md
@@ -71,8 +71,8 @@ server {
         proxy_send_timeout 3600s;
     }
 
-    # 2. Server-Sent Events Fallback (/api/v1/events)
-    location /api/v1/events {
+    # 2. Server-Sent Events Fallback (/api/v1/events & /api/v1/sync/)
+    location ~ ^/api/v1/(events|sync/) {
         proxy_pass http://127.0.0.1:8080;
         proxy_http_version 1.1;
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 11ddca9..3e9936a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "prismjs": "^1.30.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "y-indexeddb": "^9.0.12",
         "yjs": "^13.6.33"
       },
       "devDependencies": {
@@ -2782,6 +2783,26 @@
         }
       }
     },
+    "node_modules/y-indexeddb": {
+      "version": "9.0.12",
+      "resolved": "https://registry.npmjs.org/y-indexeddb/-/y-indexeddb-9.0.12.tgz",
+      "integrity": "sha512-9oCFRSPPzBK7/w5vOkJBaVCQZKHXB/v6SIT+WYhnJxlEC61juqG0hBrAf+y3gmSMLFLwICNH9nQ53uscuse6Hg==",
+      "license": "MIT",
+      "dependencies": {
+        "lib0": "^0.2.74"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      },
+      "peerDependencies": {
+        "yjs": "^13.0.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index a4ff258..7d2eb01 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "prismjs": "^1.30.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "y-indexeddb": "^9.0.12",
     "yjs": "^13.6.33"
   },
   "devDependencies": {
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index d0f7760..bb8439a 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -56,6 +56,7 @@ import { UserAutocomplete } from '../UserAutocomplete';
 import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { useMobileActions } from '../../context/MobileActionContext';
 import { DocumentCRDTSession, CollaboratorAwareness, getCollaboratorColor } from '../../lib/crdt';
+import { YjsHybridProvider, SyncTransportStatus } from '../../lib/yjs-provider';
 
 interface WorkspaceViewProps {
   currentUser?: User | null;
@@ -226,23 +227,18 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [showFolderShareModal, setShowFolderShareModal] = useState(false);
   const [folderShares, setFolderShares] = useState<FolderShare[]>([]);
 
-  // --- DOCUMENT CRDT & COLLABORATION STATE ---
+  // --- DOCUMENT CRDT & HYBRID TRANSPORT STATE ---
   const crdtSessionRef = useRef<DocumentCRDTSession | null>(null);
+  const providerRef = useRef<YjsHybridProvider | null>(null);
+  const [syncStatus, setSyncStatus] = useState<SyncTransportStatus>('offline');
   const [activePeers, setActivePeers] = useState<CollaboratorAwareness[]>([]);
-
-  // --- DOCUMENT LOCKING STATE (FALLBACK) ---
-  const [activeLock, setActiveLock] = useState<DocLockInfo | null>(null);
-  const [holdsLock, setHoldsLock] = useState(false);
-  const holdsLockRef = useRef(false);
-  const heartbeatTimerRef = useRef<any>(null);
-  const idleUnlockTimerRef = useRef<any>(null);
   const currentDocIdRef = useRef<string | null>(null);
   const isEditorFocusedRef = useRef(false);
   const isDraggingBlockRef = useRef(false);
 
   const blockInputRefs = useRef<Record<string, HTMLTextAreaElement | HTMLInputElement | null>>({});
 
-  // With CRDT, multiple users can write simultaneously without lockouts
+  // Collaborative CRDT: multi-user writing with zero lockouts
   const isLockedByOther = false;
   const isReadOnly = selectedDoc?.permission === 'read';
 
@@ -369,69 +365,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return mergedOrder.map((id) => blockMap.get(id)!).filter(Boolean);
   };
 
-  const stopHeartbeat = () => {
-    if (heartbeatTimerRef.current) {
-      clearInterval(heartbeatTimerRef.current);
-      heartbeatTimerRef.current = null;
-    }
-  };
-
-  const startHeartbeat = (docId: string) => {
-    stopHeartbeat();
-    heartbeatTimerRef.current = setInterval(async () => {
-      if (!holdsLockRef.current) {
-        stopHeartbeat();
-        return;
-      }
-      const res = await api.heartbeatDocLock(docId);
-      if (!res.extended) {
-        holdsLockRef.current = false;
-        setHoldsLock(false);
-        stopHeartbeat();
-      }
-    }, 4000);
-  };
-
-  const releaseMyLock = async (docId?: string) => {
-    const targetDocId = docId || currentDocIdRef.current;
-    if (!targetDocId) return;
-    const wasHolding = holdsLockRef.current;
-    stopHeartbeat();
-    if (idleUnlockTimerRef.current) {
-      clearTimeout(idleUnlockTimerRef.current);
-      idleUnlockTimerRef.current = null;
-    }
-    holdsLockRef.current = false;
-    setHoldsLock(false);
-    if (wasHolding || docId) {
-      try {
-        await api.unlockDocument(targetDocId);
-      } catch {}
-    }
-  };
-
-  const ensureLock = async (force = false): Promise<boolean> => {
-    if (!selectedDoc || selectedDoc.permission === 'read') return false;
-    if (holdsLockRef.current && !force) {
-      return true;
-    }
-    try {
-      const res = await api.lockDocument(selectedDoc.id);
-      if (res.acquired) {
-        holdsLockRef.current = true;
-        setHoldsLock(true);
-        setActiveLock(null);
-        startHeartbeat(selectedDoc.id);
-        return true;
-      } else if (res.lock) {
-        setActiveLock(res.lock);
-        return false;
-      }
-    } catch (e) {
-      console.error('Failed to acquire lock', e);
-    }
-    return false;
-  };
+  const releaseMyLock = async (_docId?: string) => {};
 
   const broadcastAwareness = (blockId: string | null) => {
     if (!selectedDoc) return;
@@ -442,43 +376,28 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       color: getCollaboratorColor(currentUser?.id || ''),
       lastActive: Date.now(),
     };
-    sendWebSocketMessage({
-      event: 'CRDT_AWARENESS',
-      docId: selectedDoc.id,
-      payload,
-    });
+    if (providerRef.current) {
+      providerRef.current.sendAwareness(payload);
+    } else {
+      sendWebSocketMessage({
+        event: 'CRDT_AWARENESS',
+        docId: selectedDoc.id,
+        payload,
+      });
+    }
   };
 
   const handleBlockFocus = (blockIdOrEvent?: string | React.FocusEvent<any>) => {
     const blockId = typeof blockIdOrEvent === 'string' ? blockIdOrEvent : undefined;
     isEditorFocusedRef.current = true;
-    if (idleUnlockTimerRef.current) {
-      clearTimeout(idleUnlockTimerRef.current);
-      idleUnlockTimerRef.current = null;
-    }
     if (blockId) {
       broadcastAwareness(blockId);
     }
-    if (!isReadOnly) {
-      ensureLock();
-    }
   };
 
   const handleBlockBlur = () => {
     isEditorFocusedRef.current = false;
     broadcastAwareness(null);
-    if (idleUnlockTimerRef.current) {
-      clearTimeout(idleUnlockTimerRef.current);
-    }
-    if (isDraggingBlockRef.current) {
-      return;
-    }
-    idleUnlockTimerRef.current = setTimeout(async () => {
-      if (!isEditorFocusedRef.current && !isDraggingBlockRef.current && holdsLockRef.current) {
-        await flushPendingSave();
-        await releaseMyLock();
-      }
-    }, 8000);
   };
 
   // Debounced auto-save refs (500ms delay)
@@ -491,29 +410,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     isSavingToBackendRef.current = true;
     try {
       const docId = docToSave.id;
-      const dirtyMap = localDirtyBlocksRef.current.get(docId);
-      const deletedSet = localDeletedBlocksRef.current.get(docId);
-      const srvBlocks = syncedBlocksRef.current.get(docId);
-      const srvOrder = syncedOrderRef.current.get(docId) || [];
-
-      const upsertedMap = new Map<string, DocumentBlock>();
-      if (dirtyMap) {
-        dirtyMap.forEach((b, id) => upsertedMap.set(id, b));
-      }
-      (docToSave.blocks || []).forEach((b) => {
-        const srv = srvBlocks?.get(b.id);
-        if (!srv || !blocksAreEqual(b, srv)) {
-          upsertedMap.set(b.id, b);
-        }
-      });
-
-      const upsertedToSend = Array.from(upsertedMap.values());
-      const deletedToSend = Array.from(deletedSet?.values() || []);
-      const currentOrder = (docToSave.blocks || []).map((b) => b.id);
-      const orderChanged =
-        currentOrder.length !== srvOrder.length ||
-        currentOrder.some((id, idx) => id !== srvOrder[idx]);
-
       const srvMeta = syncedDocMetaRef.current.get(docId);
       const cleanTags = (docToSave.tags || []).filter((t) => !t.startsWith('folder:'));
       const cleanTagsJson = JSON.stringify(cleanTags);
@@ -524,36 +420,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         srvMeta.tagsJson !== cleanTagsJson ||
         srvMeta.isPinned !== !!docToSave.isPinned;
 
-      // Clear the sent snapshot from dirty/deleted maps before awaiting network call
-      if (dirtyMap) {
-        upsertedToSend.forEach((b) => {
-          const cur = dirtyMap.get(b.id);
-          if (cur && blocksAreEqual(cur, b)) {
-            dirtyMap.delete(b.id);
-          }
-        });
-      }
-      if (deletedSet) {
-        deletedToSend.forEach((id) => deletedSet.delete(id));
-      }
-
-      if (upsertedToSend.length > 0 || deletedToSend.length > 0 || orderChanged) {
-        const patchedDoc = await api.patchDocumentBlocks(docId, {
-          upserted: upsertedToSend,
-          deletedIds: deletedToSend,
-          blockOrder: currentOrder,
-        });
-        // Update server block baseline with patched result
-        const nextSrvMap = new Map<string, DocumentBlock>();
-        const nextSrvOrder: string[] = [];
-        (patchedDoc.blocks || []).forEach((b) => {
-          nextSrvMap.set(b.id, { ...b });
-          nextSrvOrder.push(b.id);
-        });
-        syncedBlocksRef.current.set(docId, nextSrvMap);
-        syncedOrderRef.current.set(docId, nextSrvOrder);
-      }
-
       if (metaChanged) {
         await api.updateDocument(docId, {
           title: docToSave.title,
@@ -576,7 +442,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         api.getTagDetails(selectedTag).then(setTagDetails).catch(() => {});
       }
     } catch (e: any) {
-      console.error('Failed to save document to backend', e);
+      console.error('Failed to save document metadata to backend', e);
     } finally {
       isSavingToBackendRef.current = false;
       if (saveSucceeded) {
@@ -585,17 +451,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           setSaveState('saved');
         }
       } else {
-        setSaveState('saving');
-      }
-      if (!isEditorFocusedRef.current && !isDraggingBlockRef.current && holdsLockRef.current) {
-        if (idleUnlockTimerRef.current) {
-          clearTimeout(idleUnlockTimerRef.current);
-        }
-        idleUnlockTimerRef.current = setTimeout(async () => {
-          if (!isEditorFocusedRef.current && !isDraggingBlockRef.current && holdsLockRef.current) {
-            await releaseMyLock();
-          }
-        }, 8000);
+        setSaveState('saved');
       }
     }
   };
@@ -614,48 +470,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
   const persistDocument = async (updatedDoc: Document, immediate = false) => {
     if (isReadOnly) return;
-    ensureLock();
     lastLocalEditTimestampRef.current = Date.now();
 
-    // Record block-level delta against previous local state and server baseline
-    const docId = updatedDoc.id;
-    let dirtyMap = localDirtyBlocksRef.current.get(docId);
-    if (!dirtyMap) {
-      dirtyMap = new Map<string, DocumentBlock>();
-      localDirtyBlocksRef.current.set(docId, dirtyMap);
-    }
-    let deletedSet = localDeletedBlocksRef.current.get(docId);
-    if (!deletedSet) {
-      deletedSet = new Set<string>();
-      localDeletedBlocksRef.current.set(docId, deletedSet);
-    }
-    const srvBlocks = syncedBlocksRef.current.get(docId);
-    const prevLocalBlocks =
-      selectedDoc && selectedDoc.id === docId ? selectedDoc.blocks || [] : [];
-
-    const nextIds = new Set<string>();
-    (updatedDoc.blocks || []).forEach((b) => {
-      nextIds.add(b.id);
-      deletedSet!.delete(b.id);
-      const srv = srvBlocks?.get(b.id);
-      if (!srv || !blocksAreEqual(b, srv)) {
-        dirtyMap!.set(b.id, { ...b });
-      }
-    });
-
-    prevLocalBlocks.forEach((prevB) => {
-      if (!nextIds.has(prevB.id)) {
-        dirtyMap!.delete(prevB.id);
-        deletedSet!.add(prevB.id);
-      }
-    });
-
-    // Sync into active CRDT session
+    // 1. Sync into active CRDT session
     if (crdtSessionRef.current && crdtSessionRef.current.docId === updatedDoc.id) {
       crdtSessionRef.current.syncFullBlocks(updatedDoc.blocks || []);
     }
 
-    // 1. Update local UI state immediately for responsive, instant typing
+    // 2. Update local UI state immediately for responsive, instant typing
     setSelectedDoc(updatedDoc);
     setDocs((prev) => prev.map((d) => (d.id === updatedDoc.id ? updatedDoc : d)));
     setSaveState('saving');
@@ -668,7 +490,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     }
 
     if (immediate) {
-      await flushPendingSave();
+      await executeSaveToBackend(updatedDoc);
     } else {
       debounceSaveTimerRef.current = setTimeout(async () => {
         debounceSaveTimerRef.current = null;
@@ -677,7 +499,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           pendingSaveDocRef.current = null;
           await executeSaveToBackend(doc);
         }
-      }, 350);
+      }, 500);
     }
   };
 
@@ -776,13 +598,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const currentUserIdRef = useRef<string | null>(null);
   currentUserIdRef.current = currentUser?.id || null;
 
-  // Handle document switch, CRDT session lifecycle, and lock status checks
+  // Handle document switch, Yjs CRDT session & YjsHybridProvider lifecycle
   useEffect(() => {
     const prevId = currentDocIdRef.current;
     if (prevId && prevId !== selectedDoc?.id) {
       flushPendingSave();
-      releaseMyLock(prevId);
-      sendWebSocketMessage({ event: 'CRDT_LEAVE', docId: prevId });
+      if (providerRef.current) {
+        providerRef.current.destroy();
+        providerRef.current = null;
+      }
       if (crdtSessionRef.current) {
         crdtSessionRef.current.destroy();
         crdtSessionRef.current = null;
@@ -795,88 +619,64 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       const targetDoc = selectedDoc;
       const session = new DocumentCRDTSession(targetDoc.id);
       session.initFromBlocks(targetDoc.blocks || []);
-      session.onLocalUpdate = (b64Update) => {
-        sendWebSocketMessage({
-          event: 'CRDT_UPDATE',
-          docId: targetDoc.id,
-          payload: { update: b64Update },
-        });
-      };
+
       session.onRemoteChange = (crdtBlocks) => {
-        const recentlyEdited = Date.now() - lastLocalEditTimestampRef.current < 2500;
-        const hasPendingSave = pendingSaveDocRef.current !== null || isSavingToBackendRef.current;
-        const hasDirtyBlocks = (localDirtyBlocksRef.current.get(targetDoc.id)?.size || 0) > 0;
-        if (!recentlyEdited && !hasPendingSave && !hasDirtyBlocks) {
+        if (crdtBlocks && crdtBlocks.length > 0) {
           setSelectedDoc((prev) => (prev && prev.id === targetDoc.id ? { ...prev, blocks: crdtBlocks } : prev));
           setDocs((prev) => prev.map((d) => (d.id === targetDoc.id ? { ...d, blocks: crdtBlocks } : d)));
         }
       };
       crdtSessionRef.current = session;
 
-      sendWebSocketMessage({ event: 'CRDT_JOIN', docId: targetDoc.id });
-
-      api
-        .getDocumentCRDT(targetDoc.id)
-        .then((res) => {
-          if (res && crdtSessionRef.current && crdtSessionRef.current.docId === targetDoc.id) {
-            if (res.state) {
-              crdtSessionRef.current.applyRemoteUpdate(res.state);
-            }
-            if (res.updates && Array.isArray(res.updates)) {
-              crdtSessionRef.current.applyRemoteUpdates(res.updates);
-            }
-            const blocks = crdtSessionRef.current.getBlocks();
-            const recentlyEdited = Date.now() - lastLocalEditTimestampRef.current < 2500;
-            const hasPendingSave = pendingSaveDocRef.current !== null || isSavingToBackendRef.current;
-            const hasDirtyBlocks = (localDirtyBlocksRef.current.get(targetDoc.id)?.size || 0) > 0;
-            if (blocks.length > 0 && !recentlyEdited && !hasPendingSave && !hasDirtyBlocks) {
-              setSelectedDoc((prev) => (prev && prev.id === targetDoc.id ? { ...prev, blocks } : prev));
-              setDocs((prev) => prev.map((d) => (d.id === targetDoc.id ? { ...d, blocks } : d)));
-            }
+      const provider = new YjsHybridProvider({
+        docId: targetDoc.id,
+        ydoc: session.doc,
+        onStatusChange: (status) => {
+          setSyncStatus(status);
+        },
+        onSynced: () => {
+          const blocks = session.getBlocks();
+          if (blocks && blocks.length > 0) {
+            setSelectedDoc((prev) => (prev && prev.id === targetDoc.id ? { ...prev, blocks } : prev));
+            setDocs((prev) => prev.map((d) => (d.id === targetDoc.id ? { ...d, blocks } : d)));
           }
-        })
-        .catch(() => {});
-
-      api
-        .getDocLock(selectedDoc.id)
-        .then((res) => {
-          if (res.locked && res.lock && res.lock.userId !== currentUser?.id) {
-            setActiveLock(res.lock);
-          } else {
-            setActiveLock(null);
+        },
+        onAwareness: (payload) => {
+          if (payload && payload.userId && payload.userId !== currentUser?.id) {
+            setActivePeers((prev) => {
+              const filtered = prev.filter((p) => p.userId !== payload.userId);
+              if (payload.activeBlockId !== null) {
+                return [...filtered, { ...payload, color: getCollaboratorColor(payload.userId), lastActive: Date.now() }];
+              }
+              return filtered;
+            });
           }
-        })
-        .catch(() => {});
-    } else {
-      setActiveLock(null);
+        },
+      });
+      providerRef.current = provider;
     }
 
     return () => {
       flushPendingSave();
-      if (currentDocIdRef.current) {
-        sendWebSocketMessage({ event: 'CRDT_LEAVE', docId: currentDocIdRef.current });
-        if (crdtSessionRef.current) {
-          crdtSessionRef.current.destroy();
-          crdtSessionRef.current = null;
-        }
-        releaseMyLock(currentDocIdRef.current);
+      if (providerRef.current) {
+        providerRef.current.destroy();
+        providerRef.current = null;
+      }
+      if (crdtSessionRef.current) {
+        crdtSessionRef.current.destroy();
+        crdtSessionRef.current = null;
       }
     };
   }, [selectedDoc?.id]);
 
-  // Window blur / visibility change listener: release lock when user leaves tab/window
+  // Window blur / visibility change listener: flush any pending metadata save
   useEffect(() => {
     const handleWindowBlur = () => {
-      if (!isEditorFocusedRef.current && !isDraggingBlockRef.current && holdsLockRef.current) {
-        flushPendingSave();
-        releaseMyLock();
-      }
+      flushPendingSave();
     };
     const handleVisibilityChange = () => {
-      if (document.visibilityState === 'hidden' && !isDraggingBlockRef.current) {
-        isEditorFocusedRef.current = false;
+      if (document.visibilityState === 'hidden') {
         flushPendingSave();
-        releaseMyLock();
       }
     };
     window.addEventListener('blur', handleWindowBlur);
@@ -887,28 +687,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     };
   }, []);
 
-  // Flush pending save and release lock before tab closes or unmounts
+  // Flush pending save before tab closes or unmounts
   useEffect(() => {
     const handleBeforeUnload = () => {
       flushPendingSave();
-      if (currentDocIdRef.current && holdsLockRef.current) {
-        try {
-          const token = getToken();
-          fetch(`/api/v1/documents/${currentDocIdRef.current}/lock`, {
-            method: 'DELETE',
-            headers: token ? { Authorization: `Bearer ${token}` } : {},
-            keepalive: true,
-          }).catch(() => {});
-        } catch {}
-      }
     };
     window.addEventListener('beforeunload', handleBeforeUnload);
     return () => {
       window.removeEventListener('beforeunload', handleBeforeUnload);
       flushPendingSave();
-      if (currentDocIdRef.current && holdsLockRef.current) {
-        releaseMyLock(currentDocIdRef.current);
-      }
     };
   }, []);
 
@@ -965,19 +752,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         if (payload && payload.userId) {
           setActivePeers((prev) => prev.filter((c) => c.userId !== payload.userId));
         }
-      } else if (msg.event === 'DOC_LOCKED') {
-        const payload = msg.payload as DocLockInfo;
-        if (payload && payload.docId === selectedDocIdRef.current) {
-          if (payload.userId !== currentUserIdRef.current) {
-            setActiveLock(payload);
-          }
-        }
-      } else if (msg.event === 'DOC_UNLOCKED') {
-        const payload = msg.payload as { docId?: string; doc_id?: string; id?: string };
-        const unlockedDocId = payload?.docId || payload?.doc_id || payload?.id;
-        if (unlockedDocId && unlockedDocId === selectedDocIdRef.current) {
-          setActiveLock(null);
-        }
       } else if (msg.event === 'DOC_BLOCKS_PATCHED') {
         const patch = msg.payload as DocBlocksPatchEvent;
         if (!patch || !patch.docId) return;
@@ -1155,19 +929,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     const pollInterval = setInterval(async () => {
       if (!isMounted || document.visibilityState !== 'visible') return;
 
-      // 1. Poll lock status of currently selected document
-      if (selectedDocIdRef.current) {
-        try {
-          const res = await api.getDocLock(selectedDocIdRef.current);
-          if (res.locked && res.lock && res.lock.userId !== currentUserIdRef.current) {
-            setActiveLock(res.lock);
-          } else {
-            setActiveLock(null);
-          }
-        } catch {}
-      }
-
-      // 2. Poll document content if not actively typing and document has changed on server
+      // 1. Poll document content if not actively typing and document has changed on server
       const recentlyEdited = Date.now() - lastLocalEditTimestampRef.current < 4000;
       const hasPendingSave = pendingSaveDocRef.current !== null || isSavingToBackendRef.current;
       const hasDirtyBlocks = (localDirtyBlocksRef.current.get(selectedDocIdRef.current || '')?.size || 0) > 0;
@@ -2148,7 +1910,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     segStart = 0
   ) => {
     if (isReadOnly) return;
-    ensureLock();
 
     if (slashBlockId === block.id) {
       if (filteredSlashCommands.length === 0) {
@@ -2315,7 +2076,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
   const handleContentChange = (block: DocumentBlock, newContent: string) => {
     if (isReadOnly) return;
-    ensureLock();
 
     // Markdown shortcut: typing '---' creates a divider and inserts a new bullet below
     if (newContent.trim() === '---') {
@@ -2634,13 +2394,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       return;
     }
     isDraggingBlockRef.current = true;
-    if (idleUnlockTimerRef.current) {
-      clearTimeout(idleUnlockTimerRef.current);
-      idleUnlockTimerRef.current = null;
-    }
-    // Activate write lock immediately upon dragging (optimistic UI + backend broadcast)
-    setHoldsLock(true);
-    ensureLock(true);
 
     e.dataTransfer.setData('application/mindsift-block-id', blockId);
     e.dataTransfer.setData('text/plain', blockId);
@@ -2652,15 +2405,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     isDraggingBlockRef.current = false;
     setDraggingBlockId(null);
     setDragOverBlockTarget(null);
-    if (idleUnlockTimerRef.current) {
-      clearTimeout(idleUnlockTimerRef.current);
-    }
-    idleUnlockTimerRef.current = setTimeout(async () => {
-      if (!isEditorFocusedRef.current && !isDraggingBlockRef.current && holdsLockRef.current) {
-        await flushPendingSave();
-        await releaseMyLock();
-      }
-    }, 2000);
   };
 
   const handleBlockDragOver = (e: React.DragEvent, targetBlockId: string) => {
@@ -2772,16 +2516,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     }
 
     persistDocument({ ...selectedDoc, blocks }, true);
-
-    if (idleUnlockTimerRef.current) {
-      clearTimeout(idleUnlockTimerRef.current);
-    }
-    idleUnlockTimerRef.current = setTimeout(async () => {
-      if (!isEditorFocusedRef.current && !isDraggingBlockRef.current && holdsLockRef.current) {
-        await flushPendingSave();
-        await releaseMyLock();
-      }
-    }, 2500);
   };
 
   // Export full document as portable Logseq-indented Markdown
@@ -3975,6 +3709,41 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         <div className="flex items-center gap-2 text-xs text-muted">
           {workspaceMode === 'editor' && selectedDoc && (
             <>
+              {/* Transport Connection Status Indicator */}
+              <span
+                className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border ${
+                  syncStatus === 'ws'
+                    ? 'bg-emerald-500/10 text-emerald-500 border-emerald-500/25'
+                    : syncStatus === 'sse'
+                    ? 'bg-amber-500/10 text-amber-500 border-amber-500/25'
+                    : 'bg-zinc-500/10 text-zinc-400 border-zinc-500/25'
+                }`}
+                title={
+                  syncStatus === 'ws'
+                    ? 'Echtzeit-Synchronisation aktiv über WebSocket'
+                    : syncStatus === 'sse'
+                    ? 'Eingeschränkt über HTTP-Proxy-Modus (SSE & POST Fallback)'
+                    : 'Offline: Alle Änderungen lokal in IndexedDB gesichert'
+                }
+              >
+                <span
+                  className={`w-2 h-2 rounded-full ${
+                    syncStatus === 'ws'
+                      ? 'bg-emerald-500 animate-pulse'
+                      : syncStatus === 'sse'
+                      ? 'bg-amber-500'
+                      : 'bg-zinc-400'
+                  }`}
+                />
+                <span>
+                  {syncStatus === 'ws'
+                    ? 'Live (WebSocket)'
+                    : syncStatus === 'sse'
+                    ? 'Eingeschränkt (HTTP-Proxy-Modus)'
+                    : 'Offline (Lokal gesichert)'}
+                </span>
+              </span>
+
               <span className="badge-accent">
                 <Check className="w-3 h-3" />
                 {saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
@@ -4144,7 +3913,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                       </button>
                     )}
 
-                    {activePeers.length > 0 ? (
+                    {activePeers.length > 0 && (
                       <span
                         className="px-2 py-0.5 rounded text-[10px] font-semibold border border-emerald-500/30 bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 flex items-center gap-1.5 animate-pulse"
                         title={`Live-Kollaboration via CRDT aktiv: ${activePeers.map((c) => c.userName).join(', ')}`}
@@ -4153,12 +3922,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         <Users className="w-2.5 h-2.5" />
                         <span>Live ({activePeers.length})</span>
                       </span>
-                    ) : holdsLock ? (
-                      <span className="px-2 py-0.5 rounded text-[10px] font-semibold border border-emerald-500/30 bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
-                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
-                        <span>CRDT Sync aktiv</span>
-                      </span>
-                    ) : null}
+                    )}
 
                     {selectedDoc.sharedWith && selectedDoc.sharedWith.length > 0 && selectedDoc.isOwner !== false && (
                       <button
@@ -4307,7 +4071,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                       onBlur={handleBlockBlur}
                       onChange={(e) => {
                         if (!isReadOnly) {
-                          ensureLock();
                           autoResizeTextarea(e.target);
                           persistDocument({ ...selectedDoc, title: e.target.value });
                         }
@@ -4346,7 +4109,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                       onBlur={handleBlockBlur}
                       onChange={(e) => {
                         if (!isReadOnly) {
-                          ensureLock();
                           autoResizeTextarea(e.target);
                           updateBlock(zoomedBlock.id, { content: e.target.value });
                         }
@@ -4440,15 +4202,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         {/* Drag Handle on hover - tightened spacing to the bullet */}
                         <div
                           draggable={!isReadOnly}
-                          onMouseDown={() => {
-                            if (!isReadOnly) {
-                              if (idleUnlockTimerRef.current) {
-                                clearTimeout(idleUnlockTimerRef.current);
-                                idleUnlockTimerRef.current = null;
-                              }
-                              ensureLock(true);
-                            }
-                          }}
                           onDragStart={(e) => !isReadOnly && handleBlockDragStart(e, block.id)}
                           onDragEnd={handleBlockDragEnd}
                           className="opacity-0 group-hover:opacity-100 flex items-center pt-1 text-faint hover:text-accent cursor-grab active:cursor-grabbing flex-shrink-0 -ml-1 mr-0.5"
@@ -4478,15 +4231,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         {/* Interactive Bullet Dot (Click: Zoom-in! Drag: Reorder! Drop on it: Nest as child!) */}
                         <div
                           draggable={!isReadOnly}
-                          onMouseDown={() => {
-                            if (!isReadOnly) {
-                              if (idleUnlockTimerRef.current) {
-                                clearTimeout(idleUnlockTimerRef.current);
-                                idleUnlockTimerRef.current = null;
-                              }
-                              ensureLock(true);
-                            }
-                          }}
                           onDragStart={(e) => !isReadOnly && handleBlockDragStart(e, block.id)}
                           onDragEnd={handleBlockDragEnd}
                           onDragOver={(e) => {
@@ -4728,7 +4472,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                               onChangeContent={(content) => handleContentChange(block, content)}
                               onChangeLang={(lang) => {
                                 if (!isReadOnly) {
-                                  ensureLock();
                                   updateBlock(block.id, { lang });
                                 }
                               }}
diff --git a/frontend/src/lib/yjs-provider.ts b/frontend/src/lib/yjs-provider.ts
new file mode 100644
index 0000000..f979c03
--- /dev/null
+++ b/frontend/src/lib/yjs-provider.ts
@@ -0,0 +1,380 @@
+import * as Y from 'yjs';
+import { IndexeddbPersistence } from 'y-indexeddb';
+import { getToken } from './api';
+
+export type SyncTransportStatus = 'ws' | 'sse' | 'offline';
+
+export interface YjsHybridProviderOptions {
+  docId: string;
+  ydoc: Y.Doc;
+  onStatusChange?: (status: SyncTransportStatus) => void;
+  onAwareness?: (payload: any) => void;
+  onSynced?: () => void;
+}
+
+export class YjsHybridProvider {
+  public readonly docId: string;
+  public readonly ydoc: Y.Doc;
+  private status: SyncTransportStatus = 'offline';
+  private indexeddbProvider: IndexeddbPersistence;
+  private ws: WebSocket | null = null;
+  private eventSource: EventSource | null = null;
+  private wsWatchdogTimer: any = null;
+  private destroyed: boolean = false;
+  private isConnectingWS: boolean = false;
+  private isConnectingSSE: boolean = false;
+  private onStatusChange?: (status: SyncTransportStatus) => void;
+  private onAwareness?: (payload: any) => void;
+  private onSynced?: () => void;
+
+  constructor(options: YjsHybridProviderOptions) {
+    this.docId = options.docId;
+    this.ydoc = options.ydoc;
+    this.onStatusChange = options.onStatusChange;
+    this.onAwareness = options.onAwareness;
+    this.onSynced = options.onSynced;
+
+    // 1. Offline-First: Bind IndexedDB persistence
+    this.indexeddbProvider = new IndexeddbPersistence(`mindsift-doc-${this.docId}`, this.ydoc);
+    this.indexeddbProvider.on('synced', () => {
+      if (this.destroyed) return;
+      if (this.onSynced) {
+        this.onSynced();
+      }
+    });
+
+    // 2. Listen to local document updates
+    this.ydoc.on('update', this.handleDocUpdate);
+
+    // 3. Connect via Primary Transport (WebSocket) with 4-second watchdog fallback
+    this.connect();
+
+    // 4. Online/offline window event listeners
+    if (typeof window !== 'undefined') {
+      window.addEventListener('online', this.handleOnline);
+      window.addEventListener('offline', this.handleOffline);
+    }
+  }
+
+  private setStatus(newStatus: SyncTransportStatus) {
+    if (this.status !== newStatus) {
+      this.status = newStatus;
+      if (this.onStatusChange) {
+        this.onStatusChange(newStatus);
+      }
+    }
+  }
+
+  public getStatus(): SyncTransportStatus {
+    return this.status;
+  }
+
+  private handleOnline = () => {
+    if (this.destroyed) return;
+    if (this.status === 'offline') {
+      this.connect();
+    }
+  };
+
+  private handleOffline = () => {
+    if (this.destroyed) return;
+    this.setStatus('offline');
+  };
+
+  public connect() {
+    if (this.destroyed) return;
+    this.connectWebSocket();
+  }
+
+  private connectWebSocket() {
+    if (this.destroyed || this.isConnectingWS) return;
+    this.isConnectingWS = true;
+
+    this.cleanupWebSocket();
+
+    const token = getToken() || '';
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/api/v1/ws/docs/${encodeURIComponent(this.docId)}?token=${encodeURIComponent(token)}`;
+
+    // 4-second watchdog timer: If WebSocket doesn't establish within 4 seconds, fallback to HTTP/SSE
+    this.clearWatchdog();
+    this.wsWatchdogTimer = setTimeout(() => {
+      if (this.status !== 'ws') {
+        console.warn(`[YjsProvider] WebSocket timeout (4s) for doc ${this.docId}. Switching to HTTP fallback (SSE + POST)...`);
+        this.fallbackToHTTP();
+      }
+    }, 4000);
+
+    try {
+      const ws = new WebSocket(wsUrl);
+      ws.binaryType = 'arraybuffer';
+      this.ws = ws;
+
+      ws.onopen = () => {
+        this.isConnectingWS = false;
+        this.clearWatchdog();
+        this.cleanupSSE();
+        this.setStatus('ws');
+      };
+
+      ws.onmessage = (event) => {
+        if (this.destroyed) return;
+
+        if (event.data instanceof ArrayBuffer) {
+          const update = new Uint8Array(event.data);
+          Y.applyUpdate(this.ydoc, update, 'remote');
+          return;
+        }
+
+        try {
+          const data = JSON.parse(event.data);
+          if (data.event === 'CRDT_INIT' && data.payload) {
+            this.handleInit(data.payload);
+          } else if (data.event === 'CRDT_UPDATE' && data.payload) {
+            this.handleRemoteUpdate(data.payload);
+          } else if (data.event === 'CRDT_AWARENESS' && data.payload) {
+            if (this.onAwareness) {
+              this.onAwareness(data.payload);
+            }
+          }
+        } catch (err) {
+          console.error('[YjsProvider] WS message parse error:', err);
+        }
+      };
+
+      ws.onerror = (err) => {
+        console.warn(`[YjsProvider] WebSocket error on doc ${this.docId}:`, err);
+        this.isConnectingWS = false;
+        this.fallbackToHTTP();
+      };
+
+      ws.onclose = (event) => {
+        this.isConnectingWS = false;
+        // If closed abnormally (proxy drop, 1006, etc.), fallback to HTTP
+        if (!this.destroyed && this.status === 'ws') {
+          console.warn(`[YjsProvider] WebSocket closed (code ${event.code}). Falling back to HTTP/SSE...`);
+          this.fallbackToHTTP();
+        }
+      };
+    } catch (e) {
+      console.warn(`[YjsProvider] WebSocket creation failed:`, e);
+      this.isConnectingWS = false;
+      this.fallbackToHTTP();
+    }
+  }
+
+  private fallbackToHTTP() {
+    if (this.destroyed) return;
+    this.cleanupWebSocket();
+    this.connectSSE();
+  }
+
+  private connectSSE() {
+    if (this.destroyed || this.isConnectingSSE) return;
+    this.isConnectingSSE = true;
+
+    this.cleanupSSE();
+
+    const token = getToken() || '';
+    const sseUrl = `/api/v1/sync/docs/${encodeURIComponent(this.docId)}/stream?token=${encodeURIComponent(token)}`;
+
+    try {
+      const es = new EventSource(sseUrl);
+      this.eventSource = es;
+
+      es.onopen = () => {
+        this.isConnectingSSE = false;
+        this.setStatus('sse');
+      };
+
+      es.onmessage = (event) => {
+        if (this.destroyed) return;
+        try {
+          const data = JSON.parse(event.data);
+          if (data.event === 'CRDT_INIT' && data.payload) {
+            this.handleInit(data.payload);
+          } else if (data.event === 'CRDT_UPDATE' && data.payload) {
+            this.handleRemoteUpdate(data.payload);
+          } else if (data.event === 'CRDT_AWARENESS' && data.payload) {
+            if (this.onAwareness) {
+              this.onAwareness(data.payload);
+            }
+          }
+        } catch {}
+      };
+
+      es.onerror = () => {
+        this.isConnectingSSE = false;
+        if (!this.destroyed) {
+          this.setStatus('offline');
+        }
+      };
+    } catch (e) {
+      this.isConnectingSSE = false;
+      this.setStatus('offline');
+    }
+  }
+
+  private handleInit(payload: { state?: string; updates?: string[] }) {
+    if (payload.state) {
+      try {
+        const stateBytes = this.base64ToUint8(payload.state);
+        Y.applyUpdate(this.ydoc, stateBytes, 'remote');
+      } catch (e) {
+        console.error('[YjsProvider] Failed to apply initial state:', e);
+      }
+    }
+    if (Array.isArray(payload.updates)) {
+      for (const u of payload.updates) {
+        if (u) {
+          try {
+            const updateBytes = this.base64ToUint8(u);
+            Y.applyUpdate(this.ydoc, updateBytes, 'remote');
+          } catch (e) {
+            console.error('[YjsProvider] Failed to apply initial update:', e);
+          }
+        }
+      }
+    }
+    if (this.onSynced) {
+      this.onSynced();
+    }
+  }
+
+  private handleRemoteUpdate(payload: { update?: string }) {
+    if (payload.update) {
+      try {
+        const bytes = this.base64ToUint8(payload.update);
+        Y.applyUpdate(this.ydoc, bytes, 'remote');
+      } catch (e) {
+        console.error('[YjsProvider] Failed to apply remote update:', e);
+      }
+    }
+  }
+
+  private handleDocUpdate = (update: Uint8Array, origin: any) => {
+    // Only send updates originating locally (ignore 'remote' and 'indexeddb')
+    if (this.destroyed || origin === 'remote' || origin === this.indexeddbProvider) {
+      return;
+    }
+
+    if (this.status === 'ws' && this.ws && this.ws.readyState === WebSocket.OPEN) {
+      try {
+        this.ws.send(update);
+        return;
+      } catch (e) {
+        console.warn('[YjsProvider] Failed to send update over WS, falling back to HTTP POST:', e);
+        this.fallbackToHTTP();
+      }
+    }
+
+    // Upstream via HTTP POST fallback
+    this.sendUpdateViaHTTP(update);
+  };
+
+  private async sendUpdateViaHTTP(update: Uint8Array) {
+    const token = getToken() || '';
+    const url = `/api/v1/sync/docs/${encodeURIComponent(this.docId)}/update?token=${encodeURIComponent(token)}`;
+    try {
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/octet-stream',
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
+        body: new Blob([update as any]),
+      });
+      if (!res.ok) {
+        console.warn(`[YjsProvider] HTTP sync update status: ${res.status}`);
+      }
+    } catch (e) {
+      console.warn('[YjsProvider] Network error during HTTP sync update (persisted locally in IndexedDB):', e);
+      this.setStatus('offline');
+    }
+  }
+
+  public sendAwareness(payload: any) {
+    if (this.destroyed) return;
+
+    if (this.status === 'ws' && this.ws && this.ws.readyState === WebSocket.OPEN) {
+      try {
+        this.ws.send(JSON.stringify({
+          event: 'CRDT_AWARENESS',
+          docId: this.docId,
+          payload,
+        }));
+        return;
+      } catch {}
+    }
+
+    // HTTP awareness fallback
+    const token = getToken() || '';
+    fetch(`/api/v1/documents/${encodeURIComponent(this.docId)}/awareness`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+      body: JSON.stringify(payload),
+    }).catch(() => {});
+  }
+
+  private clearWatchdog() {
+    if (this.wsWatchdogTimer) {
+      clearTimeout(this.wsWatchdogTimer);
+      this.wsWatchdogTimer = null;
+    }
+  }
+
+  private cleanupWebSocket() {
+    this.clearWatchdog();
+    if (this.ws) {
+      try {
+        this.ws.onopen = null;
+        this.ws.onmessage = null;
+        this.ws.onerror = null;
+        this.ws.onclose = null;
+        this.ws.close();
+      } catch {}
+      this.ws = null;
+    }
+  }
+
+  private cleanupSSE() {
+    if (this.eventSource) {
+      try {
+        this.eventSource.onopen = null;
+        this.eventSource.onmessage = null;
+        this.eventSource.onerror = null;
+        this.eventSource.close();
+      } catch {}
+      this.eventSource = null;
+    }
+  }
+
+  private base64ToUint8(base64: string): Uint8Array {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes;
+  }
+
+  public destroy() {
+    this.destroyed = true;
+    this.clearWatchdog();
+    this.cleanupWebSocket();
+    this.cleanupSSE();
+    this.ydoc.off('update', this.handleDocUpdate);
+    if (this.indexeddbProvider) {
+      try {
+        this.indexeddbProvider.destroy();
+      } catch {}
+    }
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('online', this.handleOnline);
+      window.removeEventListener('offline', this.handleOffline);
+    }
+  }
+}
diff --git a/internal/api/server.go b/internal/api/server.go
index 4e6e221..ba87bec 100644
--- a/internal/api/server.go
+++ b/internal/api/server.go
@@ -69,6 +69,9 @@ func (s *Server) Router() http.Handler {
 	r.Get("/api/v1/ws", s.handleWebSocket)
 	r.Get("/api/v1/ws/spaces/{spaceId}", s.handleWebSocket)
 	r.Get("/api/v1/ws/lists/{listId}", s.handleWebSocket)
+	r.Get("/api/v1/ws/docs/{id}", s.handleDocWebSocket)
+	r.Get("/api/v1/sync/docs/{id}/stream", s.handleDocSyncStream)
+	r.Post("/api/v1/sync/docs/{id}/update", s.handleDocSyncUpdate)
 	r.Get("/api/v1/events", s.handleSSE)
 	r.Post("/api/v1/events/rooms", s.handleSSERooms)
 
@@ -868,16 +871,6 @@ func (s *Server) handleUpdateDocument(w http.ResponseWriter, r *http.Request) {
 	userID := auth.GetUserID(r.Context())
 	docID := chi.URLParam(r, "id")
 
-	// Check document lock
-	if lock := s.wsHub.GetDocLock(docID); lock != nil && lock.UserID != userID {
-		w.WriteHeader(http.StatusLocked)
-		_ = json.NewEncoder(w).Encode(map[string]interface{}{
-			"error":       "Dokument wird aktuell bearbeitet von " + lock.UserName,
-			"currentLock": lock,
-		})
-		return
-	}
-
 	var req struct {
 		Title      *string                 `json:"title"`
 		Icon       *string                 `json:"icon"`
@@ -907,16 +900,6 @@ func (s *Server) handlePatchDocumentBlocks(w http.ResponseWriter, r *http.Reques
 	userID := auth.GetUserID(r.Context())
 	docID := chi.URLParam(r, "id")
 
-	// Check document lock
-	if lock := s.wsHub.GetDocLock(docID); lock != nil && lock.UserID != userID {
-		w.WriteHeader(http.StatusLocked)
-		_ = json.NewEncoder(w).Encode(map[string]interface{}{
-			"error":       "Dokument wird aktuell bearbeitet von " + lock.UserName,
-			"currentLock": lock,
-		})
-		return
-	}
-
 	var req domain.DocBlocksPatchRequest
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		writeError(w, http.StatusBadRequest, "Ungültiges JSON")
@@ -1324,68 +1307,178 @@ func (s *Server) handleGetCollaborators(w http.ResponseWriter, r *http.Request)
 	writeJSON(w, http.StatusOK, users)
 }
 
-// --- DOCUMENT LOCKING ---
+// --- DOCUMENT LOCKING (Neutralized - Yjs CRDT Pessimistic Locks Removed) ---
 
 func (s *Server) handleGetDocLock(w http.ResponseWriter, r *http.Request) {
-	docID := chi.URLParam(r, "id")
-	lock := s.wsHub.GetDocLock(docID)
-	if lock == nil {
-		writeJSON(w, http.StatusOK, map[string]interface{}{"locked": false})
-		return
-	}
-	writeJSON(w, http.StatusOK, map[string]interface{}{"locked": true, "lock": lock})
+	writeJSON(w, http.StatusOK, map[string]interface{}{"locked": false})
 }
 
 func (s *Server) handleLockDoc(w http.ResponseWriter, r *http.Request) {
-	userID := auth.GetUserID(r.Context())
 	docID := chi.URLParam(r, "id")
-
-	user, err := s.store.GetUserByID(userID)
-	userName := "Ein Benutzer"
-	if err == nil && user != nil && user.DisplayName != "" {
-		userName = user.DisplayName
-	}
-
-	info, acquired, currentLock := s.wsHub.AcquireDocLock(docID, userID, userName, 20*time.Second)
-	if !acquired {
-		w.WriteHeader(http.StatusLocked)
-		_ = json.NewEncoder(w).Encode(map[string]interface{}{
-			"locked":      true,
-			"acquired":    false,
-			"currentLock": currentLock,
-			"message":     "Wird aktuell bearbeitet von " + currentLock.UserName,
-		})
-		return
-	}
-
-	s.wsHub.BroadcastDocEvent(docID, "DOC_LOCKED", info)
 	writeJSON(w, http.StatusOK, map[string]interface{}{
-		"locked":   true,
+		"locked":   false,
 		"acquired": true,
-		"lock":     info,
+		"docId":    docID,
 	})
 }
 
 func (s *Server) handleHeartbeatDocLock(w http.ResponseWriter, r *http.Request) {
-	userID := auth.GetUserID(r.Context())
-	docID := chi.URLParam(r, "id")
-	ok := s.wsHub.HeartbeatDocLock(docID, userID, 20*time.Second)
-	writeJSON(w, http.StatusOK, map[string]bool{"extended": ok})
+	writeJSON(w, http.StatusOK, map[string]bool{"extended": true})
 }
 
 func (s *Server) handleUnlockDoc(w http.ResponseWriter, r *http.Request) {
-	userID := auth.GetUserID(r.Context())
-	docID := chi.URLParam(r, "id")
-	user, _ := s.store.GetUserByID(userID)
-	isAdmin := user != nil && user.Role == "admin"
-	released := s.wsHub.ReleaseDocLock(docID, userID, isAdmin)
-	if released {
-		s.wsHub.BroadcastDocEvent(docID, "DOC_UNLOCKED", map[string]string{"docId": docID, "doc_id": docID})
-	}
-	writeJSON(w, http.StatusOK, map[string]bool{"unlocked": released})
+	writeJSON(w, http.StatusOK, map[string]bool{"unlocked": true})
 }
 
-// --- DOCUMENT CRDT REALTIME SYNC ---
+// --- DOCUMENT CRDT REALTIME SYNC & DUAL TRANSPORT ---
+
+func (s *Server) authenticateUserFromReq(r *http.Request) string {
+	token := r.URL.Query().Get("token")
+	if token == "" {
+		if authHdr := r.Header.Get("Authorization"); strings.HasPrefix(authHdr, "Bearer ") {
+			token = strings.TrimPrefix(authHdr, "Bearer ")
+		}
+	}
+	if token != "" {
+		if claims, err := auth.ValidateToken(s.cfg.JWTSecret, token); err == nil {
+			return claims.UserID
+		}
+	}
+	return ""
+}
+
+// GET /api/v1/ws/docs/{id}
+func (s *Server) handleDocWebSocket(w http.ResponseWriter, r *http.Request) {
+	if r.Header.Get("Sec-Websocket-Key") != "" {
+		if !strings.Contains(strings.ToLower(r.Header.Get("Connection")), "upgrade") {
+			r.Header.Set("Connection", "Upgrade")
+		}
+		if !strings.Contains(strings.ToLower(r.Header.Get("Upgrade")), "websocket") {
+			r.Header.Set("Upgrade", "websocket")
+		}
+	}
+
+	docID := chi.URLParam(r, "id")
+	if docID == "" {
+		writeError(w, http.StatusBadRequest, "docId erforderlich")
+		return
+	}
+
+	userID := s.authenticateUserFromReq(r)
+	if userID == "" {
+		userID = auth.GetUserID(r.Context())
+	}
+	if userID == "" {
+		userID = "anonymous"
+	}
+
+	if userID != "anonymous" {
+		if _, err := s.store.GetDocumentByID(userID, docID); err != nil {
+			writeError(w, http.StatusForbidden, "Kein Zugriff auf dieses Dokument")
+			return
+		}
+	}
+
+	room := s.wsHub.GetOrCreateDocRoom(docID)
+	room.ServeDocWS(w, r, userID)
+}
+
+// GET /api/v1/sync/docs/{id}/stream
+func (s *Server) handleDocSyncStream(w http.ResponseWriter, r *http.Request) {
+	docID := chi.URLParam(r, "id")
+	if docID == "" {
+		writeError(w, http.StatusBadRequest, "docId erforderlich")
+		return
+	}
+
+	userID := s.authenticateUserFromReq(r)
+	if userID == "" {
+		userID = auth.GetUserID(r.Context())
+	}
+	if userID == "" {
+		userID = "anonymous"
+	}
+
+	if userID != "anonymous" {
+		if _, err := s.store.GetDocumentByID(userID, docID); err != nil {
+			writeError(w, http.StatusForbidden, "Kein Zugriff auf dieses Dokument")
+			return
+		}
+	}
+
+	room := s.wsHub.GetOrCreateDocRoom(docID)
+	room.ServeDocSSE(w, r, userID)
+}
+
+// POST /api/v1/sync/docs/{id}/update
+func (s *Server) handleDocSyncUpdate(w http.ResponseWriter, r *http.Request) {
+	docID := chi.URLParam(r, "id")
+	if docID == "" {
+		writeError(w, http.StatusBadRequest, "docId erforderlich")
+		return
+	}
+
+	userID := s.authenticateUserFromReq(r)
+	if userID == "" {
+		userID = auth.GetUserID(r.Context())
+	}
+	if userID == "" {
+		writeError(w, http.StatusUnauthorized, "Nicht autorisiert")
+		return
+	}
+
+	doc, err := s.store.GetDocumentByID(userID, docID)
+	if err != nil {
+		writeError(w, http.StatusNotFound, "Dokument nicht gefunden")
+		return
+	}
+	if !doc.IsOwner && doc.Permission != "write" {
+		writeError(w, http.StatusForbidden, "Keine Schreibberechtigung")
+		return
+	}
+
+	contentType := r.Header.Get("Content-Type")
+	var updateBytes []byte
+
+	if strings.Contains(contentType, "application/octet-stream") {
+		body, err := io.ReadAll(io.LimitReader(r.Body, 8*1024*1024))
+		if err != nil {
+			writeError(w, http.StatusBadRequest, "Fehler beim Lesen des Payloads")
+			return
+		}
+		updateBytes = body
+	} else {
+		var req struct {
+			Update string `json:"update"`
+			State  string `json:"state"`
+		}
+		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+			writeError(w, http.StatusBadRequest, "Ungültiges JSON")
+			return
+		}
+		if req.State != "" {
+			if raw, err := base64.StdEncoding.DecodeString(req.State); err == nil && len(raw) > 0 {
+				room := s.wsHub.GetOrCreateDocRoom(docID)
+				room.CompactState(raw, userID)
+			}
+		}
+		if req.Update != "" {
+			raw, err := base64.StdEncoding.DecodeString(req.Update)
+			if err != nil {
+				writeError(w, http.StatusBadRequest, "Ungültiges Base64 für Update")
+				return
+			}
+			updateBytes = raw
+		}
+	}
+
+	if len(updateBytes) > 0 {
+		room := s.wsHub.GetOrCreateDocRoom(docID)
+		room.ApplyUpdate(updateBytes, userID, nil, nil)
+	}
+
+	writeJSON(w, http.StatusOK, map[string]interface{}{"success": true, "docId": docID})
+}
 
 func (s *Server) handleGetDocCRDT(w http.ResponseWriter, r *http.Request) {
 	userID := auth.GetUserID(r.Context())
@@ -1394,19 +1487,8 @@ func (s *Server) handleGetDocCRDT(w http.ResponseWriter, r *http.Request) {
 		writeError(w, http.StatusNotFound, "Dokument nicht gefunden")
 		return
 	}
-	stateBlob, updates, err := s.store.GetDocumentCRDTState(docID)
-	if err != nil {
-		writeError(w, http.StatusInternalServerError, err.Error())
-		return
-	}
-	b64State := ""
-	if len(stateBlob) > 0 {
-		b64State = base64.StdEncoding.EncodeToString(stateBlob)
-	}
-	var b64Updates []string
-	for _, u := range updates {
-		b64Updates = append(b64Updates, base64.StdEncoding.EncodeToString(u))
-	}
+	room := s.wsHub.GetOrCreateDocRoom(docID)
+	b64State, b64Updates := room.GetInitialSnapshot()
 	writeJSON(w, http.StatusOK, map[string]interface{}{
 		"docId":   docID,
 		"state":   b64State,
@@ -1434,21 +1516,14 @@ func (s *Server) handleSaveDocCRDT(w http.ResponseWriter, r *http.Request) {
 		writeError(w, http.StatusBadRequest, "Ungültiger Request-Body")
 		return
 	}
+	room := s.wsHub.GetOrCreateDocRoom(docID)
 	if req.Update != "" {
 		raw, err := base64.StdEncoding.DecodeString(req.Update)
 		if err != nil {
 			writeError(w, http.StatusBadRequest, "Ungültiges Base64 Format für Update")
 			return
 		}
-		if err := s.store.AppendDocumentCRDTUpdate(docID, raw, userID); err != nil {
-			writeError(w, http.StatusInternalServerError, err.Error())
-			return
-		}
-		s.wsHub.BroadcastRoom("doc:"+docID, "CRDT_UPDATE", map[string]interface{}{
-			"docId":      docID,
-			"update":     req.Update,
-			"fromUserId": userID,
-		}, nil)
+		room.ApplyUpdate(raw, userID, nil, nil)
 	}
 	if req.State != "" {
 		raw, err := base64.StdEncoding.DecodeString(req.State)
@@ -1456,10 +1531,7 @@ func (s *Server) handleSaveDocCRDT(w http.ResponseWriter, r *http.Request) {
 			writeError(w, http.StatusBadRequest, "Ungültiges Base64 Format")
 			return
 		}
-		if err := s.store.SaveDocumentCRDTState(docID, raw, userID); err != nil {
-			writeError(w, http.StatusInternalServerError, err.Error())
-			return
-		}
+		room.CompactState(raw, userID)
 	}
 	writeJSON(w, http.StatusOK, map[string]bool{"success": true})
 }
diff --git a/internal/api/server_test.go b/internal/api/server_test.go
index 82f6aed..760c57c 100644
--- a/internal/api/server_test.go
+++ b/internal/api/server_test.go
@@ -3,6 +3,7 @@ package api
 import (
 	"bytes"
 	"context"
+	"encoding/base64"
 	"encoding/json"
 	"net/http"
 	"net/http/httptest"
@@ -1015,3 +1016,83 @@ func TestSSEAndAwarenessEndpoints(t *testing.T) {
 	}
 }
 
+func TestDocRoomDualTransportAndDebouncedPersistence(t *testing.T) {
+	dbPath := filepath.Join(t.TempDir(), "test_dual_transport.db")
+	store, err := storage.NewStore(dbPath)
+	if err != nil {
+		t.Fatalf("failed to init store: %v", err)
+	}
+	defer store.Close()
+
+	cfg := &config.Config{
+		JWTSecret:         "test-secret-dual-transport",
+		AllowRegistration: true,
+	}
+	hub := ws.NewHub()
+	srv := NewServer(cfg, store, hub, nil)
+	router := srv.Router()
+
+	user, _ := store.CreateUser("dual@test.local", "hash", "Dual User", "member")
+	token, _ := auth.GenerateToken(cfg.JWTSecret, user.ID, user.Email, user.Role)
+
+	doc, _ := store.CreateDocument(user.ID, "", "Dual Transport Doc", "📄", "", nil, nil, false)
+
+	// 1. Test POST /api/v1/sync/docs/{id}/update with JSON base64
+	upd1 := base64.StdEncoding.EncodeToString([]byte{0x01, 0x02, 0x03})
+	req := httptest.NewRequest(http.MethodPost, "/api/v1/sync/docs/"+doc.ID+"/update", bytes.NewReader([]byte(`{"update":"`+upd1+`"}`)))
+	req.Header.Set("Authorization", "Bearer "+token)
+	req.Header.Set("Content-Type", "application/json")
+	rec := httptest.NewRecorder()
+	router.ServeHTTP(rec, req)
+
+	if rec.Code != http.StatusOK {
+		t.Fatalf("expected 200 OK from sync update, got %d: %s", rec.Code, rec.Body.String())
+	}
+
+	// 2. Test POST /api/v1/sync/docs/{id}/update with octet-stream binary
+	binaryUpd := []byte{0x04, 0x05, 0x06}
+	req = httptest.NewRequest(http.MethodPost, "/api/v1/sync/docs/"+doc.ID+"/update", bytes.NewReader(binaryUpd))
+	req.Header.Set("Authorization", "Bearer "+token)
+	req.Header.Set("Content-Type", "application/octet-stream")
+	rec = httptest.NewRecorder()
+	router.ServeHTTP(rec, req)
+
+	if rec.Code != http.StatusOK {
+		t.Fatalf("expected 200 OK from binary sync update, got %d: %s", rec.Code, rec.Body.String())
+	}
+
+	// 3. Test GET /api/v1/sync/docs/{id}/stream SSE connection
+	ctx, cancel := context.WithCancel(context.Background())
+	defer cancel()
+
+	req = httptest.NewRequest(http.MethodGet, "/api/v1/sync/docs/"+doc.ID+"/stream?token="+token, nil).WithContext(ctx)
+	rec = httptest.NewRecorder()
+
+	go func() {
+		time.Sleep(50 * time.Millisecond)
+		cancel()
+	}()
+
+	router.ServeHTTP(rec, req)
+
+	if !strings.Contains(rec.Header().Get("Content-Type"), "text/event-stream") {
+		t.Fatalf("expected text/event-stream, got %s", rec.Header().Get("Content-Type"))
+	}
+	bodyStr := rec.Body.String()
+	if !strings.Contains(bodyStr, "CRDT_INIT") {
+		t.Fatalf("expected CRDT_INIT in SSE stream, got %s", bodyStr)
+	}
+
+	// 4. Test Lock Neutrality: document update and block patch work without 423 Locked
+	updateReq := httptest.NewRequest(http.MethodPut, "/api/v1/documents/"+doc.ID, bytes.NewReader([]byte(`{"title":"Updated Without Locks"}`)))
+	updateReq.Header.Set("Authorization", "Bearer "+token)
+	updateReq.Header.Set("Content-Type", "application/json")
+	updateRec := httptest.NewRecorder()
+	router.ServeHTTP(updateRec, updateReq)
+
+	if updateRec.Code != http.StatusOK {
+		t.Fatalf("expected 200 OK from document update, got %d: %s", updateRec.Code, updateRec.Body.String())
+	}
+}
+
+
diff --git a/internal/ws/docroom.go b/internal/ws/docroom.go
new file mode 100644
index 0000000..eefe556
--- /dev/null
+++ b/internal/ws/docroom.go
@@ -0,0 +1,473 @@
+package ws
+
+import (
+	"encoding/base64"
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+	"sync"
+	"time"
+
+	"github.com/gorilla/websocket"
+	"github.com/sandrodach/mindsift/internal/domain"
+)
+
+// DocWSClient represents an active WebSocket connection to a specific document room.
+type DocWSClient struct {
+	hub    *Hub
+	room   *DocRoom
+	conn   *websocket.Conn
+	userID string
+	send   chan []byte
+}
+
+// DocSSEClient represents an active SSE connection to a specific document room.
+type DocSSEClient struct {
+	hub    *Hub
+	room   *DocRoom
+	id     string
+	userID string
+	send   chan []byte
+}
+
+// DocRoom coordinates in-memory real-time updates and debounced persistence for one document.
+type DocRoom struct {
+	mu                     sync.Mutex
+	docID                  string
+	hub                    *Hub
+	stateBlob              []byte
+	pendingUpdates         [][]byte
+	persistedUpdatesCount  int
+	wsClients              map[*DocWSClient]bool
+	sseClients             map[*DocSSEClient]bool
+	debounceTimer          *time.Timer
+	dirty                  bool
+	lastUserID             string
+}
+
+func (h *Hub) GetOrCreateDocRoom(docID string) *DocRoom {
+	h.mu.Lock()
+	defer h.mu.Unlock()
+
+	if h.docRooms == nil {
+		h.docRooms = make(map[string]*DocRoom)
+	}
+
+	if room, exists := h.docRooms[docID]; exists {
+		return room
+	}
+
+	room := &DocRoom{
+		docID:      docID,
+		hub:        h,
+		wsClients:  make(map[*DocWSClient]bool),
+		sseClients: make(map[*DocSSEClient]bool),
+	}
+
+	// Pre-load current state from CRDT store if available
+	if h.crdtStore != nil {
+		stateBlob, updates, err := h.crdtStore.GetDocumentCRDTState(docID)
+		if err == nil {
+			room.stateBlob = stateBlob
+			room.pendingUpdates = updates
+			room.persistedUpdatesCount = len(updates)
+		}
+	}
+
+	h.docRooms[docID] = room
+	return room
+}
+
+// ApplyUpdate processes an incremental Yjs binary update in-memory, broadcasts it immediately
+// to all other connected clients (WS & SSE), and schedules an asynchronous debounced flush to SQLite.
+func (r *DocRoom) ApplyUpdate(update []byte, fromUserID string, senderWS *DocWSClient, senderSSE *DocSSEClient) {
+	if len(update) == 0 {
+		return
+	}
+
+	r.mu.Lock()
+	r.pendingUpdates = append(r.pendingUpdates, update)
+	r.dirty = true
+	if fromUserID != "" {
+		r.lastUserID = fromUserID
+	}
+
+	b64Update := base64.StdEncoding.EncodeToString(update)
+	msg := domain.WSMessage{
+		Event: "CRDT_UPDATE",
+		Payload: map[string]interface{}{
+			"docId":      r.docID,
+			"update":     b64Update,
+			"fromUserId": fromUserID,
+		},
+		Timestamp: domain.NowISO(),
+	}
+	msgBytes, _ := json.Marshal(msg)
+
+	// Broadcast to all WS clients except sender
+	for client := range r.wsClients {
+		if senderWS != nil && client == senderWS {
+			continue
+		}
+		select {
+		case client.send <- msgBytes:
+		default:
+		}
+	}
+
+	// Broadcast to all SSE clients except sender
+	for client := range r.sseClients {
+		if senderSSE != nil && client == senderSSE {
+			continue
+		}
+		select {
+		case client.send <- msgBytes:
+		default:
+		}
+	}
+
+	// Schedule 2.5s debounced persistence
+	r.scheduleDebouncedFlushLocked()
+	r.mu.Unlock()
+
+	// Also inform legacy room subscribers if any
+	r.hub.BroadcastRoom("doc:"+r.docID, "CRDT_UPDATE", map[string]interface{}{
+		"docId":      r.docID,
+		"update":     b64Update,
+		"fromUserId": fromUserID,
+	}, nil)
+}
+
+// CompactState replaces the incremental pending updates with a full compacted state blob.
+func (r *DocRoom) CompactState(stateBlob []byte, fromUserID string) {
+	if len(stateBlob) == 0 {
+		return
+	}
+
+	r.mu.Lock()
+	r.stateBlob = stateBlob
+	r.pendingUpdates = nil
+	r.persistedUpdatesCount = 0
+	r.dirty = true
+	if fromUserID != "" {
+		r.lastUserID = fromUserID
+	}
+	r.scheduleDebouncedFlushLocked()
+	r.mu.Unlock()
+}
+
+// BroadcastAwareness forwards user awareness state to all other participants in the room.
+func (r *DocRoom) BroadcastAwareness(payload json.RawMessage, fromUserID string, senderWS *DocWSClient, senderSSE *DocSSEClient) {
+	msg := domain.WSMessage{
+		Event:     "CRDT_AWARENESS",
+		Payload:   payload,
+		Timestamp: domain.NowISO(),
+	}
+	msgBytes, _ := json.Marshal(msg)
+
+	r.mu.Lock()
+	defer r.mu.Unlock()
+
+	for client := range r.wsClients {
+		if senderWS != nil && client == senderWS {
+			continue
+		}
+		select {
+		case client.send <- msgBytes:
+		default:
+		}
+	}
+
+	for client := range r.sseClients {
+		if senderSSE != nil && client == senderSSE {
+			continue
+		}
+		select {
+		case client.send <- msgBytes:
+		default:
+		}
+	}
+}
+
+func (r *DocRoom) scheduleDebouncedFlushLocked() {
+	if r.debounceTimer != nil {
+		r.debounceTimer.Stop()
+	}
+	r.debounceTimer = time.AfterFunc(2500*time.Millisecond, func() {
+		r.Flush()
+	})
+}
+
+// Flush persists in-memory pending updates to SQLite asynchronously in a background goroutine.
+func (r *DocRoom) Flush() {
+	r.mu.Lock()
+	if !r.dirty {
+		r.mu.Unlock()
+		return
+	}
+
+	// Prepare data to flush
+	docID := r.docID
+	userID := r.lastUserID
+	stateBlob := r.stateBlob
+	var updatesToFlush [][]byte
+
+	if len(stateBlob) > 0 && len(r.pendingUpdates) == 0 {
+		// Compacted state snapshot
+		r.dirty = false
+		r.mu.Unlock()
+
+		go func() {
+			if r.hub.crdtStore != nil {
+				_ = r.hub.crdtStore.SaveDocumentCRDTState(docID, stateBlob, userID)
+			}
+		}()
+		return
+	}
+
+	if r.persistedUpdatesCount < len(r.pendingUpdates) {
+		updatesToFlush = make([][]byte, len(r.pendingUpdates)-r.persistedUpdatesCount)
+		copy(updatesToFlush, r.pendingUpdates[r.persistedUpdatesCount:])
+		r.persistedUpdatesCount = len(r.pendingUpdates)
+	}
+	r.dirty = false
+	r.mu.Unlock()
+
+	if len(updatesToFlush) > 0 {
+		go func() {
+			if r.hub.crdtStore != nil {
+				for _, u := range updatesToFlush {
+					_ = r.hub.crdtStore.AppendDocumentCRDTUpdate(docID, u, userID)
+				}
+			}
+		}()
+	}
+}
+
+// GetInitialSnapshot returns the base64-encoded state blob and array of incremental updates.
+func (r *DocRoom) GetInitialSnapshot() (string, []string) {
+	r.mu.Lock()
+	defer r.mu.Unlock()
+
+	b64State := ""
+	if len(r.stateBlob) > 0 {
+		b64State = base64.StdEncoding.EncodeToString(r.stateBlob)
+	}
+
+	var b64Updates []string
+	for _, u := range r.pendingUpdates {
+		if len(u) > 0 {
+			b64Updates = append(b64Updates, base64.StdEncoding.EncodeToString(u))
+		}
+	}
+	return b64State, b64Updates
+}
+
+// ServeDocWS handles WebSocket connection for GET /api/v1/ws/docs/{id}
+func (r *DocRoom) ServeDocWS(w http.ResponseWriter, req *http.Request, userID string) {
+	conn, err := upgrader.Upgrade(w, req, nil)
+	if err != nil {
+		log.Printf("[doc-ws] upgrade error for doc %s: %v", r.docID, err)
+		return
+	}
+
+	client := &DocWSClient{
+		hub:    r.hub,
+		room:   r,
+		conn:   conn,
+		userID: userID,
+		send:   make(chan []byte, 256),
+	}
+
+	r.mu.Lock()
+	r.wsClients[client] = true
+	r.mu.Unlock()
+
+	// Send initial snapshot
+	state, updates := r.GetInitialSnapshot()
+	initMsg := domain.WSMessage{
+		Event: "CRDT_INIT",
+		Payload: map[string]interface{}{
+			"docId":   r.docID,
+			"state":   state,
+			"updates": updates,
+		},
+		Timestamp: domain.NowISO(),
+	}
+	initBytes, _ := json.Marshal(initMsg)
+	client.send <- initBytes
+
+	go client.writePump()
+	go client.readPump()
+}
+
+// ServeDocSSE handles SSE stream fallback for GET /api/v1/sync/docs/{id}/stream
+func (r *DocRoom) ServeDocSSE(w http.ResponseWriter, req *http.Request, userID string) {
+	flusher, ok := w.(http.Flusher)
+	if !ok {
+		http.Error(w, "Streaming unsupported", http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache, no-transform")
+	w.Header().Set("Connection", "keep-alive")
+	w.Header().Set("X-Accel-Buffering", "no")
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+
+	client := &DocSSEClient{
+		hub:    r.hub,
+		room:   r,
+		id:     domain.NewID("sse-doc"),
+		userID: userID,
+		send:   make(chan []byte, 256),
+	}
+
+	r.mu.Lock()
+	r.sseClients[client] = true
+	r.mu.Unlock()
+
+	defer func() {
+		r.mu.Lock()
+		delete(r.sseClients, client)
+		clientCount := len(r.wsClients) + len(r.sseClients)
+		r.mu.Unlock()
+
+		if clientCount == 0 {
+			r.Flush()
+		}
+	}()
+
+	// Send initial connected comment and CRDT_INIT
+	fmt.Fprintf(w, ": connected (transport: sse, docId: %s)\n\n", r.docID)
+	state, updates := r.GetInitialSnapshot()
+	initMsg, _ := json.Marshal(domain.WSMessage{
+		Event: "CRDT_INIT",
+		Payload: map[string]interface{}{
+			"docId":   r.docID,
+			"state":   state,
+			"updates": updates,
+		},
+		Timestamp: domain.NowISO(),
+	})
+	fmt.Fprintf(w, "data: %s\n\n", initMsg)
+	flusher.Flush()
+
+	ticker := time.NewTicker(15 * time.Second)
+	defer ticker.Stop()
+
+	notify := req.Context().Done()
+
+	for {
+		select {
+		case <-notify:
+			return
+		case msg, ok := <-client.send:
+			if !ok {
+				return
+			}
+			fmt.Fprintf(w, "data: %s\n\n", msg)
+			flusher.Flush()
+		case <-ticker.C:
+			// Ping to keep proxy connection alive
+			fmt.Fprintf(w, ": ping\n\n")
+			flusher.Flush()
+		}
+	}
+}
+
+func (c *DocWSClient) readPump() {
+	defer func() {
+		c.room.mu.Lock()
+		delete(c.room.wsClients, c)
+		clientCount := len(c.room.wsClients) + len(c.room.sseClients)
+		c.room.mu.Unlock()
+
+		_ = c.conn.Close()
+
+		// Broadcast awareness leave
+		c.room.BroadcastAwareness([]byte(fmt.Sprintf(`{"userId":"%s","activeBlockId":null}`, c.userID)), c.userID, nil, nil)
+
+		if clientCount == 0 {
+			c.room.Flush()
+		}
+	}()
+
+	c.conn.SetReadLimit(8 * 1024 * 1024) // 8MB limit for binary/text updates
+	_ = c.conn.SetReadDeadline(time.Now().Add(60 * time.Second))
+	c.conn.SetPongHandler(func(string) error {
+		_ = c.conn.SetReadDeadline(time.Now().Add(60 * time.Second))
+		return nil
+	})
+
+	for {
+		msgType, message, err := c.conn.ReadMessage()
+		if err != nil {
+			break
+		}
+
+		if msgType == websocket.BinaryMessage {
+			// Direct binary Yjs update
+			c.room.ApplyUpdate(message, c.userID, c, nil)
+			continue
+		}
+
+		// Text JSON message
+		var incoming struct {
+			Event   string          `json:"event"`
+			Payload json.RawMessage `json:"payload"`
+		}
+		if json.Unmarshal(message, &incoming) == nil {
+			switch incoming.Event {
+			case "CRDT_UPDATE":
+				var p struct {
+					Update string `json:"update"`
+				}
+				if json.Unmarshal(incoming.Payload, &p) == nil && p.Update != "" {
+					if raw, err := base64.StdEncoding.DecodeString(p.Update); err == nil && len(raw) > 0 {
+						c.room.ApplyUpdate(raw, c.userID, c, nil)
+					}
+				}
+			case "CRDT_COMPACT":
+				var p struct {
+					State string `json:"state"`
+				}
+				if json.Unmarshal(incoming.Payload, &p) == nil && p.State != "" {
+					if raw, err := base64.StdEncoding.DecodeString(p.State); err == nil && len(raw) > 0 {
+						c.room.CompactState(raw, c.userID)
+					}
+				}
+			case "CRDT_AWARENESS":
+				c.room.BroadcastAwareness(incoming.Payload, c.userID, c, nil)
+			}
+		}
+	}
+}
+
+func (c *DocWSClient) writePump() {
+	ticker := time.NewTicker(30 * time.Second)
+	defer func() {
+		ticker.Stop()
+		_ = c.conn.Close()
+	}()
+
+	for {
+		select {
+		case message, ok := <-c.send:
+			_ = c.conn.SetWriteDeadline(time.Now().Add(10 * time.Second))
+			if !ok {
+				_ = c.conn.WriteMessage(websocket.CloseMessage, []byte{})
+				return
+			}
+			if err := c.conn.WriteMessage(websocket.TextMessage, message); err != nil {
+				return
+			}
+		case <-ticker.C:
+			_ = c.conn.SetWriteDeadline(time.Now().Add(10 * time.Second))
+			if err := c.conn.WriteMessage(websocket.PingMessage, nil); err != nil {
+				return
+			}
+		}
+	}
+}
diff --git a/internal/ws/hub.go b/internal/ws/hub.go
index 56cf61a..8d1ef07 100644
--- a/internal/ws/hub.go
+++ b/internal/ws/hub.go
@@ -62,6 +62,7 @@ type Hub struct {
 	sseUserRooms map[string]map[*SSEClient]bool
 	sseRooms     map[string]map[*SSEClient]bool
 	locks        map[string]*docLockItem
+	docRooms     map[string]*DocRoom
 	crdtStore    CRDTStore
 }
 
@@ -74,6 +75,7 @@ func NewHub() *Hub {
 		sseUserRooms: make(map[string]map[*SSEClient]bool),
 		sseRooms:     make(map[string]map[*SSEClient]bool),
 		locks:        make(map[string]*docLockItem),
+		docRooms:     make(map[string]*DocRoom),
 	}
 	go h.cleanupLocksLoop()
 	return h
@@ -811,23 +813,14 @@ func (c *Client) readPump() {
 					}
 				case "CRDT_JOIN":
 					c.hub.JoinRoom(c, "doc:"+docID)
-					if c.hub.crdtStore != nil {
-						stateBlob, updates, err := c.hub.crdtStore.GetDocumentCRDTState(docID)
-						if err == nil && (len(stateBlob) > 0 || len(updates) > 0) {
-							var b64Updates []string
-							for _, u := range updates {
-								b64Updates = append(b64Updates, base64.StdEncoding.EncodeToString(u))
-							}
-							b64State := ""
-							if len(stateBlob) > 0 {
-								b64State = base64.StdEncoding.EncodeToString(stateBlob)
-							}
-							c.SendEvent("CRDT_INIT", map[string]interface{}{
-								"docId":   docID,
-								"state":   b64State,
-								"updates": b64Updates,
-							})
-						}
+					room := c.hub.GetOrCreateDocRoom(docID)
+					b64State, b64Updates := room.GetInitialSnapshot()
+					if len(b64State) > 0 || len(b64Updates) > 0 {
+						c.SendEvent("CRDT_INIT", map[string]interface{}{
+							"docId":   docID,
+							"state":   b64State,
+							"updates": b64Updates,
+						})
 					}
 				case "CRDT_UPDATE":
 					var p struct {
@@ -835,15 +828,9 @@ func (c *Client) readPump() {
 					}
 					_ = json.Unmarshal(incoming.Payload, &p)
 					if p.Update != "" {
-						c.hub.BroadcastRoom("doc:"+docID, "CRDT_UPDATE", map[string]interface{}{
-							"docId":      docID,
-							"update":     p.Update,
-							"fromUserId": c.userID,
-						}, c)
-						if c.hub.crdtStore != nil {
-							if raw, err := base64.StdEncoding.DecodeString(p.Update); err == nil && len(raw) > 0 {
-								_ = c.hub.crdtStore.AppendDocumentCRDTUpdate(docID, raw, c.userID)
-							}
+						if raw, err := base64.StdEncoding.DecodeString(p.Update); err == nil && len(raw) > 0 {
+							room := c.hub.GetOrCreateDocRoom(docID)
+							room.ApplyUpdate(raw, c.userID, nil, nil)
 						}
 					}
 				case "CRDT_COMPACT":
@@ -851,13 +838,16 @@ func (c *Client) readPump() {
 						State string `json:"state"`
 					}
 					_ = json.Unmarshal(incoming.Payload, &p)
-					if p.State != "" && c.hub.crdtStore != nil {
+					if p.State != "" {
 						if raw, err := base64.StdEncoding.DecodeString(p.State); err == nil && len(raw) > 0 {
-							_ = c.hub.crdtStore.SaveDocumentCRDTState(docID, raw, c.userID)
+							room := c.hub.GetOrCreateDocRoom(docID)
+							room.CompactState(raw, c.userID)
 						}
 					}
 				case "CRDT_AWARENESS":
 					c.hub.BroadcastRoom("doc:"+docID, "CRDT_AWARENESS", incoming.Payload, c)
+					room := c.hub.GetOrCreateDocRoom(docID)
+					room.BroadcastAwareness(incoming.Payload, c.userID, nil, nil)
 				case "CRDT_LEAVE":
 					c.hub.LeaveRoom(c, "doc:"+docID)
 					c.hub.BroadcastRoom("doc:"+docID, "CRDT_AWARENESS_LEAVE", map[string]interface{}{
-- 
2.54.0


From 86867b0d6feb524849e4adf6cc475b1743d1fab2 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 21:14:06 +0100
Subject: [PATCH 04/33] feat(workspace): tabula-rasa outliner architecture,
 SQLite blocks/block_tags schema & echo-protected live room sync

---
 frontend/package.json                         |    4 +-
 .../src/features/workspace/DocumentEditor.tsx |  664 ++
 .../src/features/workspace/OutlinerBlock.tsx  |  548 ++
 .../src/features/workspace/OutlinerTree.tsx   |  312 +
 .../src/features/workspace/WorkspaceView.tsx  | 6260 +++--------------
 frontend/src/lib/api.ts                       |   78 +-
 frontend/src/lib/crdt.ts                      |  271 -
 frontend/src/lib/types.ts                     |    6 +-
 frontend/src/lib/useDocumentSync.ts           |  304 +
 frontend/src/lib/yjs-provider.ts              |  380 -
 internal/api/server.go                        |  250 +-
 internal/api/server_test.go                   |  205 +-
 internal/domain/models.go                     |   76 +-
 internal/storage/sqlite.go                    |  360 +-
 internal/storage/sqlite_test.go               |   76 +-
 internal/ws/docroom.go                        |  703 +-
 internal/ws/hub.go                            |   90 +-
 17 files changed, 3409 insertions(+), 7178 deletions(-)
 create mode 100644 frontend/src/features/workspace/DocumentEditor.tsx
 create mode 100644 frontend/src/features/workspace/OutlinerBlock.tsx
 create mode 100644 frontend/src/features/workspace/OutlinerTree.tsx
 delete mode 100644 frontend/src/lib/crdt.ts
 create mode 100644 frontend/src/lib/useDocumentSync.ts
 delete mode 100644 frontend/src/lib/yjs-provider.ts

diff --git a/frontend/package.json b/frontend/package.json
index 7d2eb01..ee43213 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,9 +16,7 @@
     "lucide-react": "^0.468.0",
     "prismjs": "^1.30.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "y-indexeddb": "^9.0.12",
-    "yjs": "^13.6.33"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",
diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
new file mode 100644
index 0000000..91fe1d4
--- /dev/null
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -0,0 +1,664 @@
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import {
+  Pin,
+  Share2,
+  Trash2,
+  Download,
+  Folder as FolderIcon,
+  Wifi,
+  WifiOff,
+  Loader2,
+  ArrowLeft,
+  Hash,
+  Lock,
+} from 'lucide-react';
+import { Document, DocumentBlock } from '../../lib/types';
+import { api } from '../../lib/api';
+import { useDocumentSync, DocSyncEvent } from '../../lib/useDocumentSync';
+import { OutlinerTree } from './OutlinerTree';
+
+export interface DocumentEditorProps {
+  docId: string;
+  initialDoc?: Document | null;
+  availableFolders: string[];
+  onDocMetadataChange: (updated: Document) => void;
+  onDeleteDoc: (docId: string) => void;
+  onOpenShareModal: (doc: Document) => void;
+  onSelectTag: (tag: string) => void;
+  onBackMobile?: () => void;
+}
+
+const EMOJI_PALETTE = ['📝', '📄', '💡', '🚀', '📌', '📂', '🧠', '⚡', '🎯', '🛠️', '📊', '🔒'];
+
+function ensureNonEmptyBlocks(docId: string, blocks?: DocumentBlock[]): DocumentBlock[] {
+  if (!blocks || blocks.length === 0) {
+    return [
+      {
+        id: `${docId}-b0`,
+        documentId: docId,
+        type: 'text',
+        content: '',
+        level: 0,
+        position: 1000,
+      },
+    ];
+  }
+  return blocks.map((b, idx) => ({
+    ...b,
+    id: b.id || `${docId}-b${idx}`,
+    documentId: docId,
+    type: b.type || 'text',
+    level: Math.max(0, b.level || 0),
+    position: b.position || (idx + 1) * 1000,
+  }));
+}
+
+export const DocumentEditor: React.FC<DocumentEditorProps> = ({
+  docId,
+  initialDoc,
+  availableFolders,
+  onDocMetadataChange,
+  onDeleteDoc,
+  onOpenShareModal,
+  onSelectTag,
+  onBackMobile,
+}) => {
+  const [doc, setDoc] = useState<Document | null>(initialDoc || null);
+  const [title, setTitle] = useState<string>(initialDoc?.title || '');
+  const [blocks, setBlocks] = useState<DocumentBlock[]>(() =>
+    ensureNonEmptyBlocks(docId, initialDoc?.blocks)
+  );
+  const [loading, setLoading] = useState<boolean>(!initialDoc);
+  const [error, setError] = useState<string | null>(null);
+  const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
+  const [showFolderMenu, setShowFolderMenu] = useState<boolean>(false);
+
+  const titleInputRef = useRef<HTMLInputElement | null>(null);
+  const titleDebounceRef = useRef<number | null>(null);
+  const docRef = useRef<Document | null>(doc);
+  docRef.current = doc;
+
+  const canEdit = useMemo(() => {
+    if (!doc) return true;
+    return doc.isOwner !== false && doc.permission !== 'read';
+  }, [doc]);
+
+  // Handle incoming WebSocket events for THIS document room
+  const handleRemoteEvent = useCallback(
+    (evt: DocSyncEvent) => {
+      if (evt.docId && evt.docId !== docId) return;
+
+      switch (evt.type) {
+        case 'doc_state': {
+          if (evt.title !== undefined) {
+            const isTitleFocused =
+              titleInputRef.current !== null &&
+              document.activeElement === titleInputRef.current;
+            if (!isTitleFocused) {
+              setTitle(evt.title);
+            }
+          }
+          if (Array.isArray(evt.blocks) && evt.blocks.length > 0) {
+            setBlocks(ensureNonEmptyBlocks(docId, evt.blocks));
+          }
+          break;
+        }
+
+        case 'title_updated': {
+          if (evt.title !== undefined) {
+            const isTitleFocused =
+              titleInputRef.current !== null &&
+              document.activeElement === titleInputRef.current;
+            if (!isTitleFocused) {
+              setTitle(evt.title);
+            }
+            if (docRef.current) {
+              const updated = { ...docRef.current, title: evt.title };
+              setDoc(updated);
+              onDocMetadataChange(updated);
+            }
+          }
+          break;
+        }
+
+        case 'block_created': {
+          if (!evt.block) return;
+          const incoming = evt.block;
+          setBlocks((prev) => {
+            if (prev.some((b) => b.id === incoming.id)) {
+              return prev.map((b) => (b.id === incoming.id ? incoming : b));
+            }
+            const next = [...prev];
+            if (evt.afterBlockId) {
+              const idx = next.findIndex((b) => b.id === evt.afterBlockId);
+              if (idx >= 0) {
+                next.splice(idx + 1, 0, incoming);
+                return ensureNonEmptyBlocks(docId, next);
+              }
+            }
+            next.push(incoming);
+            return ensureNonEmptyBlocks(docId, next);
+          });
+          break;
+        }
+
+        case 'block_updated': {
+          const targetId = evt.blockId || evt.block?.id;
+          if (!targetId) return;
+          setBlocks((prev) =>
+            prev.map((b) => {
+              if (b.id !== targetId) return b;
+              if (evt.block) {
+                return { ...b, ...evt.block };
+              }
+              return {
+                ...b,
+                content: evt.content !== undefined ? evt.content : b.content,
+                level: evt.level !== undefined ? evt.level : b.level,
+                checked: evt.checked !== undefined ? evt.checked : b.checked,
+                collapsed: evt.collapsed !== undefined ? evt.collapsed : b.collapsed,
+              };
+            })
+          );
+          break;
+        }
+
+        case 'block_deleted': {
+          if (!evt.blockId) return;
+          setBlocks((prev) =>
+            ensureNonEmptyBlocks(
+              docId,
+              prev.filter((b) => b.id !== evt.blockId)
+            )
+          );
+          break;
+        }
+
+        case 'block_moved': {
+          if (!evt.blockId || evt.newIndex === undefined) return;
+          const targetIndex = evt.newIndex;
+          setBlocks((prev) => {
+            const fromIdx = prev.findIndex((b) => b.id === evt.blockId);
+            if (fromIdx === -1) return prev;
+            const copy = [...prev];
+            const [moving] = copy.splice(fromIdx, 1);
+            const updatedMoving: DocumentBlock = {
+              ...moving,
+              level: evt.level !== undefined ? evt.level : moving.level,
+            };
+            const boundedIdx = Math.max(0, Math.min(targetIndex, copy.length));
+            copy.splice(boundedIdx, 0, updatedMoving);
+            return ensureNonEmptyBlocks(docId, copy);
+          });
+          break;
+        }
+
+        case 'blocks_replaced': {
+          if (Array.isArray(evt.blocks)) {
+            setBlocks(ensureNonEmptyBlocks(docId, evt.blocks));
+          }
+          break;
+        }
+      }
+    },
+    [docId, onDocMetadataChange]
+  );
+
+  const {
+    status: syncStatus,
+    sendBlockCreated,
+    sendBlockUpdated,
+    sendBlockDeleted,
+    sendBlockMoved,
+    sendTitleUpdated,
+  } = useDocumentSync(docId, handleRemoteEvent, canEdit);
+
+  // Fetch isolated document state on mount
+  useEffect(() => {
+    let isCancelled = false;
+    setLoading(true);
+    setError(null);
+
+    api
+      .getDocument(docId)
+      .then((fetched) => {
+        if (isCancelled) return;
+        setDoc(fetched);
+        setTitle(fetched.title || 'Unbenannte Notiz');
+        setBlocks(ensureNonEmptyBlocks(docId, fetched.blocks));
+        setLoading(false);
+        onDocMetadataChange(fetched);
+      })
+      .catch((err: any) => {
+        if (isCancelled) return;
+        setError(err?.message || 'Dokument konnte nicht geladen werden');
+        setLoading(false);
+      });
+
+    return () => {
+      isCancelled = true;
+      if (titleDebounceRef.current !== null) {
+        window.clearTimeout(titleDebounceRef.current);
+        titleDebounceRef.current = null;
+      }
+    };
+  }, [docId]);
+
+  // Extract all #tags present across the current blocks
+  const extractedTags = useMemo(() => {
+    const tagSet = new Set<string>();
+    for (const b of blocks) {
+      const matches = b.content?.match(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g);
+      if (matches) {
+        for (const m of matches) {
+          tagSet.add(m.slice(1).toLowerCase());
+        }
+      }
+    }
+    return Array.from(tagSet);
+  }, [blocks]);
+
+  // Keep parent sidebar metadata in sync when blocks/tags change
+  useEffect(() => {
+    if (!docRef.current) return;
+    const updatedDoc: Document = {
+      ...docRef.current,
+      title,
+      blocks,
+      tags: extractedTags,
+      updatedAt: new Date().toISOString(),
+    };
+    docRef.current = updatedDoc;
+    onDocMetadataChange(updatedDoc);
+  }, [blocks, extractedTags, title]);
+
+  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!canEdit) return;
+    const nextTitle = e.target.value;
+    setTitle(nextTitle);
+
+    if (titleDebounceRef.current !== null) {
+      window.clearTimeout(titleDebounceRef.current);
+    }
+    titleDebounceRef.current = window.setTimeout(() => {
+      titleDebounceRef.current = null;
+      sendTitleUpdated(nextTitle);
+    }, 250);
+  };
+
+  const handleUpdateBlock = useCallback(
+    (updatedBlock: DocumentBlock) => {
+      setBlocks((prev) =>
+        prev.map((b) => (b.id === updatedBlock.id ? updatedBlock : b))
+      );
+      sendBlockUpdated(updatedBlock);
+    },
+    [sendBlockUpdated]
+  );
+
+  const handleCreateBlock = useCallback(
+    (newBlock: DocumentBlock, afterBlockId?: string) => {
+      setBlocks((prev) => {
+        const next = [...prev];
+        if (afterBlockId) {
+          const idx = next.findIndex((b) => b.id === afterBlockId);
+          if (idx >= 0) {
+            next.splice(idx + 1, 0, newBlock);
+            const normalized = ensureNonEmptyBlocks(docId, next);
+            sendBlockCreated(newBlock, afterBlockId, normalized);
+            return normalized;
+          }
+        }
+        next.push(newBlock);
+        const normalized = ensureNonEmptyBlocks(docId, next);
+        sendBlockCreated(newBlock, afterBlockId, normalized);
+        return normalized;
+      });
+    },
+    [docId, sendBlockCreated]
+  );
+
+  const handleDeleteBlock = useCallback(
+    (blockId: string) => {
+      setBlocks((prev) => {
+        const filtered = prev.filter((b) => b.id !== blockId);
+        const normalized = ensureNonEmptyBlocks(docId, filtered);
+        sendBlockDeleted(blockId, normalized);
+        return normalized;
+      });
+    },
+    [docId, sendBlockDeleted]
+  );
+
+  const handleMoveBlock = useCallback(
+    (blockId: string, newIndex: number, level?: number) => {
+      setBlocks((prev) => {
+        const fromIdx = prev.findIndex((b) => b.id === blockId);
+        if (fromIdx === -1) return prev;
+        const copy = [...prev];
+        const [moving] = copy.splice(fromIdx, 1);
+        const updatedMoving: DocumentBlock = {
+          ...moving,
+          level: level !== undefined ? level : moving.level,
+        };
+        const boundedIdx = Math.max(0, Math.min(newIndex, copy.length));
+        copy.splice(boundedIdx, 0, updatedMoving);
+        const normalized = ensureNonEmptyBlocks(docId, copy);
+        sendBlockMoved(blockId, boundedIdx, updatedMoving.level, normalized);
+        return normalized;
+      });
+    },
+    [docId, sendBlockMoved]
+  );
+
+  const handleTogglePin = async () => {
+    if (!doc) return;
+    try {
+      const updated = await api.updateDocument(doc.id, { isPinned: !doc.isPinned });
+      setDoc(updated);
+      onDocMetadataChange(updated);
+    } catch {
+      // ignore
+    }
+  };
+
+  const handleSelectIcon = async (icon: string) => {
+    setShowEmojiPicker(false);
+    if (!doc || !canEdit) return;
+    try {
+      const updated = await api.updateDocument(doc.id, { icon });
+      setDoc(updated);
+      onDocMetadataChange(updated);
+    } catch {
+      // ignore
+    }
+  };
+
+  const handleMoveToFolder = async (folderPath: string) => {
+    setShowFolderMenu(false);
+    if (!doc || !canEdit) return;
+    try {
+      const updated = await api.moveDocument(doc.id, folderPath);
+      setDoc(updated);
+      onDocMetadataChange(updated);
+    } catch {
+      // ignore
+    }
+  };
+
+  const handleExportMarkdown = () => {
+    const lines: string[] = [`# ${title || 'Unbenannte Notiz'}`, ''];
+    for (const b of blocks) {
+      const indent = '  '.repeat(Math.max(0, b.level || 0));
+      if (b.type === 'todo') {
+        lines.push(`${indent}- [${b.checked ? 'x' : ' '}] ${b.content}`);
+      } else if (b.type === 'h1') {
+        lines.push(`${indent}- # ${b.content}`);
+      } else if (b.type === 'h2') {
+        lines.push(`${indent}- ## ${b.content}`);
+      } else if (b.type === 'h3') {
+        lines.push(`${indent}- ### ${b.content}`);
+      } else if (b.type === 'code') {
+        lines.push(`${indent}- \`\`\`${b.lang || ''}\n${b.content}\n${indent}  \`\`\``);
+      } else {
+        lines.push(`${indent}- ${b.content}`);
+      }
+    }
+    const blob = new Blob([lines.join('\n')], { type: 'text/markdown;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${(title || 'notiz').toLowerCase().replace(/[^a-z0-9äöüß_-]+/gi, '-')}.md`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center p-12 text-slate-400">
+        <Loader2 className="w-6 h-6 animate-spin mr-2 text-indigo-500" />
+        <span className="text-sm">Notiz wird geladen…</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center p-12 text-center">
+        <p className="text-sm text-rose-500 font-medium mb-2">{error}</p>
+        {onBackMobile && (
+          <button
+            type="button"
+            onClick={onBackMobile}
+            className="px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300"
+          >
+            Zurück zur Übersicht
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col h-full min-h-0 bg-white dark:bg-slate-900 overflow-y-auto">
+      {/* Top Document Action Bar */}
+      <div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-2 px-4 sm:px-8 py-3 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md border-b border-slate-200/70 dark:border-slate-800/80">
+        <div className="flex items-center gap-2 min-w-0">
+          {onBackMobile && (
+            <button
+              type="button"
+              onClick={onBackMobile}
+              className="lg:hidden p-1.5 rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
+              title="Zurück zur Seitenleiste"
+            >
+              <ArrowLeft className="w-4 h-4" />
+            </button>
+          )}
+
+          {/* Folder Selector */}
+          <div className="relative">
+            <button
+              type="button"
+              onClick={() => canEdit && setShowFolderMenu((prev) => !prev)}
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200/70 dark:hover:bg-slate-700/70 transition-colors"
+              title="Ordner wechseln"
+            >
+              <FolderIcon className="w-3.5 h-3.5 text-indigo-500" />
+              <span className="truncate max-w-[160px]">
+                {doc?.folderPath ? doc.folderPath : 'Hauptebene'}
+              </span>
+            </button>
+
+            {showFolderMenu && canEdit && (
+              <div className="absolute left-0 mt-1 w-52 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl py-1 z-30 max-h-60 overflow-y-auto">
+                <button
+                  type="button"
+                  onClick={() => handleMoveToFolder('')}
+                  className={`w-full text-left px-3 py-1.5 text-xs hover:bg-slate-100 dark:hover:bg-slate-800 ${
+                    !doc?.folderPath
+                      ? 'font-semibold text-indigo-600 dark:text-indigo-400'
+                      : 'text-slate-700 dark:text-slate-300'
+                  }`}
+                >
+                  / (Hauptebene)
+                </button>
+                {availableFolders.map((folder) => (
+                  <button
+                    key={folder}
+                    type="button"
+                    onClick={() => handleMoveToFolder(folder)}
+                    className={`w-full text-left px-3 py-1.5 text-xs hover:bg-slate-100 dark:hover:bg-slate-800 truncate ${
+                      doc?.folderPath === folder
+                        ? 'font-semibold text-indigo-600 dark:text-indigo-400'
+                        : 'text-slate-700 dark:text-slate-300'
+                    }`}
+                  >
+                    📁 {folder}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Read-only indicator if shared with read permission */}
+          {!canEdit && (
+            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-amber-50 dark:bg-amber-950/60 text-amber-700 dark:text-amber-300">
+              <Lock className="w-3 h-3" />
+              Nur Lesen
+            </span>
+          )}
+        </div>
+
+        {/* Right Status & Action Buttons */}
+        <div className="flex items-center gap-1.5">
+          {/* Sync Status Pill */}
+          <span
+            className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium ${
+              syncStatus === 'connected'
+                ? 'bg-emerald-50 dark:bg-emerald-950/50 text-emerald-600 dark:text-emerald-400'
+                : syncStatus === 'connecting' || syncStatus === 'reconnecting'
+                ? 'bg-amber-50 dark:bg-amber-950/50 text-amber-600 dark:text-amber-400'
+                : 'bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400'
+            }`}
+            title={
+              syncStatus === 'connected'
+                ? 'Echtzeit-Synchronisation aktiv (1.5s Auto-Flush in SQLite)'
+                : 'Änderungen werden automatisch per REST gespeichert'
+            }
+          >
+            {syncStatus === 'connected' ? (
+              <>
+                <Wifi className="w-3 h-3" />
+                <span className="hidden sm:inline">Live</span>
+              </>
+            ) : syncStatus === 'connecting' || syncStatus === 'reconnecting' ? (
+              <>
+                <Loader2 className="w-3 h-3 animate-spin" />
+                <span className="hidden sm:inline">Sync…</span>
+              </>
+            ) : (
+              <>
+                <WifiOff className="w-3 h-3" />
+                <span className="hidden sm:inline">REST-Sync</span>
+              </>
+            )}
+          </span>
+
+          <button
+            type="button"
+            onClick={handleTogglePin}
+            className={`p-1.5 rounded-lg transition-colors ${
+              doc?.isPinned
+                ? 'bg-amber-50 dark:bg-amber-950/50 text-amber-500'
+                : 'text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800'
+            }`}
+            title={doc?.isPinned ? 'Anheftung lösen' : 'Notiz anheften'}
+          >
+            <Pin className="w-4 h-4" />
+          </button>
+
+          {doc && (
+            <button
+              type="button"
+              onClick={() => onOpenShareModal(doc)}
+              className="p-1.5 rounded-lg text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+              title="Notiz teilen / Berechtigungen"
+            >
+              <Share2 className="w-4 h-4" />
+            </button>
+          )}
+
+          <button
+            type="button"
+            onClick={handleExportMarkdown}
+            className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+            title="Als Markdown (.md) exportieren"
+          >
+            <Download className="w-4 h-4" />
+          </button>
+
+          {canEdit && doc?.isOwner !== false && (
+            <button
+              type="button"
+              onClick={() => onDeleteDoc(docId)}
+              className="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/40 transition-colors"
+              title="Notiz löschen"
+            >
+              <Trash2 className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Main Outliner Content Container */}
+      <div className="max-w-4xl w-full mx-auto px-4 sm:px-10 py-6 sm:py-8 flex-1">
+        {/* Document Icon + Title Header */}
+        <div className="flex items-center gap-3 mb-4 relative">
+          <div className="relative">
+            <button
+              type="button"
+              onClick={() => canEdit && setShowEmojiPicker((prev) => !prev)}
+              className="w-11 h-11 rounded-2xl bg-slate-100 dark:bg-slate-800/90 hover:bg-slate-200/70 dark:hover:bg-slate-700 flex items-center justify-center text-2xl transition-colors"
+              title="Icon ändern"
+            >
+              {doc?.icon || '📝'}
+            </button>
+            {showEmojiPicker && canEdit && (
+              <div className="absolute left-0 mt-2 p-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-xl grid grid-cols-6 gap-1 z-30 w-56">
+                {EMOJI_PALETTE.map((emoji) => (
+                  <button
+                    key={emoji}
+                    type="button"
+                    onClick={() => handleSelectIcon(emoji)}
+                    className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-lg flex items-center justify-center"
+                  >
+                    {emoji}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <input
+            ref={titleInputRef}
+            type="text"
+            value={title}
+            readOnly={!canEdit}
+            onChange={handleTitleChange}
+            placeholder="Titel der Notiz…"
+            className="flex-1 min-w-0 text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white bg-transparent border-0 focus:outline-none focus:ring-0 tracking-tight"
+          />
+        </div>
+
+        {/* Document #Tags Summary Bar */}
+        {extractedTags.length > 0 && (
+          <div className="flex flex-wrap items-center gap-1.5 mb-6 pb-4 border-b border-slate-100 dark:border-slate-800/80">
+            <Hash className="w-3.5 h-3.5 text-slate-400 mr-0.5" />
+            {extractedTags.map((tag) => (
+              <button
+                key={tag}
+                type="button"
+                onClick={() => onSelectTag(tag)}
+                className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/80 transition-colors"
+              >
+                #{tag}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Logseq Hierarchical Outliner Tree */}
+        <OutlinerTree
+          docId={docId}
+          blocks={blocks}
+          canEdit={canEdit}
+          onUpdateBlock={handleUpdateBlock}
+          onCreateBlock={handleCreateBlock}
+          onDeleteBlock={handleDeleteBlock}
+          onMoveBlock={handleMoveBlock}
+          onTagClick={onSelectTag}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/features/workspace/OutlinerBlock.tsx b/frontend/src/features/workspace/OutlinerBlock.tsx
new file mode 100644
index 0000000..61fbe42
--- /dev/null
+++ b/frontend/src/features/workspace/OutlinerBlock.tsx
@@ -0,0 +1,548 @@
+import React, { useState, useEffect, useRef, useLayoutEffect, useCallback } from 'react';
+import {
+  ChevronRight,
+  ChevronDown,
+  CheckSquare,
+  Square,
+  Trash2,
+  GripVertical,
+  ArrowDownLeft,
+  Indent,
+  Outdent,
+  Code,
+  Heading1,
+  Heading2,
+  ListTodo,
+  Type,
+} from 'lucide-react';
+import { DocumentBlock, BlockType } from '../../lib/types';
+
+export interface OutlinerBlockProps {
+  block: DocumentBlock;
+  index: number;
+  maxAllowedLevel: number;
+  hasChildren: boolean;
+  isFocused: boolean;
+  canEdit: boolean;
+  onFocusBlock: (blockId: string) => void;
+  onUpdateBlock: (updated: DocumentBlock, immediate?: boolean) => void;
+  onCreateBlockBelow: (afterBlockId: string, currentContent: string) => void;
+  onDeleteBlock: (blockId: string) => void;
+  onIndentBlock: (blockId: string, delta: 1 | -1) => void;
+  onNavigateFocus: (blockId: string, direction: 'up' | 'down') => void;
+  onTagClick?: (tag: string) => void;
+  onDragStartBlock?: (index: number) => void;
+  onDragOverBlock?: (e: React.DragEvent, index: number) => void;
+  onDropBlock?: (index: number) => void;
+  isDragTarget?: boolean;
+  registerTextareaRef: (blockId: string, el: HTMLTextAreaElement | null) => void;
+}
+
+export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
+  block,
+  index,
+  maxAllowedLevel,
+  hasChildren,
+  isFocused,
+  canEdit,
+  onFocusBlock,
+  onUpdateBlock,
+  onCreateBlockBelow,
+  onDeleteBlock,
+  onIndentBlock,
+  onNavigateFocus,
+  onTagClick,
+  onDragStartBlock,
+  onDragOverBlock,
+  onDropBlock,
+  isDragTarget,
+  registerTextareaRef,
+}) => {
+  const [localContent, setLocalContent] = useState<string>(block.content || '');
+  const [showTypeMenu, setShowTypeMenu] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const debounceTimerRef = useRef<number | null>(null);
+  const latestBlockRef = useRef<DocumentBlock>(block);
+  latestBlockRef.current = block;
+  const localContentRef = useRef<string>(localContent);
+  localContentRef.current = localContent;
+
+  // Sync incoming remote changes ONLY when this textarea does NOT hold active focus
+  useEffect(() => {
+    const isActivelyFocused =
+      textareaRef.current !== null && document.activeElement === textareaRef.current;
+    if (!isActivelyFocused && block.content !== localContentRef.current) {
+      setLocalContent(block.content || '');
+    }
+  }, [block.content]);
+
+  // Cleanup 150ms debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current !== null) {
+        window.clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+      }
+    };
+  }, []);
+
+  // Auto-resize textarea height on content or layout changes
+  const adjustHeight = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${Math.max(24, el.scrollHeight)}px`;
+  }, []);
+
+  useLayoutEffect(() => {
+    adjustHeight();
+  }, [localContent, block.type, block.level, adjustHeight]);
+
+  useEffect(() => {
+    window.addEventListener('resize', adjustHeight);
+    return () => window.removeEventListener('resize', adjustHeight);
+  }, [adjustHeight]);
+
+  const flushDebounce = useCallback(
+    (contentToFlush: string, overrides?: Partial<DocumentBlock>) => {
+      if (debounceTimerRef.current !== null) {
+        window.clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+      }
+      const nextBlock: DocumentBlock = {
+        ...latestBlockRef.current,
+        content: contentToFlush,
+        ...overrides,
+      };
+      onUpdateBlock(nextBlock, true);
+    },
+    [onUpdateBlock]
+  );
+
+  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (!canEdit) return;
+    let val = e.target.value;
+    let typeOverride: BlockType | undefined;
+    let checkedOverride: boolean | undefined;
+
+    // Quick markdown prefix shortcuts at start of block
+    if (val.startsWith('[] ') || val.startsWith('[ ] ')) {
+      val = val.replace(/^\[\s?\]\s/, '');
+      typeOverride = 'todo';
+      checkedOverride = false;
+    } else if (val.startsWith('[x] ') || val.startsWith('[X] ')) {
+      val = val.replace(/^\[[xX]\]\s/, '');
+      typeOverride = 'todo';
+      checkedOverride = true;
+    } else if (val.startsWith('# ') && block.type !== 'h1') {
+      val = val.slice(2);
+      typeOverride = 'h1';
+    } else if (val.startsWith('## ') && block.type !== 'h2') {
+      val = val.slice(3);
+      typeOverride = 'h2';
+    } else if (val.startsWith('### ') && block.type !== 'h3') {
+      val = val.slice(4);
+      typeOverride = 'h3';
+    } else if (val.startsWith('/todo ')) {
+      val = val.slice(6);
+      typeOverride = 'todo';
+      checkedOverride = false;
+    } else if (val.startsWith('/code ')) {
+      val = val.slice(6);
+      typeOverride = 'code';
+    }
+
+    setLocalContent(val);
+
+    if (debounceTimerRef.current !== null) {
+      window.clearTimeout(debounceTimerRef.current);
+    }
+
+    if (typeOverride) {
+      flushDebounce(val, {
+        type: typeOverride,
+        checked: checkedOverride ?? latestBlockRef.current.checked,
+      });
+      return;
+    }
+
+    debounceTimerRef.current = window.setTimeout(() => {
+      debounceTimerRef.current = null;
+      onUpdateBlock({
+        ...latestBlockRef.current,
+        content: val,
+      });
+    }, 150);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!canEdit) return;
+
+    // 1. Tab / Shift+Tab -> Strict Outliner Indent / Outdent
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      e.stopPropagation();
+      flushDebounce(localContent);
+      if (e.shiftKey) {
+        onIndentBlock(block.id, -1);
+      } else {
+        onIndentBlock(block.id, 1);
+      }
+      return;
+    }
+
+    // 2. Enter (without Shift) -> Create new block on same level
+    if (e.key === 'Enter' && !e.shiftKey && block.type !== 'code') {
+      e.preventDefault();
+      e.stopPropagation();
+      flushDebounce(localContent);
+      onCreateBlockBelow(block.id, localContent);
+      return;
+    }
+
+    // 3. Backspace on empty block -> Outdent if indented, or delete block & focus previous
+    if (e.key === 'Backspace' && localContent === '') {
+      e.preventDefault();
+      e.stopPropagation();
+      if (debounceTimerRef.current !== null) {
+        window.clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+      }
+      if ((block.level || 0) > 0) {
+        onIndentBlock(block.id, -1);
+      } else {
+        onDeleteBlock(block.id);
+      }
+      return;
+    }
+
+    // 4. ArrowUp / ArrowDown navigation between blocks
+    if (e.key === 'ArrowUp' && !e.shiftKey && !e.altKey) {
+      const el = textareaRef.current;
+      if (el && el.selectionStart === 0 && el.selectionEnd === 0) {
+        e.preventDefault();
+        flushDebounce(localContent);
+        onNavigateFocus(block.id, 'up');
+      }
+      return;
+    }
+
+    if (e.key === 'ArrowDown' && !e.shiftKey && !e.altKey) {
+      const el = textareaRef.current;
+      if (el && el.selectionStart === localContent.length && el.selectionEnd === localContent.length) {
+        e.preventDefault();
+        flushDebounce(localContent);
+        onNavigateFocus(block.id, 'down');
+      }
+      return;
+    }
+  };
+
+  const level = Math.max(0, block.level || 0);
+  const inlineTags = Array.from(
+    new Set(
+      (localContent.match(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g) || []).map((t) => t.slice(1).toLowerCase())
+    )
+  );
+
+  const setBlockType = (newType: BlockType) => {
+    setShowTypeMenu(false);
+    flushDebounce(localContent, {
+      type: newType,
+      checked: newType === 'todo' ? Boolean(block.checked) : false,
+    });
+  };
+
+  const textStyleClass =
+    block.type === 'h1'
+      ? 'text-xl font-bold text-slate-900 dark:text-white tracking-tight'
+      : block.type === 'h2'
+      ? 'text-lg font-semibold text-slate-800 dark:text-slate-100'
+      : block.type === 'h3'
+      ? 'text-base font-semibold text-slate-800 dark:text-slate-200'
+      : block.type === 'code'
+      ? 'font-mono text-xs bg-slate-900/90 text-emerald-300 px-3 py-2 rounded-lg border border-slate-700/80'
+      : block.type === 'todo' && block.checked
+      ? 'text-sm text-slate-400 dark:text-slate-500 line-through'
+      : 'text-sm text-slate-800 dark:text-slate-200';
+
+  return (
+    <div
+      className={`group relative flex items-start gap-1.5 py-1 rounded-lg transition-colors ${
+        isDragTarget
+          ? 'border-t-2 border-indigo-500 bg-indigo-50/40 dark:bg-indigo-950/20'
+          : isFocused
+          ? 'bg-slate-100/70 dark:bg-slate-800/40'
+          : 'hover:bg-slate-50/80 dark:hover:bg-slate-800/20'
+      }`}
+      style={{ paddingLeft: `${level * 24 + 4}px` }}
+      onDragOver={(e) => onDragOverBlock?.(e, index)}
+      onDrop={() => onDropBlock?.(index)}
+    >
+      {/* Indentation Guide Lines */}
+      {level > 0 &&
+        Array.from({ length: level }).map((_, lvlIdx) => (
+          <div
+            key={lvlIdx}
+            className="pointer-events-none absolute top-0 bottom-0 w-px bg-slate-200/80 dark:bg-slate-800"
+            style={{ left: `${lvlIdx * 24 + 14}px` }}
+          />
+        ))}
+
+      {/* Left Controls: Drag Handle + Collapse Toggle + Bullet / Checkbox */}
+      <div className="flex items-center gap-0.5 pt-1 select-none shrink-0">
+        {canEdit && (
+          <button
+            type="button"
+            draggable
+            onDragStart={() => onDragStartBlock?.(index)}
+            title="Block ziehen oder Typ ändern"
+            onClick={() => setShowTypeMenu((prev) => !prev)}
+            className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 rounded text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 cursor-grab active:cursor-grabbing transition-opacity"
+          >
+            <GripVertical className="w-3.5 h-3.5" />
+          </button>
+        )}
+
+        {hasChildren ? (
+          <button
+            type="button"
+            onClick={() =>
+              flushDebounce(localContent, { collapsed: !block.collapsed })
+            }
+            className="p-0.5 rounded text-slate-400 hover:text-indigo-500 transition-colors"
+            title={block.collapsed ? 'Unterpunkte ausklappen' : 'Unterpunkte einklappen'}
+          >
+            {block.collapsed ? (
+              <ChevronRight className="w-3.5 h-3.5" />
+            ) : (
+              <ChevronDown className="w-3.5 h-3.5" />
+            )}
+          </button>
+        ) : (
+          <span className="w-4" />
+        )}
+
+        {block.type === 'todo' ? (
+          <button
+            type="button"
+            disabled={!canEdit}
+            onClick={() =>
+              flushDebounce(localContent, { checked: !block.checked })
+            }
+            className={`p-0.5 rounded transition-colors ${
+              block.checked
+                ? 'text-emerald-500 hover:text-emerald-600'
+                : 'text-slate-400 hover:text-indigo-500'
+            }`}
+            title={block.checked ? 'Als offen markieren' : 'Als erledigt markieren'}
+          >
+            {block.checked ? (
+              <CheckSquare className="w-4 h-4" />
+            ) : (
+              <Square className="w-4 h-4" />
+            )}
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={() => canEdit && setShowTypeMenu((prev) => !prev)}
+            className="w-5 h-5 flex items-center justify-center rounded-full group/bullet"
+            title="Klicken für Block-Typ"
+          >
+            <span
+              className={`w-2 h-2 rounded-full transition-all ${
+                block.collapsed && hasChildren
+                  ? 'bg-indigo-500 ring-4 ring-indigo-500/20'
+                  : isFocused
+                  ? 'bg-indigo-500 scale-110'
+                  : 'bg-slate-400 dark:bg-slate-500 group-hover/bullet:bg-indigo-400'
+              }`}
+            />
+          </button>
+        )}
+      </div>
+
+      {/* Block Type Quick Popover */}
+      {showTypeMenu && canEdit && (
+        <div className="absolute left-8 top-8 z-30 flex items-center gap-1 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl shadow-lg p-1">
+          <button
+            type="button"
+            onClick={() => setBlockType('text')}
+            className={`p-1.5 rounded-lg text-xs flex items-center gap-1 ${
+              block.type === 'text' || block.type === 'paragraph' || block.type === 'bullet'
+                ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300'
+                : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
+            }`}
+            title="Standard-Bullet"
+          >
+            <Type className="w-3.5 h-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setBlockType('todo')}
+            className={`p-1.5 rounded-lg text-xs flex items-center gap-1 ${
+              block.type === 'todo'
+                ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300'
+                : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
+            }`}
+            title="To-Do Checkbox"
+          >
+            <ListTodo className="w-3.5 h-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setBlockType('h1')}
+            className={`p-1.5 rounded-lg text-xs flex items-center gap-1 ${
+              block.type === 'h1'
+                ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300'
+                : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
+            }`}
+            title="Überschrift 1"
+          >
+            <Heading1 className="w-3.5 h-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setBlockType('h2')}
+            className={`p-1.5 rounded-lg text-xs flex items-center gap-1 ${
+              block.type === 'h2'
+                ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300'
+                : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
+            }`}
+            title="Überschrift 2"
+          >
+            <Heading2 className="w-3.5 h-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setBlockType('code')}
+            className={`p-1.5 rounded-lg text-xs flex items-center gap-1 ${
+              block.type === 'code'
+                ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300'
+                : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
+            }`}
+            title="Code-Block"
+          >
+            <Code className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      )}
+
+      {/* Main Content Area: Auto-Resizing Multiline Textarea + Tag Pills */}
+      <div className="flex-1 min-w-0 pr-2">
+        <textarea
+          ref={(el) => {
+            textareaRef.current = el;
+            registerTextareaRef(block.id, el);
+          }}
+          rows={1}
+          value={localContent}
+          readOnly={!canEdit}
+          onFocus={() => {
+            setShowTypeMenu(false);
+            onFocusBlock(block.id);
+          }}
+          onBlur={() => {
+            if (debounceTimerRef.current !== null) {
+              flushDebounce(localContent);
+            }
+          }}
+          onChange={handleContentChange}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            index === 0 && level === 0
+              ? 'Schreibe einen Punkt… (Enter = Neuer Punkt, Tab = Einrücken, #tag, [] für To-Do)'
+              : ''
+          }
+          className={`w-full resize-none overflow-hidden bg-transparent border-0 focus:outline-none focus:ring-0 leading-relaxed whitespace-pre-wrap break-words ${textStyleClass}`}
+        />
+
+        {/* Inline clickable #tag pills */}
+        {inlineTags.length > 0 && (
+          <div className="flex flex-wrap items-center gap-1 mt-1">
+            {inlineTags.map((t) => (
+              <button
+                key={t}
+                type="button"
+                onClick={() => onTagClick?.(t)}
+                className="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/80 transition-colors"
+              >
+                #{t}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Mobile Quick-Action Bar when focused */}
+        {isFocused && canEdit && (
+          <div className="flex sm:hidden items-center gap-1 mt-1.5 pt-1 border-t border-slate-200/60 dark:border-slate-800/60">
+            <button
+              type="button"
+              onMouseDown={(e) => {
+                e.preventDefault();
+                flushDebounce(localContent);
+                onIndentBlock(block.id, -1);
+              }}
+              disabled={level === 0}
+              className="p-1.5 rounded-lg text-xs text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 disabled:opacity-40"
+              title="Ausrücken (Shift+Tab)"
+            >
+              <Outdent className="w-3.5 h-3.5" />
+            </button>
+            <button
+              type="button"
+              onMouseDown={(e) => {
+                e.preventDefault();
+                flushDebounce(localContent);
+                onIndentBlock(block.id, 1);
+              }}
+              disabled={level >= maxAllowedLevel}
+              className="p-1.5 rounded-lg text-xs text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 disabled:opacity-40"
+              title="Einrücken (Tab)"
+            >
+              <Indent className="w-3.5 h-3.5" />
+            </button>
+            <button
+              type="button"
+              onMouseDown={(e) => {
+                e.preventDefault();
+                flushDebounce(localContent, {
+                  type: block.type === 'todo' ? 'text' : 'todo',
+                });
+              }}
+              className="p-1.5 rounded-lg text-xs text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800"
+              title="Als To-Do umschalten"
+            >
+              <ListTodo className="w-3.5 h-3.5" />
+            </button>
+            <button
+              type="button"
+              onMouseDown={(e) => {
+                e.preventDefault();
+                flushDebounce(localContent);
+                onCreateBlockBelow(block.id, localContent);
+              }}
+              className="p-1.5 rounded-lg text-xs text-indigo-600 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-950/60 ml-auto flex items-center gap-1"
+            >
+              <ArrowDownLeft className="w-3.5 h-3.5" />
+              <span>Neu</span>
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Right Hover Delete Button */}
+      {canEdit && (
+        <button
+          type="button"
+          onClick={() => onDeleteBlock(block.id)}
+          className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-1 rounded text-slate-400 hover:text-rose-500 transition-opacity shrink-0"
+          title="Block löschen"
+        >
+          <Trash2 className="w-3.5 h-3.5" />
+        </button>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/features/workspace/OutlinerTree.tsx b/frontend/src/features/workspace/OutlinerTree.tsx
new file mode 100644
index 0000000..e4b9096
--- /dev/null
+++ b/frontend/src/features/workspace/OutlinerTree.tsx
@@ -0,0 +1,312 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { Plus } from 'lucide-react';
+import { DocumentBlock } from '../../lib/types';
+import { OutlinerBlock } from './OutlinerBlock';
+
+export interface OutlinerTreeProps {
+  docId: string;
+  blocks: DocumentBlock[];
+  canEdit: boolean;
+  onUpdateBlock: (updated: DocumentBlock, immediate?: boolean) => void;
+  onCreateBlock: (newBlock: DocumentBlock, afterBlockId?: string) => void;
+  onDeleteBlock: (blockId: string) => void;
+  onMoveBlock: (blockId: string, newIndex: number, level?: number) => void;
+  onTagClick?: (tag: string) => void;
+}
+
+export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
+  docId,
+  blocks,
+  canEdit,
+  onUpdateBlock,
+  onCreateBlock,
+  onDeleteBlock,
+  onMoveBlock,
+  onTagClick,
+}) => {
+  const [focusedBlockId, setFocusedBlockId] = useState<string | null>(null);
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+
+  const textareaMapRef = useRef<Map<string, HTMLTextAreaElement>>(new Map());
+  const pendingFocusRef = useRef<{ blockId: string; cursor: 'start' | 'end' } | null>(null);
+
+  const registerTextareaRef = useCallback((blockId: string, el: HTMLTextAreaElement | null) => {
+    if (el) {
+      textareaMapRef.current.set(blockId, el);
+      if (pendingFocusRef.current && pendingFocusRef.current.blockId === blockId) {
+        const target = pendingFocusRef.current;
+        pendingFocusRef.current = null;
+        requestAnimationFrame(() => {
+          el.focus();
+          const pos = target.cursor === 'end' ? el.value.length : 0;
+          try {
+            el.setSelectionRange(pos, pos);
+          } catch {
+            // ignore
+          }
+        });
+      }
+    } else {
+      textareaMapRef.current.delete(blockId);
+    }
+  }, []);
+
+  const focusBlockInput = useCallback((blockId: string, cursor: 'start' | 'end' = 'end') => {
+    setFocusedBlockId(blockId);
+    const el = textareaMapRef.current.get(blockId);
+    if (el) {
+      requestAnimationFrame(() => {
+        el.focus();
+        const pos = cursor === 'end' ? el.value.length : 0;
+        try {
+          el.setSelectionRange(pos, pos);
+        } catch {
+          // ignore
+        }
+      });
+    } else {
+      pendingFocusRef.current = { blockId, cursor };
+    }
+  }, []);
+
+  // Compute visibility based on collapsed ancestor blocks
+  const visibleEntries = useMemo(() => {
+    const result: {
+      block: DocumentBlock;
+      index: number;
+      hasChildren: boolean;
+      maxAllowedLevel: number;
+    }[] = [];
+
+    let collapsedAboveLevel: number | null = null;
+
+    for (let i = 0; i < blocks.length; i++) {
+      const b = blocks[i];
+      const lvl = Math.max(0, b.level || 0);
+
+      if (collapsedAboveLevel !== null) {
+        if (lvl > collapsedAboveLevel) {
+          continue;
+        } else {
+          collapsedAboveLevel = null;
+        }
+      }
+
+      const nextBlock = blocks[i + 1];
+      const nextLvl = nextBlock ? Math.max(0, nextBlock.level || 0) : 0;
+      const hasChildren = Boolean(nextBlock && nextLvl > lvl);
+
+      const prevBlock = i > 0 ? blocks[i - 1] : null;
+      const maxAllowedLevel = prevBlock ? Math.max(0, prevBlock.level || 0) + 1 : 0;
+
+      result.push({
+        block: b,
+        index: i,
+        hasChildren,
+        maxAllowedLevel,
+      });
+
+      if (b.collapsed && hasChildren) {
+        collapsedAboveLevel = lvl;
+      }
+    }
+
+    return result;
+  }, [blocks]);
+
+  const handleCreateBlockBelow = useCallback(
+    (afterBlockId: string, _currentContent: string) => {
+      if (!canEdit) return;
+      const idx = blocks.findIndex((b) => b.id === afterBlockId);
+      const currentBlock = idx >= 0 ? blocks[idx] : null;
+      const level = currentBlock ? Math.max(0, currentBlock.level || 0) : 0;
+      const inheritedType =
+        currentBlock && currentBlock.type === 'todo' ? 'todo' : 'text';
+
+      const newBlock: DocumentBlock = {
+        id: `blk_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`,
+        documentId: docId,
+        type: inheritedType,
+        content: '',
+        level,
+        checked: false,
+        collapsed: false,
+        position: ((idx >= 0 ? idx + 2 : blocks.length + 1) * 1000),
+      };
+
+      pendingFocusRef.current = { blockId: newBlock.id, cursor: 'start' };
+      setFocusedBlockId(newBlock.id);
+      onCreateBlock(newBlock, afterBlockId);
+    },
+    [blocks, canEdit, docId, onCreateBlock]
+  );
+
+  const handleDeleteBlock = useCallback(
+    (blockId: string) => {
+      if (!canEdit) return;
+      const idx = blocks.findIndex((b) => b.id === blockId);
+      if (idx === -1) return;
+
+      // If this is the only block in the document, clear its content/type instead of leaving 0 blocks
+      if (blocks.length <= 1) {
+        const only = blocks[0];
+        onUpdateBlock(
+          {
+            ...only,
+            content: '',
+            type: 'text',
+            level: 0,
+            checked: false,
+          },
+          true
+        );
+        return;
+      }
+
+      const targetFocusBlock = idx > 0 ? blocks[idx - 1] : blocks[idx + 1];
+      if (targetFocusBlock) {
+        focusBlockInput(targetFocusBlock.id, 'end');
+      }
+      onDeleteBlock(blockId);
+    },
+    [blocks, canEdit, focusBlockInput, onDeleteBlock, onUpdateBlock]
+  );
+
+  const handleIndentBlock = useCallback(
+    (blockId: string, delta: 1 | -1) => {
+      if (!canEdit) return;
+      const idx = blocks.findIndex((b) => b.id === blockId);
+      if (idx === -1) return;
+
+      const current = blocks[idx];
+      const currentLevel = Math.max(0, current.level || 0);
+      const prevLevel = idx > 0 ? Math.max(0, blocks[idx - 1].level || 0) : 0;
+      const maxLevel = idx === 0 ? 0 : prevLevel + 1;
+
+      const nextLevel =
+        delta === 1
+          ? Math.min(maxLevel, currentLevel + 1)
+          : Math.max(0, currentLevel - 1);
+
+      if (nextLevel === currentLevel) return;
+
+      onUpdateBlock(
+        {
+          ...current,
+          level: nextLevel,
+        },
+        true
+      );
+    },
+    [blocks, canEdit, onUpdateBlock]
+  );
+
+  const handleNavigateFocus = useCallback(
+    (blockId: string, direction: 'up' | 'down') => {
+      const visIdx = visibleEntries.findIndex((e) => e.block.id === blockId);
+      if (visIdx === -1) return;
+      const targetEntry =
+        direction === 'up' ? visibleEntries[visIdx - 1] : visibleEntries[visIdx + 1];
+      if (targetEntry) {
+        focusBlockInput(
+          targetEntry.block.id,
+          direction === 'up' ? 'end' : 'start'
+        );
+      }
+    },
+    [focusBlockInput, visibleEntries]
+  );
+
+  const handleDragStartBlock = useCallback((index: number) => {
+    setDraggedIndex(index);
+  }, []);
+
+  const handleDragOverBlock = useCallback((e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    setDragOverIndex(index);
+  }, []);
+
+  const handleDropBlock = useCallback(
+    (targetIndex: number) => {
+      if (draggedIndex === null || draggedIndex === targetIndex) {
+        setDraggedIndex(null);
+        setDragOverIndex(null);
+        return;
+      }
+      const movingBlock = blocks[draggedIndex];
+      if (movingBlock) {
+        onMoveBlock(movingBlock.id, targetIndex, movingBlock.level);
+      }
+      setDraggedIndex(null);
+      setDragOverIndex(null);
+    },
+    [blocks, draggedIndex, onMoveBlock]
+  );
+
+  useEffect(() => {
+    const clearDrag = () => {
+      setDraggedIndex(null);
+      setDragOverIndex(null);
+    };
+    window.addEventListener('dragend', clearDrag);
+    return () => window.removeEventListener('dragend', clearDrag);
+  }, []);
+
+  return (
+    <div className="space-y-0.5">
+      {visibleEntries.map(({ block, index, hasChildren, maxAllowedLevel }) => (
+        <OutlinerBlock
+          key={block.id}
+          block={block}
+          index={index}
+          maxAllowedLevel={maxAllowedLevel}
+          hasChildren={hasChildren}
+          isFocused={focusedBlockId === block.id}
+          canEdit={canEdit}
+          onFocusBlock={setFocusedBlockId}
+          onUpdateBlock={onUpdateBlock}
+          onCreateBlockBelow={handleCreateBlockBelow}
+          onDeleteBlock={handleDeleteBlock}
+          onIndentBlock={handleIndentBlock}
+          onNavigateFocus={handleNavigateFocus}
+          onTagClick={onTagClick}
+          onDragStartBlock={handleDragStartBlock}
+          onDragOverBlock={handleDragOverBlock}
+          onDropBlock={handleDropBlock}
+          isDragTarget={dragOverIndex === index && draggedIndex !== index}
+          registerTextareaRef={registerTextareaRef}
+        />
+      ))}
+
+      {canEdit && (
+        <div className="pt-2 pl-2">
+          <button
+            type="button"
+            onClick={() => {
+              const lastBlock = blocks[blocks.length - 1];
+              if (lastBlock) {
+                handleCreateBlockBelow(lastBlock.id, lastBlock.content);
+              } else {
+                const firstBlock: DocumentBlock = {
+                  id: `blk_${Date.now().toString(36)}_0`,
+                  documentId: docId,
+                  type: 'text',
+                  content: '',
+                  level: 0,
+                  position: 1000,
+                };
+                pendingFocusRef.current = { blockId: firstBlock.id, cursor: 'start' };
+                onCreateBlock(firstBlock);
+              }
+            }}
+            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-colors"
+          >
+            <Plus className="w-3.5 h-3.5" />
+            <span>Neuer Punkt</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index bb8439a..e7cab37 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useState, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import {
   FilePlus,
   FolderPlus,
@@ -9,54 +9,29 @@ import {
   Search,
   Pin,
   Trash2,
-  Download,
   CheckSquare,
-  Heading1,
-  Heading2,
-  Heading3,
-  List,
-  Code,
-  Sparkles,
-  AlignLeft,
-  Check,
-  X,
-  ArrowUp,
-  ArrowDown,
-  Bold,
-  Italic,
-  Strikethrough,
-  Link,
-  FileText,
-  Table as TableIcon,
-  Percent,
-  Minus,
-  ExternalLink,
-  ArrowLeft,
-  GripVertical,
-  Layers,
-  Filter,
-  CheckCircle2,
-  Circle,
-  FolderTree,
-  Plus,
-  HelpCircle,
-  Users,
-  Lock,
-  Unlock,
-  Eye,
-  Edit3,
+  Square,
   Hash,
-  User as UserIcon,
-  Radio,
+  FileText,
+  Users,
+  Plus,
+  X,
+  Share2,
 } from 'lucide-react';
-import { BlockType, Document, DocumentBlock, DocBlocksPatchEvent, DocLockInfo, DocShare, FolderShare, SharedFolder, TagDetails, TagSummary, Team, User } from '../../lib/types';
-import { api, getToken, triggerHaptic, onWebSocketStatus, isWebSocketConnected, sendWebSocketMessage, createRealtimeConnection, RealtimeTransport } from '../../lib/api';
-import { CodeBlockItem } from './CodeBlockItem';
-import { UserAutocomplete } from '../UserAutocomplete';
+import {
+  Document,
+  DocShare,
+  SharedFolder,
+  TagDetails,
+  TagSummary,
+  Team,
+  UnifiedShare,
+  User,
+} from '../../lib/types';
+import { api, onWebSocketMessage } from '../../lib/api';
 import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { useMobileActions } from '../../context/MobileActionContext';
-import { DocumentCRDTSession, CollaboratorAwareness, getCollaboratorColor } from '../../lib/crdt';
-import { YjsHybridProvider, SyncTransportStatus } from '../../lib/yjs-provider';
+import { DocumentEditor } from './DocumentEditor';
 
 interface WorkspaceViewProps {
   currentUser?: User | null;
@@ -64,5536 +39,949 @@ interface WorkspaceViewProps {
   onStatsChange: () => void;
 }
 
-const ICONS = ['📄', '📝', '💡', '🚀', '🏡', '⚡', '🎯', '🍕', '🛠️', '🧠', '🔥', '🏔️', '📦', '📑', '⚙️', '📊'];
-
-interface FolderTreeItem {
-  path: string;
-  name: string;
-  depth: number;
-  subfolders: FolderTreeItem[];
-  docs: Document[];
-  sharedFolder?: SharedFolder;
-  isShared?: boolean;
-  isSharedRoot?: boolean;
-}
-
-interface SlashCommandItem {
-  type?: BlockType;
-  action?: 'insert_link' | 'insert_note' | 'insert_weblink';
-  label: string;
-  desc: string;
-  icon: string;
-}
-
-const SLASH_COMMANDS: SlashCommandItem[] = [
-  { action: 'insert_link', label: '/link', desc: 'Webseite oder Notiz verlinken', icon: '🔗' },
-  { action: 'insert_note', label: '/notiz', desc: 'Notiz verlinken [[Notiz]]', icon: '📄' },
-  { action: 'insert_weblink', label: '/web', desc: 'Externe Webseite verlinken [Name](url)', icon: '🌐' },
-  { type: 'todo', label: '/todo', desc: 'Aufgabe mit Checkbox', icon: '☑️' },
-  { type: 'h1', label: '/h1', desc: 'Große Überschrift', icon: 'H1' },
-  { type: 'h2', label: '/h2', desc: 'Abschnitts-Überschrift', icon: 'H2' },
-  { type: 'h3', label: '/h3', desc: 'Unterabschnitt', icon: 'H3' },
-  { type: 'bullet', label: '/bullet', desc: 'Standard Listenpunkt', icon: '•' },
-  { type: 'callout', label: '/callout', desc: 'Hervorgehobene Hinweisbox', icon: '💡' },
-  { type: 'code', label: '/code', desc: 'Code-Block mit Syntax', icon: '💻' },
-  { type: 'table', label: '/table', desc: 'Markdown-Tabelle', icon: '📊' },
-  { type: 'progress', label: '/progress', desc: 'Fortschrittsbalken', icon: '📈' },
-  { type: 'divider', label: '/divider', desc: 'Horizontale Trennlinie', icon: '—' },
-];
+type WorkspaceSubView = 'editor' | 'tag_detail' | 'todos';
 
 export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   currentUser,
   initialDocId,
   onStatsChange,
 }) => {
-  const { setGroups, setPrimaryAction } = useMobileActions();
-  const [showMobileFileDrawer, setShowMobileFileDrawer] = useState(false);
+  const [docs, setDocs] = useState<Document[]>([]);
+  const [folders, setFolders] = useState<string[]>([]);
+  const [sharedFolders, setSharedFolders] = useState<SharedFolder[]>([]);
+  const [tagsSummary, setTagsSummary] = useState<TagSummary[]>([]);
 
-  // Top Workspace Tab Mode: 'editor' vs 'todos' vs 'tags'
-  const [workspaceMode, setWorkspaceMode] = useState<'editor' | 'todos' | 'tags'>('editor');
+  const [selectedDocId, setSelectedDocId] = useState<string | null>(initialDocId || null);
+  const [subView, setSubView] = useState<WorkspaceSubView>('editor');
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
   const [tagDetails, setTagDetails] = useState<TagDetails | null>(null);
-  const [workspaceTags, setWorkspaceTags] = useState<TagSummary[]>([]);
-  const [isLoadingTag, setIsLoadingTag] = useState(false);
-  const [tagSearchQuery, setTagSearchQuery] = useState('');
-  const [tagNoteContent, setTagNoteContent] = useState('');
-  const [tagNoteSaveState, setTagNoteSaveState] = useState<'saved' | 'saving'>('saved');
-  const tagNoteSaveTimerRef = useRef<any>(null);
+  const [tagNoteDraft, setTagNoteDraft] = useState<string>('');
 
-  // Collapsible sidebar sections
-  const [isPinnedCollapsed, setIsPinnedCollapsed] = useState(false);
-  const [isTagsCollapsed, setIsTagsCollapsed] = useState(false);
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [expandedFolders, setExpandedFolders] = useState<Record<string, boolean>>({});
+  const [showNewFolderModal, setShowNewFolderModal] = useState<boolean>(false);
+  const [newFolderName, setNewFolderName] = useState<string>('');
+  const [newFolderIsShared, setNewFolderIsShared] = useState<boolean>(false);
+  const [mobileShowDetail, setMobileShowDetail] = useState<boolean>(Boolean(initialDocId));
 
-  const [docs, setDocs] = useState<Document[]>([]);
-  const [selectedDoc, setSelectedDoc] = useState<Document | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [saveState, setSaveState] = useState<'saved' | 'saving'>('saved');
-  const [showIconPicker, setShowIconPicker] = useState(false);
-  const [showWikiLinkMenu, setShowWikiLinkMenu] = useState(false);
-
-  // Realtime connection & status for live indicator
-  const realtimeConnRef = useRef<any>(null);
-  const [wsConnected, setWsConnected] = useState<boolean>(false);
-  const [realtimeTransport, setRealtimeTransport] = useState<RealtimeTransport>('none');
-  const [wsDisconnectReason, setWsDisconnectReason] = useState<string | null>(null);
-  const onStatsChangeRef = useRef(onStatsChange);
-  onStatsChangeRef.current = onStatsChange;
-  const lastLocalEditTimestampRef = useRef<number>(0);
-  const isSavingToBackendRef = useRef<boolean>(false);
-
-  // Folder state (synchronized with server)
-  const [customFolders, setCustomFolders] = useState<string[]>([]);
-  useEffect(() => {
-    try {
-      localStorage.removeItem('mindsift_workspace_folders');
-    } catch {}
-  }, []);
-  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
-  const [isCreatingFolder, setIsCreatingFolder] = useState(false);
-  const [newFolderParent, setNewFolderParent] = useState<string | null>(null);
-  const [newFolderName, setNewFolderName] = useState('');
-
-  // Sidebar Document & Folder Drag and Drop state
-  const [draggingDocId, setDraggingDocId] = useState<string | null>(null);
-  const [draggingFolderPath, setDraggingFolderPath] = useState<string | null>(null);
-  const [dragOverFolder, setDragOverFolder] = useState<string | null>(null);
-
-  // Active focused block ref
-  const [lastFocusedBlockId, setLastFocusedBlockId] = useState<string | null>(null);
-
-  // --- LOGSEQ OUTLINER SPECIFIC STATE ---
-  // Zoom-in / Focus mode (Hoisting to a bullet)
-  const [zoomedBlockId, setZoomedBlockId] = useState<string | null>(null);
-  // Floating Slash Command menu
-  const [slashBlockId, setSlashBlockId] = useState<string | null>(null);
-  const [slashSearch, setSlashSearch] = useState('');
-  const [slashSelectedIndex, setSlashSelectedIndex] = useState(0);
-  const slashMenuRef = useRef<HTMLDivElement | null>(null);
-
-  // Link Insertion Modal state (/link, /notiz, /web)
-  const [linkModalBlockId, setLinkModalBlockId] = useState<string | null>(null);
-  const [linkModalTab, setLinkModalTab] = useState<'note' | 'web'>('note');
-  const [linkSearchQuery, setLinkSearchQuery] = useState('');
-  const [linkWebTitle, setLinkWebTitle] = useState('');
-  const [linkWebUrl, setLinkWebUrl] = useState('');
-  const [activeEditingBlockId, setActiveEditingBlockId] = useState<string | null>(null);
-  const [activeCursorOffset, setActiveCursorOffset] = useState<number>(0);
-  const activeCursorOffsetRef = useRef<number>(0);
-  const [editingLinkOriginalRaw, setEditingLinkOriginalRaw] = useState<string | null>(null);
-
-  const setBlockCursor = (blockId: string | null, offset: number) => {
-    activeCursorOffsetRef.current = offset;
-    setActiveEditingBlockId(blockId);
-    setActiveCursorOffset(offset);
-  };
-
-  const autoResizeTextarea = (el: HTMLTextAreaElement | null) => {
-    if (!el) return;
-    el.style.height = 'auto';
-    el.style.height = `${el.scrollHeight}px`;
-  };
-
-  // Drag and Drop reordering state for blocks
-  const [draggingBlockId, setDraggingBlockId] = useState<string | null>(null);
-  const [dragOverBlockTarget, setDragOverBlockTarget] = useState<{ blockId: string; position: 'before' | 'after' | 'inside' } | null>(null);
-
-  // Modal for deleting block with sub-bulletpoints (X button)
-  const [deleteSubpointsModal, setDeleteSubpointsModal] = useState<{
-    blockId: string;
-    count: number;
-    snippet: string;
-  } | null>(null);
-
-  // --- GLOBAL TO-DO ROLLUP STATE ---
-  const [todoFilter, setTodoFilter] = useState<'all' | 'open' | 'done'>('open');
-  const [todoFolderDrilldown, setTodoFolderDrilldown] = useState<string | null>(null);
-  const [collapsedTodoFolders, setCollapsedTodoFolders] = useState<Set<string>>(new Set());
-
-  // --- DOCUMENT SHARING STATE ---
-  const [showShareModal, setShowShareModal] = useState(false);
-  const [docShares, setDocShares] = useState<DocShare[]>([]);
+  // Sharing Modal State
+  const [shareModalDoc, setShareModalDoc] = useState<Document | null>(null);
+  const [shareModalFolder, setShareModalFolder] = useState<SharedFolder | null>(null);
+  const [activeDocShares, setActiveDocShares] = useState<DocShare[]>([]);
+  const [teams, setTeams] = useState<Team[]>([]);
   const [collaborators, setCollaborators] = useState<User[]>([]);
-  const [shareTeams, setShareTeams] = useState<Team[]>([]);
-  const [addShareType, setAddShareType] = useState<'team' | 'user'>('team');
-  const [selectedShareTeamId, setSelectedShareTeamId] = useState('');
-  const [selectedShareUser, setSelectedShareUser] = useState<User | null>(null);
-  const [sharePermission, setSharePermission] = useState<'read' | 'write'>('read');
-  const [sharingLoading, setSharingLoading] = useState(false);
-  const [shareError, setShareError] = useState<string | null>(null);
 
-  // --- FOLDER SHARING STATE ---
-  const [sharedFolders, setSharedFolders] = useState<SharedFolder[]>([]);
-  const [sharingFolder, setSharingFolder] = useState<SharedFolder | null>(null);
-  const [showFolderShareModal, setShowFolderShareModal] = useState(false);
-  const [folderShares, setFolderShares] = useState<FolderShare[]>([]);
+  const { setGroups, setPrimaryAction } = useMobileActions();
 
-  // --- DOCUMENT CRDT & HYBRID TRANSPORT STATE ---
-  const crdtSessionRef = useRef<DocumentCRDTSession | null>(null);
-  const providerRef = useRef<YjsHybridProvider | null>(null);
-  const [syncStatus, setSyncStatus] = useState<SyncTransportStatus>('offline');
-  const [activePeers, setActivePeers] = useState<CollaboratorAwareness[]>([]);
-  const currentDocIdRef = useRef<string | null>(null);
-  const isEditorFocusedRef = useRef(false);
-  const isDraggingBlockRef = useRef(false);
-
-  const blockInputRefs = useRef<Record<string, HTMLTextAreaElement | HTMLInputElement | null>>({});
-
-  // Collaborative CRDT: multi-user writing with zero lockouts
-  const isLockedByOther = false;
-  const isReadOnly = selectedDoc?.permission === 'read';
-
-  // Track server-synced blocks & metadata per document, plus local unsaved block deltas
-  const syncedDocMetaRef = useRef<Map<string, { title: string; icon: string; tagsJson: string; isPinned: boolean }>>(new Map());
-  const syncedBlocksRef = useRef<Map<string, Map<string, DocumentBlock>>>(new Map());
-  const syncedOrderRef = useRef<Map<string, string[]>>(new Map());
-  const localDirtyBlocksRef = useRef<Map<string, Map<string, DocumentBlock>>>(new Map());
-  const localDeletedBlocksRef = useRef<Map<string, Set<string>>>(new Map());
-
-  const blocksAreEqual = (a?: DocumentBlock, b?: DocumentBlock): boolean => {
-    if (!a || !b) return false;
-    return (
-      a.id === b.id &&
-      (a.type || 'bullet') === (b.type || 'bullet') &&
-      (a.content || '') === (b.content || '') &&
-      (a.level || 0) === (b.level || 0) &&
-      !!a.checked === !!b.checked &&
-      !!a.collapsed === !!b.collapsed &&
-      (a.lang || '') === (b.lang || '')
-    );
-  };
-
-  const recordSyncedDoc = (doc: Document) => {
-    if (!doc || !doc.id) return;
-    syncedDocMetaRef.current.set(doc.id, {
-      title: doc.title || '',
-      icon: doc.icon || '📄',
-      tagsJson: JSON.stringify((doc.tags || []).filter((t) => !t.startsWith('folder:'))),
-      isPinned: !!doc.isPinned,
-    });
-    const bMap = new Map<string, DocumentBlock>();
-    const order: string[] = [];
-    (doc.blocks || []).forEach((b) => {
-      bMap.set(b.id, { ...b });
-      order.push(b.id);
-    });
-    syncedBlocksRef.current.set(doc.id, bMap);
-    syncedOrderRef.current.set(doc.id, order);
-  };
-
-  const mergeIncomingBlocks = (
-    docId: string,
-    currentBlocks: DocumentBlock[],
-    patch: { upserted?: DocumentBlock[]; deletedIds?: string[]; blockOrder?: string[] }
-  ): DocumentBlock[] => {
-    const dirtyMap = localDirtyBlocksRef.current.get(docId);
-    const localDeleted = localDeletedBlocksRef.current.get(docId);
-
-    // Update server baseline refs
-    let srvMap = syncedBlocksRef.current.get(docId);
-    if (!srvMap) {
-      srvMap = new Map<string, DocumentBlock>();
-      currentBlocks.forEach((b) => srvMap!.set(b.id, { ...b }));
-      syncedBlocksRef.current.set(docId, srvMap);
-    }
-    const deletedSet = new Set<string>(patch.deletedIds || []);
-    deletedSet.forEach((delId) => srvMap!.delete(delId));
-    (patch.upserted || []).forEach((b) => srvMap!.set(b.id, { ...b }));
-    if (patch.blockOrder && patch.blockOrder.length > 0) {
-      syncedOrderRef.current.set(docId, [...patch.blockOrder]);
-    }
-
-    // Build merged block map preserving any block with unsaved local edits
-    const blockMap = new Map<string, DocumentBlock>();
-    currentBlocks.forEach((b) => {
-      if (!deletedSet.has(b.id) || dirtyMap?.has(b.id)) {
-        blockMap.set(b.id, b);
-      }
-    });
-
-    (patch.upserted || []).forEach((b) => {
-      if (localDeleted?.has(b.id)) {
-        return;
-      }
-      if (dirtyMap?.has(b.id)) {
-        blockMap.set(b.id, dirtyMap.get(b.id)!);
-      } else {
-        blockMap.set(b.id, b);
-      }
-    });
-
-    // Reconcile ordering
-    const mergedOrder: string[] = [];
-    const seen = new Set<string>();
-
-    if (patch.blockOrder && patch.blockOrder.length > 0) {
-      patch.blockOrder.forEach((id) => {
-        if (blockMap.has(id) && !seen.has(id) && !localDeleted?.has(id)) {
-          mergedOrder.push(id);
-          seen.add(id);
-        }
-      });
-      // Preserve any locally created unsaved blocks in their relative position
-      currentBlocks.forEach((b, idx) => {
-        if (!seen.has(b.id) && blockMap.has(b.id) && !deletedSet.has(b.id)) {
-          let insertIdx = 0;
-          for (let j = idx - 1; j >= 0; j--) {
-            const predPos = mergedOrder.indexOf(currentBlocks[j].id);
-            if (predPos !== -1) {
-              insertIdx = predPos + 1;
-              break;
-            }
-          }
-          mergedOrder.splice(insertIdx, 0, b.id);
-          seen.add(b.id);
-        }
-      });
-    } else {
-      currentBlocks.forEach((b) => {
-        if (blockMap.has(b.id) && !seen.has(b.id)) {
-          mergedOrder.push(b.id);
-          seen.add(b.id);
-        }
-      });
-      (patch.upserted || []).forEach((b) => {
-        if (blockMap.has(b.id) && !seen.has(b.id)) {
-          mergedOrder.push(b.id);
-          seen.add(b.id);
-        }
-      });
-    }
-
-    return mergedOrder.map((id) => blockMap.get(id)!).filter(Boolean);
-  };
-
-  const releaseMyLock = async (_docId?: string) => {};
-
-  const broadcastAwareness = (blockId: string | null) => {
-    if (!selectedDoc) return;
-    const payload = {
-      userId: currentUser?.id,
-      userName: currentUser?.displayName || currentUser?.username || 'Kollege',
-      activeBlockId: blockId,
-      color: getCollaboratorColor(currentUser?.id || ''),
-      lastActive: Date.now(),
-    };
-    if (providerRef.current) {
-      providerRef.current.sendAwareness(payload);
-    } else {
-      sendWebSocketMessage({
-        event: 'CRDT_AWARENESS',
-        docId: selectedDoc.id,
-        payload,
-      });
-    }
-  };
-
-  const handleBlockFocus = (blockIdOrEvent?: string | React.FocusEvent<any>) => {
-    const blockId = typeof blockIdOrEvent === 'string' ? blockIdOrEvent : undefined;
-    isEditorFocusedRef.current = true;
-    if (blockId) {
-      broadcastAwareness(blockId);
-    }
-  };
-
-  const handleBlockBlur = () => {
-    isEditorFocusedRef.current = false;
-    broadcastAwareness(null);
-  };
-
-  // Debounced auto-save refs (500ms delay)
-  const debounceSaveTimerRef = useRef<any>(null);
-  const pendingSaveDocRef = useRef<Document | null>(null);
-
-  const executeSaveToBackend = async (docToSave: Document) => {
-    if (isReadOnly) return;
-    let saveSucceeded = false;
-    isSavingToBackendRef.current = true;
+  const loadWorkspaceData = useCallback(async () => {
     try {
-      const docId = docToSave.id;
-      const srvMeta = syncedDocMetaRef.current.get(docId);
-      const cleanTags = (docToSave.tags || []).filter((t) => !t.startsWith('folder:'));
-      const cleanTagsJson = JSON.stringify(cleanTags);
-      const metaChanged =
-        !srvMeta ||
-        srvMeta.title !== docToSave.title ||
-        srvMeta.icon !== docToSave.icon ||
-        srvMeta.tagsJson !== cleanTagsJson ||
-        srvMeta.isPinned !== !!docToSave.isPinned;
-
-      if (metaChanged) {
-        await api.updateDocument(docId, {
-          title: docToSave.title,
-          icon: docToSave.icon,
-          tags: cleanTags,
-          isPinned: docToSave.isPinned,
-        });
-        syncedDocMetaRef.current.set(docId, {
-          title: docToSave.title,
-          icon: docToSave.icon,
-          tagsJson: cleanTagsJson,
-          isPinned: !!docToSave.isPinned,
-        });
-      }
-
-      saveSucceeded = true;
-      onStatsChangeRef.current();
-      api.getWorkspaceTags().then(setWorkspaceTags).catch(() => {});
-      if (selectedTag) {
-        api.getTagDetails(selectedTag).then(setTagDetails).catch(() => {});
-      }
-    } catch (e: any) {
-      console.error('Failed to save document metadata to backend', e);
-    } finally {
-      isSavingToBackendRef.current = false;
-      if (saveSucceeded) {
-        if (pendingSaveDocRef.current === null || pendingSaveDocRef.current === docToSave) {
-          pendingSaveDocRef.current = null;
-          setSaveState('saved');
-        }
-      } else {
-        setSaveState('saved');
-      }
-    }
-  };
-
-  const flushPendingSave = async () => {
-    if (debounceSaveTimerRef.current) {
-      clearTimeout(debounceSaveTimerRef.current);
-      debounceSaveTimerRef.current = null;
-    }
-    if (pendingSaveDocRef.current) {
-      const doc = pendingSaveDocRef.current;
-      pendingSaveDocRef.current = null;
-      await executeSaveToBackend(doc);
-    }
-  };
-
-  const persistDocument = async (updatedDoc: Document, immediate = false) => {
-    if (isReadOnly) return;
-    lastLocalEditTimestampRef.current = Date.now();
-
-    // 1. Sync into active CRDT session
-    if (crdtSessionRef.current && crdtSessionRef.current.docId === updatedDoc.id) {
-      crdtSessionRef.current.syncFullBlocks(updatedDoc.blocks || []);
-    }
-
-    // 2. Update local UI state immediately for responsive, instant typing
-    setSelectedDoc(updatedDoc);
-    setDocs((prev) => prev.map((d) => (d.id === updatedDoc.id ? updatedDoc : d)));
-    setSaveState('saving');
-
-    pendingSaveDocRef.current = updatedDoc;
-
-    if (debounceSaveTimerRef.current) {
-      clearTimeout(debounceSaveTimerRef.current);
-      debounceSaveTimerRef.current = null;
-    }
-
-    if (immediate) {
-      await executeSaveToBackend(updatedDoc);
-    } else {
-      debounceSaveTimerRef.current = setTimeout(async () => {
-        debounceSaveTimerRef.current = null;
-        if (pendingSaveDocRef.current) {
-          const doc = pendingSaveDocRef.current;
-          pendingSaveDocRef.current = null;
-          await executeSaveToBackend(doc);
-        }
-      }, 500);
-    }
-  };
-
-  const loadDocs = async (selectId?: string | null) => {
-    try {
-      const [list, serverFolders, tags, sFolders] = await Promise.all([
+      const [docsRes, foldersRes, sharedFoldersRes, tagsRes] = await Promise.all([
         api.getDocuments(),
         api.getFolders(),
-        api.getWorkspaceTags().catch(() => []),
         api.getSharedFolders().catch(() => []),
+        api.getWorkspaceTags().catch(() => []),
       ]);
-      list.forEach(recordSyncedDoc);
-      setDocs(list);
-      setCustomFolders(serverFolders);
-      setWorkspaceTags(tags);
-      setSharedFolders(sFolders);
-      if (selectId) {
-        const found = list.find((d) => d.id === selectId);
-        if (found) {
-          setSelectedDoc(found);
-          return;
+      setDocs(docsRes);
+      setFolders(foldersRes);
+      setSharedFolders(sharedFoldersRes);
+      setTagsSummary(tagsRes);
+
+      setSelectedDocId((prevId) => {
+        if (prevId && docsRes.some((d) => d.id === prevId)) {
+          return prevId;
         }
-      }
-      if (!selectedDoc && list.length > 0) {
-        setSelectedDoc(list[0]);
-      } else if (selectedDoc) {
-        const updated = list.find((d) => d.id === selectedDoc.id);
-        if (updated) setSelectedDoc(updated);
-      }
-    } catch (err) {
-      console.error('Error loading documents or folders:', err);
+        return docsRes.length > 0 ? docsRes[0].id : null;
+      });
+    } catch {
+      // ignore initial load error
     }
-  };
-
-  const openTagPage = async (tag: string) => {
-    const clean = tag.replace(/^#/, '').toLowerCase();
-    if (tagNoteSaveTimerRef.current) {
-      clearTimeout(tagNoteSaveTimerRef.current);
-      tagNoteSaveTimerRef.current = null;
-    }
-    setSelectedTag(clean);
-    setWorkspaceMode('tags');
-    setIsLoadingTag(true);
-    try {
-      const details = await api.getTagDetails(clean);
-      setTagDetails(details);
-      setTagNoteContent(details.noteContent || '');
-      setTagNoteSaveState('saved');
-    } catch (err) {
-      console.error('Failed to load tag details', err);
-    } finally {
-      setIsLoadingTag(false);
-    }
-  };
-
-  const handleTagNoteChange = (newContent: string) => {
-    setTagNoteContent(newContent);
-    if (!selectedTag) return;
-    const targetTag = selectedTag;
-    setTagNoteSaveState('saving');
-    if (tagNoteSaveTimerRef.current) {
-      clearTimeout(tagNoteSaveTimerRef.current);
-    }
-    tagNoteSaveTimerRef.current = setTimeout(async () => {
-      try {
-        await api.updateTagPageNote(targetTag, newContent);
-        setTagDetails((prev) =>
-          prev && prev.tag === targetTag ? { ...prev, noteContent: newContent } : prev
-        );
-        setTagNoteSaveState('saved');
-      } catch (err) {
-        console.error('Failed to save tag note', err);
-        setTagNoteSaveState('saved');
-      }
-    }, 450);
-  };
-
-  const handleExportTagMarkdown = () => {
-    if (!selectedTag) return;
-    const md = `# #${selectedTag}\n\n${tagNoteContent || ''}\n`;
-    const blob = new Blob([md], { type: 'text/markdown;charset=utf-8' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `tag-${selectedTag}.md`;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
+  }, []);
 
   useEffect(() => {
-    loadDocs(initialDocId);
+    loadWorkspaceData();
+  }, [loadWorkspaceData]);
+
+  useEffect(() => {
+    if (initialDocId) {
+      setSelectedDocId(initialDocId);
+      setSubView('editor');
+      setMobileShowDetail(true);
+    }
   }, [initialDocId]);
 
-  const selectedDocIdRef = useRef<string | null>(null);
-  selectedDocIdRef.current = selectedDoc?.id || null;
-  const currentUserIdRef = useRef<string | null>(null);
-  currentUserIdRef.current = currentUser?.id || null;
-
-  // Handle document switch, Yjs CRDT session & YjsHybridProvider lifecycle
+  // Listen to global WebSocket events for sidebar list updates (DOC_CREATED, DOC_DELETED, DOC_UPDATED)
   useEffect(() => {
-    const prevId = currentDocIdRef.current;
-    if (prevId && prevId !== selectedDoc?.id) {
-      flushPendingSave();
-      if (providerRef.current) {
-        providerRef.current.destroy();
-        providerRef.current = null;
-      }
-      if (crdtSessionRef.current) {
-        crdtSessionRef.current.destroy();
-        crdtSessionRef.current = null;
-      }
-      setActivePeers([]);
-    }
-    currentDocIdRef.current = selectedDoc?.id || null;
-
-    if (selectedDoc) {
-      const targetDoc = selectedDoc;
-      const session = new DocumentCRDTSession(targetDoc.id);
-      session.initFromBlocks(targetDoc.blocks || []);
-
-      session.onRemoteChange = (crdtBlocks) => {
-        if (crdtBlocks && crdtBlocks.length > 0) {
-          setSelectedDoc((prev) => (prev && prev.id === targetDoc.id ? { ...prev, blocks: crdtBlocks } : prev));
-          setDocs((prev) => prev.map((d) => (d.id === targetDoc.id ? { ...d, blocks: crdtBlocks } : d)));
-        }
-      };
-      crdtSessionRef.current = session;
-
-      const provider = new YjsHybridProvider({
-        docId: targetDoc.id,
-        ydoc: session.doc,
-        onStatusChange: (status) => {
-          setSyncStatus(status);
-        },
-        onSynced: () => {
-          const blocks = session.getBlocks();
-          if (blocks && blocks.length > 0) {
-            setSelectedDoc((prev) => (prev && prev.id === targetDoc.id ? { ...prev, blocks } : prev));
-            setDocs((prev) => prev.map((d) => (d.id === targetDoc.id ? { ...d, blocks } : d)));
-          }
-        },
-        onAwareness: (payload) => {
-          if (payload && payload.userId && payload.userId !== currentUser?.id) {
-            setActivePeers((prev) => {
-              const filtered = prev.filter((p) => p.userId !== payload.userId);
-              if (payload.activeBlockId !== null) {
-                return [...filtered, { ...payload, color: getCollaboratorColor(payload.userId), lastActive: Date.now() }];
-              }
-              return filtered;
-            });
-          }
-        },
-      });
-      providerRef.current = provider;
-    }
-
-    return () => {
-      flushPendingSave();
-      if (providerRef.current) {
-        providerRef.current.destroy();
-        providerRef.current = null;
-      }
-      if (crdtSessionRef.current) {
-        crdtSessionRef.current.destroy();
-        crdtSessionRef.current = null;
-      }
-    };
-  }, [selectedDoc?.id]);
-
-  // Window blur / visibility change listener: flush any pending metadata save
-  useEffect(() => {
-    const handleWindowBlur = () => {
-      flushPendingSave();
-    };
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'hidden') {
-        flushPendingSave();
-      }
-    };
-    window.addEventListener('blur', handleWindowBlur);
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    return () => {
-      window.removeEventListener('blur', handleWindowBlur);
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, []);
-
-  // Flush pending save before tab closes or unmounts
-  useEffect(() => {
-    const handleBeforeUnload = () => {
-      flushPendingSave();
-    };
-    window.addEventListener('beforeunload', handleBeforeUnload);
-    return () => {
-      window.removeEventListener('beforeunload', handleBeforeUnload);
-      flushPendingSave();
-    };
-  }, []);
-
-  // Dedicated Real-time WebSocket connection for Document, Block Delta, Lock & Folder events
-  useEffect(() => {
-    let isMounted = true;
-
-    const handleWsMsg = (msg: any) => {
-      if (!msg || !msg.event) return;
-
-      if (msg.event === 'CRDT_INIT') {
-        const payload = msg.payload as { docId: string; state?: string; updates?: string[] };
-        if (payload && payload.docId === selectedDocIdRef.current && crdtSessionRef.current) {
-          if (payload.state) {
-            crdtSessionRef.current.applyRemoteUpdate(payload.state);
-          }
-          if (payload.updates && Array.isArray(payload.updates)) {
-            crdtSessionRef.current.applyRemoteUpdates(payload.updates);
-          }
-          const blocks = crdtSessionRef.current.getBlocks();
-          const recentlyEdited = Date.now() - lastLocalEditTimestampRef.current < 2500;
-          const hasPendingSave = pendingSaveDocRef.current !== null || isSavingToBackendRef.current;
-          const hasDirtyBlocks = (localDirtyBlocksRef.current.get(payload.docId)?.size || 0) > 0;
-          if (blocks.length > 0 && !recentlyEdited && !hasPendingSave && !hasDirtyBlocks) {
-            setSelectedDoc((prev) => (prev && prev.id === payload.docId ? { ...prev, blocks } : prev));
-            setDocs((prev) => prev.map((d) => (d.id === payload.docId ? { ...d, blocks } : d)));
-          }
-        }
-      } else if (msg.event === 'CRDT_UPDATE') {
-        const payload = msg.payload as { docId: string; update: string; fromUserId?: string };
-        if (payload && payload.docId === selectedDocIdRef.current && crdtSessionRef.current) {
-          if (payload.fromUserId !== currentUserIdRef.current) {
-            crdtSessionRef.current.applyRemoteUpdate(payload.update);
-            const blocks = crdtSessionRef.current.getBlocks();
-            const recentlyEdited = Date.now() - lastLocalEditTimestampRef.current < 2500;
-            const hasPendingSave = pendingSaveDocRef.current !== null || isSavingToBackendRef.current;
-            const hasDirtyBlocks = (localDirtyBlocksRef.current.get(payload.docId)?.size || 0) > 0;
-            if (blocks && blocks.length > 0 && !recentlyEdited && !hasPendingSave && !hasDirtyBlocks) {
-              setSelectedDoc((prev) => (prev && prev.id === payload.docId ? { ...prev, blocks } : prev));
-              setDocs((prev) => prev.map((d) => (d.id === payload.docId ? { ...d, blocks } : d)));
-            }
-          }
-        }
-      } else if (msg.event === 'CRDT_AWARENESS') {
-        const payload = (msg.payload?.payload || msg.payload) as CollaboratorAwareness;
-        if (payload && payload.userId && payload.userId !== currentUserIdRef.current) {
-          setActivePeers((prev) => {
-            const filtered = prev.filter((c) => c.userId !== payload.userId);
-            return [...filtered, { ...payload, color: getCollaboratorColor(payload.userId), lastActive: Date.now() }];
-          });
-        }
-      } else if (msg.event === 'CRDT_AWARENESS_LEAVE') {
-        const payload = msg.payload as { docId?: string; userId?: string };
-        if (payload && payload.userId) {
-          setActivePeers((prev) => prev.filter((c) => c.userId !== payload.userId));
-        }
-      } else if (msg.event === 'DOC_BLOCKS_PATCHED') {
-        const patch = msg.payload as DocBlocksPatchEvent;
-        if (!patch || !patch.docId) return;
-
-        setDocs((prev) =>
-          prev.map((d) => {
-            if (d.id !== patch.docId) return d;
-            const merged = mergeIncomingBlocks(d.id, d.blocks || [], {
-              upserted: patch.upserted,
-              deletedIds: patch.deletedIds,
-              blockOrder: patch.blockOrder,
-            });
-            return { ...d, blocks: merged, updatedAt: patch.updatedAt || d.updatedAt };
-          })
-        );
-
-        if (selectedDocIdRef.current === patch.docId) {
-          setSelectedDoc((prev) => {
-            if (!prev || prev.id !== patch.docId) return prev;
-            const merged = mergeIncomingBlocks(prev.id, prev.blocks || [], {
-              upserted: patch.upserted,
-              deletedIds: patch.deletedIds,
-              blockOrder: patch.blockOrder,
-            });
-            const nextDoc = { ...prev, blocks: merged, updatedAt: patch.updatedAt || prev.updatedAt };
-            if (pendingSaveDocRef.current && pendingSaveDocRef.current.id === patch.docId) {
-              pendingSaveDocRef.current = { ...pendingSaveDocRef.current, blocks: merged };
-            }
-            return nextDoc;
-          });
-        }
-      } else if (msg.event === 'DOC_CREATED') {
+    const unsub = onWebSocketMessage((msg) => {
+      if (msg.event === 'DOC_CREATED' && msg.payload) {
         const created = msg.payload as Document;
-        if (created && created.id) {
-          recordSyncedDoc(created);
-          setDocs((prev) => (prev.some((d) => d.id === created.id) ? prev : [created, ...prev]));
-          onStatsChangeRef.current();
-        }
-      } else if (msg.event === 'DOC_UPDATED') {
+        setDocs((prev) => (prev.some((d) => d.id === created.id) ? prev : [created, ...prev]));
+      } else if (msg.event === 'DOC_UPDATED' && msg.payload) {
         const updated = msg.payload as Document;
-        if (updated && updated.id) {
-          const incomingOrder = (updated.blocks || []).map((b) => b.id);
-          setDocs((prev) =>
-            prev.map((d) => {
-              if (d.id !== updated.id) return d;
-              const mergedBlocks = mergeIncomingBlocks(d.id, d.blocks || [], {
-                upserted: updated.blocks || [],
-                blockOrder: incomingOrder,
-              });
-              return {
-                ...d,
-                ...updated,
-                blocks: mergedBlocks,
-                isPinned: d.isPinned,
-              };
-            })
-          );
-          if (selectedDocIdRef.current === updated.id) {
-            setSelectedDoc((prev) => {
-              if (!prev || prev.id !== updated.id) return prev;
-              const mergedBlocks = mergeIncomingBlocks(prev.id, prev.blocks || [], {
-                upserted: updated.blocks || [],
-                blockOrder: incomingOrder,
-              });
-              const nextDoc = {
-                ...prev,
-                ...updated,
-                blocks: mergedBlocks,
-                isPinned: prev.isPinned,
-              };
-              if (pendingSaveDocRef.current && pendingSaveDocRef.current.id === updated.id) {
-                pendingSaveDocRef.current = {
-                  ...pendingSaveDocRef.current,
-                  blocks: mergedBlocks,
-                };
-              }
-              return nextDoc;
-            });
-          }
-          onStatsChangeRef.current();
-        }
-      } else if (msg.event === 'DOC_DELETED') {
-        const deletedId = typeof msg.payload === 'string' ? msg.payload : msg.payload?.id;
-        if (deletedId) {
-          setDocs((prev) => prev.filter((d) => d.id !== deletedId));
-          if (selectedDocIdRef.current === deletedId) {
-            setSelectedDoc(null);
-          }
-          onStatsChangeRef.current();
-        }
+        setDocs((prev) => prev.map((d) => (d.id === updated.id ? { ...d, ...updated } : d)));
+      } else if (msg.event === 'DOC_DELETED' && msg.payload?.id) {
+        const delId = msg.payload.id as string;
+        setDocs((prev) => prev.filter((d) => d.id !== delId));
+        setSelectedDocId((prev) => (prev === delId ? null : prev));
       } else if (msg.event === 'WORKSPACE_FOLDERS_UPDATED') {
-        api.getFolders().then(setCustomFolders).catch(() => {});
+        api.getFolders().then(setFolders).catch(() => {});
         api.getSharedFolders().then(setSharedFolders).catch(() => {});
-        api.getDocuments().then((freshList) => {
-          freshList.forEach(recordSyncedDoc);
-          setDocs(freshList);
-          if (selectedDocIdRef.current) {
-            const found = freshList.find((d) => d.id === selectedDocIdRef.current);
-            if (found) {
-              setSelectedDoc((prev) =>
-                prev && prev.id === found.id
-                  ? {
-                      ...prev,
-                      folderPath: found.folderPath,
-                      sharedFolderId: found.sharedFolderId,
-                      subFolderPath: found.subFolderPath,
-                      isSharedFolder: found.isSharedFolder,
-                      permission: found.permission,
-                      isOwner: found.isOwner,
-                    }
-                  : prev
-              );
-            }
-          }
-        }).catch(() => {});
-      }
-    };
-
-    const conn = createRealtimeConnection({
-      docId: selectedDocIdRef.current || undefined,
-      onMessage: handleWsMsg,
-      onStatusChange: (status) => {
-        if (!isMounted) return;
-        setWsConnected(status.connected);
-        setRealtimeTransport(status.transport);
-        if (status.connected) {
-          setWsDisconnectReason(null);
-          if (selectedDocIdRef.current) {
-            conn.send({ event: 'CRDT_JOIN', docId: selectedDocIdRef.current });
-          }
-          api.getFolders().then(setCustomFolders).catch(() => {});
-          api.getSharedFolders().then(setSharedFolders).catch(() => {});
-        } else {
-          setWsDisconnectReason(status.reason || 'Verbindung getrennt');
-        }
-      },
-    });
-    realtimeConnRef.current = conn;
-
-    // Also synchronize with global WebSocket status
-    const unsubGlobalStatus = onWebSocketStatus((connected) => {
-      if (!isMounted) return;
-      if (connected) {
-        setWsConnected(true);
-        setWsDisconnectReason(null);
       }
     });
-
-    // Fallback: also listen for window custom event 'mindsift:ws'
-    const handleGlobalCustomEvent = (e: any) => {
-      if (e.detail) {
-        handleWsMsg(e.detail);
-      }
-    };
-    window.addEventListener('mindsift:ws', handleGlobalCustomEvent);
-
-    return () => {
-      isMounted = false;
-      unsubGlobalStatus();
-      if (realtimeConnRef.current) {
-        try {
-          realtimeConnRef.current.close();
-        } catch {}
-        realtimeConnRef.current = null;
-      }
-      window.removeEventListener('mindsift:ws', handleGlobalCustomEvent);
-    };
+    return unsub;
   }, []);
 
-  // Fallback HTTP polling when WebSocket is disconnected (e.g. corporate proxy / firewall blocking WebSockets)
-  useEffect(() => {
-    if (wsConnected) return;
-
-    let isMounted = true;
-    const pollInterval = setInterval(async () => {
-      if (!isMounted || document.visibilityState !== 'visible') return;
-
-      // 1. Poll document content if not actively typing and document has changed on server
-      const recentlyEdited = Date.now() - lastLocalEditTimestampRef.current < 4000;
-      const hasPendingSave = pendingSaveDocRef.current !== null || isSavingToBackendRef.current;
-      const hasDirtyBlocks = (localDirtyBlocksRef.current.get(selectedDocIdRef.current || '')?.size || 0) > 0;
-      if (
-        selectedDocIdRef.current &&
-        !isEditorFocusedRef.current &&
-        !hasPendingSave &&
-        !hasDirtyBlocks &&
-        !recentlyEdited
-      ) {
-        try {
-          const fresh = await api.getDocument(selectedDocIdRef.current);
-          if (fresh && (!selectedDoc || fresh.updatedAt !== selectedDoc.updatedAt)) {
-            setSelectedDoc(fresh);
-            setDocs((prev) => prev.map((d) => (d.id === fresh.id ? fresh : d)));
-          }
-        } catch {}
-      }
-    }, 4000);
-
-    return () => {
-      isMounted = false;
-      clearInterval(pollInterval);
-    };
-  }, [wsConnected, selectedDoc?.updatedAt]);
-
-  const openShareModal = async () => {
-    if (!selectedDoc) return;
-    setShowShareModal(true);
-    setShareError(null);
-    setSharingLoading(true);
-    setSelectedShareUser(null);
-    setSelectedShareTeamId('');
-    try {
-      const [sharesList, usersList, teamsList] = await Promise.all([
-        api.getDocShares(selectedDoc.id).catch(() => []),
-        api.getUsersDirectory ? api.getUsersDirectory().catch(() => api.getCollaborators().catch(() => [])) : api.getCollaborators().catch(() => []),
-        api.getUserTeams().catch(() => []),
-      ]);
-      setDocShares(sharesList);
-      setCollaborators(usersList);
-      setShareTeams(teamsList);
-    } finally {
-      setSharingLoading(false);
-    }
-  };
-
-  const openFolderShareModal = async (node: FolderTreeItem) => {
-    try {
-      let sf = node.sharedFolder;
-      if (!sf) {
-        sf = await api.createSharedFolder({ name: node.name, mountPath: node.path });
-        const sfList = await api.getSharedFolders();
-        setSharedFolders(sfList);
-      }
-      const [shares, usersList, teamsList] = await Promise.all([
-        api.getFolderShares(sf.id).catch(() => []),
-        api.getUsersDirectory ? api.getUsersDirectory().catch(() => api.getCollaborators().catch(() => [])) : api.getCollaborators().catch(() => []),
-        api.getUserTeams().catch(() => []),
-      ]);
-      setFolderShares(shares);
-      setCollaborators(usersList);
-      setShareTeams(teamsList);
-      setSharingFolder(sf);
-      setShowFolderShareModal(true);
-    } catch (err) {
-      console.error('Failed to open folder share modal', err);
-      alert('Fehler beim Öffnen der Ordnerfreigabe');
-    }
-  };
-
-  const handleAddShare = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!selectedDoc) return;
-    setSharingLoading(true);
-    setShareError(null);
-    try {
-      if (addShareType === 'team') {
-        if (!selectedShareTeamId) {
-          setShareError('Bitte ein Team oder eine Gruppe auswählen');
-          setSharingLoading(false);
-          return;
-        }
-        await api.createDocShare(selectedDoc.id, {
-          teamId: selectedShareTeamId,
-          permission: sharePermission,
-        });
-        setSelectedShareTeamId('');
-      } else {
-        if (!selectedShareUser) {
-          setShareError('Bitte einen bestehenden Benutzer auswählen');
-          setSharingLoading(false);
-          return;
-        }
-        await api.createDocShare(selectedDoc.id, {
-          userId: selectedShareUser.id,
-          permission: sharePermission,
-        });
-        setSelectedShareUser(null);
-      }
-
-      const sharesList = await api.getDocShares(selectedDoc.id).catch(() => []);
-      setDocShares(sharesList);
-      setSelectedDoc((prev) =>
-        prev
-          ? {
-              ...prev,
-              sharedWith: sharesList,
-            }
-          : prev
-      );
-    } catch (err: any) {
-      setShareError(err.message || 'Freigabe konnte nicht erstellt werden');
-    } finally {
-      setSharingLoading(false);
-    }
-  };
-
-  const handleUpdateSharePerm = async (targetUserId: string, newPerm: 'read' | 'write') => {
-    if (!selectedDoc) return;
-    setSharingLoading(true);
-    try {
-      const updated = await api.createDocShare(selectedDoc.id, {
-        userId: targetUserId,
-        permission: newPerm,
-      });
-      setDocShares((prev) => prev.map((s) => (s.userId === targetUserId ? updated : s)));
-      setSelectedDoc((prev) =>
-        prev
-          ? {
-              ...prev,
-              sharedWith: (prev.sharedWith || []).map((s) =>
-                s.userId === targetUserId ? updated : s
-              ),
-            }
-          : prev
-      );
-    } catch (err: any) {
-      setShareError(err.message || 'Berechtigung konnte nicht geändert werden');
-    } finally {
-      setSharingLoading(false);
-    }
-  };
-
-  const handleRemoveShare = async (targetId: string) => {
-    if (!selectedDoc) return;
-    if (!window.confirm('Freigabe wirklich aufheben?')) return;
-    setSharingLoading(true);
-    try {
-      await api.deleteDocShare(selectedDoc.id, targetId);
-      setDocShares((prev) => prev.filter((s) => (s.targetId || s.userId || s.id) !== targetId && s.userId !== targetId));
-      setSelectedDoc((prev) =>
-        prev
-          ? {
-              ...prev,
-              sharedWith: (prev.sharedWith || []).filter((s) => (s.targetId || s.userId || s.id) !== targetId && s.userId !== targetId),
-            }
-          : prev
-      );
-    } catch (err: any) {
-      setShareError(err.message || 'Freigabe konnte nicht entfernt werden');
-    } finally {
-      setSharingLoading(false);
-    }
-  };
-
-  const handleLeaveShare = async () => {
-    if (!selectedDoc || !currentUser) return;
-    const totalBlocks = selectedDoc.blocks?.length || 0;
-    const subpointsCount = (selectedDoc.blocks || []).filter((b) => (b.level || 0) > 0).length;
-    const title = selectedDoc.title || 'Geteilte Notiz';
-
-    let confirmMsg = 'Möchtest du diese freigegebene Notiz wirklich aus deinem Workspace entfernen?';
-    if (totalBlocks > 0 && subpointsCount > 0) {
-      confirmMsg = `Möchtest du die geteilte Notiz "${title}" mit allen ${totalBlocks} Punkten (inklusive ${subpointsCount} Unterpunkten) wirklich aus deinem Workspace entfernen?`;
-    } else if (totalBlocks > 0) {
-      confirmMsg = `Möchtest du die geteilte Notiz "${title}" wirklich aus deinem Workspace entfernen?`;
-    }
-
-    if (!window.confirm(confirmMsg)) return;
-    try {
-      await api.deleteDocument(selectedDoc.id);
-      setShowShareModal(false);
-      const remaining = docs.filter((d) => d.id !== selectedDoc.id);
-      setDocs(remaining);
-      setSelectedDoc(remaining[0] || null);
-      onStatsChange();
-    } catch (err: any) {
-      alert(err.message || 'Konnte Freigabe nicht verlassen');
-    }
-  };
-
-
-  const getDocFolder = (doc: Document): string => {
-    return doc.folderPath || '';
-  };
-
-  // Compute all unique folder paths
-  const allFolderPaths = useMemo(() => {
-    const set = new Set<string>(customFolders);
-    sharedFolders.forEach((sf) => {
-      if (sf.mountPath) {
-        const parts = sf.mountPath.split('/');
-        let cur = '';
-        for (const p of parts) {
-          cur = cur ? `${cur}/${p}` : p;
-          set.add(cur);
-        }
-      }
-    });
-    docs.forEach((doc) => {
-      const f = getDocFolder(doc);
-      if (f) {
-        const parts = f.split('/');
-        let cur = '';
-        for (const p of parts) {
-          cur = cur ? `${cur}/${p}` : p;
-          set.add(cur);
-        }
-      }
-    });
-    return Array.from(set).sort((a, b) => a.localeCompare(b));
-  }, [customFolders, sharedFolders, docs]);
-
-  // Keep folders expanded by default
-  useEffect(() => {
-    setExpandedFolders((prev) => {
-      const next = new Set(prev);
-      allFolderPaths.forEach((p) => next.add(p));
-      return next;
-    });
-  }, [allFolderPaths.join(',')]);
-
-  const handleCreateDoc = async (folderPath?: string | null) => {
-    triggerHaptic(15);
-    const tags = ['notiz'];
-    const path = folderPath || '';
-    const created = await api.createDocument({
-      title: 'Neue Notiz',
-      icon: '📄',
-      folderPath: path,
-      blocks: [
-        {
-          id: `blk_${Date.now()}_1`,
-          type: 'bullet',
-          content: '',
-          level: 0,
-        },
-      ],
-      tags,
-      isPinned: false,
-    });
-
-    await loadDocs(created.id);
-    onStatsChange();
-    setWorkspaceMode('editor');
-  };
-
-  const handleDeleteDoc = async (id: string) => {
-    const docToDelete = docs.find((d) => d.id === id) || (selectedDoc?.id === id ? selectedDoc : null);
-    const title = docToDelete?.title || selectedDoc?.title || 'Notiz';
-    const totalBlocks = docToDelete?.blocks?.length || 0;
-    const subpointsCount = (docToDelete?.blocks || []).filter((b) => (b.level || 0) > 0).length;
-
-    let confirmMsg = `Möchtest du die Notiz "${title}" wirklich löschen?`;
-    if (totalBlocks > 0) {
-      if (subpointsCount > 0) {
-        confirmMsg = `Möchtest du die Notiz "${title}" mit allen ${totalBlocks} Aufzählungspunkten (inklusive ${subpointsCount} Unterpunkten) wirklich unwiderruflich löschen?`;
-      } else {
-        confirmMsg = `Möchtest du die Notiz "${title}" mit allen ${totalBlocks} Aufzählungspunkten wirklich löschen?`;
-      }
-    }
-
-    if (!window.confirm(confirmMsg)) return;
-    triggerHaptic(20);
-    await api.deleteDocument(id);
-    const remaining = docs.filter((d) => d.id !== id);
-    setDocs(remaining);
-    setSelectedDoc(remaining[0] || null);
-    onStatsChange();
-  };
-
-  const handleChangeDocFolder = async (folderPath: string) => {
-    if (!selectedDoc) return;
-    const cleanPath = folderPath.trim();
-    try {
-      const updatedDoc = await api.moveDocument(selectedDoc.id, cleanPath);
-      setDocs((prev) =>
-        prev.map((d) =>
-          d.id === selectedDoc.id
-            ? {
-                ...d,
-                folderPath: updatedDoc.folderPath,
-                sharedFolderId: updatedDoc.sharedFolderId,
-                subFolderPath: updatedDoc.subFolderPath,
-                isSharedFolder: updatedDoc.isSharedFolder,
-              }
-            : d
-        )
-      );
-      setSelectedDoc((prev) =>
-        prev && prev.id === selectedDoc.id
-          ? {
-              ...prev,
-              folderPath: updatedDoc.folderPath,
-              sharedFolderId: updatedDoc.sharedFolderId,
-              subFolderPath: updatedDoc.subFolderPath,
-              isSharedFolder: updatedDoc.isSharedFolder,
-            }
-          : prev
-      );
-      api.getFolders().then(setCustomFolders).catch(() => {});
-    } catch (err: any) {
-      console.error('Failed to change document folder', err);
-      alert(err.message || 'Fehler beim Verschieben der Notiz');
-    }
-  };
-
-  // Global drag cleanup so drag states never get stuck if dragend is lost during re-render
-  useEffect(() => {
-    const handleGlobalDragEnd = () => {
-      setDraggingDocId(null);
-      setDraggingFolderPath(null);
-      setDragOverFolder(null);
-      setDraggingBlockId(null);
-    };
-    window.addEventListener('dragend', handleGlobalDragEnd);
-    window.addEventListener('drop', handleGlobalDragEnd);
-    return () => {
-      window.removeEventListener('dragend', handleGlobalDragEnd);
-      window.removeEventListener('drop', handleGlobalDragEnd);
-    };
-  }, []);
-
-  const handleMoveFolder = async (sourcePath: string, targetParentPath: string) => {
-    const cleanSource = sourcePath.trim();
-    const cleanTarget = targetParentPath.trim();
-
-    // Cannot move to self or into own subfolder
-    if (!cleanSource || cleanSource === cleanTarget || cleanTarget.startsWith(cleanSource + '/')) {
-      return;
-    }
-
-    triggerHaptic(15);
-    try {
-      const res = await api.moveFolder(cleanSource, cleanTarget);
-      await Promise.all([
-        api.getFolders().then(setCustomFolders),
-        api.getSharedFolders().then(setSharedFolders),
-        loadDocs(selectedDoc?.id),
-      ]);
-      setExpandedFolders((prev) => {
-        const next = new Set(prev);
-        if (res.newPath) next.add(res.newPath);
-        if (cleanTarget) next.add(cleanTarget);
-        return next;
-      });
-    } catch (err: any) {
-      console.error('Failed to move folder', err);
-      alert(err.message || 'Fehler beim Verschieben des Ordners');
-    }
-  };
-
-  const handleDropDocToFolder = async (folderPath: string, e: React.DragEvent) => {
-    const docId = e.dataTransfer.getData('application/mindsift-doc-id') || draggingDocId;
-    setDraggingDocId(null);
-    setDragOverFolder(null);
-    if (!docId) return;
-    const doc = docs.find((d) => d.id === docId);
-    if (!doc) return;
-    const cleanPath = folderPath.trim();
-    if (getDocFolder(doc) === cleanPath) return;
-
-    triggerHaptic(15);
-    try {
-      const updatedDoc = await api.moveDocument(doc.id, cleanPath);
-      setDocs((prev) =>
-        prev.map((d) =>
-          d.id === doc.id
-            ? {
-                ...d,
-                folderPath: updatedDoc.folderPath,
-                sharedFolderId: updatedDoc.sharedFolderId,
-                subFolderPath: updatedDoc.subFolderPath,
-                isSharedFolder: updatedDoc.isSharedFolder,
-              }
-            : d
-        )
-      );
-      if (selectedDoc?.id === doc.id) {
-        setSelectedDoc((prev) =>
-          prev
-            ? {
-                ...prev,
-                folderPath: updatedDoc.folderPath,
-                sharedFolderId: updatedDoc.sharedFolderId,
-                subFolderPath: updatedDoc.subFolderPath,
-                isSharedFolder: updatedDoc.isSharedFolder,
-              }
-            : null
-        );
-      }
-      if (cleanPath) {
-        setExpandedFolders((prev) => new Set([...prev, cleanPath]));
-      }
-      api.getFolders().then(setCustomFolders).catch(() => {});
-    } catch (err: any) {
-      console.error('Failed to move doc', err);
-      alert(err.message || 'Fehler beim Verschieben der Notiz');
-    }
-  };
-
-  const handleStartCreateFolder = (parentPath?: string | null) => {
-    setNewFolderParent(parentPath || null);
-    setNewFolderName('');
-    setIsCreatingFolder(true);
-    if (parentPath) {
-      setExpandedFolders((prev) => new Set([...prev, parentPath]));
-    }
-  };
-
-  const handleConfirmCreateFolder = async () => {
-    const trimmed = newFolderName.trim();
-    if (!trimmed) {
-      setIsCreatingFolder(false);
-      return;
-    }
-    const fullPath = newFolderParent ? `${newFolderParent}/${trimmed}` : trimmed;
-    try {
-      await api.createFolder(fullPath);
-      const serverFolders = await api.getFolders();
-      setCustomFolders(serverFolders);
-    } catch (err) {
-      console.error('Failed to create folder on server', err);
-      if (!customFolders.includes(fullPath)) {
-        setCustomFolders((prev) => [...prev, fullPath].sort((a, b) => a.localeCompare(b)));
-      }
-    }
-    setExpandedFolders((prev) => new Set([...prev, fullPath]));
-    setIsCreatingFolder(false);
-    setNewFolderName('');
-    setNewFolderParent(null);
-  };
-
-  const handleDeleteFolder = async (folderPath: string, folderName: string) => {
-    const matchingSF = sharedFolders.find((sf) => sf.mountPath === folderPath);
-    if (matchingSF) {
-      if (matchingSF.isOwner) {
-        if (!window.confirm(`Möchtest du den geteilten Ordner "${folderName}" wirklich löschen? Die Freigabe wird für alle Teilnehmer aufgehoben.`)) {
-          return;
-        }
-      } else {
-        if (!window.confirm(`Möchtest du den geteilten Ordner "${folderName}" aus deinem Workspace entfernen? (Die Quell-Dateien des Eigentümers bleiben erhalten).`)) {
-          return;
-        }
-      }
+  const handleCreateDocument = useCallback(
+    async (folderPath = '') => {
       try {
-        await api.deleteSharedFolder(matchingSF.id);
-        const sfList = await api.getSharedFolders();
-        setSharedFolders(sfList);
-        await loadDocs(selectedDoc?.id);
-        return;
-      } catch (err: any) {
-        console.error('Failed to delete shared folder', err);
-        alert(err.message || 'Fehler beim Löschen des geteilten Ordners');
-        return;
-      }
-    }
-
-    // Find all documents in this folder and subfolders
-    const docsInFolder = docs.filter((d) => {
-      const f = getDocFolder(d);
-      return f === folderPath || f.startsWith(`${folderPath}/`);
-    });
-
-    const confirmMsg =
-      docsInFolder.length > 0
-        ? `Möchtest du den Ordner "${folderName}" wirklich löschen? Alle ${docsInFolder.length} darin enthaltenen Notizen werden unwiderruflich gelöscht!`
-        : `Möchtest du den leeren Ordner "${folderName}" wirklich löschen?`;
-
-    if (!window.confirm(confirmMsg)) return;
-
-    try {
-      const res = await api.deleteFolder(folderPath);
-      const deletedIds = new Set(res.deletedDocIds || docsInFolder.map((d) => d.id));
-
-      const nextDocs = docs.filter((d) => !deletedIds.has(d.id));
-      setDocs(nextDocs);
-
-      if (selectedDoc && deletedIds.has(selectedDoc.id)) {
-        setSelectedDoc(nextDocs.length > 0 ? nextDocs[0] : null);
-      }
-
-      const serverFolders = await api.getFolders();
-      setCustomFolders(serverFolders);
-      onStatsChange();
-    } catch (err) {
-      console.error('Failed to delete folder', err);
-      alert('Fehler beim Löschen des Ordners');
-    }
-  };
-
-  const toggleFolder = (folderPath: string) => {
-    setExpandedFolders((prev) => {
-      const next = new Set(prev);
-      if (next.has(folderPath)) {
-        next.delete(folderPath);
-      } else {
-        next.add(folderPath);
-      }
-      return next;
-    });
-  };
-
-  // ============================================================================
-  // LOGSEQ OUTLINER CORE LOGIC
-  // ============================================================================
-
-  // Zoom-in / Hoisting Calculation
-  const { visibleBlocks, breadcrumbBlocks, zoomedBlock } = useMemo(() => {
-    if (!selectedDoc) return { visibleBlocks: [], breadcrumbBlocks: [], zoomedBlock: null };
-    const all = selectedDoc.blocks;
-
-    if (!zoomedBlockId) {
-      // Normal view: filter out children of collapsed blocks
-      const list: { block: DocumentBlock; originalIndex: number }[] = [];
-      let hideUntilLevel = -1;
-
-      for (let i = 0; i < all.length; i++) {
-        const b = all[i];
-        const lvl = b.level || 0;
-
-        if (hideUntilLevel !== -1) {
-          if (lvl > hideUntilLevel) {
-            continue; // Skip collapsed child
-          } else {
-            hideUntilLevel = -1; // End of collapsed subtree
-          }
-        }
-
-        list.push({ block: b, originalIndex: i });
-
-        if (b.collapsed) {
-          hideUntilLevel = lvl;
-        }
-      }
-
-      return { visibleBlocks: list, breadcrumbBlocks: [], zoomedBlock: null };
-    }
-
-    // Zoomed view: find zoomed block and its descendants
-    const zoomIdx = all.findIndex((b) => b.id === zoomedBlockId);
-    if (zoomIdx === -1) {
-      return { visibleBlocks: [], breadcrumbBlocks: [], zoomedBlock: null };
-    }
-
-    const target = all[zoomIdx];
-    const targetLevel = target.level || 0;
-
-    // Build breadcrumbs: find parents with strictly decreasing levels
-    const crumbs: DocumentBlock[] = [];
-    let curLevel = targetLevel;
-    for (let i = zoomIdx - 1; i >= 0; i--) {
-      const b = all[i];
-      const lvl = b.level || 0;
-      if (lvl < curLevel) {
-        crumbs.unshift(b);
-        curLevel = lvl;
-      }
-    }
-
-    // Descendants of zoomed block (respecting collapsed sub-branches inside the zoomed view)
-    const descendants: { block: DocumentBlock; originalIndex: number }[] = [];
-    let hideUntilLevel = -1;
-    for (let i = zoomIdx + 1; i < all.length; i++) {
-      const b = all[i];
-      const lvl = b.level || 0;
-      if (lvl <= targetLevel) {
-        break;
-      }
-      if (hideUntilLevel !== -1) {
-        if (lvl > hideUntilLevel) {
-          continue;
-        } else {
-          hideUntilLevel = -1;
-        }
-      }
-      descendants.push({ block: b, originalIndex: i });
-      if (b.collapsed) {
-        hideUntilLevel = lvl;
-      }
-    }
-
-    return { visibleBlocks: descendants, breadcrumbBlocks: crumbs, zoomedBlock: target };
-  }, [selectedDoc, zoomedBlockId]);
-
-  // Helper: check if a block has children (i.e. next block has greater level)
-  const hasChildren = (blocks: DocumentBlock[], index: number): boolean => {
-    if (index + 1 >= blocks.length) return false;
-    const currentLevel = blocks[index].level || 0;
-    return (blocks[index + 1].level || 0) > currentLevel;
-  };
-
-  // Zoom into a bullet (or back out to parent/root) and ensure childless bullets get an editable sub-bullet
-  const handleZoomTo = (targetBlockId: string | null) => {
-    if (!selectedDoc) {
-      setZoomedBlockId(targetBlockId);
-      return;
-    }
-
-    let workingBlocks = [...selectedDoc.blocks];
-    let blocksChanged = false;
-
-    // If zooming out/away from a zoomed block whose only descendant is a completely empty bullet, clean it up
-    if (!isReadOnly && zoomedBlock && targetBlockId !== zoomedBlock.id) {
-      const curZoomIdx = workingBlocks.findIndex((b) => b.id === zoomedBlock.id);
-      if (curZoomIdx !== -1) {
-        const curZoomLevel = workingBlocks[curZoomIdx].level || 0;
-        const descIndices: number[] = [];
-        for (let i = curZoomIdx + 1; i < workingBlocks.length; i++) {
-          if ((workingBlocks[i].level || 0) > curZoomLevel) {
-            descIndices.push(i);
-          } else {
-            break;
-          }
-        }
-        if (descIndices.length === 1) {
-          const onlyChild = workingBlocks[descIndices[0]];
-          if (
-            onlyChild.id !== targetBlockId &&
-            onlyChild.type === 'bullet' &&
-            (!onlyChild.content || onlyChild.content.trim() === '')
-          ) {
-            workingBlocks.splice(descIndices[0], 1);
-            blocksChanged = true;
-          }
-        }
-      }
-    }
-
-    if (targetBlockId && !isReadOnly) {
-      const targetIdx = workingBlocks.findIndex((b) => b.id === targetBlockId);
-      if (targetIdx !== -1 && !hasChildren(workingBlocks, targetIdx)) {
-        const childLevel = (workingBlocks[targetIdx].level || 0) + 1;
-        const newChild: DocumentBlock = {
-          id: `blk_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
-          type: 'bullet',
-          content: '',
-          level: childLevel,
-          checked: false,
-        };
-        workingBlocks.splice(targetIdx + 1, 0, newChild);
-        persistDocument({ ...selectedDoc, blocks: workingBlocks });
-        setZoomedBlockId(targetBlockId);
-        setLastFocusedBlockId(newChild.id);
-        setBlockCursor(newChild.id, 0);
-        setTimeout(() => {
-          const el = blockInputRefs.current[newChild.id];
-          if (el) {
-            el.focus();
-            if ('setSelectionRange' in el && typeof (el as any).value === 'string') {
-              (el as any).setSelectionRange(0, 0);
-            }
-          }
-        }, 30);
-        return;
-      }
-    }
-
-    if (blocksChanged) {
-      persistDocument({ ...selectedDoc, blocks: workingBlocks });
-    }
-    setZoomedBlockId(targetBlockId);
-  };
-
-  // Insert a new bullet immediately after index, inheriting level
-  const insertNewBulletAfter = (
-    afterIndex: number,
-    level: number,
-    type: BlockType = 'bullet',
-    initialContent: string = '',
-    updatedCurrentBlock?: { id: string; content: string }
-  ) => {
-    if (isReadOnly || !selectedDoc) return;
-    const newBlock: DocumentBlock = {
-      id: `blk_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
-      type,
-      content: initialContent,
-      level,
-      checked: false,
-    };
-
-    const nextBlocks = selectedDoc.blocks.map((b) =>
-      updatedCurrentBlock && b.id === updatedCurrentBlock.id
-        ? { ...b, content: updatedCurrentBlock.content }
-        : b
-    );
-    nextBlocks.splice(afterIndex + 1, 0, newBlock);
-    lastLocalEditTimestampRef.current = Date.now();
-    persistDocument({ ...selectedDoc, blocks: nextBlocks });
-    focusBlock(newBlock.id, 0);
-  };
-
-  // Indent block (Tab): increase level by 1 and move all descendant sub-bullets along
-  const indentBlock = (index: number) => {
-    if (isReadOnly || !selectedDoc || index === 0) return;
-    const blocks = selectedDoc.blocks;
-    const block = blocks[index];
-    const prevBlock = blocks[index - 1];
-    if (!block || !prevBlock) return;
-    const currentLevel = block.level || 0;
-    const maxLevel = (prevBlock.level || 0) + 1;
-    if (currentLevel >= maxLevel) return;
-
-    // Find all descendant sub-bullets directly or indirectly nested under this block
-    const descendantIndices: number[] = [];
-    for (let i = index + 1; i < blocks.length; i++) {
-      if ((blocks[i].level || 0) <= currentLevel) break;
-      descendantIndices.push(i);
-    }
-
-    const nextBlocks = blocks.map((b, idx) => {
-      if (idx === index) {
-        return { ...b, level: currentLevel + 1 };
-      }
-      if (descendantIndices.includes(idx)) {
-        return { ...b, level: (b.level || 0) + 1 };
-      }
-      return b;
-    });
-
-    persistDocument({ ...selectedDoc, blocks: nextBlocks });
-  };
-
-  // Outdent block (Shift+Tab): decrease level by 1 and move all descendant sub-bullets along
-  const outdentBlock = (blockId: string) => {
-    if (isReadOnly || !selectedDoc) return;
-    const blocks = selectedDoc.blocks;
-    const index = blocks.findIndex((b) => b.id === blockId);
-    if (index === -1) return;
-    const block = blocks[index];
-    const currentLevel = block.level || 0;
-    const minLevel = zoomedBlock ? (zoomedBlock.level || 0) + 1 : 0;
-    if (currentLevel <= minLevel) return;
-
-    // Find all descendant sub-bullets directly or indirectly nested under this block
-    const descendantIndices: number[] = [];
-    for (let i = index + 1; i < blocks.length; i++) {
-      if ((blocks[i].level || 0) <= currentLevel) break;
-      descendantIndices.push(i);
-    }
-
-    const nextBlocks = blocks.map((b, idx) => {
-      if (idx === index) {
-        return { ...b, level: currentLevel - 1 };
-      }
-      if (descendantIndices.includes(idx)) {
-        return { ...b, level: Math.max(minLevel, (b.level || 0) - 1) };
-      }
-      return b;
-    });
-
-    persistDocument({ ...selectedDoc, blocks: nextBlocks });
-  };
-
-  // Delete a single block without deleting its sub-bullets (sub-bullets are promoted 1 level up)
-  const deleteSingleBlock = (blockId: string, focusPrev = true) => {
-    if (isReadOnly || !selectedDoc) return;
-    const blocks = selectedDoc.blocks;
-    const index = blocks.findIndex((b) => b.id === blockId);
-    if (index === -1) return;
-    const targetBlock = blocks[index];
-    const targetLevel = targetBlock.level || 0;
-    const minLevel = zoomedBlock ? (zoomedBlock.level || 0) + 1 : 0;
-
-    // Find all descendant sub-bullets directly or indirectly nested under this block
-    const descendantIndices: number[] = [];
-    for (let i = index + 1; i < blocks.length; i++) {
-      if ((blocks[i].level || 0) <= targetLevel) break;
-      descendantIndices.push(i);
-    }
-
-    triggerHaptic(10);
-
-    // Target block is removed, but descendants are PRESERVED!
-    // Descendants are shifted up by 1 level to adopt the target block's level
-    let nextBlocks: DocumentBlock[] = [];
-    for (let i = 0; i < blocks.length; i++) {
-      if (i === index) continue;
-      if (descendantIndices.includes(i)) {
-        const curLevel = blocks[i].level || 0;
-        nextBlocks.push({
-          ...blocks[i],
-          level: Math.max(minLevel, curLevel - 1),
+        const created = await api.createDocument({
+          title: 'Neue Notiz',
+          icon: '📝',
+          folderPath,
+          blocks: [
+            {
+              id: `blk_${Date.now().toString(36)}_0`,
+              type: 'text',
+              content: '',
+              level: 0,
+              position: 1000,
+            },
+          ],
         });
-      } else {
-        nextBlocks.push(blocks[i]);
-      }
-    }
-
-    if (nextBlocks.length === 0) {
-      nextBlocks = [
-        {
-          id: `blk_${Date.now()}_1`,
-          type: 'bullet',
-          content: '',
-          level: minLevel,
-        },
-      ];
-    }
-
-    let prevBlock: DocumentBlock | undefined;
-    if (focusPrev) {
-      if (zoomedBlock) {
-        const zoomIdx = blocks.findIndex((b) => b.id === zoomedBlock.id);
-        if (index > zoomIdx + 1) {
-          prevBlock = blocks[index - 1];
-        } else {
-          const nextFirstChild = nextBlocks[zoomIdx + 1];
-          if (nextFirstChild && (nextFirstChild.level || 0) > (zoomedBlock.level || 0)) {
-            prevBlock = nextFirstChild;
-          }
+        setDocs((prev) => [created, ...prev]);
+        setSelectedDocId(created.id);
+        setSubView('editor');
+        setMobileShowDetail(true);
+        if (folderPath) {
+          setExpandedFolders((prev) => ({ ...prev, [folderPath]: true }));
         }
-      } else {
-        prevBlock = index > 0 ? blocks[index - 1] : nextBlocks[0];
-      }
-    }
-
-    persistDocument({ ...selectedDoc, blocks: nextBlocks });
-
-    if (prevBlock) {
-      setLastFocusedBlockId(prevBlock.id);
-      setBlockCursor(prevBlock.id, (prevBlock.content || '').length);
-      setTimeout(() => {
-        const el = blockInputRefs.current[prevBlock.id];
-        if (el) {
-          el.focus();
-          if ('setSelectionRange' in el && typeof el.value === 'string') {
-            el.setSelectionRange(el.value.length, el.value.length);
-          }
-        }
-      }, 30);
-    }
-  };
-
-  // Delete a block AND all its descendant sub-bullets
-  const deleteBlockWithDescendants = (blockId: string) => {
-    if (isReadOnly || !selectedDoc) return;
-    const blocks = selectedDoc.blocks;
-    const index = blocks.findIndex((b) => b.id === blockId);
-    if (index === -1) return;
-    const targetBlock = blocks[index];
-    const targetLevel = targetBlock.level || 0;
-    const minLevel = zoomedBlock ? (zoomedBlock.level || 0) + 1 : 0;
-
-    const descendantIds: string[] = [];
-    for (let i = index + 1; i < blocks.length; i++) {
-      if ((blocks[i].level || 0) <= targetLevel) break;
-      descendantIds.push(blocks[i].id);
-    }
-
-    triggerHaptic(15);
-    const idsToDelete = new Set([blockId, ...descendantIds]);
-    let nextBlocks = blocks.filter((b) => !idsToDelete.has(b.id));
-
-    if (nextBlocks.length === 0) {
-      nextBlocks = [
-        {
-          id: `blk_${Date.now()}_1`,
-          type: 'bullet',
-          content: '',
-          level: minLevel,
-        },
-      ];
-    }
-
-    let prevBlock: DocumentBlock | undefined;
-    if (zoomedBlock) {
-      const zoomIdx = blocks.findIndex((b) => b.id === zoomedBlock.id);
-      if (index > zoomIdx + 1) {
-        prevBlock = blocks[index - 1];
-      } else {
-        const nextFirstChild = nextBlocks[zoomIdx + 1];
-        if (nextFirstChild && (nextFirstChild.level || 0) > (zoomedBlock.level || 0)) {
-          prevBlock = nextFirstChild;
-        }
-      }
-    } else {
-      prevBlock = index > 0 ? blocks[index - 1] : nextBlocks[0];
-    }
-
-    persistDocument({ ...selectedDoc, blocks: nextBlocks });
-
-    if (prevBlock) {
-      setLastFocusedBlockId(prevBlock.id);
-      setBlockCursor(prevBlock.id, (prevBlock.content || '').length);
-      setTimeout(() => {
-        const el = blockInputRefs.current[prevBlock.id];
-        if (el) {
-          el.focus();
-          if ('setSelectionRange' in el && typeof el.value === 'string') {
-            el.setSelectionRange(el.value.length, el.value.length);
-          }
-        }
-      }, 30);
-    }
-  };
-
-  // Handler for delete click on the X icon: prompts if sub-bullets exist
-  const handleDeleteButtonClick = (blockId: string) => {
-    if (isReadOnly || !selectedDoc) return;
-    const blocks = selectedDoc.blocks;
-    const index = blocks.findIndex((b) => b.id === blockId);
-    if (index === -1) return;
-    const targetBlock = blocks[index];
-    const targetLevel = targetBlock.level || 0;
-
-    let count = 0;
-    for (let i = index + 1; i < blocks.length; i++) {
-      if ((blocks[i].level || 0) <= targetLevel) break;
-      count++;
-    }
-
-    if (count > 0) {
-      setDeleteSubpointsModal({
-        blockId,
-        count,
-        snippet: targetBlock.content?.trim() ? `"${targetBlock.content.trim().slice(0, 35)}..."` : '',
-      });
-    } else {
-      deleteSingleBlock(blockId, false);
-    }
-  };
-
-  const updateBlock = (blockId: string, patch: Partial<DocumentBlock>) => {
-    if (isReadOnly || !selectedDoc) return;
-    const nextBlocks = selectedDoc.blocks.map((b) =>
-      b.id === blockId ? { ...b, ...patch } : b
-    );
-    persistDocument({ ...selectedDoc, blocks: nextBlocks });
-  };
-
-  const toggleCollapse = (blockId: string) => {
-    if (!selectedDoc) return;
-    const block = selectedDoc.blocks.find((b) => b.id === blockId);
-    if (block) {
-      updateBlock(blockId, { collapsed: !block.collapsed });
-    }
-  };
-
-  useLayoutEffect(() => {
-    if (!activeEditingBlockId) return;
-    const el = blockInputRefs.current[activeEditingBlockId];
-    if (!el) return;
-    if (el instanceof HTMLTextAreaElement) {
-      autoResizeTextarea(el);
-    }
-    // Only programmatically adjust selection if the element is NOT already the actively focused element!
-    if (document.activeElement !== el && 'setSelectionRange' in el && typeof el.value === 'string') {
-      const segStartAttr = el.getAttribute('data-seg-start');
-      const segStart = segStartAttr !== null ? parseInt(segStartAttr, 10) || 0 : 0;
-      const desiredOffset = activeCursorOffsetRef.current;
-      const localPos = Math.max(0, Math.min(el.value.length, desiredOffset - segStart));
-      el.focus();
-      try {
-        el.setSelectionRange(localPos, localPos);
+        onStatsChange();
       } catch {
-        // Ignore selection range errors on unsupported inputs
+        // ignore
       }
-    }
-  }, [activeEditingBlockId]);
-
-  // Keyboard Navigation: Enter, Shift+Enter, Tab, Shift+Tab, Backspace, / Slash Commands
-  const handleKeyDown = (
-    e: React.KeyboardEvent,
-    block: DocumentBlock,
-    index: number,
-    segStart = 0
-  ) => {
-    if (isReadOnly) return;
-
-    if (slashBlockId === block.id) {
-      if (filteredSlashCommands.length === 0) {
-        if (e.key === 'Escape') {
-          setSlashBlockId(null);
-        }
-        return;
-      }
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        setSlashSelectedIndex((prev) => (prev + 1) % filteredSlashCommands.length);
-        return;
-      }
-      if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        setSlashSelectedIndex((prev) =>
-          prev === 0 ? filteredSlashCommands.length - 1 : prev - 1
-        );
-        return;
-      }
-      if (e.key === 'Enter' || e.key === 'Tab') {
-        e.preventDefault();
-        const selected = filteredSlashCommands[slashSelectedIndex];
-        if (selected) {
-          applySlashCommand(block.id, selected);
-        }
-        return;
-      }
-      if (e.key === 'Escape') {
-        setSlashBlockId(null);
-        return;
-      }
-    }
-
-    if (e.key === 'Enter' && e.shiftKey) {
-      // Shift+Enter: insert a newline within the current bullet point
-      if (block.type === 'bullet' || block.type === 'paragraph' || block.type === 'todo') {
-        e.preventDefault();
-        setSlashBlockId(null);
-        const target = e.target as HTMLTextAreaElement | HTMLInputElement;
-        const localPos =
-          target && typeof target.selectionStart === 'number'
-            ? target.selectionStart
-            : (target?.value || '').length;
-        const cursor = segStart + localPos;
-        const fullContent = block.content || '';
-        const nextContent = fullContent.slice(0, cursor) + '\n' + fullContent.slice(cursor);
-        const nextCursor = cursor + 1;
-        setBlockCursor(block.id, nextCursor);
-        updateBlock(block.id, { content: nextContent });
-        if (target instanceof HTMLTextAreaElement) {
-          setTimeout(() => autoResizeTextarea(target), 0);
-        }
-      }
-      return;
-    }
-
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      setSlashBlockId(null);
-      const target = e.target as HTMLTextAreaElement | HTMLInputElement;
-      const fullContent = block.content || '';
-      let afterContent = '';
-      let updatedCurrent: { id: string; content: string } | undefined = undefined;
-
-      if (target && typeof target.selectionStart === 'number') {
-        const cursor = segStart + target.selectionStart;
-        const before = fullContent.slice(0, cursor);
-        const after = fullContent.slice(cursor);
-        if (after.length > 0) {
-          updatedCurrent = { id: block.id, content: before };
-          afterContent = after;
-        }
-      } else if (fullContent.endsWith('\n')) {
-        const trimmedTrailing = fullContent.replace(/\n+$/, '');
-        if (trimmedTrailing !== fullContent) {
-          updatedCurrent = { id: block.id, content: trimmedTrailing };
-        }
-      }
-
-      insertNewBulletAfter(
-        index,
-        block.level || 0,
-        block.type === 'todo' ? 'todo' : 'bullet',
-        afterContent,
-        updatedCurrent
-      );
-      return;
-    } else if (e.key === 'Tab') {
-      e.preventDefault();
-      if (e.shiftKey) {
-        outdentBlock(block.id);
-      } else {
-        indentBlock(index);
-      }
-    } else if (e.key === 'Backspace') {
-      const target = e.target as HTMLTextAreaElement | HTMLInputElement;
-      const fullContent = block.content || '';
-      if (!fullContent || fullContent === '') {
-        e.preventDefault();
-        setSlashBlockId(null);
-        deleteSingleBlock(block.id, true);
-        return;
-      } else if (
-        target &&
-        target.selectionStart === 0 &&
-        target.selectionEnd === 0
-      ) {
-        e.preventDefault();
-        if ((block.level || 0) > 0) {
-          outdentBlock(block.id);
-          return;
-        }
-        if (selectedDoc && index > 0) {
-          const prevBlock = selectedDoc.blocks[index - 1];
-          if (prevBlock && prevBlock.type !== 'divider') {
-            const prevLen = (prevBlock.content || '').length;
-            const mergedContent = (prevBlock.content || '') + fullContent;
-            const nextBlocks = selectedDoc.blocks
-              .map((b) => (b.id === prevBlock.id ? { ...b, content: mergedContent } : b))
-              .filter((b) => b.id !== block.id);
-            persistDocument({ ...selectedDoc, blocks: nextBlocks }, true);
-            focusBlock(prevBlock.id, prevLen);
-          }
-        }
-      }
-    } else if (!e.shiftKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
-      const target = e.target as HTMLTextAreaElement | HTMLInputElement;
-      const fullContent = block.content || '';
-      if (target && typeof target.selectionStart === 'number') {
-        const cursor = target.selectionStart;
-        if (e.key === 'ArrowUp') {
-          const firstNewline = fullContent.indexOf('\n');
-          if (firstNewline === -1 || cursor <= firstNewline) {
-            if (index > 0 && selectedDoc) {
-              const prev = selectedDoc.blocks[index - 1];
-              if (prev) {
-                e.preventDefault();
-                focusBlock(prev.id);
-                return;
-              }
-            }
-          }
-        } else if (e.key === 'ArrowDown') {
-          const lastNewline = fullContent.lastIndexOf('\n');
-          if (lastNewline === -1 || cursor > lastNewline) {
-            if (selectedDoc && index < selectedDoc.blocks.length - 1) {
-              const next = selectedDoc.blocks[index + 1];
-              if (next) {
-                e.preventDefault();
-                focusBlock(next.id, 0);
-                return;
-              }
-            }
-          }
-        }
-      }
-    } else if (e.key === 'Escape') {
-      setSlashBlockId(null);
-      setActiveEditingBlockId(null);
-      (e.target as HTMLElement)?.blur();
-    }
-  };
-
-  const handleContentChange = (block: DocumentBlock, newContent: string) => {
-    if (isReadOnly) return;
-
-    // Markdown shortcut: typing '---' creates a divider and inserts a new bullet below
-    if (newContent.trim() === '---') {
-      const blkIdx = selectedDoc ? selectedDoc.blocks.findIndex((b) => b.id === block.id) : -1;
-      if (selectedDoc && blkIdx !== -1) {
-        const curLevel = block.level || 0;
-        const newBlockId = `blk_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
-        const newBullet: DocumentBlock = {
-          id: newBlockId,
-          type: 'bullet',
-          content: '',
-          level: curLevel,
-          checked: false,
-        };
-        const nextBlocks = [...selectedDoc.blocks];
-        nextBlocks[blkIdx] = {
-          ...block,
-          type: 'divider',
-          content: '',
-        };
-        nextBlocks.splice(blkIdx + 1, 0, newBullet);
-        persistDocument({ ...selectedDoc, blocks: nextBlocks });
-        setSlashBlockId(null);
-        focusBlock(newBlockId);
-        return;
-      }
-    }
-
-    updateBlock(block.id, { content: newContent });
-
-    // Check if user just typed '/'
-    if (newContent.endsWith('/') || newContent.includes('/')) {
-      const match = newContent.match(/\/([a-z0-9]*)$/i);
-      if (match) {
-        setSlashBlockId(block.id);
-        setSlashSearch(match[1]);
-        setSlashSelectedIndex(0);
-        return;
-      }
-    }
-    if (slashBlockId === block.id) {
-      setSlashBlockId(null);
-    }
-  };
-
-  const filteredSlashCommands = useMemo(() => {
-    if (!slashSearch) return SLASH_COMMANDS;
-    const q = slashSearch.toLowerCase();
-    return SLASH_COMMANDS.filter(
-      (c) => c.label.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q)
-    );
-  }, [slashSearch]);
+    },
+    [onStatsChange]
+  );
 
+  // Register mobile FAB actions
   useEffect(() => {
-    if (slashBlockId && slashMenuRef.current) {
-      const container = slashMenuRef.current;
-      const activeBtn = container.querySelector<HTMLElement>(
-        `[data-slash-index="${slashSelectedIndex}"]`
-      );
-      if (activeBtn) {
-        const itemTop = activeBtn.offsetTop;
-        const itemBottom = itemTop + activeBtn.offsetHeight;
-        const containerTop = container.scrollTop;
-        const containerBottom = containerTop + container.clientHeight;
-
-        if (itemTop < containerTop) {
-          container.scrollTop = itemTop;
-        } else if (itemBottom > containerBottom) {
-          container.scrollTop = itemBottom - container.clientHeight;
-        }
-      }
-    }
-  }, [slashSelectedIndex, slashBlockId]);
-
-  const focusBlock = (blockId: string, customOffset?: number) => {
-    setLastFocusedBlockId(blockId);
-    const blk = selectedDoc?.blocks.find((b) => b.id === blockId);
-    const targetOffset = customOffset !== undefined ? customOffset : (blk?.content || '').length;
-    setBlockCursor(blockId, targetOffset);
-
-    const tryFocus = () => {
-      const el = blockInputRefs.current[blockId];
-      if (el) {
-        if (el instanceof HTMLTextAreaElement) {
-          autoResizeTextarea(el);
-        }
-        el.focus();
-        if ('setSelectionRange' in el && typeof (el as any).value === 'string') {
-          const segStartAttr = el.getAttribute('data-seg-start');
-          const segStart = segStartAttr !== null ? parseInt(segStartAttr, 10) || 0 : 0;
-          const len = (el as any).value.length;
-          const localPos = Math.max(0, Math.min(len, targetOffset - segStart));
-          (el as any).setSelectionRange(localPos, localPos);
-        }
-        return true;
-      }
-      return false;
-    };
-
-    setTimeout(() => {
-      if (!tryFocus()) {
-        setTimeout(tryFocus, 30);
-      }
-    }, 20);
-  };
-
-  const handleCanvasBottomClick = () => {
-    if (isReadOnly || !selectedDoc) return;
-
-    if (zoomedBlock) {
-      const zoomIdx = selectedDoc.blocks.findIndex((b) => b.id === zoomedBlock.id);
-      if (zoomIdx === -1) return;
-      const minChildLevel = (zoomedBlock.level || 0) + 1;
-
-      let lastDescendantIndex = zoomIdx;
-      for (let i = zoomIdx + 1; i < selectedDoc.blocks.length; i++) {
-        if ((selectedDoc.blocks[i].level || 0) >= minChildLevel) {
-          lastDescendantIndex = i;
-        } else {
-          break;
-        }
-      }
-
-      if (lastDescendantIndex === zoomIdx) {
-        insertNewBulletAfter(zoomIdx, minChildLevel);
-        return;
-      }
-
-      const lastVisible = visibleBlocks[visibleBlocks.length - 1];
-      if (
-        lastVisible &&
-        lastVisible.block.type !== 'divider' &&
-        (!lastVisible.block.content || lastVisible.block.content.trim() === '')
-      ) {
-        focusBlock(lastVisible.block.id);
-      } else {
-        insertNewBulletAfter(lastDescendantIndex, minChildLevel);
-      }
-      return;
-    }
-
-    if (selectedDoc.blocks.length === 0) {
-      insertNewBulletAfter(-1, 0);
-      return;
-    }
-    const lastIndex = selectedDoc.blocks.length - 1;
-    const lastBlock = selectedDoc.blocks[lastIndex];
-    if (lastBlock && lastBlock.type !== 'divider' && (!lastBlock.content || lastBlock.content.trim() === '')) {
-      focusBlock(lastBlock.id);
-    } else {
-      insertNewBulletAfter(lastIndex, 0);
-    }
-  };
-
-  const applySlashCommand = (blockId: string, cmd: SlashCommandItem) => {
-    if (isReadOnly || !selectedDoc) return;
-    const block = selectedDoc.blocks.find((b) => b.id === blockId);
-    if (!block) return;
-    const cleanContent = block.content.replace(/\/([a-z0-9]*)$/i, '').trim();
-
-    setSlashBlockId(null);
-    setSlashSearch('');
-
-    if (cmd.action) {
-      updateBlock(blockId, { content: cleanContent });
-      setEditingLinkOriginalRaw(null);
-      setLinkModalBlockId(blockId);
-      setLinkModalTab(cmd.action === 'insert_weblink' ? 'web' : 'note');
-      setLinkSearchQuery('');
-      setLinkWebTitle('');
-      setLinkWebUrl('');
-      return;
-    }
-
-    if (cmd.type) {
-      if (cmd.type === 'divider') {
-        const blkIdx = selectedDoc.blocks.findIndex((b) => b.id === blockId);
-        const curLevel = block.level || 0;
-        const newBlockId = `blk_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
-        const newBullet: DocumentBlock = {
-          id: newBlockId,
-          type: 'bullet',
-          content: '',
-          level: curLevel,
-          checked: false,
-        };
-        const nextBlocks = [...selectedDoc.blocks];
-        nextBlocks[blkIdx] = {
-          ...block,
-          type: 'divider',
-          content: '',
-        };
-        nextBlocks.splice(blkIdx + 1, 0, newBullet);
-        persistDocument({ ...selectedDoc, blocks: nextBlocks });
-        focusBlock(newBlockId);
-        return;
-      }
-
-      updateBlock(blockId, {
-        type: cmd.type,
-        content: cleanContent,
-        checked: cmd.type === 'todo' ? false : undefined,
-        lang: cmd.type === 'code' ? (block.lang || 'javascript') : block.lang,
-      });
-      focusBlock(blockId);
-    }
-  };
-
-  const handleInsertNoteLink = (docTitle: string) => {
-    if (!linkModalBlockId || !selectedDoc) return;
-    const targetBlockId = linkModalBlockId;
-    const block = selectedDoc.blocks.find((b) => b.id === targetBlockId);
-    let nextCursor = 0;
-    if (block) {
-      let newContent: string;
-      if (editingLinkOriginalRaw && block.content.includes(editingLinkOriginalRaw)) {
-        newContent = block.content.replace(editingLinkOriginalRaw, `[[${docTitle}]]`);
-        if (!newContent.endsWith(' ')) newContent += ' ';
-      } else {
-        const base = block.content || '';
-        const space = base.length > 0 && !base.endsWith(' ') ? ' ' : '';
-        newContent = `${base}${space}[[${docTitle}]] `;
-      }
-      nextCursor = newContent.length;
-      updateBlock(targetBlockId, { content: newContent });
-    }
-    setLinkModalBlockId(null);
-    setEditingLinkOriginalRaw(null);
-    focusBlock(targetBlockId, nextCursor);
-  };
-
-  const handleInsertWebLink = () => {
-    if (!linkModalBlockId || !selectedDoc) return;
-    const targetBlockId = linkModalBlockId;
-    const block = selectedDoc.blocks.find((b) => b.id === targetBlockId);
-    let title = linkWebTitle.trim();
-    let url = linkWebUrl.trim();
-    if (!url) return;
-    if (!/^https?:\/\//i.test(url)) {
-      url = `https://${url}`;
-    }
-    if (!title) {
-      try {
-        title = new URL(url).hostname;
-      } catch {
-        title = url;
-      }
-    }
-    let nextCursor = 0;
-    if (block) {
-      let newContent: string;
-      if (editingLinkOriginalRaw && block.content.includes(editingLinkOriginalRaw)) {
-        newContent = block.content.replace(editingLinkOriginalRaw, `[${title}](${url})`);
-        if (!newContent.endsWith(' ')) newContent += ' ';
-      } else {
-        const base = block.content || '';
-        const space = base.length > 0 && !base.endsWith(' ') ? ' ' : '';
-        newContent = `${base}${space}[${title}](${url}) `;
-      }
-      nextCursor = newContent.length;
-      updateBlock(targetBlockId, { content: newContent });
-    }
-    setLinkModalBlockId(null);
-    setEditingLinkOriginalRaw(null);
-    setLinkWebTitle('');
-    setLinkWebUrl('');
-    focusBlock(targetBlockId, nextCursor);
-  };
-
-  const getDirectChildTodos = (blocks: DocumentBlock[], parentIndex: number): DocumentBlock[] => {
-    const parent = blocks[parentIndex];
-    if (!parent) return [];
-    const parentLevel = parent.level || 0;
-    const childTodos: DocumentBlock[] = [];
-    for (let i = parentIndex + 1; i < blocks.length; i++) {
-      const cur = blocks[i];
-      const curLevel = cur.level || 0;
-      if (curLevel <= parentLevel) break;
-      if (cur.type === 'todo') {
-        childTodos.push(cur);
-      }
-    }
-    return childTodos;
-  };
-
-  // Helper: Get subtree count (root + all indented children)
-  const getBlockSubtreeCount = (blocks: DocumentBlock[], startIndex: number): number => {
-    if (startIndex < 0 || startIndex >= blocks.length) return 0;
-    const rootLevel = blocks[startIndex].level || 0;
-    let count = 1;
-    for (let i = startIndex + 1; i < blocks.length; i++) {
-      if ((blocks[i].level || 0) > rootLevel) {
-        count++;
-      } else {
-        break;
-      }
-    }
-    return count;
-  };
-
-  // Helper: Check if target block is a descendant of source block
-  const isDescendantBlock = (blocks: DocumentBlock[], sourceIdx: number, targetBlockId: string): boolean => {
-    if (sourceIdx < 0 || sourceIdx >= blocks.length) return false;
-    const subtreeCount = getBlockSubtreeCount(blocks, sourceIdx);
-    for (let i = sourceIdx; i < sourceIdx + subtreeCount; i++) {
-      if (blocks[i]?.id === targetBlockId) return true;
-    }
-    return false;
-  };
-
-  // Drag & Drop Handlers on the Bullet row / Grip / Dot
-  const handleBlockDragStart = (e: React.DragEvent, blockId: string) => {
-    e.stopPropagation();
-    if (isReadOnly) {
-      e.preventDefault();
-      return;
-    }
-    isDraggingBlockRef.current = true;
-
-    e.dataTransfer.setData('application/mindsift-block-id', blockId);
-    e.dataTransfer.setData('text/plain', blockId);
-    e.dataTransfer.effectAllowed = 'move';
-    setDraggingBlockId(blockId);
-  };
-
-  const handleBlockDragEnd = () => {
-    isDraggingBlockRef.current = false;
-    setDraggingBlockId(null);
-    setDragOverBlockTarget(null);
-  };
-
-  const handleBlockDragOver = (e: React.DragEvent, targetBlockId: string) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!draggingBlockId || draggingBlockId === targetBlockId) return;
-
-    const rect = e.currentTarget.getBoundingClientRect();
-    const relY = e.clientY - rect.top;
-    const height = rect.height;
-
-    let position: 'before' | 'after' | 'inside';
-    if (relY < height * 0.25) {
-      position = 'before';
-    } else if (relY > height * 0.75) {
-      position = 'after';
-    } else {
-      position = 'inside';
-    }
-
-    if (
-      !dragOverBlockTarget ||
-      dragOverBlockTarget.blockId !== targetBlockId ||
-      dragOverBlockTarget.position !== position
-    ) {
-      setDragOverBlockTarget({ blockId: targetBlockId, position });
-    }
-  };
-
-  const handleBlockDragLeave = (e: React.DragEvent, targetBlockId: string) => {
-    e.stopPropagation();
-    if (dragOverBlockTarget?.blockId === targetBlockId) {
-      setDragOverBlockTarget(null);
-    }
-  };
-
-  const handleBlockDrop = (e: React.DragEvent, targetBlockId: string, explicitPosition?: 'before' | 'after' | 'inside') => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const sourceId =
-      e.dataTransfer.getData('application/mindsift-block-id') ||
-      e.dataTransfer.getData('text/plain') ||
-      draggingBlockId;
-
-    const position = explicitPosition || dragOverBlockTarget?.position || 'after';
-    isDraggingBlockRef.current = false;
-    setDraggingBlockId(null);
-    setDragOverBlockTarget(null);
-
-    if (!selectedDoc || !sourceId || sourceId === targetBlockId) {
-      return;
-    }
-
-    const blocks = [...selectedDoc.blocks];
-    const sourceIdx = blocks.findIndex((b) => b.id === sourceId);
-    if (sourceIdx === -1) return;
-
-    // Prevent circular drag into one's own children
-    if (isDescendantBlock(blocks, sourceIdx, targetBlockId)) {
-      return;
-    }
-
-    // Extract the entire subtree (parent + all indented children)
-    const subtreeCount = getBlockSubtreeCount(blocks, sourceIdx);
-    const subtree = blocks.splice(sourceIdx, subtreeCount);
-
-    // Find new index of target block after splice
-    const newTargetIdx = blocks.findIndex((b) => b.id === targetBlockId);
-    if (newTargetIdx === -1) return;
-
-    const targetBlock = blocks[newTargetIdx];
-
-    if (position === 'inside') {
-      // Nest directly under targetBlock as its sub-bullet
-      const targetLevel = (targetBlock.level || 0) + 1;
-      const oldRootLevel = subtree[0].level || 0;
-      const levelDiff = targetLevel - oldRootLevel;
-
-      for (const b of subtree) {
-        b.level = Math.max(0, (b.level || 0) + levelDiff);
-      }
-
-      // Automatically uncollapse targetBlock so the newly added sub-bullet is visible
-      if (targetBlock.collapsed) {
-        blocks[newTargetIdx] = { ...targetBlock, collapsed: false };
-      }
-
-      // Insert immediately below targetBlock
-      blocks.splice(newTargetIdx + 1, 0, ...subtree);
-    } else {
-      const targetLevel = targetBlock.level || 0;
-      const oldRootLevel = subtree[0].level || 0;
-      const levelDiff = targetLevel - oldRootLevel;
-
-      // Adjust levels of all blocks in subtree to match target hierarchy
-      for (const b of subtree) {
-        b.level = Math.max(0, (b.level || 0) + levelDiff);
-      }
-
-      // Calculate insertion index
-      let insertIdx = newTargetIdx;
-      if (position === 'after') {
-        const targetSubtreeCount = getBlockSubtreeCount(blocks, newTargetIdx);
-        insertIdx = newTargetIdx + targetSubtreeCount;
-      }
-
-      blocks.splice(insertIdx, 0, ...subtree);
-    }
-
-    persistDocument({ ...selectedDoc, blocks }, true);
-  };
-
-  // Export full document as portable Logseq-indented Markdown
-  const handleExportMarkdown = () => {
-    if (!selectedDoc) return;
-    const lines: string[] = [`# ${selectedDoc.icon} ${selectedDoc.title}`, ''];
-    for (const b of selectedDoc.blocks) {
-      const indent = '  '.repeat(b.level || 0);
-      switch (b.type) {
-        case 'h1':
-          lines.push(`${indent}- # ${b.content}`);
-          break;
-        case 'h2':
-          lines.push(`${indent}- ## ${b.content}`);
-          break;
-        case 'h3':
-          lines.push(`${indent}- ### ${b.content}`);
-          break;
-        case 'todo':
-          lines.push(`${indent}- [${b.checked ? 'x' : ' '}] ${b.content}`);
-          break;
-        case 'callout':
-          lines.push(`${indent}- > 💡 ${b.content}`);
-          break;
-        case 'code':
-          lines.push(`${indent}- \`\`\`${b.lang || ''}\n${indent}  ${b.content}\n${indent}  \`\`\``);
-          break;
-        case 'table':
-        case 'bullet':
-        case 'paragraph':
-        default:
-          lines.push(`${indent}- ${b.content}`);
-      }
-    }
-
-    const blob = new Blob([lines.join('\n')], { type: 'text/markdown;charset=utf-8' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${selectedDoc.title.toLowerCase().replace(/[^a-z0-9äöüß]+/g, '-')}.md`;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-
-  const findRichTokens = (text: string): { start: number; end: number; raw: string }[] => {
-    if (!text) return [];
-    const regex = /(\[\[[^\]]+\]\]|\[[^\]]*\]\(https?:\/\/[^\s)]+\)|#[a-zA-Z0-9äöüÄÖÜß_-]+)/g;
-    const tokens: { start: number; end: number; raw: string }[] = [];
-    let match: RegExpExecArray | null;
-    while ((match = regex.exec(text)) !== null) {
-      tokens.push({
-        start: match.index,
-        end: match.index + match[0].length,
-        raw: match[0],
-      });
-    }
-    return tokens;
-  };
-
-  const renderSingleRichToken = (part: string, blockId: string | undefined, key: React.Key) => {
-    if (part.startsWith('[[') && part.endsWith(']]')) {
-      const linkTitle = part.slice(2, -2).trim();
-      const target = docs.find((d) => d.title.toLowerCase() === linkTitle.toLowerCase());
-      return (
-        <span
-          key={key}
-          className={`inline-flex items-center gap-1 px-1.5 py-0.5 mx-0.5 border text-xs font-medium rounded-btn transition-colors align-baseline ${
-            target
-              ? 'bg-accent/20 border-accent/40 text-accent hover:bg-accent/30'
-              : 'badge-neutral hover:text-main'
-          }`}
-        >
-          <span
-            onClick={(e) => {
-              e.stopPropagation();
-              if (target) {
-                setSelectedDoc(target);
-                setZoomedBlockId(null);
-                setWorkspaceMode('editor');
-              }
-            }}
-            className="inline-flex items-center gap-1 cursor-pointer"
-            title={target ? `Öffne: ${target.title}` : `Dokument "${linkTitle}" existiert noch nicht`}
-          >
-            <span>📄</span>
-            <span>{linkTitle}</span>
-            <ExternalLink className="w-2.5 h-2.5 opacity-60" />
-          </span>
-          {!isReadOnly && blockId && (
-            <button
-              type="button"
-              onMouseDown={(e) => e.preventDefault()}
-              onClick={(e) => {
-                e.stopPropagation();
-                setEditingLinkOriginalRaw(part);
-                setLinkModalBlockId(blockId);
-                setLinkModalTab('note');
-                setLinkSearchQuery(linkTitle);
-              }}
-              className="ml-0.5 p-0.5 rounded hover:bg-black/10 dark:hover:bg-white/10 opacity-60 hover:opacity-100 transition-opacity cursor-pointer"
-              title="Notiz-Link bearbeiten"
-            >
-              <Edit3 className="w-2.5 h-2.5" />
-            </button>
-          )}
-        </span>
-      );
-    }
-
-    const webMatch = part.match(/^\[(.*?)\]\((https?:\/\/[^\s)]+)\)$/);
-    if (webMatch) {
-      const title = webMatch[1] || webMatch[2];
-      const url = webMatch[2];
-      return (
-        <span
-          key={key}
-          className="inline-flex items-center gap-1 px-1.5 py-0.5 mx-0.5 bg-sky-500/10 border border-sky-500/30 text-sky-500 dark:text-sky-400 hover:bg-sky-500/20 text-xs font-medium rounded-btn transition-colors align-baseline"
-        >
-          <a
-            href={url}
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={(e) => e.stopPropagation()}
-            className="inline-flex items-center gap-1 cursor-pointer"
-            title={`Öffne: ${url}`}
-          >
-            <span>🌐</span>
-            <span>{title}</span>
-            <ExternalLink className="w-2.5 h-2.5 opacity-60" />
-          </a>
-          {!isReadOnly && blockId && (
-            <button
-              type="button"
-              onMouseDown={(e) => e.preventDefault()}
-              onClick={(e) => {
-                e.stopPropagation();
-                setEditingLinkOriginalRaw(part);
-                setLinkModalBlockId(blockId);
-                setLinkModalTab('web');
-                setLinkWebTitle(webMatch[1] || '');
-                setLinkWebUrl(url);
-              }}
-              className="ml-0.5 p-0.5 rounded hover:bg-sky-500/20 opacity-60 hover:opacity-100 transition-opacity cursor-pointer"
-              title="Link bearbeiten"
-            >
-              <Edit3 className="w-2.5 h-2.5" />
-            </button>
-          )}
-        </span>
-      );
-    }
-
-    if (part.startsWith('#') && part.length > 1) {
-      const tagWord = part.slice(1);
-      return (
-        <span
-          key={key}
-          onClick={(e) => {
-            e.stopPropagation();
-            openTagPage(tagWord);
-          }}
-          className="inline-flex items-center gap-0.5 px-1.5 py-0.5 mx-0.5 bg-blue-500/10 border border-blue-500/30 text-blue-500 dark:text-blue-400 hover:bg-blue-500/20 text-xs font-medium cursor-pointer rounded-btn transition-colors align-baseline"
-          title={`Öffne Hashtag-Seite: #${tagWord}`}
-        >
-          <Hash className="w-2.5 h-2.5 opacity-80" />
-          <span>{tagWord}</span>
-        </span>
-      );
-    }
-
-    return <span key={key} className="whitespace-pre-wrap">{part}</span>;
-  };
-
-  // Helper to render text with clickable Wiki-Links, Web-Links and Hashtags across multiple lines
-  const renderFormattedText = (text: string, blockId?: string) => {
-    const rawLines = (text || '').split('\n');
-    if (rawLines.length <= 1) {
-      const parts = (text || '').split(/(\[\[.*?\]\]|\[.*?\]\(https?:\/\/[^\s)]+\)|#[a-zA-Z0-9äöüÄÖÜß_-]+)/g);
-      return parts.map((part, i) => renderSingleRichToken(part, blockId, i));
-    }
-    return (
-      <div className="w-full space-y-0.5">
-        {rawLines.map((lineText, lineIdx) => {
-          const parts = lineText.split(/(\[\[.*?\]\]|\[.*?\]\(https?:\/\/[^\s)]+\)|#[a-zA-Z0-9äöüÄÖÜß_-]+)/g);
-          return (
-            <div key={lineIdx} className="flex flex-wrap items-center gap-y-0.5 w-full min-h-[22px]">
-              {lineText.length === 0 ? (
-                <span>&nbsp;</span>
-              ) : (
-                parts.map((part, i) => renderSingleRichToken(part, blockId, `${lineIdx}-${i}`))
-              )}
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  // Auto-resizing textarea / formatted view for bullet points and tasks:
-  // - When editing: renders an auto-expanding textarea that naturally wraps text (no horizontal scrolling).
-  // - When inactive: renders full rich tokens (Wiki-Links, external URLs, #hashtags) with word wrapping.
-  const renderLiveInlineBlock = (
-    block: DocumentBlock,
-    originalIndex: number,
-    extraTextClass = 'text-main'
-  ) => {
-    const text = block.content || '';
-    if (isReadOnly) {
-      return (
-        <div className={`w-full text-sm leading-relaxed break-words whitespace-pre-wrap min-h-[22px] cursor-default ${extraTextClass}`}>
-          {renderFormattedText(text, block.id)}
-        </div>
-      );
-    }
-
-    const isEditing = activeEditingBlockId === block.id;
-
-    if (!isEditing) {
-      return (
-        <div
-          onClick={(e) => {
-            if (isReadOnly) return;
-            if ((e.target as HTMLElement).closest('button, a')) return;
-            let clickOffset: number | undefined = undefined;
-            try {
-              if (document.caretRangeFromPoint) {
-                const range = document.caretRangeFromPoint(e.clientX, e.clientY);
-                if (range && e.currentTarget.contains(range.startContainer)) {
-                  const preCaretRange = range.cloneRange();
-                  preCaretRange.selectNodeContents(e.currentTarget);
-                  preCaretRange.setEnd(range.endContainer, range.endOffset);
-                  clickOffset = preCaretRange.toString().length;
-                }
-              } else if ((document as any).caretPositionFromPoint) {
-                const pos = (document as any).caretPositionFromPoint(e.clientX, e.clientY);
-                if (pos && pos.offsetNode && e.currentTarget.contains(pos.offsetNode)) {
-                  const range = document.createRange();
-                  range.selectNodeContents(e.currentTarget);
-                  range.setEnd(pos.offsetNode, pos.offset);
-                  clickOffset = range.toString().length;
-                }
-              }
-            } catch {
-              // fallback to end of text
-            }
-            focusBlock(block.id, clickOffset);
-          }}
-          className={`w-full text-sm leading-relaxed break-words whitespace-pre-wrap min-h-[22px] cursor-text ${extraTextClass}`}
-        >
-          {text ? (
-            renderFormattedText(text, block.id)
-          ) : (
-            <span className="text-faint italic select-none">&nbsp;</span>
-          )}
-        </div>
-      );
-    }
-
-    return (
-      <textarea
-        ref={(el) => {
-          blockInputRefs.current[block.id] = el;
-          if (el) {
-            autoResizeTextarea(el);
-          }
-        }}
-        rows={1}
-        readOnly={isReadOnly}
-        value={block.content || ''}
-        placeholder="Notiz eingeben… (/ für Befehle)"
-        onFocus={() => {
-          handleBlockFocus(block.id);
-        }}
-        onBlur={() => {
-          setActiveEditingBlockId((prev) => (prev === block.id ? null : prev));
-          handleBlockBlur();
-        }}
-        onChange={(e) => {
-          autoResizeTextarea(e.target);
-          const pos = e.target.selectionStart;
-          if (typeof pos === 'number') {
-            activeCursorOffsetRef.current = pos;
-          }
-          handleContentChange(block, e.target.value);
-        }}
-        onSelect={(e) => {
-          const target = e.target as HTMLTextAreaElement;
-          if (typeof target.selectionStart === 'number') {
-            activeCursorOffsetRef.current = target.selectionStart;
-          }
-        }}
-        onClick={(e) => {
-          const target = e.target as HTMLTextAreaElement;
-          if (typeof target.selectionStart === 'number') {
-            activeCursorOffsetRef.current = target.selectionStart;
-          }
-        }}
-        onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
-        className={`w-full bg-transparent text-sm leading-relaxed focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap placeholder:text-faint p-0 m-0 border-0 ${extraTextClass}`}
-      />
-    );
-  };
-
-  // --- GLOBAL TO-DO ROLLUP AGGREGATOR ---
-  const allWorkspaceTodos = useMemo(() => {
-    const items: {
-      docId: string;
-      docTitle: string;
-      docIcon: string;
-      folder: string;
-      block: DocumentBlock;
-    }[] = [];
-
-    docs.forEach((doc) => {
-      const folder = getDocFolder(doc) || 'Root (Unsortiert)';
-      (doc.blocks || []).forEach((b) => {
-        if (b.type === 'todo' || (b.content && b.content.startsWith('- [ ]'))) {
-          items.push({
-            docId: doc.id,
-            docTitle: doc.title,
-            docIcon: doc.icon || '📄',
-            folder,
-            block: b,
-          });
-        }
-      });
-    });
-
-    return items;
-  }, [docs]);
-
-  const filteredTodos = useMemo(() => {
-    return allWorkspaceTodos.filter((item) => {
-      if (todoFilter === 'open' && item.block.checked) return false;
-      if (todoFilter === 'done' && !item.block.checked) return false;
-      if (todoFolderDrilldown && item.folder !== todoFolderDrilldown) return false;
-      return true;
-    });
-  }, [allWorkspaceTodos, todoFilter, todoFolderDrilldown]);
-
-  // Group filtered todos by folder -> docTitle
-  const todosByFolder = useMemo(() => {
-    const map = new Map<string, typeof filteredTodos>();
-    filteredTodos.forEach((item) => {
-      const existing = map.get(item.folder) || [];
-      existing.push(item);
-      map.set(item.folder, existing);
-    });
-    return map;
-  }, [filteredTodos]);
-
-  // Direct toggle of a To-Do item in the rollup dashboard
-  const handleToggleRollupTodo = async (docId: string, blockId: string) => {
-    triggerHaptic(15);
-    const targetDoc = docs.find((d) => d.id === docId);
-    if (!targetDoc) return;
-
-    const updatedBlocks = targetDoc.blocks.map((b) =>
-      b.id === blockId ? { ...b, checked: !b.checked } : b
-    );
-    const updatedDoc = { ...targetDoc, blocks: updatedBlocks };
-
-    // Update in local state
-    setDocs((prev) => prev.map((d) => (d.id === docId ? updatedDoc : d)));
-    if (selectedDoc?.id === docId) {
-      setSelectedDoc(updatedDoc);
-    }
-
-    // Also update tagDetails if currently viewing tag page
-    setTagDetails((prev) => {
-      if (!prev) return prev;
-      return {
-        ...prev,
-        documents: prev.documents.map((dg) => {
-          if (dg.docId !== docId) return dg;
-          return {
-            ...dg,
-            matchedBlocks: dg.matchedBlocks.map((mb) => ({
-              rootBlock:
-                mb.rootBlock.id === blockId
-                  ? { ...mb.rootBlock, checked: !mb.rootBlock.checked }
-                  : mb.rootBlock,
-              children: mb.children.map((c) =>
-                c.id === blockId ? { ...c, checked: !c.checked } : c
-              ),
-            })),
-          };
-        }),
-      };
-    });
-
-    // Persist immediately via atomic block patch
-    const toggledBlock = updatedBlocks.find((b) => b.id === blockId);
-    if (toggledBlock) {
-      await api.patchDocumentBlocks(docId, {
-        upserted: [toggledBlock],
-      });
-    }
-  };
-
-  // Jump directly to document from rollup
-  const handleJumpToDoc = (docId: string) => {
-    const found = docs.find((d) => d.id === docId);
-    if (found) {
-      setSelectedDoc(found);
-      setZoomedBlockId(null);
-      setWorkspaceMode('editor');
-    }
-  };
-
-  // --- FOLDER TREE CALCULATION ---
-  const filteredDocs = useMemo(() => {
-    if (!searchQuery.trim()) return docs;
-    const q = searchQuery.toLowerCase();
-    return docs.filter(
-      (d) => d.title.toLowerCase().includes(q) || d.content.toLowerCase().includes(q)
-    );
-  }, [docs, searchQuery]);
-
-  const { rootTree, rootDocs } = useMemo(() => {
-    const folderMap = new Map<string, FolderTreeItem>();
-
-    allFolderPaths.forEach((path) => {
-      const parts = path.split('/');
-      const name = parts[parts.length - 1];
-
-      let matchingSF: SharedFolder | undefined;
-      let isRoot = false;
-      for (const sf of sharedFolders) {
-        if (sf.mountPath === path) {
-          matchingSF = sf;
-          isRoot = true;
-          break;
-        } else if (path.startsWith(sf.mountPath + '/')) {
-          matchingSF = sf;
-          isRoot = false;
-          break;
-        }
-      }
-
-      folderMap.set(path, {
-        path,
-        name,
-        depth: parts.length - 1,
-        subfolders: [],
-        docs: [],
-        sharedFolder: matchingSF,
-        isShared: !!matchingSF,
-        isSharedRoot: isRoot,
-      });
-    });
-
-    filteredDocs.forEach((doc) => {
-      const folder = getDocFolder(doc);
-      if (folder && folderMap.has(folder)) {
-        folderMap.get(folder)!.docs.push(doc);
-      }
-    });
-
-    const rootFolders: FolderTreeItem[] = [];
-    allFolderPaths.forEach((path) => {
-      const item = folderMap.get(path)!;
-      const lastSlash = path.lastIndexOf('/');
-      if (lastSlash === -1) {
-        rootFolders.push(item);
-      } else {
-        const parentPath = path.substring(0, lastSlash);
-        const parent = folderMap.get(parentPath);
-        if (parent) {
-          parent.subfolders.push(item);
-        } else {
-          rootFolders.push(item);
-        }
-      }
-    });
-
-    const rootOnlyDocs = filteredDocs.filter((d) => !getDocFolder(d));
-    return { rootTree: rootFolders, rootDocs: rootOnlyDocs };
-  }, [allFolderPaths, filteredDocs, sharedFolders]);
-
-  const pinnedDocs = useMemo(() => {
-    return docs.filter((d) => d.isPinned);
-  }, [docs]);
-
-  const filteredWorkspaceTags = useMemo(() => {
-    const q = tagSearchQuery.trim().replace(/^#/, '').toLowerCase();
-    if (!q) return workspaceTags;
-    return workspaceTags.filter((t) => t.tag.toLowerCase().includes(q));
-  }, [workspaceTags, tagSearchQuery]);
-
-  // Register context-sensitive mobile menu groups behind the MindSift logo
-  useEffect(() => {
-    setPrimaryAction(() => {
-      handleCreateDoc(null);
-    });
-
-    const openTodosCount = allWorkspaceTodos.filter((t) => !t.block.checked).length;
+    setPrimaryAction(() => handleCreateDocument(''));
     setGroups([
       {
-        id: 'ws-view-files',
-        title: 'Workspace-Ansicht & Dateien',
+        id: 'workspace-actions',
+        title: 'Notizen & Ordner',
         items: [
           {
-            id: 'ws-open-tree',
-            label: 'Dateibaum & Ordner öffnen',
-            icon: <FolderTree className="w-4 h-4 text-accent" />,
-            badge: docs.length,
+            id: 'new-note',
+            label: 'Neue Notiz',
+            icon: <FilePlus className="w-4 h-4" />,
             variant: 'accent',
-            active: showMobileFileDrawer,
-            onClick: () => {
-              setWorkspaceMode('editor');
-              setShowMobileFileDrawer(true);
-            },
+            onClick: () => handleCreateDocument(''),
           },
           {
-            id: 'ws-mode-editor',
-            label: 'Notizen & Editor',
-            icon: <Layers className="w-4 h-4" />,
-            active: workspaceMode === 'editor' && !showMobileFileDrawer,
-            onClick: () => {
-              setWorkspaceMode('editor');
-              setShowMobileFileDrawer(false);
-            },
-          },
-          {
-            id: 'ws-mode-tags',
-            label: 'Themen & Hashtags',
-            icon: <Hash className="w-4 h-4" />,
-            badge: workspaceTags.length,
-            active: workspaceMode === 'tags',
-            onClick: () => {
-              setWorkspaceMode('tags');
-              setShowMobileFileDrawer(false);
-            },
-          },
-          {
-            id: 'ws-mode-todos',
-            label: 'Globale To-Dos',
-            icon: <CheckSquare className="w-4 h-4" />,
-            badge: openTodosCount,
-            active: workspaceMode === 'todos',
-            onClick: () => {
-              setWorkspaceMode('todos');
-              setShowMobileFileDrawer(false);
-            },
-          },
-        ],
-      },
-      {
-        id: 'ws-doc-actions',
-        title: 'Erstellen & Dokument-Aktionen',
-        items: [
-          {
-            id: 'ws-new-doc',
-            label: 'Neue Datei erstellen',
-            icon: <FilePlus className="w-4 h-4 text-accent" />,
-            onClick: () => {
-              setShowMobileFileDrawer(false);
-              handleCreateDoc(null);
-            },
-          },
-          {
-            id: 'ws-new-folder',
+            id: 'new-folder',
             label: 'Neuer Ordner',
             icon: <FolderPlus className="w-4 h-4" />,
-            onClick: () => {
-              setWorkspaceMode('editor');
-              setShowMobileFileDrawer(true);
-              handleStartCreateFolder(null);
-            },
+            onClick: () => setShowNewFolderModal(true),
           },
-          ...(selectedDoc
-            ? [
-                {
-                  id: 'ws-share-doc',
-                  label: `Notiz "${selectedDoc.title || 'Unbenannt'}" teilen`,
-                  icon: <Users className="w-4 h-4" />,
-                  onClick: () => openShareModal(),
-                },
-                {
-                  id: 'ws-pin-doc',
-                  label: selectedDoc.isPinned ? 'Von Favoriten lösen' : 'Oben in Favoriten anpinnen',
-                  icon: <Pin className="w-4 h-4" />,
-                  active: Boolean(selectedDoc.isPinned),
-                  onClick: () => persistDocument({ ...selectedDoc, isPinned: !selectedDoc.isPinned }, true),
-                },
-                {
-                  id: 'ws-export-md',
-                  label: 'Als Markdown exportieren (.md)',
-                  icon: <Download className="w-4 h-4" />,
-                  onClick: () => handleExportMarkdown(),
-                },
-                {
-                  id: 'ws-delete-doc',
-                  label: selectedDoc.isOwner !== false ? 'Notiz löschen' : 'Geteilte Notiz verlassen',
-                  icon: <Trash2 className="w-4 h-4" />,
-                  variant: 'danger' as const,
-                  onClick: () => {
-                    if (selectedDoc.isOwner !== false) {
-                      handleDeleteDoc(selectedDoc.id);
-                    } else {
-                      handleLeaveShare();
-                    }
-                  },
-                },
-              ]
-            : []),
         ],
       },
     ]);
-  }, [
-    workspaceMode,
-    showMobileFileDrawer,
-    docs.length,
-    workspaceTags.length,
-    allWorkspaceTodos,
-    selectedDoc,
-    setGroups,
-    setPrimaryAction,
-  ]);
+    return () => {
+      setGroups([]);
+      setPrimaryAction(undefined);
+    };
+  }, [handleCreateDocument, setGroups, setPrimaryAction]);
 
-  const renderDocItem = (doc: Document, depth: number) => {
-    const isSelected = selectedDoc?.id === doc.id && workspaceMode === 'editor';
-    const isDragging = draggingDocId === doc.id;
-    return (
-      <div
-        key={doc.id}
-        draggable
-        onDragStart={(e) => {
-          e.stopPropagation();
-          e.dataTransfer.setData('application/mindsift-doc-id', doc.id);
-          e.dataTransfer.setData('text/plain', doc.id);
-          setDraggingDocId(doc.id);
-        }}
-        onDragEnd={() => setDraggingDocId(null)}
-        onClick={() => {
-          setSelectedDoc(doc);
-          setZoomedBlockId(null);
-          setWorkspaceMode('editor');
-          setShowMobileFileDrawer(false);
-        }}
-        style={{ paddingLeft: `${depth * 14 + 16}px` }}
-        className={`group flex items-center justify-between py-2.5 sm:py-1.5 pr-2 border-l-2 transition-all cursor-pointer text-sm sm:text-xs ${
-          isDragging ? 'opacity-40 scale-[0.98]' : ''
-        } ${
-          isSelected
-            ? 'bg-panel-elevated border-accent text-main font-medium'
-            : 'border-transparent text-muted hover:text-main hover:bg-canvas/50'
-        }`}
-        title={`${doc.title || 'Notiz'} (Ziehen zum Verschieben in Ordner)`}
-      >
-        <div className="flex items-center gap-2 min-w-0 flex-1">
-          <span className="text-base sm:text-sm flex-shrink-0">{doc.icon || '📄'}</span>
-          <span className="truncate">{doc.title || 'Unbenannt'}</span>
-          {doc.isPinned && <Pin className="w-3 h-3 sm:w-2.5 sm:h-2.5 text-accent flex-shrink-0" />}
-          {doc.isOwner === false && (
-            <span
-              title={`Geteilt von ${doc.ownerName || 'anderem Nutzer'} (${doc.permission === 'read' ? 'Nur Lesen' : 'Schreibrecht'})`}
-              className="text-accent flex-shrink-0"
-            >
-              <Users className="w-3.5 h-3.5 sm:w-3 sm:h-3" />
-            </span>
-          )}
-        </div>
-      </div>
-    );
+  const handleDeleteDocument = useCallback(
+    async (docId: string) => {
+      try {
+        await api.deleteDocument(docId);
+        setDocs((prev) => {
+          const remaining = prev.filter((d) => d.id !== docId);
+          if (selectedDocId === docId) {
+            setSelectedDocId(remaining.length > 0 ? remaining[0].id : null);
+          }
+          return remaining;
+        });
+        setMobileShowDetail(false);
+        onStatsChange();
+      } catch {
+        // ignore
+      }
+    },
+    [onStatsChange, selectedDocId]
+  );
+
+  const handleDocMetadataChange = useCallback((updated: Document) => {
+    setDocs((prev) => prev.map((d) => (d.id === updated.id ? { ...d, ...updated } : d)));
+  }, []);
+
+  const handleCreateFolderSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const clean = newFolderName.trim().replace(/^\/+|\/+$/g, '');
+    if (!clean) return;
+    try {
+      if (newFolderIsShared) {
+        const sf = await api.createSharedFolder({ name: clean, mountPath: clean });
+        setSharedFolders((prev) => [...prev, sf]);
+      }
+      const res = await api.createFolder(clean);
+      setFolders((prev) => (prev.includes(res.path) ? prev : [...prev, res.path].sort()));
+      setExpandedFolders((prev) => ({ ...prev, [res.path]: true }));
+      setNewFolderName('');
+      setNewFolderIsShared(false);
+      setShowNewFolderModal(false);
+    } catch {
+      // ignore
+    }
   };
 
-  const renderFolder = (node: FolderTreeItem): React.ReactNode => {
-    const isExpanded = expandedFolders.has(node.path);
-    const isCreatingSubfolder = isCreatingFolder && newFolderParent === node.path;
-    const isDragOver = dragOverFolder === node.path;
-    const isDraggingThisFolder = draggingFolderPath === node.path;
-    const totalItems = node.docs.length + node.subfolders.length;
+  const handleDeleteFolder = async (folderPath: string) => {
+    try {
+      const res = await api.deleteFolder(folderPath);
+      setFolders((prev) =>
+        prev.filter((f) => f !== folderPath && !f.startsWith(`${folderPath}/`))
+      );
+      if (res.deletedDocIds && res.deletedDocIds.length > 0) {
+        setDocs((prev) => prev.filter((d) => !res.deletedDocIds.includes(d.id)));
+        if (selectedDocId && res.deletedDocIds.includes(selectedDocId)) {
+          setSelectedDocId(null);
+        }
+      }
+      onStatsChange();
+    } catch {
+      // ignore
+    }
+  };
 
-    return (
-      <div
-        key={node.path}
-        className="select-none"
-        onDragOver={(e) => {
-          if (
-            draggingDocId ||
-            (draggingFolderPath &&
-              draggingFolderPath !== node.path &&
-              !node.path.startsWith(draggingFolderPath + '/'))
-          ) {
-            e.preventDefault();
-            e.stopPropagation();
-            setDragOverFolder(node.path);
-          }
-        }}
-        onDragLeave={(e) => {
-          e.preventDefault();
-          if (dragOverFolder === node.path) {
-            setDragOverFolder(null);
-          }
-        }}
-        onDrop={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          const droppedFolder =
-            e.dataTransfer.getData('application/mindsift-folder-path') || draggingFolderPath;
-          setDragOverFolder(null);
-          setDraggingDocId(null);
-          setDraggingFolderPath(null);
+  const handleSelectTag = useCallback(async (tag: string) => {
+    const cleanTag = tag.replace(/^#/, '').toLowerCase();
+    setSelectedTag(cleanTag);
+    setSubView('tag_detail');
+    setMobileShowDetail(true);
+    try {
+      const details = await api.getTagDetails(cleanTag);
+      setTagDetails(details);
+      setTagNoteDraft(details.noteContent || '');
+    } catch {
+      setTagDetails(null);
+    }
+  }, []);
 
-          if (droppedFolder) {
-            handleMoveFolder(droppedFolder, node.path);
-          } else {
-            handleDropDocToFolder(node.path, e);
-          }
-        }}
+  const handleSaveTagNote = async () => {
+    if (!selectedTag) return;
+    try {
+      await api.updateTagPageNote(selectedTag, tagNoteDraft);
+    } catch {
+      // ignore
+    }
+  };
+
+  const openDocShareModal = useCallback(async (doc: Document) => {
+    setShareModalDoc(doc);
+    setShareModalFolder(null);
+    try {
+      const [sharesRes, teamsRes, collabRes] = await Promise.all([
+        api.getDocShares(doc.id).catch(() => []),
+        api.getUserTeams().catch(() => []),
+        api.getUsersDirectory().catch(() => []),
+      ]);
+      setActiveDocShares(sharesRes);
+      setTeams(teamsRes);
+      setCollaborators(collabRes);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const openFolderShareModal = useCallback(async (sf: SharedFolder) => {
+    setShareModalFolder(sf);
+    setShareModalDoc(null);
+    try {
+      const [teamsRes, collabRes, freshSf] = await Promise.all([
+        api.getUserTeams().catch(() => []),
+        api.getUsersDirectory().catch(() => []),
+        api.getSharedFolder(sf.id).catch(() => sf),
+      ]);
+      setShareModalFolder(freshSf);
+      setTeams(teamsRes);
+      setCollaborators(collabRes);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  // All distinct folder paths
+  const allFolderPaths = useMemo(() => {
+    const set = new Set<string>(folders);
+    for (const d of docs) {
+      if (d.folderPath) set.add(d.folderPath);
+    }
+    for (const sf of sharedFolders) {
+      if (sf.mountPath) set.add(sf.mountPath);
+    }
+    return Array.from(set).sort();
+  }, [docs, folders, sharedFolders]);
+
+  // Filtered documents for sidebar
+  const filteredDocs = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return docs;
+    return docs.filter(
+      (d) =>
+        d.title.toLowerCase().includes(q) ||
+        (d.content && d.content.toLowerCase().includes(q)) ||
+        (d.tags && d.tags.some((t) => t.toLowerCase().includes(q)))
+    );
+  }, [docs, searchQuery]);
+
+  const pinnedDocs = useMemo(
+    () => filteredDocs.filter((d) => d.isPinned),
+    [filteredDocs]
+  );
+
+  const rootDocs = useMemo(
+    () => filteredDocs.filter((d) => !d.folderPath),
+    [filteredDocs]
+  );
+
+  // All To-Do blocks across all documents
+  const allDocTodos = useMemo(() => {
+    const list: { doc: Document; blockId: string; content: string; checked: boolean }[] = [];
+    for (const d of docs) {
+      for (const b of d.blocks || []) {
+        if (b.type === 'todo' && b.content.trim() !== '') {
+          list.push({
+            doc: d,
+            blockId: b.id,
+            content: b.content,
+            checked: Boolean(b.checked),
+          });
+        }
+      }
+    }
+    return list;
+  }, [docs]);
+
+  const selectedDocObj = useMemo(
+    () => docs.find((d) => d.id === selectedDocId) || null,
+    [docs, selectedDocId]
+  );
+
+  const unifiedShares: UnifiedShare[] = useMemo(() => {
+    if (shareModalDoc) {
+      return activeDocShares.map((s) => ({
+        id: s.userId || s.teamId || s.id,
+        targetType: s.targetType || (s.teamId ? 'team' : 'user'),
+        targetId: s.targetId || s.teamId || s.userId || '',
+        targetName: s.targetName || s.displayName || s.userEmail || 'Mitglied',
+        targetEmail: s.userEmail,
+        permission: s.permission === 'write' ? 'editor' : 'viewer',
+        createdAt: s.createdAt,
+      }));
+    }
+    if (shareModalFolder) {
+      return (shareModalFolder.shares || []).map((s) => ({
+        id: s.id,
+        targetType: s.targetType,
+        targetId: s.targetId,
+        targetName: s.targetName || s.email || 'Mitglied',
+        targetEmail: s.email,
+        permission: s.permission === 'write' ? 'editor' : 'viewer',
+        createdAt: s.createdAt,
+      }));
+    }
+    return [];
+  }, [activeDocShares, shareModalDoc, shareModalFolder]);
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] bg-slate-50 dark:bg-slate-950 rounded-2xl border border-slate-200/80 dark:border-slate-800/80 overflow-hidden shadow-sm">
+      {/* LEFT MASTER SIDEBAR */}
+      <aside
+        className={`${
+          mobileShowDetail ? 'hidden lg:flex' : 'flex'
+        } w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-slate-50/90 dark:bg-slate-900/60 border-r border-slate-200/80 dark:border-slate-800/80`}
       >
-        <div
-          draggable
-          onDragStart={(e) => {
-            e.stopPropagation();
-            e.dataTransfer.setData('application/mindsift-folder-path', node.path);
-            e.dataTransfer.setData('text/plain', node.path);
-            setDraggingFolderPath(node.path);
-          }}
-          onDragEnd={() => setDraggingFolderPath(null)}
-          onClick={() => toggleFolder(node.path)}
-          style={{ paddingLeft: `${node.depth * 14 + 8}px` }}
-          className={`group flex items-center justify-between py-2.5 sm:py-1.5 pr-2 cursor-pointer transition-colors text-sm sm:text-xs ${
-            isDraggingThisFolder ? 'opacity-40 scale-[0.98]' : ''
-          } ${
-            isDragOver
-              ? 'bg-accent/20 border-l-2 border-accent text-main font-medium'
-              : 'hover:bg-panel-elevated text-muted'
-          }`}
-          title={`${node.path} (Klick: Öffnen/Schließen · Ziehen: In anderen Ordner verschieben)`}
-        >
-          <div className="flex items-center gap-1.5 min-w-0">
-            <span className="text-faint hover:text-muted">
-              {isExpanded ? (
-                <ChevronDown className="w-3.5 h-3.5 sm:w-3 sm:h-3 flex-shrink-0" />
-              ) : (
-                <ChevronRight className="w-3.5 h-3.5 sm:w-3 sm:h-3 flex-shrink-0" />
-              )}
-            </span>
-            {isExpanded ? (
-              <FolderOpen className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-accent flex-shrink-0" />
-            ) : (
-              <Folder className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted flex-shrink-0" />
-            )}
-            <span className="font-medium text-sm sm:text-xs text-main truncate">{node.name}</span>
-            {node.isShared && (
-              <span
-                title={node.sharedFolder?.isOwner ? 'Geteilter Ordner (Eigentümer)' : 'Geteilter Ordner'}
-                className="text-accent flex-shrink-0"
+        {/* Sidebar Header & Actions */}
+        <div className="p-3.5 border-b border-slate-200/70 dark:border-slate-800/80 space-y-2.5">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm font-bold text-slate-800 dark:text-slate-100 tracking-tight">
+              Notizen & Outliner
+            </h2>
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => setShowNewFolderModal(true)}
+                className="p-1.5 rounded-lg text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-slate-200/60 dark:hover:bg-slate-800 transition-colors"
+                title="Neuer Ordner"
               >
-                <Users className="w-3.5 h-3.5 sm:w-3 sm:h-3" />
-              </span>
-            )}
-            <span className="text-[10px] text-faint font-mono">({totalItems})</span>
+                <FolderPlus className="w-4 h-4" />
+              </button>
+              <button
+                type="button"
+                onClick={() => handleCreateDocument('')}
+                className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold bg-indigo-600 hover:bg-indigo-500 text-white shadow-sm transition-colors"
+              >
+                <Plus className="w-3.5 h-3.5" />
+                <span>Notiz</span>
+              </button>
+            </div>
           </div>
 
-          <div className="opacity-100 sm:opacity-0 sm:group-hover:opacity-100 flex items-center gap-1 transition-opacity">
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                openFolderShareModal(node);
-              }}
-              className="p-1.5 sm:p-1 hover:bg-panel-elevated text-muted hover:text-accent rounded-btn"
-              title="Ordner freigeben / teilen"
-            >
-              <Users className="w-3.5 h-3.5 sm:w-3 sm:h-3" />
-            </button>
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                setShowMobileFileDrawer(false);
-                handleCreateDoc(node.path);
-              }}
-              className="p-1.5 sm:p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
-              title="Neue Datei in diesem Ordner"
-            >
-              <FilePlus className="w-3.5 h-3.5 sm:w-3 sm:h-3" />
-            </button>
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleStartCreateFolder(node.path);
-              }}
-              className="p-1.5 sm:p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
-              title="Neuer Unterordner"
-            >
-              <FolderPlus className="w-3.5 h-3.5 sm:w-3 sm:h-3" />
-            </button>
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleDeleteFolder(node.path, node.name);
-              }}
-              className="p-1.5 sm:p-1 hover:bg-red-500/10 text-muted hover:text-red-400 rounded-btn transition-colors"
-              title="Ordner löschen"
-            >
-              <Trash2 className="w-3.5 h-3.5 sm:w-3 sm:h-3" />
-            </button>
-          </div>
-        </div>
-
-        {isCreatingSubfolder && (
-          <div
-            style={{ paddingLeft: `${(node.depth + 1) * 14 + 8}px` }}
-            className="py-1.5 sm:py-1 pr-2 flex items-center gap-1 bg-canvas"
-          >
-            <Folder className="w-3.5 h-3.5 sm:w-3 sm:h-3 text-muted flex-shrink-0" />
+          {/* Search Input */}
+          <div className="relative">
+            <Search className="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
             <input
               type="text"
-              autoFocus
-              value={newFolderName}
-              onChange={(e) => setNewFolderName(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') handleConfirmCreateFolder();
-                if (e.key === 'Escape') setIsCreatingFolder(false);
-              }}
-              placeholder="Unterordner…"
-              className="flex-1 h-8 sm:h-6 px-2 sm:px-1.5 input-field text-xs"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Notizen oder #Tags suchen…"
+              className="w-full pl-8 pr-7 py-1.5 rounded-xl text-xs bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
             />
-            <button
-              type="button"
-              onClick={handleConfirmCreateFolder}
-              className="p-1.5 sm:p-1 text-accent hover:text-main rounded-btn"
-              title="Bestätigen"
-            >
-              <Check className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
-            </button>
-            <button
-              type="button"
-              onClick={() => setIsCreatingFolder(false)}
-              className="p-1.5 sm:p-1 text-muted hover:text-main rounded-btn"
-              title="Abbrechen"
-            >
-              <X className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
-            </button>
-          </div>
-        )}
-
-        {isExpanded && (
-          <div>
-            {node.subfolders.map(renderFolder)}
-            {node.docs.map((doc) => renderDocItem(doc, node.depth + 1))}
-            {node.subfolders.length === 0 && node.docs.length === 0 && !isCreatingSubfolder && (
-              <div
-                style={{ paddingLeft: `${(node.depth + 1) * 14 + 14}px` }}
-                className="py-1 text-[11px] text-faint italic"
+            {searchQuery && (
+              <button
+                type="button"
+                onClick={() => setSearchQuery('')}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
               >
-                (leer)
-              </div>
+                <X className="w-3.5 h-3.5" />
+              </button>
             )}
           </div>
-        )}
-      </div>
-    );
-  };
 
-  const isEmpty = docs.length === 0 && allFolderPaths.length === 0;
-
-  const renderExplorerBody = () => (
-    <>
-      <div className="p-2.5 sm:p-2 panel-header space-y-2 flex-shrink-0">
-        <div className="relative">
-          <Search className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted absolute left-2.5 top-1/2 -translate-y-1/2" />
-          <input
-            type="text"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="Dateien durchsuchen…"
-            className="w-full h-9 sm:h-7 pl-8 sm:pl-7 pr-2 input-field text-sm sm:text-xs"
-          />
-        </div>
-
-        <div className="flex items-center gap-1.5">
-          <button
-            type="button"
-            onClick={() => {
-              setShowMobileFileDrawer(false);
-              handleCreateDoc(null);
-            }}
-            className="flex-1 btn-action min-h-[38px] sm:min-h-0 justify-center cursor-pointer"
-            title="Neue Datei erstellen"
-          >
-            <FilePlus className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted" />
-            <span>Neue Datei</span>
-          </button>
-
-          <button
-            type="button"
-            onClick={() => handleStartCreateFolder(null)}
-            className="flex-1 btn-action min-h-[38px] sm:min-h-0 justify-center cursor-pointer"
-            title="Neuen Ordner erstellen"
-          >
-            <FolderPlus className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted" />
-            <span>Neuer Ordner</span>
-          </button>
-        </div>
-      </div>
-
-      {isCreatingFolder && newFolderParent === null && (
-        <div className="p-2 panel-header bg-canvas flex items-center gap-1.5 flex-shrink-0">
-          <Folder className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted flex-shrink-0" />
-          <input
-            type="text"
-            autoFocus
-            value={newFolderName}
-            onChange={(e) => setNewFolderName(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') handleConfirmCreateFolder();
-              if (e.key === 'Escape') setIsCreatingFolder(false);
-            }}
-            placeholder="Neuer Ordnername…"
-            className="flex-1 h-8 sm:h-6 px-2 sm:px-1.5 input-field text-xs"
-          />
-          <button
-            type="button"
-            onClick={handleConfirmCreateFolder}
-            className="p-1.5 sm:p-1 text-accent hover:text-main rounded-btn cursor-pointer"
-          >
-            <Check className="w-4 h-4 sm:w-3 sm:h-3" />
-          </button>
-          <button
-            type="button"
-            onClick={() => setIsCreatingFolder(false)}
-            className="p-1.5 sm:p-1 text-muted hover:text-main rounded-btn cursor-pointer"
-          >
-            <X className="w-4 h-4 sm:w-3 sm:h-3" />
-          </button>
-        </div>
-      )}
-
-      {/* Empty workspace state */}
-      {isEmpty ? (
-        <div className="p-4 text-center text-xs text-muted space-y-2 flex-1">
-          <Folder className="w-8 h-8 text-faint mx-auto" />
-          <p className="font-semibold text-main">Noch keine Notizen</p>
-          <p className="text-[11px] text-faint mb-3 max-w-xs mx-auto leading-relaxed">
-            Erstelle eine neue Datei oder lege Ordner an, um deine Dokumente übersichtlich zu strukturieren.
-          </p>
-          <div className="flex items-center justify-center gap-2">
+          {/* Sub-view Switcher: Notizen vs. Alle To-Dos */}
+          <div className="grid grid-cols-2 gap-1 p-0.5 rounded-xl bg-slate-200/70 dark:bg-slate-800/80 text-xs">
+            <button
+              type="button"
+              onClick={() => setSubView('editor')}
+              className={`py-1 rounded-lg font-medium transition-colors ${
+                subView === 'editor'
+                  ? 'bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm'
+                  : 'text-slate-600 dark:text-slate-400'
+              }`}
+            >
+              Dokumente ({docs.length})
+            </button>
             <button
               type="button"
               onClick={() => {
-                setShowMobileFileDrawer(false);
-                handleCreateDoc(null);
+                setSubView('todos');
+                setMobileShowDetail(true);
               }}
-              className="btn-action min-h-[38px] sm:min-h-0 cursor-pointer"
-            >
-              <FilePlus className="w-3.5 h-3.5 text-muted" />
-              <span>Neue Datei</span>
-            </button>
-            <button
-              type="button"
-              onClick={() => handleStartCreateFolder(null)}
-              className="btn-action min-h-[38px] sm:min-h-0 cursor-pointer"
-            >
-              <FolderPlus className="w-3.5 h-3.5 text-muted" />
-              <span>Neuer Ordner</span>
-            </button>
-          </div>
-        </div>
-      ) : (
-        <div className="py-1 flex-1 lg:max-h-[calc(100vh-240px)] overflow-y-auto">
-          {/* Drag target for Root when dragging a note or a folder */}
-          {(draggingDocId || draggingFolderPath) && (
-            <div
-              onDragOver={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                setDragOverFolder('__root__');
-              }}
-              onDragLeave={(e) => {
-                e.preventDefault();
-                if (dragOverFolder === '__root__') setDragOverFolder(null);
-              }}
-              onDrop={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const droppedFolder =
-                  e.dataTransfer.getData('application/mindsift-folder-path') ||
-                  draggingFolderPath;
-                setDragOverFolder(null);
-                setDraggingDocId(null);
-                setDraggingFolderPath(null);
-
-                if (droppedFolder) {
-                  handleMoveFolder(droppedFolder, '');
-                } else {
-                  handleDropDocToFolder('', e);
-                }
-              }}
-              className={`mx-2 my-1.5 p-2 border-2 border-dashed rounded-btn text-center text-xs transition-colors ${
-                dragOverFolder === '__root__'
-                  ? 'border-accent bg-accent/20 text-main font-semibold'
-                  : 'border-border text-muted bg-canvas'
+              className={`py-1 rounded-lg font-medium transition-colors ${
+                subView === 'todos'
+                  ? 'bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm'
+                  : 'text-slate-600 dark:text-slate-400'
               }`}
             >
-              {draggingFolderPath
-                ? '📁 Ordner in Hauptverzeichnis verschieben'
-                : '📁 In Hauptverzeichnis verschieben (ohne Ordner)'}
-            </div>
-          )}
-
-          {/* Angepinnte Notizen (Favorites) - Collapsible */}
-          {pinnedDocs.length > 0 && !searchQuery && (
-            <div className="mb-2 pb-1.5 border-b border-border">
-              <button
-                type="button"
-                onClick={() => setIsPinnedCollapsed((prev) => !prev)}
-                className="w-full px-2 py-1.5 sm:py-1 text-[10px] font-bold text-accent uppercase tracking-wider flex items-center justify-between hover:bg-canvas/40 rounded transition-colors"
-                title={isPinnedCollapsed ? 'Angepinnte Notizen aufklappen' : 'Angepinnte Notizen einklappen'}
-              >
-                <div className="flex items-center gap-1.5">
-                  <Pin className="w-3 h-3 text-accent" />
-                  <span>Angepinnte Notizen ({pinnedDocs.length})</span>
-                </div>
-                <ChevronDown
-                  className={`w-3 h-3 text-muted transition-transform duration-200 ${
-                    isPinnedCollapsed ? '-rotate-90' : ''
-                  }`}
-                />
-              </button>
-              {!isPinnedCollapsed && (
-                <div className="space-y-0.5 px-1 mt-1">
-                  {pinnedDocs.map((doc) => {
-                    const isSelected = selectedDoc?.id === doc.id && workspaceMode === 'editor';
-                    return (
-                      <div
-                        key={`pinned-${doc.id}`}
-                        draggable
-                        onDragStart={(e) => {
-                          e.stopPropagation();
-                          e.dataTransfer.setData('application/mindsift-doc-id', doc.id);
-                          e.dataTransfer.setData('text/plain', doc.id);
-                          setDraggingDocId(doc.id);
-                        }}
-                        onDragEnd={() => setDraggingDocId(null)}
-                        onClick={() => {
-                          setSelectedDoc(doc);
-                          setZoomedBlockId(null);
-                          setWorkspaceMode('editor');
-                          setShowMobileFileDrawer(false);
-                        }}
-                        className={`group flex items-center justify-between px-2 py-2.5 sm:py-1.5 rounded-btn transition-colors cursor-pointer text-sm sm:text-xs ${
-                          isSelected
-                            ? 'bg-panel-elevated border-l-2 border-accent text-main font-medium'
-                            : 'text-muted hover:text-main hover:bg-canvas/50'
-                        }`}
-                        title="Angepinnte Notiz öffnen"
-                      >
-                        <div className="flex items-center gap-2 min-w-0 flex-1">
-                          <span className="text-base sm:text-sm flex-shrink-0">{doc.icon || '📄'}</span>
-                          <span className="truncate">{doc.title || 'Unbenannt'}</span>
-                        </div>
-                        <button
-                          type="button"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            persistDocument({ ...doc, isPinned: false }, true);
-                          }}
-                          className="opacity-100 sm:opacity-0 sm:group-hover:opacity-100 p-1 sm:p-0.5 text-muted hover:text-accent rounded transition-opacity"
-                          title="Von Angepinnt entfernen"
-                        >
-                          <Pin className="w-3.5 h-3.5 sm:w-3 sm:h-3 text-accent" />
-                        </button>
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Themen & Hashtags (Collapsible) - directly under Pinned Notes */}
-          {workspaceTags.length > 0 && !searchQuery && (
-            <div className="mb-2 pb-1.5 border-b border-border">
-              <button
-                type="button"
-                onClick={() => setIsTagsCollapsed((prev) => !prev)}
-                className="w-full px-2 py-1.5 sm:py-1 text-[10px] font-bold text-muted uppercase tracking-wider flex items-center justify-between hover:bg-canvas/40 rounded transition-colors"
-                title={isTagsCollapsed ? 'Themen & Hashtags aufklappen' : 'Themen & Hashtags einklappen'}
-              >
-                <div className="flex items-center gap-1.5 text-accent">
-                  <Hash className="w-3 h-3" />
-                  <span>Themen & Hashtags ({workspaceTags.length})</span>
-                </div>
-                <ChevronDown
-                  className={`w-3 h-3 text-muted transition-transform duration-200 ${
-                    isTagsCollapsed ? '-rotate-90' : ''
-                  }`}
-                />
-              </button>
-              {!isTagsCollapsed && (
-                <div className="flex flex-wrap gap-1.5 sm:gap-1 px-1.5 py-1 mt-1 max-h-36 overflow-y-auto">
-                  {workspaceTags.map((wt) => (
-                    <button
-                      key={wt.tag}
-                      type="button"
-                      onClick={() => {
-                        setShowMobileFileDrawer(false);
-                        openTagPage(wt.tag);
-                      }}
-                      className={`px-2.5 py-1 sm:px-2 sm:py-0.5 rounded-pill text-xs sm:text-[11px] font-medium border flex items-center gap-1 transition-colors ${
-                        selectedTag === wt.tag
-                          ? 'bg-accent/20 border-accent text-accent font-semibold'
-                          : 'bg-canvas border-border text-muted hover:border-accent/40 hover:text-main'
-                      }`}
-                      title={`#${wt.tag} (${wt.count} Abschnitte)`}
-                    >
-                      <span>#{wt.tag}</span>
-                      <span className="text-[9px] opacity-60">({wt.count})</span>
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-          {rootTree.map(renderFolder)}
-          {rootDocs.map((doc) => renderDocItem(doc, 0))}
-
-          {filteredDocs.length === 0 && searchQuery && (
-            <div className="p-4 text-center text-xs text-faint">
-              Keine Dateien gefunden für &quot;{searchQuery}&quot;
-            </div>
-          )}
-        </div>
-      )}
-    </>
-  );
-
-  return (
-    <div className="w-full space-y-2">
-
-      {/* Top Navigation Mode Switcher: Notizen & Outliner vs. Globales To-Do Dashboard (Desktop) */}
-      <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
-        <div className="flex items-center gap-1">
-          <button
-            type="button"
-            onClick={() => setWorkspaceMode('editor')}
-            className={`h-8 px-3 text-xs font-medium border rounded-btn flex items-center gap-1.5 transition-colors ${
-              workspaceMode === 'editor'
-                ? 'bg-panel border-accent text-main'
-                : 'bg-canvas border-border text-muted hover:text-main'
-            }`}
-          >
-            <Layers className="w-3.5 h-3.5 text-accent" />
-            <span>Notizen</span>
-          </button>
-
-          <button
-            type="button"
-            onClick={() => setWorkspaceMode('tags')}
-            className={`h-8 px-3 text-xs font-medium border rounded-btn flex items-center gap-1.5 transition-colors ${
-              workspaceMode === 'tags'
-                ? 'bg-panel border-accent text-main'
-                : 'bg-canvas border-border text-muted hover:text-main'
-            }`}
-          >
-            <Hash className="w-3.5 h-3.5 text-accent" />
-            <span>Themen & Hashtags</span>
-            {workspaceTags.length > 0 && (
-              <span className="badge-neutral font-mono text-[10px]">
-                {workspaceTags.length}
-              </span>
-            )}
-          </button>
-
-          <button
-            type="button"
-            onClick={() => setWorkspaceMode('todos')}
-            className={`h-8 px-3 text-xs font-medium border rounded-btn flex items-center gap-1.5 transition-colors ${
-              workspaceMode === 'todos'
-                ? 'bg-panel border-accent text-main'
-                : 'bg-canvas border-border text-muted hover:text-main'
-            }`}
-          >
-            <CheckSquare className="w-3.5 h-3.5 text-accent" />
-            <span>Globale To-Dos</span>
-            <span className="badge-neutral font-mono text-[10px]">
-              {allWorkspaceTodos.filter((t) => !t.block.checked).length}
-            </span>
-          </button>
-        </div>
-
-        <div className="flex items-center gap-2 text-xs text-muted">
-          {workspaceMode === 'editor' && selectedDoc && (
-            <>
-              {/* Transport Connection Status Indicator */}
-              <span
-                className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border ${
-                  syncStatus === 'ws'
-                    ? 'bg-emerald-500/10 text-emerald-500 border-emerald-500/25'
-                    : syncStatus === 'sse'
-                    ? 'bg-amber-500/10 text-amber-500 border-amber-500/25'
-                    : 'bg-zinc-500/10 text-zinc-400 border-zinc-500/25'
-                }`}
-                title={
-                  syncStatus === 'ws'
-                    ? 'Echtzeit-Synchronisation aktiv über WebSocket'
-                    : syncStatus === 'sse'
-                    ? 'Eingeschränkt über HTTP-Proxy-Modus (SSE & POST Fallback)'
-                    : 'Offline: Alle Änderungen lokal in IndexedDB gesichert'
-                }
-              >
-                <span
-                  className={`w-2 h-2 rounded-full ${
-                    syncStatus === 'ws'
-                      ? 'bg-emerald-500 animate-pulse'
-                      : syncStatus === 'sse'
-                      ? 'bg-amber-500'
-                      : 'bg-zinc-400'
-                  }`}
-                />
-                <span>
-                  {syncStatus === 'ws'
-                    ? 'Live (WebSocket)'
-                    : syncStatus === 'sse'
-                    ? 'Eingeschränkt (HTTP-Proxy-Modus)'
-                    : 'Offline (Lokal gesichert)'}
-                </span>
-              </span>
-
-              <span className="badge-accent">
-                <Check className="w-3 h-3" />
-                {saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
-              </span>
-              <button
-                type="button"
-                onClick={handleExportMarkdown}
-                className="btn-action h-8 px-2.5 text-xs flex items-center gap-1.5"
-                title="Als Logseq/Markdown-Datei (.md) herunterladen"
-              >
-                <Download className="w-3.5 h-3.5 text-accent" />
-                <span>Export (.md)</span>
-              </button>
-            </>
-          )}
-          <div
-            className={`h-8 w-8 flex items-center justify-center rounded-btn border transition-colors ${
-              wsConnected
-                ? realtimeTransport === 'sse'
-                  ? 'bg-teal-500/10 border-teal-500/30 text-teal-400'
-                  : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
-                : 'bg-amber-500/10 border-amber-500/30 text-amber-500'
-            }`}
-            title={
-              wsConnected
-                ? realtimeTransport === 'sse'
-                  ? 'Live synchronisiert (Server-Sent Events / Proxy-Stream)'
-                  : 'Live synchronisiert (WebSocket online)'
-                : `Proxy/Offline-Fallback: Synchronisation über HTTP aktiv${wsDisconnectReason ? ` (${wsDisconnectReason})` : ''}`
-            }
-          >
-            <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : 'opacity-80'}`} />
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile Compact Header Bar (Live-Sync Status, Title, Drawer Switcher) */}
-      <div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border">
-        <div className="flex items-center gap-2 min-w-0">
-          <button
-            type="button"
-            onClick={() => setShowMobileFileDrawer(true)}
-            className="flex items-center gap-1.5 text-sm font-semibold text-main truncate hover:text-accent transition-colors cursor-pointer"
-          >
-            <FolderTree className="w-4 h-4 text-accent flex-shrink-0" />
-            <span className="truncate">{selectedDoc ? selectedDoc.title || 'Unbenannte Notiz' : 'Dateibaum & Ordner'}</span>
-          </button>
-        </div>
-        <div className="flex items-center gap-1.5 flex-shrink-0">
-          {selectedDoc && (
-            <button
-              type="button"
-              onClick={openShareModal}
-              className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center"
-              title="Notiz teilen"
-            >
-              <Users className="w-4 h-4 text-accent" />
+              To-Dos ({allDocTodos.filter((t) => !t.checked).length})
             </button>
-          )}
-          <div
-            className={`h-9 w-9 flex items-center justify-center rounded-btn border transition-colors ${
-              wsConnected
-                ? realtimeTransport === 'sse'
-                  ? 'bg-teal-500/10 border-teal-500/30 text-teal-400'
-                  : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
-                : 'bg-amber-500/10 border-amber-500/30 text-amber-500'
-            }`}
-            title={
-              wsConnected
-                ? realtimeTransport === 'sse'
-                  ? 'Live synchronisiert (Server-Sent Events / Proxy-Stream)'
-                  : 'Live synchronisiert (WebSocket online)'
-                : `Proxy/Offline-Fallback: Synchronisation über HTTP aktiv${wsDisconnectReason ? ` (${wsDisconnectReason})` : ''}`
-            }
-          >
-            <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : 'opacity-80'}`} />
           </div>
         </div>
-      </div>
 
-      {/* ===================================================================== */}
-      {/* VIEW MODE 1: LOGSEQ OUTLINER & EXPLORER */}
-      {/* ===================================================================== */}
-      {workspaceMode === 'editor' && (
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
-          {/* Mobile Centered Floating Explorer Dialog ("in der Mitte schweben") */}
-          {showMobileFileDrawer && (
-            <div
-              className="fixed inset-0 !m-0 z-50 flex items-center justify-center p-3.5 sm:p-4 bg-black/60 backdrop-blur-xs lg:hidden animate-in fade-in duration-150"
-              onClick={() => setShowMobileFileDrawer(false)}
-            >
-              <div
-                className="w-full max-w-md max-h-[85vh] bg-panel border border-border rounded-2xl shadow-panel flex flex-col overflow-hidden animate-in zoom-in-95 duration-150"
-                onClick={(e) => e.stopPropagation()}
-              >
-                {/* Mobile Dialog Header */}
-                <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-panel flex-shrink-0">
-                  <div className="flex items-center gap-2">
-                    <div className="w-7 h-7 rounded-btn bg-accent/15 text-accent flex items-center justify-center">
-                      <FolderTree className="w-4 h-4" />
-                    </div>
-                    <span className="text-sm font-semibold text-main">Dateibaum & Ordner</span>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => setShowMobileFileDrawer(false)}
-                    className="p-1.5 text-faint hover:text-main rounded-btn transition-colors cursor-pointer"
-                    title="Schließen"
-                  >
-                    <X className="w-5 h-5" />
-                  </button>
-                </div>
-
-                <div className="flex-1 overflow-y-auto flex flex-col">
-                  {renderExplorerBody()}
-                </div>
+        {/* Scrollable Navigation Tree */}
+        <div className="flex-1 overflow-y-auto p-2.5 space-y-4">
+          {/* Pinned Notes */}
+          {pinnedDocs.length > 0 && (
+            <div>
+              <div className="px-2 mb-1 flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider text-slate-400">
+                <Pin className="w-3 h-3 text-amber-500" />
+                <span>Angeheftet</span>
               </div>
-            </div>
-          )}
-
-          {/* Desktop Left Document & Folder Explorer Tree (Sidebar) */}
-          <div className="hidden lg:flex lg:col-span-4 panel-surface flex-col self-start max-h-screen lg:max-h-none">
-            {renderExplorerBody()}
-          </div>
-          {/* Right Logseq Outliner Editor */}
-          <div className="lg:col-span-8">
-            {selectedDoc ? (
-              <div
-                className="p-4 panel-surface space-y-3 min-h-[500px]"
-                onClick={(e) => {
-                  if (e.target === e.currentTarget) {
-                    handleCanvasBottomClick();
-                  }
-                }}
-              >
-                {/* Document Header & Metadata */}
-                <div className="flex flex-wrap items-center justify-between gap-3 pb-3 panel-header">
-                  <div className="flex flex-wrap items-center gap-2 text-xs text-muted">
-                    <div className="flex items-center gap-1.5">
-                      <Folder className="w-3.5 h-3.5 text-faint" />
-                      <span>{selectedDoc.folderPath || 'Hauptverzeichnis'}</span>
-                    </div>
-
-                    <span>• {selectedDoc.blocks.length} Bullets</span>
-
-                    {selectedDoc.isOwner === false && (
-                      <button
-                        type="button"
-                        onClick={openShareModal}
-                        className="px-2 py-0.5 rounded text-[10px] font-medium border border-border text-muted flex items-center gap-1 bg-surface-subtle hover:bg-panel-elevated hover:text-main transition-colors cursor-pointer"
-                        title="Teilen & Berechtigungen öffnen"
-                      >
-                        <Users className="w-2.5 h-2.5" />
-                        <span>Geteilt von {selectedDoc.ownerName || 'Eigentümer'}</span>
-                      </button>
-                    )}
-
-                    {selectedDoc.permission === 'read' && (
-                      <button
-                        type="button"
-                        onClick={openShareModal}
-                        className="px-2 py-0.5 rounded text-[10px] font-semibold border border-amber-500/30 bg-amber-500/15 text-amber-600 dark:text-amber-400 flex items-center gap-1 hover:bg-amber-500/25 transition-colors cursor-pointer"
-                        title="Berechtigungsdetails öffnen"
-                      >
-                        <Lock className="w-2.5 h-2.5" />
-                        <span>Nur Lesezugriff</span>
-                      </button>
-                    )}
-
-                    {activePeers.length > 0 && (
-                      <span
-                        className="px-2 py-0.5 rounded text-[10px] font-semibold border border-emerald-500/30 bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 flex items-center gap-1.5 animate-pulse"
-                        title={`Live-Kollaboration via CRDT aktiv: ${activePeers.map((c) => c.userName).join(', ')}`}
-                      >
-                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping" />
-                        <Users className="w-2.5 h-2.5" />
-                        <span>Live ({activePeers.length})</span>
-                      </span>
-                    )}
-
-                    {selectedDoc.sharedWith && selectedDoc.sharedWith.length > 0 && selectedDoc.isOwner !== false && (
-                      <button
-                        type="button"
-                        onClick={openShareModal}
-                        className="px-2 py-0.5 rounded text-[10px] font-semibold bg-accent/15 text-accent border border-accent/30 flex items-center gap-1 hover:bg-accent/25 hover:border-accent/50 transition-colors cursor-pointer"
-                        title="Teilen-Menü öffnen: Geteilt mit Nutzern anzeigen & verwalten"
-                      >
-                        <Users className="w-2.5 h-2.5" />
-                        <span>Geteilt ({selectedDoc.sharedWith.length})</span>
-                      </button>
-                    )}
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    <button
-                      type="button"
-                      onClick={openShareModal}
-                      className="btn-icon"
-                      title="Notiz teilen und Berechtigungen"
-                    >
-                      <Users className="w-3.5 h-3.5" />
-                    </button>
-
-                    <button
-                      type="button"
-                      onClick={() =>
-                        persistDocument({ ...selectedDoc, isPinned: !selectedDoc.isPinned }, true)
-                      }
-                      className={
-                        selectedDoc.isPinned
-                          ? 'btn-icon text-accent border-accent/40 bg-accent/10'
-                          : 'btn-icon'
-                      }
-                      title={selectedDoc.isPinned ? 'Von Favoriten / Angepinnt entfernen' : 'Oben in Favoriten anpinnen'}
-                    >
-                      <Pin className="w-3.5 h-3.5" />
-                    </button>
-
-                    {selectedDoc.isOwner !== false ? (
-                      <button
-                        type="button"
-                        onClick={() => handleDeleteDoc(selectedDoc.id)}
-                        className="btn-icon btn-icon-danger"
-                        title="Dokument löschen"
-                      >
-                        <Trash2 className="w-3.5 h-3.5" />
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        onClick={handleLeaveShare}
-                        className="btn-icon text-muted hover:text-status-danger"
-                        title="Geteilte Notiz verlassen"
-                      >
-                        <Trash2 className="w-3.5 h-3.5" />
-                      </button>
-                    )}
-                  </div>
-                </div>
-
-
-
-                {selectedDoc.permission === 'read' && (
-                  <div className="p-2.5 bg-blue-500/10 border border-blue-500/30 text-blue-700 dark:text-blue-300 rounded-card flex items-center gap-2 text-xs">
-                    <Eye className="w-4 h-4 text-blue-500 flex-shrink-0" />
-                    <span>Du hast <strong>Nur-Lesezugriff</strong> auf diese Notiz. Änderungen können nicht vorgenommen werden.</span>
-                  </div>
-                )}
-
-                {/* ZOOM BREADCRUMB BAR (Hoisting Focus Mode) */}
-                {zoomedBlock && (
-                  <div className="p-2.5 bg-canvas border border-border rounded-card flex items-center gap-2 text-xs">
-                    <div className="flex flex-wrap items-center gap-1.5 min-w-0">
-                      <button
-                        type="button"
-                        onClick={() => handleZoomTo(null)}
-                        className="text-muted hover:text-main flex items-center gap-1 font-medium transition-colors"
-                      >
-                        <span>{selectedDoc.icon || '📄'}</span>
-                        <span className="truncate">{selectedDoc.title}</span>
-                      </button>
-
-                      {breadcrumbBlocks.map((b) => (
-                        <React.Fragment key={b.id}>
-                          <ChevronRight className="w-3 h-3 text-faint flex-shrink-0" />
-                          <button
-                            type="button"
-                            onClick={() => handleZoomTo(b.id)}
-                            className="text-muted hover:text-main truncate max-w-[140px] font-medium transition-colors"
-                          >
-                            {b.content || 'Bullet'}
-                          </button>
-                        </React.Fragment>
-                      ))}
-
-                      <ChevronRight className="w-3 h-3 text-faint flex-shrink-0" />
-                      <span className="text-muted font-medium truncate max-w-[180px]">
-                        {zoomedBlock.content || 'Aktiver Ast'}
-                      </span>
-                    </div>
-                  </div>
-                )}
-
-                {/* Document Icon & Title (when not zoomed) */}
-                {!zoomedBlock && (
-                  <div className="flex items-center gap-3 relative pb-2 border-b border-border">
-                    <button
-                      type="button"
-                      disabled={isReadOnly}
-                      onClick={() => !isReadOnly && setShowIconPicker((prev) => !prev)}
-                      className={`text-2xl p-0.5 flex items-center justify-center flex-shrink-0 transition-transform ${
-                        isReadOnly ? 'opacity-60 cursor-not-allowed' : 'hover:scale-110 cursor-pointer'
-                      }`}
-                      title={isReadOnly ? 'Schreibgeschützt' : 'Icon ändern'}
-                    >
-                      {selectedDoc.icon || '📄'}
-                    </button>
-
-                    {showIconPicker && !isReadOnly && (
-                      <div className="absolute top-10 left-0 z-20 p-2.5 panel-surface flex flex-wrap gap-1 w-64 shadow-panel border border-border rounded-card">
-                        {ICONS.map((ic) => (
-                          <button
-                            key={ic}
-                            type="button"
-                            onClick={() => {
-                              persistDocument({ ...selectedDoc, icon: ic }, true);
-                              setShowIconPicker(false);
-                            }}
-                            className="w-8 h-8 hover:bg-panel-elevated text-base flex items-center justify-center rounded-btn transition-colors"
-                          >
-                            {ic}
-                          </button>
-                        ))}
-                      </div>
-                    )}
-
-                    <textarea
-                      rows={1}
-                      ref={(el) => {
-                        if (el) autoResizeTextarea(el);
-                      }}
-                      readOnly={isReadOnly}
-                      value={selectedDoc.title}
-                      onFocus={handleBlockFocus}
-                      onBlur={handleBlockBlur}
-                      onChange={(e) => {
-                        if (!isReadOnly) {
-                          autoResizeTextarea(e.target);
-                          persistDocument({ ...selectedDoc, title: e.target.value });
-                        }
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                          e.preventDefault();
-                          if (selectedDoc.blocks.length > 0) {
-                            const firstId = selectedDoc.blocks[0].id;
-                            blockInputRefs.current[firstId]?.focus();
-                          } else if (!isReadOnly) {
-                            insertNewBulletAfter(-1, 0);
-                          }
-                        }
-                      }}
-                      placeholder="Dokument-Titel…"
-                      className={`w-full bg-transparent text-xl sm:text-2xl font-bold text-main focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap placeholder:text-faint p-0 m-0 border-0 ${
-                        isReadOnly ? 'cursor-default' : ''
-                      }`}
-                    />
-                  </div>
-                )}
-
-                {/* If zoomed, show zoomed block as editable prominent header */}
-                {zoomedBlock && (
-                  <div className="pb-2 border-b border-border flex items-center gap-2.5">
-                    <span className="w-2.5 h-2.5 rounded-pill bg-accent flex-shrink-0" />
-                    <textarea
-                      rows={1}
-                      ref={(el) => {
-                        if (el) autoResizeTextarea(el);
-                      }}
-                      readOnly={isReadOnly}
-                      value={zoomedBlock.content}
-                      onFocus={handleBlockFocus}
-                      onBlur={handleBlockBlur}
-                      onChange={(e) => {
-                        if (!isReadOnly) {
-                          autoResizeTextarea(e.target);
-                          updateBlock(zoomedBlock.id, { content: e.target.value });
-                        }
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' && !isReadOnly) {
-                          e.preventDefault();
-                          if (
-                            visibleBlocks.length > 0 &&
-                            (!visibleBlocks[0].block.content || visibleBlocks[0].block.content.trim() === '')
-                          ) {
-                            focusBlock(visibleBlocks[0].block.id);
-                            return;
-                          }
-                          const zoomIdx = selectedDoc.blocks.findIndex((b) => b.id === zoomedBlock.id);
-                          if (zoomIdx !== -1) {
-                            insertNewBulletAfter(zoomIdx, (zoomedBlock.level || 0) + 1);
-                          }
-                        }
-                      }}
-                      placeholder="Aufzählungspunkt…"
-                      className={`w-full bg-transparent text-xl font-bold text-main focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap placeholder:text-faint p-0 m-0 border-0 ${
-                        isReadOnly ? 'cursor-default' : ''
-                      }`}
-                    />
-                  </div>
-                )}
-
-                {/* =========================================================== */}
-                {/* LOGSEQ HIERARCHICAL BULLET LIST CANVAS                      */}
-                {/* =========================================================== */}
-                <div
-                  className="space-y-1 pt-2 min-h-[500px] pb-16 flex flex-col cursor-text"
-                  onClick={(e) => {
-                    if (e.target === e.currentTarget) {
-                      handleCanvasBottomClick();
-                    }
-                  }}
-                >
-                  {zoomedBlock && visibleBlocks.length === 0 && !isReadOnly && (
-                    <div
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleCanvasBottomClick();
-                      }}
-                      className="group flex items-center gap-1 py-1 cursor-text text-faint hover:text-muted transition-colors"
-                    >
-                      <div className="w-3 flex-shrink-0" />
-                      <div className="w-4 flex-shrink-0" />
-                      <div className="w-4 h-4 rounded-pill flex items-center justify-center flex-shrink-0">
-                        <span className="w-1.5 h-1.5 rounded-pill bg-muted group-hover:bg-accent transition-colors" />
-                      </div>
-                      <span className="text-sm pl-0.5 select-none">
-                        Klicken, um einen Unterpunkt zu erstellen…
-                      </span>
-                    </div>
-                  )}
-
-                  {visibleBlocks.map(({ block, originalIndex }) => {
-                    const blockLevel = Math.max(0, (block.level || 0) - (zoomedBlock ? (zoomedBlock.level || 0) + 1 : 0));
-                    const isChildrenPresent = hasChildren(selectedDoc.blocks, originalIndex);
-                    const isDraggingThis = draggingBlockId === block.id;
-                    const isTargetThis = dragOverBlockTarget?.blockId === block.id;
-
-                    return (
-                      <div
-                        key={block.id}
-                        onDragOver={(e) => !isReadOnly && handleBlockDragOver(e, block.id)}
-                        onDragLeave={(e) => !isReadOnly && handleBlockDragLeave(e, block.id)}
-                        onDrop={(e) => !isReadOnly && handleBlockDrop(e, block.id)}
-                        style={{ paddingLeft: `${blockLevel * 20}px` }}
-                        className={`group flex items-start gap-0.5 py-0.5 relative transition-all rounded ${
-                          isDraggingThis ? 'opacity-30 border border-dashed border-accent/40' : ''
-                        } ${
-                          isTargetThis && dragOverBlockTarget.position === 'inside'
-                            ? 'ring-2 ring-accent/60 bg-accent/10 shadow-sm'
-                            : ''
-                        }`}
-                      >
-                        {/* Drop indicator lines */}
-                        {isTargetThis && dragOverBlockTarget.position === 'before' && (
-                          <div className="absolute top-0 left-0 right-0 h-0.5 bg-accent z-20 pointer-events-none rounded-full shadow-[0_0_8px_rgba(var(--accent-rgb),0.6)]" />
-                        )}
-                        {isTargetThis && dragOverBlockTarget.position === 'after' && (
-                          <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent z-20 pointer-events-none rounded-full shadow-[0_0_8px_rgba(var(--accent-rgb),0.6)]" />
-                        )}
-                        {isTargetThis && dragOverBlockTarget.position === 'inside' && (
-                          <div className="absolute left-0 top-0 bottom-0 w-1 bg-accent rounded-l z-20 pointer-events-none" />
-                        )}
-
-                        {/* Drag Handle on hover - tightened spacing to the bullet */}
-                        <div
-                          draggable={!isReadOnly}
-                          onDragStart={(e) => !isReadOnly && handleBlockDragStart(e, block.id)}
-                          onDragEnd={handleBlockDragEnd}
-                          className="opacity-0 group-hover:opacity-100 flex items-center pt-1 text-faint hover:text-accent cursor-grab active:cursor-grabbing flex-shrink-0 -ml-1 mr-0.5"
-                          title="Ziehen zum Verschieben"
-                        >
-                          <GripVertical className="w-3 h-3" />
-                        </div>
-
-                        {/* Collapse Chevron if block has children */}
-                        {isChildrenPresent ? (
-                          <button
-                            type="button"
-                            onClick={() => toggleCollapse(block.id)}
-                            className="w-3.5 h-3.5 mt-0.5 flex items-center justify-center text-muted hover:text-main flex-shrink-0"
-                            title={block.collapsed ? 'Unterpunkte aufklappen' : 'Unterpunkte einklappen'}
-                          >
-                            {block.collapsed ? (
-                              <ChevronRight className="w-2.5 h-2.5 text-accent" />
-                            ) : (
-                              <ChevronDown className="w-2.5 h-2.5" />
-                            )}
-                          </button>
-                        ) : (
-                          <div className="w-1.5 flex-shrink-0" />
-                        )}
-
-                        {/* Interactive Bullet Dot (Click: Zoom-in! Drag: Reorder! Drop on it: Nest as child!) */}
-                        <div
-                          draggable={!isReadOnly}
-                          onDragStart={(e) => !isReadOnly && handleBlockDragStart(e, block.id)}
-                          onDragEnd={handleBlockDragEnd}
-                          onDragOver={(e) => {
-                            if (!isReadOnly && draggingBlockId && draggingBlockId !== block.id) {
-                              e.preventDefault();
-                              e.stopPropagation();
-                              setDragOverBlockTarget({ blockId: block.id, position: 'inside' });
-                            }
-                          }}
-                          onDrop={(e) => {
-                            if (!isReadOnly) {
-                              e.preventDefault();
-                              e.stopPropagation();
-                              handleBlockDrop(e, block.id, 'inside');
-                            }
-                          }}
-                          onClick={() => handleZoomTo(block.id)}
-                          className={`w-4 h-4 mt-1 rounded-pill flex items-center justify-center transition-colors flex-shrink-0 ${
-                            isReadOnly
-                              ? 'cursor-pointer text-muted'
-                              : 'hover:bg-accent/20 cursor-grab active:cursor-grabbing text-muted hover:text-accent'
-                          } ${
-                            isTargetThis && dragOverBlockTarget.position === 'inside'
-                              ? 'scale-125 bg-accent/30 ring-2 ring-accent'
-                              : ''
-                          }`}
-                          title="Klick: Zoomen · Ziehen: Verschieben · Hierher ziehen: Als Unterpunkt einordnen"
-                        >
-                          <span
-                            className={`w-1.5 h-1.5 rounded-pill transition-colors ${
-                              isChildrenPresent
-                                ? 'bg-accent ring-2 ring-accent/30'
-                                : 'bg-muted group-hover:bg-accent'
-                            }`}
-                          />
-                        </div>
-
-                        {/* Block Content Container */}
-                        <div className="flex-1 min-w-0 pt-0.5 relative">
-                          {/* Live Collaborator Presence Indicator */}
-                          {activePeers.filter((c) => c.activeBlockId === block.id).map((c) => (
-                            <div
-                              key={c.userId}
-                              className="absolute -top-3.5 right-1 text-[10px] px-1.5 py-0.5 rounded font-semibold text-white shadow-xs pointer-events-none z-10 flex items-center gap-1 animate-fadeIn"
-                              style={{ backgroundColor: c.color }}
-                            >
-                              <span className="w-1.5 h-1.5 rounded-full bg-white animate-ping" />
-                              <span>{c.userName}</span>
-                            </div>
-                          ))}
-
-                          {/* TYPE: TODO */}
-                          {block.type === 'todo' && (
-                            <div className="space-y-1">
-                              <div className="flex items-start gap-2 group/todo">
-                                <input
-                                  type="checkbox"
-                                  disabled={isReadOnly}
-                                  checked={!!block.checked}
-                                  onChange={(e) => {
-                                    if (!isReadOnly && selectedDoc) {
-                                      const nextBlocks = selectedDoc.blocks.map((b) =>
-                                        b.id === block.id ? { ...b, checked: e.target.checked } : b
-                                      );
-                                      persistDocument({ ...selectedDoc, blocks: nextBlocks }, true);
-                                      onStatsChange();
-                                    }
-                                  }}
-                                  className={`w-4 h-4 mt-1 checkbox-square flex-shrink-0 ${
-                                    isReadOnly ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'
-                                  }`}
-                                />
-                                {renderLiveInlineBlock(
-                                  block,
-                                  originalIndex,
-                                  block.checked ? 'line-through text-faint' : 'text-main'
-                                )}
-                                {!isReadOnly && (
-                                  <button
-                                    type="button"
-                                    onClick={() => insertNewBulletAfter(originalIndex, (block.level || 0) + 1, 'todo')}
-                                    className="opacity-0 group-hover/todo:opacity-100 p-0.5 text-muted hover:text-accent rounded transition-opacity cursor-pointer flex-shrink-0"
-                                    title="Unteraufgabe erstellen"
-                                  >
-                                    <Plus className="w-3.5 h-3.5" />
-                                  </button>
-                                )}
-                              </div>
-
-                              {/* Progress bar for child todos if any exist */}
-                              {(() => {
-                                const childTodos = getDirectChildTodos(selectedDoc?.blocks || [], originalIndex);
-                                if (childTodos.length === 0) return null;
-                                const doneChild = childTodos.filter((c) => c.checked).length;
-                                const totalChild = childTodos.length;
-                                const pct = Math.round((doneChild / totalChild) * 100);
-                                return (
-                                  <div
-                                    className="space-y-0.5 ml-6 pt-0.5 select-none"
-                                    title={`${doneChild} von ${totalChild} Unteraufgaben erledigt (${pct}%)`}
-                                  >
-                                    <div className="flex items-center justify-between text-[10px] text-muted">
-                                      <span>
-                                        {doneChild}/{totalChild} erledigt
-                                      </span>
-                                      <span className={pct === 100 ? 'text-status-ok font-bold' : ''}>
-                                        {pct}%
-                                      </span>
-                                    </div>
-                                    <div className="w-full h-1 bg-border rounded-full overflow-hidden">
-                                      <div
-                                        className={`h-full transition-all duration-300 ${
-                                          pct === 100 ? 'bg-status-ok' : 'bg-accent'
-                                        }`}
-                                        style={{ width: `${pct}%` }}
-                                      />
-                                    </div>
-                                  </div>
-                                );
-                              })()}
-                            </div>
-                          )}
-
-                          {/* TYPE: H1 */}
-                          {block.type === 'h1' && (
-                            <textarea
-                              ref={(el) => {
-                                blockInputRefs.current[block.id] = el;
-                                if (el) autoResizeTextarea(el);
-                              }}
-                              rows={1}
-                              readOnly={isReadOnly}
-                              value={block.content}
-                              onFocus={() => handleBlockFocus(block.id)}
-                              onBlur={handleBlockBlur}
-                              onChange={(e) => {
-                                autoResizeTextarea(e.target);
-                                const pos = e.target.selectionStart;
-                                if (typeof pos === 'number') activeCursorOffsetRef.current = pos;
-                                handleContentChange(block, e.target.value);
-                              }}
-                              onSelect={(e) => {
-                                const target = e.target as HTMLTextAreaElement;
-                                if (typeof target.selectionStart === 'number') activeCursorOffsetRef.current = target.selectionStart;
-                              }}
-                              onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
-                              className={`w-full bg-transparent text-lg font-bold text-main focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap p-0 m-0 border-0 ${
-                                isReadOnly ? 'cursor-default' : ''
-                              }`}
-                            />
-                          )}
-
-                          {/* TYPE: H2 */}
-                          {block.type === 'h2' && (
-                            <textarea
-                              ref={(el) => {
-                                blockInputRefs.current[block.id] = el;
-                                if (el) autoResizeTextarea(el);
-                              }}
-                              rows={1}
-                              readOnly={isReadOnly}
-                              value={block.content}
-                              onFocus={() => handleBlockFocus(block.id)}
-                              onBlur={handleBlockBlur}
-                              onChange={(e) => {
-                                autoResizeTextarea(e.target);
-                                const pos = e.target.selectionStart;
-                                if (typeof pos === 'number') activeCursorOffsetRef.current = pos;
-                                handleContentChange(block, e.target.value);
-                              }}
-                              onSelect={(e) => {
-                                const target = e.target as HTMLTextAreaElement;
-                                if (typeof target.selectionStart === 'number') activeCursorOffsetRef.current = target.selectionStart;
-                              }}
-                              onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
-                              className={`w-full bg-transparent text-base font-semibold text-accent focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap p-0 m-0 border-0 ${
-                                isReadOnly ? 'cursor-default' : ''
-                              }`}
-                            />
-                          )}
-
-                          {/* TYPE: H3 */}
-                          {block.type === 'h3' && (
-                            <textarea
-                              ref={(el) => {
-                                blockInputRefs.current[block.id] = el;
-                                if (el) autoResizeTextarea(el);
-                              }}
-                              rows={1}
-                              readOnly={isReadOnly}
-                              value={block.content}
-                              onFocus={() => handleBlockFocus(block.id)}
-                              onBlur={handleBlockBlur}
-                              onChange={(e) => {
-                                autoResizeTextarea(e.target);
-                                const pos = e.target.selectionStart;
-                                if (typeof pos === 'number') activeCursorOffsetRef.current = pos;
-                                handleContentChange(block, e.target.value);
-                              }}
-                              onSelect={(e) => {
-                                const target = e.target as HTMLTextAreaElement;
-                                if (typeof target.selectionStart === 'number') activeCursorOffsetRef.current = target.selectionStart;
-                              }}
-                              onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
-                              className={`w-full bg-transparent text-sm font-semibold text-main focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap p-0 m-0 border-0 ${
-                                isReadOnly ? 'cursor-default' : ''
-                              }`}
-                            />
-                          )}
-
-                          {/* TYPE: CALLOUT */}
-                          {block.type === 'callout' && (
-                            <div className="p-2 bg-canvas border border-accent/40 rounded-card flex items-start gap-2">
-                              <Sparkles className="w-3.5 h-3.5 text-accent flex-shrink-0 mt-0.5" />
-                              <textarea
-                                ref={(el) => (blockInputRefs.current[block.id] = el)}
-                                readOnly={isReadOnly}
-                                rows={Math.max(1, (block.content || '').split('\n').length, Math.ceil((block.content || '').length / 70))}
-                                value={block.content}
-                                onFocus={handleBlockFocus}
-                                onBlur={handleBlockBlur}
-                                onChange={(e) => handleContentChange(block, e.target.value)}
-                                onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
-                                className={`w-full bg-transparent text-xs text-main focus:outline-none resize-none ${
-                                  isReadOnly ? 'cursor-default' : ''
-                                }`}
-                              />
-                            </div>
-                          )}
-
-                          {/* TYPE: CODE */}
-                          {block.type === 'code' && (
-                            <CodeBlockItem
-                              block={block}
-                              isReadOnly={isReadOnly}
-                              inputRef={(el) => (blockInputRefs.current[block.id] = el)}
-                              onFocus={handleBlockFocus}
-                              onBlur={handleBlockBlur}
-                              onChangeContent={(content) => handleContentChange(block, content)}
-                              onChangeLang={(lang) => {
-                                if (!isReadOnly) {
-                                  updateBlock(block.id, { lang });
-                                }
-                              }}
-                            />
-                          )}
-
-                          {/* TYPE: TABLE */}
-                          {block.type === 'table' && (
-                            <div className="p-2 bg-canvas border border-border rounded-card space-y-1">
-                              <div className="flex items-center gap-1 text-[11px] text-muted font-semibold">
-                                <TableIcon className="w-3 h-3 text-accent" /> Markdown Tabelle
-                              </div>
-                              <textarea
-                                ref={(el) => (blockInputRefs.current[block.id] = el)}
-                                readOnly={isReadOnly}
-                                rows={Math.max(3, (block.content || '').split('\n').length)}
-                                value={block.content}
-                                onFocus={handleBlockFocus}
-                                onBlur={handleBlockBlur}
-                                onChange={(e) => handleContentChange(block, e.target.value)}
-                                onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
-                                className={`w-full bg-transparent font-mono text-xs text-main focus:outline-none resize-none ${
-                                  isReadOnly ? 'cursor-default' : ''
-                                }`}
-                              />
-                            </div>
-                          )}
-
-                          {/* TYPE: PROGRESS */}
-                          {block.type === 'progress' && (
-                            <div className="p-2 bg-canvas border border-border rounded-card space-y-1.5">
-                              <div className="flex items-center justify-between text-xs">
-                                <span className="text-main font-medium flex items-center gap-1">
-                                  <Percent className="w-3 h-3 text-accent" /> Fortschritt
-                                </span>
-                                <span className="font-mono text-accent font-semibold">
-                                  {parseInt(block.content) || 0}%
-                                </span>
-                              </div>
-                              <div className="w-full bg-panel h-2 overflow-hidden border border-border rounded-pill">
-                                <div
-                                  className="bg-accent h-full transition-all rounded-pill"
-                                  style={{
-                                    width: `${Math.min(100, Math.max(0, parseInt(block.content) || 0))}%`,
-                                  }}
-                                />
-                              </div>
-                              <input
-                                type="range"
-                                min="0"
-                                max="100"
-                                disabled={isReadOnly}
-                                value={parseInt(block.content) || 0}
-                                onChange={(e) => !isReadOnly && updateBlock(block.id, { content: e.target.value })}
-                                className={`w-full accent-accent ${isReadOnly ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
-                              />
-                            </div>
-                          )}
-
-                          {/* TYPE: DIVIDER */}
-                          {block.type === 'divider' && (
-                            <div
-                              tabIndex={isReadOnly ? undefined : 0}
-                              onKeyDown={(e) => {
-                                if (!isReadOnly && e.key === 'Enter') {
-                                  e.preventDefault();
-                                  insertNewBulletAfter(originalIndex, block.level || 0);
-                                } else if (!isReadOnly && (e.key === 'Backspace' || e.key === 'Delete')) {
-                                  e.preventDefault();
-                                  deleteSingleBlock(block.id, true);
-                                }
-                              }}
-                              onClick={() => {
-                                if (!isReadOnly) {
-                                  insertNewBulletAfter(originalIndex, block.level || 0);
-                                }
-                              }}
-                              className="py-2.5 my-1 group/divider relative cursor-pointer focus:outline-none"
-                              title={isReadOnly ? undefined : "Klicken oder Enter drücken, um darunter einen neuen Aufzählungspunkt einzufügen"}
-                            >
-                              <div className="h-0.5 w-full bg-border group-hover/divider:bg-accent/70 group-focus/divider:bg-accent transition-colors rounded-full" />
-                              {!isReadOnly && (
-                                <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover/divider:opacity-100 transition-opacity pointer-events-none">
-                                  <span className="bg-panel border border-border text-[10px] text-muted px-2 py-0.5 rounded-full shadow-xs flex items-center gap-1 font-medium">
-                                    <Plus className="w-3 h-3 text-accent" />
-                                    <span>Punkt einfügen</span>
-                                  </span>
-                                </div>
-                              )}
-                            </div>
-                          )}
-
-                          {/* TYPE: DEFAULT BULLET / PARAGRAPH */}
-                          {(block.type === 'bullet' || block.type === 'paragraph') && (
-                            <div className="space-y-0.5">
-                              {renderLiveInlineBlock(block, originalIndex, 'text-main')}
-                            </div>
-                          )}
-
-                          {/* FLOATING SLASH COMMAND MENU */}
-                          {!isReadOnly && slashBlockId === block.id && (
-                            <div className="absolute top-7 left-0 z-40 w-64 bg-panel border border-border shadow-panel rounded-card p-1 space-y-0.5">
-                              <div className="px-2 py-1 text-[10px] text-faint font-semibold uppercase tracking-wider border-b border-border">
-                                Block-Typ wählen:
-                              </div>
-                              <div ref={slashMenuRef} className="relative max-h-48 overflow-y-auto space-y-0.5">
-                                {filteredSlashCommands.map((cmd, idx) => (
-                                  <button
-                                    key={cmd.label || idx}
-                                    type="button"
-                                    data-slash-index={idx}
-                                    onMouseDown={(e) => e.preventDefault()}
-                                    onClick={() => applySlashCommand(block.id, cmd)}
-                                    className={`w-full text-left px-2 py-1.5 rounded-btn text-xs flex items-center justify-between transition-colors ${
-                                      slashSelectedIndex === idx
-                                        ? 'bg-accent text-on-accent'
-                                        : 'text-main hover:bg-panel-elevated'
-                                    }`}
-                                  >
-                                    <span className="font-semibold">{cmd.label}</span>
-                                    <span className="text-[10px] opacity-80">{cmd.desc}</span>
-                                  </button>
-                                ))}
-                                {filteredSlashCommands.length === 0 && (
-                                  <div className="p-2 text-center text-xs text-faint">
-                                    Kein Befehl gefunden
-                                  </div>
-                                )}
-                              </div>
-                            </div>
-                          )}
-                        </div>
-
-                        {/* Quick Delete Block on Hover */}
-                        {!isReadOnly && (
-                          <button
-                            type="button"
-                            onClick={() => handleDeleteButtonClick(block.id)}
-                            className="opacity-0 group-hover:opacity-100 p-0.5 text-faint hover:text-status-err rounded transition-opacity cursor-pointer"
-                            title="Bullet löschen"
-                          >
-                            <X className="w-3 h-3" />
-                          </button>
-                        )}
-                      </div>
-                    );
-                  })}
-
-                  {/* Empty area below blocks to click and seamlessly focus or create bullet */}
-                  {!isReadOnly && (
-                    <div
-                      className="flex-1 min-h-[250px] cursor-text"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleCanvasBottomClick();
-                      }}
-                    />
-                  )}
-                </div>
-              </div>
-            ) : (
-              <div className="p-8 panel-surface text-center space-y-3">
-                <FolderTree className="w-8 h-8 text-accent/60 mx-auto" />
-                <p className="text-xs text-muted">Keine Notiz geöffnet.</p>
-                <div className="flex flex-wrap items-center justify-center gap-2 pt-1">
+              <div className="space-y-0.5">
+                {pinnedDocs.map((d) => (
                   <button
+                    key={`pin-${d.id}`}
                     type="button"
                     onClick={() => {
-                      setWorkspaceMode('editor');
-                      setShowMobileFileDrawer(true);
+                      setSelectedDocId(d.id);
+                      setSubView('editor');
+                      setMobileShowDetail(true);
                     }}
-                    className="btn-action h-8 px-3 text-xs flex items-center gap-1.5 cursor-pointer"
+                    className={`w-full flex items-center gap-2 px-2.5 py-1.5 rounded-xl text-left text-xs transition-colors ${
+                      selectedDocId === d.id && subView === 'editor'
+                        ? 'bg-indigo-600 text-white font-semibold shadow-sm'
+                        : 'text-slate-700 dark:text-slate-300 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
+                    }`}
                   >
-                    <FolderTree className="w-3.5 h-3.5 text-accent" />
-                    <span>Dateibaum öffnen</span>
+                    <span>{d.icon || '📝'}</span>
+                    <span className="truncate flex-1">{d.title || 'Unbenannte Notiz'}</span>
                   </button>
-                  <button
-                    type="button"
-                    onClick={() => handleCreateDoc(null)}
-                    className="btn-primary h-8 px-3 text-xs flex items-center gap-1.5 cursor-pointer"
-                  >
-                    <FilePlus className="w-3.5 h-3.5" />
-                    <span>Neue Notiz anlegen</span>
-                  </button>
-                </div>
+                ))}
               </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* ===================================================================== */}
-      {/* VIEW MODE 2: GLOBAL WORKSPACE TO-DO ROLLUP DASHBOARD                  */}
-      {/* ===================================================================== */}
-      {workspaceMode === 'todos' && (
-        <div className="p-4 panel-surface space-y-4">
-          {/* Header & Filter Controls */}
-          <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border pb-3">
-            <div>
-              <h2 className="text-sm font-bold text-main flex items-center gap-2">
-                <CheckSquare className="w-4 h-4 text-accent" />
-                <span>Globale To-Dos</span>
-              </h2>
-            </div>
-
-            <div className="flex items-center gap-2">
-              <div className="flex border border-border rounded-btn bg-canvas overflow-hidden text-xs">
-                <button
-                  type="button"
-                  onClick={() => setTodoFilter('open')}
-                  className={`px-3 py-1.5 transition-colors border-r border-border ${
-                    todoFilter === 'open' ? 'bg-panel text-main font-medium' : 'text-muted hover:text-main'
-                  }`}
-                >
-                  Nur Offene ({allWorkspaceTodos.filter((t) => !t.block.checked).length})
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setTodoFilter('all')}
-                  className={`px-3 py-1.5 transition-colors border-r border-border ${
-                    todoFilter === 'all' ? 'bg-panel text-main font-medium' : 'text-muted hover:text-main'
-                  }`}
-                >
-                  Alle ({allWorkspaceTodos.length})
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setTodoFilter('done')}
-                  className={`px-3 py-1.5 transition-colors ${
-                    todoFilter === 'done' ? 'bg-panel text-main font-medium' : 'text-muted hover:text-main'
-                  }`}
-                >
-                  Erledigt ({allWorkspaceTodos.filter((t) => t.block.checked).length})
-                </button>
-              </div>
-
-              {todoFolderDrilldown && (
-                <button
-                  type="button"
-                  onClick={() => setTodoFolderDrilldown(null)}
-                  className="btn-action text-xs"
-                >
-                  ← Alle Ordner
-                </button>
-              )}
-            </div>
-          </div>
-
-          {/* Drilldown Active Notification Banner */}
-          {todoFolderDrilldown && (
-            <div className="p-2.5 bg-canvas border border-accent/40 rounded-card flex items-center justify-between text-xs">
-              <span className="flex items-center gap-1.5 text-main">
-                <Folder className="w-3.5 h-3.5 text-accent" />
-                <span>Gefiltert auf Ordner: <strong>{todoFolderDrilldown}</strong></span>
-              </span>
-              <button
-                type="button"
-                onClick={() => setTodoFolderDrilldown(null)}
-                className="text-accent hover:underline"
-              >
-                Filter entfernen
-              </button>
             </div>
           )}
 
-          {/* Folders & Files Hierarchy Accordion */}
-          {todosByFolder.size === 0 ? (
-            <div className="p-8 text-center text-muted text-xs space-y-1">
-              <Sparkles className="w-6 h-6 text-accent mx-auto mb-1" />
-              <p className="font-semibold text-main">Keine To-Dos in Notizen gefunden!</p>
-              <p className="text-faint">
-                Tippe in einem beliebigen Dokument <code>/todo</code> oder <code>- [ ]</code> ein, um Aufgaben anzulegen.
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {Array.from(todosByFolder.entries()).map(([folderName, items]) => {
-                const isCollapsed = collapsedTodoFolders.has(folderName);
-                const openCount = items.filter((i) => !i.block.checked).length;
-
-                // Group items within this folder by document
-                const docsInFolder = new Map<string, typeof items>();
-                items.forEach((item) => {
-                  const arr = docsInFolder.get(item.docId) || [];
-                  arr.push(item);
-                  docsInFolder.set(item.docId, arr);
-                });
-
-                return (
-                  <div key={folderName} className="border border-border rounded-card bg-canvas overflow-hidden">
-                    {/* Folder Header Accordion */}
-                    <div className="p-2.5 bg-panel-elevated border-b border-border flex items-center justify-between">
-                      <div
-                        onClick={() => {
-                          setCollapsedTodoFolders((prev) => {
-                            const next = new Set(prev);
-                            if (next.has(folderName)) next.delete(folderName);
-                            else next.add(folderName);
-                            return next;
-                          });
-                        }}
-                        className="flex items-center gap-2 cursor-pointer select-none"
-                      >
-                        {isCollapsed ? (
-                          <ChevronRight className="w-4 h-4 text-muted" />
-                        ) : (
-                          <ChevronDown className="w-4 h-4 text-accent" />
-                        )}
-                        <Folder className="w-4 h-4 text-accent" />
-                        <span className="font-bold text-xs text-main">{folderName}</span>
-                        <span className="badge-neutral text-[10px] font-mono">
-                          {openCount} offen
-                        </span>
-                      </div>
-
-                      <button
-                        type="button"
-                        onClick={() => setTodoFolderDrilldown(folderName)}
-                        className="text-[11px] text-muted hover:text-main px-2 py-0.5 rounded hover:bg-canvas/50"
-                        title="Diesen Ordner isolieren"
-                      >
-                        Nur diesen Ordner
-                      </button>
-                    </div>
-
-                    {/* Folder Documents & Tasks */}
-                    {!isCollapsed && (
-                      <div className="p-3 space-y-3">
-                        {Array.from(docsInFolder.entries()).map(([docId, docItems]) => {
-                          const docInfo = docItems[0];
-                          return (
-                            <div
-                              key={docId}
-                              className="p-2.5 bg-panel border border-border rounded-card space-y-2"
-                            >
-                              {/* Document header in rollup */}
-                              <div className="flex items-center justify-between border-b border-border pb-1.5">
-                                <button
-                                  type="button"
-                                  onClick={() => handleJumpToDoc(docId)}
-                                  className="text-xs font-semibold text-accent hover:underline flex items-center gap-1.5"
-                                  title="Zur Notiz im Editor springen"
-                                >
-                                  <span>{docInfo.docIcon}</span>
-                                  <span>{docInfo.docTitle}</span>
-                                  <ExternalLink className="w-3 h-3 opacity-60" />
-                                </button>
-                                <span className="text-[10px] text-faint font-mono">
-                                  {docItems.filter((i) => !i.block.checked).length} / {docItems.length}
-                                </span>
-                              </div>
-
-                              {/* To-Do Items inside Document */}
-                              <div className="space-y-1.5 pl-1">
-                                {docItems.map(({ block }) => (
-                                  <div
-                                    key={block.id}
-                                    onClick={() => handleToggleRollupTodo(docId, block.id)}
-                                    className="flex items-center gap-2 cursor-pointer group py-0.5 select-none"
-                                  >
-                                    <input
-                                      type="checkbox"
-                                      checked={!!block.checked}
-                                      onChange={() => handleToggleRollupTodo(docId, block.id)}
-                                      className="w-4 h-4 checkbox-square cursor-pointer flex-shrink-0"
-                                    />
-                                    <span
-                                      className={`text-xs ${
-                                        block.checked
-                                          ? 'line-through text-faint'
-                                          : 'text-main group-hover:text-accent'
-                                      } transition-colors`}
-                                    >
-                                      {block.content || '(Leere Aufgabe)'}
-                                    </span>
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* ===================================================================== */}
-      {/* VIEW MODE 3: HASHTAG / THEMEN-SEITE (LOGSEQ STYLE)                   */}
-      {/* ===================================================================== */}
-      {workspaceMode === 'tags' && (
-        <div className="space-y-4">
-          {/* Header Toolbar */}
-          <div className="p-4 panel-surface space-y-3 border border-border rounded-card">
-            {selectedTag && (
-              <div>
-                <button
-                  type="button"
-                  onClick={() => setSelectedTag(null)}
-                  className="inline-flex items-center gap-1 text-[11px] font-medium text-muted hover:text-accent transition-colors cursor-pointer"
-                  title="Zurück zur Themen-Übersicht"
-                >
-                  <ArrowLeft className="w-3 h-3 text-accent" />
-                  <span>Alle Themen</span>
-                </button>
-              </div>
-            )}
-
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              <div className="flex items-center gap-2.5">
-                {selectedTag ? (
-                  <>
-                    <div className="w-9 h-9 rounded-lg bg-blue-500/10 border border-blue-500/30 flex items-center justify-center text-blue-500 dark:text-blue-400 font-bold flex-shrink-0">
-                      <Hash className="w-5 h-5" />
-                    </div>
-                    <div>
-                      <h2 className="text-base font-bold text-main leading-tight flex items-center gap-1.5">
-                        <span>#{selectedTag}</span>
-                      </h2>
-                      <p className="text-[11px] text-muted">
-                        {isLoadingTag
-                          ? 'Wird geladen…'
-                          : `${tagDetails?.totalMatches || 0} ${
-                              tagDetails?.totalMatches === 1 ? 'Abschnitt' : 'Abschnitte'
-                            } in ${tagDetails?.documents.length || 0} ${
-                              tagDetails?.documents.length === 1 ? 'Notiz' : 'Notizen'
-                            }`}
-                      </p>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <div className="w-9 h-9 rounded-lg bg-accent-dim border border-accent-border flex items-center justify-center text-accent flex-shrink-0">
-                      <Hash className="w-5 h-5" />
-                    </div>
-                    <div>
-                      <h2 className="text-base font-bold text-main leading-tight">Themen & Hashtags</h2>
-                      <p className="text-[11px] text-muted">
-                        {workspaceTags.length} {workspaceTags.length === 1 ? 'Thema' : 'Themen'} im gesamten Workspace
-                      </p>
-                    </div>
-                  </>
-                )}
-              </div>
-
-              {/* Search Bar for tags */}
-              <div className="relative flex-1 min-w-[200px] max-w-xs">
-                <Search className="w-3.5 h-3.5 text-muted absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
-                <input
-                  type="text"
-                  value={tagSearchQuery}
-                  onChange={(e) => setTagSearchQuery(e.target.value)}
-                  placeholder="Hashtags durchsuchen…"
-                  className="w-full h-8 pl-8 pr-7 input-field text-xs rounded-btn"
-                />
-                {tagSearchQuery && (
-                  <button
-                    type="button"
-                    onClick={() => setTagSearchQuery('')}
-                    className="absolute right-2 top-1/2 -translate-y-1/2 text-muted hover:text-main"
-                    title="Suche leeren"
-                  >
-                    <X className="w-3.5 h-3.5" />
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-
-          {/* If NO tag is selected, show the big overview grid! */}
-          {!selectedTag ? (
+          {/* Folders Tree */}
+          {allFolderPaths.length > 0 && (
             <div>
-              {filteredWorkspaceTags.length === 0 ? (
-                <div className="p-12 text-center text-muted text-xs panel-surface space-y-2 border border-border rounded-card">
-                  <Hash className="w-8 h-8 mx-auto text-faint" />
-                  <p className="font-medium text-main">
-                    {tagSearchQuery
-                      ? `Keine Hashtags gefunden für "${tagSearchQuery}"`
-                      : 'Noch keine Themen oder Hashtags vorhanden'}
-                  </p>
-                  <p className="text-xs text-faint">
-                    Füge einfach in irgendeiner Notiz ein Tag wie <code className="text-accent">#projekt</code> oder <code className="text-accent">#idee</code> ein.
-                  </p>
-                </div>
-              ) : (
-                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-                  {filteredWorkspaceTags.map((wt) => (
-                    <div
-                      key={wt.tag}
-                      onClick={() => openTagPage(wt.tag)}
-                      className="group panel-surface p-4 rounded-card border border-border hover:border-accent hover:shadow-md cursor-pointer transition-all flex flex-col justify-between"
-                    >
-                      <div className="flex items-start justify-between gap-2 mb-3">
-                        <div className="w-8 h-8 rounded-lg badge-accent flex items-center justify-center text-accent group-hover:scale-105 transition-transform">
-                          <Hash className="w-4 h-4" />
-                        </div>
-                        <span className="badge-neutral text-[10px] font-mono">
-                          {wt.count} {wt.count === 1 ? 'Abschnitt' : 'Abschnitte'}
-                        </span>
-                      </div>
-                      <div>
-                        <h3 className="font-bold text-sm text-main group-hover:text-accent transition-colors truncate">
-                          #{wt.tag}
-                        </h3>
-                        <p className="text-[11px] text-muted mt-2 flex items-center justify-between group-hover:text-main">
-                          <span>Abschnitte ansehen</span>
-                          <ExternalLink className="w-3 h-3 group-hover:translate-x-0.5 transition-transform text-accent" />
-                        </p>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          ) : isLoadingTag ? (
-            <div className="p-12 text-center text-muted text-xs panel-surface">
-              <Sparkles className="w-6 h-6 animate-spin mx-auto mb-2 text-accent" />
-              Hashtag-Verknüpfungen werden geladen…
-            </div>
-          ) : (
-            <div className="space-y-4">
-              {/* Dedicated Logseq-Style Hashtag Markdown Note Card (#tag.md) */}
-              <div className="panel-surface p-4 space-y-2.5 border border-border rounded-card">
-                <div className="flex flex-wrap items-center justify-between gap-2 pb-2 border-b border-border">
-                  <div className="flex items-center gap-2">
-                    <FileText className="w-3.5 h-3.5 text-accent" />
-                    <span className="text-xs font-bold text-main">
-                      Eigene Notiz zu #{selectedTag}
-                    </span>
-                    <span className="badge-neutral text-[10px] font-mono">
-                      #{selectedTag}.md
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-[10px] text-faint font-mono">
-                      {tagNoteSaveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
-                    </span>
-                    <button
-                      type="button"
-                      onClick={handleExportTagMarkdown}
-                      className="btn-action h-6 px-2 text-[11px] flex items-center gap-1"
-                      title={`#${selectedTag}.md herunterladen`}
-                    >
-                      <Download className="w-3 h-3" />
-                      <span>.md</span>
-                    </button>
-                  </div>
-                </div>
-
-                <textarea
-                  value={tagNoteContent}
-                  onChange={(e) => handleTagNoteChange(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Tab') {
-                      e.preventDefault();
-                      const target = e.currentTarget;
-                      const start = target.selectionStart;
-                      const end = target.selectionEnd;
-                      const nextVal =
-                        tagNoteContent.slice(0, start) + '  ' + tagNoteContent.slice(end);
-                      handleTagNoteChange(nextVal);
-                      requestAnimationFrame(() => {
-                        target.setSelectionRange(start + 2, start + 2);
-                      });
-                    }
-                  }}
-                  rows={Math.max(4, tagNoteContent.split('\n').length + 1)}
-                  placeholder={`Eigene Gedanken, Zusammenfassungen oder Markdown-Notizen direkt zum Thema #${selectedTag} festhalten (unabhängig von den anderen Workspace-Notizen)…`}
-                  className="w-full input-field rounded-card p-3 text-xs text-main leading-relaxed focus:outline-none focus:border-accent resize-y placeholder:text-faint"
-                />
+              <div className="px-2 mb-1 text-[10px] font-bold uppercase tracking-wider text-slate-400">
+                Ordner
               </div>
+              <div className="space-y-1">
+                {allFolderPaths.map((folderPath) => {
+                  const isExpanded = Boolean(expandedFolders[folderPath]);
+                  const folderDocs = filteredDocs.filter((d) => d.folderPath === folderPath);
+                  const sharedFolderObj = sharedFolders.find(
+                    (sf) => sf.mountPath === folderPath || sf.name === folderPath
+                  );
 
-              {/* Linked References / Verknüpfte Bullet Points from Workspace Notes */}
-              {!tagDetails || tagDetails.documents.length === 0 ? (
-                <div className="p-10 text-center text-muted text-xs panel-surface space-y-2 border border-border rounded-card">
-                  <Hash className="w-7 h-7 mx-auto text-faint" />
-                  <p className="font-medium text-main">Keine verknüpften Bullet Points mit #{selectedTag} in anderen Notizen</p>
-                  <p className="text-xs text-faint">
-                    Füge einfach in irgendeiner Notiz <code className="text-accent">#{selectedTag}</code> in einen Bullet Point ein, damit er hier automatisch verknüpft wird.
-                  </p>
-                </div>
-              ) : (
-                <div className="space-y-4">
-                  {tagDetails.documents.map((docGroup) => (
-                    <div
-                      key={docGroup.docId}
-                      className="panel-surface p-4 space-y-3 border border-border rounded-card hover:border-strong transition-colors"
-                    >
-                      {/* Document Header */}
-                      <div className="flex flex-wrap items-center justify-between gap-2 pb-2 border-b border-border">
-                        <div className="flex items-center gap-2 min-w-0">
-                          <span className="text-base flex-shrink-0">{docGroup.icon || '📄'}</span>
-                          <span className="font-semibold text-xs text-main truncate">{docGroup.title || 'Unbenannt'}</span>
-                          {docGroup.folderPath && (
-                            <span className="badge-neutral text-[10px] flex items-center gap-1 font-mono">
-                              <Folder className="w-2.5 h-2.5" />
-                              <span>{docGroup.folderPath}</span>
-                            </span>
-                          )}
-                          <span className="text-[10px] text-faint">
-                            • {docGroup.matchedBlocks.length}{' '}
-                            {docGroup.matchedBlocks.length === 1 ? 'Treffer' : 'Treffer'}
-                          </span>
-                        </div>
-
+                  return (
+                    <div key={folderPath} className="space-y-0.5">
+                      <div className="group flex items-center justify-between px-2 py-1 rounded-xl hover:bg-slate-200/60 dark:hover:bg-slate-800/60 text-xs text-slate-700 dark:text-slate-300">
                         <button
                           type="button"
-                          onClick={() => {
-                            const found = docs.find((d) => d.id === docGroup.docId);
-                            if (found) {
-                              setSelectedDoc(found);
-                              setZoomedBlockId(null);
-                              setWorkspaceMode('editor');
-                            }
-                          }}
-                          className="btn-action h-7 px-2.5 text-xs font-medium text-accent hover:text-main"
-                        >
-                          <span>Notiz öffnen</span>
-                          <ExternalLink className="w-3 h-3" />
-                        </button>
-                      </div>
-
-                      {/* Matched Bullet Points and their children */}
-                      <div className="space-y-3 pl-1">
-                        {docGroup.matchedBlocks.map((mb, idx) => (
-                          <div
-                            key={mb.rootBlock.id || idx}
-                            className="space-y-1.5 bg-canvas p-3 rounded-card border border-border"
-                          >
-                            {/* Root Bullet Point */}
-                            <div className="flex items-start gap-2 group">
-                              {mb.rootBlock.type === 'todo' ? (
-                                <input
-                                  type="checkbox"
-                                  checked={!!mb.rootBlock.checked}
-                                  onChange={() => handleToggleRollupTodo(docGroup.docId, mb.rootBlock.id)}
-                                  className="w-4 h-4 mt-0.5 checkbox-square cursor-pointer flex-shrink-0"
-                                />
-                              ) : (
-                                <div className="w-3.5 h-3.5 mt-1 rounded-full bg-accent-dim border border-accent flex items-center justify-center flex-shrink-0">
-                                  <div className="w-1.5 h-1.5 rounded-full bg-accent" />
-                                </div>
-                              )}
-
-                              <div
-                                onClick={() => {
-                                  const found = docs.find((d) => d.id === docGroup.docId);
-                                  if (found) {
-                                    setSelectedDoc(found);
-                                    setZoomedBlockId(mb.rootBlock.id);
-                                    setWorkspaceMode('editor');
-                                  }
-                                }}
-                                className={`flex-1 text-xs leading-relaxed cursor-pointer hover:text-accent transition-colors ${
-                                  mb.rootBlock.checked ? 'line-through text-faint' : 'text-main'
-                                }`}
-                                title="Klick: Zu diesem Bullet Point in der Notiz zoomen"
-                              >
-                                {renderFormattedText(mb.rootBlock.content || '(Leerer Bullet Point)')}
-                              </div>
-                            </div>
-
-                            {/* Children / Sub-bullets */}
-                            {mb.children.length > 0 && (
-                              <div className="space-y-1 mt-1 pl-4 border-l-2 border-border ml-2">
-                                {mb.children.map((child) => {
-                                  const indentLevel = Math.max(
-                                    0,
-                                    (child.level || 0) - (mb.rootBlock.level || 0) - 1
-                                  );
-                                  return (
-                                    <div
-                                      key={child.id}
-                                      style={{ paddingLeft: `${indentLevel * 14}px` }}
-                                      className="flex items-start gap-2 py-0.5 text-xs text-muted"
-                                    >
-                                      {child.type === 'todo' ? (
-                                        <input
-                                          type="checkbox"
-                                          checked={!!child.checked}
-                                          onChange={() =>
-                                            handleToggleRollupTodo(docGroup.docId, child.id)
-                                          }
-                                          className="w-3.5 h-3.5 mt-0.5 checkbox-square cursor-pointer flex-shrink-0"
-                                        />
-                                      ) : (
-                                        <span className="w-1.5 h-1.5 mt-1.5 rounded-full bg-muted flex-shrink-0" />
-                                      )}
-                                      <div
-                                        onClick={() => {
-                                          const found = docs.find((d) => d.id === docGroup.docId);
-                                          if (found) {
-                                            setSelectedDoc(found);
-                                            setZoomedBlockId(child.id);
-                                            setWorkspaceMode('editor');
-                                          }
-                                        }}
-                                        className={`flex-1 text-xs leading-relaxed cursor-pointer hover:text-accent transition-colors ${
-                                          child.checked ? 'line-through text-faint' : 'text-muted'
-                                        }`}
-                                        title="Klick: In Notiz fokussieren"
-                                      >
-                                        {renderFormattedText(child.content || '')}
-                                      </div>
-                                    </div>
-                                  );
-                                })}
-                              </div>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* UNIFIED DOCUMENT SHARING MODAL */}
-      {showShareModal && selectedDoc && (
-        <UnifiedShareModal
-          isOpen={showShareModal}
-          onClose={() => setShowShareModal(false)}
-          title={`Notiz teilen: ${selectedDoc.title || 'Unbenannte Notiz'}`}
-          resourceName={selectedDoc.title || 'Unbenannte Notiz'}
-          resourceIcon={selectedDoc.icon || '📄'}
-          isOwner={selectedDoc.isOwner !== false}
-          currentUserId={currentUser?.id}
-          shares={(docShares || []).map((sh) => ({
-            id: sh.id,
-            targetType: sh.targetType || (sh.teamId ? 'team' : 'user'),
-            targetId: sh.targetId || sh.teamId || sh.userId || '',
-            targetName: sh.targetName || sh.displayName || (sh.targetType === 'team' || sh.teamId ? 'Gruppe' : sh.userEmail || 'Benutzer'),
-            targetEmail: sh.userEmail,
-            permission: sh.permission === 'read' ? ('viewer' as const) : ('editor' as const),
-            role: sh.permission === 'read' ? 'viewer' : 'editor',
-            createdAt: sh.createdAt,
-          }))}
-          teams={shareTeams}
-          collaborators={collaborators}
-          allowRoleSelection={true}
-          onAddShare={async (targetType, targetId, permission) => {
-            const perm = permission === 'viewer' ? 'read' : 'write';
-            if (targetType === 'team') {
-              await api.createDocShare(selectedDoc.id, {
-                teamId: targetId,
-                permission: perm,
-              });
-            } else {
-              await api.createDocShare(selectedDoc.id, {
-                userId: targetId,
-                permission: perm,
-              });
-            }
-            const shares = await api.getDocShares(selectedDoc.id);
-            setDocShares(shares);
-            await loadDocs(selectedDoc.id);
-          }}
-          onRemoveShare={async (shareId) => {
-            await api.deleteDocShare(selectedDoc.id, shareId);
-            const shares = await api.getDocShares(selectedDoc.id);
-            setDocShares(shares);
-            await loadDocs(selectedDoc.id);
-          }}
-        />
-      )}
-
-      {/* UNIFIED FOLDER SHARING MODAL */}
-      {showFolderShareModal && sharingFolder && (
-        <UnifiedShareModal
-          isOpen={showFolderShareModal}
-          onClose={() => {
-            setShowFolderShareModal(false);
-            setSharingFolder(null);
-          }}
-          title={`Ordner teilen: ${sharingFolder.name}`}
-          resourceName={sharingFolder.name}
-          resourceIcon="📁"
-          isOwner={sharingFolder.isOwner}
-          currentUserId={currentUser?.id}
-          shares={(folderShares || []).map((sh) => ({
-            id: sh.id,
-            targetType: sh.targetType,
-            targetId: sh.targetId,
-            targetName: sh.targetName || (sh.targetType === 'team' ? 'Gruppe' : sh.email || 'Benutzer'),
-            targetEmail: sh.email,
-            avatarUrl: sh.avatarUrl,
-            permission: sh.permission === 'read' ? ('viewer' as const) : ('editor' as const),
-            role: sh.permission === 'read' ? 'viewer' : 'editor',
-            createdAt: sh.createdAt,
-          }))}
-          teams={shareTeams}
-          collaborators={collaborators}
-          allowRoleSelection={true}
-          onAddShare={async (targetType, targetId, permission) => {
-            const perm = permission === 'viewer' ? 'read' : 'write';
-            await api.createFolderShare(sharingFolder.id, {
-              targetType,
-              targetId,
-              permission: perm,
-            });
-            const updated = await api.getFolderShares(sharingFolder.id);
-            setFolderShares(updated);
-            const sfList = await api.getSharedFolders();
-            setSharedFolders(sfList);
-            await loadDocs(selectedDoc?.id);
-          }}
-          onRemoveShare={async (shareId) => {
-            await api.deleteFolderShare(sharingFolder.id, shareId);
-            const updated = await api.getFolderShares(sharingFolder.id);
-            setFolderShares(updated);
-            const sfList = await api.getSharedFolders();
-            setSharedFolders(sfList);
-            await loadDocs(selectedDoc?.id);
-          }}
-        />
-      )}
-
-      {/* LINK INSERTION MODAL (/link, /notiz, /web) */}
-      {linkModalBlockId && (
-        <div
-          className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs"
-          onClick={() => {
-            const blockId = linkModalBlockId;
-            const wasEditingLink = Boolean(editingLinkOriginalRaw);
-            setLinkModalBlockId(null);
-            setEditingLinkOriginalRaw(null);
-            if (blockId && !wasEditingLink) focusBlock(blockId);
-          }}
-        >
-          <div
-            className="bg-panel border border-border rounded-xl shadow-panel w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-150"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Modal Header */}
-            <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-              <div className="flex items-center gap-2">
-                <div className="p-1.5 rounded-btn bg-accent/15 text-accent">
-                  <ExternalLink className="w-4 h-4" />
-                </div>
-                <h3 className="text-sm font-semibold text-main">
-                  {editingLinkOriginalRaw ? 'Link bearbeiten' : 'Link einfügen'}
-                </h3>
-              </div>
-              <button
-                type="button"
-                onClick={() => {
-                  const blockId = linkModalBlockId;
-                  const wasEditingLink = Boolean(editingLinkOriginalRaw);
-                  setLinkModalBlockId(null);
-                  setEditingLinkOriginalRaw(null);
-                  if (blockId && !wasEditingLink) focusBlock(blockId);
-                }}
-                className="p-1 text-faint hover:text-main rounded-btn transition-colors cursor-pointer"
-              >
-                <X className="w-4 h-4" />
-              </button>
-            </div>
-
-            {/* Tab Switcher: Notiz vs Webseite */}
-            <div className="flex border-b border-border bg-panel-elevated/40 p-1 gap-1">
-              <button
-                type="button"
-                onClick={() => setLinkModalTab('note')}
-                className={`flex-1 py-1.5 px-3 rounded-btn text-xs font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${
-                  linkModalTab === 'note'
-                    ? 'bg-panel text-main shadow-xs font-semibold'
-                    : 'text-muted hover:text-main'
-                }`}
-              >
-                <FileText className="w-3.5 h-3.5" />
-                <span>Notiz verlinken</span>
-              </button>
-              <button
-                type="button"
-                onClick={() => setLinkModalTab('web')}
-                className={`flex-1 py-1.5 px-3 rounded-btn text-xs font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${
-                  linkModalTab === 'web'
-                    ? 'bg-panel text-main shadow-xs font-semibold'
-                    : 'text-muted hover:text-main'
-                }`}
-              >
-                <ExternalLink className="w-3.5 h-3.5" />
-                <span>Webseite verlinken</span>
-              </button>
-            </div>
-
-            {/* Tab Content */}
-            <div className="p-4">
-              {linkModalTab === 'note' ? (
-                <div className="space-y-3">
-                  <div className="relative">
-                    <Search className="w-4 h-4 absolute left-3 top-2.5 text-muted pointer-events-none" />
-                    <input
-                      type="text"
-                      autoFocus
-                      placeholder="Notiz nach Titel oder Ordner filtern..."
-                      value={linkSearchQuery}
-                      onChange={(e) => setLinkSearchQuery(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Escape') {
-                          const blockId = linkModalBlockId;
-                          const wasEditingLink = Boolean(editingLinkOriginalRaw);
-                          setLinkModalBlockId(null);
-                          setEditingLinkOriginalRaw(null);
-                          if (blockId && !wasEditingLink) focusBlock(blockId);
-                        } else if (e.key === 'Enter') {
-                          const filtered = docs.filter(
-                            (d) =>
-                              d.title.toLowerCase().includes(linkSearchQuery.toLowerCase()) ||
-                              (d.folderPath && d.folderPath.toLowerCase().includes(linkSearchQuery.toLowerCase()))
-                          );
-                          if (filtered.length > 0) {
-                            handleInsertNoteLink(filtered[0].title);
+                          onClick={() =>
+                            setExpandedFolders((prev) => ({
+                              ...prev,
+                              [folderPath]: !prev[folderPath],
+                            }))
                           }
-                        }
-                      }}
-                      className="input-field w-full pl-9 h-9 text-xs"
-                    />
-                  </div>
-
-                  <div className="max-h-60 overflow-y-auto space-y-1 divide-y divide-border/30">
-                    {docs
-                      .filter(
-                        (d) =>
-                          !linkSearchQuery.trim() ||
-                          d.title.toLowerCase().includes(linkSearchQuery.toLowerCase()) ||
-                          (d.folderPath && d.folderPath.toLowerCase().includes(linkSearchQuery.toLowerCase()))
-                      )
-                      .slice(0, 20)
-                      .map((d) => (
-                        <button
-                          key={d.id}
-                          type="button"
-                          onClick={() => handleInsertNoteLink(d.title)}
-                          className="w-full text-left px-2.5 py-2 rounded-btn text-xs hover:bg-panel-elevated flex items-center justify-between gap-2 transition-colors cursor-pointer group"
+                          className="flex items-center gap-1.5 flex-1 min-w-0 text-left font-medium"
                         >
-                          <div className="flex items-center gap-2 min-w-0">
-                            <span className="text-base flex-shrink-0">{d.icon || '📄'}</span>
-                            <div className="min-w-0">
-                              <div className="font-medium text-main truncate group-hover:text-accent">
-                                {d.title}
-                              </div>
-                              {d.folderPath && (
-                                <div className="text-[10px] text-faint truncate">
-                                  {d.folderPath}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                          <span className="text-[10px] text-faint group-hover:text-accent flex-shrink-0 font-mono">
-                            [[{d.title}]]
+                          {isExpanded ? (
+                            <ChevronDown className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                          ) : (
+                            <ChevronRight className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                          )}
+                          {isExpanded ? (
+                            <FolderOpen className="w-3.5 h-3.5 text-indigo-500 shrink-0" />
+                          ) : (
+                            <Folder className="w-3.5 h-3.5 text-indigo-500 shrink-0" />
+                          )}
+                          <span className="truncate">{folderPath}</span>
+                          {sharedFolderObj && (
+                            <Users className="w-3 h-3 text-emerald-500 shrink-0" />
+                          )}
+                          <span className="text-[10px] text-slate-400 ml-auto pr-1">
+                            {folderDocs.length}
                           </span>
                         </button>
-                      ))}
 
-                    {docs.filter(
-                      (d) =>
-                        !linkSearchQuery.trim() ||
-                        d.title.toLowerCase().includes(linkSearchQuery.toLowerCase())
-                    ).length === 0 && (
-                      <div className="py-6 text-center text-xs text-faint">
-                        Keine passende Notiz gefunden
+                        <div className="hidden group-hover:flex items-center gap-0.5">
+                          <button
+                            type="button"
+                            onClick={() => handleCreateDocument(folderPath)}
+                            className="p-1 rounded hover:bg-slate-300/60 dark:hover:bg-slate-700 text-slate-500"
+                            title="Notiz in diesem Ordner erstellen"
+                          >
+                            <Plus className="w-3 h-3" />
+                          </button>
+                          {sharedFolderObj && (
+                            <button
+                              type="button"
+                              onClick={() => openFolderShareModal(sharedFolderObj)}
+                              className="p-1 rounded hover:bg-slate-300/60 dark:hover:bg-slate-700 text-indigo-500"
+                              title="Ordner-Freigabe"
+                            >
+                              <Share2 className="w-3 h-3" />
+                            </button>
+                          )}
+                          <button
+                            type="button"
+                            onClick={() => handleDeleteFolder(folderPath)}
+                            className="p-1 rounded hover:bg-rose-100 dark:hover:bg-rose-950/50 text-slate-400 hover:text-rose-500"
+                            title="Ordner löschen"
+                          >
+                            <Trash2 className="w-3 h-3" />
+                          </button>
+                        </div>
                       </div>
+
+                      {isExpanded && (
+                        <div className="pl-5 space-y-0.5">
+                          {folderDocs.length === 0 ? (
+                            <div className="px-2.5 py-1 text-[11px] text-slate-400 italic">
+                              Keine Notizen
+                            </div>
+                          ) : (
+                            folderDocs.map((d) => (
+                              <button
+                                key={d.id}
+                                type="button"
+                                onClick={() => {
+                                  setSelectedDocId(d.id);
+                                  setSubView('editor');
+                                  setMobileShowDetail(true);
+                                }}
+                                className={`w-full flex items-center gap-2 px-2.5 py-1.5 rounded-xl text-left text-xs transition-colors ${
+                                  selectedDocId === d.id && subView === 'editor'
+                                    ? 'bg-indigo-600 text-white font-semibold shadow-sm'
+                                    : 'text-slate-700 dark:text-slate-300 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
+                                }`}
+                              >
+                                <span>{d.icon || '📝'}</span>
+                                <span className="truncate flex-1">
+                                  {d.title || 'Unbenannte Notiz'}
+                                </span>
+                              </button>
+                            ))
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Root Documents */}
+          <div>
+            <div className="px-2 mb-1 text-[10px] font-bold uppercase tracking-wider text-slate-400">
+              Notizen
+            </div>
+            {rootDocs.length === 0 ? (
+              <div className="px-2.5 py-3 text-xs text-slate-400">
+                Noch keine Notizen auf der Hauptebene.
+              </div>
+            ) : (
+              <div className="space-y-0.5">
+                {rootDocs.map((d) => (
+                  <button
+                    key={d.id}
+                    type="button"
+                    onClick={() => {
+                      setSelectedDocId(d.id);
+                      setSubView('editor');
+                      setMobileShowDetail(true);
+                    }}
+                    className={`w-full flex items-center gap-2 px-2.5 py-1.5 rounded-xl text-left text-xs transition-colors ${
+                      selectedDocId === d.id && subView === 'editor'
+                        ? 'bg-indigo-600 text-white font-semibold shadow-sm'
+                        : 'text-slate-700 dark:text-slate-300 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
+                    }`}
+                  >
+                    <span>{d.icon || '📝'}</span>
+                    <span className="truncate flex-1">{d.title || 'Unbenannte Notiz'}</span>
+                    {d.sharedWith && d.sharedWith.length > 0 && (
+                      <Users className="w-3 h-3 opacity-70 shrink-0" />
                     )}
-                  </div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Tags Explorer */}
+          {tagsSummary.length > 0 && (
+            <div>
+              <div className="px-2 mb-1.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">
+                Block-Tags (#)
+              </div>
+              <div className="flex flex-wrap gap-1 px-1">
+                {tagsSummary.map((t) => (
+                  <button
+                    key={t.tag}
+                    type="button"
+                    onClick={() => handleSelectTag(t.tag)}
+                    className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium transition-colors ${
+                      subView === 'tag_detail' && selectedTag === t.tag
+                        ? 'bg-indigo-600 text-white'
+                        : 'bg-slate-200/70 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-950/60'
+                    }`}
+                  >
+                    <span>#{t.tag}</span>
+                    <span className="opacity-60 text-[10px]">{t.count}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </aside>
+
+      {/* RIGHT DETAIL AREA (STRICTLY ISOLATED BY KEY) */}
+      <main
+        className={`${
+          mobileShowDetail ? 'flex' : 'hidden lg:flex'
+        } flex-1 flex-col min-w-0 h-full overflow-hidden`}
+      >
+        {subView === 'editor' && selectedDocId ? (
+          <DocumentEditor
+            key={selectedDocId}
+            docId={selectedDocId}
+            initialDoc={selectedDocObj}
+            availableFolders={allFolderPaths}
+            onDocMetadataChange={handleDocMetadataChange}
+            onDeleteDoc={handleDeleteDocument}
+            onOpenShareModal={openDocShareModal}
+            onSelectTag={handleSelectTag}
+            onBackMobile={() => setMobileShowDetail(false)}
+          />
+        ) : subView === 'tag_detail' && selectedTag ? (
+          <div className="flex-1 overflow-y-auto p-6 sm:p-10 bg-white dark:bg-slate-900">
+            <div className="max-w-3xl mx-auto space-y-6">
+              <div className="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 pb-4">
+                <div className="flex items-center gap-2">
+                  <Hash className="w-6 h-6 text-indigo-500" />
+                  <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+                    #{selectedTag}
+                  </h1>
                 </div>
-              ) : (
-                <form
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    handleInsertWebLink();
-                  }}
-                  className="space-y-3"
+                <button
+                  type="button"
+                  onClick={() => setSubView('editor')}
+                  className="px-3 py-1.5 rounded-xl text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300"
                 >
-                  <div className="space-y-1">
-                    <label className="text-[11px] font-medium text-muted">Titel / Name der Verlinkung</label>
-                    <input
-                      type="text"
-                      autoFocus
-                      placeholder="z.B. Wikipedia oder Referenzseite"
-                      value={linkWebTitle}
-                      onChange={(e) => setLinkWebTitle(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Escape') {
-                          const blockId = linkModalBlockId;
-                          const wasEditingLink = Boolean(editingLinkOriginalRaw);
-                          setLinkModalBlockId(null);
-                          setEditingLinkOriginalRaw(null);
-                          if (blockId && !wasEditingLink) focusBlock(blockId);
-                        }
-                      }}
-                      className="input-field w-full h-9 text-xs"
-                    />
-                  </div>
+                  Zurück zum Editor
+                </button>
+              </div>
 
-                  <div className="space-y-1">
-                    <label className="text-[11px] font-medium text-muted">Web-Adresse (URL) *</label>
-                    <input
-                      type="text"
-                      required
-                      placeholder="https://example.com"
-                      value={linkWebUrl}
-                      onChange={(e) => setLinkWebUrl(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Escape') {
-                          const blockId = linkModalBlockId;
-                          const wasEditingLink = Boolean(editingLinkOriginalRaw);
-                          setLinkModalBlockId(null);
-                          setEditingLinkOriginalRaw(null);
-                          if (blockId && !wasEditingLink) focusBlock(blockId);
-                        }
-                      }}
-                      className="input-field w-full h-9 text-xs"
-                    />
-                  </div>
+              {/* Tag Context Note */}
+              <div className="space-y-2">
+                <label className="text-xs font-semibold uppercase tracking-wider text-slate-400">
+                  Tag-Notiz
+                </label>
+                <textarea
+                  rows={3}
+                  value={tagNoteDraft}
+                  onChange={(e) => setTagNoteDraft(e.target.value)}
+                  onBlur={handleSaveTagNote}
+                  placeholder={`Notizen zu #${selectedTag}…`}
+                  className="w-full rounded-xl p-3 text-sm bg-slate-50 dark:bg-slate-800/60 border border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
+                />
+              </div>
 
-                  <div className="pt-2 flex justify-end gap-2 border-t border-border">
+              {/* Matched Document Blocks */}
+              <div className="space-y-4">
+                <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400">
+                  Verknüpfte Outliner-Blöcke ({tagDetails?.totalMatches || 0})
+                </h3>
+                {tagDetails?.documents.map((docGroup) => (
+                  <div
+                    key={docGroup.docId}
+                    className="p-4 rounded-2xl border border-slate-200/80 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 space-y-2"
+                  >
                     <button
                       type="button"
                       onClick={() => {
-                        const blockId = linkModalBlockId;
-                        const wasEditingLink = Boolean(editingLinkOriginalRaw);
-                        setLinkModalBlockId(null);
-                        setEditingLinkOriginalRaw(null);
-                        if (blockId && !wasEditingLink) focusBlock(blockId);
+                        setSelectedDocId(docGroup.docId);
+                        setSubView('editor');
                       }}
-                      className="btn-action h-8 px-3 text-xs cursor-pointer"
+                      className="flex items-center gap-2 text-sm font-semibold text-indigo-600 dark:text-indigo-400 hover:underline"
                     >
-                      Abbrechen
-                    </button>
-                    <button
-                      type="submit"
-                      disabled={!linkWebUrl.trim()}
-                      className="btn-primary h-8 px-4 text-xs font-medium cursor-pointer disabled:opacity-50"
-                    >
-                      {editingLinkOriginalRaw ? 'Link speichern' : 'Link einfügen'}
+                      <span>{docGroup.icon || '📝'}</span>
+                      <span>{docGroup.title}</span>
                     </button>
+                    <div className="space-y-1.5 pl-4 border-l-2 border-indigo-500/30">
+                      {docGroup.matchedBlocks.map((mb) => (
+                        <div key={mb.rootBlock.id} className="text-xs text-slate-700 dark:text-slate-300">
+                          <div>• {mb.rootBlock.content}</div>
+                          {mb.children.map((ch) => (
+                            <div
+                              key={ch.id}
+                              className="pl-4 text-slate-500 dark:text-slate-400 mt-0.5"
+                            >
+                              ◦ {ch.content}
+                            </div>
+                          ))}
+                        </div>
+                      ))}
+                    </div>
                   </div>
-                </form>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : subView === 'todos' ? (
+          <div className="flex-1 overflow-y-auto p-6 sm:p-10 bg-white dark:bg-slate-900">
+            <div className="max-w-3xl mx-auto space-y-4">
+              <div className="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 pb-4">
+                <h2 className="text-xl font-bold text-slate-900 dark:text-white">
+                  Alle Notiz-Aufgaben ({allDocTodos.length})
+                </h2>
+                <button
+                  type="button"
+                  onClick={() => setSubView('editor')}
+                  className="px-3 py-1.5 rounded-xl text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300"
+                >
+                  Zum Editor
+                </button>
+              </div>
+
+              {allDocTodos.length === 0 ? (
+                <p className="text-sm text-slate-400 py-8 text-center">
+                  Keine To-Do-Blöcke in deinen Notizen vorhanden. Tippe <code>[] </code> am
+                  Zeilenanfang einer Notiz, um eine Checkbox zu erstellen.
+                </p>
+              ) : (
+                <div className="space-y-2">
+                  {allDocTodos.map((item) => (
+                    <div
+                      key={`${item.doc.id}-${item.blockId}`}
+                      className="flex items-center justify-between gap-3 p-3 rounded-xl border border-slate-200/70 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/40"
+                    >
+                      <div className="flex items-center gap-2.5 min-w-0">
+                        {item.checked ? (
+                          <CheckSquare className="w-4 h-4 text-emerald-500 shrink-0" />
+                        ) : (
+                          <Square className="w-4 h-4 text-slate-400 shrink-0" />
+                        )}
+                        <span
+                          className={`text-sm truncate ${
+                            item.checked
+                              ? 'line-through text-slate-400'
+                              : 'text-slate-800 dark:text-slate-200'
+                          }`}
+                        >
+                          {item.content}
+                        </span>
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSelectedDocId(item.doc.id);
+                          setSubView('editor');
+                        }}
+                        className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline shrink-0"
+                      >
+                        {item.doc.icon || '📝'} {item.doc.title}
+                      </button>
+                    </div>
+                  ))}
+                </div>
               )}
             </div>
           </div>
-        </div>
-      )}
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center p-12 text-center bg-white dark:bg-slate-900">
+            <FileText className="w-12 h-12 text-slate-300 dark:text-slate-700 mb-3" />
+            <h3 className="text-base font-semibold text-slate-700 dark:text-slate-300 mb-1">
+              Keine Notiz ausgewählt
+            </h3>
+            <p className="text-xs text-slate-400 max-w-sm mb-4">
+              Wähle links in der Seitenleiste eine bestehende Notiz aus oder lege ein neues
+              Outliner-Dokument an.
+            </p>
+            <button
+              type="button"
+              onClick={() => handleCreateDocument('')}
+              className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-semibold bg-indigo-600 hover:bg-indigo-500 text-white shadow-sm"
+            >
+              <Plus className="w-4 h-4" />
+              <span>Erste Notiz erstellen</span>
+            </button>
+          </div>
+        )}
+      </main>
 
-      {/* DELETE SUBPOINTS CONFIRMATION MODAL */}
-      {deleteSubpointsModal && (
-        <div
-          className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs"
-          onClick={() => setDeleteSubpointsModal(null)}
-        >
-          <div
-            className="bg-panel border border-border rounded-xl shadow-panel w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-150 p-5 space-y-4"
-            onClick={(e) => e.stopPropagation()}
+      {/* New Folder Modal */}
+      {showNewFolderModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/60 backdrop-blur-sm p-4">
+          <form
+            onSubmit={handleCreateFolderSubmit}
+            className="w-full max-w-md bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl p-5 space-y-4"
           >
-            <div className="flex items-start justify-between gap-3">
-              <div className="flex items-center gap-2.5">
-                <div className="w-8 h-8 rounded-full bg-status-err/15 text-status-err flex items-center justify-center shrink-0">
-                  <Trash2 className="w-4 h-4" />
-                </div>
-                <div>
-                  <h3 className="font-bold text-sm text-main">Aufzählungspunkt löschen</h3>
-                  <p className="text-xs text-muted mt-0.5">
-                    Dieser Punkt enthält <strong>{deleteSubpointsModal.count} {deleteSubpointsModal.count === 1 ? 'Unterpunkt' : 'Unterpunkte'}</strong>.
-                  </p>
-                </div>
-              </div>
+            <div className="flex items-center justify-between">
+              <h3 className="text-base font-bold text-slate-900 dark:text-white">
+                Neuen Ordner anlegen
+              </h3>
               <button
                 type="button"
-                onClick={() => setDeleteSubpointsModal(null)}
-                className="p-1 text-muted hover:text-main rounded-btn transition-colors cursor-pointer"
+                onClick={() => setShowNewFolderModal(false)}
+                className="p-1 rounded-lg text-slate-400 hover:text-slate-600"
               >
                 <X className="w-4 h-4" />
               </button>
             </div>
 
-            <p className="text-xs text-main">
-              Möchtest du alle Unterpunkte mit löschen oder nur diesen Aufzählungspunkt entfernen?
-            </p>
+            <div className="space-y-2">
+              <label className="text-xs font-medium text-slate-600 dark:text-slate-400">
+                Ordnerpfad (z.B. <code>Projekte/2026</code>)
+              </label>
+              <input
+                type="text"
+                autoFocus
+                value={newFolderName}
+                onChange={(e) => setNewFolderName(e.target.value)}
+                placeholder="Projekte"
+                className="w-full px-3 py-2 rounded-xl text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              />
+            </div>
 
-            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 pt-2 border-t border-border">
+            <label className="flex items-center gap-2 text-xs text-slate-600 dark:text-slate-300 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={newFolderIsShared}
+                onChange={(e) => setNewFolderIsShared(e.target.checked)}
+                className="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
+              />
+              <span>Als geteilten Team-Ordner freigeben</span>
+            </label>
+
+            <div className="flex justify-end gap-2 pt-2">
               <button
                 type="button"
-                onClick={() => setDeleteSubpointsModal(null)}
-                className="btn-ghost h-8 px-3 text-xs"
+                onClick={() => setShowNewFolderModal(false)}
+                className="px-3.5 py-1.5 rounded-xl text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300"
               >
                 Abbrechen
               </button>
               <button
-                type="button"
-                onClick={() => {
-                  const bId = deleteSubpointsModal.blockId;
-                  setDeleteSubpointsModal(null);
-                  deleteSingleBlock(bId, false);
-                }}
-                className="btn-action h-8 px-3 text-xs font-medium"
+                type="submit"
+                className="px-4 py-1.5 rounded-xl text-xs font-semibold bg-indigo-600 hover:bg-indigo-500 text-white"
               >
-                Nur diesen Punkt löschen
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  const bId = deleteSubpointsModal.blockId;
-                  setDeleteSubpointsModal(null);
-                  deleteBlockWithDescendants(bId);
-                }}
-                className="btn-danger h-8 px-3 text-xs font-semibold"
-              >
-                Alle Unterpunkte mit löschen
+                Erstellen
               </button>
             </div>
-          </div>
+          </form>
         </div>
       )}
+
+      {/* Unified Sharing Modal for Document or Shared Folder */}
+      {(shareModalDoc || shareModalFolder) && (
+        <UnifiedShareModal
+          isOpen={true}
+          onClose={() => {
+            setShareModalDoc(null);
+            setShareModalFolder(null);
+          }}
+          resourceName={shareModalDoc ? shareModalDoc.title : shareModalFolder?.name || ''}
+          resourceIcon={shareModalDoc ? shareModalDoc.icon : '📁'}
+          isOwner={
+            shareModalDoc
+              ? shareModalDoc.isOwner !== false
+              : Boolean(shareModalFolder?.isOwner)
+          }
+          currentUserId={currentUser?.id}
+          shares={unifiedShares}
+          teams={teams}
+          collaborators={collaborators}
+          onAddShare={async (targetType, targetId, permission) => {
+            const perm = permission === 'editor' ? 'write' : 'read';
+            if (shareModalDoc) {
+              await api.createDocShare(
+                shareModalDoc.id,
+                targetType === 'team'
+                  ? { teamId: targetId, permission: perm }
+                  : { userId: targetId, permission: perm }
+              );
+              const updatedShares = await api.getDocShares(shareModalDoc.id);
+              setActiveDocShares(updatedShares);
+            } else if (shareModalFolder) {
+              await api.createFolderShare(shareModalFolder.id, {
+                targetType,
+                targetId,
+                permission: perm,
+              });
+              const updatedFolder = await api.getSharedFolder(shareModalFolder.id);
+              setShareModalFolder(updatedFolder);
+            }
+          }}
+          onRemoveShare={async (shareId) => {
+            if (shareModalDoc) {
+              await api.deleteDocShare(shareModalDoc.id, shareId);
+              const updatedShares = await api.getDocShares(shareModalDoc.id);
+              setActiveDocShares(updatedShares);
+            } else if (shareModalFolder) {
+              await api.deleteFolderShare(shareModalFolder.id, shareId);
+              const updatedFolder = await api.getSharedFolder(shareModalFolder.id);
+              setShareModalFolder(updatedFolder);
+            }
+          }}
+        />
+      )}
     </div>
   );
 };
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 765ffc2..415b921 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -602,31 +602,6 @@ export const api = {
     };
   },
 
-  async getDocumentCRDT(id: string): Promise<{ docId: string; state?: string; updates?: string[] }> {
-    return request<{ docId: string; state?: string; updates?: string[] }>(`/api/v1/documents/${id}/crdt`);
-  },
-
-  async saveDocumentCRDT(id: string, payload: string | { state?: string; update?: string }): Promise<{ success: boolean }> {
-    const body = typeof payload === 'string' ? { state: payload } : payload;
-    return request<{ success: boolean }>(`/api/v1/documents/${id}/crdt`, {
-      method: 'PUT',
-      body: JSON.stringify(body),
-    });
-  },
-
-  async sendDocumentAwareness(id: string, payload: any): Promise<{ success: boolean }> {
-    return request<{ success: boolean }>(`/api/v1/documents/${id}/awareness`, {
-      method: 'POST',
-      body: JSON.stringify(payload),
-    });
-  },
-
-  async clearDocumentAwareness(id: string): Promise<{ success: boolean }> {
-    return request<{ success: boolean }>(`/api/v1/documents/${id}/awareness`, {
-      method: 'DELETE',
-    });
-  },
-
   async joinSSERoom(sseId: string, room: string, action: 'join' | 'leave' = 'join'): Promise<{ success: boolean }> {
     return request<{ success: boolean }>('/api/v1/events/rooms', {
       method: 'POST',
@@ -675,44 +650,6 @@ export const api = {
     return ensureArray(res);
   },
 
-  // --- DOCUMENT LOCKING ---
-  async getDocLock(docId: string): Promise<{ locked: boolean; lock?: DocLockInfo }> {
-    return request<{ locked: boolean; lock?: DocLockInfo }>(`/api/v1/documents/${docId}/lock`);
-  },
-
-  async lockDocument(
-    docId: string
-  ): Promise<{ locked: boolean; acquired: boolean; lock?: DocLockInfo; message?: string }> {
-    try {
-      return await request<{ locked: boolean; acquired: boolean; lock?: DocLockInfo; message?: string }>(
-        `/api/v1/documents/${docId}/lock`,
-        { method: 'POST' }
-      );
-    } catch (e: any) {
-      return { locked: true, acquired: false, message: e.message };
-    }
-  },
-
-  async heartbeatDocLock(docId: string): Promise<{ extended: boolean }> {
-    try {
-      return await request<{ extended: boolean }>(`/api/v1/documents/${docId}/lock/heartbeat`, {
-        method: 'POST',
-      });
-    } catch {
-      return { extended: false };
-    }
-  },
-
-  async unlockDocument(docId: string): Promise<{ unlocked: boolean }> {
-    try {
-      return await request<{ unlocked: boolean }>(`/api/v1/documents/${docId}/lock`, {
-        method: 'DELETE',
-      });
-    } catch {
-      return { unlocked: false };
-    }
-  },
-
   // --- SPACES & REALTIME LISTS ---
   async getSpaces(): Promise<Space[]> {
     const res = await request<Space[]>('/api/v1/spaces');
@@ -1398,23 +1335,10 @@ export function sendWebSocketMessage(msg: any): void {
   // SSE Fallback: dispatch via REST endpoints
   try {
     const parsed = typeof msg === 'string' ? JSON.parse(msg) : msg;
-    if (parsed.event === 'CRDT_UPDATE' && parsed.docId) {
-      api.saveDocumentCRDT(parsed.docId, { update: parsed.payload?.update }).catch(() => {});
-    } else if (parsed.event === 'CRDT_AWARENESS' && parsed.docId) {
-      api.sendDocumentAwareness(parsed.docId, parsed.payload).catch(() => {});
-    } else if (parsed.event === 'CRDT_LEAVE' && parsed.docId) {
-      api.clearDocumentAwareness(parsed.docId).catch(() => {});
-      if (activeSSEId) api.joinSSERoom(activeSSEId, `doc:${parsed.docId}`, 'leave').catch(() => {});
-    } else if (parsed.event === 'CRDT_JOIN' && parsed.docId) {
-      if (activeSSEId) api.joinSSERoom(activeSSEId, `doc:${parsed.docId}`, 'join').catch(() => {});
-    } else if (parsed.event === 'JOIN_ROOM' && parsed.room) {
+    if (parsed.event === 'JOIN_ROOM' && parsed.room) {
       if (activeSSEId) api.joinSSERoom(activeSSEId, parsed.room, 'join').catch(() => {});
     } else if (parsed.event === 'LEAVE_ROOM' && parsed.room) {
       if (activeSSEId) api.joinSSERoom(activeSSEId, parsed.room, 'leave').catch(() => {});
-    } else if (parsed.event === 'LOCK_DOC' && parsed.docId) {
-      api.lockDocument(parsed.docId).catch(() => {});
-    } else if (parsed.event === 'UNLOCK_DOC' && parsed.docId) {
-      api.unlockDocument(parsed.docId).catch(() => {});
     }
   } catch (err) {
     console.error('Error dispatching fallback REST message for SSE:', err);
diff --git a/frontend/src/lib/crdt.ts b/frontend/src/lib/crdt.ts
deleted file mode 100644
index 4afb6f4..0000000
--- a/frontend/src/lib/crdt.ts
+++ /dev/null
@@ -1,271 +0,0 @@
-import * as Y from 'yjs';
-import { BlockType, DocumentBlock } from './types';
-
-// Convert Uint8Array to Base64
-export function uint8ArrayToBase64(bytes: Uint8Array): string {
-  let binary = '';
-  const len = bytes.byteLength;
-  for (let i = 0; i < len; i++) {
-    binary += String.fromCharCode(bytes[i]);
-  }
-  return btoa(binary);
-}
-
-// Convert Base64 to Uint8Array
-export function base64ToUint8Array(base64: string): Uint8Array {
-  const binaryString = atob(base64);
-  const len = binaryString.length;
-  const bytes = new Uint8Array(len);
-  for (let i = 0; i < len; i++) {
-    bytes[i] = binaryString.charCodeAt(i);
-  }
-  return bytes;
-}
-
-const COLLAB_COLORS = [
-  '#3B82F6', // Blue
-  '#10B981', // Emerald
-  '#F59E0B', // Amber
-  '#8B5CF6', // Purple
-  '#EC4899', // Pink
-  '#06B6D4', // Cyan
-  '#F97316', // Orange
-  '#14B8A6', // Teal
-];
-
-export function getCollaboratorColor(userId: string): string {
-  if (!userId) return COLLAB_COLORS[0];
-  let hash = 0;
-  for (let i = 0; i < userId.length; i++) {
-    hash = (hash << 5) - hash + userId.charCodeAt(i);
-    hash |= 0;
-  }
-  const idx = Math.abs(hash) % COLLAB_COLORS.length;
-  return COLLAB_COLORS[idx];
-}
-
-export interface CollaboratorAwareness {
-  userId: string;
-  userName: string;
-  activeBlockId: string | null;
-  color: string;
-  lastActive: number;
-}
-
-export class DocumentCRDTSession {
-  public docId: string;
-  public doc: Y.Doc;
-  private order: Y.Array<string>;
-  private blocks: Y.Map<Y.Map<any>>;
-  private destroyed: boolean = false;
-
-  public onLocalUpdate?: (base64Update: string) => void;
-  public onRemoteChange?: (blocks: DocumentBlock[]) => void;
-
-  constructor(docId: string) {
-    this.docId = docId;
-    this.doc = new Y.Doc({ guid: docId });
-    this.order = this.doc.getArray<string>('blockOrder');
-    this.blocks = this.doc.getMap<Y.Map<any>>('blocks');
-
-    this.doc.on('update', (update: Uint8Array, origin: any) => {
-      if (this.destroyed) return;
-      if (origin !== 'remote') {
-        const b64 = uint8ArrayToBase64(update);
-        if (this.onLocalUpdate) {
-          this.onLocalUpdate(b64);
-        }
-      } else {
-        if (this.onRemoteChange) {
-          this.onRemoteChange(this.getBlocks());
-        }
-      }
-    });
-  }
-
-  public destroy(): void {
-    this.destroyed = true;
-    this.doc.destroy();
-  }
-
-  public getBlocks(): DocumentBlock[] {
-    const orderList = this.order.toArray();
-    const result: DocumentBlock[] = [];
-    for (const id of orderList) {
-      const bMap = this.blocks.get(id);
-      if (bMap) {
-        result.push({
-          id,
-          docId: this.docId,
-          type: (bMap.get('type') || 'bullet') as BlockType,
-          content: bMap.get('content') || '',
-          level: typeof bMap.get('level') === 'number' ? bMap.get('level') : 0,
-          checked: !!bMap.get('checked'),
-          collapsed: !!bMap.get('collapsed'),
-          lang: bMap.get('lang') || '',
-          sortOrder: typeof bMap.get('sortOrder') === 'number' ? bMap.get('sortOrder') : 0,
-          updatedAt: bMap.get('updatedAt') || undefined,
-        });
-      }
-    }
-    return result;
-  }
-
-  public initFromBlocks(initialBlocks: DocumentBlock[]): void {
-    this.doc.transact(() => {
-      if (this.order.length === 0 && initialBlocks.length > 0) {
-        const ids: string[] = [];
-        for (const b of initialBlocks) {
-          ids.push(b.id);
-          const bMap = new Y.Map<any>();
-          bMap.set('id', b.id);
-          bMap.set('type', b.type || 'bullet');
-          bMap.set('content', b.content || '');
-          bMap.set('level', b.level || 0);
-          bMap.set('checked', !!b.checked);
-          bMap.set('collapsed', !!b.collapsed);
-          bMap.set('lang', b.lang || '');
-          bMap.set('sortOrder', b.sortOrder || 0);
-          bMap.set('updatedAt', b.updatedAt || new Date().toISOString());
-          this.blocks.set(b.id, bMap);
-        }
-        this.order.push(ids);
-      }
-    }, 'init');
-  }
-
-  public updateBlock(id: string, updates: Partial<DocumentBlock>): void {
-    this.doc.transact(() => {
-      const bMap = this.blocks.get(id);
-      if (bMap) {
-        if (updates.type !== undefined) bMap.set('type', updates.type);
-        if (updates.content !== undefined) bMap.set('content', updates.content);
-        if (updates.level !== undefined) bMap.set('level', updates.level);
-        if (updates.checked !== undefined) bMap.set('checked', updates.checked);
-        if (updates.collapsed !== undefined) bMap.set('collapsed', updates.collapsed);
-        if (updates.lang !== undefined) bMap.set('lang', updates.lang);
-        if (updates.sortOrder !== undefined) bMap.set('sortOrder', updates.sortOrder);
-        bMap.set('updatedAt', new Date().toISOString());
-      }
-    }, 'local');
-  }
-
-  public insertBlock(index: number, block: DocumentBlock): void {
-    this.doc.transact(() => {
-      const bMap = new Y.Map<any>();
-      bMap.set('id', block.id);
-      bMap.set('type', block.type || 'bullet');
-      bMap.set('content', block.content || '');
-      bMap.set('level', block.level || 0);
-      bMap.set('checked', !!block.checked);
-      bMap.set('collapsed', !!block.collapsed);
-      bMap.set('lang', block.lang || '');
-      bMap.set('sortOrder', block.sortOrder || 0);
-      bMap.set('updatedAt', new Date().toISOString());
-      this.blocks.set(block.id, bMap);
-
-      if (index >= 0 && index <= this.order.length) {
-        this.order.insert(index, [block.id]);
-      } else {
-        this.order.push([block.id]);
-      }
-    }, 'local');
-  }
-
-  public deleteBlock(id: string): void {
-    this.doc.transact(() => {
-      const currentOrder = this.order.toArray();
-      const idx = currentOrder.indexOf(id);
-      if (idx !== -1) {
-        this.order.delete(idx, 1);
-      }
-      this.blocks.delete(id);
-    }, 'local');
-  }
-
-  public deleteMultipleBlocks(ids: string[]): void {
-    if (ids.length === 0) return;
-    const toDeleteSet = new Set(ids);
-    this.doc.transact(() => {
-      const currentOrder = this.order.toArray();
-      // Delete from order backwards to preserve indices
-      for (let i = currentOrder.length - 1; i >= 0; i--) {
-        if (toDeleteSet.has(currentOrder[i])) {
-          this.order.delete(i, 1);
-        }
-      }
-      for (const id of ids) {
-        this.blocks.delete(id);
-      }
-    }, 'local');
-  }
-
-  public reorderBlocks(newOrder: string[]): void {
-    this.doc.transact(() => {
-      this.order.delete(0, this.order.length);
-      this.order.push(newOrder);
-    }, 'local');
-  }
-
-  public syncFullBlocks(blocks: DocumentBlock[]): void {
-    this.doc.transact(() => {
-      const nextIds = blocks.map((b) => b.id);
-      const currentIds = new Set(this.order.toArray());
-
-      // Upsert all blocks
-      for (const b of blocks) {
-        let bMap = this.blocks.get(b.id);
-        if (!bMap) {
-          bMap = new Y.Map<any>();
-          this.blocks.set(b.id, bMap);
-        }
-        bMap.set('id', b.id);
-        bMap.set('type', b.type || 'bullet');
-        bMap.set('content', b.content || '');
-        bMap.set('level', b.level || 0);
-        bMap.set('checked', !!b.checked);
-        bMap.set('collapsed', !!b.collapsed);
-        bMap.set('lang', b.lang || '');
-        bMap.set('sortOrder', b.sortOrder || 0);
-        bMap.set('updatedAt', b.updatedAt || new Date().toISOString());
-      }
-
-      // Delete blocks no longer present
-      const nextIdSet = new Set(nextIds);
-      currentIds.forEach((id) => {
-        if (!nextIdSet.has(id)) {
-          this.blocks.delete(id);
-        }
-      });
-
-      // Update order if different
-      const currentOrder = this.order.toArray();
-      const orderChanged =
-        currentOrder.length !== nextIds.length || currentOrder.some((id, idx) => id !== nextIds[idx]);
-      if (orderChanged) {
-        this.order.delete(0, this.order.length);
-        this.order.push(nextIds);
-      }
-    }, 'local');
-  }
-
-  public applyRemoteUpdate(base64Update: string): void {
-    try {
-      const bytes = base64ToUint8Array(base64Update);
-      Y.applyUpdate(this.doc, bytes, 'remote');
-    } catch (err) {
-      console.error('[CRDT] Failed to apply remote update:', err);
-    }
-  }
-
-  public applyRemoteUpdates(base64Updates: string[]): void {
-    for (const b64 of base64Updates) {
-      this.applyRemoteUpdate(b64);
-    }
-  }
-
-  public encodeState(): string {
-    const bytes = Y.encodeStateAsUpdate(this.doc);
-    return uint8ArrayToBase64(bytes);
-  }
-}
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 2eb2bb8..ea44b68 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -153,16 +153,18 @@ export interface SystemSettings {
   smtpConfiguredViaEnv?: boolean;
 }
 
-export type BlockType = 'h1' | 'h2' | 'h3' | 'paragraph' | 'todo' | 'bullet' | 'code' | 'callout' | 'divider' | 'table' | 'progress';
+export type BlockType = 'h1' | 'h2' | 'h3' | 'paragraph' | 'text' | 'todo' | 'bullet' | 'code' | 'callout' | 'divider' | 'table' | 'progress';
 
 export interface DocumentBlock {
   id: string;
   docId?: string;
+  documentId?: string;
   type: BlockType;
   content: string;
   checked?: boolean;
   lang?: string;
   level?: number;
+  position?: number;
   collapsed?: boolean;
   sortOrder?: number;
   updatedAt?: string;
@@ -211,6 +213,8 @@ export interface Document {
   spaceId?: string;
   title: string;
   icon: string;
+  folderId?: string;
+  markdownCache?: string;
   content: string;
   blocks: DocumentBlock[];
   tags: string[];
diff --git a/frontend/src/lib/useDocumentSync.ts b/frontend/src/lib/useDocumentSync.ts
new file mode 100644
index 0000000..c943734
--- /dev/null
+++ b/frontend/src/lib/useDocumentSync.ts
@@ -0,0 +1,304 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { DocumentBlock } from './types';
+import { getToken, api } from './api';
+
+export type DocSyncStatus = 'connecting' | 'connected' | 'reconnecting' | 'offline';
+
+export interface DocSyncEvent {
+  type:
+    | 'doc_state'
+    | 'block_created'
+    | 'block_updated'
+    | 'block_deleted'
+    | 'block_moved'
+    | 'title_updated'
+    | 'blocks_replaced';
+  docId?: string;
+  clientId?: string;
+  userId?: string;
+  title?: string;
+  block?: DocumentBlock;
+  blockId?: string;
+  afterBlockId?: string;
+  newIndex?: number;
+  content?: string;
+  level?: number;
+  checked?: boolean;
+  collapsed?: boolean;
+  blockType?: string;
+  blocks?: DocumentBlock[];
+}
+
+export function useDocumentSync(
+  docId: string | null,
+  onRemoteEvent: (evt: DocSyncEvent) => void,
+  canEdit: boolean = true
+) {
+  const [status, setStatus] = useState<DocSyncStatus>('connecting');
+  const wsRef = useRef<WebSocket | null>(null);
+  const clientIdRef = useRef<string>(
+    `cli_${Math.random().toString(36).slice(2, 10)}_${Date.now().toString(36)}`
+  );
+  const onRemoteEventRef = useRef(onRemoteEvent);
+  onRemoteEventRef.current = onRemoteEvent;
+
+  const reconnectTimerRef = useRef<number | null>(null);
+  const fallbackTimerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!docId) {
+      setStatus('offline');
+      return;
+    }
+
+    let isDisposed = false;
+    let retryCount = 0;
+    const currentClientId = `cli_${Math.random().toString(36).slice(2, 10)}_${Date.now().toString(36)}`;
+    clientIdRef.current = currentClientId;
+
+    const connect = () => {
+      if (isDisposed) return;
+
+      const token = getToken();
+      if (!token) {
+        setStatus('offline');
+        return;
+      }
+
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const wsUrl = `${protocol}//${window.location.host}/api/v1/ws/docs/${encodeURIComponent(
+        docId
+      )}?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(currentClientId)}`;
+
+      setStatus(retryCount === 0 ? 'connecting' : 'reconnecting');
+
+      let ws: WebSocket;
+      try {
+        ws = new WebSocket(wsUrl);
+      } catch {
+        setStatus('offline');
+        return;
+      }
+
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        if (isDisposed) {
+          ws.close();
+          return;
+        }
+        retryCount = 0;
+        setStatus('connected');
+      };
+
+      ws.onmessage = (event) => {
+        if (isDisposed) return;
+        try {
+          const parsed: DocSyncEvent = JSON.parse(event.data);
+          if (!parsed || !parsed.type) return;
+          // Echo protection: ignore events originating from our own clientId (except initial doc_state)
+          if (parsed.type !== 'doc_state' && parsed.clientId && parsed.clientId === currentClientId) {
+            return;
+          }
+          onRemoteEventRef.current(parsed);
+        } catch {
+          // Ignore malformed frames
+        }
+      };
+
+      ws.onerror = () => {
+        // Handled in onclose
+      };
+
+      ws.onclose = () => {
+        if (isDisposed) return;
+        wsRef.current = null;
+        retryCount += 1;
+        setStatus(retryCount > 2 ? 'offline' : 'reconnecting');
+        const delay = Math.min(1000 * Math.pow(1.6, retryCount), 8000);
+        reconnectTimerRef.current = window.setTimeout(connect, delay);
+      };
+    };
+
+    connect();
+
+    return () => {
+      isDisposed = true;
+      if (reconnectTimerRef.current !== null) {
+        window.clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
+      if (fallbackTimerRef.current !== null) {
+        window.clearTimeout(fallbackTimerRef.current);
+        fallbackTimerRef.current = null;
+      }
+      if (wsRef.current) {
+        try {
+          wsRef.current.onopen = null;
+          wsRef.current.onmessage = null;
+          wsRef.current.onerror = null;
+          wsRef.current.onclose = null;
+          wsRef.current.close();
+        } catch {
+          // ignore
+        }
+        wsRef.current = null;
+      }
+    };
+  }, [docId]);
+
+  const sendRawEvent = useCallback(
+    (evt: DocSyncEvent, fallbackFn?: () => void) => {
+      if (!docId || !canEdit) return;
+      const ws = wsRef.current;
+      const payload: DocSyncEvent = {
+        ...evt,
+        docId,
+        clientId: clientIdRef.current,
+      };
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(payload));
+      } else if (fallbackFn) {
+        if (fallbackTimerRef.current !== null) {
+          window.clearTimeout(fallbackTimerRef.current);
+        }
+        fallbackTimerRef.current = window.setTimeout(() => {
+          fallbackFn();
+        }, 600);
+      }
+    },
+    [docId, canEdit]
+  );
+
+  const sendBlockCreated = useCallback(
+    (block: DocumentBlock, afterBlockId?: string, allBlocks?: DocumentBlock[]) => {
+      sendRawEvent(
+        {
+          type: 'block_created',
+          block,
+          afterBlockId,
+        },
+        () => {
+          if (docId && allBlocks) {
+            api
+              .patchDocumentBlocks(docId, {
+                upserted: [block],
+                blockOrder: allBlocks.map((b) => b.id),
+              })
+              .catch(() => {});
+          }
+        }
+      );
+    },
+    [docId, sendRawEvent]
+  );
+
+  const sendBlockUpdated = useCallback(
+    (block: DocumentBlock) => {
+      sendRawEvent(
+        {
+          type: 'block_updated',
+          blockId: block.id,
+          block,
+        },
+        () => {
+          if (docId) {
+            api.patchDocumentBlocks(docId, { upserted: [block] }).catch(() => {});
+          }
+        }
+      );
+    },
+    [docId, sendRawEvent]
+  );
+
+  const sendBlockDeleted = useCallback(
+    (blockId: string, allBlocks?: DocumentBlock[]) => {
+      sendRawEvent(
+        {
+          type: 'block_deleted',
+          blockId,
+        },
+        () => {
+          if (docId) {
+            api
+              .patchDocumentBlocks(docId, {
+                deletedIds: [blockId],
+                blockOrder: allBlocks ? allBlocks.map((b) => b.id) : undefined,
+              })
+              .catch(() => {});
+          }
+        }
+      );
+    },
+    [docId, sendRawEvent]
+  );
+
+  const sendBlockMoved = useCallback(
+    (blockId: string, newIndex: number, level?: number, allBlocks?: DocumentBlock[]) => {
+      sendRawEvent(
+        {
+          type: 'block_moved',
+          blockId,
+          newIndex,
+          level,
+        },
+        () => {
+          if (docId && allBlocks) {
+            api
+              .patchDocumentBlocks(docId, {
+                upserted: allBlocks,
+                blockOrder: allBlocks.map((b) => b.id),
+              })
+              .catch(() => {});
+          }
+        }
+      );
+    },
+    [docId, sendRawEvent]
+  );
+
+  const sendTitleUpdated = useCallback(
+    (title: string) => {
+      sendRawEvent(
+        {
+          type: 'title_updated',
+          title,
+        },
+        () => {
+          if (docId) {
+            api.updateDocument(docId, { title }).catch(() => {});
+          }
+        }
+      );
+    },
+    [docId, sendRawEvent]
+  );
+
+  const sendBlocksReplaced = useCallback(
+    (blocks: DocumentBlock[]) => {
+      sendRawEvent(
+        {
+          type: 'blocks_replaced',
+          blocks,
+        },
+        () => {
+          if (docId) {
+            api.updateDocument(docId, { blocks }).catch(() => {});
+          }
+        }
+      );
+    },
+    [docId, sendRawEvent]
+  );
+
+  return {
+    status,
+    clientId: clientIdRef.current,
+    sendBlockCreated,
+    sendBlockUpdated,
+    sendBlockDeleted,
+    sendBlockMoved,
+    sendTitleUpdated,
+    sendBlocksReplaced,
+  };
+}
diff --git a/frontend/src/lib/yjs-provider.ts b/frontend/src/lib/yjs-provider.ts
deleted file mode 100644
index f979c03..0000000
--- a/frontend/src/lib/yjs-provider.ts
+++ /dev/null
@@ -1,380 +0,0 @@
-import * as Y from 'yjs';
-import { IndexeddbPersistence } from 'y-indexeddb';
-import { getToken } from './api';
-
-export type SyncTransportStatus = 'ws' | 'sse' | 'offline';
-
-export interface YjsHybridProviderOptions {
-  docId: string;
-  ydoc: Y.Doc;
-  onStatusChange?: (status: SyncTransportStatus) => void;
-  onAwareness?: (payload: any) => void;
-  onSynced?: () => void;
-}
-
-export class YjsHybridProvider {
-  public readonly docId: string;
-  public readonly ydoc: Y.Doc;
-  private status: SyncTransportStatus = 'offline';
-  private indexeddbProvider: IndexeddbPersistence;
-  private ws: WebSocket | null = null;
-  private eventSource: EventSource | null = null;
-  private wsWatchdogTimer: any = null;
-  private destroyed: boolean = false;
-  private isConnectingWS: boolean = false;
-  private isConnectingSSE: boolean = false;
-  private onStatusChange?: (status: SyncTransportStatus) => void;
-  private onAwareness?: (payload: any) => void;
-  private onSynced?: () => void;
-
-  constructor(options: YjsHybridProviderOptions) {
-    this.docId = options.docId;
-    this.ydoc = options.ydoc;
-    this.onStatusChange = options.onStatusChange;
-    this.onAwareness = options.onAwareness;
-    this.onSynced = options.onSynced;
-
-    // 1. Offline-First: Bind IndexedDB persistence
-    this.indexeddbProvider = new IndexeddbPersistence(`mindsift-doc-${this.docId}`, this.ydoc);
-    this.indexeddbProvider.on('synced', () => {
-      if (this.destroyed) return;
-      if (this.onSynced) {
-        this.onSynced();
-      }
-    });
-
-    // 2. Listen to local document updates
-    this.ydoc.on('update', this.handleDocUpdate);
-
-    // 3. Connect via Primary Transport (WebSocket) with 4-second watchdog fallback
-    this.connect();
-
-    // 4. Online/offline window event listeners
-    if (typeof window !== 'undefined') {
-      window.addEventListener('online', this.handleOnline);
-      window.addEventListener('offline', this.handleOffline);
-    }
-  }
-
-  private setStatus(newStatus: SyncTransportStatus) {
-    if (this.status !== newStatus) {
-      this.status = newStatus;
-      if (this.onStatusChange) {
-        this.onStatusChange(newStatus);
-      }
-    }
-  }
-
-  public getStatus(): SyncTransportStatus {
-    return this.status;
-  }
-
-  private handleOnline = () => {
-    if (this.destroyed) return;
-    if (this.status === 'offline') {
-      this.connect();
-    }
-  };
-
-  private handleOffline = () => {
-    if (this.destroyed) return;
-    this.setStatus('offline');
-  };
-
-  public connect() {
-    if (this.destroyed) return;
-    this.connectWebSocket();
-  }
-
-  private connectWebSocket() {
-    if (this.destroyed || this.isConnectingWS) return;
-    this.isConnectingWS = true;
-
-    this.cleanupWebSocket();
-
-    const token = getToken() || '';
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/api/v1/ws/docs/${encodeURIComponent(this.docId)}?token=${encodeURIComponent(token)}`;
-
-    // 4-second watchdog timer: If WebSocket doesn't establish within 4 seconds, fallback to HTTP/SSE
-    this.clearWatchdog();
-    this.wsWatchdogTimer = setTimeout(() => {
-      if (this.status !== 'ws') {
-        console.warn(`[YjsProvider] WebSocket timeout (4s) for doc ${this.docId}. Switching to HTTP fallback (SSE + POST)...`);
-        this.fallbackToHTTP();
-      }
-    }, 4000);
-
-    try {
-      const ws = new WebSocket(wsUrl);
-      ws.binaryType = 'arraybuffer';
-      this.ws = ws;
-
-      ws.onopen = () => {
-        this.isConnectingWS = false;
-        this.clearWatchdog();
-        this.cleanupSSE();
-        this.setStatus('ws');
-      };
-
-      ws.onmessage = (event) => {
-        if (this.destroyed) return;
-
-        if (event.data instanceof ArrayBuffer) {
-          const update = new Uint8Array(event.data);
-          Y.applyUpdate(this.ydoc, update, 'remote');
-          return;
-        }
-
-        try {
-          const data = JSON.parse(event.data);
-          if (data.event === 'CRDT_INIT' && data.payload) {
-            this.handleInit(data.payload);
-          } else if (data.event === 'CRDT_UPDATE' && data.payload) {
-            this.handleRemoteUpdate(data.payload);
-          } else if (data.event === 'CRDT_AWARENESS' && data.payload) {
-            if (this.onAwareness) {
-              this.onAwareness(data.payload);
-            }
-          }
-        } catch (err) {
-          console.error('[YjsProvider] WS message parse error:', err);
-        }
-      };
-
-      ws.onerror = (err) => {
-        console.warn(`[YjsProvider] WebSocket error on doc ${this.docId}:`, err);
-        this.isConnectingWS = false;
-        this.fallbackToHTTP();
-      };
-
-      ws.onclose = (event) => {
-        this.isConnectingWS = false;
-        // If closed abnormally (proxy drop, 1006, etc.), fallback to HTTP
-        if (!this.destroyed && this.status === 'ws') {
-          console.warn(`[YjsProvider] WebSocket closed (code ${event.code}). Falling back to HTTP/SSE...`);
-          this.fallbackToHTTP();
-        }
-      };
-    } catch (e) {
-      console.warn(`[YjsProvider] WebSocket creation failed:`, e);
-      this.isConnectingWS = false;
-      this.fallbackToHTTP();
-    }
-  }
-
-  private fallbackToHTTP() {
-    if (this.destroyed) return;
-    this.cleanupWebSocket();
-    this.connectSSE();
-  }
-
-  private connectSSE() {
-    if (this.destroyed || this.isConnectingSSE) return;
-    this.isConnectingSSE = true;
-
-    this.cleanupSSE();
-
-    const token = getToken() || '';
-    const sseUrl = `/api/v1/sync/docs/${encodeURIComponent(this.docId)}/stream?token=${encodeURIComponent(token)}`;
-
-    try {
-      const es = new EventSource(sseUrl);
-      this.eventSource = es;
-
-      es.onopen = () => {
-        this.isConnectingSSE = false;
-        this.setStatus('sse');
-      };
-
-      es.onmessage = (event) => {
-        if (this.destroyed) return;
-        try {
-          const data = JSON.parse(event.data);
-          if (data.event === 'CRDT_INIT' && data.payload) {
-            this.handleInit(data.payload);
-          } else if (data.event === 'CRDT_UPDATE' && data.payload) {
-            this.handleRemoteUpdate(data.payload);
-          } else if (data.event === 'CRDT_AWARENESS' && data.payload) {
-            if (this.onAwareness) {
-              this.onAwareness(data.payload);
-            }
-          }
-        } catch {}
-      };
-
-      es.onerror = () => {
-        this.isConnectingSSE = false;
-        if (!this.destroyed) {
-          this.setStatus('offline');
-        }
-      };
-    } catch (e) {
-      this.isConnectingSSE = false;
-      this.setStatus('offline');
-    }
-  }
-
-  private handleInit(payload: { state?: string; updates?: string[] }) {
-    if (payload.state) {
-      try {
-        const stateBytes = this.base64ToUint8(payload.state);
-        Y.applyUpdate(this.ydoc, stateBytes, 'remote');
-      } catch (e) {
-        console.error('[YjsProvider] Failed to apply initial state:', e);
-      }
-    }
-    if (Array.isArray(payload.updates)) {
-      for (const u of payload.updates) {
-        if (u) {
-          try {
-            const updateBytes = this.base64ToUint8(u);
-            Y.applyUpdate(this.ydoc, updateBytes, 'remote');
-          } catch (e) {
-            console.error('[YjsProvider] Failed to apply initial update:', e);
-          }
-        }
-      }
-    }
-    if (this.onSynced) {
-      this.onSynced();
-    }
-  }
-
-  private handleRemoteUpdate(payload: { update?: string }) {
-    if (payload.update) {
-      try {
-        const bytes = this.base64ToUint8(payload.update);
-        Y.applyUpdate(this.ydoc, bytes, 'remote');
-      } catch (e) {
-        console.error('[YjsProvider] Failed to apply remote update:', e);
-      }
-    }
-  }
-
-  private handleDocUpdate = (update: Uint8Array, origin: any) => {
-    // Only send updates originating locally (ignore 'remote' and 'indexeddb')
-    if (this.destroyed || origin === 'remote' || origin === this.indexeddbProvider) {
-      return;
-    }
-
-    if (this.status === 'ws' && this.ws && this.ws.readyState === WebSocket.OPEN) {
-      try {
-        this.ws.send(update);
-        return;
-      } catch (e) {
-        console.warn('[YjsProvider] Failed to send update over WS, falling back to HTTP POST:', e);
-        this.fallbackToHTTP();
-      }
-    }
-
-    // Upstream via HTTP POST fallback
-    this.sendUpdateViaHTTP(update);
-  };
-
-  private async sendUpdateViaHTTP(update: Uint8Array) {
-    const token = getToken() || '';
-    const url = `/api/v1/sync/docs/${encodeURIComponent(this.docId)}/update?token=${encodeURIComponent(token)}`;
-    try {
-      const res = await fetch(url, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/octet-stream',
-          ...(token ? { Authorization: `Bearer ${token}` } : {}),
-        },
-        body: new Blob([update as any]),
-      });
-      if (!res.ok) {
-        console.warn(`[YjsProvider] HTTP sync update status: ${res.status}`);
-      }
-    } catch (e) {
-      console.warn('[YjsProvider] Network error during HTTP sync update (persisted locally in IndexedDB):', e);
-      this.setStatus('offline');
-    }
-  }
-
-  public sendAwareness(payload: any) {
-    if (this.destroyed) return;
-
-    if (this.status === 'ws' && this.ws && this.ws.readyState === WebSocket.OPEN) {
-      try {
-        this.ws.send(JSON.stringify({
-          event: 'CRDT_AWARENESS',
-          docId: this.docId,
-          payload,
-        }));
-        return;
-      } catch {}
-    }
-
-    // HTTP awareness fallback
-    const token = getToken() || '';
-    fetch(`/api/v1/documents/${encodeURIComponent(this.docId)}/awareness`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        ...(token ? { Authorization: `Bearer ${token}` } : {}),
-      },
-      body: JSON.stringify(payload),
-    }).catch(() => {});
-  }
-
-  private clearWatchdog() {
-    if (this.wsWatchdogTimer) {
-      clearTimeout(this.wsWatchdogTimer);
-      this.wsWatchdogTimer = null;
-    }
-  }
-
-  private cleanupWebSocket() {
-    this.clearWatchdog();
-    if (this.ws) {
-      try {
-        this.ws.onopen = null;
-        this.ws.onmessage = null;
-        this.ws.onerror = null;
-        this.ws.onclose = null;
-        this.ws.close();
-      } catch {}
-      this.ws = null;
-    }
-  }
-
-  private cleanupSSE() {
-    if (this.eventSource) {
-      try {
-        this.eventSource.onopen = null;
-        this.eventSource.onmessage = null;
-        this.eventSource.onerror = null;
-        this.eventSource.close();
-      } catch {}
-      this.eventSource = null;
-    }
-  }
-
-  private base64ToUint8(base64: string): Uint8Array {
-    const binary = atob(base64);
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i++) {
-      bytes[i] = binary.charCodeAt(i);
-    }
-    return bytes;
-  }
-
-  public destroy() {
-    this.destroyed = true;
-    this.clearWatchdog();
-    this.cleanupWebSocket();
-    this.cleanupSSE();
-    this.ydoc.off('update', this.handleDocUpdate);
-    if (this.indexeddbProvider) {
-      try {
-        this.indexeddbProvider.destroy();
-      } catch {}
-    }
-    if (typeof window !== 'undefined') {
-      window.removeEventListener('online', this.handleOnline);
-      window.removeEventListener('offline', this.handleOffline);
-    }
-  }
-}
diff --git a/internal/api/server.go b/internal/api/server.go
index ba87bec..071f26c 100644
--- a/internal/api/server.go
+++ b/internal/api/server.go
@@ -3,7 +3,6 @@ package api
 import (
 	"bytes"
 	"crypto/tls"
-	"encoding/base64"
 	"encoding/json"
 	"fmt"
 	"io"
@@ -32,7 +31,7 @@ type Server struct {
 
 func NewServer(cfg *config.Config, store *storage.Store, wsHub *ws.Hub, staticFS fs.FS) *Server {
 	if wsHub != nil && store != nil {
-		wsHub.SetCRDTStore(store)
+		wsHub.SetDocStore(store)
 	}
 	srv := &Server{
 		cfg:      cfg,
@@ -70,8 +69,6 @@ func (s *Server) Router() http.Handler {
 	r.Get("/api/v1/ws/spaces/{spaceId}", s.handleWebSocket)
 	r.Get("/api/v1/ws/lists/{listId}", s.handleWebSocket)
 	r.Get("/api/v1/ws/docs/{id}", s.handleDocWebSocket)
-	r.Get("/api/v1/sync/docs/{id}/stream", s.handleDocSyncStream)
-	r.Post("/api/v1/sync/docs/{id}/update", s.handleDocSyncUpdate)
 	r.Get("/api/v1/events", s.handleSSE)
 	r.Post("/api/v1/events/rooms", s.handleSSERooms)
 
@@ -144,18 +141,6 @@ func (s *Server) Router() http.Handler {
 		r.Post("/api/v1/documents/{id}/shares", s.handleCreateDocShare)
 		r.Delete("/api/v1/documents/{id}/shares/{userId}", s.handleDeleteDocShare)
 
-		// Document Locking
-		r.Get("/api/v1/documents/{id}/lock", s.handleGetDocLock)
-		r.Post("/api/v1/documents/{id}/lock", s.handleLockDoc)
-		r.Post("/api/v1/documents/{id}/lock/heartbeat", s.handleHeartbeatDocLock)
-		r.Delete("/api/v1/documents/{id}/lock", s.handleUnlockDoc)
-
-		// Document CRDT Realtime Sync
-		r.Get("/api/v1/documents/{id}/crdt", s.handleGetDocCRDT)
-		r.Put("/api/v1/documents/{id}/crdt", s.handleSaveDocCRDT)
-		r.Post("/api/v1/documents/{id}/awareness", s.handlePostDocAwareness)
-		r.Delete("/api/v1/documents/{id}/awareness", s.handleDeleteDocAwareness)
-
 		// Shared Lists & Realtime Collaboration
 		r.Get("/api/v1/lists", s.handleGetAllLists)
 		r.Post("/api/v1/lists", s.handleCreateList)
@@ -864,6 +849,18 @@ func (s *Server) handleGetDocument(w http.ResponseWriter, r *http.Request) {
 		writeError(w, http.StatusNotFound, "Dokument nicht gefunden")
 		return
 	}
+	if s.wsHub != nil {
+		if liveTitle, liveBlocks, ok := s.wsHub.GetActiveDocState(docID); ok {
+			if liveTitle != "" {
+				doc.Title = liveTitle
+			}
+			if len(liveBlocks) > 0 {
+				doc.Blocks = liveBlocks
+				doc.MarkdownCache = domain.CompileBlocksToMarkdown(liveBlocks)
+				doc.Content = doc.MarkdownCache
+			}
+		}
+	}
 	writeJSON(w, http.StatusOK, doc)
 }
 
@@ -889,6 +886,9 @@ func (s *Server) handleUpdateDocument(w http.ResponseWriter, r *http.Request) {
 		writeError(w, http.StatusBadRequest, err.Error())
 		return
 	}
+	if s.wsHub != nil && (req.Title != nil || req.Blocks != nil) {
+		s.wsHub.SyncActiveDocRoom(docID, doc.Title, doc.Blocks)
+	}
 	if req.Title != nil || req.Icon != nil || req.FolderPath != nil || req.Blocks != nil || req.Tags != nil {
 		s.wsHub.BroadcastDocEvent(docID, "DOC_UPDATED", doc)
 		s.broadcastDocToAuthorizedUsers(docID, "DOC_UPDATED")
@@ -911,6 +911,9 @@ func (s *Server) handlePatchDocumentBlocks(w http.ResponseWriter, r *http.Reques
 		writeError(w, http.StatusBadRequest, err.Error())
 		return
 	}
+	if s.wsHub != nil {
+		s.wsHub.SyncActiveDocRoom(docID, doc.Title, doc.Blocks)
+	}
 
 	patchEvent := domain.DocBlocksPatchEvent{
 		DocID:      docID,
@@ -933,6 +936,9 @@ func (s *Server) handlePatchDocumentBlocks(w http.ResponseWriter, r *http.Reques
 func (s *Server) handleDeleteDocument(w http.ResponseWriter, r *http.Request) {
 	userID := auth.GetUserID(r.Context())
 	docID := chi.URLParam(r, "id")
+	if s.wsHub != nil {
+		s.wsHub.CloseDocRoom(docID)
+	}
 	if err := s.store.DeleteDocument(userID, docID); err != nil {
 		writeError(w, http.StatusInternalServerError, err.Error())
 		return
@@ -1307,30 +1313,7 @@ func (s *Server) handleGetCollaborators(w http.ResponseWriter, r *http.Request)
 	writeJSON(w, http.StatusOK, users)
 }
 
-// --- DOCUMENT LOCKING (Neutralized - Yjs CRDT Pessimistic Locks Removed) ---
-
-func (s *Server) handleGetDocLock(w http.ResponseWriter, r *http.Request) {
-	writeJSON(w, http.StatusOK, map[string]interface{}{"locked": false})
-}
-
-func (s *Server) handleLockDoc(w http.ResponseWriter, r *http.Request) {
-	docID := chi.URLParam(r, "id")
-	writeJSON(w, http.StatusOK, map[string]interface{}{
-		"locked":   false,
-		"acquired": true,
-		"docId":    docID,
-	})
-}
-
-func (s *Server) handleHeartbeatDocLock(w http.ResponseWriter, r *http.Request) {
-	writeJSON(w, http.StatusOK, map[string]bool{"extended": true})
-}
-
-func (s *Server) handleUnlockDoc(w http.ResponseWriter, r *http.Request) {
-	writeJSON(w, http.StatusOK, map[string]bool{"unlocked": true})
-}
-
-// --- DOCUMENT CRDT REALTIME SYNC & DUAL TRANSPORT ---
+// --- DOCUMENT REALTIME WEBSOCKET ROOM ---
 
 func (s *Server) authenticateUserFromReq(r *http.Request) string {
 	token := r.URL.Query().Get("token")
@@ -1379,192 +1362,9 @@ func (s *Server) handleDocWebSocket(w http.ResponseWriter, r *http.Request) {
 		}
 	}
 
+	clientID := r.URL.Query().Get("clientId")
 	room := s.wsHub.GetOrCreateDocRoom(docID)
-	room.ServeDocWS(w, r, userID)
-}
-
-// GET /api/v1/sync/docs/{id}/stream
-func (s *Server) handleDocSyncStream(w http.ResponseWriter, r *http.Request) {
-	docID := chi.URLParam(r, "id")
-	if docID == "" {
-		writeError(w, http.StatusBadRequest, "docId erforderlich")
-		return
-	}
-
-	userID := s.authenticateUserFromReq(r)
-	if userID == "" {
-		userID = auth.GetUserID(r.Context())
-	}
-	if userID == "" {
-		userID = "anonymous"
-	}
-
-	if userID != "anonymous" {
-		if _, err := s.store.GetDocumentByID(userID, docID); err != nil {
-			writeError(w, http.StatusForbidden, "Kein Zugriff auf dieses Dokument")
-			return
-		}
-	}
-
-	room := s.wsHub.GetOrCreateDocRoom(docID)
-	room.ServeDocSSE(w, r, userID)
-}
-
-// POST /api/v1/sync/docs/{id}/update
-func (s *Server) handleDocSyncUpdate(w http.ResponseWriter, r *http.Request) {
-	docID := chi.URLParam(r, "id")
-	if docID == "" {
-		writeError(w, http.StatusBadRequest, "docId erforderlich")
-		return
-	}
-
-	userID := s.authenticateUserFromReq(r)
-	if userID == "" {
-		userID = auth.GetUserID(r.Context())
-	}
-	if userID == "" {
-		writeError(w, http.StatusUnauthorized, "Nicht autorisiert")
-		return
-	}
-
-	doc, err := s.store.GetDocumentByID(userID, docID)
-	if err != nil {
-		writeError(w, http.StatusNotFound, "Dokument nicht gefunden")
-		return
-	}
-	if !doc.IsOwner && doc.Permission != "write" {
-		writeError(w, http.StatusForbidden, "Keine Schreibberechtigung")
-		return
-	}
-
-	contentType := r.Header.Get("Content-Type")
-	var updateBytes []byte
-
-	if strings.Contains(contentType, "application/octet-stream") {
-		body, err := io.ReadAll(io.LimitReader(r.Body, 8*1024*1024))
-		if err != nil {
-			writeError(w, http.StatusBadRequest, "Fehler beim Lesen des Payloads")
-			return
-		}
-		updateBytes = body
-	} else {
-		var req struct {
-			Update string `json:"update"`
-			State  string `json:"state"`
-		}
-		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-			writeError(w, http.StatusBadRequest, "Ungültiges JSON")
-			return
-		}
-		if req.State != "" {
-			if raw, err := base64.StdEncoding.DecodeString(req.State); err == nil && len(raw) > 0 {
-				room := s.wsHub.GetOrCreateDocRoom(docID)
-				room.CompactState(raw, userID)
-			}
-		}
-		if req.Update != "" {
-			raw, err := base64.StdEncoding.DecodeString(req.Update)
-			if err != nil {
-				writeError(w, http.StatusBadRequest, "Ungültiges Base64 für Update")
-				return
-			}
-			updateBytes = raw
-		}
-	}
-
-	if len(updateBytes) > 0 {
-		room := s.wsHub.GetOrCreateDocRoom(docID)
-		room.ApplyUpdate(updateBytes, userID, nil, nil)
-	}
-
-	writeJSON(w, http.StatusOK, map[string]interface{}{"success": true, "docId": docID})
-}
-
-func (s *Server) handleGetDocCRDT(w http.ResponseWriter, r *http.Request) {
-	userID := auth.GetUserID(r.Context())
-	docID := chi.URLParam(r, "id")
-	if _, err := s.store.GetDocumentByID(userID, docID); err != nil {
-		writeError(w, http.StatusNotFound, "Dokument nicht gefunden")
-		return
-	}
-	room := s.wsHub.GetOrCreateDocRoom(docID)
-	b64State, b64Updates := room.GetInitialSnapshot()
-	writeJSON(w, http.StatusOK, map[string]interface{}{
-		"docId":   docID,
-		"state":   b64State,
-		"updates": b64Updates,
-	})
-}
-
-func (s *Server) handleSaveDocCRDT(w http.ResponseWriter, r *http.Request) {
-	userID := auth.GetUserID(r.Context())
-	docID := chi.URLParam(r, "id")
-	doc, err := s.store.GetDocumentByID(userID, docID)
-	if err != nil {
-		writeError(w, http.StatusNotFound, "Dokument nicht gefunden")
-		return
-	}
-	if !doc.IsOwner && doc.Permission != "write" {
-		writeError(w, http.StatusForbidden, "Keine Schreibberechtigung")
-		return
-	}
-	var req struct {
-		State  string `json:"state"`
-		Update string `json:"update"`
-	}
-	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-		writeError(w, http.StatusBadRequest, "Ungültiger Request-Body")
-		return
-	}
-	room := s.wsHub.GetOrCreateDocRoom(docID)
-	if req.Update != "" {
-		raw, err := base64.StdEncoding.DecodeString(req.Update)
-		if err != nil {
-			writeError(w, http.StatusBadRequest, "Ungültiges Base64 Format für Update")
-			return
-		}
-		room.ApplyUpdate(raw, userID, nil, nil)
-	}
-	if req.State != "" {
-		raw, err := base64.StdEncoding.DecodeString(req.State)
-		if err != nil {
-			writeError(w, http.StatusBadRequest, "Ungültiges Base64 Format")
-			return
-		}
-		room.CompactState(raw, userID)
-	}
-	writeJSON(w, http.StatusOK, map[string]bool{"success": true})
-}
-
-func (s *Server) handlePostDocAwareness(w http.ResponseWriter, r *http.Request) {
-	userID := auth.GetUserID(r.Context())
-	docID := chi.URLParam(r, "id")
-	doc, err := s.store.GetDocumentByID(userID, docID)
-	if err != nil {
-		writeError(w, http.StatusNotFound, "Dokument nicht gefunden")
-		return
-	}
-	_ = doc
-
-	var payload json.RawMessage
-	if err := json.NewDecoder(r.Body).Decode(&payload); err != nil {
-		writeError(w, http.StatusBadRequest, "Ungültiges JSON")
-		return
-	}
-
-	s.wsHub.BroadcastRoom("doc:"+docID, "CRDT_AWARENESS", payload, nil)
-	writeJSON(w, http.StatusOK, map[string]bool{"success": true})
-}
-
-func (s *Server) handleDeleteDocAwareness(w http.ResponseWriter, r *http.Request) {
-	userID := auth.GetUserID(r.Context())
-	docID := chi.URLParam(r, "id")
-
-	s.wsHub.BroadcastRoom("doc:"+docID, "CRDT_AWARENESS_LEAVE", map[string]interface{}{
-		"docId":  docID,
-		"userId": userID,
-	}, nil)
-	writeJSON(w, http.StatusOK, map[string]bool{"success": true})
+	room.ServeDocWS(w, r, userID, clientID)
 }
 
 // --- REALTIME LISTS & SHARING ---
diff --git a/internal/api/server_test.go b/internal/api/server_test.go
index 760c57c..11009c0 100644
--- a/internal/api/server_test.go
+++ b/internal/api/server_test.go
@@ -3,7 +3,6 @@ package api
 import (
 	"bytes"
 	"context"
-	"encoding/base64"
 	"encoding/json"
 	"net/http"
 	"net/http/httptest"
@@ -842,9 +841,9 @@ func TestWebhookTriageBadgeAndIngestion(t *testing.T) {
 	}
 }
 
-func TestDocumentCRDTEndpoints(t *testing.T) {
+func TestDocRoomLiveStateAndDebouncedFlush(t *testing.T) {
 	tmpDir := t.TempDir()
-	dbPath := filepath.Join(tmpDir, "crdt_api_test.db")
+	dbPath := filepath.Join(tmpDir, "docroom_test.db")
 
 	store, err := storage.NewStore(dbPath)
 	if err != nil {
@@ -860,59 +859,76 @@ func TestDocumentCRDTEndpoints(t *testing.T) {
 	srv := NewServer(cfg, store, hub, nil)
 	router := srv.Router()
 
-	user, err := store.CreateUser("crdt_api@example.com", "hash", "CRDT API User", "member")
+	user, err := store.CreateUser("outliner_ws@example.com", "hash", "WS Outliner User", "member")
 	if err != nil {
 		t.Fatalf("CreateUser failed: %v", err)
 	}
 	token, _ := auth.GenerateToken(cfg.JWTSecret, user.ID, user.Email, user.Role)
 
-	doc, err := store.CreateDocument(user.ID, "", "API CRDT Doc", "📄", "", nil, nil, false)
+	doc, err := store.CreateDocument(user.ID, "", "Initial Title", "📄", "", nil, nil, false)
 	if err != nil {
 		t.Fatalf("CreateDocument failed: %v", err)
 	}
 
-	// 1. Initial GET /api/v1/documents/{id}/crdt
-	req := httptest.NewRequest(http.MethodGet, "/api/v1/documents/"+doc.ID+"/crdt", nil)
+	// 1. Mutate in-memory DocRoom before 1.5s flush fires
+	room := hub.GetOrCreateDocRoom(doc.ID)
+	newContent := "Live RAM Block #ramtag"
+	newLevel := 1
+	room.HandleEvent(ws.DocSyncEvent{
+		Type:     "title_updated",
+		ClientID: "cli_1",
+		Title:    "RAM Updated Title",
+	}, nil)
+	room.HandleEvent(ws.DocSyncEvent{
+		Type:         "block_created",
+		ClientID:     "cli_1",
+		AfterBlockID: doc.Blocks[0].ID,
+		Block: &domain.DocumentBlock{
+			ID:      "blk_ram_2",
+			Type:    "text",
+			Content: newContent,
+			Level:   newLevel,
+		},
+	}, nil)
+
+	// 2. Verify GET /api/v1/documents/{id} immediately returns the un-flushed in-memory state
+	req := httptest.NewRequest(http.MethodGet, "/api/v1/documents/"+doc.ID, nil)
 	req.Header.Set("Authorization", "Bearer "+token)
 	rec := httptest.NewRecorder()
 	router.ServeHTTP(rec, req)
 
 	if rec.Code != http.StatusOK {
-		t.Fatalf("expected 200 OK from GET crdt, got %d: %s", rec.Code, rec.Body.String())
+		t.Fatalf("expected 200 OK from GET document, got %d: %s", rec.Code, rec.Body.String())
+	}
+	var liveDoc domain.Document
+	_ = json.Unmarshal(rec.Body.Bytes(), &liveDoc)
+	if liveDoc.Title != "RAM Updated Title" {
+		t.Fatalf("expected live RAM title 'RAM Updated Title', got '%s'", liveDoc.Title)
+	}
+	if len(liveDoc.Blocks) != 2 || liveDoc.Blocks[1].Content != newContent {
+		t.Fatalf("expected 2 live blocks with RAM content, got %+v", liveDoc.Blocks)
 	}
 
-	// 2. PUT /api/v1/documents/{id}/crdt with base64 state
-	savePayload := []byte(`{"state":"AQIDBA=="}`)
-	req = httptest.NewRequest(http.MethodPut, "/api/v1/documents/"+doc.ID+"/crdt", bytes.NewReader(savePayload))
-	req.Header.Set("Authorization", "Bearer "+token)
-	req.Header.Set("Content-Type", "application/json")
-	rec = httptest.NewRecorder()
-	router.ServeHTTP(rec, req)
+	// 3. Flush room to SQLite and verify persistence + tag extraction + markdown_cache
+	room.Flush()
 
-	if rec.Code != http.StatusOK {
-		t.Fatalf("expected 200 OK from PUT crdt, got %d: %s", rec.Code, rec.Body.String())
+	persistedDoc, err := store.GetDocumentByID(user.ID, doc.ID)
+	if err != nil {
+		t.Fatalf("GetDocumentByID failed: %v", err)
 	}
-
-	// 3. Verify state persisted
-	req = httptest.NewRequest(http.MethodGet, "/api/v1/documents/"+doc.ID+"/crdt", nil)
-	req.Header.Set("Authorization", "Bearer "+token)
-	rec = httptest.NewRecorder()
-	router.ServeHTTP(rec, req)
-
-	if rec.Code != http.StatusOK {
-		t.Fatalf("expected 200 OK from GET crdt, got %d", rec.Code)
+	if persistedDoc.Title != "RAM Updated Title" {
+		t.Fatalf("expected persisted title 'RAM Updated Title', got '%s'", persistedDoc.Title)
 	}
-	var crdtResp struct {
-		DocID string `json:"docId"`
-		State string `json:"state"`
+	if !strings.Contains(persistedDoc.MarkdownCache, "  - Live RAM Block #ramtag") {
+		t.Fatalf("expected compiled markdown_cache to contain indented bullet, got:\n%s", persistedDoc.MarkdownCache)
 	}
-	_ = json.Unmarshal(rec.Body.Bytes(), &crdtResp)
-	if crdtResp.State != "AQIDBA==" {
-		t.Fatalf("expected state 'AQIDBA==', got '%s'", crdtResp.State)
+	tags, _ := store.GetWorkspaceTags(user.ID)
+	if len(tags) != 1 || tags[0].Tag != "ramtag" {
+		t.Fatalf("expected extracted #ramtag in block_tags, got %+v", tags)
 	}
 }
 
-func TestSSEAndAwarenessEndpoints(t *testing.T) {
+func TestSSEGlobalEndpoint(t *testing.T) {
 	dbPath := filepath.Join(t.TempDir(), "test_sse.db")
 	store, err := storage.NewStore(dbPath)
 	if err != nil {
@@ -921,7 +937,6 @@ func TestSSEAndAwarenessEndpoints(t *testing.T) {
 	defer store.Close()
 
 	hub := ws.NewHub()
-	hub.SetCRDTStore(store)
 	cfg := &config.Config{
 		JWTSecret:         "test-jwt-secret-key",
 		AllowRegistration: false,
@@ -929,7 +944,6 @@ func TestSSEAndAwarenessEndpoints(t *testing.T) {
 	srv := NewServer(cfg, store, hub, nil)
 	router := srv.Router()
 
-	// 1. Setup user
 	setupBody := []byte(`{
 		"email": "sse_user@example.com",
 		"password": "secretpassword",
@@ -952,51 +966,13 @@ func TestSSEAndAwarenessEndpoints(t *testing.T) {
 	_ = json.Unmarshal(rec.Body.Bytes(), &authResp)
 	token := authResp.Token
 
-	// 2. Create Document
-	doc, err := store.CreateDocument(authResp.User.ID, "", "SSE Collaborative Note", "📄", "", nil, nil, false)
-	if err != nil {
-		t.Fatalf("failed to create document: %v", err)
-	}
-
-	// 3. Test Awareness POST and DELETE
-	awarenessBody := []byte(`{"userId":"` + authResp.User.ID + `","activeBlockId":"blk_123"}`)
-	req = httptest.NewRequest(http.MethodPost, "/api/v1/documents/"+doc.ID+"/awareness", bytes.NewReader(awarenessBody))
-	req.Header.Set("Authorization", "Bearer "+token)
-	req.Header.Set("Content-Type", "application/json")
-	rec = httptest.NewRecorder()
-	router.ServeHTTP(rec, req)
-	if rec.Code != http.StatusOK {
-		t.Fatalf("expected 200 OK from POST awareness, got %d: %s", rec.Code, rec.Body.String())
-	}
-
-	req = httptest.NewRequest(http.MethodDelete, "/api/v1/documents/"+doc.ID+"/awareness", nil)
-	req.Header.Set("Authorization", "Bearer "+token)
-	rec = httptest.NewRecorder()
-	router.ServeHTTP(rec, req)
-	if rec.Code != http.StatusOK {
-		t.Fatalf("expected 200 OK from DELETE awareness, got %d", rec.Code)
-	}
-
-	// 4. Test Delta CRDT Update via PUT /api/v1/documents/{id}/crdt
-	updateBody := []byte(`{"update":"AQIDBA=="}`)
-	req = httptest.NewRequest(http.MethodPut, "/api/v1/documents/"+doc.ID+"/crdt", bytes.NewReader(updateBody))
-	req.Header.Set("Authorization", "Bearer "+token)
-	req.Header.Set("Content-Type", "application/json")
-	rec = httptest.NewRecorder()
-	router.ServeHTTP(rec, req)
-	if rec.Code != http.StatusOK {
-		t.Fatalf("expected 200 OK from PUT crdt update, got %d: %s", rec.Code, rec.Body.String())
-	}
-
-	// 5. Test SSE Connection GET /api/v1/events
 	ctx, cancel := context.WithCancel(context.Background())
 	defer cancel()
 
-	req = httptest.NewRequest(http.MethodGet, "/api/v1/events?token="+token+"&docId="+doc.ID, nil).WithContext(ctx)
+	req = httptest.NewRequest(http.MethodGet, "/api/v1/events?token="+token, nil).WithContext(ctx)
 	rec = httptest.NewRecorder()
 
 	go func() {
-		// Cancel context after short moment to terminate stream cleanly
 		time.Sleep(50 * time.Millisecond)
 		cancel()
 	}()
@@ -1007,92 +983,11 @@ func TestSSEAndAwarenessEndpoints(t *testing.T) {
 	if !strings.Contains(contentType, "text/event-stream") {
 		t.Fatalf("expected Content-Type text/event-stream, got %s", contentType)
 	}
-	if rec.Header().Get("X-Accel-Buffering") != "no" {
-		t.Fatalf("expected X-Accel-Buffering: no, got %s", rec.Header().Get("X-Accel-Buffering"))
-	}
 	bodyStr := rec.Body.String()
 	if !strings.Contains(bodyStr, "SSE_CONNECTED") {
 		t.Fatalf("expected SSE_CONNECTED event in body, got: %s", bodyStr)
 	}
 }
 
-func TestDocRoomDualTransportAndDebouncedPersistence(t *testing.T) {
-	dbPath := filepath.Join(t.TempDir(), "test_dual_transport.db")
-	store, err := storage.NewStore(dbPath)
-	if err != nil {
-		t.Fatalf("failed to init store: %v", err)
-	}
-	defer store.Close()
-
-	cfg := &config.Config{
-		JWTSecret:         "test-secret-dual-transport",
-		AllowRegistration: true,
-	}
-	hub := ws.NewHub()
-	srv := NewServer(cfg, store, hub, nil)
-	router := srv.Router()
-
-	user, _ := store.CreateUser("dual@test.local", "hash", "Dual User", "member")
-	token, _ := auth.GenerateToken(cfg.JWTSecret, user.ID, user.Email, user.Role)
-
-	doc, _ := store.CreateDocument(user.ID, "", "Dual Transport Doc", "📄", "", nil, nil, false)
-
-	// 1. Test POST /api/v1/sync/docs/{id}/update with JSON base64
-	upd1 := base64.StdEncoding.EncodeToString([]byte{0x01, 0x02, 0x03})
-	req := httptest.NewRequest(http.MethodPost, "/api/v1/sync/docs/"+doc.ID+"/update", bytes.NewReader([]byte(`{"update":"`+upd1+`"}`)))
-	req.Header.Set("Authorization", "Bearer "+token)
-	req.Header.Set("Content-Type", "application/json")
-	rec := httptest.NewRecorder()
-	router.ServeHTTP(rec, req)
-
-	if rec.Code != http.StatusOK {
-		t.Fatalf("expected 200 OK from sync update, got %d: %s", rec.Code, rec.Body.String())
-	}
-
-	// 2. Test POST /api/v1/sync/docs/{id}/update with octet-stream binary
-	binaryUpd := []byte{0x04, 0x05, 0x06}
-	req = httptest.NewRequest(http.MethodPost, "/api/v1/sync/docs/"+doc.ID+"/update", bytes.NewReader(binaryUpd))
-	req.Header.Set("Authorization", "Bearer "+token)
-	req.Header.Set("Content-Type", "application/octet-stream")
-	rec = httptest.NewRecorder()
-	router.ServeHTTP(rec, req)
-
-	if rec.Code != http.StatusOK {
-		t.Fatalf("expected 200 OK from binary sync update, got %d: %s", rec.Code, rec.Body.String())
-	}
-
-	// 3. Test GET /api/v1/sync/docs/{id}/stream SSE connection
-	ctx, cancel := context.WithCancel(context.Background())
-	defer cancel()
-
-	req = httptest.NewRequest(http.MethodGet, "/api/v1/sync/docs/"+doc.ID+"/stream?token="+token, nil).WithContext(ctx)
-	rec = httptest.NewRecorder()
-
-	go func() {
-		time.Sleep(50 * time.Millisecond)
-		cancel()
-	}()
-
-	router.ServeHTTP(rec, req)
-
-	if !strings.Contains(rec.Header().Get("Content-Type"), "text/event-stream") {
-		t.Fatalf("expected text/event-stream, got %s", rec.Header().Get("Content-Type"))
-	}
-	bodyStr := rec.Body.String()
-	if !strings.Contains(bodyStr, "CRDT_INIT") {
-		t.Fatalf("expected CRDT_INIT in SSE stream, got %s", bodyStr)
-	}
-
-	// 4. Test Lock Neutrality: document update and block patch work without 423 Locked
-	updateReq := httptest.NewRequest(http.MethodPut, "/api/v1/documents/"+doc.ID, bytes.NewReader([]byte(`{"title":"Updated Without Locks"}`)))
-	updateReq.Header.Set("Authorization", "Bearer "+token)
-	updateReq.Header.Set("Content-Type", "application/json")
-	updateRec := httptest.NewRecorder()
-	router.ServeHTTP(updateRec, updateReq)
-
-	if updateRec.Code != http.StatusOK {
-		t.Fatalf("expected 200 OK from document update, got %d: %s", updateRec.Code, updateRec.Body.String())
-	}
-}
 
 
diff --git a/internal/domain/models.go b/internal/domain/models.go
index 0f6d863..f343c4a 100644
--- a/internal/domain/models.go
+++ b/internal/domain/models.go
@@ -260,13 +260,47 @@ type SystemSettings struct {
 }
 
 type DocumentBlock struct {
-	ID        string `json:"id"`
-	Type      string `json:"type"` // h1 | h2 | h3 | paragraph | todo | bullet | code | callout | divider | table | progress
-	Content   string `json:"content"`
-	Checked   bool   `json:"checked,omitempty"`
-	Lang      string `json:"lang,omitempty"`
-	Level     int    `json:"level,omitempty"`
-	Collapsed bool   `json:"collapsed,omitempty"`
+	ID         string  `json:"id"`
+	DocumentID string  `json:"documentId,omitempty"`
+	Type       string  `json:"type"` // h1 | h2 | h3 | paragraph | todo | bullet | code | callout | divider | table | progress
+	Content    string  `json:"content"`
+	Checked    bool    `json:"checked,omitempty"`
+	Lang       string  `json:"lang,omitempty"`
+	Level      int     `json:"level"`
+	Position   float64 `json:"position"`
+	Collapsed  bool    `json:"collapsed,omitempty"`
+}
+
+func CompileBlocksToMarkdown(blocks []DocumentBlock) string {
+	var sb strings.Builder
+	for _, b := range blocks {
+		lvl := b.Level
+		if lvl < 0 {
+			lvl = 0
+		}
+		indent := strings.Repeat("  ", lvl)
+		switch b.Type {
+		case "h1":
+			sb.WriteString(indent + "- # " + b.Content + "\n")
+		case "h2":
+			sb.WriteString(indent + "- ## " + b.Content + "\n")
+		case "h3":
+			sb.WriteString(indent + "- ### " + b.Content + "\n")
+		case "todo":
+			mark := "[ ]"
+			if b.Checked {
+				mark = "[x]"
+			}
+			sb.WriteString(indent + "- " + mark + " " + b.Content + "\n")
+		case "code":
+			sb.WriteString(indent + "- ```" + b.Lang + "\n" + b.Content + "\n" + indent + "  ```\n")
+		case "divider":
+			sb.WriteString(indent + "- ---\n")
+		default:
+			sb.WriteString(indent + "- " + b.Content + "\n")
+		}
+	}
+	return sb.String()
 }
 
 type DocBlocksPatchRequest struct {
@@ -310,19 +344,21 @@ type DocLockInfo struct {
 }
 
 type Document struct {
-	ID         string          `json:"id"`
-	UserID     string          `json:"userId"`
-	SpaceID    string          `json:"spaceId,omitempty"`
-	Title      string          `json:"title"`
-	Icon       string          `json:"icon"`
-	Content    string          `json:"content"`
-	Blocks     []DocumentBlock `json:"blocks"`
-	Tags       []string        `json:"tags"`
-	FolderPath string          `json:"folderPath,omitempty"`
-	IsPinned   bool            `json:"isPinned"`
-	IsArchived bool            `json:"isArchived"`
-	CreatedAt  string          `json:"createdAt"`
-	UpdatedAt  string          `json:"updatedAt"`
+	ID            string          `json:"id"`
+	UserID        string          `json:"userId"`
+	SpaceID       string          `json:"spaceId,omitempty"`
+	Title         string          `json:"title"`
+	Icon          string          `json:"icon"`
+	Content       string          `json:"content"`
+	MarkdownCache string          `json:"markdownCache,omitempty"`
+	Blocks        []DocumentBlock `json:"blocks"`
+	Tags          []string        `json:"tags"`
+	FolderID      string          `json:"folderId,omitempty"`
+	FolderPath    string          `json:"folderPath,omitempty"`
+	IsPinned      bool            `json:"isPinned"`
+	IsArchived    bool            `json:"isArchived"`
+	CreatedAt     string          `json:"createdAt"`
+	UpdatedAt     string          `json:"updatedAt"`
 
 	// Collaboration & Permissions
 	Permission       string     `json:"permission"` // owner | write | read
diff --git a/internal/storage/sqlite.go b/internal/storage/sqlite.go
index 5f2952a..317dded 100644
--- a/internal/storage/sqlite.go
+++ b/internal/storage/sqlite.go
@@ -162,9 +162,11 @@ func (s *Store) migrate() error {
 
 	CREATE TABLE IF NOT EXISTS documents (
 		id TEXT PRIMARY KEY,
-		user_id TEXT NOT NULL,
+		user_id TEXT NOT NULL DEFAULT '',
 		space_id TEXT DEFAULT '',
-		title TEXT NOT NULL,
+		title TEXT NOT NULL DEFAULT '',
+		folder_id TEXT NOT NULL DEFAULT '',
+		markdown_cache TEXT NOT NULL DEFAULT '',
 		icon TEXT NOT NULL DEFAULT '📄',
 		content TEXT NOT NULL DEFAULT '',
 		blocks_json TEXT NOT NULL DEFAULT '[]',
@@ -172,13 +174,40 @@ func (s *Store) migrate() error {
 		folder_path TEXT NOT NULL DEFAULT '',
 		is_pinned INTEGER NOT NULL DEFAULT 0,
 		is_archived INTEGER NOT NULL DEFAULT 0,
-		created_at TEXT NOT NULL,
-		updated_at TEXT NOT NULL,
+		created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+		updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
 		FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
 	);
 
 	CREATE INDEX IF NOT EXISTS idx_documents_user ON documents(user_id, is_archived, updated_at DESC);
 
+	CREATE TABLE IF NOT EXISTS blocks (
+		id TEXT PRIMARY KEY,
+		document_id TEXT NOT NULL,
+		content TEXT NOT NULL DEFAULT '',
+		level INT NOT NULL DEFAULT 0,
+		position REAL NOT NULL DEFAULT 0,
+		type TEXT NOT NULL DEFAULT 'bullet',
+		checked INTEGER NOT NULL DEFAULT 0,
+		collapsed INTEGER NOT NULL DEFAULT 0,
+		lang TEXT NOT NULL DEFAULT '',
+		FOREIGN KEY(document_id) REFERENCES documents(id) ON DELETE CASCADE
+	);
+
+	CREATE INDEX IF NOT EXISTS idx_blocks_doc_pos ON blocks(document_id, position ASC);
+
+	CREATE TABLE IF NOT EXISTS block_tags (
+		tag TEXT NOT NULL,
+		document_id TEXT NOT NULL,
+		block_id TEXT NOT NULL,
+		PRIMARY KEY(tag, block_id),
+		FOREIGN KEY(document_id) REFERENCES documents(id) ON DELETE CASCADE,
+		FOREIGN KEY(block_id) REFERENCES blocks(id) ON DELETE CASCADE
+	);
+
+	CREATE INDEX IF NOT EXISTS idx_block_tags_tag ON block_tags(tag);
+	CREATE INDEX IF NOT EXISTS idx_block_tags_doc ON block_tags(document_id);
+
 	CREATE TABLE IF NOT EXISTS doc_shares (
 		id TEXT PRIMARY KEY,
 		doc_id TEXT NOT NULL,
@@ -208,22 +237,6 @@ func (s *Store) migrate() error {
 	INSERT OR IGNORE INTO doc_pins (user_id, doc_id, created_at)
 	SELECT user_id, id, updated_at FROM documents WHERE is_pinned = 1;
 
-	CREATE TABLE IF NOT EXISTS doc_block_tags (
-		id TEXT PRIMARY KEY,
-		tag TEXT NOT NULL,
-		user_id TEXT NOT NULL,
-		doc_id TEXT NOT NULL,
-		block_id TEXT NOT NULL,
-		created_at TEXT NOT NULL,
-		UNIQUE(doc_id, block_id, tag),
-		FOREIGN KEY(doc_id) REFERENCES documents(id) ON DELETE CASCADE,
-		FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
-	);
-
-	CREATE INDEX IF NOT EXISTS idx_doc_block_tags_tag ON doc_block_tags(tag);
-	CREATE INDEX IF NOT EXISTS idx_doc_block_tags_user_tag ON doc_block_tags(user_id, tag);
-	CREATE INDEX IF NOT EXISTS idx_doc_block_tags_doc ON doc_block_tags(doc_id);
-
 	CREATE TABLE IF NOT EXISTS tag_pages (
 		user_id TEXT NOT NULL,
 		tag TEXT NOT NULL,
@@ -232,25 +245,6 @@ func (s *Store) migrate() error {
 		PRIMARY KEY(user_id, tag)
 	);
 
-	CREATE TABLE IF NOT EXISTS document_crdt_state (
-		doc_id TEXT PRIMARY KEY,
-		state_blob BLOB NOT NULL,
-		updated_at TEXT NOT NULL,
-		updated_by TEXT NOT NULL DEFAULT '',
-		FOREIGN KEY(doc_id) REFERENCES documents(id) ON DELETE CASCADE
-	);
-
-	CREATE TABLE IF NOT EXISTS document_crdt_updates (
-		id INTEGER PRIMARY KEY AUTOINCREMENT,
-		doc_id TEXT NOT NULL,
-		update_blob BLOB NOT NULL,
-		created_at TEXT NOT NULL,
-		created_by TEXT NOT NULL DEFAULT '',
-		FOREIGN KEY(doc_id) REFERENCES documents(id) ON DELETE CASCADE
-	);
-
-	CREATE INDEX IF NOT EXISTS idx_doc_crdt_updates_doc ON document_crdt_updates(doc_id);
-
 	CREATE TABLE IF NOT EXISTS lists (
 		id TEXT PRIMARY KEY,
 		user_id TEXT NOT NULL,
@@ -382,17 +376,28 @@ func (s *Store) migrate() error {
 		"CREATE INDEX IF NOT EXISTS idx_workspace_folders_user ON workspace_folders(user_id);",
 		"CREATE INDEX IF NOT EXISTS idx_workspace_folders_sf ON workspace_folders(shared_folder_id);",
 
-		"CREATE TABLE IF NOT EXISTS document_blocks (id TEXT PRIMARY KEY, doc_id TEXT NOT NULL, sort_order REAL NOT NULL DEFAULT 0, type TEXT NOT NULL DEFAULT 'bullet', content TEXT NOT NULL DEFAULT '', level INTEGER NOT NULL DEFAULT 0, checked INTEGER NOT NULL DEFAULT 0, collapsed INTEGER NOT NULL DEFAULT 0, lang TEXT NOT NULL DEFAULT '', updated_at TEXT NOT NULL, updated_by TEXT NOT NULL DEFAULT '', FOREIGN KEY(doc_id) REFERENCES documents(id) ON DELETE CASCADE);",
-		"CREATE INDEX IF NOT EXISTS idx_document_blocks_doc_order ON document_blocks(doc_id, sort_order);",
+		"ALTER TABLE documents ADD COLUMN folder_id TEXT NOT NULL DEFAULT '';",
+		"ALTER TABLE documents ADD COLUMN markdown_cache TEXT NOT NULL DEFAULT '';",
+
+		"CREATE TABLE IF NOT EXISTS blocks (id TEXT PRIMARY KEY, document_id TEXT NOT NULL, content TEXT NOT NULL DEFAULT '', level INT NOT NULL DEFAULT 0, position REAL NOT NULL DEFAULT 0, type TEXT NOT NULL DEFAULT 'bullet', checked INTEGER NOT NULL DEFAULT 0, collapsed INTEGER NOT NULL DEFAULT 0, lang TEXT NOT NULL DEFAULT '', FOREIGN KEY(document_id) REFERENCES documents(id) ON DELETE CASCADE);",
+		"CREATE INDEX IF NOT EXISTS idx_blocks_doc_pos ON blocks(document_id, position ASC);",
+
+		"CREATE TABLE IF NOT EXISTS block_tags (tag TEXT NOT NULL, document_id TEXT NOT NULL, block_id TEXT NOT NULL, PRIMARY KEY(tag, block_id), FOREIGN KEY(document_id) REFERENCES documents(id) ON DELETE CASCADE, FOREIGN KEY(block_id) REFERENCES blocks(id) ON DELETE CASCADE);",
+		"CREATE INDEX IF NOT EXISTS idx_block_tags_tag ON block_tags(tag);",
+		"CREATE INDEX IF NOT EXISTS idx_block_tags_doc ON block_tags(document_id);",
 	}
 	for _, q := range columnMigrations {
 		_, _ = s.db.Exec(q)
 	}
 
-	// Clean up legacy space_id from documents and task_lists if empty or orphaned
+	// Clean up legacy space and old document block/crdt tables
 	_, _ = s.db.Exec(`DROP TABLE IF EXISTS spaces`)
 	_, _ = s.db.Exec(`DROP TABLE IF EXISTS space_members`)
 	_, _ = s.db.Exec(`DROP TABLE IF EXISTS space_team_shares`)
+	_, _ = s.db.Exec(`DROP TABLE IF EXISTS document_crdt_state`)
+	_, _ = s.db.Exec(`DROP TABLE IF EXISTS document_crdt_updates`)
+	_, _ = s.db.Exec(`DROP TABLE IF EXISTS document_blocks`)
+	_, _ = s.db.Exec(`DROP TABLE IF EXISTS doc_block_tags`)
 
 	// Backfill username for existing accounts where username is empty
 	_, _ = s.db.Exec(`UPDATE users SET username = LOWER(SUBSTR(email, 1, INSTR(email, '@') - 1)) WHERE (username IS NULL OR username = '') AND INSTR(email, '@') > 0`)
@@ -445,7 +450,7 @@ func (s *Store) migrate() error {
 
 	// Reindex block tags if table is newly added or empty
 	var tagCount int
-	_ = s.db.QueryRow(`SELECT COUNT(*) FROM doc_block_tags`).Scan(&tagCount)
+	_ = s.db.QueryRow(`SELECT COUNT(*) FROM block_tags`).Scan(&tagCount)
 	if tagCount == 0 {
 		_ = s.reindexAllDocBlockTags()
 	}
@@ -1269,7 +1274,7 @@ func (s *Store) migrateWorkspaceToPureDB() {
 
 		for _, md := range docsToMigrate {
 			var count int
-			_ = s.db.QueryRow(`SELECT COUNT(*) FROM document_blocks WHERE doc_id = ?`, md.id).Scan(&count)
+			_ = s.db.QueryRow(`SELECT COUNT(*) FROM blocks WHERE document_id = ?`, md.id).Scan(&count)
 			if count == 0 && md.blocksJSON != "" && md.blocksJSON != "[]" {
 				var blocks []domain.DocumentBlock
 				if err := json.Unmarshal([]byte(md.blocksJSON), &blocks); err == nil && len(blocks) > 0 {
@@ -1327,17 +1332,17 @@ func (s *Store) migrateWorkspaceToPureDB() {
 
 func (s *Store) loadDocBlocks(docID string, fallbackJSON string) []domain.DocumentBlock {
 	rows, err := s.db.Query(`
-		SELECT id, type, content, level, checked, collapsed, lang
-		FROM document_blocks
-		WHERE doc_id = ?
-		ORDER BY sort_order ASC, rowid ASC
+		SELECT id, document_id, type, content, level, position, checked, collapsed, lang
+		FROM blocks
+		WHERE document_id = ?
+		ORDER BY position ASC, rowid ASC
 	`, docID)
 	if err == nil {
 		blocks := make([]domain.DocumentBlock, 0)
 		for rows.Next() {
 			var b domain.DocumentBlock
 			var chk, col int
-			if scanErr := rows.Scan(&b.ID, &b.Type, &b.Content, &b.Level, &chk, &col, &b.Lang); scanErr == nil {
+			if scanErr := rows.Scan(&b.ID, &b.DocumentID, &b.Type, &b.Content, &b.Level, &b.Position, &chk, &col, &b.Lang); scanErr == nil {
 				b.Checked = chk != 0
 				b.Collapsed = col != 0
 				blocks = append(blocks, b)
@@ -1359,50 +1364,111 @@ func (s *Store) loadDocBlocks(docID string, fallbackJSON string) []domain.Docume
 	return blocks
 }
 
-func (s *Store) replaceDocBlocksInDB(docID, userID string, blocks []domain.DocumentBlock, now string) {
-	_, _ = s.db.Exec(`DELETE FROM document_blocks WHERE doc_id = ?`, docID)
-	if len(blocks) == 0 {
-		return
+func (s *Store) replaceDocBlocksInDB(docID, _ string, blocks []domain.DocumentBlock, now string) {
+	_, _ = s.db.Exec(`DELETE FROM blocks WHERE document_id = ?`, docID)
+	if len(blocks) > 0 {
+		stmt, err := s.db.Prepare(`
+			INSERT INTO blocks (id, document_id, content, level, position, type, checked, collapsed, lang)
+			VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+			ON CONFLICT(id) DO UPDATE SET
+				document_id = excluded.document_id,
+				content = excluded.content,
+				level = excluded.level,
+				position = excluded.position,
+				type = excluded.type,
+				checked = excluded.checked,
+				collapsed = excluded.collapsed,
+				lang = excluded.lang
+		`)
+		if err == nil {
+			defer stmt.Close()
+			for i, b := range blocks {
+				bID := strings.TrimSpace(b.ID)
+				if bID == "" {
+					bID = domain.NewID("blk")
+				}
+				bType := b.Type
+				if bType == "" {
+					bType = "bullet"
+				}
+				chk := 0
+				if b.Checked {
+					chk = 1
+				}
+				col := 0
+				if b.Collapsed {
+					col = 1
+				}
+				pos := b.Position
+				if pos <= 0 {
+					pos = float64((i + 1) * 1000)
+				}
+				_, _ = stmt.Exec(bID, docID, b.Content, b.Level, pos, bType, chk, col, b.Lang)
+			}
+		}
 	}
-	stmt, err := s.db.Prepare(`
-		INSERT INTO document_blocks (id, doc_id, sort_order, type, content, level, checked, collapsed, lang, updated_at, updated_by)
-		VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-		ON CONFLICT(id) DO UPDATE SET
-			doc_id = excluded.doc_id,
-			sort_order = excluded.sort_order,
-			type = excluded.type,
-			content = excluded.content,
-			level = excluded.level,
-			checked = excluded.checked,
-			collapsed = excluded.collapsed,
-			lang = excluded.lang,
-			updated_at = excluded.updated_at,
-			updated_by = excluded.updated_by
-	`)
-	if err != nil {
-		return
-	}
-	defer stmt.Close()
 
-	for i, b := range blocks {
-		bID := strings.TrimSpace(b.ID)
-		if bID == "" {
-			bID = domain.NewID("blk")
-		}
-		bType := b.Type
-		if bType == "" {
-			bType = "bullet"
-		}
-		chk := 0
-		if b.Checked {
-			chk = 1
-		}
-		col := 0
-		if b.Collapsed {
-			col = 1
-		}
-		_, _ = stmt.Exec(bID, docID, float64((i+1)*1000), bType, b.Content, b.Level, chk, col, b.Lang, now, userID)
+	// Update markdown_cache on documents
+	mdCache := domain.CompileBlocksToMarkdown(blocks)
+	_, _ = s.db.Exec(`UPDATE documents SET markdown_cache = ?, updated_at = ? WHERE id = ?`, mdCache, now, docID)
+}
+
+func (s *Store) LoadDocumentState(docID string) (string, []domain.DocumentBlock, error) {
+	var title, blocksJSON string
+	err := s.db.QueryRow(`SELECT title, blocks_json FROM documents WHERE id = ?`, docID).Scan(&title, &blocksJSON)
+	if err != nil {
+		return "", nil, err
 	}
+	blocks := s.loadDocBlocks(docID, blocksJSON)
+	return title, blocks, nil
+}
+
+// FlushDocumentState persists the in-memory blocks into `blocks`, extracts all #tags into `block_tags`,
+// and compiles the hierarchical Markdown into `documents.markdown_cache`.
+func (s *Store) FlushDocumentState(docID string, title string, blocks []domain.DocumentBlock) error {
+	now := domain.NowISO()
+
+	// Normalize positions sequentially
+	normalized := make([]domain.DocumentBlock, len(blocks))
+	var plainBuilder strings.Builder
+	for i, b := range blocks {
+		if strings.TrimSpace(b.ID) == "" {
+			b.ID = domain.NewID("blk")
+		}
+		if b.Type == "" {
+			b.Type = "bullet"
+		}
+		b.DocumentID = docID
+		b.Position = float64((i + 1) * 1000)
+		normalized[i] = b
+		if b.Content != "" {
+			plainBuilder.WriteString(b.Content)
+			plainBuilder.WriteString("\n")
+		}
+	}
+
+	s.replaceDocBlocksInDB(docID, "", normalized, now)
+	_ = s.indexDocBlockTags(docID, "", normalized)
+
+	mdCache := domain.CompileBlocksToMarkdown(normalized)
+	plainContent := plainBuilder.String()
+	blocksJSON, _ := json.Marshal(normalized)
+
+	if strings.TrimSpace(title) != "" {
+		_, err := s.db.Exec(`
+			UPDATE documents
+			SET title = ?, markdown_cache = ?, content = ?, blocks_json = ?, updated_at = ?
+			WHERE id = ?
+		`, title, mdCache, plainContent, string(blocksJSON), now, docID)
+		return err
+	}
+
+	_, err := s.db.Exec(`
+		UPDATE documents
+		SET markdown_cache = ?, content = ?, blocks_json = ?, updated_at = ?
+		WHERE id = ?
+	`, mdCache, plainContent, string(blocksJSON), now, docID)
+	return err
 }
 
 // PatchDocumentBlocks applies atomic block-level upserts, deletions, and order reconciliation without overwriting concurrent edits from other sessions.
@@ -1417,16 +1483,16 @@ func (s *Store) PatchDocumentBlocks(userID, docID string, req domain.DocBlocksPa
 
 	now := domain.NowISO()
 
-	// Ensure document_blocks is seeded if previously only in blocks_json
+	// Ensure blocks table is seeded if previously only in blocks_json
 	var existingCount int
-	_ = s.db.QueryRow(`SELECT COUNT(*) FROM document_blocks WHERE doc_id = ?`, docID).Scan(&existingCount)
+	_ = s.db.QueryRow(`SELECT COUNT(*) FROM blocks WHERE document_id = ?`, docID).Scan(&existingCount)
 	if existingCount == 0 && len(doc.Blocks) > 0 {
 		s.replaceDocBlocksInDB(docID, doc.UserID, doc.Blocks, doc.UpdatedAt)
 	}
 
 	// Read current ordered block IDs from DB before patch
 	var existingOrder []string
-	ordRows, err := s.db.Query(`SELECT id FROM document_blocks WHERE doc_id = ? ORDER BY sort_order ASC, rowid ASC`, docID)
+	ordRows, err := s.db.Query(`SELECT id FROM blocks WHERE document_id = ? ORDER BY position ASC, rowid ASC`, docID)
 	if err == nil {
 		for ordRows.Next() {
 			var bid string
@@ -1445,7 +1511,7 @@ func (s *Store) PatchDocumentBlocks(userID, docID string, req domain.DocBlocksPa
 			continue
 		}
 		deletedSet[delID] = true
-		_, _ = s.db.Exec(`DELETE FROM document_blocks WHERE doc_id = ? AND id = ?`, docID, delID)
+		_, _ = s.db.Exec(`DELETE FROM blocks WHERE document_id = ? AND id = ?`, docID, delID)
 	}
 
 	// Filter existingOrder to exclude deleted blocks
@@ -1479,18 +1545,16 @@ func (s *Store) PatchDocumentBlocks(userID, docID string, req domain.DocBlocksPa
 		}
 		defaultSort := float64((len(survivingExisting) + idx + 1) * 1000)
 		_, _ = s.db.Exec(`
-			INSERT INTO document_blocks (id, doc_id, sort_order, type, content, level, checked, collapsed, lang, updated_at, updated_by)
-			VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+			INSERT INTO blocks (id, document_id, content, level, position, type, checked, collapsed, lang)
+			VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
 			ON CONFLICT(id) DO UPDATE SET
 				type = excluded.type,
 				content = excluded.content,
 				level = excluded.level,
 				checked = excluded.checked,
 				collapsed = excluded.collapsed,
-				lang = excluded.lang,
-				updated_at = excluded.updated_at,
-				updated_by = excluded.updated_by
-		`, bID, docID, defaultSort, bType, b.Content, b.Level, chk, col, b.Lang, now, userID)
+				lang = excluded.lang
+		`, bID, docID, b.Content, b.Level, defaultSort, bType, chk, col, b.Lang)
 		upsertedIDs = append(upsertedIDs, bID)
 		survivingSet[bID] = true
 	}
@@ -1506,8 +1570,6 @@ func (s *Store) PatchDocumentBlocks(userID, docID string, req domain.DocBlocksPa
 				inMerged[bid] = true
 			}
 		}
-		// Any surviving block in DB that was not in req.BlockOrder (e.g. concurrently added by another user)
-		// is inserted right after its predecessor from survivingExisting!
 		for i, bid := range survivingExisting {
 			if inMerged[bid] {
 				continue
@@ -1528,7 +1590,6 @@ func (s *Store) PatchDocumentBlocks(userID, docID string, req domain.DocBlocksPa
 			mergedOrder = append(mergedOrder[:insertPos], append([]string{bid}, mergedOrder[insertPos:]...)...)
 			inMerged[bid] = true
 		}
-		// Ensure any upserted block not in BlockOrder is also appended
 		for _, bid := range upsertedIDs {
 			if !inMerged[bid] {
 				mergedOrder = append(mergedOrder, bid)
@@ -1550,9 +1611,9 @@ func (s *Store) PatchDocumentBlocks(userID, docID string, req domain.DocBlocksPa
 		}
 	}
 
-	// Update sort_order in document_blocks
+	// Update position in blocks
 	for idx, bid := range mergedOrder {
-		_, _ = s.db.Exec(`UPDATE document_blocks SET sort_order = ? WHERE doc_id = ? AND id = ?`, float64((idx+1)*1000), docID, bid)
+		_, _ = s.db.Exec(`UPDATE blocks SET position = ? WHERE document_id = ? AND id = ?`, float64((idx+1)*1000), docID, bid)
 	}
 
 	// Reload authoritative block list and update document snapshot
@@ -1565,12 +1626,14 @@ func (s *Store) PatchDocumentBlocks(userID, docID string, req domain.DocBlocksPa
 		}
 	}
 	plainContent := plainBuilder.String()
+	mdCache := domain.CompileBlocksToMarkdown(finalBlocks)
 	blocksJSON, _ := json.Marshal(finalBlocks)
 
-	_, _ = s.db.Exec(`UPDATE documents SET content = ?, blocks_json = ?, updated_at = ? WHERE id = ?`,
-		plainContent, string(blocksJSON), now, docID)
+	_, _ = s.db.Exec(`UPDATE documents SET markdown_cache = ?, content = ?, blocks_json = ?, updated_at = ? WHERE id = ?`,
+		mdCache, plainContent, string(blocksJSON), now, docID)
 
 	doc.Blocks = finalBlocks
+	doc.MarkdownCache = mdCache
 	doc.Content = plainContent
 	doc.UpdatedAt = now
 	_ = s.indexDocBlockTags(doc.ID, doc.UserID, finalBlocks)
@@ -1578,59 +1641,6 @@ func (s *Store) PatchDocumentBlocks(userID, docID string, req domain.DocBlocksPa
 	return doc, mergedOrder, nil
 }
 
-// GetDocumentCRDTState returns the compacted CRDT state blob and any pending updates for a document.
-func (s *Store) GetDocumentCRDTState(docID string) ([]byte, [][]byte, error) {
-	var stateBlob []byte
-	err := s.db.QueryRow(`SELECT state_blob FROM document_crdt_state WHERE doc_id = ?`, docID).Scan(&stateBlob)
-	if err != nil && err != sql.ErrNoRows {
-		return nil, nil, err
-	}
-
-	rows, err := s.db.Query(`SELECT update_blob FROM document_crdt_updates WHERE doc_id = ? ORDER BY id ASC`, docID)
-	if err != nil {
-		return stateBlob, nil, nil
-	}
-	defer rows.Close()
-
-	var updates [][]byte
-	for rows.Next() {
-		var u []byte
-		if err := rows.Scan(&u); err == nil && len(u) > 0 {
-			updates = append(updates, u)
-		}
-	}
-	return stateBlob, updates, nil
-}
-
-// AppendDocumentCRDTUpdate appends a new CRDT update delta for a document.
-func (s *Store) AppendDocumentCRDTUpdate(docID string, update []byte, userID string) error {
-	now := domain.NowISO()
-	_, err := s.db.Exec(`
-		INSERT INTO document_crdt_updates (doc_id, update_blob, created_at, created_by)
-		VALUES (?, ?, ?, ?)
-	`, docID, update, now, userID)
-	return err
-}
-
-// SaveDocumentCRDTState saves a compacted snapshot of the document CRDT state and prunes older incremental updates.
-func (s *Store) SaveDocumentCRDTState(docID string, stateBlob []byte, userID string) error {
-	now := domain.NowISO()
-	_, err := s.db.Exec(`
-		INSERT INTO document_crdt_state (doc_id, state_blob, updated_at, updated_by)
-		VALUES (?, ?, ?, ?)
-		ON CONFLICT(doc_id) DO UPDATE SET
-			state_blob = excluded.state_blob,
-			updated_at = excluded.updated_at,
-			updated_by = excluded.updated_by
-	`, docID, stateBlob, now, userID)
-	if err != nil {
-		return err
-	}
-	// Prune incremental updates older than the snapshot
-	_, _ = s.db.Exec(`DELETE FROM document_crdt_updates WHERE doc_id = ?`, docID)
-	return nil
-}
-
 // GetAuthorizedDocUsers returns all user IDs who have read/write/owner access to docID.
 func (s *Store) GetAuthorizedDocUsers(docID string) ([]string, error) {
 	userSet := make(map[string]bool)
@@ -1964,6 +1974,8 @@ func (s *Store) scanDocumentWithBlocks(rows interface {
 	_ = json.Unmarshal([]byte(tagsStr), &d.Tags)
 	d.Tags = stripFolderTags(d.Tags)
 	d.Blocks = s.loadDocBlocks(d.ID, blocksStr)
+	d.MarkdownCache = domain.CompileBlocksToMarkdown(d.Blocks)
+	d.FolderID = d.FolderPath
 	return d, nil
 }
 
@@ -2303,8 +2315,8 @@ func (s *Store) DeleteDocument(userID, docID string) error {
 		_, _ = s.db.Exec(`DELETE FROM doc_user_folders WHERE user_id = ? AND doc_id = ?`, userID, docID)
 		return s.DeleteDocShare(userID, docID, userID)
 	}
-	_, _ = s.db.Exec(`DELETE FROM document_blocks WHERE doc_id = ?`, docID)
-	_, _ = s.db.Exec(`DELETE FROM doc_block_tags WHERE doc_id = ?`, docID)
+	_, _ = s.db.Exec(`DELETE FROM blocks WHERE document_id = ?`, docID)
+	_, _ = s.db.Exec(`DELETE FROM block_tags WHERE document_id = ?`, docID)
 	_, _ = s.db.Exec(`DELETE FROM doc_user_folders WHERE doc_id = ?`, docID)
 	_, err = s.db.Exec(`DELETE FROM documents WHERE id = ?`, docID)
 	return err
@@ -2338,27 +2350,25 @@ func (s *Store) reindexAllDocBlockTags() error {
 	return nil
 }
 
-func (s *Store) indexDocBlockTags(docID, userID string, blocks []domain.DocumentBlock) error {
-	_, _ = s.db.Exec(`DELETE FROM doc_block_tags WHERE doc_id = ?`, docID)
+func (s *Store) indexDocBlockTags(docID, _ string, blocks []domain.DocumentBlock) error {
+	_, _ = s.db.Exec(`DELETE FROM block_tags WHERE document_id = ?`, docID)
 	if len(blocks) == 0 {
 		return nil
 	}
 
-	stmt, err := s.db.Prepare(`INSERT OR IGNORE INTO doc_block_tags (id, tag, user_id, doc_id, block_id, created_at) VALUES (?, ?, ?, ?, ?, ?)`)
+	stmt, err := s.db.Prepare(`INSERT OR IGNORE INTO block_tags (tag, document_id, block_id) VALUES (?, ?, ?)`)
 	if err != nil {
 		return err
 	}
 	defer stmt.Close()
 
-	now := domain.NowISO()
 	for _, b := range blocks {
 		if b.Content == "" {
 			continue
 		}
 		tags := domain.ExtractTags(b.Content)
 		for _, tag := range tags {
-			tagID := domain.NewID("dbtag")
-			_, _ = stmt.Exec(tagID, tag, userID, docID, b.ID, now)
+			_, _ = stmt.Exec(tag, docID, b.ID)
 		}
 	}
 	return nil
@@ -2384,9 +2394,9 @@ func (s *Store) UpdateTagPageNote(userID, tag, content string) (string, error) {
 
 func (s *Store) GetWorkspaceTags(userID string) ([]domain.TagSummary, error) {
 	rows, err := s.db.Query(
-		`SELECT t.tag, COUNT(DISTINCT t.doc_id || ':' || t.block_id) as count
-		 FROM doc_block_tags t
-		 JOIN documents d ON t.doc_id = d.id
+		`SELECT t.tag, COUNT(DISTINCT t.document_id || ':' || t.block_id) as count
+		 FROM block_tags t
+		 JOIN documents d ON t.document_id = d.id
 		 LEFT JOIN doc_shares s ON s.doc_id = d.id AND s.user_id = ?
 		 LEFT JOIN (
 		     SELECT dts2.doc_id
@@ -2451,8 +2461,8 @@ func (s *Store) GetTagDetails(userID, tag string) (*domain.TagDetails, error) {
 		`SELECT t.block_id, d.id, d.title, d.icon, d.folder_path, d.blocks_json, d.updated_at, d.user_id,
 		        COALESCE(u.display_name, '') as owner_name,
 		        COALESCE(s.permission, dts.permission, '') as shared_permission
-		 FROM doc_block_tags t
-		 JOIN documents d ON t.doc_id = d.id
+		 FROM block_tags t
+		 JOIN documents d ON t.document_id = d.id
 		 LEFT JOIN users u ON d.user_id = u.id
 		 LEFT JOIN doc_shares s ON s.doc_id = d.id AND s.user_id = ?
 		 LEFT JOIN (
@@ -2768,8 +2778,8 @@ func (s *Store) DeleteFolder(userID, folderPath string) ([]string, error) {
 
 	// Delete documents from SQLite, blocks, pins, shares, tags, user_folders
 	for _, id := range deletedDocIDs {
-		_, _ = s.db.Exec(`DELETE FROM document_blocks WHERE doc_id = ?`, id)
-		_, _ = s.db.Exec(`DELETE FROM doc_block_tags WHERE doc_id = ?`, id)
+		_, _ = s.db.Exec(`DELETE FROM blocks WHERE document_id = ?`, id)
+		_, _ = s.db.Exec(`DELETE FROM block_tags WHERE document_id = ?`, id)
 		_, _ = s.db.Exec(`DELETE FROM doc_pins WHERE doc_id = ?`, id)
 		_, _ = s.db.Exec(`DELETE FROM doc_shares WHERE doc_id = ?`, id)
 		_, _ = s.db.Exec(`DELETE FROM doc_team_shares WHERE doc_id = ?`, id)
diff --git a/internal/storage/sqlite_test.go b/internal/storage/sqlite_test.go
index c30d48a..f5d2b63 100644
--- a/internal/storage/sqlite_test.go
+++ b/internal/storage/sqlite_test.go
@@ -683,9 +683,9 @@ func TestDatabaseFirstWorkspaceArchitecture(t *testing.T) {
 	}
 }
 
-func TestDocumentCRDTState(t *testing.T) {
+func TestFlushDocumentStateAndSchema(t *testing.T) {
 	tmpDir := t.TempDir()
-	dbPath := filepath.Join(tmpDir, "crdt_test.db")
+	dbPath := filepath.Join(tmpDir, "tabula_rasa_test.db")
 
 	store, err := NewStore(dbPath)
 	if err != nil {
@@ -693,52 +693,60 @@ func TestDocumentCRDTState(t *testing.T) {
 	}
 	defer store.Close()
 
-	user, err := store.CreateUser("crdt@example.com", "hash", "CRDT User", "member")
+	user, err := store.CreateUser("outliner@example.com", "hash", "Outliner User", "member")
 	if err != nil {
 		t.Fatalf("CreateUser failed: %v", err)
 	}
 
-	doc, err := store.CreateDocument(user.ID, "", "CRDT Test Doc", "📝", "", nil, nil, false)
+	doc, err := store.CreateDocument(user.ID, "", "Initial Note", "📝", "Projekte", nil, nil, false)
 	if err != nil {
 		t.Fatalf("CreateDocument failed: %v", err)
 	}
 
-	// 1. Initial CRDT state is empty
-	state, updates, err := store.GetDocumentCRDTState(doc.ID)
+	blocks := []domain.DocumentBlock{
+		{
+			ID:      "blk_root_1",
+			Type:    "text",
+			Content: "Architektur Übersicht #backend #go",
+			Level:   0,
+		},
+		{
+			ID:      "blk_child_1",
+			Type:    "todo",
+			Content: "SQLite WAL Modus aktivieren #sqlite",
+			Level:   1,
+			Checked: true,
+		},
+	}
+
+	if err := store.FlushDocumentState(doc.ID, "Architektur Notiz", blocks); err != nil {
+		t.Fatalf("FlushDocumentState failed: %v", err)
+	}
+
+	updatedDoc, err := store.GetDocumentByID(user.ID, doc.ID)
 	if err != nil {
-		t.Fatalf("GetDocumentCRDTState failed: %v", err)
+		t.Fatalf("GetDocumentByID failed: %v", err)
 	}
-	if len(state) != 0 || len(updates) != 0 {
-		t.Fatalf("expected empty CRDT state, got state=%d updates=%d", len(state), len(updates))
+	if updatedDoc.Title != "Architektur Notiz" {
+		t.Fatalf("expected title 'Architektur Notiz', got '%s'", updatedDoc.Title)
+	}
+	if len(updatedDoc.Blocks) != 2 {
+		t.Fatalf("expected 2 blocks, got %d", len(updatedDoc.Blocks))
+	}
+	if updatedDoc.Blocks[1].Level != 1 || updatedDoc.Blocks[1].Position != 2000 {
+		t.Fatalf("expected block[1] level=1 position=2000, got level=%d position=%v", updatedDoc.Blocks[1].Level, updatedDoc.Blocks[1].Position)
+	}
+	if updatedDoc.MarkdownCache == "" {
+		t.Fatalf("expected markdown_cache to be populated")
 	}
 
-	// 2. Append incremental updates
-	u1 := []byte{1, 2, 3, 4}
-	u2 := []byte{5, 6, 7, 8}
-	if err := store.AppendDocumentCRDTUpdate(doc.ID, u1, user.ID); err != nil {
-		t.Fatalf("AppendDocumentCRDTUpdate 1 failed: %v", err)
-	}
-	if err := store.AppendDocumentCRDTUpdate(doc.ID, u2, user.ID); err != nil {
-		t.Fatalf("AppendDocumentCRDTUpdate 2 failed: %v", err)
-	}
-
-	_, updatesAfter, err := store.GetDocumentCRDTState(doc.ID)
-	if err != nil || len(updatesAfter) != 2 {
-		t.Fatalf("expected 2 updates, got %d (err: %v)", len(updatesAfter), err)
-	}
-
-	// 3. Compact snapshot state
-	snapshot := []byte{99, 100, 101}
-	if err := store.SaveDocumentCRDTState(doc.ID, snapshot, user.ID); err != nil {
-		t.Fatalf("SaveDocumentCRDTState failed: %v", err)
-	}
-
-	stateAfter, updatesAfterCompact, err := store.GetDocumentCRDTState(doc.ID)
+	tags, err := store.GetWorkspaceTags(user.ID)
 	if err != nil {
-		t.Fatalf("GetDocumentCRDTState after compact failed: %v", err)
+		t.Fatalf("GetWorkspaceTags failed: %v", err)
 	}
-	if len(stateAfter) != 3 || len(updatesAfterCompact) != 0 {
-		t.Fatalf("expected compacted state of length 3 and 0 updates, got state=%d updates=%d", len(stateAfter), len(updatesAfterCompact))
+	if len(tags) != 3 {
+		t.Fatalf("expected 3 extracted tags in block_tags (#backend, #go, #sqlite), got %d: %+v", len(tags), tags)
 	}
 }
 
+
diff --git a/internal/ws/docroom.go b/internal/ws/docroom.go
index eefe556..807d778 100644
--- a/internal/ws/docroom.go
+++ b/internal/ws/docroom.go
@@ -1,9 +1,7 @@
 package ws
 
 import (
-	"encoding/base64"
 	"encoding/json"
-	"fmt"
 	"log"
 	"net/http"
 	"sync"
@@ -15,386 +13,488 @@ import (
 
 // DocWSClient represents an active WebSocket connection to a specific document room.
 type DocWSClient struct {
-	hub    *Hub
-	room   *DocRoom
-	conn   *websocket.Conn
-	userID string
-	send   chan []byte
+	hub      *Hub
+	room     *DocRoom
+	conn     *websocket.Conn
+	userID   string
+	clientID string
+	send     chan []byte
 }
 
-// DocSSEClient represents an active SSE connection to a specific document room.
-type DocSSEClient struct {
-	hub    *Hub
-	room   *DocRoom
-	id     string
-	userID string
-	send   chan []byte
+// DocSyncEvent is the lightweight JSON payload exchanged over /api/v1/ws/docs/{id}.
+type DocSyncEvent struct {
+	Type         string                 `json:"type"`
+	DocID        string                 `json:"docId,omitempty"`
+	ClientID     string                 `json:"clientId,omitempty"`
+	UserID       string                 `json:"userId,omitempty"`
+	Title        string                 `json:"title,omitempty"`
+	Block        *domain.DocumentBlock  `json:"block,omitempty"`
+	BlockID      string                 `json:"blockId,omitempty"`
+	AfterBlockID string                 `json:"afterBlockId,omitempty"`
+	NewIndex     *int                   `json:"newIndex,omitempty"`
+	Content      *string                `json:"content,omitempty"`
+	Level        *int                   `json:"level,omitempty"`
+	Checked      *bool                  `json:"checked,omitempty"`
+	Collapsed    *bool                  `json:"collapsed,omitempty"`
+	BlockType    *string                `json:"blockType,omitempty"`
+	Blocks       []domain.DocumentBlock `json:"blocks,omitempty"`
 }
 
-// DocRoom coordinates in-memory real-time updates and debounced persistence for one document.
+// DocRoom coordinates in-memory real-time block state and 1.5s debounced SQLite persistence for one document.
 type DocRoom struct {
-	mu                     sync.Mutex
-	docID                  string
-	hub                    *Hub
-	stateBlob              []byte
-	pendingUpdates         [][]byte
-	persistedUpdatesCount  int
-	wsClients              map[*DocWSClient]bool
-	sseClients             map[*DocSSEClient]bool
-	debounceTimer          *time.Timer
-	dirty                  bool
-	lastUserID             string
+	mu            sync.Mutex
+	docID         string
+	hub           *Hub
+	title         string
+	blocks        []domain.DocumentBlock
+	loaded        bool
+	wsClients     map[*DocWSClient]bool
+	debounceTimer *time.Timer
+	dirty         bool
 }
 
+// GetOrCreateDocRoom returns the active in-memory room for docID or initializes one from SQLite.
 func (h *Hub) GetOrCreateDocRoom(docID string) *DocRoom {
 	h.mu.Lock()
-	defer h.mu.Unlock()
-
 	if h.docRooms == nil {
 		h.docRooms = make(map[string]*DocRoom)
 	}
-
-	if room, exists := h.docRooms[docID]; exists {
-		return room
+	room, exists := h.docRooms[docID]
+	if !exists {
+		room = &DocRoom{
+			docID:     docID,
+			hub:       h,
+			wsClients: make(map[*DocWSClient]bool),
+		}
+		h.docRooms[docID] = room
 	}
+	store := h.docStore
+	h.mu.Unlock()
 
-	room := &DocRoom{
-		docID:      docID,
-		hub:        h,
-		wsClients:  make(map[*DocWSClient]bool),
-		sseClients: make(map[*DocSSEClient]bool),
-	}
-
-	// Pre-load current state from CRDT store if available
-	if h.crdtStore != nil {
-		stateBlob, updates, err := h.crdtStore.GetDocumentCRDTState(docID)
+	room.mu.Lock()
+	if !room.loaded && store != nil {
+		title, blocks, err := store.LoadDocumentState(docID)
 		if err == nil {
-			room.stateBlob = stateBlob
-			room.pendingUpdates = updates
-			room.persistedUpdatesCount = len(updates)
+			room.title = title
+			room.blocks = normalizeRoomBlocks(docID, blocks)
+			room.loaded = true
 		}
 	}
+	room.mu.Unlock()
 
-	h.docRooms[docID] = room
 	return room
 }
 
-// ApplyUpdate processes an incremental Yjs binary update in-memory, broadcasts it immediately
-// to all other connected clients (WS & SSE), and schedules an asynchronous debounced flush to SQLite.
-func (r *DocRoom) ApplyUpdate(update []byte, fromUserID string, senderWS *DocWSClient, senderSSE *DocSSEClient) {
-	if len(update) == 0 {
+// GetActiveDocState returns the live in-memory title and blocks if an active DocRoom exists in RAM.
+func (h *Hub) GetActiveDocState(docID string) (string, []domain.DocumentBlock, bool) {
+	h.mu.RLock()
+	room, exists := h.docRooms[docID]
+	h.mu.RUnlock()
+	if !exists || room == nil {
+		return "", nil, false
+	}
+
+	room.mu.Lock()
+	defer room.mu.Unlock()
+	if !room.loaded {
+		return "", nil, false
+	}
+	blocksCopy := make([]domain.DocumentBlock, len(room.blocks))
+	copy(blocksCopy, room.blocks)
+	return room.title, blocksCopy, true
+}
+
+// SyncActiveDocRoom updates an in-memory room if one is currently loaded (e.g. after REST PUT/PATCH).
+func (h *Hub) SyncActiveDocRoom(docID string, title string, blocks []domain.DocumentBlock) {
+	h.mu.RLock()
+	room, exists := h.docRooms[docID]
+	h.mu.RUnlock()
+	if !exists || room == nil {
 		return
 	}
 
-	r.mu.Lock()
-	r.pendingUpdates = append(r.pendingUpdates, update)
-	r.dirty = true
-	if fromUserID != "" {
-		r.lastUserID = fromUserID
+	room.mu.Lock()
+	if title != "" {
+		room.title = title
 	}
-
-	b64Update := base64.StdEncoding.EncodeToString(update)
-	msg := domain.WSMessage{
-		Event: "CRDT_UPDATE",
-		Payload: map[string]interface{}{
-			"docId":      r.docID,
-			"update":     b64Update,
-			"fromUserId": fromUserID,
-		},
-		Timestamp: domain.NowISO(),
+	if blocks != nil {
+		room.blocks = normalizeRoomBlocks(docID, blocks)
 	}
-	msgBytes, _ := json.Marshal(msg)
-
-	// Broadcast to all WS clients except sender
-	for client := range r.wsClients {
-		if senderWS != nil && client == senderWS {
-			continue
-		}
-		select {
-		case client.send <- msgBytes:
-		default:
-		}
-	}
-
-	// Broadcast to all SSE clients except sender
-	for client := range r.sseClients {
-		if senderSSE != nil && client == senderSSE {
-			continue
-		}
-		select {
-		case client.send <- msgBytes:
-		default:
-		}
-	}
-
-	// Schedule 2.5s debounced persistence
-	r.scheduleDebouncedFlushLocked()
-	r.mu.Unlock()
-
-	// Also inform legacy room subscribers if any
-	r.hub.BroadcastRoom("doc:"+r.docID, "CRDT_UPDATE", map[string]interface{}{
-		"docId":      r.docID,
-		"update":     b64Update,
-		"fromUserId": fromUserID,
-	}, nil)
+	room.loaded = true
+	room.mu.Unlock()
 }
 
-// CompactState replaces the incremental pending updates with a full compacted state blob.
-func (r *DocRoom) CompactState(stateBlob []byte, fromUserID string) {
-	if len(stateBlob) == 0 {
-		return
+// CloseDocRoom removes a document room from memory when a document is deleted.
+func (h *Hub) CloseDocRoom(docID string) {
+	h.mu.Lock()
+	room, exists := h.docRooms[docID]
+	if exists {
+		delete(h.docRooms, docID)
 	}
+	h.mu.Unlock()
 
-	r.mu.Lock()
-	r.stateBlob = stateBlob
-	r.pendingUpdates = nil
-	r.persistedUpdatesCount = 0
-	r.dirty = true
-	if fromUserID != "" {
-		r.lastUserID = fromUserID
+	if exists && room != nil {
+		room.mu.Lock()
+		if room.debounceTimer != nil {
+			room.debounceTimer.Stop()
+		}
+		room.dirty = false
+		for c := range room.wsClients {
+			_ = c.conn.Close()
+		}
+		room.wsClients = make(map[*DocWSClient]bool)
+		room.mu.Unlock()
 	}
-	r.scheduleDebouncedFlushLocked()
-	r.mu.Unlock()
 }
 
-// BroadcastAwareness forwards user awareness state to all other participants in the room.
-func (r *DocRoom) BroadcastAwareness(payload json.RawMessage, fromUserID string, senderWS *DocWSClient, senderSSE *DocSSEClient) {
-	msg := domain.WSMessage{
-		Event:     "CRDT_AWARENESS",
-		Payload:   payload,
-		Timestamp: domain.NowISO(),
+func normalizeRoomBlocks(docID string, blocks []domain.DocumentBlock) []domain.DocumentBlock {
+	if len(blocks) == 0 {
+		return []domain.DocumentBlock{
+			{
+				ID:         docID + "-b0",
+				DocumentID: docID,
+				Type:       "text",
+				Content:    "",
+				Level:      0,
+				Position:   1000,
+			},
+		}
 	}
-	msgBytes, _ := json.Marshal(msg)
+	out := make([]domain.DocumentBlock, len(blocks))
+	for i, b := range blocks {
+		if b.ID == "" {
+			b.ID = domain.NewID("blk")
+		}
+		b.DocumentID = docID
+		if b.Type == "" {
+			b.Type = "text"
+		}
+		if b.Level < 0 {
+			b.Level = 0
+		}
+		b.Position = float64((i + 1) * 1000)
+		out[i] = b
+	}
+	return out
+}
 
+// GetStateSnapshot returns a copy of the room's current live in-memory title and blocks.
+func (r *DocRoom) GetStateSnapshot() (string, []domain.DocumentBlock) {
 	r.mu.Lock()
 	defer r.mu.Unlock()
+	blocksCopy := make([]domain.DocumentBlock, len(r.blocks))
+	copy(blocksCopy, r.blocks)
+	return r.title, blocksCopy
+}
 
-	for client := range r.wsClients {
-		if senderWS != nil && client == senderWS {
-			continue
+// HandleEvent applies a granular block or title mutation to the in-memory room,
+// broadcasts it to all OTHER clients in the room (excluding senderClientID for echo protection),
+// and resets the 1.5-second inactivity debounce timer for SQLite persistence.
+func (r *DocRoom) HandleEvent(evt DocSyncEvent, sender *DocWSClient) {
+	r.mu.Lock()
+
+	evt.DocID = r.docID
+	if sender != nil {
+		if evt.ClientID == "" {
+			evt.ClientID = sender.clientID
 		}
-		select {
-		case client.send <- msgBytes:
-		default:
+		evt.UserID = sender.userID
+	}
+
+	mutated := false
+
+	switch evt.Type {
+	case "title_updated":
+		if evt.Title != "" || r.title != evt.Title {
+			r.title = evt.Title
+			mutated = true
+		}
+
+	case "block_created":
+		if evt.Block != nil {
+			newBlock := *evt.Block
+			if newBlock.ID == "" {
+				newBlock.ID = domain.NewID("blk")
+			}
+			newBlock.DocumentID = r.docID
+			if newBlock.Type == "" {
+				newBlock.Type = "text"
+			}
+			if newBlock.Level < 0 {
+				newBlock.Level = 0
+			}
+
+			// Avoid duplicate ID if already created
+			existsIdx := -1
+			for i, b := range r.blocks {
+				if b.ID == newBlock.ID {
+					existsIdx = i
+					break
+				}
+			}
+
+			if existsIdx >= 0 {
+				r.blocks[existsIdx] = newBlock
+			} else {
+				insertIdx := len(r.blocks)
+				if evt.AfterBlockID != "" {
+					for i, b := range r.blocks {
+						if b.ID == evt.AfterBlockID {
+							insertIdx = i + 1
+							break
+						}
+					}
+				} else if evt.NewIndex != nil && *evt.NewIndex >= 0 && *evt.NewIndex <= len(r.blocks) {
+					insertIdx = *evt.NewIndex
+				}
+
+				updated := make([]domain.DocumentBlock, 0, len(r.blocks)+1)
+				updated = append(updated, r.blocks[:insertIdx]...)
+				updated = append(updated, newBlock)
+				updated = append(updated, r.blocks[insertIdx:]...)
+				r.blocks = normalizeRoomBlocks(r.docID, updated)
+			}
+			evt.Block = &newBlock
+			mutated = true
+		}
+
+	case "block_updated":
+		targetID := evt.BlockID
+		if targetID == "" && evt.Block != nil {
+			targetID = evt.Block.ID
+		}
+		if targetID != "" {
+			for i := range r.blocks {
+				if r.blocks[i].ID == targetID {
+					if evt.Block != nil {
+						r.blocks[i].Content = evt.Block.Content
+						r.blocks[i].Level = evt.Block.Level
+						if evt.Block.Type != "" {
+							r.blocks[i].Type = evt.Block.Type
+						}
+						r.blocks[i].Checked = evt.Block.Checked
+						r.blocks[i].Collapsed = evt.Block.Collapsed
+						r.blocks[i].Lang = evt.Block.Lang
+					} else {
+						if evt.Content != nil {
+							r.blocks[i].Content = *evt.Content
+						}
+						if evt.Level != nil {
+							lvl := *evt.Level
+							if lvl < 0 {
+								lvl = 0
+							}
+							r.blocks[i].Level = lvl
+						}
+						if evt.Checked != nil {
+							r.blocks[i].Checked = *evt.Checked
+						}
+						if evt.Collapsed != nil {
+							r.blocks[i].Collapsed = *evt.Collapsed
+						}
+						if evt.BlockType != nil && *evt.BlockType != "" {
+							r.blocks[i].Type = *evt.BlockType
+						}
+					}
+					bCopy := r.blocks[i]
+					evt.Block = &bCopy
+					evt.BlockID = targetID
+					mutated = true
+					break
+				}
+			}
+		}
+
+	case "block_deleted":
+		if evt.BlockID != "" {
+			filtered := make([]domain.DocumentBlock, 0, len(r.blocks))
+			for _, b := range r.blocks {
+				if b.ID != evt.BlockID {
+					filtered = append(filtered, b)
+				}
+			}
+			r.blocks = normalizeRoomBlocks(r.docID, filtered)
+			mutated = true
+		}
+
+	case "block_moved":
+		if evt.BlockID != "" && evt.NewIndex != nil {
+			fromIdx := -1
+			for i, b := range r.blocks {
+				if b.ID == evt.BlockID {
+					fromIdx = i
+					break
+				}
+			}
+			if fromIdx >= 0 {
+				moving := r.blocks[fromIdx]
+				if evt.Level != nil {
+					lvl := *evt.Level
+					if lvl < 0 {
+						lvl = 0
+					}
+					moving.Level = lvl
+				}
+				without := make([]domain.DocumentBlock, 0, len(r.blocks)-1)
+				without = append(without, r.blocks[:fromIdx]...)
+				without = append(without, r.blocks[fromIdx+1:]...)
+
+				toIdx := *evt.NewIndex
+				if toIdx < 0 {
+					toIdx = 0
+				}
+				if toIdx > len(without) {
+					toIdx = len(without)
+				}
+
+				reordered := make([]domain.DocumentBlock, 0, len(r.blocks))
+				reordered = append(reordered, without[:toIdx]...)
+				reordered = append(reordered, moving)
+				reordered = append(reordered, without[toIdx:]...)
+				r.blocks = normalizeRoomBlocks(r.docID, reordered)
+				mutated = true
+			}
+		}
+
+	case "blocks_replaced":
+		if evt.Blocks != nil {
+			r.blocks = normalizeRoomBlocks(r.docID, evt.Blocks)
+			evt.Blocks = r.blocks
+			mutated = true
 		}
 	}
 
-	for client := range r.sseClients {
-		if senderSSE != nil && client == senderSSE {
-			continue
-		}
-		select {
-		case client.send <- msgBytes:
-		default:
+	if !mutated {
+		r.mu.Unlock()
+		return
+	}
+
+	r.dirty = true
+	r.loaded = true
+
+	msgBytes, err := json.Marshal(evt)
+	if err == nil {
+		for client := range r.wsClients {
+			// Strict Echo Protection: never send back to the originating connection or clientId
+			if sender != nil && (client == sender || (sender.clientID != "" && client.clientID == sender.clientID)) {
+				continue
+			}
+			if evt.ClientID != "" && client.clientID == evt.ClientID {
+				continue
+			}
+			select {
+			case client.send <- msgBytes:
+			default:
+			}
 		}
 	}
+
+	r.scheduleDebouncedFlushLocked()
+	r.mu.Unlock()
 }
 
 func (r *DocRoom) scheduleDebouncedFlushLocked() {
 	if r.debounceTimer != nil {
 		r.debounceTimer.Stop()
 	}
-	r.debounceTimer = time.AfterFunc(2500*time.Millisecond, func() {
+	r.debounceTimer = time.AfterFunc(1500*time.Millisecond, func() {
 		r.Flush()
 	})
 }
 
-// Flush persists in-memory pending updates to SQLite asynchronously in a background goroutine.
+// Flush persists the current in-memory document state (blocks, #tags in block_tags, and markdown_cache) to SQLite.
 func (r *DocRoom) Flush() {
 	r.mu.Lock()
 	if !r.dirty {
 		r.mu.Unlock()
 		return
 	}
+	if r.debounceTimer != nil {
+		r.debounceTimer.Stop()
+		r.debounceTimer = nil
+	}
 
-	// Prepare data to flush
 	docID := r.docID
-	userID := r.lastUserID
-	stateBlob := r.stateBlob
-	var updatesToFlush [][]byte
-
-	if len(stateBlob) > 0 && len(r.pendingUpdates) == 0 {
-		// Compacted state snapshot
-		r.dirty = false
-		r.mu.Unlock()
-
-		go func() {
-			if r.hub.crdtStore != nil {
-				_ = r.hub.crdtStore.SaveDocumentCRDTState(docID, stateBlob, userID)
-			}
-		}()
-		return
-	}
-
-	if r.persistedUpdatesCount < len(r.pendingUpdates) {
-		updatesToFlush = make([][]byte, len(r.pendingUpdates)-r.persistedUpdatesCount)
-		copy(updatesToFlush, r.pendingUpdates[r.persistedUpdatesCount:])
-		r.persistedUpdatesCount = len(r.pendingUpdates)
-	}
+	title := r.title
+	blocksCopy := make([]domain.DocumentBlock, len(r.blocks))
+	copy(blocksCopy, r.blocks)
 	r.dirty = false
 	r.mu.Unlock()
 
-	if len(updatesToFlush) > 0 {
-		go func() {
-			if r.hub.crdtStore != nil {
-				for _, u := range updatesToFlush {
-					_ = r.hub.crdtStore.AppendDocumentCRDTUpdate(docID, u, userID)
-				}
-			}
-		}()
-	}
-}
+	r.hub.mu.RLock()
+	store := r.hub.docStore
+	r.hub.mu.RUnlock()
 
-// GetInitialSnapshot returns the base64-encoded state blob and array of incremental updates.
-func (r *DocRoom) GetInitialSnapshot() (string, []string) {
-	r.mu.Lock()
-	defer r.mu.Unlock()
-
-	b64State := ""
-	if len(r.stateBlob) > 0 {
-		b64State = base64.StdEncoding.EncodeToString(r.stateBlob)
-	}
-
-	var b64Updates []string
-	for _, u := range r.pendingUpdates {
-		if len(u) > 0 {
-			b64Updates = append(b64Updates, base64.StdEncoding.EncodeToString(u))
+	if store != nil {
+		if err := store.FlushDocumentState(docID, title, blocksCopy); err != nil {
+			log.Printf("[doc-room] flush error for doc %s: %v", docID, err)
 		}
 	}
-	return b64State, b64Updates
 }
 
-// ServeDocWS handles WebSocket connection for GET /api/v1/ws/docs/{id}
-func (r *DocRoom) ServeDocWS(w http.ResponseWriter, req *http.Request, userID string) {
+// ServeDocWS handles WebSocket connections for GET /api/v1/ws/docs/{id}
+func (r *DocRoom) ServeDocWS(w http.ResponseWriter, req *http.Request, userID string, clientID string) {
 	conn, err := upgrader.Upgrade(w, req, nil)
 	if err != nil {
 		log.Printf("[doc-ws] upgrade error for doc %s: %v", r.docID, err)
 		return
 	}
 
+	if clientID == "" {
+		clientID = req.URL.Query().Get("clientId")
+	}
+	if clientID == "" {
+		clientID = domain.NewID("cli")
+	}
+
 	client := &DocWSClient{
-		hub:    r.hub,
-		room:   r,
-		conn:   conn,
-		userID: userID,
-		send:   make(chan []byte, 256),
+		hub:      r.hub,
+		room:     r,
+		conn:     conn,
+		userID:   userID,
+		clientID: clientID,
+		send:     make(chan []byte, 256),
 	}
 
 	r.mu.Lock()
 	r.wsClients[client] = true
+	title := r.title
+	blocksCopy := make([]domain.DocumentBlock, len(r.blocks))
+	copy(blocksCopy, r.blocks)
 	r.mu.Unlock()
 
-	// Send initial snapshot
-	state, updates := r.GetInitialSnapshot()
-	initMsg := domain.WSMessage{
-		Event: "CRDT_INIT",
-		Payload: map[string]interface{}{
-			"docId":   r.docID,
-			"state":   state,
-			"updates": updates,
-		},
-		Timestamp: domain.NowISO(),
+	// Immediately send live in-memory state to the newly connected client
+	initEvt := DocSyncEvent{
+		Type:     "doc_state",
+		DocID:    r.docID,
+		ClientID: clientID,
+		Title:    title,
+		Blocks:   blocksCopy,
+	}
+	if initBytes, err := json.Marshal(initEvt); err == nil {
+		client.send <- initBytes
 	}
-	initBytes, _ := json.Marshal(initMsg)
-	client.send <- initBytes
 
 	go client.writePump()
 	go client.readPump()
 }
 
-// ServeDocSSE handles SSE stream fallback for GET /api/v1/sync/docs/{id}/stream
-func (r *DocRoom) ServeDocSSE(w http.ResponseWriter, req *http.Request, userID string) {
-	flusher, ok := w.(http.Flusher)
-	if !ok {
-		http.Error(w, "Streaming unsupported", http.StatusInternalServerError)
-		return
-	}
-
-	w.Header().Set("Content-Type", "text/event-stream")
-	w.Header().Set("Cache-Control", "no-cache, no-transform")
-	w.Header().Set("Connection", "keep-alive")
-	w.Header().Set("X-Accel-Buffering", "no")
-	w.Header().Set("Access-Control-Allow-Origin", "*")
-
-	client := &DocSSEClient{
-		hub:    r.hub,
-		room:   r,
-		id:     domain.NewID("sse-doc"),
-		userID: userID,
-		send:   make(chan []byte, 256),
-	}
-
-	r.mu.Lock()
-	r.sseClients[client] = true
-	r.mu.Unlock()
-
-	defer func() {
-		r.mu.Lock()
-		delete(r.sseClients, client)
-		clientCount := len(r.wsClients) + len(r.sseClients)
-		r.mu.Unlock()
-
-		if clientCount == 0 {
-			r.Flush()
-		}
-	}()
-
-	// Send initial connected comment and CRDT_INIT
-	fmt.Fprintf(w, ": connected (transport: sse, docId: %s)\n\n", r.docID)
-	state, updates := r.GetInitialSnapshot()
-	initMsg, _ := json.Marshal(domain.WSMessage{
-		Event: "CRDT_INIT",
-		Payload: map[string]interface{}{
-			"docId":   r.docID,
-			"state":   state,
-			"updates": updates,
-		},
-		Timestamp: domain.NowISO(),
-	})
-	fmt.Fprintf(w, "data: %s\n\n", initMsg)
-	flusher.Flush()
-
-	ticker := time.NewTicker(15 * time.Second)
-	defer ticker.Stop()
-
-	notify := req.Context().Done()
-
-	for {
-		select {
-		case <-notify:
-			return
-		case msg, ok := <-client.send:
-			if !ok {
-				return
-			}
-			fmt.Fprintf(w, "data: %s\n\n", msg)
-			flusher.Flush()
-		case <-ticker.C:
-			// Ping to keep proxy connection alive
-			fmt.Fprintf(w, ": ping\n\n")
-			flusher.Flush()
-		}
-	}
-}
-
 func (c *DocWSClient) readPump() {
 	defer func() {
 		c.room.mu.Lock()
 		delete(c.room.wsClients, c)
-		clientCount := len(c.room.wsClients) + len(c.room.sseClients)
+		remaining := len(c.room.wsClients)
 		c.room.mu.Unlock()
 
 		_ = c.conn.Close()
 
-		// Broadcast awareness leave
-		c.room.BroadcastAwareness([]byte(fmt.Sprintf(`{"userId":"%s","activeBlockId":null}`, c.userID)), c.userID, nil, nil)
-
-		if clientCount == 0 {
+		// Flush immediately when the last client leaves the document room
+		if remaining == 0 {
 			c.room.Flush()
 		}
 	}()
 
-	c.conn.SetReadLimit(8 * 1024 * 1024) // 8MB limit for binary/text updates
+	c.conn.SetReadLimit(4 * 1024 * 1024)
 	_ = c.conn.SetReadDeadline(time.Now().Add(60 * time.Second))
 	c.conn.SetPongHandler(func(string) error {
 		_ = c.conn.SetReadDeadline(time.Now().Add(60 * time.Second))
@@ -402,51 +502,20 @@ func (c *DocWSClient) readPump() {
 	})
 
 	for {
-		msgType, message, err := c.conn.ReadMessage()
+		_, message, err := c.conn.ReadMessage()
 		if err != nil {
 			break
 		}
 
-		if msgType == websocket.BinaryMessage {
-			// Direct binary Yjs update
-			c.room.ApplyUpdate(message, c.userID, c, nil)
-			continue
-		}
-
-		// Text JSON message
-		var incoming struct {
-			Event   string          `json:"event"`
-			Payload json.RawMessage `json:"payload"`
-		}
-		if json.Unmarshal(message, &incoming) == nil {
-			switch incoming.Event {
-			case "CRDT_UPDATE":
-				var p struct {
-					Update string `json:"update"`
-				}
-				if json.Unmarshal(incoming.Payload, &p) == nil && p.Update != "" {
-					if raw, err := base64.StdEncoding.DecodeString(p.Update); err == nil && len(raw) > 0 {
-						c.room.ApplyUpdate(raw, c.userID, c, nil)
-					}
-				}
-			case "CRDT_COMPACT":
-				var p struct {
-					State string `json:"state"`
-				}
-				if json.Unmarshal(incoming.Payload, &p) == nil && p.State != "" {
-					if raw, err := base64.StdEncoding.DecodeString(p.State); err == nil && len(raw) > 0 {
-						c.room.CompactState(raw, c.userID)
-					}
-				}
-			case "CRDT_AWARENESS":
-				c.room.BroadcastAwareness(incoming.Payload, c.userID, c, nil)
-			}
+		var evt DocSyncEvent
+		if err := json.Unmarshal(message, &evt); err == nil && evt.Type != "" {
+			c.room.HandleEvent(evt, c)
 		}
 	}
 }
 
 func (c *DocWSClient) writePump() {
-	ticker := time.NewTicker(30 * time.Second)
+	ticker := time.NewTicker(25 * time.Second)
 	defer func() {
 		ticker.Stop()
 		_ = c.conn.Close()
diff --git a/internal/ws/hub.go b/internal/ws/hub.go
index 8d1ef07..485b16c 100644
--- a/internal/ws/hub.go
+++ b/internal/ws/hub.go
@@ -1,7 +1,6 @@
 package ws
 
 import (
-	"encoding/base64"
 	"encoding/json"
 	"fmt"
 	"log"
@@ -47,10 +46,9 @@ type docLockItem struct {
 	expiresAt time.Time
 }
 
-type CRDTStore interface {
-	GetDocumentCRDTState(docID string) ([]byte, [][]byte, error)
-	AppendDocumentCRDTUpdate(docID string, update []byte, userID string) error
-	SaveDocumentCRDTState(docID string, stateBlob []byte, userID string) error
+type DocStore interface {
+	LoadDocumentState(docID string) (string, []domain.DocumentBlock, error)
+	FlushDocumentState(docID string, title string, blocks []domain.DocumentBlock) error
 }
 
 type Hub struct {
@@ -63,7 +61,7 @@ type Hub struct {
 	sseRooms     map[string]map[*SSEClient]bool
 	locks        map[string]*docLockItem
 	docRooms     map[string]*DocRoom
-	crdtStore    CRDTStore
+	docStore     DocStore
 }
 
 func NewHub() *Hub {
@@ -81,10 +79,10 @@ func NewHub() *Hub {
 	return h
 }
 
-func (h *Hub) SetCRDTStore(store CRDTStore) {
+func (h *Hub) SetDocStore(store DocStore) {
 	h.mu.Lock()
 	defer h.mu.Unlock()
-	h.crdtStore = store
+	h.docStore = store
 }
 
 func (h *Hub) Register(c *Client) {
@@ -688,39 +686,6 @@ func (h *Hub) ServeSSE(w http.ResponseWriter, r *http.Request, roomID, userID st
 	fmt.Fprintf(w, "data: %s\n\n", connectedMsg)
 	flusher.Flush()
 
-	// If initial rooms had doc rooms, send CRDT_INIT
-	if h.crdtStore != nil {
-		for rID := range client.subscribedRooms {
-			if strings.HasPrefix(rID, "doc:") {
-				docID := strings.TrimPrefix(rID, "doc:")
-				stateBlob, updates, err := h.crdtStore.GetDocumentCRDTState(docID)
-				if err == nil && (len(stateBlob) > 0 || len(updates) > 0) {
-					var b64Updates []string
-					for _, u := range updates {
-						b64Updates = append(b64Updates, base64.StdEncoding.EncodeToString(u))
-					}
-					b64State := ""
-					if len(stateBlob) > 0 {
-						b64State = base64.StdEncoding.EncodeToString(stateBlob)
-					}
-					initMsg := domain.WSMessage{
-						Event: "CRDT_INIT",
-						Payload: map[string]interface{}{
-							"docId":   docID,
-							"state":   b64State,
-							"updates": b64Updates,
-						},
-						Timestamp: domain.NowISO(),
-					}
-					if initBytes, err := json.Marshal(initMsg); err == nil {
-						fmt.Fprintf(w, "data: %s\n\n", initBytes)
-						flusher.Flush()
-					}
-				}
-			}
-		}
-	}
-
 	ticker := time.NewTicker(15 * time.Second)
 	defer ticker.Stop()
 
@@ -811,49 +776,6 @@ func (c *Client) readPump() {
 					if c.hub.ReleaseDocLock(docID, c.userID, false) {
 						c.hub.BroadcastDocEvent(docID, "DOC_UNLOCKED", map[string]string{"docId": docID, "doc_id": docID})
 					}
-				case "CRDT_JOIN":
-					c.hub.JoinRoom(c, "doc:"+docID)
-					room := c.hub.GetOrCreateDocRoom(docID)
-					b64State, b64Updates := room.GetInitialSnapshot()
-					if len(b64State) > 0 || len(b64Updates) > 0 {
-						c.SendEvent("CRDT_INIT", map[string]interface{}{
-							"docId":   docID,
-							"state":   b64State,
-							"updates": b64Updates,
-						})
-					}
-				case "CRDT_UPDATE":
-					var p struct {
-						Update string `json:"update"`
-					}
-					_ = json.Unmarshal(incoming.Payload, &p)
-					if p.Update != "" {
-						if raw, err := base64.StdEncoding.DecodeString(p.Update); err == nil && len(raw) > 0 {
-							room := c.hub.GetOrCreateDocRoom(docID)
-							room.ApplyUpdate(raw, c.userID, nil, nil)
-						}
-					}
-				case "CRDT_COMPACT":
-					var p struct {
-						State string `json:"state"`
-					}
-					_ = json.Unmarshal(incoming.Payload, &p)
-					if p.State != "" {
-						if raw, err := base64.StdEncoding.DecodeString(p.State); err == nil && len(raw) > 0 {
-							room := c.hub.GetOrCreateDocRoom(docID)
-							room.CompactState(raw, c.userID)
-						}
-					}
-				case "CRDT_AWARENESS":
-					c.hub.BroadcastRoom("doc:"+docID, "CRDT_AWARENESS", incoming.Payload, c)
-					room := c.hub.GetOrCreateDocRoom(docID)
-					room.BroadcastAwareness(incoming.Payload, c.userID, nil, nil)
-				case "CRDT_LEAVE":
-					c.hub.LeaveRoom(c, "doc:"+docID)
-					c.hub.BroadcastRoom("doc:"+docID, "CRDT_AWARENESS_LEAVE", map[string]interface{}{
-						"docId":  docID,
-						"userId": c.userID,
-					}, c)
 				}
 			}
 		}
-- 
2.54.0


From 85e40104351ab7d665a02cdfc11756b4b054858a Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 21:41:27 +0100
Subject: [PATCH 05/33] fix(workspace): restore theme design-system, fix 5x
 note creation, enforce privacy isolation, fix shared write permission, add
 drag-drop & slash-commands

---
 .../src/features/workspace/DocumentEditor.tsx | 115 ++--
 .../src/features/workspace/OutlinerBlock.tsx  | 535 ++++++++--------
 .../src/features/workspace/OutlinerTree.tsx   |   5 +-
 .../src/features/workspace/WorkspaceView.tsx  | 599 +++++++++++++-----
 internal/api/server.go                        |  15 +-
 internal/ws/docroom.go                        |   8 +-
 internal/ws/hub.go                            |   4 +-
 7 files changed, 791 insertions(+), 490 deletions(-)

diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
index 91fe1d4..f1f7d5e 100644
--- a/frontend/src/features/workspace/DocumentEditor.tsx
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -25,6 +25,7 @@ export interface DocumentEditorProps {
   onDeleteDoc: (docId: string) => void;
   onOpenShareModal: (doc: Document) => void;
   onSelectTag: (tag: string) => void;
+  onWikiLinkClick?: (pageTitle: string) => void;
   onBackMobile?: () => void;
 }
 
@@ -61,6 +62,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   onDeleteDoc,
   onOpenShareModal,
   onSelectTag,
+  onWikiLinkClick,
   onBackMobile,
 }) => {
   const [doc, setDoc] = useState<Document | null>(initialDoc || null);
@@ -78,9 +80,11 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   const docRef = useRef<Document | null>(doc);
   docRef.current = doc;
 
+  // Crucial fix: Collaborator with write permission can edit!
   const canEdit = useMemo(() => {
     if (!doc) return true;
-    return doc.isOwner !== false && doc.permission !== 'read';
+    if (doc.isOwner) return true;
+    return doc.permission === 'owner' || doc.permission === 'write';
   }, [doc]);
 
   // Handle incoming WebSocket events for THIS document room
@@ -400,6 +404,8 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
         lines.push(`${indent}- ### ${b.content}`);
       } else if (b.type === 'code') {
         lines.push(`${indent}- \`\`\`${b.lang || ''}\n${b.content}\n${indent}  \`\`\``);
+      } else if (b.type === 'divider') {
+        lines.push(`${indent}- ---`);
       } else {
         lines.push(`${indent}- ${b.content}`);
       }
@@ -415,9 +421,9 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
 
   if (loading) {
     return (
-      <div className="flex-1 flex items-center justify-center p-12 text-slate-400">
-        <Loader2 className="w-6 h-6 animate-spin mr-2 text-indigo-500" />
-        <span className="text-sm">Notiz wird geladen…</span>
+      <div className="flex-1 flex items-center justify-center p-12 text-muted">
+        <Loader2 className="w-5 h-5 animate-spin mr-2 text-accent" />
+        <span className="text-xs">Notiz wird geladen…</span>
       </div>
     );
   }
@@ -425,12 +431,12 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   if (error) {
     return (
       <div className="flex-1 flex flex-col items-center justify-center p-12 text-center">
-        <p className="text-sm text-rose-500 font-medium mb-2">{error}</p>
+        <p className="text-xs text-status-err font-medium mb-2">{error}</p>
         {onBackMobile && (
           <button
             type="button"
             onClick={onBackMobile}
-            className="px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300"
+            className="btn-action px-3 py-1.5 text-xs text-main"
           >
             Zurück zur Übersicht
           </button>
@@ -440,15 +446,15 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   }
 
   return (
-    <div className="flex-1 flex flex-col h-full min-h-0 bg-white dark:bg-slate-900 overflow-y-auto">
+    <div className="flex-1 flex flex-col h-full min-h-0 bg-canvas overflow-y-auto">
       {/* Top Document Action Bar */}
-      <div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-2 px-4 sm:px-8 py-3 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md border-b border-slate-200/70 dark:border-slate-800/80">
+      <div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-2 px-4 sm:px-6 py-2.5 bg-panel border-b border-border shadow-sm">
         <div className="flex items-center gap-2 min-w-0">
           {onBackMobile && (
             <button
               type="button"
               onClick={onBackMobile}
-              className="lg:hidden p-1.5 rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
+              className="lg:hidden p-1.5 rounded-btn text-muted hover:text-main hover:bg-panel-elevated"
               title="Zurück zur Seitenleiste"
             >
               <ArrowLeft className="w-4 h-4" />
@@ -460,24 +466,22 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             <button
               type="button"
               onClick={() => canEdit && setShowFolderMenu((prev) => !prev)}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200/70 dark:hover:bg-slate-700/70 transition-colors"
+              className="btn-action inline-flex items-center gap-1.5 px-2 py-1 text-xs text-muted hover:text-main"
               title="Ordner wechseln"
             >
-              <FolderIcon className="w-3.5 h-3.5 text-indigo-500" />
-              <span className="truncate max-w-[160px]">
+              <FolderIcon className="w-3.5 h-3.5 text-accent" />
+              <span className="truncate max-w-[140px]">
                 {doc?.folderPath ? doc.folderPath : 'Hauptebene'}
               </span>
             </button>
 
             {showFolderMenu && canEdit && (
-              <div className="absolute left-0 mt-1 w-52 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl py-1 z-30 max-h-60 overflow-y-auto">
+              <div className="absolute left-0 mt-1 w-52 panel-surface shadow-panel border border-border rounded-card py-1 z-30 max-h-60 overflow-y-auto">
                 <button
                   type="button"
                   onClick={() => handleMoveToFolder('')}
-                  className={`w-full text-left px-3 py-1.5 text-xs hover:bg-slate-100 dark:hover:bg-slate-800 ${
-                    !doc?.folderPath
-                      ? 'font-semibold text-indigo-600 dark:text-indigo-400'
-                      : 'text-slate-700 dark:text-slate-300'
+                  className={`w-full text-left px-3 py-1.5 text-xs hover:bg-panel-elevated ${
+                    !doc?.folderPath ? 'font-bold text-accent' : 'text-main'
                   }`}
                 >
                   / (Hauptebene)
@@ -487,10 +491,8 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
                     key={folder}
                     type="button"
                     onClick={() => handleMoveToFolder(folder)}
-                    className={`w-full text-left px-3 py-1.5 text-xs hover:bg-slate-100 dark:hover:bg-slate-800 truncate ${
-                      doc?.folderPath === folder
-                        ? 'font-semibold text-indigo-600 dark:text-indigo-400'
-                        : 'text-slate-700 dark:text-slate-300'
+                    className={`w-full text-left px-3 py-1.5 text-xs hover:bg-panel-elevated truncate ${
+                      doc?.folderPath === folder ? 'font-bold text-accent' : 'text-main'
                     }`}
                   >
                     📁 {folder}
@@ -500,9 +502,9 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             )}
           </div>
 
-          {/* Read-only indicator if shared with read permission */}
+          {/* Read-only indicator */}
           {!canEdit && (
-            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-amber-50 dark:bg-amber-950/60 text-amber-700 dark:text-amber-300">
+            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-btn text-[11px] font-medium bg-status-warn/10 text-status-warn border border-status-warn/30">
               <Lock className="w-3 h-3" />
               Nur Lesen
             </span>
@@ -510,36 +512,36 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
         </div>
 
         {/* Right Status & Action Buttons */}
-        <div className="flex items-center gap-1.5">
-          {/* Sync Status Pill */}
+        <div className="flex items-center gap-1">
+          {/* Sync Status Badge */}
           <span
-            className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium ${
+            className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-btn text-[10px] font-mono font-medium ${
               syncStatus === 'connected'
-                ? 'bg-emerald-50 dark:bg-emerald-950/50 text-emerald-600 dark:text-emerald-400'
+                ? 'bg-status-ok/10 text-status-ok border border-status-ok/30'
                 : syncStatus === 'connecting' || syncStatus === 'reconnecting'
-                ? 'bg-amber-50 dark:bg-amber-950/50 text-amber-600 dark:text-amber-400'
-                : 'bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400'
+                ? 'bg-status-warn/10 text-status-warn border border-status-warn/30'
+                : 'bg-panel-elevated text-muted border border-border'
             }`}
             title={
               syncStatus === 'connected'
-                ? 'Echtzeit-Synchronisation aktiv (1.5s Auto-Flush in SQLite)'
-                : 'Änderungen werden automatisch per REST gespeichert'
+                ? 'Echtzeit-Synchronisation aktiv'
+                : 'Verbindung wird hergestellt…'
             }
           >
             {syncStatus === 'connected' ? (
               <>
-                <Wifi className="w-3 h-3" />
-                <span className="hidden sm:inline">Live</span>
+                <Wifi className="w-2.5 h-2.5" />
+                <span className="hidden sm:inline">LIVE</span>
               </>
             ) : syncStatus === 'connecting' || syncStatus === 'reconnecting' ? (
               <>
-                <Loader2 className="w-3 h-3 animate-spin" />
-                <span className="hidden sm:inline">Sync…</span>
+                <Loader2 className="w-2.5 h-2.5 animate-spin" />
+                <span className="hidden sm:inline">SYNC…</span>
               </>
             ) : (
               <>
-                <WifiOff className="w-3 h-3" />
-                <span className="hidden sm:inline">REST-Sync</span>
+                <WifiOff className="w-2.5 h-2.5" />
+                <span className="hidden sm:inline">OFFLINE</span>
               </>
             )}
           </span>
@@ -547,10 +549,10 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
           <button
             type="button"
             onClick={handleTogglePin}
-            className={`p-1.5 rounded-lg transition-colors ${
+            className={`p-1.5 rounded-btn transition-colors ${
               doc?.isPinned
-                ? 'bg-amber-50 dark:bg-amber-950/50 text-amber-500'
-                : 'text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800'
+                ? 'text-status-warn bg-status-warn/10'
+                : 'text-muted hover:text-main hover:bg-panel-elevated'
             }`}
             title={doc?.isPinned ? 'Anheftung lösen' : 'Notiz anheften'}
           >
@@ -561,7 +563,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             <button
               type="button"
               onClick={() => onOpenShareModal(doc)}
-              className="p-1.5 rounded-lg text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+              className="p-1.5 rounded-btn text-muted hover:text-accent hover:bg-panel-elevated transition-colors"
               title="Notiz teilen / Berechtigungen"
             >
               <Share2 className="w-4 h-4" />
@@ -571,17 +573,17 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
           <button
             type="button"
             onClick={handleExportMarkdown}
-            className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+            className="p-1.5 rounded-btn text-muted hover:text-main hover:bg-panel-elevated transition-colors"
             title="Als Markdown (.md) exportieren"
           >
             <Download className="w-4 h-4" />
           </button>
 
-          {canEdit && doc?.isOwner !== false && (
+          {canEdit && (doc?.isOwner || doc?.permission === 'owner') && (
             <button
               type="button"
               onClick={() => onDeleteDoc(docId)}
-              className="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/40 transition-colors"
+              className="p-1.5 rounded-btn text-muted hover:text-status-err hover:bg-status-err/10 transition-colors"
               title="Notiz löschen"
             >
               <Trash2 className="w-4 h-4" />
@@ -590,27 +592,27 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
         </div>
       </div>
 
-      {/* Main Outliner Content Container */}
-      <div className="max-w-4xl w-full mx-auto px-4 sm:px-10 py-6 sm:py-8 flex-1">
+      {/* Main Content Area */}
+      <div className="max-w-4xl w-full mx-auto px-4 sm:px-8 py-5 flex-1">
         {/* Document Icon + Title Header */}
-        <div className="flex items-center gap-3 mb-4 relative">
+        <div className="flex items-center gap-3 mb-3 relative">
           <div className="relative">
             <button
               type="button"
               onClick={() => canEdit && setShowEmojiPicker((prev) => !prev)}
-              className="w-11 h-11 rounded-2xl bg-slate-100 dark:bg-slate-800/90 hover:bg-slate-200/70 dark:hover:bg-slate-700 flex items-center justify-center text-2xl transition-colors"
+              className="w-10 h-10 rounded-btn bg-panel-elevated border border-border hover:border-strong flex items-center justify-center text-xl transition-colors"
               title="Icon ändern"
             >
               {doc?.icon || '📝'}
             </button>
             {showEmojiPicker && canEdit && (
-              <div className="absolute left-0 mt-2 p-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-xl grid grid-cols-6 gap-1 z-30 w-56">
+              <div className="absolute left-0 mt-1 p-2 panel-surface shadow-panel border border-border rounded-card grid grid-cols-6 gap-1 z-30 w-52">
                 {EMOJI_PALETTE.map((emoji) => (
                   <button
                     key={emoji}
                     type="button"
                     onClick={() => handleSelectIcon(emoji)}
-                    className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-lg flex items-center justify-center"
+                    className="p-1.5 rounded-btn hover:bg-panel-elevated text-base flex items-center justify-center"
                   >
                     {emoji}
                   </button>
@@ -626,20 +628,20 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             readOnly={!canEdit}
             onChange={handleTitleChange}
             placeholder="Titel der Notiz…"
-            className="flex-1 min-w-0 text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white bg-transparent border-0 focus:outline-none focus:ring-0 tracking-tight"
+            className="flex-1 min-w-0 text-xl sm:text-2xl font-bold text-main bg-transparent border-0 focus:outline-none focus:ring-0 tracking-tight"
           />
         </div>
 
-        {/* Document #Tags Summary Bar */}
+        {/* Extracted #Tags Summary Bar */}
         {extractedTags.length > 0 && (
-          <div className="flex flex-wrap items-center gap-1.5 mb-6 pb-4 border-b border-slate-100 dark:border-slate-800/80">
-            <Hash className="w-3.5 h-3.5 text-slate-400 mr-0.5" />
+          <div className="flex flex-wrap items-center gap-1.5 mb-4 pb-2 border-b border-border">
+            <Hash className="w-3.5 h-3.5 text-faint mr-0.5" />
             {extractedTags.map((tag) => (
               <button
                 key={tag}
                 type="button"
                 onClick={() => onSelectTag(tag)}
-                className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/80 transition-colors"
+                className="badge-accent text-[11px] font-medium px-2 py-0.5 rounded-btn hover:opacity-85 transition-opacity"
               >
                 #{tag}
               </button>
@@ -647,7 +649,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
           </div>
         )}
 
-        {/* Logseq Hierarchical Outliner Tree */}
+        {/* Logseq Outliner Tree */}
         <OutlinerTree
           docId={docId}
           blocks={blocks}
@@ -657,6 +659,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
           onDeleteBlock={handleDeleteBlock}
           onMoveBlock={handleMoveBlock}
           onTagClick={onSelectTag}
+          onWikiLinkClick={onWikiLinkClick}
         />
       </div>
     </div>
diff --git a/frontend/src/features/workspace/OutlinerBlock.tsx b/frontend/src/features/workspace/OutlinerBlock.tsx
index 61fbe42..c390540 100644
--- a/frontend/src/features/workspace/OutlinerBlock.tsx
+++ b/frontend/src/features/workspace/OutlinerBlock.tsx
@@ -1,22 +1,41 @@
-import React, { useState, useEffect, useRef, useLayoutEffect, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
 import {
   ChevronRight,
   ChevronDown,
-  CheckSquare,
-  Square,
-  Trash2,
+  Check,
+  X,
   GripVertical,
-  ArrowDownLeft,
-  Indent,
-  Outdent,
   Code,
   Heading1,
   Heading2,
+  Heading3,
   ListTodo,
   Type,
+  Minus,
+  MessageSquare,
+  Hash,
+  ExternalLink,
 } from 'lucide-react';
 import { DocumentBlock, BlockType } from '../../lib/types';
 
+export interface SlashCommand {
+  type: BlockType;
+  label: string;
+  desc: string;
+  icon: React.ReactNode;
+}
+
+const SLASH_COMMANDS: SlashCommand[] = [
+  { type: 'todo', label: '/todo', desc: 'Aufgabe mit Checkbox', icon: <ListTodo className="w-3.5 h-3.5" /> },
+  { type: 'h1', label: '/h1', desc: 'Große Überschrift', icon: <Heading1 className="w-3.5 h-3.5" /> },
+  { type: 'h2', label: '/h2', desc: 'Abschnitts-Überschrift', icon: <Heading2 className="w-3.5 h-3.5" /> },
+  { type: 'h3', label: '/h3', desc: 'Unterabschnitt', icon: <Heading3 className="w-3.5 h-3.5" /> },
+  { type: 'bullet', label: '/bullet', desc: 'Standard Listenpunkt', icon: <Type className="w-3.5 h-3.5" /> },
+  { type: 'code', label: '/code', desc: 'Code-Block mit Syntax', icon: <Code className="w-3.5 h-3.5" /> },
+  { type: 'callout', label: '/callout', desc: 'Hinweisbox', icon: <MessageSquare className="w-3.5 h-3.5" /> },
+  { type: 'divider', label: '/divider', desc: 'Trennlinie', icon: <Minus className="w-3.5 h-3.5" /> },
+];
+
 export interface OutlinerBlockProps {
   block: DocumentBlock;
   index: number;
@@ -31,6 +50,7 @@ export interface OutlinerBlockProps {
   onIndentBlock: (blockId: string, delta: 1 | -1) => void;
   onNavigateFocus: (blockId: string, direction: 'up' | 'down') => void;
   onTagClick?: (tag: string) => void;
+  onWikiLinkClick?: (pageTitle: string) => void;
   onDragStartBlock?: (index: number) => void;
   onDragOverBlock?: (e: React.DragEvent, index: number) => void;
   onDropBlock?: (index: number) => void;
@@ -41,7 +61,6 @@ export interface OutlinerBlockProps {
 export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   block,
   index,
-  maxAllowedLevel,
   hasChildren,
   isFocused,
   canEdit,
@@ -52,6 +71,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   onIndentBlock,
   onNavigateFocus,
   onTagClick,
+  onWikiLinkClick,
   onDragStartBlock,
   onDragOverBlock,
   onDropBlock,
@@ -59,7 +79,9 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   registerTextareaRef,
 }) => {
   const [localContent, setLocalContent] = useState<string>(block.content || '');
-  const [showTypeMenu, setShowTypeMenu] = useState(false);
+  const [slashSearch, setSlashSearch] = useState<string | null>(null);
+  const [slashIndex, setSlashIndex] = useState(0);
+
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const debounceTimerRef = useRef<number | null>(null);
   const latestBlockRef = useRef<DocumentBlock>(block);
@@ -67,7 +89,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   const localContentRef = useRef<string>(localContent);
   localContentRef.current = localContent;
 
-  // Sync incoming remote changes ONLY when this textarea does NOT hold active focus
+  // Sync incoming remote changes ONLY when this textarea is NOT active
   useEffect(() => {
     const isActivelyFocused =
       textareaRef.current !== null && document.activeElement === textareaRef.current;
@@ -76,7 +98,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
     }
   }, [block.content]);
 
-  // Cleanup 150ms debounce timer on unmount
   useEffect(() => {
     return () => {
       if (debounceTimerRef.current !== null) {
@@ -86,12 +107,11 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
     };
   }, []);
 
-  // Auto-resize textarea height on content or layout changes
   const adjustHeight = useCallback(() => {
     const el = textareaRef.current;
     if (!el) return;
     el.style.height = 'auto';
-    el.style.height = `${Math.max(24, el.scrollHeight)}px`;
+    el.style.height = `${Math.max(22, el.scrollHeight)}px`;
   }, []);
 
   useLayoutEffect(() => {
@@ -119,13 +139,31 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
     [onUpdateBlock]
   );
 
+  const filteredSlashCommands = useMemo(() => {
+    if (slashSearch === null) return [];
+    const q = slashSearch.toLowerCase();
+    return SLASH_COMMANDS.filter(
+      (c) => c.label.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q)
+    );
+  }, [slashSearch]);
+
+  const applySlashCommand = (cmd: SlashCommand) => {
+    setSlashSearch(null);
+    const clean = localContent.replace(/\/([a-z0-9]*)$/i, '').trim();
+    setLocalContent(clean);
+    flushDebounce(clean, {
+      type: cmd.type,
+      checked: cmd.type === 'todo' ? Boolean(block.checked) : false,
+    });
+  };
+
   const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     if (!canEdit) return;
     let val = e.target.value;
     let typeOverride: BlockType | undefined;
     let checkedOverride: boolean | undefined;
 
-    // Quick markdown prefix shortcuts at start of block
+    // Quick markdown shortcuts
     if (val.startsWith('[] ') || val.startsWith('[ ] ')) {
       val = val.replace(/^\[\s?\]\s/, '');
       typeOverride = 'todo';
@@ -143,13 +181,15 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
     } else if (val.startsWith('### ') && block.type !== 'h3') {
       val = val.slice(4);
       typeOverride = 'h3';
-    } else if (val.startsWith('/todo ')) {
-      val = val.slice(6);
-      typeOverride = 'todo';
-      checkedOverride = false;
-    } else if (val.startsWith('/code ')) {
-      val = val.slice(6);
-      typeOverride = 'code';
+    }
+
+    // Check for slash command invocation
+    const slashMatch = val.match(/\/([a-z0-9]*)$/i);
+    if (slashMatch) {
+      setSlashSearch(slashMatch[1]);
+      setSlashIndex(0);
+    } else {
+      setSlashSearch(null);
     }
 
     setLocalContent(val);
@@ -178,16 +218,39 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (!canEdit) return;
 
-    // 1. Tab / Shift+Tab -> Strict Outliner Indent / Outdent
+    // Slash command navigation
+    if (slashSearch !== null && filteredSlashCommands.length > 0) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSlashIndex((prev) => (prev + 1) % filteredSlashCommands.length);
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSlashIndex((prev) => (prev - 1 + filteredSlashCommands.length) % filteredSlashCommands.length);
+        return;
+      }
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        const selected = filteredSlashCommands[slashIndex];
+        if (selected) {
+          applySlashCommand(selected);
+        }
+        return;
+      }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        setSlashSearch(null);
+        return;
+      }
+    }
+
+    // 1. Tab / Shift+Tab -> Strict Indent / Outdent
     if (e.key === 'Tab') {
       e.preventDefault();
       e.stopPropagation();
       flushDebounce(localContent);
-      if (e.shiftKey) {
-        onIndentBlock(block.id, -1);
-      } else {
-        onIndentBlock(block.id, 1);
-      }
+      onIndentBlock(block.id, e.shiftKey ? -1 : 1);
       return;
     }
 
@@ -195,28 +258,27 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
     if (e.key === 'Enter' && !e.shiftKey && block.type !== 'code') {
       e.preventDefault();
       e.stopPropagation();
+      setSlashSearch(null);
       flushDebounce(localContent);
       onCreateBlockBelow(block.id, localContent);
       return;
     }
 
-    // 3. Backspace on empty block -> Outdent if indented, or delete block & focus previous
+    // 3. Backspace on empty block -> IMMEDIATELY DELETE THE BLOCK (regardless of level)!
+    // Outdenting is strictly done via Shift+Tab.
     if (e.key === 'Backspace' && localContent === '') {
       e.preventDefault();
       e.stopPropagation();
+      setSlashSearch(null);
       if (debounceTimerRef.current !== null) {
         window.clearTimeout(debounceTimerRef.current);
         debounceTimerRef.current = null;
       }
-      if ((block.level || 0) > 0) {
-        onIndentBlock(block.id, -1);
-      } else {
-        onDeleteBlock(block.id);
-      }
+      onDeleteBlock(block.id);
       return;
     }
 
-    // 4. ArrowUp / ArrowDown navigation between blocks
+    // 4. Arrow navigation between blocks
     if (e.key === 'ArrowUp' && !e.shiftKey && !e.altKey) {
       const el = textareaRef.current;
       if (el && el.selectionStart === 0 && el.selectionEnd === 0) {
@@ -239,66 +301,49 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   };
 
   const level = Math.max(0, block.level || 0);
-  const inlineTags = Array.from(
-    new Set(
-      (localContent.match(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g) || []).map((t) => t.slice(1).toLowerCase())
-    )
+
+  // Parse rich tokens (WikiLinks [[Page]] and #Tags)
+  const tokens = useMemo(() => {
+    const parts = (localContent || '').split(/(\[\[.*?\]\]|#[a-zA-Z0-9äöüÄÖÜß_-]+)/g);
+    return parts.filter(Boolean);
+  }, [localContent]);
+
+  const hasSpecialTokens = tokens.some(
+    (t) => t.startsWith('#') || (t.startsWith('[[') && t.endsWith(']]'))
   );
 
-  const setBlockType = (newType: BlockType) => {
-    setShowTypeMenu(false);
-    flushDebounce(localContent, {
-      type: newType,
-      checked: newType === 'todo' ? Boolean(block.checked) : false,
-    });
-  };
-
-  const textStyleClass =
-    block.type === 'h1'
-      ? 'text-xl font-bold text-slate-900 dark:text-white tracking-tight'
-      : block.type === 'h2'
-      ? 'text-lg font-semibold text-slate-800 dark:text-slate-100'
-      : block.type === 'h3'
-      ? 'text-base font-semibold text-slate-800 dark:text-slate-200'
-      : block.type === 'code'
-      ? 'font-mono text-xs bg-slate-900/90 text-emerald-300 px-3 py-2 rounded-lg border border-slate-700/80'
-      : block.type === 'todo' && block.checked
-      ? 'text-sm text-slate-400 dark:text-slate-500 line-through'
-      : 'text-sm text-slate-800 dark:text-slate-200';
-
   return (
     <div
-      className={`group relative flex items-start gap-1.5 py-1 rounded-lg transition-colors ${
+      className={`group relative flex items-start gap-1 py-1 rounded-card transition-colors ${
         isDragTarget
-          ? 'border-t-2 border-indigo-500 bg-indigo-50/40 dark:bg-indigo-950/20'
+          ? 'border-t-2 border-accent bg-accent/10'
           : isFocused
-          ? 'bg-slate-100/70 dark:bg-slate-800/40'
-          : 'hover:bg-slate-50/80 dark:hover:bg-slate-800/20'
+          ? 'bg-panel-elevated'
+          : 'hover:bg-panel'
       }`}
-      style={{ paddingLeft: `${level * 24 + 4}px` }}
+      style={{ paddingLeft: `${level * 22 + 4}px` }}
       onDragOver={(e) => onDragOverBlock?.(e, index)}
       onDrop={() => onDropBlock?.(index)}
     >
-      {/* Indentation Guide Lines */}
+      {/* Indentation Guide Line */}
       {level > 0 &&
         Array.from({ length: level }).map((_, lvlIdx) => (
           <div
             key={lvlIdx}
-            className="pointer-events-none absolute top-0 bottom-0 w-px bg-slate-200/80 dark:bg-slate-800"
-            style={{ left: `${lvlIdx * 24 + 14}px` }}
+            className="pointer-events-none absolute top-0 bottom-0 w-px border-l border-border"
+            style={{ left: `${lvlIdx * 22 + 12}px` }}
           />
         ))}
 
-      {/* Left Controls: Drag Handle + Collapse Toggle + Bullet / Checkbox */}
+      {/* Bullet Controls: Drag Handle, Collapse Toggle, Bullet / Checkbox */}
       <div className="flex items-center gap-0.5 pt-1 select-none shrink-0">
         {canEdit && (
           <button
             type="button"
             draggable
             onDragStart={() => onDragStartBlock?.(index)}
-            title="Block ziehen oder Typ ändern"
-            onClick={() => setShowTypeMenu((prev) => !prev)}
-            className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 rounded text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 cursor-grab active:cursor-grabbing transition-opacity"
+            title="Block ziehen oder umwandeln"
+            className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-main cursor-grab active:cursor-grabbing transition-opacity"
           >
             <GripVertical className="w-3.5 h-3.5" />
           </button>
@@ -310,17 +355,17 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
             onClick={() =>
               flushDebounce(localContent, { collapsed: !block.collapsed })
             }
-            className="p-0.5 rounded text-slate-400 hover:text-indigo-500 transition-colors"
+            className="p-0.5 text-muted hover:text-accent transition-colors"
             title={block.collapsed ? 'Unterpunkte ausklappen' : 'Unterpunkte einklappen'}
           >
             {block.collapsed ? (
               <ChevronRight className="w-3.5 h-3.5" />
             ) : (
-              <ChevronDown className="w-3.5 h-3.5" />
+              <ChevronDown className="w-3.5 h-3.5 text-accent" />
             )}
           </button>
         ) : (
-          <span className="w-4" />
+          <span className="w-3.5" />
         )}
 
         {block.type === 'todo' ? (
@@ -330,217 +375,207 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
             onClick={() =>
               flushDebounce(localContent, { checked: !block.checked })
             }
-            className={`p-0.5 rounded transition-colors ${
+            className={`w-4 h-4 checkbox-square flex items-center justify-center transition-colors border ${
               block.checked
-                ? 'text-emerald-500 hover:text-emerald-600'
-                : 'text-slate-400 hover:text-indigo-500'
+                ? 'bg-status-ok border-status-ok text-on-accent'
+                : 'border-strong hover:border-accent text-transparent'
             }`}
             title={block.checked ? 'Als offen markieren' : 'Als erledigt markieren'}
           >
-            {block.checked ? (
-              <CheckSquare className="w-4 h-4" />
-            ) : (
-              <Square className="w-4 h-4" />
-            )}
+            <Check className="w-3 h-3 stroke-[3]" />
           </button>
         ) : (
           <button
             type="button"
-            onClick={() => canEdit && setShowTypeMenu((prev) => !prev)}
-            className="w-5 h-5 flex items-center justify-center rounded-full group/bullet"
-            title="Klicken für Block-Typ"
+            onClick={() => {
+              if (canEdit) {
+                flushDebounce(localContent, {
+                  type: block.type === 'todo' ? 'bullet' : 'todo',
+                });
+              }
+            }}
+            className="w-4 h-4 flex items-center justify-center rounded-btn hover:bg-panel-hover"
+            title="Klick: Zu To-Do / Bullet umschalten"
           >
             <span
-              className={`w-2 h-2 rounded-full transition-all ${
+              className={`w-1.5 h-1.5 rounded-full transition-all ${
                 block.collapsed && hasChildren
-                  ? 'bg-indigo-500 ring-4 ring-indigo-500/20'
+                  ? 'bg-accent ring-2 ring-accent/30'
                   : isFocused
-                  ? 'bg-indigo-500 scale-110'
-                  : 'bg-slate-400 dark:bg-slate-500 group-hover/bullet:bg-indigo-400'
+                  ? 'bg-accent scale-125'
+                  : 'bg-faint group-hover:bg-accent'
               }`}
             />
           </button>
         )}
       </div>
 
-      {/* Block Type Quick Popover */}
-      {showTypeMenu && canEdit && (
-        <div className="absolute left-8 top-8 z-30 flex items-center gap-1 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl shadow-lg p-1">
-          <button
-            type="button"
-            onClick={() => setBlockType('text')}
-            className={`p-1.5 rounded-lg text-xs flex items-center gap-1 ${
-              block.type === 'text' || block.type === 'paragraph' || block.type === 'bullet'
-                ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300'
-                : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
-            }`}
-            title="Standard-Bullet"
-          >
-            <Type className="w-3.5 h-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => setBlockType('todo')}
-            className={`p-1.5 rounded-lg text-xs flex items-center gap-1 ${
-              block.type === 'todo'
-                ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300'
-                : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
-            }`}
-            title="To-Do Checkbox"
-          >
-            <ListTodo className="w-3.5 h-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => setBlockType('h1')}
-            className={`p-1.5 rounded-lg text-xs flex items-center gap-1 ${
-              block.type === 'h1'
-                ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300'
-                : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
-            }`}
-            title="Überschrift 1"
-          >
-            <Heading1 className="w-3.5 h-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => setBlockType('h2')}
-            className={`p-1.5 rounded-lg text-xs flex items-center gap-1 ${
-              block.type === 'h2'
-                ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300'
-                : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
-            }`}
-            title="Überschrift 2"
-          >
-            <Heading2 className="w-3.5 h-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => setBlockType('code')}
-            className={`p-1.5 rounded-lg text-xs flex items-center gap-1 ${
-              block.type === 'code'
-                ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300'
-                : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
-            }`}
-            title="Code-Block"
-          >
-            <Code className="w-3.5 h-3.5" />
-          </button>
-        </div>
-      )}
-
-      {/* Main Content Area: Auto-Resizing Multiline Textarea + Tag Pills */}
-      <div className="flex-1 min-w-0 pr-2">
-        <textarea
-          ref={(el) => {
-            textareaRef.current = el;
-            registerTextareaRef(block.id, el);
-          }}
-          rows={1}
-          value={localContent}
-          readOnly={!canEdit}
-          onFocus={() => {
-            setShowTypeMenu(false);
-            onFocusBlock(block.id);
-          }}
-          onBlur={() => {
-            if (debounceTimerRef.current !== null) {
-              flushDebounce(localContent);
-            }
-          }}
-          onChange={handleContentChange}
-          onKeyDown={handleKeyDown}
-          placeholder={
-            index === 0 && level === 0
-              ? 'Schreibe einen Punkt… (Enter = Neuer Punkt, Tab = Einrücken, #tag, [] für To-Do)'
-              : ''
-          }
-          className={`w-full resize-none overflow-hidden bg-transparent border-0 focus:outline-none focus:ring-0 leading-relaxed whitespace-pre-wrap break-words ${textStyleClass}`}
-        />
-
-        {/* Inline clickable #tag pills */}
-        {inlineTags.length > 0 && (
-          <div className="flex flex-wrap items-center gap-1 mt-1">
-            {inlineTags.map((t) => (
+      {/* Main Block Content */}
+      <div className="flex-1 min-w-0 pr-1 relative">
+        {block.type === 'divider' ? (
+          <div className="py-2">
+            <hr className="border-t border-border" />
+          </div>
+        ) : block.type === 'code' ? (
+          <div className="bg-code border border-border rounded-btn p-2 my-0.5">
+            <div className="text-[10px] text-faint font-mono uppercase pb-1 flex justify-between">
+              <span>Code</span>
               <button
-                key={t}
                 type="button"
-                onClick={() => onTagClick?.(t)}
-                className="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/80 transition-colors"
+                onClick={() => flushDebounce(localContent, { type: 'bullet' })}
+                className="hover:text-accent"
               >
-                #{t}
+                Als Text
               </button>
-            ))}
+            </div>
+            <textarea
+              ref={(el) => {
+                textareaRef.current = el;
+                registerTextareaRef(block.id, el);
+              }}
+              rows={1}
+              value={localContent}
+              readOnly={!canEdit}
+              onFocus={() => onFocusBlock(block.id)}
+              onBlur={() => debounceTimerRef.current !== null && flushDebounce(localContent)}
+              onChange={handleContentChange}
+              onKeyDown={handleKeyDown}
+              className="w-full resize-none font-mono text-xs bg-transparent text-status-ok border-0 focus:outline-none focus:ring-0 leading-relaxed"
+            />
+          </div>
+        ) : block.type === 'callout' ? (
+          <div className="bg-panel-elevated border-l-2 border-accent p-2 rounded-r-btn my-0.5">
+            <textarea
+              ref={(el) => {
+                textareaRef.current = el;
+                registerTextareaRef(block.id, el);
+              }}
+              rows={1}
+              value={localContent}
+              readOnly={!canEdit}
+              onFocus={() => onFocusBlock(block.id)}
+              onBlur={() => debounceTimerRef.current !== null && flushDebounce(localContent)}
+              onChange={handleContentChange}
+              onKeyDown={handleKeyDown}
+              className="w-full resize-none bg-transparent text-sm text-main border-0 focus:outline-none focus:ring-0 leading-relaxed italic"
+            />
+          </div>
+        ) : (
+          <textarea
+            ref={(el) => {
+              textareaRef.current = el;
+              registerTextareaRef(block.id, el);
+            }}
+            rows={1}
+            value={localContent}
+            readOnly={!canEdit}
+            onFocus={() => onFocusBlock(block.id)}
+            onBlur={() => debounceTimerRef.current !== null && flushDebounce(localContent)}
+            onChange={handleContentChange}
+            onKeyDown={handleKeyDown}
+            placeholder={
+              index === 0 && level === 0
+                ? 'Schreibe einen Punkt… (Enter = Neu, Tab = Einrücken, Shift+Tab = Ausrücken, / für Befehle)'
+                : ''
+            }
+            className={`w-full resize-none overflow-hidden bg-transparent border-0 focus:outline-none focus:ring-0 leading-relaxed whitespace-pre-wrap break-words ${
+              block.type === 'h1'
+                ? 'text-lg font-bold text-main tracking-tight'
+                : block.type === 'h2'
+                ? 'text-base font-semibold text-main'
+                : block.type === 'h3'
+                ? 'text-sm font-semibold text-main'
+                : block.type === 'todo' && block.checked
+                ? 'text-sm text-faint line-through'
+                : 'text-sm text-main'
+            }`}
+          />
+        )}
+
+        {/* Rich Tokens Bar (Wiki-Links & #Tags) if present */}
+        {hasSpecialTokens && !isFocused && (
+          <div className="flex flex-wrap items-center gap-1 mt-0.5">
+            {tokens.map((part, idx) => {
+              if (part.startsWith('#') && part.length > 1) {
+                const tag = part.slice(1);
+                return (
+                  <button
+                    key={idx}
+                    type="button"
+                    onClick={() => onTagClick?.(tag)}
+                    className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-accent bg-accent-dim hover:bg-accent/20 rounded-btn transition-colors"
+                  >
+                    <Hash className="w-2.5 h-2.5 opacity-80" />
+                    <span>{tag}</span>
+                  </button>
+                );
+              }
+              if (part.startsWith('[[') && part.endsWith(']]')) {
+                const page = part.slice(2, -2).trim();
+                return (
+                  <button
+                    key={idx}
+                    type="button"
+                    onClick={() => onWikiLinkClick?.(page)}
+                    className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-status-info bg-status-info/10 hover:bg-status-info/20 rounded-btn transition-colors"
+                  >
+                    <ExternalLink className="w-2.5 h-2.5 opacity-80" />
+                    <span>{page}</span>
+                  </button>
+                );
+              }
+              return null;
+            })}
           </div>
         )}
 
-        {/* Mobile Quick-Action Bar when focused */}
-        {isFocused && canEdit && (
-          <div className="flex sm:hidden items-center gap-1 mt-1.5 pt-1 border-t border-slate-200/60 dark:border-slate-800/60">
-            <button
-              type="button"
-              onMouseDown={(e) => {
-                e.preventDefault();
-                flushDebounce(localContent);
-                onIndentBlock(block.id, -1);
-              }}
-              disabled={level === 0}
-              className="p-1.5 rounded-lg text-xs text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 disabled:opacity-40"
-              title="Ausrücken (Shift+Tab)"
-            >
-              <Outdent className="w-3.5 h-3.5" />
-            </button>
-            <button
-              type="button"
-              onMouseDown={(e) => {
-                e.preventDefault();
-                flushDebounce(localContent);
-                onIndentBlock(block.id, 1);
-              }}
-              disabled={level >= maxAllowedLevel}
-              className="p-1.5 rounded-lg text-xs text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 disabled:opacity-40"
-              title="Einrücken (Tab)"
-            >
-              <Indent className="w-3.5 h-3.5" />
-            </button>
-            <button
-              type="button"
-              onMouseDown={(e) => {
-                e.preventDefault();
-                flushDebounce(localContent, {
-                  type: block.type === 'todo' ? 'text' : 'todo',
-                });
-              }}
-              className="p-1.5 rounded-lg text-xs text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800"
-              title="Als To-Do umschalten"
-            >
-              <ListTodo className="w-3.5 h-3.5" />
-            </button>
-            <button
-              type="button"
-              onMouseDown={(e) => {
-                e.preventDefault();
-                flushDebounce(localContent);
-                onCreateBlockBelow(block.id, localContent);
-              }}
-              className="p-1.5 rounded-lg text-xs text-indigo-600 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-950/60 ml-auto flex items-center gap-1"
-            >
-              <ArrowDownLeft className="w-3.5 h-3.5" />
-              <span>Neu</span>
-            </button>
+        {/* Floating Slash Commands Menu */}
+        {slashSearch !== null && canEdit && (
+          <div className="absolute left-0 top-8 z-40 w-56 panel-surface shadow-panel border border-border rounded-card p-1">
+            <div className="px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-faint border-b border-border mb-1">
+              Befehl auswählen
+            </div>
+            <div className="max-h-48 overflow-y-auto space-y-0.5">
+              {filteredSlashCommands.map((cmd, i) => (
+                <button
+                  key={cmd.type}
+                  type="button"
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    applySlashCommand(cmd);
+                  }}
+                  className={`w-full text-left px-2 py-1 rounded-btn text-xs flex items-center justify-between transition-colors ${
+                    i === slashIndex
+                      ? 'bg-accent text-on-accent'
+                      : 'text-main hover:bg-panel-elevated'
+                  }`}
+                >
+                  <div className="flex items-center gap-1.5">
+                    {cmd.icon}
+                    <span className="font-semibold">{cmd.label}</span>
+                  </div>
+                  <span className="text-[10px] opacity-75">{cmd.desc}</span>
+                </button>
+              ))}
+              {filteredSlashCommands.length === 0 && (
+                <div className="p-2 text-center text-xs text-faint">
+                  Kein Befehl gefunden
+                </div>
+              )}
+            </div>
           </div>
         )}
       </div>
 
-      {/* Right Hover Delete Button */}
+      {/* Delete button on hover */}
       {canEdit && (
         <button
           type="button"
           onClick={() => onDeleteBlock(block.id)}
-          className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-1 rounded text-slate-400 hover:text-rose-500 transition-opacity shrink-0"
+          className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-status-err rounded-btn transition-opacity shrink-0"
           title="Block löschen"
         >
-          <Trash2 className="w-3.5 h-3.5" />
+          <X className="w-3.5 h-3.5" />
         </button>
       )}
     </div>
diff --git a/frontend/src/features/workspace/OutlinerTree.tsx b/frontend/src/features/workspace/OutlinerTree.tsx
index e4b9096..577160f 100644
--- a/frontend/src/features/workspace/OutlinerTree.tsx
+++ b/frontend/src/features/workspace/OutlinerTree.tsx
@@ -12,6 +12,7 @@ export interface OutlinerTreeProps {
   onDeleteBlock: (blockId: string) => void;
   onMoveBlock: (blockId: string, newIndex: number, level?: number) => void;
   onTagClick?: (tag: string) => void;
+  onWikiLinkClick?: (pageTitle: string) => void;
 }
 
 export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
@@ -23,6 +24,7 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
   onDeleteBlock,
   onMoveBlock,
   onTagClick,
+  onWikiLinkClick,
 }) => {
   const [focusedBlockId, setFocusedBlockId] = useState<string | null>(null);
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
@@ -271,6 +273,7 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
           onIndentBlock={handleIndentBlock}
           onNavigateFocus={handleNavigateFocus}
           onTagClick={onTagClick}
+          onWikiLinkClick={onWikiLinkClick}
           onDragStartBlock={handleDragStartBlock}
           onDragOverBlock={handleDragOverBlock}
           onDropBlock={handleDropBlock}
@@ -300,7 +303,7 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
                 onCreateBlock(firstBlock);
               }
             }}
-            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-colors"
+            className="btn-action inline-flex items-center gap-1.5 px-2.5 py-1 text-xs text-muted hover:text-main"
           >
             <Plus className="w-3.5 h-3.5" />
             <span>Neuer Punkt</span>
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index e7cab37..d7cc95a 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import {
   FilePlus,
   FolderPlus,
@@ -9,14 +9,15 @@ import {
   Search,
   Pin,
   Trash2,
-  CheckSquare,
-  Square,
+  Check,
   Hash,
   FileText,
   Users,
   Plus,
   X,
   Share2,
+  ExternalLink,
+  Sparkles,
 } from 'lucide-react';
 import {
   Document,
@@ -28,7 +29,7 @@ import {
   UnifiedShare,
   User,
 } from '../../lib/types';
-import { api, onWebSocketMessage } from '../../lib/api';
+import { api, onWebSocketMessage, triggerHaptic } from '../../lib/api';
 import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { useMobileActions } from '../../context/MobileActionContext';
 import { DocumentEditor } from './DocumentEditor';
@@ -64,6 +65,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [newFolderIsShared, setNewFolderIsShared] = useState<boolean>(false);
   const [mobileShowDetail, setMobileShowDetail] = useState<boolean>(Boolean(initialDocId));
 
+  // Drag and Drop state
+  const [draggingDocId, setDraggingDocId] = useState<string | null>(null);
+  const [draggingFolderPath, setDraggingFolderPath] = useState<string | null>(null);
+  const [dragOverFolder, setDragOverFolder] = useState<string | null>(null);
+
+  // Rollup drilldown
+  const [todoFolderDrilldown, setTodoFolderDrilldown] = useState<string | null>(null);
+  const [collapsedTodoFolders, setCollapsedTodoFolders] = useState<Set<string>>(new Set());
+
   // Sharing Modal State
   const [shareModalDoc, setShareModalDoc] = useState<Document | null>(null);
   const [shareModalFolder, setShareModalFolder] = useState<SharedFolder | null>(null);
@@ -71,6 +81,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [teams, setTeams] = useState<Team[]>([]);
   const [collaborators, setCollaborators] = useState<User[]>([]);
 
+  const isCreatingRef = useRef<boolean>(false);
   const { setGroups, setPrimaryAction } = useMobileActions();
 
   const loadWorkspaceData = useCallback(async () => {
@@ -93,7 +104,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         return docsRes.length > 0 ? docsRes[0].id : null;
       });
     } catch {
-      // ignore initial load error
+      // ignore
     }
   }, []);
 
@@ -109,11 +120,22 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     }
   }, [initialDocId]);
 
-  // Listen to global WebSocket events for sidebar list updates (DOC_CREATED, DOC_DELETED, DOC_UPDATED)
+  // Global WebSocket listener with strict isolation & deduplication
   useEffect(() => {
     const unsub = onWebSocketMessage((msg) => {
       if (msg.event === 'DOC_CREATED' && msg.payload) {
         const created = msg.payload as Document;
+        // Strict Privacy Check: Only add if created by or shared with current user
+        if (currentUser) {
+          const isOwner = created.userId === currentUser.id;
+          const isShared =
+            created.sharedWith?.some(
+              (s) => s.userId === currentUser.id || s.targetId === currentUser.id
+            ) || false;
+          if (!isOwner && !isShared) {
+            return;
+          }
+        }
         setDocs((prev) => (prev.some((d) => d.id === created.id) ? prev : [created, ...prev]));
       } else if (msg.event === 'DOC_UPDATED' && msg.payload) {
         const updated = msg.payload as Document;
@@ -128,10 +150,13 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       }
     });
     return unsub;
-  }, []);
+  }, [currentUser]);
 
   const handleCreateDocument = useCallback(
     async (folderPath = '') => {
+      if (isCreatingRef.current) return;
+      isCreatingRef.current = true;
+      triggerHaptic(10);
       try {
         const created = await api.createDocument({
           title: 'Neue Notiz',
@@ -147,7 +172,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             },
           ],
         });
-        setDocs((prev) => [created, ...prev]);
+        setDocs((prev) => (prev.some((d) => d.id === created.id) ? prev : [created, ...prev]));
         setSelectedDocId(created.id);
         setSubView('editor');
         setMobileShowDetail(true);
@@ -157,6 +182,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         onStatsChange();
       } catch {
         // ignore
+      } finally {
+        setTimeout(() => {
+          isCreatingRef.current = false;
+        }, 300);
       }
     },
     [onStatsChange]
@@ -254,6 +283,55 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     }
   };
 
+  // HTML5 Drag & Drop handlers for moving documents into folders
+  const handleDocDragStart = (e: React.DragEvent, docId: string) => {
+    e.stopPropagation();
+    e.dataTransfer.setData('application/mindsift-doc-id', docId);
+    e.dataTransfer.setData('text/plain', docId);
+    e.dataTransfer.effectAllowed = 'move';
+    setDraggingDocId(docId);
+  };
+
+  const handleFolderDragStart = (e: React.DragEvent, path: string) => {
+    e.stopPropagation();
+    e.dataTransfer.setData('application/mindsift-folder-path', path);
+    e.dataTransfer.setData('text/plain', path);
+    e.dataTransfer.effectAllowed = 'move';
+    setDraggingFolderPath(path);
+  };
+
+  const handleDropOnFolder = async (targetFolder: string, e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverFolder(null);
+
+    const docId = e.dataTransfer.getData('application/mindsift-doc-id') || draggingDocId;
+    const folderPath = e.dataTransfer.getData('application/mindsift-folder-path') || draggingFolderPath;
+
+    setDraggingDocId(null);
+    setDraggingFolderPath(null);
+
+    if (docId) {
+      triggerHaptic(15);
+      try {
+        const updatedDoc = await api.moveDocument(docId, targetFolder);
+        setDocs((prev) =>
+          prev.map((d) => (d.id === docId ? { ...d, folderPath: updatedDoc.folderPath } : d))
+        );
+      } catch {
+        // ignore
+      }
+    } else if (folderPath && folderPath !== targetFolder && !targetFolder.startsWith(`${folderPath}/`)) {
+      triggerHaptic(15);
+      try {
+        await api.moveFolder(folderPath, targetFolder);
+        loadWorkspaceData();
+      } catch {
+        // ignore
+      }
+    }
+  };
+
   const handleSelectTag = useCallback(async (tag: string) => {
     const cleanTag = tag.replace(/^#/, '').toLowerCase();
     setSelectedTag(cleanTag);
@@ -277,6 +355,21 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     }
   };
 
+  const handleWikiLinkClick = useCallback(
+    (pageTitle: string) => {
+      const clean = pageTitle.trim().toLowerCase();
+      const match = docs.find((d) => d.title.trim().toLowerCase() === clean);
+      if (match) {
+        setSelectedDocId(match.id);
+        setSubView('editor');
+        setMobileShowDetail(true);
+      } else {
+        handleCreateDocument('');
+      }
+    },
+    [docs, handleCreateDocument]
+  );
+
   const openDocShareModal = useCallback(async (doc: Document) => {
     setShareModalDoc(doc);
     setShareModalFolder(null);
@@ -311,7 +404,23 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     }
   }, []);
 
-  // All distinct folder paths
+  const handleToggleRollupTodo = async (doc: Document, blockId: string, currentChecked: boolean) => {
+    triggerHaptic(10);
+    const updatedBlocks = (doc.blocks || []).map((b) =>
+      b.id === blockId ? { ...b, checked: !currentChecked } : b
+    );
+    setDocs((prev) =>
+      prev.map((d) => (d.id === doc.id ? { ...d, blocks: updatedBlocks } : d))
+    );
+    try {
+      await api.patchDocumentBlocks(doc.id, {
+        upserted: [{ id: blockId, checked: !currentChecked, type: 'todo', content: '' }],
+      });
+    } catch {
+      loadWorkspaceData();
+    }
+  };
+
   const allFolderPaths = useMemo(() => {
     const set = new Set<string>(folders);
     for (const d of docs) {
@@ -323,7 +432,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return Array.from(set).sort();
   }, [docs, folders, sharedFolders]);
 
-  // Filtered documents for sidebar
   const filteredDocs = useMemo(() => {
     const q = searchQuery.trim().toLowerCase();
     if (!q) return docs;
@@ -345,22 +453,33 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     [filteredDocs]
   );
 
-  // All To-Do blocks across all documents
-  const allDocTodos = useMemo(() => {
-    const list: { doc: Document; blockId: string; content: string; checked: boolean }[] = [];
+  // Global To-Dos rollup grouped by folder
+  const rollupTodosByFolder = useMemo(() => {
+    const folderMap = new Map<string, { doc: Document; blockId: string; content: string; checked: boolean }[]>();
     for (const d of docs) {
+      const fName = d.folderPath || 'Hauptebene';
+      if (todoFolderDrilldown && fName !== todoFolderDrilldown) continue;
       for (const b of d.blocks || []) {
         if (b.type === 'todo' && b.content.trim() !== '') {
-          list.push({
-            doc: d,
-            blockId: b.id,
-            content: b.content,
-            checked: Boolean(b.checked),
-          });
+          const arr = folderMap.get(fName) || [];
+          arr.push({ doc: d, blockId: b.id, content: b.content, checked: Boolean(b.checked) });
+          folderMap.set(fName, arr);
         }
       }
     }
-    return list;
+    return folderMap;
+  }, [docs, todoFolderDrilldown]);
+
+  const totalOpenTodos = useMemo(() => {
+    let count = 0;
+    for (const d of docs) {
+      for (const b of d.blocks || []) {
+        if (b.type === 'todo' && !b.checked && b.content.trim() !== '') {
+          count++;
+        }
+      }
+    }
+    return count;
   }, [docs]);
 
   const selectedDocObj = useMemo(
@@ -395,24 +514,24 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   }, [activeDocShares, shareModalDoc, shareModalFolder]);
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] bg-slate-50 dark:bg-slate-950 rounded-2xl border border-slate-200/80 dark:border-slate-800/80 overflow-hidden shadow-sm">
+    <div className="flex h-[calc(100vh-4rem)] panel-surface rounded-card border border-border overflow-hidden shadow-panel">
       {/* LEFT MASTER SIDEBAR */}
       <aside
         className={`${
           mobileShowDetail ? 'hidden lg:flex' : 'flex'
-        } w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-slate-50/90 dark:bg-slate-900/60 border-r border-slate-200/80 dark:border-slate-800/80`}
+        } w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-panel border-r border-border`}
       >
         {/* Sidebar Header & Actions */}
-        <div className="p-3.5 border-b border-slate-200/70 dark:border-slate-800/80 space-y-2.5">
+        <div className="p-3 border-b border-border space-y-2">
           <div className="flex items-center justify-between">
-            <h2 className="text-sm font-bold text-slate-800 dark:text-slate-100 tracking-tight">
+            <h2 className="text-xs font-bold text-main uppercase tracking-wider">
               Notizen & Outliner
             </h2>
             <div className="flex items-center gap-1">
               <button
                 type="button"
                 onClick={() => setShowNewFolderModal(true)}
-                className="p-1.5 rounded-lg text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-slate-200/60 dark:hover:bg-slate-800 transition-colors"
+                className="btn-action p-1 text-muted hover:text-main"
                 title="Neuer Ordner"
               >
                 <FolderPlus className="w-4 h-4" />
@@ -420,7 +539,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <button
                 type="button"
                 onClick={() => handleCreateDocument('')}
-                className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold bg-indigo-600 hover:bg-indigo-500 text-white shadow-sm transition-colors"
+                className="btn-primary inline-flex items-center gap-1 px-2 py-1 text-xs font-semibold"
               >
                 <Plus className="w-3.5 h-3.5" />
                 <span>Notiz</span>
@@ -430,34 +549,34 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
           {/* Search Input */}
           <div className="relative">
-            <Search className="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
+            <Search className="w-3.5 h-3.5 text-faint absolute left-2.5 top-1/2 -translate-y-1/2" />
             <input
               type="text"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               placeholder="Notizen oder #Tags suchen…"
-              className="w-full pl-8 pr-7 py-1.5 rounded-xl text-xs bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
+              className="input-field w-full pl-8 pr-6 py-1 text-xs"
             />
             {searchQuery && (
               <button
                 type="button"
                 onClick={() => setSearchQuery('')}
-                className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-faint hover:text-main"
               >
                 <X className="w-3.5 h-3.5" />
               </button>
             )}
           </div>
 
-          {/* Sub-view Switcher: Notizen vs. Alle To-Dos */}
-          <div className="grid grid-cols-2 gap-1 p-0.5 rounded-xl bg-slate-200/70 dark:bg-slate-800/80 text-xs">
+          {/* Sub-view Switcher: Notizen vs. To-Dos */}
+          <div className="grid grid-cols-2 gap-1 p-0.5 rounded-btn bg-canvas border border-border text-xs">
             <button
               type="button"
               onClick={() => setSubView('editor')}
-              className={`py-1 rounded-lg font-medium transition-colors ${
+              className={`py-1 rounded-btn font-medium transition-colors ${
                 subView === 'editor'
-                  ? 'bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm'
-                  : 'text-slate-600 dark:text-slate-400'
+                  ? 'bg-panel-elevated text-main font-semibold shadow-sm'
+                  : 'text-muted hover:text-main'
               }`}
             >
               Dokumente ({docs.length})
@@ -468,67 +587,109 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 setSubView('todos');
                 setMobileShowDetail(true);
               }}
-              className={`py-1 rounded-lg font-medium transition-colors ${
+              className={`py-1 rounded-btn font-medium transition-colors ${
                 subView === 'todos'
-                  ? 'bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm'
-                  : 'text-slate-600 dark:text-slate-400'
+                  ? 'bg-panel-elevated text-main font-semibold shadow-sm'
+                  : 'text-muted hover:text-main'
               }`}
             >
-              To-Dos ({allDocTodos.filter((t) => !t.checked).length})
+              To-Dos ({totalOpenTodos})
             </button>
           </div>
         </div>
 
         {/* Scrollable Navigation Tree */}
-        <div className="flex-1 overflow-y-auto p-2.5 space-y-4">
+        <div className="flex-1 overflow-y-auto p-2 space-y-3">
+          {/* Drop target for moving docs to root */}
+          {draggingDocId && (
+            <div
+              onDragOver={(e) => {
+                e.preventDefault();
+                setDragOverFolder('__root__');
+              }}
+              onDragLeave={() => setDragOverFolder(null)}
+              onDrop={(e) => handleDropOnFolder('', e)}
+              className={`p-2 border-2 border-dashed rounded-btn text-center text-xs transition-colors ${
+                dragOverFolder === '__root__'
+                  ? 'border-accent bg-accent/20 text-main font-semibold'
+                  : 'border-border text-muted bg-canvas'
+              }`}
+            >
+              📁 In Hauptebene ablegen
+            </div>
+          )}
+
           {/* Pinned Notes */}
-          {pinnedDocs.length > 0 && (
+          {pinnedDocs.length > 0 && !searchQuery && (
             <div>
-              <div className="px-2 mb-1 flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider text-slate-400">
-                <Pin className="w-3 h-3 text-amber-500" />
+              <div className="px-2 mb-1 flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider text-faint">
+                <Pin className="w-3 h-3 text-status-warn" />
                 <span>Angeheftet</span>
               </div>
               <div className="space-y-0.5">
                 {pinnedDocs.map((d) => (
-                  <button
+                  <div
                     key={`pin-${d.id}`}
-                    type="button"
+                    draggable
+                    onDragStart={(e) => handleDocDragStart(e, d.id)}
                     onClick={() => {
                       setSelectedDocId(d.id);
                       setSubView('editor');
                       setMobileShowDetail(true);
                     }}
-                    className={`w-full flex items-center gap-2 px-2.5 py-1.5 rounded-xl text-left text-xs transition-colors ${
+                    className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer transition-colors ${
                       selectedDocId === d.id && subView === 'editor'
-                        ? 'bg-indigo-600 text-white font-semibold shadow-sm'
-                        : 'text-slate-700 dark:text-slate-300 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
+                        ? 'bg-accent text-on-accent font-semibold'
+                        : 'text-main hover:bg-panel-elevated'
                     }`}
                   >
                     <span>{d.icon || '📝'}</span>
                     <span className="truncate flex-1">{d.title || 'Unbenannte Notiz'}</span>
-                  </button>
+                  </div>
                 ))}
               </div>
             </div>
           )}
 
-          {/* Folders Tree */}
+          {/* Folders Tree with Drag & Drop */}
           {allFolderPaths.length > 0 && (
             <div>
-              <div className="px-2 mb-1 text-[10px] font-bold uppercase tracking-wider text-slate-400">
+              <div className="px-2 mb-1 text-[10px] font-bold uppercase tracking-wider text-faint">
                 Ordner
               </div>
-              <div className="space-y-1">
+              <div className="space-y-0.5">
                 {allFolderPaths.map((folderPath) => {
                   const isExpanded = Boolean(expandedFolders[folderPath]);
                   const folderDocs = filteredDocs.filter((d) => d.folderPath === folderPath);
                   const sharedFolderObj = sharedFolders.find(
                     (sf) => sf.mountPath === folderPath || sf.name === folderPath
                   );
+                  const isDragOver = dragOverFolder === folderPath;
 
                   return (
-                    <div key={folderPath} className="space-y-0.5">
-                      <div className="group flex items-center justify-between px-2 py-1 rounded-xl hover:bg-slate-200/60 dark:hover:bg-slate-800/60 text-xs text-slate-700 dark:text-slate-300">
+                    <div
+                      key={folderPath}
+                      onDragOver={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setDragOverFolder(folderPath);
+                      }}
+                      onDragLeave={(e) => {
+                        e.preventDefault();
+                        if (dragOverFolder === folderPath) setDragOverFolder(null);
+                      }}
+                      onDrop={(e) => handleDropOnFolder(folderPath, e)}
+                      className="space-y-0.5"
+                    >
+                      <div
+                        draggable
+                        onDragStart={(e) => handleFolderDragStart(e, folderPath)}
+                        className={`group flex items-center justify-between px-2 py-1 rounded-btn text-xs cursor-pointer transition-colors ${
+                          isDragOver
+                            ? 'bg-accent/20 border-l-2 border-accent text-main font-semibold'
+                            : 'hover:bg-panel-elevated text-muted'
+                        }`}
+                      >
                         <button
                           type="button"
                           onClick={() =>
@@ -537,23 +698,23 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                               [folderPath]: !prev[folderPath],
                             }))
                           }
-                          className="flex items-center gap-1.5 flex-1 min-w-0 text-left font-medium"
+                          className="flex items-center gap-1.5 flex-1 min-w-0 text-left"
                         >
                           {isExpanded ? (
-                            <ChevronDown className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                            <ChevronDown className="w-3.5 h-3.5 text-faint shrink-0" />
                           ) : (
-                            <ChevronRight className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                            <ChevronRight className="w-3.5 h-3.5 text-faint shrink-0" />
                           )}
                           {isExpanded ? (
-                            <FolderOpen className="w-3.5 h-3.5 text-indigo-500 shrink-0" />
+                            <FolderOpen className="w-3.5 h-3.5 text-accent shrink-0" />
                           ) : (
-                            <Folder className="w-3.5 h-3.5 text-indigo-500 shrink-0" />
+                            <Folder className="w-3.5 h-3.5 text-accent shrink-0" />
                           )}
                           <span className="truncate">{folderPath}</span>
                           {sharedFolderObj && (
-                            <Users className="w-3 h-3 text-emerald-500 shrink-0" />
+                            <Users className="w-3 h-3 text-status-ok shrink-0" />
                           )}
-                          <span className="text-[10px] text-slate-400 ml-auto pr-1">
+                          <span className="text-[10px] text-faint ml-auto pr-1">
                             {folderDocs.length}
                           </span>
                         </button>
@@ -562,7 +723,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                           <button
                             type="button"
                             onClick={() => handleCreateDocument(folderPath)}
-                            className="p-1 rounded hover:bg-slate-300/60 dark:hover:bg-slate-700 text-slate-500"
+                            className="p-1 rounded-btn hover:bg-canvas text-muted hover:text-main"
                             title="Notiz in diesem Ordner erstellen"
                           >
                             <Plus className="w-3 h-3" />
@@ -571,7 +732,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                             <button
                               type="button"
                               onClick={() => openFolderShareModal(sharedFolderObj)}
-                              className="p-1 rounded hover:bg-slate-300/60 dark:hover:bg-slate-700 text-indigo-500"
+                              className="p-1 rounded-btn hover:bg-canvas text-accent"
                               title="Ordner-Freigabe"
                             >
                               <Share2 className="w-3 h-3" />
@@ -580,7 +741,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                           <button
                             type="button"
                             onClick={() => handleDeleteFolder(folderPath)}
-                            className="p-1 rounded hover:bg-rose-100 dark:hover:bg-rose-950/50 text-slate-400 hover:text-rose-500"
+                            className="p-1 rounded-btn hover:bg-status-err/20 text-faint hover:text-status-err"
                             title="Ordner löschen"
                           >
                             <Trash2 className="w-3 h-3" />
@@ -589,32 +750,33 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                       </div>
 
                       {isExpanded && (
-                        <div className="pl-5 space-y-0.5">
+                        <div className="pl-4 space-y-0.5">
                           {folderDocs.length === 0 ? (
-                            <div className="px-2.5 py-1 text-[11px] text-slate-400 italic">
-                              Keine Notizen
+                            <div className="px-2 py-0.5 text-[10px] text-faint italic">
+                              Leer
                             </div>
                           ) : (
                             folderDocs.map((d) => (
-                              <button
+                              <div
                                 key={d.id}
-                                type="button"
+                                draggable
+                                onDragStart={(e) => handleDocDragStart(e, d.id)}
                                 onClick={() => {
                                   setSelectedDocId(d.id);
                                   setSubView('editor');
                                   setMobileShowDetail(true);
                                 }}
-                                className={`w-full flex items-center gap-2 px-2.5 py-1.5 rounded-xl text-left text-xs transition-colors ${
+                                className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer transition-colors ${
                                   selectedDocId === d.id && subView === 'editor'
-                                    ? 'bg-indigo-600 text-white font-semibold shadow-sm'
-                                    : 'text-slate-700 dark:text-slate-300 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
+                                    ? 'bg-accent text-on-accent font-semibold'
+                                    : 'text-main hover:bg-panel-elevated'
                                 }`}
                               >
                                 <span>{d.icon || '📝'}</span>
                                 <span className="truncate flex-1">
                                   {d.title || 'Unbenannte Notiz'}
                                 </span>
-                              </button>
+                              </div>
                             ))
                           )}
                         </div>
@@ -628,36 +790,37 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
           {/* Root Documents */}
           <div>
-            <div className="px-2 mb-1 text-[10px] font-bold uppercase tracking-wider text-slate-400">
-              Notizen
+            <div className="px-2 mb-1 text-[10px] font-bold uppercase tracking-wider text-faint">
+              Notizen (Hauptebene)
             </div>
             {rootDocs.length === 0 ? (
-              <div className="px-2.5 py-3 text-xs text-slate-400">
-                Noch keine Notizen auf der Hauptebene.
+              <div className="px-2 py-2 text-xs text-faint italic">
+                Keine Notizen auf der Hauptebene.
               </div>
             ) : (
               <div className="space-y-0.5">
                 {rootDocs.map((d) => (
-                  <button
+                  <div
                     key={d.id}
-                    type="button"
+                    draggable
+                    onDragStart={(e) => handleDocDragStart(e, d.id)}
                     onClick={() => {
                       setSelectedDocId(d.id);
                       setSubView('editor');
                       setMobileShowDetail(true);
                     }}
-                    className={`w-full flex items-center gap-2 px-2.5 py-1.5 rounded-xl text-left text-xs transition-colors ${
+                    className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer transition-colors ${
                       selectedDocId === d.id && subView === 'editor'
-                        ? 'bg-indigo-600 text-white font-semibold shadow-sm'
-                        : 'text-slate-700 dark:text-slate-300 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
+                        ? 'bg-accent text-on-accent font-semibold'
+                        : 'text-main hover:bg-panel-elevated'
                     }`}
                   >
                     <span>{d.icon || '📝'}</span>
                     <span className="truncate flex-1">{d.title || 'Unbenannte Notiz'}</span>
                     {d.sharedWith && d.sharedWith.length > 0 && (
-                      <Users className="w-3 h-3 opacity-70 shrink-0" />
+                      <Users className="w-3 h-3 text-status-ok shrink-0" />
                     )}
-                  </button>
+                  </div>
                 ))}
               </div>
             )}
@@ -666,8 +829,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           {/* Tags Explorer */}
           {tagsSummary.length > 0 && (
             <div>
-              <div className="px-2 mb-1.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">
-                Block-Tags (#)
+              <div className="px-2 mb-1 text-[10px] font-bold uppercase tracking-wider text-faint">
+                Hashtags (#)
               </div>
               <div className="flex flex-wrap gap-1 px-1">
                 {tagsSummary.map((t) => (
@@ -675,14 +838,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     key={t.tag}
                     type="button"
                     onClick={() => handleSelectTag(t.tag)}
-                    className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium transition-colors ${
+                    className={`inline-flex items-center gap-0.5 px-2 py-0.5 rounded-btn text-[10px] font-medium transition-colors ${
                       subView === 'tag_detail' && selectedTag === t.tag
-                        ? 'bg-indigo-600 text-white'
-                        : 'bg-slate-200/70 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-950/60'
+                        ? 'bg-accent text-on-accent'
+                        : 'bg-panel-elevated text-muted hover:text-accent'
                     }`}
                   >
                     <span>#{t.tag}</span>
-                    <span className="opacity-60 text-[10px]">{t.count}</span>
+                    <span className="opacity-60 font-mono text-[9px]">{t.count}</span>
                   </button>
                 ))}
               </div>
@@ -695,7 +858,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       <main
         className={`${
           mobileShowDetail ? 'flex' : 'hidden lg:flex'
-        } flex-1 flex-col min-w-0 h-full overflow-hidden`}
+        } flex-1 flex-col min-w-0 h-full overflow-hidden bg-canvas`}
       >
         {subView === 'editor' && selectedDocId ? (
           <DocumentEditor
@@ -707,30 +870,31 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             onDeleteDoc={handleDeleteDocument}
             onOpenShareModal={openDocShareModal}
             onSelectTag={handleSelectTag}
+            onWikiLinkClick={handleWikiLinkClick}
             onBackMobile={() => setMobileShowDetail(false)}
           />
         ) : subView === 'tag_detail' && selectedTag ? (
-          <div className="flex-1 overflow-y-auto p-6 sm:p-10 bg-white dark:bg-slate-900">
-            <div className="max-w-3xl mx-auto space-y-6">
-              <div className="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 pb-4">
+          <div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
+            <div className="max-w-3xl mx-auto space-y-4">
+              <div className="flex items-center justify-between border-b border-border pb-3">
                 <div className="flex items-center gap-2">
-                  <Hash className="w-6 h-6 text-indigo-500" />
-                  <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+                  <Hash className="w-5 h-5 text-accent" />
+                  <h1 className="text-xl font-bold text-main">
                     #{selectedTag}
                   </h1>
                 </div>
                 <button
                   type="button"
                   onClick={() => setSubView('editor')}
-                  className="px-3 py-1.5 rounded-xl text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300"
+                  className="btn-action px-3 py-1 text-xs text-main"
                 >
                   Zurück zum Editor
                 </button>
               </div>
 
               {/* Tag Context Note */}
-              <div className="space-y-2">
-                <label className="text-xs font-semibold uppercase tracking-wider text-slate-400">
+              <div className="space-y-1">
+                <label className="text-[10px] font-bold uppercase tracking-wider text-faint">
                   Tag-Notiz
                 </label>
                 <textarea
@@ -739,19 +903,19 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                   onChange={(e) => setTagNoteDraft(e.target.value)}
                   onBlur={handleSaveTagNote}
                   placeholder={`Notizen zu #${selectedTag}…`}
-                  className="w-full rounded-xl p-3 text-sm bg-slate-50 dark:bg-slate-800/60 border border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
+                  className="input-field w-full p-2.5 text-xs text-main"
                 />
               </div>
 
               {/* Matched Document Blocks */}
-              <div className="space-y-4">
-                <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400">
+              <div className="space-y-3">
+                <h3 className="text-[10px] font-bold uppercase tracking-wider text-faint">
                   Verknüpfte Outliner-Blöcke ({tagDetails?.totalMatches || 0})
                 </h3>
                 {tagDetails?.documents.map((docGroup) => (
                   <div
                     key={docGroup.docId}
-                    className="p-4 rounded-2xl border border-slate-200/80 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 space-y-2"
+                    className="p-3 rounded-card border border-border bg-panel space-y-1.5"
                   >
                     <button
                       type="button"
@@ -759,20 +923,17 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         setSelectedDocId(docGroup.docId);
                         setSubView('editor');
                       }}
-                      className="flex items-center gap-2 text-sm font-semibold text-indigo-600 dark:text-indigo-400 hover:underline"
+                      className="flex items-center gap-2 text-xs font-semibold text-accent hover:underline"
                     >
                       <span>{docGroup.icon || '📝'}</span>
                       <span>{docGroup.title}</span>
                     </button>
-                    <div className="space-y-1.5 pl-4 border-l-2 border-indigo-500/30">
+                    <div className="space-y-1 pl-3 border-l border-border">
                       {docGroup.matchedBlocks.map((mb) => (
-                        <div key={mb.rootBlock.id} className="text-xs text-slate-700 dark:text-slate-300">
+                        <div key={mb.rootBlock.id} className="text-xs text-main">
                           <div>• {mb.rootBlock.content}</div>
                           {mb.children.map((ch) => (
-                            <div
-                              key={ch.id}
-                              className="pl-4 text-slate-500 dark:text-slate-400 mt-0.5"
-                            >
+                            <div key={ch.id} className="pl-3 text-muted text-[11px]">
                               ◦ {ch.content}
                             </div>
                           ))}
@@ -785,82 +946,168 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             </div>
           </div>
         ) : subView === 'todos' ? (
-          <div className="flex-1 overflow-y-auto p-6 sm:p-10 bg-white dark:bg-slate-900">
+          <div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
             <div className="max-w-3xl mx-auto space-y-4">
-              <div className="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 pb-4">
-                <h2 className="text-xl font-bold text-slate-900 dark:text-white">
-                  Alle Notiz-Aufgaben ({allDocTodos.length})
-                </h2>
+              <div className="flex items-center justify-between border-b border-border pb-3">
+                <div>
+                  <h2 className="text-lg font-bold text-main">
+                    Globaler To-Do Rollup ({totalOpenTodos} offen)
+                  </h2>
+                  <p className="text-xs text-muted">
+                    Alle Aufgaben aus deinen Notizen im gesamten Workspace
+                  </p>
+                </div>
                 <button
                   type="button"
                   onClick={() => setSubView('editor')}
-                  className="px-3 py-1.5 rounded-xl text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300"
+                  className="btn-action px-3 py-1 text-xs text-main"
                 >
                   Zum Editor
                 </button>
               </div>
 
-              {allDocTodos.length === 0 ? (
-                <p className="text-sm text-slate-400 py-8 text-center">
-                  Keine To-Do-Blöcke in deinen Notizen vorhanden. Tippe <code>[] </code> am
-                  Zeilenanfang einer Notiz, um eine Checkbox zu erstellen.
-                </p>
+              {/* Folder Drilldown Tag */}
+              {todoFolderDrilldown && (
+                <div className="flex items-center justify-between p-2 rounded-btn bg-accent/10 border border-accent text-xs">
+                  <span>
+                    Gefiltert nach Ordner: <strong>{todoFolderDrilldown}</strong>
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => setTodoFolderDrilldown(null)}
+                    className="text-accent hover:underline font-semibold"
+                  >
+                    Filter aufheben
+                  </button>
+                </div>
+              )}
+
+              {/* Grouped Folders & To-Dos */}
+              {rollupTodosByFolder.size === 0 ? (
+                <div className="p-8 text-center text-muted text-xs space-y-1">
+                  <Sparkles className="w-6 h-6 text-accent mx-auto mb-1" />
+                  <p className="font-semibold text-main">Keine To-Dos in Notizen gefunden!</p>
+                  <p className="text-faint">
+                    Tippe in einem beliebigen Dokument <code>/todo</code> oder <code>[] </code> ein.
+                  </p>
+                </div>
               ) : (
-                <div className="space-y-2">
-                  {allDocTodos.map((item) => (
-                    <div
-                      key={`${item.doc.id}-${item.blockId}`}
-                      className="flex items-center justify-between gap-3 p-3 rounded-xl border border-slate-200/70 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/40"
-                    >
-                      <div className="flex items-center gap-2.5 min-w-0">
-                        {item.checked ? (
-                          <CheckSquare className="w-4 h-4 text-emerald-500 shrink-0" />
-                        ) : (
-                          <Square className="w-4 h-4 text-slate-400 shrink-0" />
-                        )}
-                        <span
-                          className={`text-sm truncate ${
-                            item.checked
-                              ? 'line-through text-slate-400'
-                              : 'text-slate-800 dark:text-slate-200'
-                          }`}
-                        >
-                          {item.content}
-                        </span>
-                      </div>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setSelectedDocId(item.doc.id);
-                          setSubView('editor');
-                        }}
-                        className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline shrink-0"
+                <div className="space-y-3">
+                  {Array.from(rollupTodosByFolder.entries()).map(([folderName, items]) => {
+                    const isCollapsed = collapsedTodoFolders.has(folderName);
+                    const openCount = items.filter((i) => !i.checked).length;
+
+                    return (
+                      <div
+                        key={folderName}
+                        className="border border-border rounded-card bg-panel overflow-hidden"
                       >
-                        {item.doc.icon || '📝'} {item.doc.title}
-                      </button>
-                    </div>
-                  ))}
+                        {/* Folder Header */}
+                        <div className="p-2 bg-panel-elevated border-b border-border flex items-center justify-between">
+                          <div
+                            onClick={() => {
+                              setCollapsedTodoFolders((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(folderName)) next.delete(folderName);
+                                else next.add(folderName);
+                                return next;
+                              });
+                            }}
+                            className="flex items-center gap-2 cursor-pointer select-none"
+                          >
+                            {isCollapsed ? (
+                              <ChevronRight className="w-3.5 h-3.5 text-faint" />
+                            ) : (
+                              <ChevronDown className="w-3.5 h-3.5 text-accent" />
+                            )}
+                            <Folder className="w-3.5 h-3.5 text-accent" />
+                            <span className="font-bold text-xs text-main">{folderName}</span>
+                            <span className="badge-neutral text-[10px] font-mono">
+                              {openCount} offen
+                            </span>
+                          </div>
+
+                          <button
+                            type="button"
+                            onClick={() => setTodoFolderDrilldown(folderName)}
+                            className="text-[10px] text-muted hover:text-main px-1.5 py-0.5 rounded-btn hover:bg-canvas"
+                            title="Diesen Ordner isolieren"
+                          >
+                            Nur diesen Ordner
+                          </button>
+                        </div>
+
+                        {/* Folder Tasks */}
+                        {!isCollapsed && (
+                          <div className="p-2 space-y-1">
+                            {items.map((item) => (
+                              <div
+                                key={`${item.doc.id}-${item.blockId}`}
+                                className="flex items-center justify-between gap-2 p-1.5 rounded-btn hover:bg-canvas text-xs"
+                              >
+                                <div className="flex items-center gap-2 min-w-0">
+                                  <button
+                                    type="button"
+                                    onClick={() =>
+                                      handleToggleRollupTodo(item.doc, item.blockId, item.checked)
+                                    }
+                                    className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center transition-colors border ${
+                                      item.checked
+                                        ? 'bg-status-ok border-status-ok text-on-accent'
+                                        : 'border-strong hover:border-accent text-transparent'
+                                    }`}
+                                  >
+                                    <Check className="w-2.5 h-2.5 stroke-[3]" />
+                                  </button>
+                                  <span
+                                    className={`truncate ${
+                                      item.checked
+                                        ? 'line-through text-faint'
+                                        : 'text-main font-medium'
+                                    }`}
+                                  >
+                                    {item.content}
+                                  </span>
+                                </div>
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    setSelectedDocId(item.doc.id);
+                                    setSubView('editor');
+                                  }}
+                                  className="text-[11px] text-accent hover:underline flex items-center gap-1 shrink-0"
+                                >
+                                  <span>{item.doc.icon || '📝'}</span>
+                                  <span className="truncate max-w-[120px]">{item.doc.title}</span>
+                                  <ExternalLink className="w-2.5 h-2.5 opacity-60" />
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
                 </div>
               )}
             </div>
           </div>
         ) : (
-          <div className="flex-1 flex flex-col items-center justify-center p-12 text-center bg-white dark:bg-slate-900">
-            <FileText className="w-12 h-12 text-slate-300 dark:text-slate-700 mb-3" />
-            <h3 className="text-base font-semibold text-slate-700 dark:text-slate-300 mb-1">
+          <div className="flex-1 flex flex-col items-center justify-center p-12 text-center bg-canvas">
+            <FileText className="w-10 h-10 text-faint mb-2" />
+            <h3 className="text-sm font-semibold text-main mb-1">
               Keine Notiz ausgewählt
             </h3>
-            <p className="text-xs text-slate-400 max-w-sm mb-4">
-              Wähle links in der Seitenleiste eine bestehende Notiz aus oder lege ein neues
-              Outliner-Dokument an.
+            <p className="text-xs text-muted max-w-sm mb-3">
+              Wähle links in der Seitenleiste eine bestehende Notiz aus oder erstelle eine neue.
             </p>
             <button
               type="button"
               onClick={() => handleCreateDocument('')}
-              className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-semibold bg-indigo-600 hover:bg-indigo-500 text-white shadow-sm"
+              className="btn-primary inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold"
             >
-              <Plus className="w-4 h-4" />
-              <span>Erste Notiz erstellen</span>
+              <Plus className="w-3.5 h-3.5" />
+              <span>Notiz erstellen</span>
             </button>
           </div>
         )}
@@ -868,26 +1115,26 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
       {/* New Folder Modal */}
       {showNewFolderModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/60 backdrop-blur-sm p-4">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-overlay backdrop-blur-sm p-4">
           <form
             onSubmit={handleCreateFolderSubmit}
-            className="w-full max-w-md bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl p-5 space-y-4"
+            className="w-full max-w-md panel-surface shadow-panel border border-border rounded-card p-4 space-y-3"
           >
             <div className="flex items-center justify-between">
-              <h3 className="text-base font-bold text-slate-900 dark:text-white">
+              <h3 className="text-sm font-bold text-main">
                 Neuen Ordner anlegen
               </h3>
               <button
                 type="button"
                 onClick={() => setShowNewFolderModal(false)}
-                className="p-1 rounded-lg text-slate-400 hover:text-slate-600"
+                className="p-1 rounded-btn text-faint hover:text-main"
               >
                 <X className="w-4 h-4" />
               </button>
             </div>
 
-            <div className="space-y-2">
-              <label className="text-xs font-medium text-slate-600 dark:text-slate-400">
+            <div className="space-y-1">
+              <label className="text-[11px] font-medium text-muted">
                 Ordnerpfad (z.B. <code>Projekte/2026</code>)
               </label>
               <input
@@ -896,31 +1143,31 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 value={newFolderName}
                 onChange={(e) => setNewFolderName(e.target.value)}
                 placeholder="Projekte"
-                className="w-full px-3 py-2 rounded-xl text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                className="input-field w-full px-2.5 py-1.5 text-xs"
               />
             </div>
 
-            <label className="flex items-center gap-2 text-xs text-slate-600 dark:text-slate-300 cursor-pointer">
+            <label className="flex items-center gap-2 text-xs text-muted cursor-pointer">
               <input
                 type="checkbox"
                 checked={newFolderIsShared}
                 onChange={(e) => setNewFolderIsShared(e.target.checked)}
-                className="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
+                className="checkbox-square"
               />
               <span>Als geteilten Team-Ordner freigeben</span>
             </label>
 
-            <div className="flex justify-end gap-2 pt-2">
+            <div className="flex justify-end gap-2 pt-1">
               <button
                 type="button"
                 onClick={() => setShowNewFolderModal(false)}
-                className="px-3.5 py-1.5 rounded-xl text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300"
+                className="btn-action px-3 py-1 text-xs"
               >
                 Abbrechen
               </button>
               <button
                 type="submit"
-                className="px-4 py-1.5 rounded-xl text-xs font-semibold bg-indigo-600 hover:bg-indigo-500 text-white"
+                className="btn-primary px-3 py-1 text-xs font-semibold"
               >
                 Erstellen
               </button>
@@ -929,7 +1176,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         </div>
       )}
 
-      {/* Unified Sharing Modal for Document or Shared Folder */}
+      {/* Unified Sharing Modal */}
       {(shareModalDoc || shareModalFolder) && (
         <UnifiedShareModal
           isOpen={true}
@@ -941,7 +1188,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           resourceIcon={shareModalDoc ? shareModalDoc.icon : '📁'}
           isOwner={
             shareModalDoc
-              ? shareModalDoc.isOwner !== false
+              ? (shareModalDoc.isOwner || shareModalDoc.permission === 'owner')
               : Boolean(shareModalFolder?.isOwner)
           }
           currentUserId={currentUser?.id}
diff --git a/internal/api/server.go b/internal/api/server.go
index 071f26c..e5e0f57 100644
--- a/internal/api/server.go
+++ b/internal/api/server.go
@@ -836,7 +836,6 @@ func (s *Server) handleCreateDocument(w http.ResponseWriter, r *http.Request) {
 		writeError(w, http.StatusBadRequest, err.Error())
 		return
 	}
-	s.wsHub.BroadcastDocEvent(doc.ID, "DOC_CREATED", doc)
 	s.broadcastDocToAuthorizedUsers(doc.ID, "DOC_CREATED")
 	writeJSON(w, http.StatusCreated, doc)
 }
@@ -890,7 +889,6 @@ func (s *Server) handleUpdateDocument(w http.ResponseWriter, r *http.Request) {
 		s.wsHub.SyncActiveDocRoom(docID, doc.Title, doc.Blocks)
 	}
 	if req.Title != nil || req.Icon != nil || req.FolderPath != nil || req.Blocks != nil || req.Tags != nil {
-		s.wsHub.BroadcastDocEvent(docID, "DOC_UPDATED", doc)
 		s.broadcastDocToAuthorizedUsers(docID, "DOC_UPDATED")
 	}
 	writeJSON(w, http.StatusOK, doc)
@@ -936,6 +934,8 @@ func (s *Server) handlePatchDocumentBlocks(w http.ResponseWriter, r *http.Reques
 func (s *Server) handleDeleteDocument(w http.ResponseWriter, r *http.Request) {
 	userID := auth.GetUserID(r.Context())
 	docID := chi.URLParam(r, "id")
+	authorizedUsers, _ := s.store.GetAuthorizedDocUsers(docID)
+
 	if s.wsHub != nil {
 		s.wsHub.CloseDocRoom(docID)
 	}
@@ -943,7 +943,9 @@ func (s *Server) handleDeleteDocument(w http.ResponseWriter, r *http.Request) {
 		writeError(w, http.StatusInternalServerError, err.Error())
 		return
 	}
-	s.wsHub.BroadcastDocEvent(docID, "DOC_DELETED", map[string]string{"id": docID})
+	for _, uid := range authorizedUsers {
+		s.wsHub.BroadcastToUser(uid, "DOC_DELETED", map[string]string{"id": docID})
+	}
 	writeJSON(w, http.StatusOK, map[string]bool{"deleted": true})
 }
 
@@ -1355,16 +1357,19 @@ func (s *Server) handleDocWebSocket(w http.ResponseWriter, r *http.Request) {
 		userID = "anonymous"
 	}
 
+	canWrite := false
 	if userID != "anonymous" {
-		if _, err := s.store.GetDocumentByID(userID, docID); err != nil {
+		doc, err := s.store.GetDocumentByID(userID, docID)
+		if err != nil {
 			writeError(w, http.StatusForbidden, "Kein Zugriff auf dieses Dokument")
 			return
 		}
+		canWrite = doc.IsOwner || doc.Permission == "owner" || doc.Permission == "write"
 	}
 
 	clientID := r.URL.Query().Get("clientId")
 	room := s.wsHub.GetOrCreateDocRoom(docID)
-	room.ServeDocWS(w, r, userID, clientID)
+	room.ServeDocWS(w, r, userID, clientID, canWrite)
 }
 
 // --- REALTIME LISTS & SHARING ---
diff --git a/internal/ws/docroom.go b/internal/ws/docroom.go
index 807d778..cc06212 100644
--- a/internal/ws/docroom.go
+++ b/internal/ws/docroom.go
@@ -18,6 +18,7 @@ type DocWSClient struct {
 	conn     *websocket.Conn
 	userID   string
 	clientID string
+	canWrite bool
 	send     chan []byte
 }
 
@@ -433,7 +434,7 @@ func (r *DocRoom) Flush() {
 }
 
 // ServeDocWS handles WebSocket connections for GET /api/v1/ws/docs/{id}
-func (r *DocRoom) ServeDocWS(w http.ResponseWriter, req *http.Request, userID string, clientID string) {
+func (r *DocRoom) ServeDocWS(w http.ResponseWriter, req *http.Request, userID string, clientID string, canWrite bool) {
 	conn, err := upgrader.Upgrade(w, req, nil)
 	if err != nil {
 		log.Printf("[doc-ws] upgrade error for doc %s: %v", r.docID, err)
@@ -453,6 +454,7 @@ func (r *DocRoom) ServeDocWS(w http.ResponseWriter, req *http.Request, userID st
 		conn:     conn,
 		userID:   userID,
 		clientID: clientID,
+		canWrite: canWrite,
 		send:     make(chan []byte, 256),
 	}
 
@@ -509,6 +511,10 @@ func (c *DocWSClient) readPump() {
 
 		var evt DocSyncEvent
 		if err := json.Unmarshal(message, &evt); err == nil && evt.Type != "" {
+			if !c.canWrite {
+				// Read-only clients cannot mutate the document
+				continue
+			}
 			c.room.HandleEvent(evt, c)
 		}
 	}
diff --git a/internal/ws/hub.go b/internal/ws/hub.go
index 485b16c..aa5dd27 100644
--- a/internal/ws/hub.go
+++ b/internal/ws/hub.go
@@ -499,7 +499,9 @@ func (h *Hub) BroadcastTaskEvent(userID, event string, payload interface{}) {
 }
 
 func (h *Hub) BroadcastDocEvent(docID, event string, payload interface{}) {
-	h.BroadcastToAll(event, payload)
+	if docID != "" {
+		h.BroadcastRoom("doc:"+docID, event, payload, nil)
+	}
 }
 
 func (h *Hub) Broadcast(spaceID, listID, event string, payload interface{}) {
-- 
2.54.0


From 95977ba15aead4d7a181d8de823228731e196df1 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 21:57:19 +0100
Subject: [PATCH 06/33] feat(workspace): add real-time live cursor and presence
 tracking

- Support ephemeral cursor_moved and client_left events in docroom Hub
- Keep active in-memory cursor presence map per document room
- Synchronize current presence state to newly connected WebSocket clients
- Allow read-only viewers to share cursor positions without document mutation rights
- Throttle frontend cursor move emissions to 100ms with instant blur cleanup
- Render active collaborator presence avatar pills in document header
- Display user-colored block indicator and non-destructive caret overlay with name tag
---
 .../src/features/workspace/DocumentEditor.tsx |  54 ++++-
 .../src/features/workspace/OutlinerBlock.tsx  | 171 +++++++++++---
 .../src/features/workspace/OutlinerTree.tsx   |  19 ++
 .../src/features/workspace/WorkspaceView.tsx  |   1 +
 frontend/src/lib/useDocumentSync.ts           | 208 +++++++++++++++++-
 internal/ws/docroom.go                        | 173 ++++++++++++---
 internal/ws/docroom_test.go                   |  85 +++++++
 7 files changed, 643 insertions(+), 68 deletions(-)
 create mode 100644 internal/ws/docroom_test.go

diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
index f1f7d5e..cf67ee3 100644
--- a/frontend/src/features/workspace/DocumentEditor.tsx
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -12,13 +12,14 @@ import {
   Hash,
   Lock,
 } from 'lucide-react';
-import { Document, DocumentBlock } from '../../lib/types';
+import { Document, DocumentBlock, User } from '../../lib/types';
 import { api } from '../../lib/api';
-import { useDocumentSync, DocSyncEvent } from '../../lib/useDocumentSync';
+import { useDocumentSync, DocSyncEvent, RemoteCursor } from '../../lib/useDocumentSync';
 import { OutlinerTree } from './OutlinerTree';
 
 export interface DocumentEditorProps {
   docId: string;
+  currentUser?: User | null;
   initialDoc?: Document | null;
   availableFolders: string[];
   onDocMetadataChange: (updated: Document) => void;
@@ -56,6 +57,7 @@ function ensureNonEmptyBlocks(docId: string, blocks?: DocumentBlock[]): Document
 
 export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   docId,
+  currentUser,
   initialDoc,
   availableFolders,
   onDocMetadataChange,
@@ -210,12 +212,14 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
 
   const {
     status: syncStatus,
+    remoteCursors,
+    sendCursorMoved,
     sendBlockCreated,
     sendBlockUpdated,
     sendBlockDeleted,
     sendBlockMoved,
     sendTitleUpdated,
-  } = useDocumentSync(docId, handleRemoteEvent, canEdit);
+  } = useDocumentSync(docId, handleRemoteEvent, canEdit, currentUser);
 
   // Fetch isolated document state on mount
   useEffect(() => {
@@ -276,6 +280,20 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
     onDocMetadataChange(updatedDoc);
   }, [blocks, extractedTags, title]);
 
+  // Active remote users in this room (excluding self)
+  const activeUsers = useMemo(() => {
+    const list: RemoteCursor[] = [];
+    const seen = new Set<string>();
+    for (const c of Object.values(remoteCursors)) {
+      const key = c.userId || c.clientId;
+      if (!seen.has(key)) {
+        seen.add(key);
+        list.push(c);
+      }
+    }
+    return list;
+  }, [remoteCursors]);
+
   const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!canEdit) return;
     const nextTitle = e.target.value;
@@ -513,6 +531,34 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
 
         {/* Right Status & Action Buttons */}
         <div className="flex items-center gap-1">
+          {/* Active Presence Avatars */}
+          {activeUsers.length > 0 && (
+            <div className="flex items-center -space-x-1.5 mr-1" title="Aktive Bearbeiter im Dokument">
+              {activeUsers.map((u) => {
+                const initials = (u.userName || 'A')
+                  .split(' ')
+                  .map((n) => n[0])
+                  .slice(0, 2)
+                  .join('')
+                  .toUpperCase();
+                return (
+                  <div key={u.clientId} className="relative group/avatar cursor-default">
+                    <div
+                      className="w-5 h-5 rounded-btn flex items-center justify-center text-[9px] font-bold text-white shadow-sm ring-1 ring-panel"
+                      style={{ backgroundColor: u.userColor }}
+                    >
+                      {initials}
+                    </div>
+                    {/* Tooltip */}
+                    <div className="pointer-events-none absolute bottom-full mb-1 left-1/2 -translate-x-1/2 opacity-0 group-hover/avatar:opacity-100 transition-opacity whitespace-nowrap bg-panel-elevated text-main text-[10px] px-1.5 py-0.5 rounded-btn border border-border shadow-md z-30">
+                      {u.userName}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
           {/* Sync Status Badge */}
           <span
             className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-btn text-[10px] font-mono font-medium ${
@@ -654,6 +700,8 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
           docId={docId}
           blocks={blocks}
           canEdit={canEdit}
+          remoteCursors={remoteCursors}
+          sendCursorMoved={sendCursorMoved}
           onUpdateBlock={handleUpdateBlock}
           onCreateBlock={handleCreateBlock}
           onDeleteBlock={handleDeleteBlock}
diff --git a/frontend/src/features/workspace/OutlinerBlock.tsx b/frontend/src/features/workspace/OutlinerBlock.tsx
index c390540..2a696fa 100644
--- a/frontend/src/features/workspace/OutlinerBlock.tsx
+++ b/frontend/src/features/workspace/OutlinerBlock.tsx
@@ -17,6 +17,7 @@ import {
   ExternalLink,
 } from 'lucide-react';
 import { DocumentBlock, BlockType } from '../../lib/types';
+import { RemoteCursor } from '../../lib/useDocumentSync';
 
 export interface SlashCommand {
   type: BlockType;
@@ -43,6 +44,8 @@ export interface OutlinerBlockProps {
   hasChildren: boolean;
   isFocused: boolean;
   canEdit: boolean;
+  activeRemoteCursors?: RemoteCursor[];
+  sendCursorMoved?: (blockId: string | null, selectionStart?: number, selectionEnd?: number) => void;
   onFocusBlock: (blockId: string) => void;
   onUpdateBlock: (updated: DocumentBlock, immediate?: boolean) => void;
   onCreateBlockBelow: (afterBlockId: string, currentContent: string) => void;
@@ -64,6 +67,8 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   hasChildren,
   isFocused,
   canEdit,
+  activeRemoteCursors = [],
+  sendCursorMoved,
   onFocusBlock,
   onUpdateBlock,
   onCreateBlockBelow,
@@ -193,6 +198,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
     }
 
     setLocalContent(val);
+    sendCursorMoved?.(block.id, e.target.selectionStart, e.target.selectionEnd);
 
     if (debounceTimerRef.current !== null) {
       window.clearTimeout(debounceTimerRef.current);
@@ -215,6 +221,33 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
     }, 150);
   };
 
+  const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    onFocusBlock(block.id);
+    sendCursorMoved?.(block.id, e.target.selectionStart, e.target.selectionEnd);
+  };
+
+  const handleBlur = () => {
+    if (debounceTimerRef.current !== null) {
+      flushDebounce(localContent);
+    }
+    sendCursorMoved?.(null);
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLTextAreaElement>) => {
+    sendCursorMoved?.(block.id, e.currentTarget.selectionStart, e.currentTarget.selectionEnd);
+  };
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    sendCursorMoved?.(block.id, e.currentTarget.selectionStart, e.currentTarget.selectionEnd);
+  };
+
+  const handleSelect = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
+    const target = e.currentTarget;
+    sendCursorMoved?.(block.id, target.selectionStart, target.selectionEnd);
+  };
+
+  const primaryRemoteCursor = activeRemoteCursors.length > 0 ? activeRemoteCursors[0] : null;
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (!canEdit) return;
 
@@ -321,10 +354,30 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
           ? 'bg-panel-elevated'
           : 'hover:bg-panel'
       }`}
-      style={{ paddingLeft: `${level * 22 + 4}px` }}
+      style={{
+        paddingLeft: `${level * 22 + 4}px`,
+        ...(primaryRemoteCursor
+          ? { borderLeft: `2px solid ${primaryRemoteCursor.userColor}` }
+          : {}),
+      }}
       onDragOver={(e) => onDragOverBlock?.(e, index)}
       onDrop={() => onDropBlock?.(index)}
     >
+      {/* Remote Cursors Floating Name Badges on Block */}
+      {activeRemoteCursors.length > 0 && (
+        <div className="absolute -top-2.5 right-2 z-20 flex items-center gap-1 select-none pointer-events-none">
+          {activeRemoteCursors.map((c) => (
+            <span
+              key={c.clientId}
+              className="text-[9px] font-bold px-1.5 py-0.5 rounded-btn text-white shadow-sm flex items-center gap-0.5"
+              style={{ backgroundColor: c.userColor }}
+            >
+              {c.userName}
+            </span>
+          ))}
+        </div>
+      )}
+
       {/* Indentation Guide Line */}
       {level > 0 &&
         Array.from({ length: level }).map((_, lvlIdx) => (
@@ -436,8 +489,11 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
               rows={1}
               value={localContent}
               readOnly={!canEdit}
-              onFocus={() => onFocusBlock(block.id)}
-              onBlur={() => debounceTimerRef.current !== null && flushDebounce(localContent)}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onClick={handleClick}
+              onKeyUp={handleKeyUp}
+              onSelect={handleSelect}
               onChange={handleContentChange}
               onKeyDown={handleKeyDown}
               className="w-full resize-none font-mono text-xs bg-transparent text-status-ok border-0 focus:outline-none focus:ring-0 leading-relaxed"
@@ -453,43 +509,90 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
               rows={1}
               value={localContent}
               readOnly={!canEdit}
-              onFocus={() => onFocusBlock(block.id)}
-              onBlur={() => debounceTimerRef.current !== null && flushDebounce(localContent)}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onClick={handleClick}
+              onKeyUp={handleKeyUp}
+              onSelect={handleSelect}
               onChange={handleContentChange}
               onKeyDown={handleKeyDown}
               className="w-full resize-none bg-transparent text-sm text-main border-0 focus:outline-none focus:ring-0 leading-relaxed italic"
             />
           </div>
         ) : (
-          <textarea
-            ref={(el) => {
-              textareaRef.current = el;
-              registerTextareaRef(block.id, el);
-            }}
-            rows={1}
-            value={localContent}
-            readOnly={!canEdit}
-            onFocus={() => onFocusBlock(block.id)}
-            onBlur={() => debounceTimerRef.current !== null && flushDebounce(localContent)}
-            onChange={handleContentChange}
-            onKeyDown={handleKeyDown}
-            placeholder={
-              index === 0 && level === 0
-                ? 'Schreibe einen Punkt… (Enter = Neu, Tab = Einrücken, Shift+Tab = Ausrücken, / für Befehle)'
-                : ''
-            }
-            className={`w-full resize-none overflow-hidden bg-transparent border-0 focus:outline-none focus:ring-0 leading-relaxed whitespace-pre-wrap break-words ${
-              block.type === 'h1'
-                ? 'text-lg font-bold text-main tracking-tight'
-                : block.type === 'h2'
-                ? 'text-base font-semibold text-main'
-                : block.type === 'h3'
-                ? 'text-sm font-semibold text-main'
-                : block.type === 'todo' && block.checked
-                ? 'text-sm text-faint line-through'
-                : 'text-sm text-main'
-            }`}
-          />
+          <div className="relative w-full">
+            <textarea
+              ref={(el) => {
+                textareaRef.current = el;
+                registerTextareaRef(block.id, el);
+              }}
+              rows={1}
+              value={localContent}
+              readOnly={!canEdit}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onClick={handleClick}
+              onKeyUp={handleKeyUp}
+              onSelect={handleSelect}
+              onChange={handleContentChange}
+              onKeyDown={handleKeyDown}
+              placeholder={
+                index === 0 && level === 0
+                  ? 'Schreibe einen Punkt… (Enter = Neu, Tab = Einrücken, Shift+Tab = Ausrücken, / für Befehle)'
+                  : ''
+              }
+              className={`w-full resize-none overflow-hidden bg-transparent border-0 focus:outline-none focus:ring-0 leading-relaxed whitespace-pre-wrap break-words ${
+                block.type === 'h1'
+                  ? 'text-lg font-bold text-main tracking-tight'
+                  : block.type === 'h2'
+                  ? 'text-base font-semibold text-main'
+                  : block.type === 'h3'
+                  ? 'text-sm font-semibold text-main'
+                  : block.type === 'todo' && block.checked
+                  ? 'text-sm text-faint line-through'
+                  : 'text-sm text-main'
+              }`}
+            />
+
+            {/* Remote Caret & Floating Name Tag Overlay */}
+            {primaryRemoteCursor &&
+              primaryRemoteCursor.selectionStart !== undefined &&
+              primaryRemoteCursor.selectionStart !== null && (
+                <div
+                  aria-hidden="true"
+                  className={`pointer-events-none absolute inset-0 overflow-hidden leading-relaxed whitespace-pre-wrap break-words select-none z-10 ${
+                    block.type === 'h1'
+                      ? 'text-lg font-bold tracking-tight'
+                      : block.type === 'h2'
+                      ? 'text-base font-semibold'
+                      : block.type === 'h3'
+                      ? 'text-sm font-semibold'
+                      : block.type === 'todo' && block.checked
+                      ? 'text-sm text-faint line-through'
+                      : 'text-sm'
+                  }`}
+                >
+                  <span className="opacity-0">
+                    {localContent.slice(
+                      0,
+                      Math.min(primaryRemoteCursor.selectionStart, localContent.length)
+                    )}
+                  </span>
+                  <span className="relative inline-block align-baseline">
+                    <span
+                      className="inline-block w-[2px] h-[1.15em] -mb-0.5 animate-pulse"
+                      style={{ backgroundColor: primaryRemoteCursor.userColor }}
+                    />
+                    <span
+                      className="absolute -top-3.5 left-0 text-[8px] font-bold px-1 py-0 rounded-btn text-white whitespace-nowrap shadow-sm"
+                      style={{ backgroundColor: primaryRemoteCursor.userColor }}
+                    >
+                      {primaryRemoteCursor.userName}
+                    </span>
+                  </span>
+                </div>
+              )}
+          </div>
         )}
 
         {/* Rich Tokens Bar (Wiki-Links & #Tags) if present */}
diff --git a/frontend/src/features/workspace/OutlinerTree.tsx b/frontend/src/features/workspace/OutlinerTree.tsx
index 577160f..c402892 100644
--- a/frontend/src/features/workspace/OutlinerTree.tsx
+++ b/frontend/src/features/workspace/OutlinerTree.tsx
@@ -1,12 +1,15 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { Plus } from 'lucide-react';
 import { DocumentBlock } from '../../lib/types';
+import { RemoteCursor } from '../../lib/useDocumentSync';
 import { OutlinerBlock } from './OutlinerBlock';
 
 export interface OutlinerTreeProps {
   docId: string;
   blocks: DocumentBlock[];
   canEdit: boolean;
+  remoteCursors?: Record<string, RemoteCursor>;
+  sendCursorMoved?: (blockId: string | null, selectionStart?: number, selectionEnd?: number) => void;
   onUpdateBlock: (updated: DocumentBlock, immediate?: boolean) => void;
   onCreateBlock: (newBlock: DocumentBlock, afterBlockId?: string) => void;
   onDeleteBlock: (blockId: string) => void;
@@ -19,6 +22,8 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
   docId,
   blocks,
   canEdit,
+  remoteCursors,
+  sendCursorMoved,
   onUpdateBlock,
   onCreateBlock,
   onDeleteBlock,
@@ -255,6 +260,18 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
     return () => window.removeEventListener('dragend', clearDrag);
   }, []);
 
+  const cursorsByBlock = useMemo(() => {
+    const map: Record<string, RemoteCursor[]> = {};
+    if (!remoteCursors) return map;
+    for (const c of Object.values(remoteCursors)) {
+      if (c.blockId) {
+        if (!map[c.blockId]) map[c.blockId] = [];
+        map[c.blockId].push(c);
+      }
+    }
+    return map;
+  }, [remoteCursors]);
+
   return (
     <div className="space-y-0.5">
       {visibleEntries.map(({ block, index, hasChildren, maxAllowedLevel }) => (
@@ -266,6 +283,8 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
           hasChildren={hasChildren}
           isFocused={focusedBlockId === block.id}
           canEdit={canEdit}
+          activeRemoteCursors={cursorsByBlock[block.id] || []}
+          sendCursorMoved={sendCursorMoved}
           onFocusBlock={setFocusedBlockId}
           onUpdateBlock={onUpdateBlock}
           onCreateBlockBelow={handleCreateBlockBelow}
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index d7cc95a..14d8423 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -864,6 +864,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           <DocumentEditor
             key={selectedDocId}
             docId={selectedDocId}
+            currentUser={currentUser}
             initialDoc={selectedDocObj}
             availableFolders={allFolderPaths}
             onDocMetadataChange={handleDocMetadataChange}
diff --git a/frontend/src/lib/useDocumentSync.ts b/frontend/src/lib/useDocumentSync.ts
index c943734..79fc7ee 100644
--- a/frontend/src/lib/useDocumentSync.ts
+++ b/frontend/src/lib/useDocumentSync.ts
@@ -1,9 +1,42 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import { DocumentBlock } from './types';
 import { getToken, api } from './api';
 
 export type DocSyncStatus = 'connecting' | 'connected' | 'reconnecting' | 'offline';
 
+export interface RemoteCursor {
+  clientId: string;
+  userId: string;
+  userName: string;
+  userColor: string;
+  blockId: string | null;
+  selectionStart?: number;
+  selectionEnd?: number;
+  updatedAt: number;
+}
+
+export const CURSOR_COLORS = [
+  '#3b82f6', // blue
+  '#10b981', // emerald
+  '#f59e0b', // amber
+  '#ec4899', // pink
+  '#8b5cf6', // purple
+  '#06b6d4', // cyan
+  '#f97316', // orange
+  '#14b8a6', // teal
+  '#6366f1', // indigo
+];
+
+export function getUserColor(idOrName: string): string {
+  if (!idOrName) return CURSOR_COLORS[0];
+  let hash = 0;
+  for (let i = 0; i < idOrName.length; i++) {
+    hash = (hash << 5) - hash + idOrName.charCodeAt(i);
+    hash |= 0;
+  }
+  return CURSOR_COLORS[Math.abs(hash) % CURSOR_COLORS.length];
+}
+
 export interface DocSyncEvent {
   type:
     | 'doc_state'
@@ -12,10 +45,17 @@ export interface DocSyncEvent {
     | 'block_deleted'
     | 'block_moved'
     | 'title_updated'
-    | 'blocks_replaced';
+    | 'blocks_replaced'
+    | 'cursor_moved'
+    | 'client_left';
   docId?: string;
   clientId?: string;
   userId?: string;
+  userName?: string;
+  userColor?: string;
+  selectionStart?: number;
+  selectionEnd?: number;
+  activeCursors?: RemoteCursor[];
   title?: string;
   block?: DocumentBlock;
   blockId?: string;
@@ -32,9 +72,11 @@ export interface DocSyncEvent {
 export function useDocumentSync(
   docId: string | null,
   onRemoteEvent: (evt: DocSyncEvent) => void,
-  canEdit: boolean = true
+  canEdit: boolean = true,
+  currentUser?: { id: string; email?: string; displayName?: string } | null
 ) {
   const [status, setStatus] = useState<DocSyncStatus>('connecting');
+  const [remoteCursors, setRemoteCursors] = useState<Record<string, RemoteCursor>>({});
   const wsRef = useRef<WebSocket | null>(null);
   const clientIdRef = useRef<string>(
     `cli_${Math.random().toString(36).slice(2, 10)}_${Date.now().toString(36)}`
@@ -45,9 +87,45 @@ export function useDocumentSync(
   const reconnectTimerRef = useRef<number | null>(null);
   const fallbackTimerRef = useRef<number | null>(null);
 
+  const localUserName =
+    currentUser?.displayName || currentUser?.email?.split('@')[0] || 'Anonym';
+  const localUserColor = useMemo(
+    () => getUserColor(currentUser?.id || clientIdRef.current),
+    [currentUser?.id]
+  );
+
+  const lastCursorSendRef = useRef<number>(0);
+  const pendingCursorTimerRef = useRef<number | null>(null);
+  const pendingCursorPayloadRef = useRef<{
+    blockId: string | null;
+    selectionStart?: number;
+    selectionEnd?: number;
+  } | null>(null);
+
+  // Clean up stale remote cursors (> 30s)
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const now = Date.now();
+      setRemoteCursors((prev) => {
+        let hasStale = false;
+        const next: Record<string, RemoteCursor> = {};
+        for (const [key, cursor] of Object.entries(prev)) {
+          if (now - cursor.updatedAt < 30000) {
+            next[key] = cursor;
+          } else {
+            hasStale = true;
+          }
+        }
+        return hasStale ? next : prev;
+      });
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
   useEffect(() => {
     if (!docId) {
       setStatus('offline');
+      setRemoteCursors({});
       return;
     }
 
@@ -68,7 +146,11 @@ export function useDocumentSync(
       const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
       const wsUrl = `${protocol}//${window.location.host}/api/v1/ws/docs/${encodeURIComponent(
         docId
-      )}?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(currentClientId)}`;
+      )}?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(
+        currentClientId
+      )}&userName=${encodeURIComponent(localUserName)}&userColor=${encodeURIComponent(
+        localUserColor
+      )}`;
 
       setStatus(retryCount === 0 ? 'connecting' : 'reconnecting');
 
@@ -96,10 +178,55 @@ export function useDocumentSync(
         try {
           const parsed: DocSyncEvent = JSON.parse(event.data);
           if (!parsed || !parsed.type) return;
+
           // Echo protection: ignore events originating from our own clientId (except initial doc_state)
           if (parsed.type !== 'doc_state' && parsed.clientId && parsed.clientId === currentClientId) {
             return;
           }
+
+          if (parsed.type === 'doc_state') {
+            if (Array.isArray(parsed.activeCursors)) {
+              const initialCursors: Record<string, RemoteCursor> = {};
+              for (const c of parsed.activeCursors) {
+                if (c.clientId && c.clientId !== currentClientId) {
+                  initialCursors[c.clientId] = {
+                    ...c,
+                    updatedAt: c.updatedAt || Date.now(),
+                  };
+                }
+              }
+              setRemoteCursors(initialCursors);
+            }
+          } else if (parsed.type === 'cursor_moved') {
+            if (parsed.clientId && parsed.clientId !== currentClientId) {
+              setRemoteCursors((prev) => ({
+                ...prev,
+                [parsed.clientId!]: {
+                  clientId: parsed.clientId!,
+                  userId: parsed.userId || '',
+                  userName: parsed.userName || 'Anonym',
+                  userColor: parsed.userColor || '#3b82f6',
+                  blockId:
+                    parsed.blockId !== undefined
+                      ? parsed.blockId
+                      : prev[parsed.clientId!]?.blockId ?? null,
+                  selectionStart: parsed.selectionStart,
+                  selectionEnd: parsed.selectionEnd,
+                  updatedAt: Date.now(),
+                },
+              }));
+            }
+          } else if (parsed.type === 'client_left') {
+            if (parsed.clientId) {
+              setRemoteCursors((prev) => {
+                if (!prev[parsed.clientId!]) return prev;
+                const next = { ...prev };
+                delete next[parsed.clientId!];
+                return next;
+              });
+            }
+          }
+
           onRemoteEventRef.current(parsed);
         } catch {
           // Ignore malformed frames
@@ -132,6 +259,10 @@ export function useDocumentSync(
         window.clearTimeout(fallbackTimerRef.current);
         fallbackTimerRef.current = null;
       }
+      if (pendingCursorTimerRef.current !== null) {
+        window.clearTimeout(pendingCursorTimerRef.current);
+        pendingCursorTimerRef.current = null;
+      }
       if (wsRef.current) {
         try {
           wsRef.current.onopen = null;
@@ -145,7 +276,72 @@ export function useDocumentSync(
         wsRef.current = null;
       }
     };
-  }, [docId]);
+  }, [docId, localUserName, localUserColor]);
+
+  const executeSendCursor = useCallback(
+    (blockId: string | null, selectionStart?: number, selectionEnd?: number) => {
+      const ws = wsRef.current;
+      if (!docId || !ws || ws.readyState !== WebSocket.OPEN) return;
+      const payload: DocSyncEvent = {
+        type: 'cursor_moved',
+        docId,
+        clientId: clientIdRef.current,
+        userId: currentUser?.id,
+        userName: localUserName,
+        userColor: localUserColor,
+        blockId: blockId || undefined,
+        selectionStart,
+        selectionEnd,
+      };
+      ws.send(JSON.stringify(payload));
+      lastCursorSendRef.current = Date.now();
+    },
+    [docId, currentUser?.id, localUserName, localUserColor]
+  );
+
+  const sendCursorMoved = useCallback(
+    (blockId: string | null, selectionStart?: number, selectionEnd?: number) => {
+      if (!docId) return;
+      const now = Date.now();
+      const elapsed = now - lastCursorSendRef.current;
+
+      // When leaving focus / blur (blockId === null), send immediately
+      if (blockId === null) {
+        if (pendingCursorTimerRef.current !== null) {
+          window.clearTimeout(pendingCursorTimerRef.current);
+          pendingCursorTimerRef.current = null;
+        }
+        pendingCursorPayloadRef.current = null;
+        executeSendCursor(null);
+        return;
+      }
+
+      // Max once per 100ms
+      if (elapsed >= 100) {
+        if (pendingCursorTimerRef.current !== null) {
+          window.clearTimeout(pendingCursorTimerRef.current);
+          pendingCursorTimerRef.current = null;
+        }
+        executeSendCursor(blockId, selectionStart, selectionEnd);
+      } else {
+        pendingCursorPayloadRef.current = { blockId, selectionStart, selectionEnd };
+        if (pendingCursorTimerRef.current === null) {
+          pendingCursorTimerRef.current = window.setTimeout(() => {
+            pendingCursorTimerRef.current = null;
+            if (pendingCursorPayloadRef.current) {
+              executeSendCursor(
+                pendingCursorPayloadRef.current.blockId,
+                pendingCursorPayloadRef.current.selectionStart,
+                pendingCursorPayloadRef.current.selectionEnd
+              );
+              pendingCursorPayloadRef.current = null;
+            }
+          }, 100 - elapsed);
+        }
+      }
+    },
+    [docId, executeSendCursor]
+  );
 
   const sendRawEvent = useCallback(
     (evt: DocSyncEvent, fallbackFn?: () => void) => {
@@ -294,6 +490,8 @@ export function useDocumentSync(
   return {
     status,
     clientId: clientIdRef.current,
+    remoteCursors,
+    sendCursorMoved,
     sendBlockCreated,
     sendBlockUpdated,
     sendBlockDeleted,
diff --git a/internal/ws/docroom.go b/internal/ws/docroom.go
index cc06212..84c2540 100644
--- a/internal/ws/docroom.go
+++ b/internal/ws/docroom.go
@@ -11,6 +11,18 @@ import (
 	"github.com/sandrodach/mindsift/internal/domain"
 )
 
+// CursorPresence represents an active user's ephemeral cursor position in a document room.
+type CursorPresence struct {
+	ClientID       string `json:"clientId"`
+	UserID         string `json:"userId"`
+	UserName       string `json:"userName"`
+	UserColor      string `json:"userColor"`
+	BlockID        string `json:"blockId,omitempty"`
+	SelectionStart *int   `json:"selectionStart,omitempty"`
+	SelectionEnd   *int   `json:"selectionEnd,omitempty"`
+	UpdatedAt      int64  `json:"updatedAt"`
+}
+
 // DocWSClient represents an active WebSocket connection to a specific document room.
 type DocWSClient struct {
 	hub      *Hub
@@ -24,21 +36,26 @@ type DocWSClient struct {
 
 // DocSyncEvent is the lightweight JSON payload exchanged over /api/v1/ws/docs/{id}.
 type DocSyncEvent struct {
-	Type         string                 `json:"type"`
-	DocID        string                 `json:"docId,omitempty"`
-	ClientID     string                 `json:"clientId,omitempty"`
-	UserID       string                 `json:"userId,omitempty"`
-	Title        string                 `json:"title,omitempty"`
-	Block        *domain.DocumentBlock  `json:"block,omitempty"`
-	BlockID      string                 `json:"blockId,omitempty"`
-	AfterBlockID string                 `json:"afterBlockId,omitempty"`
-	NewIndex     *int                   `json:"newIndex,omitempty"`
-	Content      *string                `json:"content,omitempty"`
-	Level        *int                   `json:"level,omitempty"`
-	Checked      *bool                  `json:"checked,omitempty"`
-	Collapsed    *bool                  `json:"collapsed,omitempty"`
-	BlockType    *string                `json:"blockType,omitempty"`
-	Blocks       []domain.DocumentBlock `json:"blocks,omitempty"`
+	Type           string                 `json:"type"`
+	DocID          string                 `json:"docId,omitempty"`
+	ClientID       string                 `json:"clientId,omitempty"`
+	UserID         string                 `json:"userId,omitempty"`
+	UserName       string                 `json:"userName,omitempty"`
+	UserColor      string                 `json:"userColor,omitempty"`
+	SelectionStart *int                   `json:"selectionStart,omitempty"`
+	SelectionEnd   *int                   `json:"selectionEnd,omitempty"`
+	ActiveCursors  []CursorPresence       `json:"activeCursors,omitempty"`
+	Title          string                 `json:"title,omitempty"`
+	Block          *domain.DocumentBlock  `json:"block,omitempty"`
+	BlockID        string                 `json:"blockId,omitempty"`
+	AfterBlockID   string                 `json:"afterBlockId,omitempty"`
+	NewIndex       *int                   `json:"newIndex,omitempty"`
+	Content        *string                `json:"content,omitempty"`
+	Level          *int                   `json:"level,omitempty"`
+	Checked        *bool                  `json:"checked,omitempty"`
+	Collapsed      *bool                  `json:"collapsed,omitempty"`
+	BlockType      *string                `json:"blockType,omitempty"`
+	Blocks         []domain.DocumentBlock `json:"blocks,omitempty"`
 }
 
 // DocRoom coordinates in-memory real-time block state and 1.5s debounced SQLite persistence for one document.
@@ -50,6 +67,7 @@ type DocRoom struct {
 	blocks        []domain.DocumentBlock
 	loaded        bool
 	wsClients     map[*DocWSClient]bool
+	activeCursors map[string]*CursorPresence
 	debounceTimer *time.Timer
 	dirty         bool
 }
@@ -63,9 +81,10 @@ func (h *Hub) GetOrCreateDocRoom(docID string) *DocRoom {
 	room, exists := h.docRooms[docID]
 	if !exists {
 		room = &DocRoom{
-			docID:     docID,
-			hub:       h,
-			wsClients: make(map[*DocWSClient]bool),
+			docID:         docID,
+			hub:           h,
+			wsClients:     make(map[*DocWSClient]bool),
+			activeCursors: make(map[string]*CursorPresence),
 		}
 		h.docRooms[docID] = room
 	}
@@ -205,6 +224,42 @@ func (r *DocRoom) HandleEvent(evt DocSyncEvent, sender *DocWSClient) {
 	mutated := false
 
 	switch evt.Type {
+	case "cursor_moved":
+		if evt.ClientID != "" {
+			cp := &CursorPresence{
+				ClientID:       evt.ClientID,
+				UserID:         evt.UserID,
+				UserName:       evt.UserName,
+				UserColor:      evt.UserColor,
+				BlockID:        evt.BlockID,
+				SelectionStart: evt.SelectionStart,
+				SelectionEnd:   evt.SelectionEnd,
+				UpdatedAt:      time.Now().UnixMilli(),
+			}
+			if r.activeCursors == nil {
+				r.activeCursors = make(map[string]*CursorPresence)
+			}
+			r.activeCursors[evt.ClientID] = cp
+
+			msgBytes, err := json.Marshal(evt)
+			if err == nil {
+				for client := range r.wsClients {
+					if sender != nil && (client == sender || (sender.clientID != "" && client.clientID == sender.clientID)) {
+						continue
+					}
+					if evt.ClientID != "" && client.clientID == evt.ClientID {
+						continue
+					}
+					select {
+					case client.send <- msgBytes:
+					default:
+					}
+				}
+			}
+		}
+		r.mu.Unlock()
+		return
+
 	case "title_updated":
 		if evt.Title != "" || r.title != evt.Title {
 			r.title = evt.Title
@@ -448,6 +503,9 @@ func (r *DocRoom) ServeDocWS(w http.ResponseWriter, req *http.Request, userID st
 		clientID = domain.NewID("cli")
 	}
 
+	userName := req.URL.Query().Get("userName")
+	userColor := req.URL.Query().Get("userColor")
+
 	client := &DocWSClient{
 		hub:      r.hub,
 		room:     r,
@@ -460,23 +518,67 @@ func (r *DocRoom) ServeDocWS(w http.ResponseWriter, req *http.Request, userID st
 
 	r.mu.Lock()
 	r.wsClients[client] = true
+	if r.activeCursors == nil {
+		r.activeCursors = make(map[string]*CursorPresence)
+	}
+	if userName != "" {
+		r.activeCursors[clientID] = &CursorPresence{
+			ClientID:  clientID,
+			UserID:    userID,
+			UserName:  userName,
+			UserColor: userColor,
+			UpdatedAt: time.Now().UnixMilli(),
+		}
+	}
 	title := r.title
 	blocksCopy := make([]domain.DocumentBlock, len(r.blocks))
 	copy(blocksCopy, r.blocks)
+
+	activeList := make([]CursorPresence, 0, len(r.activeCursors))
+	for _, cp := range r.activeCursors {
+		if cp != nil {
+			activeList = append(activeList, *cp)
+		}
+	}
 	r.mu.Unlock()
 
-	// Immediately send live in-memory state to the newly connected client
+	// Immediately send live in-memory state and current cursors to the newly connected client
 	initEvt := DocSyncEvent{
-		Type:     "doc_state",
-		DocID:    r.docID,
-		ClientID: clientID,
-		Title:    title,
-		Blocks:   blocksCopy,
+		Type:          "doc_state",
+		DocID:         r.docID,
+		ClientID:      clientID,
+		Title:         title,
+		Blocks:        blocksCopy,
+		ActiveCursors: activeList,
 	}
 	if initBytes, err := json.Marshal(initEvt); err == nil {
 		client.send <- initBytes
 	}
 
+	// If userName was provided, broadcast initial presence to existing clients in room
+	if userName != "" {
+		joinEvt := DocSyncEvent{
+			Type:      "cursor_moved",
+			DocID:     r.docID,
+			ClientID:  clientID,
+			UserID:    userID,
+			UserName:  userName,
+			UserColor: userColor,
+		}
+		if joinBytes, err := json.Marshal(joinEvt); err == nil {
+			r.mu.Lock()
+			for c := range r.wsClients {
+				if c != client && c.clientID != clientID {
+					select {
+					case c.send <- joinBytes:
+					default:
+					}
+				}
+			}
+			r.mu.Unlock()
+		}
+	}
+
 	go client.writePump()
 	go client.readPump()
 }
@@ -485,7 +587,26 @@ func (c *DocWSClient) readPump() {
 	defer func() {
 		c.room.mu.Lock()
 		delete(c.room.wsClients, c)
+		delete(c.room.activeCursors, c.clientID)
 		remaining := len(c.room.wsClients)
+
+		// Broadcast client_left to all remaining clients in room
+		leftEvt := DocSyncEvent{
+			Type:     "client_left",
+			DocID:    c.room.docID,
+			ClientID: c.clientID,
+			UserID:   c.userID,
+		}
+		if leftBytes, err := json.Marshal(leftEvt); err == nil {
+			for client := range c.room.wsClients {
+				if client != c && client.clientID != c.clientID {
+					select {
+					case client.send <- leftBytes:
+					default:
+					}
+				}
+			}
+		}
 		c.room.mu.Unlock()
 
 		_ = c.conn.Close()
@@ -511,8 +632,8 @@ func (c *DocWSClient) readPump() {
 
 		var evt DocSyncEvent
 		if err := json.Unmarshal(message, &evt); err == nil && evt.Type != "" {
-			if !c.canWrite {
-				// Read-only clients cannot mutate the document
+			// Read-only clients can still move their cursor and send presence updates
+			if !c.canWrite && evt.Type != "cursor_moved" {
 				continue
 			}
 			c.room.HandleEvent(evt, c)
diff --git a/internal/ws/docroom_test.go b/internal/ws/docroom_test.go
new file mode 100644
index 0000000..7cde8df
--- /dev/null
+++ b/internal/ws/docroom_test.go
@@ -0,0 +1,85 @@
+package ws
+
+import (
+	"testing"
+	"time"
+)
+
+func TestDocRoomCursorPresenceAndEchoProtection(t *testing.T) {
+	hub := NewHub()
+	room := hub.GetOrCreateDocRoom("doc_test_presence")
+
+	c1 := &DocWSClient{
+		hub:      hub,
+		room:     room,
+		userID:   "user_1",
+		clientID: "cli_1",
+		canWrite: true,
+		send:     make(chan []byte, 10),
+	}
+	c2 := &DocWSClient{
+		hub:      hub,
+		room:     room,
+		userID:   "user_2",
+		clientID: "cli_2",
+		canWrite: false, // read-only viewer
+		send:     make(chan []byte, 10),
+	}
+
+	room.mu.Lock()
+	room.wsClients[c1] = true
+	room.wsClients[c2] = true
+	room.mu.Unlock()
+
+	// 1. Send cursor_moved from c1
+	selStart := 5
+	selEnd := 5
+	room.HandleEvent(DocSyncEvent{
+		Type:           "cursor_moved",
+		DocID:          "doc_test_presence",
+		ClientID:       "cli_1",
+		UserID:         "user_1",
+		UserName:       "Alice",
+		UserColor:      "#3b82f6",
+		BlockID:        "blk_123",
+		SelectionStart: &selStart,
+		SelectionEnd:   &selEnd,
+	}, c1)
+
+	// c1 should NOT have received its own echo
+	select {
+	case <-c1.send:
+		t.Fatal("c1 received echo of its own cursor_moved event!")
+	default:
+	}
+
+	// c2 SHOULD receive the event
+	select {
+	case msg := <-c2.send:
+		if len(msg) == 0 {
+			t.Fatal("empty message received by c2")
+		}
+	case <-time.After(500 * time.Millisecond):
+		t.Fatal("timed out waiting for cursor_moved event on c2")
+	}
+
+	// Room should have registered c1's presence
+	room.mu.Lock()
+	cp, exists := room.activeCursors["cli_1"]
+	room.mu.Unlock()
+
+	if !exists || cp == nil {
+		t.Fatal("expected active cursor for cli_1 in room")
+	}
+	if cp.UserName != "Alice" || cp.BlockID != "blk_123" {
+		t.Fatalf("unexpected cursor data: %+v", cp)
+	}
+
+	// Ephemeral cursor events must NOT mark the room dirty for disk flush
+	room.mu.Lock()
+	dirty := room.dirty
+	room.mu.Unlock()
+	if dirty {
+		t.Fatal("cursor_moved should not mark room dirty")
+	}
+}
-- 
2.54.0


From 177e24fdc848b594a3806a707e8558337b8ad1b8 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 22:04:53 +0100
Subject: [PATCH 07/33] feat(workspace): add focus mode and hoisting zoom-in
 for outliner blocks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Click bullet point (•) or hover zoom icon to zoom into any block branch
- Render hoisted block as prominent heading in focus mode with direct editing
- Display clickable breadcrumb path leading back to ancestors or root document
- Render isolated subtree with visual level offset and bound indentation
---
 .../src/features/workspace/DocumentEditor.tsx | 371 +++++++++++++++---
 .../src/features/workspace/OutlinerBlock.tsx  |  36 +-
 .../src/features/workspace/OutlinerTree.tsx   |  17 +-
 3 files changed, 346 insertions(+), 78 deletions(-)

diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
index cf67ee3..66829de 100644
--- a/frontend/src/features/workspace/DocumentEditor.tsx
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -11,6 +11,11 @@ import {
   ArrowLeft,
   Hash,
   Lock,
+  Home,
+  ChevronRight,
+  Minimize2,
+  Sparkles,
+  Plus,
 } from 'lucide-react';
 import { Document, DocumentBlock, User } from '../../lib/types';
 import { api } from '../../lib/api';
@@ -55,6 +60,85 @@ function ensureNonEmptyBlocks(docId: string, blocks?: DocumentBlock[]): Document
   }));
 }
 
+export interface BreadcrumbNode {
+  id: string | null;
+  title: string;
+}
+
+export function computeBreadcrumbs(
+  docTitle: string,
+  blocks: DocumentBlock[],
+  zoomedBlockId: string | null
+): BreadcrumbNode[] {
+  if (!zoomedBlockId) return [];
+
+  const zoomedIdx = blocks.findIndex((b) => b.id === zoomedBlockId);
+  if (zoomedIdx === -1) return [];
+
+  const trail: BreadcrumbNode[] = [];
+  const zoomedBlock = blocks[zoomedIdx];
+
+  let currentLevel = zoomedBlock.level;
+  for (let i = zoomedIdx - 1; i >= 0; i--) {
+    if (blocks[i].level < currentLevel) {
+      trail.unshift({
+        id: blocks[i].id,
+        title: blocks[i].content?.trim() || 'Punkt',
+      });
+      currentLevel = blocks[i].level;
+      if (currentLevel === 0) break;
+    }
+  }
+
+  trail.unshift({
+    id: null,
+    title: docTitle || 'Dokument',
+  });
+
+  trail.push({
+    id: zoomedBlock.id,
+    title: zoomedBlock.content?.trim() || 'Punkt',
+  });
+
+  return trail;
+}
+
+export function getZoomedSubtree(
+  blocks: DocumentBlock[],
+  zoomedBlockId: string | null
+): {
+  zoomedBlock: DocumentBlock | null;
+  childBlocks: DocumentBlock[];
+  levelOffset: number;
+} {
+  if (!zoomedBlockId) {
+    return { zoomedBlock: null, childBlocks: blocks, levelOffset: 0 };
+  }
+
+  const idx = blocks.findIndex((b) => b.id === zoomedBlockId);
+  if (idx === -1) {
+    return { zoomedBlock: null, childBlocks: blocks, levelOffset: 0 };
+  }
+
+  const zoomedBlock = blocks[idx];
+  const zLevel = zoomedBlock.level;
+  const childBlocks: DocumentBlock[] = [];
+
+  for (let i = idx + 1; i < blocks.length; i++) {
+    if (blocks[i].level > zLevel) {
+      childBlocks.push(blocks[i]);
+    } else {
+      break;
+    }
+  }
+
+  return {
+    zoomedBlock,
+    childBlocks,
+    levelOffset: zLevel + 1,
+  };
+}
+
 export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   docId,
   currentUser,
@@ -76,6 +160,21 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
   const [showFolderMenu, setShowFolderMenu] = useState<boolean>(false);
+  const [zoomedBlockId, setZoomedBlockId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (zoomedBlockId && !blocks.some((b) => b.id === zoomedBlockId)) {
+      setZoomedBlockId(null);
+    }
+  }, [blocks, zoomedBlockId]);
+
+  const { zoomedBlock, childBlocks, levelOffset } = useMemo(() => {
+    return getZoomedSubtree(blocks, zoomedBlockId);
+  }, [blocks, zoomedBlockId]);
+
+  const breadcrumbs = useMemo(() => {
+    return computeBreadcrumbs(title || doc?.title || 'Dokument', blocks, zoomedBlockId);
+  }, [title, doc?.title, blocks, zoomedBlockId]);
 
   const titleInputRef = useRef<HTMLInputElement | null>(null);
   const titleDebounceRef = useRef<number | null>(null);
@@ -640,75 +739,227 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
 
       {/* Main Content Area */}
       <div className="max-w-4xl w-full mx-auto px-4 sm:px-8 py-5 flex-1">
-        {/* Document Icon + Title Header */}
-        <div className="flex items-center gap-3 mb-3 relative">
-          <div className="relative">
-            <button
-              type="button"
-              onClick={() => canEdit && setShowEmojiPicker((prev) => !prev)}
-              className="w-10 h-10 rounded-btn bg-panel-elevated border border-border hover:border-strong flex items-center justify-center text-xl transition-colors"
-              title="Icon ändern"
-            >
-              {doc?.icon || '📝'}
-            </button>
-            {showEmojiPicker && canEdit && (
-              <div className="absolute left-0 mt-1 p-2 panel-surface shadow-panel border border-border rounded-card grid grid-cols-6 gap-1 z-30 w-52">
-                {EMOJI_PALETTE.map((emoji) => (
+        {zoomedBlock ? (
+          /* =========================================================================
+             FOKUS-MODUS & ZOOM-IN (HOISTED SUBTREE VIEW)
+             ========================================================================= */
+          <div className="space-y-3">
+            {/* Clickable Breadcrumb Bar */}
+            {breadcrumbs.length > 0 && (
+              <nav
+                aria-label="Breadcrumb Navigation"
+                className="flex items-center flex-wrap gap-1.5 py-1.5 px-3 bg-panel-elevated/70 border border-border rounded-card text-xs text-muted"
+              >
+                <button
+                  type="button"
+                  onClick={() => setZoomedBlockId(null)}
+                  className="hover:text-accent inline-flex items-center gap-1 font-medium transition-colors"
+                  title="Zurück zum Hauptdokument"
+                >
+                  <Home className="w-3.5 h-3.5 text-accent" />
+                  <span className="truncate max-w-[120px]">
+                    {title || doc?.title || 'Dokument'}
+                  </span>
+                </button>
+
+                {breadcrumbs.slice(1).map((crumb, idx) => {
+                  const isCurrent = idx === breadcrumbs.length - 2;
+                  return (
+                    <React.Fragment key={crumb.id || idx}>
+                      <ChevronRight className="w-3 h-3 text-faint shrink-0" />
+                      {isCurrent ? (
+                        <span
+                          className="font-bold text-accent truncate max-w-[200px]"
+                          title={crumb.title}
+                        >
+                          {crumb.title || 'Punkt'}
+                        </span>
+                      ) : (
+                        <button
+                          type="button"
+                          onClick={() => setZoomedBlockId(crumb.id)}
+                          className="hover:text-main truncate max-w-[140px] transition-colors"
+                          title={`Zoom zu "${crumb.title}"`}
+                        >
+                          {crumb.title || 'Punkt'}
+                        </button>
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </nav>
+            )}
+
+            {/* Prominent Zoomed Ast-Heading */}
+            <div className="flex items-start justify-between gap-3 pb-4 mb-2 border-b border-border">
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1.5">
+                  <span className="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider text-accent bg-accent-dim px-2 py-0.5 rounded-btn border border-accent/30">
+                    <Sparkles className="w-2.5 h-2.5 text-accent animate-pulse" />
+                    Fokus-Modus
+                  </span>
+                  <span className="text-[11px] text-faint hidden sm:inline">
+                    Isolierter Ast • Zoom aktiv
+                  </span>
+                </div>
+                <input
+                  type="text"
+                  value={zoomedBlock.content}
+                  onChange={(e) => {
+                    handleUpdateBlock({ ...zoomedBlock, content: e.target.value });
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      const firstChild: DocumentBlock = {
+                        id: `blk_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`,
+                        documentId: docId,
+                        type: 'text',
+                        content: '',
+                        level: levelOffset,
+                        position: (zoomedBlock.position || 1000) + 10,
+                      };
+                      handleCreateBlock(firstChild, zoomedBlock.id);
+                    }
+                  }}
+                  placeholder="Ast-Titel…"
+                  readOnly={!canEdit}
+                  className="w-full text-2xl sm:text-3xl font-extrabold text-main bg-transparent border-0 focus:outline-none focus:ring-0 tracking-tight leading-tight"
+                />
+              </div>
+
+              <button
+                type="button"
+                onClick={() => setZoomedBlockId(null)}
+                className="btn-action inline-flex items-center gap-1.5 px-2.5 py-1 text-xs text-muted hover:text-main shrink-0 mt-1"
+                title="Fokus-Modus beenden"
+              >
+                <Minimize2 className="w-3.5 h-3.5" />
+                <span className="hidden sm:inline">Fokus beenden</span>
+              </button>
+            </div>
+
+            {/* Subtree Children or Empty State */}
+            {childBlocks.length === 0 ? (
+              <div className="py-8 text-center text-xs text-faint border border-dashed border-border rounded-card my-2">
+                <p className="mb-2">Dieser Ast hat noch keine Unterpunkte.</p>
+                {canEdit && (
                   <button
-                    key={emoji}
                     type="button"
-                    onClick={() => handleSelectIcon(emoji)}
-                    className="p-1.5 rounded-btn hover:bg-panel-elevated text-base flex items-center justify-center"
+                    onClick={() => {
+                      const firstChild: DocumentBlock = {
+                        id: `blk_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`,
+                        documentId: docId,
+                        type: 'text',
+                        content: '',
+                        level: levelOffset,
+                        position: (zoomedBlock.position || 1000) + 10,
+                      };
+                      handleCreateBlock(firstChild, zoomedBlock.id);
+                    }}
+                    className="btn-action inline-flex items-center gap-1.5 px-3 py-1.5 text-xs text-accent font-medium hover:bg-accent/10"
                   >
-                    {emoji}
+                    <Plus className="w-3.5 h-3.5" />
+                    <span>Ersten Unterpunkt anlegen (oder Enter drücken)</span>
+                  </button>
+                )}
+              </div>
+            ) : (
+              <OutlinerTree
+                docId={docId}
+                blocks={childBlocks}
+                canEdit={canEdit}
+                levelOffset={levelOffset}
+                onZoomBlock={setZoomedBlockId}
+                remoteCursors={remoteCursors}
+                sendCursorMoved={sendCursorMoved}
+                onUpdateBlock={handleUpdateBlock}
+                onCreateBlock={handleCreateBlock}
+                onDeleteBlock={handleDeleteBlock}
+                onMoveBlock={handleMoveBlock}
+                onTagClick={onSelectTag}
+                onWikiLinkClick={onWikiLinkClick}
+              />
+            )}
+          </div>
+        ) : (
+          /* =========================================================================
+             STANDARD GESAMTDOKUMENT-ANSICHT
+             ========================================================================= */
+          <>
+            {/* Document Icon + Title Header */}
+            <div className="flex items-center gap-3 mb-3 relative">
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={() => canEdit && setShowEmojiPicker((prev) => !prev)}
+                  className="w-10 h-10 rounded-btn bg-panel-elevated border border-border hover:border-strong flex items-center justify-center text-xl transition-colors"
+                  title="Icon ändern"
+                >
+                  {doc?.icon || '📝'}
+                </button>
+                {showEmojiPicker && canEdit && (
+                  <div className="absolute left-0 mt-1 p-2 panel-surface shadow-panel border border-border rounded-card grid grid-cols-6 gap-1 z-30 w-52">
+                    {EMOJI_PALETTE.map((emoji) => (
+                      <button
+                        key={emoji}
+                        type="button"
+                        onClick={() => handleSelectIcon(emoji)}
+                        className="p-1.5 rounded-btn hover:bg-panel-elevated text-base flex items-center justify-center"
+                      >
+                        {emoji}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              <input
+                ref={titleInputRef}
+                type="text"
+                value={title}
+                readOnly={!canEdit}
+                onChange={handleTitleChange}
+                placeholder="Titel der Notiz…"
+                className="flex-1 min-w-0 text-xl sm:text-2xl font-bold text-main bg-transparent border-0 focus:outline-none focus:ring-0 tracking-tight"
+              />
+            </div>
+
+            {/* Extracted #Tags Summary Bar */}
+            {extractedTags.length > 0 && (
+              <div className="flex flex-wrap items-center gap-1.5 mb-4 pb-2 border-b border-border">
+                <Hash className="w-3.5 h-3.5 text-faint mr-0.5" />
+                {extractedTags.map((tag) => (
+                  <button
+                    key={tag}
+                    type="button"
+                    onClick={() => onSelectTag(tag)}
+                    className="badge-accent text-[11px] font-medium px-2 py-0.5 rounded-btn hover:opacity-85 transition-opacity"
+                  >
+                    #{tag}
                   </button>
                 ))}
               </div>
             )}
-          </div>
 
-          <input
-            ref={titleInputRef}
-            type="text"
-            value={title}
-            readOnly={!canEdit}
-            onChange={handleTitleChange}
-            placeholder="Titel der Notiz…"
-            className="flex-1 min-w-0 text-xl sm:text-2xl font-bold text-main bg-transparent border-0 focus:outline-none focus:ring-0 tracking-tight"
-          />
-        </div>
-
-        {/* Extracted #Tags Summary Bar */}
-        {extractedTags.length > 0 && (
-          <div className="flex flex-wrap items-center gap-1.5 mb-4 pb-2 border-b border-border">
-            <Hash className="w-3.5 h-3.5 text-faint mr-0.5" />
-            {extractedTags.map((tag) => (
-              <button
-                key={tag}
-                type="button"
-                onClick={() => onSelectTag(tag)}
-                className="badge-accent text-[11px] font-medium px-2 py-0.5 rounded-btn hover:opacity-85 transition-opacity"
-              >
-                #{tag}
-              </button>
-            ))}
-          </div>
+            {/* Logseq Outliner Tree */}
+            <OutlinerTree
+              docId={docId}
+              blocks={blocks}
+              canEdit={canEdit}
+              levelOffset={0}
+              onZoomBlock={setZoomedBlockId}
+              remoteCursors={remoteCursors}
+              sendCursorMoved={sendCursorMoved}
+              onUpdateBlock={handleUpdateBlock}
+              onCreateBlock={handleCreateBlock}
+              onDeleteBlock={handleDeleteBlock}
+              onMoveBlock={handleMoveBlock}
+              onTagClick={onSelectTag}
+              onWikiLinkClick={onWikiLinkClick}
+            />
+          </>
         )}
-
-        {/* Logseq Outliner Tree */}
-        <OutlinerTree
-          docId={docId}
-          blocks={blocks}
-          canEdit={canEdit}
-          remoteCursors={remoteCursors}
-          sendCursorMoved={sendCursorMoved}
-          onUpdateBlock={handleUpdateBlock}
-          onCreateBlock={handleCreateBlock}
-          onDeleteBlock={handleDeleteBlock}
-          onMoveBlock={handleMoveBlock}
-          onTagClick={onSelectTag}
-          onWikiLinkClick={onWikiLinkClick}
-        />
       </div>
     </div>
   );
diff --git a/frontend/src/features/workspace/OutlinerBlock.tsx b/frontend/src/features/workspace/OutlinerBlock.tsx
index 2a696fa..08584f4 100644
--- a/frontend/src/features/workspace/OutlinerBlock.tsx
+++ b/frontend/src/features/workspace/OutlinerBlock.tsx
@@ -15,6 +15,7 @@ import {
   MessageSquare,
   Hash,
   ExternalLink,
+  Maximize2,
 } from 'lucide-react';
 import { DocumentBlock, BlockType } from '../../lib/types';
 import { RemoteCursor } from '../../lib/useDocumentSync';
@@ -46,6 +47,8 @@ export interface OutlinerBlockProps {
   canEdit: boolean;
   activeRemoteCursors?: RemoteCursor[];
   sendCursorMoved?: (blockId: string | null, selectionStart?: number, selectionEnd?: number) => void;
+  levelOffset?: number;
+  onZoomBlock?: (blockId: string) => void;
   onFocusBlock: (blockId: string) => void;
   onUpdateBlock: (updated: DocumentBlock, immediate?: boolean) => void;
   onCreateBlockBelow: (afterBlockId: string, currentContent: string) => void;
@@ -69,6 +72,8 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   canEdit,
   activeRemoteCursors = [],
   sendCursorMoved,
+  levelOffset = 0,
+  onZoomBlock,
   onFocusBlock,
   onUpdateBlock,
   onCreateBlockBelow,
@@ -334,6 +339,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   };
 
   const level = Math.max(0, block.level || 0);
+  const visualLevel = Math.max(0, level - (levelOffset || 0));
 
   // Parse rich tokens (WikiLinks [[Page]] and #Tags)
   const tokens = useMemo(() => {
@@ -355,7 +361,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
           : 'hover:bg-panel'
       }`}
       style={{
-        paddingLeft: `${level * 22 + 4}px`,
+        paddingLeft: `${visualLevel * 22 + 4}px`,
         ...(primaryRemoteCursor
           ? { borderLeft: `2px solid ${primaryRemoteCursor.userColor}` }
           : {}),
@@ -379,8 +385,8 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
       )}
 
       {/* Indentation Guide Line */}
-      {level > 0 &&
-        Array.from({ length: level }).map((_, lvlIdx) => (
+      {visualLevel > 0 &&
+        Array.from({ length: visualLevel }).map((_, lvlIdx) => (
           <div
             key={lvlIdx}
             className="pointer-events-none absolute top-0 bottom-0 w-px border-l border-border"
@@ -440,15 +446,9 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
         ) : (
           <button
             type="button"
-            onClick={() => {
-              if (canEdit) {
-                flushDebounce(localContent, {
-                  type: block.type === 'todo' ? 'bullet' : 'todo',
-                });
-              }
-            }}
-            className="w-4 h-4 flex items-center justify-center rounded-btn hover:bg-panel-hover"
-            title="Klick: Zu To-Do / Bullet umschalten"
+            onClick={() => onZoomBlock?.(block.id)}
+            className="w-4 h-4 flex items-center justify-center rounded-btn hover:bg-panel-hover group/bullet transition-transform"
+            title="Klick: In diesen Ast hineinzoomen (Fokus-Modus)"
           >
             <span
               className={`w-1.5 h-1.5 rounded-full transition-all ${
@@ -456,7 +456,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
                   ? 'bg-accent ring-2 ring-accent/30'
                   : isFocused
                   ? 'bg-accent scale-125'
-                  : 'bg-faint group-hover:bg-accent'
+                  : 'bg-faint group-hover/bullet:bg-accent group-hover/bullet:scale-125'
               }`}
             />
           </button>
@@ -670,6 +670,16 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
         )}
       </div>
 
+      {/* Zoom / Focus button on hover */}
+      <button
+        type="button"
+        onClick={() => onZoomBlock?.(block.id)}
+        className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-accent rounded-btn transition-opacity shrink-0"
+        title="In diesen Ast hineinzoomen (Fokus-Modus)"
+      >
+        <Maximize2 className="w-3.5 h-3.5" />
+      </button>
+
       {/* Delete button on hover */}
       {canEdit && (
         <button
diff --git a/frontend/src/features/workspace/OutlinerTree.tsx b/frontend/src/features/workspace/OutlinerTree.tsx
index c402892..864f89a 100644
--- a/frontend/src/features/workspace/OutlinerTree.tsx
+++ b/frontend/src/features/workspace/OutlinerTree.tsx
@@ -8,6 +8,8 @@ export interface OutlinerTreeProps {
   docId: string;
   blocks: DocumentBlock[];
   canEdit: boolean;
+  levelOffset?: number;
+  onZoomBlock?: (blockId: string) => void;
   remoteCursors?: Record<string, RemoteCursor>;
   sendCursorMoved?: (blockId: string | null, selectionStart?: number, selectionEnd?: number) => void;
   onUpdateBlock: (updated: DocumentBlock, immediate?: boolean) => void;
@@ -22,6 +24,8 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
   docId,
   blocks,
   canEdit,
+  levelOffset = 0,
+  onZoomBlock,
   remoteCursors,
   sendCursorMoved,
   onUpdateBlock,
@@ -105,7 +109,7 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
       const hasChildren = Boolean(nextBlock && nextLvl > lvl);
 
       const prevBlock = i > 0 ? blocks[i - 1] : null;
-      const maxAllowedLevel = prevBlock ? Math.max(0, prevBlock.level || 0) + 1 : 0;
+      const maxAllowedLevel = prevBlock ? Math.max(0, prevBlock.level || 0) + 1 : (levelOffset || 0);
 
       result.push({
         block: b,
@@ -155,8 +159,8 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
       const idx = blocks.findIndex((b) => b.id === blockId);
       if (idx === -1) return;
 
-      // If this is the only block in the document, clear its content/type instead of leaving 0 blocks
-      if (blocks.length <= 1) {
+      // If this is the only block in the document (and not in an isolated zoom subtree), clear instead of deleting
+      if (blocks.length <= 1 && !levelOffset) {
         const only = blocks[0];
         onUpdateBlock(
           {
@@ -191,10 +195,11 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
       const prevLevel = idx > 0 ? Math.max(0, blocks[idx - 1].level || 0) : 0;
       const maxLevel = idx === 0 ? 0 : prevLevel + 1;
 
+      const minLevel = levelOffset || 0;
       const nextLevel =
         delta === 1
           ? Math.min(maxLevel, currentLevel + 1)
-          : Math.max(0, currentLevel - 1);
+          : Math.max(minLevel, currentLevel - 1);
 
       if (nextLevel === currentLevel) return;
 
@@ -283,6 +288,8 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
           hasChildren={hasChildren}
           isFocused={focusedBlockId === block.id}
           canEdit={canEdit}
+          levelOffset={levelOffset}
+          onZoomBlock={onZoomBlock}
           activeRemoteCursors={cursorsByBlock[block.id] || []}
           sendCursorMoved={sendCursorMoved}
           onFocusBlock={setFocusedBlockId}
@@ -315,7 +322,7 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
                   documentId: docId,
                   type: 'text',
                   content: '',
-                  level: 0,
+                  level: levelOffset || 0,
                   position: 1000,
                 };
                 pendingFocusRef.current = { blockId: firstBlock.id, cursor: 'start' };
-- 
2.54.0


From 48fe61fbced92679064f368cc361e7dcdf07d57f Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 22:12:51 +0100
Subject: [PATCH 08/33] feat(logging): integrate slog logging with env control
 and request/sync tracing

- Configure structured slog logger in cmd/server/main.go via LOG_LEVEL and DEBUG env vars
- Add HTTP API request logging middleware in internal/api/ with status and duration_ms
- Add WebSocket join/leave, event reception, and debounced SQLite flush tracing in docroom
- Document LOG_LEVEL and DEBUG settings in .env.example, compose.yaml, and docker-compose.yml
---
 .env.example                   |  3 ++
 cmd/server/main.go             | 27 ++++++++++------
 compose.yaml                   |  3 ++
 docker-compose.yml             |  3 ++
 internal/api/server.go         | 50 +++++++++++++++++++++++++++++
 internal/config/config.go      | 26 ++++++++++++++-
 internal/config/config_test.go | 58 ++++++++++++++++++++++++++++++++++
 internal/ws/docroom.go         | 50 +++++++++++++++++++++++++++--
 internal/ws/hub.go             |  4 +--
 9 files changed, 208 insertions(+), 16 deletions(-)
 create mode 100644 internal/config/config_test.go

diff --git a/.env.example b/.env.example
index bf4a4d8..3a9ac3e 100644
--- a/.env.example
+++ b/.env.example
@@ -5,7 +5,10 @@ DATABASE_URL=sqlite:///data/mindsift.db
 JWT_SECRET=change_this_to_a_secure_random_key_min_32_chars
 BASE_URL=http://localhost:8080
 ALLOW_REGISTRATION=false
+# Logging level: debug, info, warn, error (Default: info)
 LOG_LEVEL=info
+# LOG_LEVEL=debug
+# DEBUG=true
 
 # Optional SMTP Server Configuration for Email Alarms (can also be set in Admin Settings UI)
 SMTP_HOST=
diff --git a/cmd/server/main.go b/cmd/server/main.go
index b52aeb4..9f034c9 100644
--- a/cmd/server/main.go
+++ b/cmd/server/main.go
@@ -4,7 +4,7 @@ import (
 	"context"
 	"embed"
 	"io/fs"
-	"log"
+	"log/slog"
 	"net/http"
 	"os"
 	"os/signal"
@@ -23,11 +23,16 @@ var embeddedDist embed.FS
 func main() {
 	cfg := config.Load()
 
-	log.Printf("🧠 Starting MindSift Server on port %s (DB: %s)", cfg.Port, cfg.DatabasePath)
+	level := cfg.SlogLevel()
+	logger := slog.New(slog.NewTextHandler(os.Stdout, &slog.HandlerOptions{Level: level}))
+	slog.SetDefault(logger)
+
+	slog.Info("MindSift Server starting", "port", cfg.Port, "log_level", level.String())
 
 	store, err := storage.NewStore(cfg.DatabasePath)
 	if err != nil {
-		log.Fatalf("Failed to initialize storage: %v", err)
+		slog.Error("Failed to initialize storage", "error", err)
+		os.Exit(1)
 	}
 	defer store.Close()
 
@@ -35,11 +40,11 @@ func main() {
 	store.SeedSMTPDefaultsFromEnv(cfg.SMTPHost, cfg.SMTPPort, cfg.SMTPUser, cfg.SMTPPass, cfg.SMTPFrom, cfg.SMTPTLS)
 
 	if cfg.DemoMode {
-		log.Printf("🧪 Demo-Modus aktiv (MINDA_DEMO=true): Richte Demo-Benutzer admin/admin und user/user ein...")
+		slog.Info("🧪 Demo-Modus aktiv (MINDA_DEMO=true): Richte Demo-Benutzer admin/admin und user/user ein...")
 		if err := store.EnsureDemoAccounts(); err != nil {
-			log.Printf("⚠️ Fehler beim Anlegen der Demo-Accounts: %v", err)
+			slog.Warn("⚠️ Fehler beim Anlegen der Demo-Accounts", "error", err)
 		} else {
-			log.Printf("✅ Demo-Accounts bereit: admin / admin (Admin-Rolle) und user / user (Standard-Rolle)")
+			slog.Info("✅ Demo-Accounts bereit: admin / admin (Admin-Rolle) und user / user (Standard-Rolle)")
 		}
 	}
 
@@ -47,7 +52,8 @@ func main() {
 
 	staticFS, err := fs.Sub(embeddedDist, "dist")
 	if err != nil {
-		log.Fatalf("Failed to mount embedded dist filesystem: %v", err)
+		slog.Error("Failed to mount embedded dist filesystem", "error", err)
+		os.Exit(1)
 	}
 
 	srv := api.NewServer(cfg, store, wsHub, staticFS)
@@ -61,9 +67,10 @@ func main() {
 	}
 
 	go func() {
-		log.Printf("✨ MindSift ready at http://0.0.0.0:%s", cfg.Port)
+		slog.Info("✨ MindSift ready", "url", "http://0.0.0.0:"+cfg.Port)
 		if err := httpServer.ListenAndServe(); err != nil && err != http.ErrServerClosed {
-			log.Fatalf("HTTP server error: %v", err)
+			slog.Error("HTTP server error", "error", err)
+			os.Exit(1)
 		}
 	}()
 
@@ -71,7 +78,7 @@ func main() {
 	signal.Notify(stop, os.Interrupt, syscall.SIGTERM)
 	<-stop
 
-	log.Println("Shutting down MindSift server gracefully...")
+	slog.Info("Shutting down MindSift server gracefully...")
 	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
 	defer cancel()
 	_ = httpServer.Shutdown(ctx)
diff --git a/compose.yaml b/compose.yaml
index fc22f8d..c57c511 100644
--- a/compose.yaml
+++ b/compose.yaml
@@ -14,6 +14,9 @@ services:
       - BASE_URL=${BASE_URL:-http://localhost:8080}
       - ALLOW_REGISTRATION=${ALLOW_REGISTRATION:-false}
       - LOG_LEVEL=${LOG_LEVEL:-info}
+      # Set LOG_LEVEL=debug or DEBUG=true for detailed request and sync logging
+      # - LOG_LEVEL=debug
+      # - DEBUG=true
       # Demo mode: if true, automatically seeds demo accounts admin/admin and user/user
       - MINDA_DEMO=${MINDA_DEMO:-false}
       # Optional SMTP / Mail Configuration (can also be configured in Admin UI)
diff --git a/docker-compose.yml b/docker-compose.yml
index fc22f8d..c57c511 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,6 +14,9 @@ services:
       - BASE_URL=${BASE_URL:-http://localhost:8080}
       - ALLOW_REGISTRATION=${ALLOW_REGISTRATION:-false}
       - LOG_LEVEL=${LOG_LEVEL:-info}
+      # Set LOG_LEVEL=debug or DEBUG=true for detailed request and sync logging
+      # - LOG_LEVEL=debug
+      # - DEBUG=true
       # Demo mode: if true, automatically seeds demo accounts admin/admin and user/user
       - MINDA_DEMO=${MINDA_DEMO:-false}
       # Optional SMTP / Mail Configuration (can also be configured in Admin UI)
diff --git a/internal/api/server.go b/internal/api/server.go
index e5e0f57..00bda7a 100644
--- a/internal/api/server.go
+++ b/internal/api/server.go
@@ -7,6 +7,7 @@ import (
 	"fmt"
 	"io"
 	"io/fs"
+	"log/slog"
 	"net/http"
 	"net/smtp"
 	"strings"
@@ -48,6 +49,7 @@ func (s *Server) Router() http.Handler {
 
 	r.Use(middleware.RealIP)
 	r.Use(middleware.Recoverer)
+	r.Use(s.apiLoggingMiddleware)
 	r.Use(cors.Handler(cors.Options{
 		AllowedOrigins:   []string{"*"},
 		AllowedMethods:   []string{"GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"},
@@ -239,6 +241,54 @@ func writeError(w http.ResponseWriter, status int, message string) {
 	writeJSON(w, status, map[string]string{"error": message})
 }
 
+func (s *Server) apiLoggingMiddleware(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		// Only log API requests (/api/...)
+		if !strings.HasPrefix(r.URL.Path, "/api") {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		start := time.Now()
+		ww := middleware.NewWrapResponseWriter(w, r.ProtoMajor)
+
+		next.ServeHTTP(ww, r)
+
+		duration := time.Since(start)
+		durationMs := float64(duration.Microseconds()) / 1000.0
+		status := ww.Status()
+		if status == 0 {
+			status = http.StatusOK
+		}
+
+		method := r.Method
+		path := r.URL.Path
+
+		if status >= 500 {
+			slog.Error("HTTP request failed",
+				"method", method,
+				"path", path,
+				"status", status,
+				"duration_ms", durationMs,
+			)
+		} else if status >= 400 {
+			slog.Warn("HTTP request warning",
+				"method", method,
+				"path", path,
+				"status", status,
+				"duration_ms", durationMs,
+			)
+		} else {
+			slog.Debug("HTTP request completed",
+				"method", method,
+				"path", path,
+				"status", status,
+				"duration_ms", durationMs,
+			)
+		}
+	})
+}
+
 func (s *Server) authMiddleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		// 1. Check Authorization Bearer Token
diff --git a/internal/config/config.go b/internal/config/config.go
index e9a3668..0eab1c4 100644
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -1,6 +1,7 @@
 package config
 
 import (
+	"log/slog"
 	"os"
 	"path/filepath"
 	"strings"
@@ -14,6 +15,7 @@ type Config struct {
 	BaseURL           string
 	AllowRegistration bool
 	LogLevel          string
+	Debug             bool
 	DemoMode          bool
 
 	// Optional SMTP environment variables (can also be overridden/configured in DB system_settings)
@@ -40,7 +42,14 @@ func Load() *Config {
 	jwtSecret := getEnv("JWT_SECRET", "mindsift-default-selfhosted-jwt-secret-key-2026")
 	baseURL := getEnv("BASE_URL", "http://localhost:"+port)
 	allowReg := strings.ToLower(getEnv("ALLOW_REGISTRATION", "false")) == "true"
-	logLevel := getEnv("LOG_LEVEL", "info")
+
+	debugVal := strings.ToLower(getEnv("DEBUG", "false"))
+	debug := debugVal == "true" || debugVal == "1" || debugVal == "yes" || debugVal == "on"
+
+	logLevel := strings.ToLower(getEnv("LOG_LEVEL", "info"))
+	if debug {
+		logLevel = "debug"
+	}
 
 	demoVal := strings.ToLower(getEnv("MINDA_DEMO", getEnv("MINDSIFT_DEMO", getEnv("DEMO_MODE", "false"))))
 	demoMode := demoVal == "true" || demoVal == "1" || demoVal == "yes" || demoVal == "on"
@@ -60,6 +69,7 @@ func Load() *Config {
 		BaseURL:           baseURL,
 		AllowRegistration: allowReg,
 		LogLevel:          logLevel,
+		Debug:             debug,
 		DemoMode:          demoMode,
 		SMTPHost:          smtpHost,
 		SMTPPort:          smtpPort,
@@ -70,6 +80,20 @@ func Load() *Config {
 	}
 }
 
+// SlogLevel parses Config.LogLevel into a standard slog.Level.
+func (c *Config) SlogLevel() slog.Level {
+	switch strings.ToLower(strings.TrimSpace(c.LogLevel)) {
+	case "debug":
+		return slog.LevelDebug
+	case "warn", "warning":
+		return slog.LevelWarn
+	case "error":
+		return slog.LevelError
+	default:
+		return slog.LevelInfo
+	}
+}
+
 func getEnv(key, fallback string) string {
 	if val, ok := os.LookupEnv(key); ok && strings.TrimSpace(val) != "" {
 		return strings.TrimSpace(val)
diff --git a/internal/config/config_test.go b/internal/config/config_test.go
new file mode 100644
index 0000000..af25526
--- /dev/null
+++ b/internal/config/config_test.go
@@ -0,0 +1,58 @@
+package config
+
+import (
+	"log/slog"
+	"os"
+	"testing"
+)
+
+func TestConfigLogLevelAndDebug(t *testing.T) {
+	os.Setenv("PORT", "9090")
+	defer os.Unsetenv("PORT")
+
+	// 1. Default info
+	os.Unsetenv("LOG_LEVEL")
+	os.Unsetenv("DEBUG")
+	cfg := Load()
+	if cfg.SlogLevel() != slog.LevelInfo {
+		t.Fatalf("expected LevelInfo, got %v", cfg.SlogLevel())
+	}
+
+	// 2. LOG_LEVEL=debug
+	os.Setenv("LOG_LEVEL", "debug")
+	cfg = Load()
+	if cfg.SlogLevel() != slog.LevelDebug {
+		t.Fatalf("expected LevelDebug, got %v", cfg.SlogLevel())
+	}
+
+	// 3. LOG_LEVEL=warn
+	os.Setenv("LOG_LEVEL", "warn")
+	cfg = Load()
+	if cfg.SlogLevel() != slog.LevelWarn {
+		t.Fatalf("expected LevelWarn, got %v", cfg.SlogLevel())
+	}
+
+	// 4. LOG_LEVEL=error
+	os.Setenv("LOG_LEVEL", "error")
+	cfg = Load()
+	if cfg.SlogLevel() != slog.LevelError {
+		t.Fatalf("expected LevelError, got %v", cfg.SlogLevel())
+	}
+
+	// 5. DEBUG=true overrides LOG_LEVEL
+	os.Setenv("LOG_LEVEL", "error")
+	os.Setenv("DEBUG", "true")
+	cfg = Load()
+	if cfg.SlogLevel() != slog.LevelDebug {
+		t.Fatalf("expected LevelDebug when DEBUG=true, got %v", cfg.SlogLevel())
+	}
+
+	// 6. DEBUG=1 overrides LOG_LEVEL
+	os.Setenv("DEBUG", "1")
+	cfg = Load()
+	if cfg.SlogLevel() != slog.LevelDebug {
+		t.Fatalf("expected LevelDebug when DEBUG=1, got %v", cfg.SlogLevel())
+	}
+	os.Unsetenv("DEBUG")
+	os.Unsetenv("LOG_LEVEL")
+}
diff --git a/internal/ws/docroom.go b/internal/ws/docroom.go
index 84c2540..099e28b 100644
--- a/internal/ws/docroom.go
+++ b/internal/ws/docroom.go
@@ -2,7 +2,7 @@ package ws
 
 import (
 	"encoding/json"
-	"log"
+	"log/slog"
 	"net/http"
 	"sync"
 	"time"
@@ -477,13 +477,30 @@ func (r *DocRoom) Flush() {
 	r.dirty = false
 	r.mu.Unlock()
 
+	tagsCount := 0
+	for _, b := range blocksCopy {
+		tagsCount += len(domain.ExtractTags(b.Content))
+	}
+
+	start := time.Now()
 	r.hub.mu.RLock()
 	store := r.hub.docStore
 	r.hub.mu.RUnlock()
 
 	if store != nil {
 		if err := store.FlushDocumentState(docID, title, blocksCopy); err != nil {
-			log.Printf("[doc-room] flush error for doc %s: %v", docID, err)
+			slog.Error("SQLite document flush failed",
+				"doc_id", docID,
+				"error", err,
+			)
+		} else {
+			durationMs := float64(time.Since(start).Microseconds()) / 1000.0
+			slog.Debug("SQLite document flushed",
+				"doc_id", docID,
+				"blocks_count", len(blocksCopy),
+				"tags_count", tagsCount,
+				"duration_ms", durationMs,
+			)
 		}
 	}
 }
@@ -492,7 +509,7 @@ func (r *DocRoom) Flush() {
 func (r *DocRoom) ServeDocWS(w http.ResponseWriter, req *http.Request, userID string, clientID string, canWrite bool) {
 	conn, err := upgrader.Upgrade(w, req, nil)
 	if err != nil {
-		log.Printf("[doc-ws] upgrade error for doc %s: %v", r.docID, err)
+		slog.Error("WebSocket upgrade error", "doc_id", r.docID, "error", err)
 		return
 	}
 
@@ -518,6 +535,7 @@ func (r *DocRoom) ServeDocWS(w http.ResponseWriter, req *http.Request, userID st
 
 	r.mu.Lock()
 	r.wsClients[client] = true
+	activeClients := len(r.wsClients)
 	if r.activeCursors == nil {
 		r.activeCursors = make(map[string]*CursorPresence)
 	}
@@ -542,6 +560,13 @@ func (r *DocRoom) ServeDocWS(w http.ResponseWriter, req *http.Request, userID st
 	}
 	r.mu.Unlock()
 
+	slog.Debug("WS client joined doc room",
+		"doc_id", r.docID,
+		"client_id", clientID,
+		"user_id", userID,
+		"active_clients", activeClients,
+	)
+
 	// Immediately send live in-memory state and current cursors to the newly connected client
 	initEvt := DocSyncEvent{
 		Type:          "doc_state",
@@ -609,6 +634,13 @@ func (c *DocWSClient) readPump() {
 		}
 		c.room.mu.Unlock()
 
+		slog.Debug("WS client left doc room",
+			"doc_id", c.room.docID,
+			"client_id", c.clientID,
+			"user_id", c.userID,
+			"active_clients", remaining,
+		)
+
 		_ = c.conn.Close()
 
 		// Flush immediately when the last client leaves the document room
@@ -632,6 +664,18 @@ func (c *DocWSClient) readPump() {
 
 		var evt DocSyncEvent
 		if err := json.Unmarshal(message, &evt); err == nil && evt.Type != "" {
+			targetBlockID := evt.BlockID
+			if targetBlockID == "" && evt.Block != nil {
+				targetBlockID = evt.Block.ID
+			}
+
+			slog.Debug("WS doc event received",
+				"type", evt.Type,
+				"doc_id", c.room.docID,
+				"block_id", targetBlockID,
+				"sender_client_id", c.clientID,
+			)
+
 			// Read-only clients can still move their cursor and send presence updates
 			if !c.canWrite && evt.Type != "cursor_moved" {
 				continue
diff --git a/internal/ws/hub.go b/internal/ws/hub.go
index aa5dd27..bb51fab 100644
--- a/internal/ws/hub.go
+++ b/internal/ws/hub.go
@@ -3,7 +3,7 @@ package ws
 import (
 	"encoding/json"
 	"fmt"
-	"log"
+	"log/slog"
 	"net/http"
 	"strings"
 	"sync"
@@ -627,7 +627,7 @@ func (c *Client) SendEvent(event string, payload interface{}) {
 func (h *Hub) ServeWS(w http.ResponseWriter, r *http.Request, roomID, userID string) {
 	conn, err := upgrader.Upgrade(w, r, nil)
 	if err != nil {
-		log.Printf("[ws] upgrade error: %v", err)
+		slog.Error("WebSocket upgrade error", "room_id", roomID, "user_id", userID, "error", err)
 		return
 	}
 
-- 
2.54.0


From 1bcf6b4f1805619bc782915cec859af73628ac94 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 22:14:20 +0100
Subject: [PATCH 09/33] refactor(outliner): remove redundant /bullet slash
 command

---
 frontend/src/features/workspace/OutlinerBlock.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/features/workspace/OutlinerBlock.tsx b/frontend/src/features/workspace/OutlinerBlock.tsx
index 08584f4..018451e 100644
--- a/frontend/src/features/workspace/OutlinerBlock.tsx
+++ b/frontend/src/features/workspace/OutlinerBlock.tsx
@@ -10,7 +10,6 @@ import {
   Heading2,
   Heading3,
   ListTodo,
-  Type,
   Minus,
   MessageSquare,
   Hash,
@@ -32,7 +31,6 @@ const SLASH_COMMANDS: SlashCommand[] = [
   { type: 'h1', label: '/h1', desc: 'Große Überschrift', icon: <Heading1 className="w-3.5 h-3.5" /> },
   { type: 'h2', label: '/h2', desc: 'Abschnitts-Überschrift', icon: <Heading2 className="w-3.5 h-3.5" /> },
   { type: 'h3', label: '/h3', desc: 'Unterabschnitt', icon: <Heading3 className="w-3.5 h-3.5" /> },
-  { type: 'bullet', label: '/bullet', desc: 'Standard Listenpunkt', icon: <Type className="w-3.5 h-3.5" /> },
   { type: 'code', label: '/code', desc: 'Code-Block mit Syntax', icon: <Code className="w-3.5 h-3.5" /> },
   { type: 'callout', label: '/callout', desc: 'Hinweisbox', icon: <MessageSquare className="w-3.5 h-3.5" /> },
   { type: 'divider', label: '/divider', desc: 'Trennlinie', icon: <Minus className="w-3.5 h-3.5" /> },
-- 
2.54.0


From 06f5f7043c27946ef344d87419e8baf809e8f900 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 22:19:53 +0100
Subject: [PATCH 10/33] feat(workspace): add /link slash command with note
 selector and web link modal

---
 frontend/src/features/workspace/LinkModal.tsx | 271 ++++++++++++++++++
 .../src/features/workspace/OutlinerBlock.tsx  |  79 ++++-
 2 files changed, 345 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/features/workspace/LinkModal.tsx

diff --git a/frontend/src/features/workspace/LinkModal.tsx b/frontend/src/features/workspace/LinkModal.tsx
new file mode 100644
index 0000000..d6b6d7c
--- /dev/null
+++ b/frontend/src/features/workspace/LinkModal.tsx
@@ -0,0 +1,271 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { Link as LinkIcon, FileText, Globe, X, Search, ExternalLink, Loader2 } from 'lucide-react';
+import { api } from '../../lib/api';
+import { Document } from '../../lib/types';
+
+export interface LinkModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onInsertLink: (markdown: string) => void;
+  availableDocs?: { id: string; title: string; icon?: string; folderPath?: string }[];
+}
+
+export const LinkModal: React.FC<LinkModalProps> = ({
+  isOpen,
+  onClose,
+  onInsertLink,
+  availableDocs,
+}) => {
+  const [tab, setTab] = useState<'note' | 'web'>('note');
+  const [search, setSearch] = useState('');
+  const [docs, setDocs] = useState<Document[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const [webTitle, setWebTitle] = useState('');
+  const [webUrl, setWebUrl] = useState('');
+
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const webTitleInputRef = useRef<HTMLInputElement | null>(null);
+
+  // Load documents when modal opens
+  useEffect(() => {
+    if (!isOpen) return;
+    if (availableDocs && availableDocs.length > 0) {
+      setDocs(availableDocs as Document[]);
+      return;
+    }
+    let isCancelled = false;
+    setLoading(true);
+    api
+      .getDocuments()
+      .then((fetched) => {
+        if (!isCancelled) {
+          setDocs(fetched);
+          setLoading(false);
+        }
+      })
+      .catch(() => {
+        if (!isCancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [isOpen, availableDocs]);
+
+  // Focus input on mount or tab change
+  useEffect(() => {
+    if (!isOpen) return;
+    const timer = setTimeout(() => {
+      if (tab === 'note') {
+        searchInputRef.current?.focus();
+      } else {
+        webTitleInputRef.current?.focus();
+      }
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [isOpen, tab]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  const filteredDocs = useMemo(() => {
+    if (!search.trim()) return docs;
+    const q = search.toLowerCase();
+    return docs.filter(
+      (d) =>
+        d.title.toLowerCase().includes(q) ||
+        (d.folderPath && d.folderPath.toLowerCase().includes(q))
+    );
+  }, [docs, search]);
+
+  const handleSelectNote = (doc: { title: string }) => {
+    const noteTitle = doc.title.trim() || 'Notiz';
+    onInsertLink(`[[${noteTitle}]]`);
+  };
+
+  const handleWebLinkSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    let url = webUrl.trim();
+    if (!url) return;
+    if (!/^https?:\/\//i.test(url) && !url.startsWith('#') && !url.startsWith('/')) {
+      url = `https://${url}`;
+    }
+    const label = webTitle.trim() || url;
+    onInsertLink(`[${label}](${url})`);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4 backdrop-blur-xs animate-in fade-in duration-100"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="panel-surface shadow-panel border border-border rounded-card max-w-md w-full overflow-hidden flex flex-col max-h-[85vh]">
+        {/* Modal Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-panel">
+          <div className="flex items-center gap-2">
+            <LinkIcon className="w-4 h-4 text-accent" />
+            <h3 className="text-sm font-bold text-main">Link einfügen</h3>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1 rounded-btn text-muted hover:text-main hover:bg-panel-elevated transition-colors"
+            title="Schließen (Esc)"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Tab Switcher */}
+        <div className="flex border-b border-border bg-panel-elevated/40 p-1 gap-1">
+          <button
+            type="button"
+            onClick={() => setTab('note')}
+            className={`flex-1 py-1.5 px-3 rounded-btn text-xs font-semibold flex items-center justify-center gap-1.5 transition-colors ${
+              tab === 'note'
+                ? 'bg-accent text-on-accent shadow-sm'
+                : 'text-muted hover:text-main hover:bg-panel-elevated'
+            }`}
+          >
+            <FileText className="w-3.5 h-3.5" />
+            <span>Notiz verknüpfen</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => setTab('web')}
+            className={`flex-1 py-1.5 px-3 rounded-btn text-xs font-semibold flex items-center justify-center gap-1.5 transition-colors ${
+              tab === 'web'
+                ? 'bg-accent text-on-accent shadow-sm'
+                : 'text-muted hover:text-main hover:bg-panel-elevated'
+            }`}
+          >
+            <Globe className="w-3.5 h-3.5" />
+            <span>Web-Link</span>
+          </button>
+        </div>
+
+        {/* Modal Body */}
+        <div className="p-4 flex-1 overflow-y-auto">
+          {tab === 'note' ? (
+            <div className="space-y-3">
+              <div className="relative">
+                <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-muted" />
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="Notiz suchen…"
+                  className="w-full bg-input border border-border focus:border-accent text-main text-xs pl-8 pr-3 py-1.5 rounded-btn focus:outline-none transition-colors"
+                />
+              </div>
+
+              {loading ? (
+                <div className="py-8 flex items-center justify-center text-xs text-muted gap-2">
+                  <Loader2 className="w-4 h-4 animate-spin text-accent" />
+                  <span>Notizen werden geladen…</span>
+                </div>
+              ) : (
+                <div className="max-h-60 overflow-y-auto space-y-1 pr-1">
+                  {filteredDocs.map((d) => (
+                    <button
+                      key={d.id}
+                      type="button"
+                      onClick={() => handleSelectNote(d)}
+                      className="w-full text-left px-3 py-2 rounded-btn hover:bg-panel-elevated flex items-center justify-between text-xs transition-colors group"
+                    >
+                      <div className="flex items-center gap-2 min-w-0">
+                        <span className="text-base shrink-0">{d.icon || '📝'}</span>
+                        <span className="font-medium text-main truncate group-hover:text-accent">
+                          {d.title || 'Unbenannte Notiz'}
+                        </span>
+                      </div>
+                      {d.folderPath && (
+                        <span className="text-[10px] text-faint ml-2 shrink-0 truncate max-w-[100px]">
+                          📁 {d.folderPath}
+                        </span>
+                      )}
+                    </button>
+                  ))}
+
+                  {filteredDocs.length === 0 && (
+                    <div className="py-8 text-center text-xs text-muted">
+                      {search
+                        ? `Keine Notiz für "${search}" gefunden.`
+                        : 'Keine Notizen im Workspace vorhanden.'}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          ) : (
+            <form onSubmit={handleWebLinkSubmit} className="space-y-3">
+              <div>
+                <label className="block text-[11px] font-semibold text-muted mb-1">
+                  Link-Text / Titel
+                </label>
+                <input
+                  ref={webTitleInputRef}
+                  type="text"
+                  value={webTitle}
+                  onChange={(e) => setWebTitle(e.target.value)}
+                  placeholder="z. B. MindSift Dokumentation"
+                  className="w-full bg-input border border-border focus:border-accent text-main text-xs px-3 py-1.5 rounded-btn focus:outline-none transition-colors"
+                />
+              </div>
+
+              <div>
+                <label className="block text-[11px] font-semibold text-muted mb-1">
+                  Web-Adresse (URL) *
+                </label>
+                <input
+                  type="text"
+                  required
+                  value={webUrl}
+                  onChange={(e) => setWebUrl(e.target.value)}
+                  placeholder="https://example.com"
+                  className="w-full bg-input border border-border focus:border-accent text-main text-xs px-3 py-1.5 rounded-btn focus:outline-none transition-colors"
+                />
+              </div>
+
+              <div className="pt-2 flex justify-end gap-2">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="btn-action px-3 py-1.5 text-xs text-muted hover:text-main"
+                >
+                  Abbrechen
+                </button>
+                <button
+                  type="submit"
+                  disabled={!webUrl.trim()}
+                  className="btn-primary inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-on-accent rounded-btn disabled:opacity-50 transition-opacity"
+                >
+                  <ExternalLink className="w-3.5 h-3.5" />
+                  <span>Link einfügen</span>
+                </button>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/features/workspace/OutlinerBlock.tsx b/frontend/src/features/workspace/OutlinerBlock.tsx
index 018451e..03f4635 100644
--- a/frontend/src/features/workspace/OutlinerBlock.tsx
+++ b/frontend/src/features/workspace/OutlinerBlock.tsx
@@ -15,12 +15,15 @@ import {
   Hash,
   ExternalLink,
   Maximize2,
+  Link as LinkIcon,
+  FileText,
 } from 'lucide-react';
 import { DocumentBlock, BlockType } from '../../lib/types';
 import { RemoteCursor } from '../../lib/useDocumentSync';
+import { LinkModal } from './LinkModal';
 
 export interface SlashCommand {
-  type: BlockType;
+  type: BlockType | 'link';
   label: string;
   desc: string;
   icon: React.ReactNode;
@@ -28,6 +31,7 @@ export interface SlashCommand {
 
 const SLASH_COMMANDS: SlashCommand[] = [
   { type: 'todo', label: '/todo', desc: 'Aufgabe mit Checkbox', icon: <ListTodo className="w-3.5 h-3.5" /> },
+  { type: 'link', label: '/link', desc: 'Notiz verknüpfen oder Web-Link einfügen', icon: <LinkIcon className="w-3.5 h-3.5" /> },
   { type: 'h1', label: '/h1', desc: 'Große Überschrift', icon: <Heading1 className="w-3.5 h-3.5" /> },
   { type: 'h2', label: '/h2', desc: 'Abschnitts-Überschrift', icon: <Heading2 className="w-3.5 h-3.5" /> },
   { type: 'h3', label: '/h3', desc: 'Unterabschnitt', icon: <Heading3 className="w-3.5 h-3.5" /> },
@@ -89,6 +93,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   const [localContent, setLocalContent] = useState<string>(block.content || '');
   const [slashSearch, setSlashSearch] = useState<string | null>(null);
   const [slashIndex, setSlashIndex] = useState(0);
+  const [showLinkModal, setShowLinkModal] = useState<boolean>(false);
 
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const debounceTimerRef = useRef<number | null>(null);
@@ -158,6 +163,11 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   const applySlashCommand = (cmd: SlashCommand) => {
     setSlashSearch(null);
     const clean = localContent.replace(/\/([a-z0-9]*)$/i, '').trim();
+    if (cmd.type === 'link') {
+      setLocalContent(clean);
+      setShowLinkModal(true);
+      return;
+    }
     setLocalContent(clean);
     flushDebounce(clean, {
       type: cmd.type,
@@ -165,6 +175,16 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
     });
   };
 
+  const handleInsertLink = (linkMarkdown: string) => {
+    setShowLinkModal(false);
+    const cursor = textareaRef.current?.selectionStart ?? localContent.length;
+    const before = localContent.slice(0, cursor);
+    const after = localContent.slice(cursor);
+    const newContent = `${before}${before && !before.endsWith(' ') ? ' ' : ''}${linkMarkdown}${after && !after.startsWith(' ') ? ' ' : ''}${after}`.trim();
+    setLocalContent(newContent);
+    flushDebounce(newContent);
+  };
+
   const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     if (!canEdit) return;
     let val = e.target.value;
@@ -339,14 +359,20 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   const level = Math.max(0, block.level || 0);
   const visualLevel = Math.max(0, level - (levelOffset || 0));
 
-  // Parse rich tokens (WikiLinks [[Page]] and #Tags)
+  // Parse rich tokens (WikiLinks [[Page]], Markdown Links [Title](url), raw URLs, and #Tags)
   const tokens = useMemo(() => {
-    const parts = (localContent || '').split(/(\[\[.*?\]\]|#[a-zA-Z0-9äöüÄÖÜß_-]+)/g);
+    const parts = (localContent || '').split(
+      /(\[\[.*?\]\]|\[.*?\]\(https?:\/\/.*?\)|\bhttps?:\/\/[^\s]+|#[a-zA-Z0-9äöüÄÖÜß_-]+)/g
+    );
     return parts.filter(Boolean);
   }, [localContent]);
 
   const hasSpecialTokens = tokens.some(
-    (t) => t.startsWith('#') || (t.startsWith('[[') && t.endsWith(']]'))
+    (t) =>
+      t.startsWith('#') ||
+      (t.startsWith('[[') && t.endsWith(']]')) ||
+      /^\[(.*?)\]\((https?:\/\/.*?)\)$/.test(t) ||
+      /^https?:\/\//.test(t)
   );
 
   return (
@@ -619,12 +645,46 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
                     type="button"
                     onClick={() => onWikiLinkClick?.(page)}
                     className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-status-info bg-status-info/10 hover:bg-status-info/20 rounded-btn transition-colors"
+                    title={`Notiz öffnen: ${page}`}
                   >
-                    <ExternalLink className="w-2.5 h-2.5 opacity-80" />
+                    <FileText className="w-2.5 h-2.5 opacity-80" />
                     <span>{page}</span>
                   </button>
                 );
               }
+              const mdMatch = part.match(/^\[(.*?)\]\((https?:\/\/.*?)\)$/);
+              if (mdMatch) {
+                const label = mdMatch[1];
+                const url = mdMatch[2];
+                return (
+                  <a
+                    key={idx}
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-status-ok bg-status-ok/10 hover:bg-status-ok/20 rounded-btn transition-colors"
+                    title={url}
+                  >
+                    <ExternalLink className="w-2.5 h-2.5 opacity-80" />
+                    <span>{label || url}</span>
+                  </a>
+                );
+              }
+              if (/^https?:\/\//.test(part)) {
+                return (
+                  <a
+                    key={idx}
+                    href={part}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-status-ok bg-status-ok/10 hover:bg-status-ok/20 rounded-btn transition-colors"
+                    title={part}
+                  >
+                    <ExternalLink className="w-2.5 h-2.5 opacity-80" />
+                    <span className="truncate max-w-[160px]">{part}</span>
+                  </a>
+                );
+              }
               return null;
             })}
           </div>
@@ -689,6 +749,15 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
           <X className="w-3.5 h-3.5" />
         </button>
       )}
+
+      {/* Link Insertion Modal */}
+      {showLinkModal && (
+        <LinkModal
+          isOpen={showLinkModal}
+          onClose={() => setShowLinkModal(false)}
+          onInsertLink={handleInsertLink}
+        />
+      )}
     </div>
   );
 };
-- 
2.54.0


From cedf5aebff7236cac885d40344393dd55a457702 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 22:27:11 +0100
Subject: [PATCH 11/33] fix(sync): eliminate zombie focus, flush debounced
 state on window blur, remove stale closures and buffer ws messages

---
 .../src/features/workspace/DocumentEditor.tsx |  38 ++++-
 .../src/features/workspace/OutlinerBlock.tsx  | 130 +++++++++++++-----
 frontend/src/lib/useDocumentSync.ts           |  89 +++++++++---
 internal/ws/docroom.go                        |  23 ++++
 4 files changed, 221 insertions(+), 59 deletions(-)

diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
index 66829de..1830ab9 100644
--- a/frontend/src/features/workspace/DocumentEditor.tsx
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -196,10 +196,12 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
       switch (evt.type) {
         case 'doc_state': {
           if (evt.title !== undefined) {
-            const isTitleFocused =
+            const isTitleActivelyEditing =
               titleInputRef.current !== null &&
-              document.activeElement === titleInputRef.current;
-            if (!isTitleFocused) {
+              document.activeElement === titleInputRef.current &&
+              typeof document !== 'undefined' &&
+              document.hasFocus();
+            if (!isTitleActivelyEditing) {
               setTitle(evt.title);
             }
           }
@@ -211,10 +213,12 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
 
         case 'title_updated': {
           if (evt.title !== undefined) {
-            const isTitleFocused =
+            const isTitleActivelyEditing =
               titleInputRef.current !== null &&
-              document.activeElement === titleInputRef.current;
-            if (!isTitleFocused) {
+              document.activeElement === titleInputRef.current &&
+              typeof document !== 'undefined' &&
+              document.hasFocus();
+            if (!isTitleActivelyEditing) {
               setTitle(evt.title);
             }
             if (docRef.current) {
@@ -407,6 +411,27 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
     }, 250);
   };
 
+  const handleTitleBlur = () => {
+    if (titleDebounceRef.current !== null) {
+      window.clearTimeout(titleDebounceRef.current);
+      titleDebounceRef.current = null;
+      sendTitleUpdated(title);
+    }
+  };
+
+  // Flush title debouncing on window blur so background window never holds stale pending title
+  useEffect(() => {
+    const handleWindowBlur = () => {
+      if (titleDebounceRef.current !== null) {
+        window.clearTimeout(titleDebounceRef.current);
+        titleDebounceRef.current = null;
+        sendTitleUpdated(title);
+      }
+    };
+    window.addEventListener('blur', handleWindowBlur);
+    return () => window.removeEventListener('blur', handleWindowBlur);
+  }, [title, sendTitleUpdated]);
+
   const handleUpdateBlock = useCallback(
     (updatedBlock: DocumentBlock) => {
       setBlocks((prev) =>
@@ -920,6 +945,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
                 value={title}
                 readOnly={!canEdit}
                 onChange={handleTitleChange}
+                onBlur={handleTitleBlur}
                 placeholder="Titel der Notiz…"
                 className="flex-1 min-w-0 text-xl sm:text-2xl font-bold text-main bg-transparent border-0 focus:outline-none focus:ring-0 tracking-tight"
               />
diff --git a/frontend/src/features/workspace/OutlinerBlock.tsx b/frontend/src/features/workspace/OutlinerBlock.tsx
index 03f4635..89c4da0 100644
--- a/frontend/src/features/workspace/OutlinerBlock.tsx
+++ b/frontend/src/features/workspace/OutlinerBlock.tsx
@@ -102,15 +102,87 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   const localContentRef = useRef<string>(localContent);
   localContentRef.current = localContent;
 
-  // Sync incoming remote changes ONLY when this textarea is NOT active
+  // Callback refs to avoid stale closures in setTimeout, debounce flush, and event listeners
+  const onUpdateBlockRef = useRef(onUpdateBlock);
+  onUpdateBlockRef.current = onUpdateBlock;
+  const onFocusBlockRef = useRef(onFocusBlock);
+  onFocusBlockRef.current = onFocusBlock;
+  const onCreateBlockBelowRef = useRef(onCreateBlockBelow);
+  onCreateBlockBelowRef.current = onCreateBlockBelow;
+  const onDeleteBlockRef = useRef(onDeleteBlock);
+  onDeleteBlockRef.current = onDeleteBlock;
+  const onIndentBlockRef = useRef(onIndentBlock);
+  onIndentBlockRef.current = onIndentBlock;
+  const onNavigateFocusRef = useRef(onNavigateFocus);
+  onNavigateFocusRef.current = onNavigateFocus;
+  const sendCursorMovedRef = useRef(sendCursorMoved);
+  sendCursorMovedRef.current = sendCursorMoved;
+
+  // Track if this input currently has actual focus in an active browser window
+  const isFocusedRef = useRef<boolean>(false);
+
+  const flushDebounce = useCallback(
+    (contentToFlush: string, overrides?: Partial<DocumentBlock>) => {
+      if (debounceTimerRef.current !== null) {
+        window.clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+      }
+      const nextBlock: DocumentBlock = {
+        ...latestBlockRef.current,
+        content: contentToFlush,
+        ...overrides,
+      };
+      onUpdateBlockRef.current(nextBlock, true);
+    },
+    []
+  );
+
+  // Sync incoming remote changes ONLY when this textarea is NOT actively being edited
+  // Condition: isFocusedRef.current === true && document.hasFocus()
   useEffect(() => {
-    const isActivelyFocused =
-      textareaRef.current !== null && document.activeElement === textareaRef.current;
-    if (!isActivelyFocused && block.content !== localContentRef.current) {
+    const isActivelyEditing =
+      isFocusedRef.current === true &&
+      typeof document !== 'undefined' &&
+      document.hasFocus() &&
+      textareaRef.current !== null &&
+      document.activeElement === textareaRef.current;
+
+    if (!isActivelyEditing && block.content !== localContentRef.current) {
       setLocalContent(block.content || '');
+      localContentRef.current = block.content || '';
     }
   }, [block.content]);
 
+  // Handle window blur / focus to instantly flush debounced input and clear zombie focus
+  useEffect(() => {
+    const handleWindowBlur = () => {
+      if (debounceTimerRef.current !== null) {
+        window.clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+        flushDebounce(localContentRef.current);
+      } else if (localContentRef.current !== latestBlockRef.current.content) {
+        flushDebounce(localContentRef.current);
+      }
+      isFocusedRef.current = false;
+      sendCursorMovedRef.current?.(null);
+    };
+
+    const handleWindowFocus = () => {
+      const isThisActive =
+        textareaRef.current !== null &&
+        document.activeElement === textareaRef.current &&
+        document.hasFocus();
+      isFocusedRef.current = isThisActive;
+    };
+
+    window.addEventListener('blur', handleWindowBlur);
+    window.addEventListener('focus', handleWindowFocus);
+    return () => {
+      window.removeEventListener('blur', handleWindowBlur);
+      window.removeEventListener('focus', handleWindowFocus);
+    };
+  }, [flushDebounce]);
+
   useEffect(() => {
     return () => {
       if (debounceTimerRef.current !== null) {
@@ -136,22 +208,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
     return () => window.removeEventListener('resize', adjustHeight);
   }, [adjustHeight]);
 
-  const flushDebounce = useCallback(
-    (contentToFlush: string, overrides?: Partial<DocumentBlock>) => {
-      if (debounceTimerRef.current !== null) {
-        window.clearTimeout(debounceTimerRef.current);
-        debounceTimerRef.current = null;
-      }
-      const nextBlock: DocumentBlock = {
-        ...latestBlockRef.current,
-        content: contentToFlush,
-        ...overrides,
-      };
-      onUpdateBlock(nextBlock, true);
-    },
-    [onUpdateBlock]
-  );
-
   const filteredSlashCommands = useMemo(() => {
     if (slashSearch === null) return [];
     const q = slashSearch.toLowerCase();
@@ -237,7 +293,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
 
     debounceTimerRef.current = window.setTimeout(() => {
       debounceTimerRef.current = null;
-      onUpdateBlock({
+      onUpdateBlockRef.current({
         ...latestBlockRef.current,
         content: val,
       });
@@ -245,28 +301,34 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   };
 
   const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
-    onFocusBlock(block.id);
-    sendCursorMoved?.(block.id, e.target.selectionStart, e.target.selectionEnd);
+    isFocusedRef.current = true;
+    onFocusBlockRef.current(block.id);
+    sendCursorMovedRef.current?.(block.id, e.target.selectionStart, e.target.selectionEnd);
   };
 
   const handleBlur = () => {
+    isFocusedRef.current = false;
     if (debounceTimerRef.current !== null) {
-      flushDebounce(localContent);
+      window.clearTimeout(debounceTimerRef.current);
+      debounceTimerRef.current = null;
+      flushDebounce(localContentRef.current);
+    } else if (localContentRef.current !== latestBlockRef.current.content) {
+      flushDebounce(localContentRef.current);
     }
-    sendCursorMoved?.(null);
+    sendCursorMovedRef.current?.(null);
   };
 
   const handleClick = (e: React.MouseEvent<HTMLTextAreaElement>) => {
-    sendCursorMoved?.(block.id, e.currentTarget.selectionStart, e.currentTarget.selectionEnd);
+    sendCursorMovedRef.current?.(block.id, e.currentTarget.selectionStart, e.currentTarget.selectionEnd);
   };
 
   const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    sendCursorMoved?.(block.id, e.currentTarget.selectionStart, e.currentTarget.selectionEnd);
+    sendCursorMovedRef.current?.(block.id, e.currentTarget.selectionStart, e.currentTarget.selectionEnd);
   };
 
   const handleSelect = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
     const target = e.currentTarget;
-    sendCursorMoved?.(block.id, target.selectionStart, target.selectionEnd);
+    sendCursorMovedRef.current?.(block.id, target.selectionStart, target.selectionEnd);
   };
 
   const primaryRemoteCursor = activeRemoteCursors.length > 0 ? activeRemoteCursors[0] : null;
@@ -306,7 +368,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
       e.preventDefault();
       e.stopPropagation();
       flushDebounce(localContent);
-      onIndentBlock(block.id, e.shiftKey ? -1 : 1);
+      onIndentBlockRef.current(block.id, e.shiftKey ? -1 : 1);
       return;
     }
 
@@ -316,7 +378,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
       e.stopPropagation();
       setSlashSearch(null);
       flushDebounce(localContent);
-      onCreateBlockBelow(block.id, localContent);
+      onCreateBlockBelowRef.current(block.id, localContent);
       return;
     }
 
@@ -330,7 +392,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
         window.clearTimeout(debounceTimerRef.current);
         debounceTimerRef.current = null;
       }
-      onDeleteBlock(block.id);
+      onDeleteBlockRef.current(block.id);
       return;
     }
 
@@ -340,7 +402,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
       if (el && el.selectionStart === 0 && el.selectionEnd === 0) {
         e.preventDefault();
         flushDebounce(localContent);
-        onNavigateFocus(block.id, 'up');
+        onNavigateFocusRef.current(block.id, 'up');
       }
       return;
     }
@@ -350,7 +412,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
       if (el && el.selectionStart === localContent.length && el.selectionEnd === localContent.length) {
         e.preventDefault();
         flushDebounce(localContent);
-        onNavigateFocus(block.id, 'down');
+        onNavigateFocusRef.current(block.id, 'down');
       }
       return;
     }
@@ -742,7 +804,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
       {canEdit && (
         <button
           type="button"
-          onClick={() => onDeleteBlock(block.id)}
+          onClick={() => onDeleteBlockRef.current(block.id)}
           className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-status-err rounded-btn transition-opacity shrink-0"
           title="Block löschen"
         >
diff --git a/frontend/src/lib/useDocumentSync.ts b/frontend/src/lib/useDocumentSync.ts
index 79fc7ee..b27b57f 100644
--- a/frontend/src/lib/useDocumentSync.ts
+++ b/frontend/src/lib/useDocumentSync.ts
@@ -84,6 +84,13 @@ export function useDocumentSync(
   const onRemoteEventRef = useRef(onRemoteEvent);
   onRemoteEventRef.current = onRemoteEvent;
 
+  const docIdRef = useRef(docId);
+  docIdRef.current = docId;
+  const canEditRef = useRef(canEdit);
+  canEditRef.current = canEdit;
+  const currentUserRef = useRef(currentUser);
+  currentUserRef.current = currentUser;
+
   const reconnectTimerRef = useRef<number | null>(null);
   const fallbackTimerRef = useRef<number | null>(null);
 
@@ -93,6 +100,12 @@ export function useDocumentSync(
     () => getUserColor(currentUser?.id || clientIdRef.current),
     [currentUser?.id]
   );
+  const localUserNameRef = useRef(localUserName);
+  localUserNameRef.current = localUserName;
+  const localUserColorRef = useRef(localUserColor);
+  localUserColorRef.current = localUserColor;
+
+  const pendingMessagesQueueRef = useRef<string[]>([]);
 
   const lastCursorSendRef = useRef<number>(0);
   const pendingCursorTimerRef = useRef<number | null>(null);
@@ -126,9 +139,11 @@ export function useDocumentSync(
     if (!docId) {
       setStatus('offline');
       setRemoteCursors({});
+      pendingMessagesQueueRef.current = [];
       return;
     }
 
+    pendingMessagesQueueRef.current = [];
     let isDisposed = false;
     let retryCount = 0;
     const currentClientId = `cli_${Math.random().toString(36).slice(2, 10)}_${Date.now().toString(36)}`;
@@ -171,6 +186,19 @@ export function useDocumentSync(
         }
         retryCount = 0;
         setStatus('connected');
+
+        // Flush any queued messages buffered while connecting or reconnecting
+        if (pendingMessagesQueueRef.current.length > 0) {
+          const queue = [...pendingMessagesQueueRef.current];
+          pendingMessagesQueueRef.current = [];
+          for (const msg of queue) {
+            try {
+              ws.send(msg);
+            } catch (err) {
+              console.warn('[DocSync] Failed to flush queued message:', err);
+            }
+          }
+        }
       };
 
       ws.onmessage = (event) => {
@@ -281,27 +309,32 @@ export function useDocumentSync(
   const executeSendCursor = useCallback(
     (blockId: string | null, selectionStart?: number, selectionEnd?: number) => {
       const ws = wsRef.current;
-      if (!docId || !ws || ws.readyState !== WebSocket.OPEN) return;
+      const activeDocId = docIdRef.current;
+      if (!activeDocId || !ws || ws.readyState !== WebSocket.OPEN) return;
       const payload: DocSyncEvent = {
         type: 'cursor_moved',
-        docId,
+        docId: activeDocId,
         clientId: clientIdRef.current,
-        userId: currentUser?.id,
-        userName: localUserName,
-        userColor: localUserColor,
+        userId: currentUserRef.current?.id,
+        userName: localUserNameRef.current,
+        userColor: localUserColorRef.current,
         blockId: blockId || undefined,
         selectionStart,
         selectionEnd,
       };
-      ws.send(JSON.stringify(payload));
+      try {
+        ws.send(JSON.stringify(payload));
+      } catch {
+        // Ephemeral cursor, ignore send failure
+      }
       lastCursorSendRef.current = Date.now();
     },
-    [docId, currentUser?.id, localUserName, localUserColor]
+    []
   );
 
   const sendCursorMoved = useCallback(
     (blockId: string | null, selectionStart?: number, selectionEnd?: number) => {
-      if (!docId) return;
+      if (!docIdRef.current) return;
       const now = Date.now();
       const elapsed = now - lastCursorSendRef.current;
 
@@ -340,30 +373,48 @@ export function useDocumentSync(
         }
       }
     },
-    [docId, executeSendCursor]
+    [executeSendCursor]
   );
 
   const sendRawEvent = useCallback(
     (evt: DocSyncEvent, fallbackFn?: () => void) => {
-      if (!docId || !canEdit) return;
+      const activeDocId = docIdRef.current;
+      const activeCanEdit = canEditRef.current;
+      if (!activeDocId || !activeCanEdit) return;
+
       const ws = wsRef.current;
       const payload: DocSyncEvent = {
         ...evt,
-        docId,
+        docId: activeDocId,
         clientId: clientIdRef.current,
       };
+      const jsonStr = JSON.stringify(payload);
+
       if (ws && ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify(payload));
-      } else if (fallbackFn) {
-        if (fallbackTimerRef.current !== null) {
-          window.clearTimeout(fallbackTimerRef.current);
+        try {
+          ws.send(jsonStr);
+        } catch (err) {
+          console.warn('[DocSync] Failed to send WebSocket message, buffering:', err);
+          pendingMessagesQueueRef.current.push(jsonStr);
+        }
+      } else {
+        console.warn(
+          `[DocSync] WebSocket not OPEN (state=${ws ? ws.readyState : 'null'}). Buffering event:`,
+          evt.type
+        );
+        pendingMessagesQueueRef.current.push(jsonStr);
+
+        if (fallbackFn) {
+          if (fallbackTimerRef.current !== null) {
+            window.clearTimeout(fallbackTimerRef.current);
+          }
+          fallbackTimerRef.current = window.setTimeout(() => {
+            fallbackFn();
+          }, 600);
         }
-        fallbackTimerRef.current = window.setTimeout(() => {
-          fallbackFn();
-        }, 600);
       }
     },
-    [docId, canEdit]
+    []
   );
 
   const sendBlockCreated = useCallback(
diff --git a/internal/ws/docroom.go b/internal/ws/docroom.go
index 099e28b..ed923e3 100644
--- a/internal/ws/docroom.go
+++ b/internal/ws/docroom.go
@@ -320,8 +320,10 @@ func (r *DocRoom) HandleEvent(evt DocSyncEvent, sender *DocWSClient) {
 			targetID = evt.Block.ID
 		}
 		if targetID != "" {
+			found := false
 			for i := range r.blocks {
 				if r.blocks[i].ID == targetID {
+					found = true
 					if evt.Block != nil {
 						r.blocks[i].Content = evt.Block.Content
 						r.blocks[i].Level = evt.Block.Level
@@ -359,6 +361,22 @@ func (r *DocRoom) HandleEvent(evt DocSyncEvent, sender *DocWSClient) {
 					break
 				}
 			}
+			if !found && evt.Block != nil {
+				newBlock := *evt.Block
+				newBlock.DocumentID = r.docID
+				if newBlock.Type == "" {
+					newBlock.Type = "text"
+				}
+				if newBlock.Level < 0 {
+					newBlock.Level = 0
+				}
+				r.blocks = append(r.blocks, newBlock)
+				r.blocks = normalizeRoomBlocks(r.docID, r.blocks)
+				bCopy := newBlock
+				evt.Block = &bCopy
+				evt.BlockID = targetID
+				mutated = true
+			}
 		}
 
 	case "block_deleted":
@@ -441,6 +459,11 @@ func (r *DocRoom) HandleEvent(evt DocSyncEvent, sender *DocWSClient) {
 			select {
 			case client.send <- msgBytes:
 			default:
+				slog.Warn("Doc room WS client send buffer full, dropping message",
+					"doc_id", r.docID,
+					"client_id", client.clientID,
+					"user_id", client.userID,
+				)
 			}
 		}
 	}
-- 
2.54.0


From 634195b629eafebdfd94056f380080d49dacd67c Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 22:36:32 +0100
Subject: [PATCH 12/33] style(workspace): align UI styling with ListsView
 (rounded-full avatars, dark canvas borders, unified Radio live badge, unified
 Users share button)

---
 .../src/features/workspace/DocumentEditor.tsx | 142 +++++++++++-------
 .../src/features/workspace/WorkspaceView.tsx  |  15 +-
 2 files changed, 92 insertions(+), 65 deletions(-)

diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
index 1830ab9..2429168 100644
--- a/frontend/src/features/workspace/DocumentEditor.tsx
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -1,12 +1,11 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import {
   Pin,
-  Share2,
+  Users,
   Trash2,
   Download,
   Folder as FolderIcon,
-  Wifi,
-  WifiOff,
+  Radio,
   Loader2,
   ArrowLeft,
   Hash,
@@ -590,16 +589,16 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   return (
     <div className="flex-1 flex flex-col h-full min-h-0 bg-canvas overflow-y-auto">
       {/* Top Document Action Bar */}
-      <div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-2 px-4 sm:px-6 py-2.5 bg-panel border-b border-border shadow-sm">
+      <div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-2 px-4 sm:px-6 py-2 bg-canvas border-b border-border">
         <div className="flex items-center gap-2 min-w-0">
           {onBackMobile && (
             <button
               type="button"
               onClick={onBackMobile}
-              className="lg:hidden p-1.5 rounded-btn text-muted hover:text-main hover:bg-panel-elevated"
+              className="lg:hidden btn-icon"
               title="Zurück zur Seitenleiste"
             >
-              <ArrowLeft className="w-4 h-4" />
+              <ArrowLeft className="w-3.5 h-3.5" />
             </button>
           )}
 
@@ -618,7 +617,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             </button>
 
             {showFolderMenu && canEdit && (
-              <div className="absolute left-0 mt-1 w-52 panel-surface shadow-panel border border-border rounded-card py-1 z-30 max-h-60 overflow-y-auto">
+              <div className="absolute left-0 mt-1 w-52 bg-canvas shadow-panel border border-border rounded-card py-1 z-30 max-h-60 overflow-y-auto">
                 <button
                   type="button"
                   onClick={() => handleMoveToFolder('')}
@@ -654,8 +653,8 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
         </div>
 
         {/* Right Status & Action Buttons */}
-        <div className="flex items-center gap-1">
-          {/* Active Presence Avatars */}
+        <div className="flex items-center gap-1.5">
+          {/* Active Presence Avatars (Immer rund: rounded-full mit Überlappung) */}
           {activeUsers.length > 0 && (
             <div className="flex items-center -space-x-1.5 mr-1" title="Aktive Bearbeiter im Dokument">
               {activeUsers.map((u) => {
@@ -668,13 +667,13 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
                 return (
                   <div key={u.clientId} className="relative group/avatar cursor-default">
                     <div
-                      className="w-5 h-5 rounded-btn flex items-center justify-center text-[9px] font-bold text-white shadow-sm ring-1 ring-panel"
+                      className="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white shadow-sm ring-2 ring-canvas"
                       style={{ backgroundColor: u.userColor }}
                     >
                       {initials}
                     </div>
                     {/* Tooltip */}
-                    <div className="pointer-events-none absolute bottom-full mb-1 left-1/2 -translate-x-1/2 opacity-0 group-hover/avatar:opacity-100 transition-opacity whitespace-nowrap bg-panel-elevated text-main text-[10px] px-1.5 py-0.5 rounded-btn border border-border shadow-md z-30">
+                    <div className="pointer-events-none absolute bottom-full mb-1 left-1/2 -translate-x-1/2 opacity-0 group-hover/avatar:opacity-100 transition-opacity whitespace-nowrap bg-canvas text-main text-[10px] px-1.5 py-0.5 rounded-btn border border-border shadow-md z-30">
                       {u.userName}
                     </div>
                   </div>
@@ -683,80 +682,109 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             </div>
           )}
 
-          {/* Sync Status Badge */}
-          <span
-            className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-btn text-[10px] font-mono font-medium ${
+          {/* Sharing Section (1:1 styling from SharedListsView) */}
+          {doc && (() => {
+            const isOwner = doc.isOwner !== false && (doc.userId === currentUser?.id || !doc.userId || currentUser?.role === 'admin');
+            const sharesCount = doc.sharedWith?.length || 0;
+            const isShared = sharesCount > 0 || !isOwner || Boolean(doc.sharedFolderId);
+            const ownerDisplayName = doc.ownerName || 'Eigentümer';
+
+            return (
+              <div className="flex items-center gap-1.5">
+                {isShared && (
+                  isOwner ? (
+                    <button
+                      type="button"
+                      onClick={() => onOpenShareModal(doc)}
+                      className="px-2 py-0.5 rounded text-[10px] font-semibold bg-accent/15 text-accent border border-accent/30 flex items-center gap-1 hover:bg-accent/25 hover:border-accent/50 transition-colors cursor-pointer"
+                      title="Teilen-Menü öffnen: Geteilt mit Nutzern/Gruppen anzeigen & verwalten"
+                    >
+                      <Users className="w-2.5 h-2.5" />
+                      <span>Geteilt{sharesCount > 0 ? ` (${sharesCount})` : ''}</span>
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={() => onOpenShareModal(doc)}
+                      className="px-2 py-0.5 rounded text-[10px] font-medium border border-border text-muted flex items-center gap-1 bg-surface-subtle hover:bg-panel-elevated hover:text-main transition-colors cursor-pointer"
+                      title="Teilen & Berechtigungen öffnen"
+                    >
+                      <Users className="w-2.5 h-2.5" />
+                      <span>Geteilt von {ownerDisplayName}</span>
+                    </button>
+                  )
+                )}
+
+                <button
+                  type="button"
+                  onClick={() => onOpenShareModal(doc)}
+                  className="btn-icon"
+                  title="Notiz teilen und Berechtigungen"
+                >
+                  <Users className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            );
+          })()}
+
+          {/* Live Sync Status (1:1 styling from SharedListsView) */}
+          <div
+            className={`h-8 w-8 flex items-center justify-center rounded-btn border transition-colors ${
               syncStatus === 'connected'
-                ? 'bg-status-ok/10 text-status-ok border border-status-ok/30'
+                ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
                 : syncStatus === 'connecting' || syncStatus === 'reconnecting'
-                ? 'bg-status-warn/10 text-status-warn border border-status-warn/30'
-                : 'bg-panel-elevated text-muted border border-border'
+                ? 'bg-amber-500/10 border-amber-500/30 text-amber-500'
+                : 'bg-canvas border-border text-muted'
             }`}
             title={
               syncStatus === 'connected'
-                ? 'Echtzeit-Synchronisation aktiv'
-                : 'Verbindung wird hergestellt…'
+                ? 'Live synchronisiert (WebSocket online)'
+                : syncStatus === 'connecting' || syncStatus === 'reconnecting'
+                ? 'Verbindung wird aufgebaut…'
+                : 'Offline'
             }
           >
-            {syncStatus === 'connected' ? (
-              <>
-                <Wifi className="w-2.5 h-2.5" />
-                <span className="hidden sm:inline">LIVE</span>
-              </>
-            ) : syncStatus === 'connecting' || syncStatus === 'reconnecting' ? (
-              <>
-                <Loader2 className="w-2.5 h-2.5 animate-spin" />
-                <span className="hidden sm:inline">SYNC…</span>
-              </>
-            ) : (
-              <>
-                <WifiOff className="w-2.5 h-2.5" />
-                <span className="hidden sm:inline">OFFLINE</span>
-              </>
-            )}
-          </span>
+            <Radio
+              className={`w-3.5 h-3.5 ${
+                syncStatus === 'connected'
+                  ? 'animate-pulse'
+                  : syncStatus === 'connecting' || syncStatus === 'reconnecting'
+                  ? 'animate-spin'
+                  : ''
+              }`}
+            />
+          </div>
 
           <button
             type="button"
             onClick={handleTogglePin}
-            className={`p-1.5 rounded-btn transition-colors ${
+            className={`btn-icon ${
               doc?.isPinned
-                ? 'text-status-warn bg-status-warn/10'
-                : 'text-muted hover:text-main hover:bg-panel-elevated'
+                ? 'text-status-warn bg-status-warn/10 border-status-warn/30'
+                : ''
             }`}
             title={doc?.isPinned ? 'Anheftung lösen' : 'Notiz anheften'}
           >
-            <Pin className="w-4 h-4" />
+            <Pin className="w-3.5 h-3.5" />
           </button>
 
-          {doc && (
-            <button
-              type="button"
-              onClick={() => onOpenShareModal(doc)}
-              className="p-1.5 rounded-btn text-muted hover:text-accent hover:bg-panel-elevated transition-colors"
-              title="Notiz teilen / Berechtigungen"
-            >
-              <Share2 className="w-4 h-4" />
-            </button>
-          )}
-
           <button
             type="button"
             onClick={handleExportMarkdown}
-            className="p-1.5 rounded-btn text-muted hover:text-main hover:bg-panel-elevated transition-colors"
+            className="btn-icon"
             title="Als Markdown (.md) exportieren"
           >
-            <Download className="w-4 h-4" />
+            <Download className="w-3.5 h-3.5" />
           </button>
 
           {canEdit && (doc?.isOwner || doc?.permission === 'owner') && (
             <button
               type="button"
               onClick={() => onDeleteDoc(docId)}
-              className="p-1.5 rounded-btn text-muted hover:text-status-err hover:bg-status-err/10 transition-colors"
+              className="btn-icon-danger"
               title="Notiz löschen"
             >
-              <Trash2 className="w-4 h-4" />
+              <Trash2 className="w-3.5 h-3.5" />
             </button>
           )}
         </div>
@@ -773,7 +801,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             {breadcrumbs.length > 0 && (
               <nav
                 aria-label="Breadcrumb Navigation"
-                className="flex items-center flex-wrap gap-1.5 py-1.5 px-3 bg-panel-elevated/70 border border-border rounded-card text-xs text-muted"
+                className="flex items-center flex-wrap gap-1.5 py-1.5 px-3 bg-canvas border border-border rounded-btn text-xs text-muted"
               >
                 <button
                   type="button"
@@ -918,7 +946,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
                 <button
                   type="button"
                   onClick={() => canEdit && setShowEmojiPicker((prev) => !prev)}
-                  className="w-10 h-10 rounded-btn bg-panel-elevated border border-border hover:border-strong flex items-center justify-center text-xl transition-colors"
+                  className="w-10 h-10 rounded-btn bg-canvas border border-border hover:border-strong flex items-center justify-center text-xl transition-colors"
                   title="Icon ändern"
                 >
                   {doc?.icon || '📝'}
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 14d8423..742df91 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -15,7 +15,6 @@ import {
   Users,
   Plus,
   X,
-  Share2,
   ExternalLink,
   Sparkles,
 } from 'lucide-react';
@@ -514,12 +513,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   }, [activeDocShares, shareModalDoc, shareModalFolder]);
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] panel-surface rounded-card border border-border overflow-hidden shadow-panel">
+    <div className="flex h-[calc(100vh-4rem)] bg-canvas rounded-card border border-border overflow-hidden shadow-panel">
       {/* LEFT MASTER SIDEBAR */}
       <aside
         className={`${
           mobileShowDetail ? 'hidden lg:flex' : 'flex'
-        } w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-panel border-r border-border`}
+        } w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-canvas border-r border-border`}
       >
         {/* Sidebar Header & Actions */}
         <div className="p-3 border-b border-border space-y-2">
@@ -733,9 +732,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                               type="button"
                               onClick={() => openFolderShareModal(sharedFolderObj)}
                               className="p-1 rounded-btn hover:bg-canvas text-accent"
-                              title="Ordner-Freigabe"
+                              title="Ordner teilen und Berechtigungen"
                             >
-                              <Share2 className="w-3 h-3" />
+                              <Users className="w-3 h-3" />
                             </button>
                           )}
                           <button
@@ -916,7 +915,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 {tagDetails?.documents.map((docGroup) => (
                   <div
                     key={docGroup.docId}
-                    className="p-3 rounded-card border border-border bg-panel space-y-1.5"
+                    className="p-3 rounded-card border border-border bg-canvas space-y-1.5"
                   >
                     <button
                       type="button"
@@ -1001,10 +1000,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     return (
                       <div
                         key={folderName}
-                        className="border border-border rounded-card bg-panel overflow-hidden"
+                        className="border border-border rounded-card bg-canvas overflow-hidden"
                       >
                         {/* Folder Header */}
-                        <div className="p-2 bg-panel-elevated border-b border-border flex items-center justify-between">
+                        <div className="p-2 bg-canvas border-b border-border flex items-center justify-between">
                           <div
                             onClick={() => {
                               setCollapsedTodoFolders((prev) => {
-- 
2.54.0


From 1776e8702986bbce54e8452a247c9e9af33c06f6 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 22:41:50 +0100
Subject: [PATCH 13/33] docs: update database schema, websocket protocol,
 workspace outliner spec, flaws backlog, and readme to match current
 architecture

---
 Doku/api/websocket.md     | 101 ++++++++++++++++++++++++--------------
 Doku/database.md          |  57 ++++++++++++---------
 Doku/flaws.md             |  37 +++++---------
 Doku/modules/workspace.md |  76 ++++++++++++++++------------
 README.md                 |  13 ++---
 5 files changed, 160 insertions(+), 124 deletions(-)

diff --git a/Doku/api/websocket.md b/Doku/api/websocket.md
index ba172ba..fb211e6 100644
--- a/Doku/api/websocket.md
+++ b/Doku/api/websocket.md
@@ -66,55 +66,81 @@ Alle WebSocket-Nachrichten werden als JSON mit einheitlicher Hülle übertragen:
 
 ---
 
-## ⚡ 4. CRDT-Echtzeitprotokoll (Yjs Collaborative Editing)
+## ⚡ 4. Granulare Workspace-Echtzeitsynchronisation (`/api/v1/ws/docs/{id}`)
 
-Seit Version 2.1 unterstützt MindSift **echte, konfliktfreie Mehrbenutzer-Kollaboration** für Notizen via Yjs CRDT. Clients tauschen binäre Delta-Updates und Live-Awareness-Informationen über dedizierte WebSocket-Nachrichten aus:
+MindSift nutzt für die Outliner-Synchronisation eine schlanke, hochgradig reaktive In-Memory-Raumarchitektur (`DocRoom` in [`internal/ws/docroom.go`](../../internal/ws/docroom.go)). Clients verbinden sich mit ihrer eindeutigen `clientId`:
 
-### CRDT-Nachrichtentypen
-| Event | Richtung | Zweck / Payload |
+```
+wss://<domain>/api/v1/ws/docs/<docId>?token=<jwt>&clientId=<cli_...>&userName=<Name>&userColor=<Hex>
+```
+
+### 4.1 JSON-Echtzeit-Eventprotokoll
+Die Kommunikation erfolgt über leichtgewichtige JSON-Nachrichten ohne binären CRDT-Overhead:
+
+| Event-Typ | Richtung | Zweck / Payload |
 |---|---|---|
-| `CRDT_JOIN` | Client ➔ Server | Tritt dem Dokumentenraum (`doc:{docId}`) bei. |
-| `CRDT_INIT` | Server ➔ Client | Sendet den aktuellen Basiszustand (`stateBlob`) und offene Delta-Updates (`updates[]`) an den Client. |
-| `CRDT_UPDATE` | Bidirektional | Überträgt inkrementelle binäre Yjs-Updates (Base64-kodiert). Server speichert in `document_crdt_updates` und verteilt an alle anderen Raumnutzer. |
-| `CRDT_COMPACT` | Client ➔ Server | Komprimiert mehrere Updates zu einem konsolidierten Snapshot in `document_crdt_state`. |
-| `CRDT_AWARENESS` | Bidirektional | Überträgt Live-Präsenz (Fokus auf `blockId`, Benutzername, Farbe). |
-| `CRDT_AWARENESS_LEAVE` | Bidirektional | Signalisiert, dass ein Nutzer den Fokus verloren hat oder das Dokument verlassen hat. |
-| `CRDT_LEAVE` | Client ➔ Server | Verlässt den Dokumentenraum explizit. |
+| `doc_state` | Server ➔ Client | Wird direkt beim Verbinden gesendet: Liefert den aktuellen In-Memory-Zustand (`title`, `blocks[]`, `activeCursors[]`). |
+| `block_updated` | Bidirektional | Feingranulare Inhalts- oder Statusänderung eines Blocks (`blockId`, `content`, `level`, `type`, `checked`, `collapsed`). |
+| `block_created` | Bidirektional | Erzeugt einen neuen Block (`block`, `afterBlockId`, `newIndex`). |
+| `block_deleted` | Bidirektional | Löscht einen Block anhand seiner `blockId`. |
+| `block_moved` | Bidirektional | Verschiebt einen Block / Unterbaum (`blockId`, `newIndex`, `level`). |
+| `title_updated` | Bidirektional | Aktualisiert den Dokumententitel (`title`). |
+| `cursor_moved` | Bidirektional | **Ephemere Live-Präsenz & Cursor:** Sendet Benutzer-Avatar, Cursorposition und Textselektion (`clientId`, `userId`, `userName`, `userColor`, `blockId`, `selectionStart`, `selectionEnd`). Wird nicht in SQLite gespeichert! |
+| `client_left` | Server ➔ Client | Wird automatisch ausgelöst, wenn ein Peer die Verbindung trennt, damit Remote-Cursor sofort verschwinden. |
 
 ```mermaid
 sequenceDiagram
     autonumber
-    actor UserA as Benutzer A
-    participant WS as WebSocket Hub & SQLite
-    actor UserB as Benutzer B
+    actor UserA as Admin (Fenster A, cli_1)
+    participant Room as DocRoom (Go RAM)
+    actor UserB as User (Fenster B, cli_2)
+    participant DB as SQLite (blocks, block_tags, documents)
 
-    UserA->>WS: CRDT_JOIN (docId: "doc_123")
-    WS-->>UserA: CRDT_INIT (stateBlob, updates)
-    UserB->>WS: CRDT_JOIN (docId: "doc_123")
-    WS-->>UserB: CRDT_INIT (stateBlob, updates)
+    UserA->>Room: Connect (clientId="cli_1", userName="Admin")
+    Room-->>UserA: doc_state (title, blocks, activeCursors)
+    UserB->>Room: Connect (clientId="cli_2", userName="User")
+    Room-->>UserB: doc_state (title, blocks, activeCursors)
 
-    UserA->>WS: CRDT_UPDATE (docId, updateBlob)
-    WS->>WS: Append in document_crdt_updates
-    WS->>UserB: CRDT_UPDATE (docId, updateBlob)
-    Note over UserB: Yjs wendet Delta atomar an (0 Konflikte)
+    UserA->>Room: block_updated (clientId="cli_1", blockId="b1", content="Neu")
+    Note over Room: Mutiert RAM-Slice & resetet 1.5s Timer
+    Room-->>UserB: block_updated (clientId="cli_1", blockId="b1", content="Neu")
+    Note over UserA: Echo Filter: cli_1 erhält kein Selbstecho!
 
-    UserA->>WS: CRDT_AWARENESS (docId, focusedBlockId)
-    WS->>UserB: CRDT_AWARENESS (docId, user, focusedBlockId)
-    Note over UserB: Avatar-Badge erscheint am Block
+    UserB->>Room: cursor_moved (clientId="cli_2", blockId="b1", selStart=3)
+    Room-->>UserA: cursor_moved (clientId="cli_2", blockId="b1")
+    Note over UserA: Farbiger Cursor-Avatar erscheint an b1
+
+    Note over Room: 1.5s Inaktivität ohne neue Tastenanschläge
+    Room->>DB: Debounce-Flush (blocks, Regex #tags -> block_tags, markdown_cache)
 ```
 
----
+### 4.2 Strikter Echo-Schutz (`clientId`)
+- Jeder Client generiert beim Start einen flüchtigen Schlüssel (`clientIdRef`, z. B. `cli_a8f9_l0z3`).
+- Der Go-Hub filtert beim Broadcasten im Raum alle Clients heraus, deren Verbindung oder `clientId` mit dem Absender übereinstimmt:
+  ```go
+  if evt.ClientID != "" && client.clientID == evt.ClientID {
+      continue
+  }
+  ```
+- **Vorteil:** Verhindert Cursor-Resets, Fokus-Verluste und Race Conditions durch Selbstechos während des lokalen Tippens.
 
-## 🔒 5. Abwärtskompatibles Document-Lease-Locking
-
-Vor Version 2.1 nutzte MindSift ein serverseitiges Lease-Locking mit 30-Sekunden-Heartbeats. Durch die CRDT-Engine wurde die blockierende Bearbeitungssperre (`isLockedByOther`) abgelöst:
-- **Aktuelles Verhalten:** Mehrere Benutzer mit Bearbeitungsrechten können zeitgleich dasselbe Dokument bearbeiten.
-- **Presence & Locks:** Die Events `LOCK_DOC` und `HEARTBEAT_DOC` bleiben abwärtskompatibel erhalten und dienen nun der reinen Präsenzanzeige (z.B. gelber Statusindikator „wird gerade von X angesehen").
-- **Schreibschutz:** Ein echter Schreibschutz (`isReadOnly`) greift ausschließlich noch dann, wenn der Nutzer nur über Leserechte (`permission === 'read'`) für die Notiz oder den Ordner verfügt.
+### 4.3 1.5-Sekunden Debounce-Flush in SQLite
+- Das Tippen im Editor erfolgt latenzfrei direkt im Arbeitsspeicher des `DocRoom`.
+- Sobald 1,5 Sekunden lang keine neuen Tastenanschläge oder Mutationen eintreffen (oder wenn der letzte Client den Raum verlässt), stößt der Raum einen synchronisierten Flush an:
+  1. Persistiert alle Blöcke in `blocks`.
+  2. Extrahiert alle Hashtags (`#tag`) per Regex und aktualisiert `block_tags`.
+  3. Kompiliert die Blockliste (anhand der `level`-Tiefe) in Standard-Markdown und speichert sie in `documents.markdown_cache`.
 
 ---
 
-## 🔄 5. Fallback-Strategie & Proxy-Resilienz (Dual-Transport Architektur)
+## 🔒 5. Berechtigungen & Bearbeitungsrechte
+
+- **Kollaboration ohne blockierende Locks:** Alle Nutzer mit Schreibrechten (`permission === 'owner'` oder `'write'`) können zeitgleich im selben Dokument tippen. Pessimistische Locks oder Lease-Heartbeats wurden vollständig entfernt.
+- **Schreibschutz:** Verfügt ein Nutzer nur über Leserechte (`permission === 'read'`), ist das Eingabefeld gesperrt (`readOnly`). Er kann das Dokument jedoch in Echtzeit mitlesen und sieht die Cursors der Bearbeiter.
+
+---
+
+## 🔄 6. Fallback-Strategie & Proxy-Resilienz (Dual-Transport Architektur)
 
 In restriktiven Firmennetzwerken, hinter Unternehmens-Proxies (z.B. Zscaler, BlueCoat) oder fehlerhaft konfigurierten Reverse-Proxies wird der `Upgrade: websocket`-Header häufig verworfen (`NS_ERROR_CONNECTION_REFUSED`, Code 1006 / 1002 / 1008). 
 
@@ -153,12 +179,11 @@ MindSift löst dieses Problem durch eine **vollwertige Dual-Transport-Architektu
 - Header `X-Accel-Buffering: no` und `Cache-Control: no-cache` verhindern Pufferung im Proxy; periodische Ping-Kommentare (`: ping\n\n`) alle 15 Sekunden halten Timeouts fern.
 - Der Client bleibt dadurch **vollständig echtzeitfähig** (`Live (SSE)`).
 
-### 2. REST-Endpunkte für Upstream-Aktionen im SSE-Modus
+### 2. REST-Endpunkte für Upstream-Aktionen im SSE-Fallback-Modus
 Da SSE unidirektional (Server ➔ Client) ist, stellt MindSift für Schreibvorgänge im SSE-Modus REST-Äquivalente bereit:
-- `PUT /api/v1/documents/:id/crdt`: Unterstützt sowohl volles `state` (Compaction) als auch inkrementelles `update` (Delta). Der Hub persistiert das Update und broadcastet es sofort an alle anderen WS- und SSE-Clients im Dokumentenraum.
-- `POST /api/v1/documents/:id/awareness`: Überträgt Cursor- und Blockfokus-Präsenzen.
-- `DELETE /api/v1/documents/:id/awareness`: Informiert Peers beim Verlassen des Dokuments.
-- `POST /api/v1/events/rooms`: Erlaubt SSE-Clients, Dokument- oder Listenräumen dynamisch beizutreten (`join`) oder sie zu verlassen (`leave`).
+- `PATCH /api/v1/documents/:id/blocks`: Akzeptiert Block-Mutationen (`upserted`, `deletedIds`, `blockOrder`) und synchronisiert den In-Memory-Raum sowie SQLite.
+- `PUT /api/v1/documents/:id`: Aktualisiert Dokumenttitel und Metadaten.
+- `POST /api/v1/events/rooms`: Erlaubt SSE-Clients, Räumen dynamisch beizutreten (`join`) oder sie zu verlassen (`leave`).
 
 ### 3. Verbindungs-Indikator
 - **Grün pulsierend:** Live verbunden über WebSockets (`Live (WebSocket)`).
diff --git a/Doku/database.md b/Doku/database.md
index 3b73140..c2478c1 100644
--- a/Doku/database.md
+++ b/Doku/database.md
@@ -27,7 +27,9 @@ erDiagram
     lists ||--o{ list_items : "enthält"
     lists ||--o{ list_shares : "wird geteilt mit"
 
-    documents ||--o{ document_blocks : "besteht aus"
+    documents ||--o{ blocks : "besteht aus"
+    documents ||--o{ block_tags : "indiziert"
+    blocks ||--o{ block_tags : "verknüpft"
     documents ||--o{ doc_shares : "geteilt mit Benutzern"
     documents ||--o{ doc_team_shares : "geteilt mit Teams"
     documents ||--o{ doc_user_folders : "eigene Platzierung"
@@ -207,45 +209,54 @@ CREATE TABLE IF NOT EXISTS task_list_shares (
 
 ### 2.4 Workspace: Dokumente, Blöcke & Geteilte Ordner
 
-#### `documents` & `document_blocks` (Database-First Outliner)
-Dokumente werden als Kopfdatensatz in `documents` gespeichert, während der Inhalt als feingranulare Blöcke in `document_blocks` verwaltet wird. MindSift speichert alle Notizen zu 100% in SQLite (keine physischen `.md`-Dateien auf Festplatte).
+#### `documents`, `blocks` & `block_tags` (Database-First Outliner Schema)
+Dokumente werden als Kopfdatensatz in `documents` gespeichert, während der Inhalt als feingranulare Blöcke in `blocks` verwaltet wird. Hashtags (#tags) werden per Regex analysiert und in `block_tags` abgelegt. MindSift speichert alle Notizen zu 100% in SQLite (keine physischen `.md`-Dateien auf Festplatte).
 
 ```sql
 CREATE TABLE IF NOT EXISTS documents (
     id TEXT PRIMARY KEY,                       -- Präfix "doc_..."
-    user_id TEXT NOT NULL,                     -- Eigentümer
-    title TEXT NOT NULL,                       -- Dokumenttitel
+    user_id TEXT NOT NULL DEFAULT '',          -- Eigentümer (usr_...)
+    space_id TEXT DEFAULT '',
+    title TEXT NOT NULL DEFAULT '',            -- Dokumenttitel
+    folder_id TEXT NOT NULL DEFAULT '',        -- Ordner-Zuordnung
+    markdown_cache TEXT NOT NULL DEFAULT '',   -- Kompiliertes Standard-Markdown (automatischer Cache)
     icon TEXT NOT NULL DEFAULT '📄',           -- Emoji-Icon
-    content TEXT NOT NULL DEFAULT '',          -- Plaintext / Text-Repräsentation (Cache)
-    blocks_json TEXT NOT NULL DEFAULT '[]',    -- Legacy JSON-Cache
+    content TEXT NOT NULL DEFAULT '',          -- Plaintext / Text-Repräsentation
+    blocks_json TEXT NOT NULL DEFAULT '[]',    -- Legacy/Zusatz-Cache
     tags TEXT NOT NULL DEFAULT '[]',           -- JSON Array von Tags
     folder_path TEXT NOT NULL DEFAULT '',      -- Relativer Ordnerpfad des Eigentümers
-    shared_folder_id TEXT NOT NULL DEFAULT '', -- ID aus workspace_shared_folders (wenn in geteiltem Ordner)
-    sub_folder_path TEXT NOT NULL DEFAULT '',  -- Relativer Unterordnerpfad innerhalb des geteilten Ordners
     is_pinned INTEGER NOT NULL DEFAULT 0,      -- Globaler Pin
     is_archived INTEGER NOT NULL DEFAULT 0,
-    created_at TEXT NOT NULL,
-    updated_at TEXT NOT NULL,
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
     FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
 );
 CREATE INDEX IF NOT EXISTS idx_documents_user ON documents(user_id, is_archived, updated_at DESC);
-CREATE INDEX IF NOT EXISTS idx_documents_shared_folder ON documents(shared_folder_id);
 
-CREATE TABLE IF NOT EXISTS document_blocks (
-    id TEXT PRIMARY KEY,                       -- Präfix "blk_..."
-    doc_id TEXT NOT NULL,
-    sort_order REAL NOT NULL DEFAULT 0,        -- Fließkommazahl für konfliktfreies Einfügen
-    type TEXT NOT NULL DEFAULT 'bullet',       -- 'bullet', 'todo', 'h1', 'h2', 'h3', 'code', 'quote', 'callout', 'divider'
+CREATE TABLE IF NOT EXISTS blocks (
+    id TEXT PRIMARY KEY,                       -- Block-ID (z.B. "blk_..." oder "docId-b0")
+    document_id TEXT NOT NULL,                 -- Zugehöriges Dokument (doc_...)
     content TEXT NOT NULL DEFAULT '',          -- Textinhalt des Blocks
-    level INTEGER NOT NULL DEFAULT 0,          -- Hierarchieebene (0 = Root, 1 = Kind...)
+    level INT NOT NULL DEFAULT 0,              -- Hierarchieebene (0 = Root, 1 = Kind...)
+    position REAL NOT NULL DEFAULT 0,          -- Fließkommazahl für konfliktfreies Einfügen/Sortieren
+    type TEXT NOT NULL DEFAULT 'bullet',       -- 'bullet', 'todo', 'h1', 'h2', 'h3', 'code', 'quote', 'callout', 'divider'
     checked INTEGER NOT NULL DEFAULT 0,        -- Für Checklisten (0 = offen, 1 = abgehakt)
-    collapsed INTEGER NOT NULL DEFAULT 0,      -- Für eingeklappte Unterbäume
+    collapsed INTEGER NOT NULL DEFAULT 0,      -- Für eingeklappte Unterbäume (1 = zugeklappt)
     lang TEXT NOT NULL DEFAULT '',             -- Programmiersprache für Codeblöcke
-    updated_at TEXT NOT NULL,
-    updated_by TEXT NOT NULL DEFAULT '',
-    FOREIGN KEY(doc_id) REFERENCES documents(id) ON DELETE CASCADE
+    FOREIGN KEY(document_id) REFERENCES documents(id) ON DELETE CASCADE
 );
-CREATE INDEX IF NOT EXISTS idx_document_blocks_doc_order ON document_blocks(doc_id, sort_order);
+CREATE INDEX IF NOT EXISTS idx_blocks_doc_pos ON blocks(document_id, position ASC);
+
+CREATE TABLE IF NOT EXISTS block_tags (
+    tag TEXT NOT NULL,                         -- Hashtag (z.B. "meeting", ohne führendes '#')
+    document_id TEXT NOT NULL,                 -- Zugehöriges Dokument
+    block_id TEXT NOT NULL,                    -- Zugehöriger Block
+    PRIMARY KEY(tag, block_id),
+    FOREIGN KEY(document_id) REFERENCES documents(id) ON DELETE CASCADE,
+    FOREIGN KEY(block_id) REFERENCES blocks(id) ON DELETE CASCADE
+);
+CREATE INDEX IF NOT EXISTS idx_block_tags_tag ON block_tags(tag);
+CREATE INDEX IF NOT EXISTS idx_block_tags_doc ON block_tags(document_id);
 ```
 
 #### Entkoppelte Ordner-Freigabe (`workspace_shared_folders` & `workspace_folder_mounts`)
diff --git a/Doku/flaws.md b/Doku/flaws.md
index b00cb7e..f3eaf7b 100644
--- a/Doku/flaws.md
+++ b/Doku/flaws.md
@@ -8,7 +8,7 @@ Diese Datei dokumentiert eine ehrliche und schonungslose technische Analyse alle
 
 | ID | Bereich | Problem / Schwachstelle | Schweregrad | Risiko im Produktivbetrieb |
 |---|---|---|---|---|
-| **FLAW-01** | Workspace Sync | Kein echtes CRDT/OT – Lock-Heartbeat-Modell mit Last-Write-Wins | **Gelöst (v2.1)** | Behoben durch Yjs CRDT-Engine & blockbasierte kollaborative Bearbeitung |
+| **FLAW-01** | Workspace Sync | Blockierende Locks / Synchronisations-Konflikte | **Gelöst (v2.2)** | Behoben durch In-Memory DocRooms, Echo-Schutz per `clientId` und 1.5s Debounce-Flush |
 | **FLAW-02** | Storage | Dual-Storage Drift (SQLite vs. Dateisystem) | **Obsolet / Gelöst** | Kein Risiko: MindSift nutzt Pure-DB (keine `.md`-Dateien auf Platte) |
 | **FLAW-03** | Netzwerk / WS | Proxy-Inkompatibilität bei WebSocket-Upgrades & Polling-Fallback | **Gelöst (v2.2)** | Behoben durch Dual-Transport SSE-Fallback & globale Singleton-Verbindung |
 | **FLAW-04** | Datenbank / Suche | Volltextsuche via `LIKE '%query%'` statt SQLite FTS5 | **Mittel** | Performance-Einbrüche bei wachsenden Notizbeständen (>10.000 Blöcke) |
@@ -16,25 +16,22 @@ Diese Datei dokumentiert eine ehrliche und schonungslose technische Analyse alle
 | **FLAW-06** | SQLite Concurrency | Single-Writer-Bottleneck bei hohem parallelem Schreibaufkommen | **Mittel** | `SQLITE_BUSY` Fehler bei vielen gleichzeitigen Team-Nutzern |
 | **FLAW-07** | Benachrichtigungen | Fehlende Dead-Letter-Queue für Webhook- & E-Mail-Alarme | **Niedrig** | Verlorene Benachrichtigungen bei temporärem Ausfall von Drittsystemen |
 | **FLAW-08** | Sicherheit / Auth | Statische JWT-Tokens ohne rotierende Refresh-Tokens & Blacklisting | **Niedrig** | Keine sofortige Sitzungsinvalidierung bei Rechteentzug |
-| **FLAW-09** | Outliner UX | Kein hierarchischer Undo/Redo-Stack für Strukturmutationen | **Mittel** | Versehentliches Löschen/Einrücken von Blöcken nicht per `Ctrl+Z` rückgängig machbar |
 
 ---
 
 ## 🔍 Detaillierte Analyse & Maßnahmen
 
-### FLAW-01: [GELÖST / IMPLEMENTIERT] Yjs Outliner CRDT & Multi-User Kollaboration
-- **Status:** **Gelöst via Yjs CRDT Engine (Lösung i)**
-- **Betroffene Komponenten:** [`api/websocket.md`](./api/websocket.md), [`modules/workspace.md`](./modules/workspace.md), `internal/ws/hub.go`, `internal/storage/sqlite.go`, `frontend/src/lib/crdt.ts`, `frontend/src/features/workspace/WorkspaceView.tsx`
-- **Ursache (Historisch):** MindSift nutzte ein kooperatives Dokumenten-Lease-Locking mit Last-Write-Wins. Bei parallelem Zugriff oder Netztrennung konnten Änderungen überschrieben werden.
-- **Implementierte Lösung (Yjs CRDT):**
-  1. **Block-Level Yjs CRDT:** Implementierung eines vollwertigen CRDT-Modells mit `Y.Doc`. Die Blockreihenfolge wird über ein `Y.Array<string>` (Block-IDs) konfliktfrei mit dem YATA-Algorithmus aufgelöst. Inhalte und Metadaten sind in `Y.Map` gekapselt.
-  2. **Vollständige Eliminierung des Lock-Managers:** Alle pessimistischen Dokumentensperren (`isLockedByOther`, Lease-Heartbeats, 423 Locked) wurden restlos entfernt. Mehrere Nutzer können zeitgleich an denselben Absätzen und Blöcken arbeiten.
-  3. **Proxy-Resiliente Dual-Transport-Architektur:**
-     - **Primary:** Gorilla WebSocket (`/api/v1/ws/docs/:id`) mit binärer Übertragung.
-     - **Fallback:** 4-Sekunden-Watchdog schaltet bei blockiertem WebSocket-Upgrade automatisch auf HTTP-Transport um: Downstream via Server-Sent Events (`GET /api/v1/sync/docs/:id/stream`) und Upstream via HTTP POST (`POST /api/v1/sync/docs/:id/update`).
-  4. **Offline-First via IndexedDB:** Lokale Eingaben landen sofort und unterbrechungsfrei in `y-indexeddb`. Daten gehen auch bei Netzwerkabbrüchen nicht verloren.
-  5. **Asynchroner DocRoom-Hub & Debounced SQLite-Persistenz:** In-Memory `DocRoom` pro aktivem Dokument; SQLite-Schreibvorgänge laufen debounced (2.5 Sekunden Inaktivität oder Raum-Austritt) rein asynchron im Hintergrund, ohne API-Threads oder Tastenschläge zu blockieren.
-  6. **UI Status-Indikator:** Dezent im Header visualisiert: Grün ("Live (WebSocket)"), Gelb ("Eingeschränkt (HTTP-Proxy-Modus)") und Grau ("Offline (Lokal gesichert)").
+### FLAW-01: [GELÖST / IMPLEMENTIERT] Granulare Outliner-Synchronisation & Multi-User Kollaboration
+- **Status:** **Gelöst via In-Memory DocRooms, Echo-Schutz & Debounced Persistence**
+- **Betroffene Komponenten:** [`api/websocket.md`](./api/websocket.md), [`modules/workspace.md`](./modules/workspace.md), `internal/ws/docroom.go`, `internal/storage/sqlite.go`, `frontend/src/lib/useDocumentSync.ts`, `frontend/src/features/workspace/OutlinerBlock.tsx`
+- **Ursache (Historisch):** MindSift nutzte früher pessimistisches Dokumentensperren (Lease-Locks mit Heartbeats). Bei parallelem Bearbeiten blockierten sich Nutzer gegenseitig; unausgereifte Sync-Versuche führten zu Selbstechos und Cursor-Jumps.
+- **Implementierte Lösung:**
+  1. **In-Memory DocRooms:** Granularer WebSocket-Raum pro Dokument (`/api/v1/ws/docs/:id`) mit Mutex-geschütztem Block-State im Go-Backend.
+  2. **Strikter Echo-Schutz per `clientId`:** Jede Verbindung besitzt eine eindeutige `clientId`. Der Hub filtert den Sender heraus und leitet Events nur an Peers weiter.
+  3. **Live Presence & Ephemere Cursors:** Cursorposition und Textselektionen (`cursor_moved`) werden flüchtig an Peers gestreamt, ohne SQLite zu belasten.
+  4. **Fokus- & Eingabeschutz (`OutlinerBlock.tsx`):** Remote-Updates werden nur blockiert, wenn `document.hasFocus()` vorliegt. Bei `window.onblur` und `input.onblur` wird sofort (0ms) geflusht; Callbacks werden über `useRef` geführt (keine Stale Closures).
+  5. **1.5s Inaktivitäts-Debounce-Flush:** Nach 1,5s Inaktivität sichert der Raum persistent in SQLite (`blocks`, Regex `#tags` in `block_tags` und kompiliertes Markdown in `documents.markdown_cache`).
+  6. **Vollständige Eliminierung von Locks:** Alle blockierenden Sperren wurden restlos entfernt. Mehrere Nutzer können zeitgleich schreiben.
 
 ---
 
@@ -125,16 +122,6 @@ Diese Datei dokumentiert eine ehrliche und schonungslose technische Analyse alle
 
 ---
 
-### FLAW-09: Kein hierarchischer Undo/Redo-Stack im Outliner
-- **Betroffene Komponenten:** [`modules/workspace.md`](./modules/workspace.md), `frontend/src/features/workspace/WorkspaceView.tsx`
-- **Ursache:** Standardmäßiges Browser-`Ctrl+Z` funktioniert nur innerhalb eines einzelnen aktiven Textfelds (`contenteditable` / Textarea). Strukturelle Aktionen – wie das Verschieben von Blöcken via Drag & Drop, Einrücken (`Tab`), Ausrücken (`Shift+Tab`) oder das Löschen ganzer Unterbäume – sind im Standard-Browser-Undo-Stack nicht enthalten.
-- **Folgen:** Verschiebt ein Nutzer versehentlich einen Block samt 10 Unterpunkten, kann dies nicht mit `Ctrl+Z` rückgängig gemacht werden.
-- **Empfohlene Lösung:**
-  1. Implementierung eines expliziten In-Memory Command-Stacks im Frontend (Command-Pattern: `execute()` / `undo()`).
-  2. Aufzeichnung aller Block-Mutationen (Insert, Indent, Move, Delete) mit Revert-Payloads.
-
----
-
 ## 🧭 Verwandte Dokumente
 - 🏗️ [Gesamtarchitektur](architecture.md)
 - 💾 [Datenbank-Design & Tabellenschemata](database.md)
diff --git a/Doku/modules/workspace.md b/Doku/modules/workspace.md
index be55f6a..a0d93f7 100644
--- a/Doku/modules/workspace.md
+++ b/Doku/modules/workspace.md
@@ -1,12 +1,12 @@
 # 📝 Kernmodul 3: Workspace Outliner-Engine, Wiki-Links & Pure-DB Storage
 
-Der MindSift Workspace ([`WorkspaceView.tsx`](../../frontend/src/features/workspace/WorkspaceView.tsx)) kombiniert ein **hierarchisches Bullet-Point Notizsystem (inspiriert von Logseq)** mit einem **persönlichen Wiki** und einem **globalen To-Do Rollup Dashboard**.
+Der MindSift Workspace ([`WorkspaceView.tsx`](../../frontend/src/features/workspace/WorkspaceView.tsx)) kombiniert ein **hierarchisches Bullet-Point Notizsystem (inspiriert von Logseq)** mit einem **persönlichen Wiki**, **Live-Kollaboration** und einem **globalen To-Do Rollup Dashboard**.
 
 ---
 
 ## 🌳 1. Die Logseq-Outliner-Engine
 
-Im Gegensatz zu klassischen Fließtext-Editoren basiert der MindSift Workspace auf **Blöcken** (`document_blocks` in SQLite). Jeder Block ist ein gedanklicher Knotenpunkt mit einer flexiblen Einrückungsebene (`level: 0, 1, 2, ...`).
+Im Gegensatz zu klassischen Fließtext-Editoren basiert der MindSift Workspace auf einer **flachen, relationalen Liste von Blöcken** (`blocks`-Tabelle in SQLite). Jeder Block ist ein gedanklicher Knotenpunkt mit einer flexiblen Einrückungsebene (`level: 0, 1, 2, ...`) und einer fortlaufenden Fließkommaposition (`position`):
 
 ```
 • Projekt MindSift v2.0 (level 0)
@@ -22,12 +22,20 @@ Im Gegensatz zu klassischen Fließtext-Editoren basiert der MindSift Workspace a
 - `Tab`: Rückt den aktuellen Block ein (wird Kindknoten des vorherigen Blocks).
 - `Shift + Tab`: Rückt den Block um eine Ebene aus (verringert die Tiefe).
 - `Shift + Enter`: Weicher Zeilenumbruch innerhalb desselben Blocks (z.B. für mehrzeilige Notizen oder Code).
-- `Backspace` (auf leerem Block): Rückt den Block aus oder löscht ihn, wenn er auf Level 0 ist.
-- `/` (Slash-Commands): Öffnet das Umwandlungsmenü (`/todo`, `/h1`, `/h2`, `/h3`, `/code`, `/callout`, `/quote`, `/divider`).
+- `Backspace` (auf leerem Block): Löscht den Block sofort. Das Ausrücken erfolgt strikt und kontrolliert über `Shift + Tab`.
+- `/` (Slash-Commands): Öffnet das Umwandlungsmenü (`/todo`, `/link`, `/h1`, `/h2`, `/h3`, `/code`, `/callout`, `/quote`, `/divider`).
+- **Markdown-Tastatur-Kürzel:** Tippen von `[] ` oder `[ ] ` wandelt den Block sofort in ein Todo um; `# `, `## `, `### ` erzeugt Überschriften.
+
+### Eingabestabilität & Zombie-Fokus-Schutz (`OutlinerBlock.tsx`)
+1. **Echter Fokus-Check:** Remote-Updates (`block_updated`) werden nur dann abgewehrt, wenn der Block tatsächlich aktiv im Betriebssystem editiert wird:
+   `isFocusedRef.current === true && document.hasFocus()`.
+2. **Sofort-Flush bei Fensterwechsel:** Sobald das Browser-Fenster den Fokus verliert (`window.addEventListener('blur', ...)`), wird ein offener 150ms-Debounce sofort gecancelt und der Text augenblicklich per WebSocket übertragen.
+3. **Stale Closures eliminiert:** Alle Callbacks werden in `useRef` gehalten, sodass asynchrone Debounce-Timer garantiert die aktuellste Komponenten-Referenz verwenden.
 
 ### Zoom-In Hoisting (Fokus-Modus)
-Klickt der Benutzer auf den Bullet-Dot (`•`) eines Blocks, blendet der Editor alle übergeordneten und benachbarten Blöcke aus und zoomt **ausschließlich in diesen Ast** hinein. 
-- Eine dezente Breadcrumb-Leiste oben zeigt den Pfad an (z.B. `Workspace / Projekte / MindSift / Architektur`).
+Klickt der Benutzer auf den Bullet-Dot (`•`) eines Blocks, blendet der Editor alle übergeordneten und benachbarten Blöcke aus und zoomt **ausschließlich in diesen Ast** hinein:
+- Der gewählte Punkt wird zur prominenten Überschrift im Fokus-Modus.
+- Eine klickbare Breadcrumb-Leiste oben zeigt den Pfad an (z.B. `Workspace / Projekte / MindSift / Architektur`).
 - Ein Klick auf ein beliebiges Breadcrumb-Element zoomt sofort auf die jeweilige Ebene zurück.
 
 ### Drag & Drop von Blöcken
@@ -35,51 +43,55 @@ Der Bullet-Dot dient gleichzeitig als Drag-Anfasser. Wird ein Block verschoben,
 
 ---
 
-## 🔗 2. Wiki-Links (`[[Link]]`) & Hashtags
+## 🔗 2. Wiki-Links (`[[Link]]`), Web-Links (`/link`) & Hashtags
 
 1. **Interne Wiki-Links:**
-   - Text in doppelten eckigen Klammern (z.B. `[[Reiseplanung 2026]]`) wird automatisch als klickbarer Link gerendert.
-   - Ein Klick darauf durchsucht die Notizen des Benutzers und öffnet das Ziel-Dokument direkt im Editor.
-2. **Hashtags (`#tag`):**
-   - Hashtags im Fließtext werden automatisch indiziert (`doc_block_tags`-Tabelle).
+   - Text in doppelten eckigen Klammern (z.B. `[[Reiseplanung 2026]]`) wird automatisch als klickbare Notiz-Pille gerendert.
+   - Klick darauf öffnet die verknüpfte Notiz direkt im Editor.
+2. **Slash-Befehl `/link` & Link-Modal:**
+   - `/link` öffnet ein Modal mit zwei Modi:
+     - **Notiz verknüpfen:** Durchsucht bestehende Notizen und fügt `[[Titel]]` ein.
+     - **Web-Link:** Eingabe von Titel und URL, fügt Standard-Markdown `[Titel](url)` ein.
+3. **Hashtags (`#tag`):**
+   - Hashtags im Fließtext werden automatisch indiziert (`block_tags`-Tabelle).
    - In der linken Leiste listet der Tag-Explorer alle verwendeten Schlagworte auf. Klick auf ein Tag filtert alle Dokumente und Blöcke, die dieses Tag enthalten.
 
 ---
 
----
+## ⚡ 3. Echtzeit-Kollaboration & Automatische Markdown-Kompilierung
 
-## ⚡ 3. Yjs CRDT Real-Time Engine & Dual-Persistence
-
-Ab MindSift v2.1 setzt der Workspace auf ein **konfliktfreies Replicated Data Type (CRDT) Modell** auf Basis von [Yjs](https://yjs.dev/):
+MindSift setzt auf eine latenzfreie In-Memory Kollaborations-Architektur ([`internal/ws/docroom.go`](../../internal/ws/docroom.go)):
 
 ### Funktionsweise
-1. **CRDT-Struktur im Client:**
-   - Ein `Y.Doc` pro geöffnetem Dokument.
-   - `Y.Array<string>` (`blocks`): Führt die Block-IDs in korrekter Reihenfolge. Der YATA-Algorithmus garantiert, dass simultanes Einfügen, Verschieben oder Löschen von Blöcken durch mehrere Nutzer deterministisch und konfliktfrei konvergiert.
-   - `Y.Map` (`block:<id>`): Speichert Inhalt (`content`), Einrückung (`level`), Erledigungsstatus (`checked`) und Faltungsstatus (`collapsed`).
-2. **Kollaborative Bearbeitung ohne Sperren:**
-   - Nutzer können simultan dieselbe Notiz bearbeiten.
-   - Fokus- und Cursor-Positionen werden via `CRDT_AWARENESS` übertragen und als farbige Benutzer-Pillen direkt am jeweiligen Block visualisiert.
+1. **In-Memory DocRoom pro geöffnetem Dokument:**
+   - Hält den synchronen Zustand von `title` und `blocks[]` im RAM.
+   - Granulare Mutations-Events (`block_updated`, `block_created`, `block_deleted`, `block_moved`, `title_updated`).
+   - Ephemeres Presence-Tracking (`cursor_moved`, `client_left`) zeigt farbige Benutzer-Avatare im Header und Cursors am aktiven Block an.
+2. **Echo-Schutz:**
+   - Jeder Client identifiziert sich mit einer eindeutigen `clientId`.
+   - Der Server sendet Mutations-Events ausschließlich an andere Clients im selben Raum (`clientId != senderClientId`), um Cursor-Springen und Selbstechos zu verhindern.
 
-### Dual-Persistence in SQLite
+### Automatische Markdown-Kompilierung & SQLite Debounce-Flush
 ```
-Client (Y.Doc Mutation)
+Eingabe im OutlinerBlock
         │
-        ├──▶ WebSocket (CRDT_UPDATE Base64 Delta)
+        ├──▶ WebSocket (block_updated Event)
         │         │
         │         ▼
-        │    SQLite: document_crdt_updates / document_crdt_state
-        │    (Mathematisch exakte CRDT-Konvergenz)
+        │    Go DocRoom: In-Memory Mutation & Broadcast an Peers
         │
-        └──▶ Periodischer Snapshot / Flush
+        └──▶ 1.5s Inaktivitäts-Debounce (oder Raum-Exit)
                   │
                   ▼
-             SQLite: document_blocks
-             (Relationale Indizes für Global To-Dos, Tag-Explorer & FTS)
+             SQLite Transaktion:
+             1. Persistiert Blöcke in `blocks`
+             2. Regex-Extraktion von #tags in `block_tags`
+             3. Kompiliert Block-Hierarchie zu Standard-Markdown
+                und speichert Cache in `documents.markdown_cache`
 ```
 
-1. **Mathematische CRDT-Garantie:** Binäre Yjs-Updates werden in `document_crdt_updates` und periodisch als Snapshot in `document_crdt_state` gesichert. Auch nach einem Server-Neustart oder Offline-Phasen konvergieren alle Clients verlustfrei.
-2. **Relationale Query-Fähigkeit:** Um schnelle SQL-Abfragen für das globale To-Do Rollup Dashboard und Hashtags zu ermöglichen, werden die Blöcke parallel in `document_blocks` materialisiert. Es existieren **keine Markdown-Dateien auf der Festplatte**.
+1. **Kompiliertes Markdown:** Jeder Block wird gemäß seiner `level`-Tiefe mit 2 Leerzeichen pro Einrückungsebene als sauberes Markdown formatiert (`documents.markdown_cache`).
+2. **Pure Database Architecture:** Alle Daten liegen transaktional und sicher in SQLite. Es werden keine unkontrollierten Dateien auf der Festplatte abgelegt; Notizen können jederzeit per Klick als `.md`-Datei exportiert werden.
 
 ---
 
diff --git a/README.md b/README.md
index 9ce2f6d..8ef9705 100644
--- a/README.md
+++ b/README.md
@@ -74,13 +74,14 @@ Der MindSift-Workspace vereint die Übersicht eines klassischen Dokumenten-Explo
   * Verschiebe Absätze und ganze Gedankenbäume mühelos mit der Maus.
   * **Unterpunkte per Drop erstellen:** Ziehst du einen Bullet-Point direkt auf einen anderen Aufzählungspunkt, wird er automatisch als Unter-Bullet eingerückt. Eingeklappte Eltern-Punkte klappen beim Hineinlegen automatisch auf.
   * Untergeordnete Unterpunkte werden beim Ziehen automatisch als zusammenhängender Ast mitbewegt.
-* **Echtzeit-Schreib-Lock (Kollisionsschutz):**
-  * Sobald du einen Bullet-Point per Drag & Drop greifst oder anfängst zu tippen, wird sofort ein Schreib-Lock für das Dokument aktiviert.
-  * Andere Nutzer sehen live, wer das Dokument gerade bearbeitet, und Kollisionen bei gleichzeitigen Änderungen werden zuverlässig verhindert.
-* **Slash-Befehle (`/`):** Tippe einfach `/` für `/todo`, `/h1`, `/h2`, `/h3`, `/code`, `/callout` oder `/divider`.
+* **Live-Kollaboration & Presence-Tracking:**
+  * Gleichzeitiges, latenzfreies Bearbeiten von Dokumenten im Team ohne blockierende Sperren.
+  * Farbige Avatare im Header und Live-Cursors am aktiven Block visualisieren genau, wer gerade wo tippt.
+  * Strikter Echo-Schutz verhindert Cursor-Springen und Flackern beim Tippen.
+* **Slash-Befehle (`/`):** Tippe einfach `/` für `/todo`, `/link` (Notizen & Web-Links verknüpfen), `/h1`, `/h2`, `/h3`, `/code`, `/callout`, `/quote` oder `/divider`.
 * **Vernetzung & Hashtags:** Verlinke Notizen untereinander mit Wiki-Links (`[[Notiztitel]]`) und tagge Gedanken mit `#Hashtags`.
 * **Explorer mit Ordnern & Favoriten:** Organisiere Dokumente hierarchisch in Ordnern, verschiebe Notizen per Drag & Drop und hefte deine wichtigsten Dokumente als Favoriten ganz oben an.
-* **100 % Standard-Markdown:** Jedes Dokument wird lokal unter `./data/workspace/...` als saubere `.md`-Datei mit 2-Leerzeichen-Einrückung abgelegt – jederzeit lesbar und kompatibel mit Obsidian, Logseq oder VS Code.
+* **100 % Pure-DB & Markdown-Export:** Alle Notizen und Blöcke werden transaktional und sicher in SQLite gespeichert. Beim Speichern wird automatisch ein sauberer Markdown-Cache generiert, und Dokumente können jederzeit mit einem Klick als `.md`-Datei exportiert werden.
 
 ---
 
@@ -226,7 +227,7 @@ MindSift erkennt den Erststart automatisch und führt dich durch den Einrichtung
 ## 🔒 Deine Daten gehören dir
 
 * **100 % Self-Hosted:** Keine fremden Cloud-Dienste, keine Telemetrie, kein Tracking.
-* **Kein Vendor-Lock-in:** Alle Notizen liegen als lesbare `.md`-Dateien im Ordner `./data/workspace`. Backups können jederzeit exportiert werden.
+* **Kein Vendor-Lock-in:** Alle Notizen liegen als relationale Daten in SQLite und werden automatisch als Standard-Markdown kompiliert. Dokumente lassen sich jederzeit mit einem Klick als `.md`-Datei exportieren oder als SQLite-Dump sichern.
 
 ---
 
-- 
2.54.0


From 6c1898d489cd3acb37af12351ff3d4174691844d Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 22:53:51 +0100
Subject: [PATCH 14/33] feat(workspace): decouple folder sharing with
 independent mount points & real-time sync

---
 .../src/features/workspace/WorkspaceView.tsx  |  46 +++--
 internal/api/server.go                        |  10 ++
 internal/api/server_test.go                   | 162 ++++++++++++++++++
 internal/storage/sqlite.go                    |  18 ++
 internal/ws/hub.go                            |   2 +
 5 files changed, 225 insertions(+), 13 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 742df91..454c095 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -131,7 +131,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             created.sharedWith?.some(
               (s) => s.userId === currentUser.id || s.targetId === currentUser.id
             ) || false;
-          if (!isOwner && !isShared) {
+          const isFolderShared = Boolean(created.sharedFolderId || created.isSharedFolder);
+          if (!isOwner && !isShared && !isFolderShared) {
             return;
           }
         }
@@ -146,6 +147,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       } else if (msg.event === 'WORKSPACE_FOLDERS_UPDATED') {
         api.getFolders().then(setFolders).catch(() => {});
         api.getSharedFolders().then(setSharedFolders).catch(() => {});
+        api.getDocuments().then(setDocs).catch(() => {});
       }
     });
     return unsub;
@@ -403,6 +405,24 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     }
   }, []);
 
+  const handleShareFolderClick = useCallback(
+    async (folderPath: string, existingSf?: SharedFolder) => {
+      if (existingSf) {
+        openFolderShareModal(existingSf);
+        return;
+      }
+      try {
+        const clean = folderPath.trim().replace(/^\/+|\/+$/g, '');
+        const sf = await api.createSharedFolder({ name: clean, mountPath: clean });
+        setSharedFolders((prev) => [...prev.filter((f) => f.id !== sf.id), sf]);
+        openFolderShareModal(sf);
+      } catch {
+        // ignore
+      }
+    },
+    [openFolderShareModal]
+  );
+
   const handleToggleRollupTodo = async (doc: Document, blockId: string, currentChecked: boolean) => {
     triggerHaptic(10);
     const updatedBlocks = (doc.blocks || []).map((b) =>
@@ -599,8 +619,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
         {/* Scrollable Navigation Tree */}
         <div className="flex-1 overflow-y-auto p-2 space-y-3">
-          {/* Drop target for moving docs to root */}
-          {draggingDocId && (
+          {/* Drop target for moving docs or folders to root */}
+          {(draggingDocId || draggingFolderPath) && (
             <div
               onDragOver={(e) => {
                 e.preventDefault();
@@ -727,16 +747,16 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                           >
                             <Plus className="w-3 h-3" />
                           </button>
-                          {sharedFolderObj && (
-                            <button
-                              type="button"
-                              onClick={() => openFolderShareModal(sharedFolderObj)}
-                              className="p-1 rounded-btn hover:bg-canvas text-accent"
-                              title="Ordner teilen und Berechtigungen"
-                            >
-                              <Users className="w-3 h-3" />
-                            </button>
-                          )}
+                          <button
+                            type="button"
+                            onClick={() => handleShareFolderClick(folderPath, sharedFolderObj)}
+                            className={`p-1 rounded-btn hover:bg-canvas ${
+                              sharedFolderObj ? 'text-accent' : 'text-faint hover:text-accent'
+                            }`}
+                            title="Ordner teilen und Berechtigungen"
+                          >
+                            <Users className="w-3 h-3" />
+                          </button>
                           <button
                             type="button"
                             onClick={() => handleDeleteFolder(folderPath)}
diff --git a/internal/api/server.go b/internal/api/server.go
index 00bda7a..fa47d8d 100644
--- a/internal/api/server.go
+++ b/internal/api/server.go
@@ -1204,6 +1204,11 @@ func (s *Server) handleCreateFolderShare(w http.ResponseWriter, r *http.Request)
 		return
 	}
 	s.wsHub.BroadcastDocEvent("", "WORKSPACE_FOLDERS_UPDATED", share)
+	if docIDs, err := s.store.GetSharedFolderDocIDs(folderID); err == nil {
+		for _, docID := range docIDs {
+			s.broadcastDocToAuthorizedUsers(docID, "DOC_CREATED")
+		}
+	}
 	writeJSON(w, http.StatusCreated, share)
 }
 
@@ -1211,11 +1216,16 @@ func (s *Server) handleDeleteFolderShare(w http.ResponseWriter, r *http.Request)
 	userID := auth.GetUserID(r.Context())
 	folderID := chi.URLParam(r, "id")
 	shareID := chi.URLParam(r, "shareId")
+	docIDs, _ := s.store.GetSharedFolderDocIDs(folderID)
 	if err := s.store.DeleteFolderShare(userID, folderID, shareID); err != nil {
 		writeError(w, http.StatusInternalServerError, err.Error())
 		return
 	}
 	s.wsHub.BroadcastDocEvent("", "WORKSPACE_FOLDERS_UPDATED", map[string]string{"folderId": folderID, "shareId": shareID})
+	for _, docID := range docIDs {
+		s.wsHub.BroadcastToUser(shareID, "DOC_DELETED", map[string]string{"id": docID})
+		s.broadcastDocToAuthorizedUsers(docID, "DOC_UPDATED")
+	}
 	writeJSON(w, http.StatusOK, map[string]bool{"deleted": true})
 }
 
diff --git a/internal/api/server_test.go b/internal/api/server_test.go
index 11009c0..7db2966 100644
--- a/internal/api/server_test.go
+++ b/internal/api/server_test.go
@@ -989,5 +989,167 @@ func TestSSEGlobalEndpoint(t *testing.T) {
 	}
 }
 
+func TestDecoupledFolderSharingAPI(t *testing.T) {
+	srv, store, tokenA := setupTestServer(t)
+	router := srv.Router()
+
+	userB, err := store.CreateUser("user_b@example.com", "hash", "User B", "member")
+	if err != nil {
+		t.Fatalf("failed to create user B: %v", err)
+	}
+	tokenB, err := auth.GenerateToken(srv.cfg.JWTSecret, userB.ID, userB.Email, userB.DisplayName)
+	if err != nil {
+		t.Fatalf("failed to generate token B: %v", err)
+	}
+
+	// 1. User A creates a shared folder "TeamProjekt"
+	shPayload := map[string]string{"name": "TeamProjekt", "mountPath": "TeamProjekt"}
+	b, _ := json.Marshal(shPayload)
+	req := httptest.NewRequest(http.MethodPost, "/api/v1/workspace/folders/shared", bytes.NewReader(b))
+	req.Header.Set("Authorization", "Bearer "+tokenA)
+	req.Header.Set("Content-Type", "application/json")
+	rec := httptest.NewRecorder()
+	router.ServeHTTP(rec, req)
+	if rec.Code != http.StatusCreated {
+		t.Fatalf("create shared folder failed: %s", rec.Body.String())
+	}
+	var shFolder domain.SharedFolder
+	_ = json.Unmarshal(rec.Body.Bytes(), &shFolder)
+
+	// 2. User A creates a document inside "TeamProjekt"
+	docPayload := map[string]interface{}{
+		"title":      "Spezifikation",
+		"folderPath": "TeamProjekt",
+		"blocks": []domain.DocumentBlock{
+			{ID: "blk_1", Type: "text", Content: "Projekt Details", Level: 0, Position: 1000},
+		},
+	}
+	b, _ = json.Marshal(docPayload)
+	req = httptest.NewRequest(http.MethodPost, "/api/v1/documents", bytes.NewReader(b))
+	req.Header.Set("Authorization", "Bearer "+tokenA)
+	req.Header.Set("Content-Type", "application/json")
+	rec = httptest.NewRecorder()
+	router.ServeHTTP(rec, req)
+	if rec.Code != http.StatusCreated {
+		t.Fatalf("create doc failed: %s", rec.Body.String())
+	}
+	var createdDoc domain.Document
+	_ = json.Unmarshal(rec.Body.Bytes(), &createdDoc)
+
+	// 3. User A shares the folder with User B (write permission)
+	sharePayload := map[string]interface{}{
+		"userId":     userB.ID,
+		"targetType": "user",
+		"permission": "write",
+	}
+	b, _ = json.Marshal(sharePayload)
+	req = httptest.NewRequest(http.MethodPost, "/api/v1/workspace/folders/shared/"+shFolder.ID+"/shares", bytes.NewReader(b))
+	req.Header.Set("Authorization", "Bearer "+tokenA)
+	req.Header.Set("Content-Type", "application/json")
+	rec = httptest.NewRecorder()
+	router.ServeHTTP(rec, req)
+	if rec.Code != http.StatusCreated {
+		t.Fatalf("share folder failed: %s", rec.Body.String())
+	}
+
+	// 4. User B gets their documents list -> must see the document in "TeamProjekt"
+	req = httptest.NewRequest(http.MethodGet, "/api/v1/documents", nil)
+	req.Header.Set("Authorization", "Bearer "+tokenB)
+	rec = httptest.NewRecorder()
+	router.ServeHTTP(rec, req)
+	if rec.Code != http.StatusOK {
+		t.Fatalf("get docs userB failed: %s", rec.Body.String())
+	}
+	var docsB []domain.Document
+	_ = json.Unmarshal(rec.Body.Bytes(), &docsB)
+	var foundDocB *domain.Document
+	for i := range docsB {
+		if docsB[i].ID == createdDoc.ID {
+			foundDocB = &docsB[i]
+			break
+		}
+	}
+	if foundDocB == nil {
+		t.Fatalf("User B did not see shared document!")
+	}
+	if foundDocB.FolderPath != "TeamProjekt" {
+		t.Fatalf("expected User B initial folderPath 'TeamProjekt', got %q", foundDocB.FolderPath)
+	}
+
+	// 5. User B moves their mount point to "MeineOrdner/TeamProjekt"
+	movePayload := map[string]string{
+		"sourcePath":       "TeamProjekt",
+		"targetParentPath": "MeineOrdner",
+	}
+	b, _ = json.Marshal(movePayload)
+	req = httptest.NewRequest(http.MethodPost, "/api/v1/folders/move", bytes.NewReader(b))
+	req.Header.Set("Authorization", "Bearer "+tokenB)
+	req.Header.Set("Content-Type", "application/json")
+	rec = httptest.NewRecorder()
+	router.ServeHTTP(rec, req)
+	if rec.Code != http.StatusOK {
+		t.Fatalf("User B move folder failed: %s", rec.Body.String())
+	}
+
+	// 6. DECOUPLED CHECK:
+	// User B's document path must now be "MeineOrdner/TeamProjekt"
+	req = httptest.NewRequest(http.MethodGet, "/api/v1/documents/"+createdDoc.ID, nil)
+	req.Header.Set("Authorization", "Bearer "+tokenB)
+	rec = httptest.NewRecorder()
+	router.ServeHTTP(rec, req)
+	if rec.Code != http.StatusOK {
+		t.Fatalf("User B get doc failed: %s", rec.Body.String())
+	}
+	var docBAfterMove domain.Document
+	_ = json.Unmarshal(rec.Body.Bytes(), &docBAfterMove)
+	if docBAfterMove.FolderPath != "MeineOrdner/TeamProjekt" {
+		t.Fatalf("expected User B folderPath 'MeineOrdner/TeamProjekt', got %q", docBAfterMove.FolderPath)
+	}
+
+	// User A's document path must STILL be "TeamProjekt" (completely decoupled!)
+	req = httptest.NewRequest(http.MethodGet, "/api/v1/documents/"+createdDoc.ID, nil)
+	req.Header.Set("Authorization", "Bearer "+tokenA)
+	rec = httptest.NewRecorder()
+	router.ServeHTTP(rec, req)
+	if rec.Code != http.StatusOK {
+		t.Fatalf("User A get doc failed: %s", rec.Body.String())
+	}
+	var docAAfterMove domain.Document
+	_ = json.Unmarshal(rec.Body.Bytes(), &docAAfterMove)
+	if docAAfterMove.FolderPath != "TeamProjekt" {
+		t.Fatalf("User A's folder hierarchy was altered! Expected 'TeamProjekt', got %q", docAAfterMove.FolderPath)
+	}
+
+	// 7. Synchronous contents check:
+	// User B moves the document into a subfolder: "MeineOrdner/TeamProjekt/Archiv"
+	moveDocPayload := map[string]string{
+		"folderPath": "MeineOrdner/TeamProjekt/Archiv",
+	}
+	b, _ = json.Marshal(moveDocPayload)
+	req = httptest.NewRequest(http.MethodPut, "/api/v1/documents/"+createdDoc.ID+"/move", bytes.NewReader(b))
+	req.Header.Set("Authorization", "Bearer "+tokenB)
+	req.Header.Set("Content-Type", "application/json")
+	rec = httptest.NewRecorder()
+	router.ServeHTTP(rec, req)
+	if rec.Code != http.StatusOK {
+		t.Fatalf("User B move doc into subfolder failed: %s", rec.Body.String())
+	}
+
+	// User A must now see the document synchronized at "TeamProjekt/Archiv"!
+	req = httptest.NewRequest(http.MethodGet, "/api/v1/documents/"+createdDoc.ID, nil)
+	req.Header.Set("Authorization", "Bearer "+tokenA)
+	rec = httptest.NewRecorder()
+	router.ServeHTTP(rec, req)
+	if rec.Code != http.StatusOK {
+		t.Fatalf("User A get doc failed: %s", rec.Body.String())
+	}
+	var docASynced domain.Document
+	_ = json.Unmarshal(rec.Body.Bytes(), &docASynced)
+	if docASynced.FolderPath != "TeamProjekt/Archiv" {
+		t.Fatalf("expected User A to see subfolder sync at 'TeamProjekt/Archiv', got %q", docASynced.FolderPath)
+	}
+}
+
+
 
 
diff --git a/internal/storage/sqlite.go b/internal/storage/sqlite.go
index 317dded..6b206f5 100644
--- a/internal/storage/sqlite.go
+++ b/internal/storage/sqlite.go
@@ -3426,6 +3426,24 @@ func (s *Store) DeleteSharedFolder(currentUserID, folderID string) error {
 	return err
 }
 
+// GetSharedFolderDocIDs returns all non-archived document IDs belonging to a shared folder.
+func (s *Store) GetSharedFolderDocIDs(folderID string) ([]string, error) {
+	rows, err := s.db.Query(`SELECT id FROM documents WHERE shared_folder_id = ? AND is_archived = 0`, folderID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var docIDs []string
+	for rows.Next() {
+		var id string
+		if err := rows.Scan(&id); err == nil && id != "" {
+			docIDs = append(docIDs, id)
+		}
+	}
+	return docIDs, nil
+}
+
 func (s *Store) GetDocShares(docID string) ([]domain.DocShare, error) {
 	shares := make([]domain.DocShare, 0)
 
diff --git a/internal/ws/hub.go b/internal/ws/hub.go
index bb51fab..899f967 100644
--- a/internal/ws/hub.go
+++ b/internal/ws/hub.go
@@ -501,6 +501,8 @@ func (h *Hub) BroadcastTaskEvent(userID, event string, payload interface{}) {
 func (h *Hub) BroadcastDocEvent(docID, event string, payload interface{}) {
 	if docID != "" {
 		h.BroadcastRoom("doc:"+docID, event, payload, nil)
+	} else {
+		h.BroadcastToAll(event, payload)
 	}
 }
 
-- 
2.54.0


From 4850f9dfad168f2aa30aee19af9fa12ed12eccf1 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 07:09:48 +0100
Subject: [PATCH 15/33] feat(workspace): recursive folder tree, link modal
 redesign, todo grouping & line jumping, hashtag child listing

---
 .../src/features/workspace/DocumentEditor.tsx |  41 +-
 frontend/src/features/workspace/LinkModal.tsx |  69 +-
 .../src/features/workspace/OutlinerBlock.tsx  |   6 +-
 .../src/features/workspace/OutlinerTree.tsx   |  26 +
 .../src/features/workspace/WorkspaceView.tsx  | 877 ++++++++++++++----
 internal/storage/sqlite.go                    |  24 +-
 6 files changed, 811 insertions(+), 232 deletions(-)

diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
index 2429168..cc287af 100644
--- a/frontend/src/features/workspace/DocumentEditor.tsx
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -26,6 +26,8 @@ export interface DocumentEditorProps {
   currentUser?: User | null;
   initialDoc?: Document | null;
   availableFolders: string[];
+  autoFocusTitle?: boolean;
+  initialFocusedBlockId?: string | null;
   onDocMetadataChange: (updated: Document) => void;
   onDeleteDoc: (docId: string) => void;
   onOpenShareModal: (doc: Document) => void;
@@ -143,6 +145,8 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   currentUser,
   initialDoc,
   availableFolders,
+  autoFocusTitle,
+  initialFocusedBlockId,
   onDocMetadataChange,
   onDeleteDoc,
   onOpenShareModal,
@@ -161,6 +165,18 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   const [showFolderMenu, setShowFolderMenu] = useState<boolean>(false);
   const [zoomedBlockId, setZoomedBlockId] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (autoFocusTitle || (doc?.title === 'Neue Notiz' && !doc?.markdownCache)) {
+      const timer = setTimeout(() => {
+        if (titleInputRef.current) {
+          titleInputRef.current.focus();
+          titleInputRef.current.select();
+        }
+      }, 60);
+      return () => clearTimeout(timer);
+    }
+  }, [autoFocusTitle]);
+
   useEffect(() => {
     if (zoomedBlockId && !blocks.some((b) => b.id === zoomedBlockId)) {
       setZoomedBlockId(null);
@@ -932,6 +948,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
                 onMoveBlock={handleMoveBlock}
                 onTagClick={onSelectTag}
                 onWikiLinkClick={onWikiLinkClick}
+                initialFocusedBlockId={initialFocusedBlockId}
               />
             )}
           </div>
@@ -941,12 +958,12 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
              ========================================================================= */
           <>
             {/* Document Icon + Title Header */}
-            <div className="flex items-center gap-3 mb-3 relative">
+            <div className="flex items-center gap-3 mb-4 relative">
               <div className="relative">
                 <button
                   type="button"
                   onClick={() => canEdit && setShowEmojiPicker((prev) => !prev)}
-                  className="w-10 h-10 rounded-btn bg-canvas border border-border hover:border-strong flex items-center justify-center text-xl transition-colors"
+                  className="text-2xl sm:text-3xl hover:opacity-80 transition-opacity p-0.5 rounded cursor-pointer select-none"
                   title="Icon ändern"
                 >
                   {doc?.icon || '📝'}
@@ -958,7 +975,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
                         key={emoji}
                         type="button"
                         onClick={() => handleSelectIcon(emoji)}
-                        className="p-1.5 rounded-btn hover:bg-panel-elevated text-base flex items-center justify-center"
+                        className="p-1.5 rounded-btn hover:bg-panel-elevated text-base flex items-center justify-center cursor-pointer"
                       >
                         {emoji}
                       </button>
@@ -979,23 +996,6 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
               />
             </div>
 
-            {/* Extracted #Tags Summary Bar */}
-            {extractedTags.length > 0 && (
-              <div className="flex flex-wrap items-center gap-1.5 mb-4 pb-2 border-b border-border">
-                <Hash className="w-3.5 h-3.5 text-faint mr-0.5" />
-                {extractedTags.map((tag) => (
-                  <button
-                    key={tag}
-                    type="button"
-                    onClick={() => onSelectTag(tag)}
-                    className="badge-accent text-[11px] font-medium px-2 py-0.5 rounded-btn hover:opacity-85 transition-opacity"
-                  >
-                    #{tag}
-                  </button>
-                ))}
-              </div>
-            )}
-
             {/* Logseq Outliner Tree */}
             <OutlinerTree
               docId={docId}
@@ -1011,6 +1011,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
               onMoveBlock={handleMoveBlock}
               onTagClick={onSelectTag}
               onWikiLinkClick={onWikiLinkClick}
+              initialFocusedBlockId={initialFocusedBlockId}
             />
           </>
         )}
diff --git a/frontend/src/features/workspace/LinkModal.tsx b/frontend/src/features/workspace/LinkModal.tsx
index d6b6d7c..5c44b0d 100644
--- a/frontend/src/features/workspace/LinkModal.tsx
+++ b/frontend/src/features/workspace/LinkModal.tsx
@@ -111,22 +111,29 @@ export const LinkModal: React.FC<LinkModalProps> = ({
 
   return (
     <div
-      className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4 backdrop-blur-xs animate-in fade-in duration-100"
+      className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs"
       onClick={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
     >
-      <div className="panel-surface shadow-panel border border-border rounded-card max-w-md w-full overflow-hidden flex flex-col max-h-[85vh]">
-        {/* Modal Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-panel">
-          <div className="flex items-center gap-2">
-            <LinkIcon className="w-4 h-4 text-accent" />
-            <h3 className="text-sm font-bold text-main">Link einfügen</h3>
+      <div className="panel-surface w-full max-w-lg p-5 shadow-panel rounded-card border border-border space-y-4 animate-in fade-in zoom-in-95 duration-150">
+        {/* Header */}
+        <div className="flex items-center justify-between pb-3 border-b border-border">
+          <div className="flex items-center gap-2.5 min-w-0">
+            <div className="w-8 h-8 rounded-btn bg-accent/15 text-accent flex items-center justify-center shrink-0">
+              <LinkIcon className="w-4 h-4" />
+            </div>
+            <div className="min-w-0">
+              <h3 className="text-sm font-bold text-main truncate">Link einfügen</h3>
+              <p className="text-[11px] text-muted truncate">
+                Notiz intern verknüpfen oder externen Web-Link einbetten
+              </p>
+            </div>
           </div>
           <button
             type="button"
             onClick={onClose}
-            className="p-1 rounded-btn text-muted hover:text-main hover:bg-panel-elevated transition-colors"
+            className="p-1.5 text-muted hover:text-main rounded-btn hover:bg-panel transition-colors cursor-pointer"
             title="Schließen (Esc)"
           >
             <X className="w-4 h-4" />
@@ -134,14 +141,14 @@ export const LinkModal: React.FC<LinkModalProps> = ({
         </div>
 
         {/* Tab Switcher */}
-        <div className="flex border-b border-border bg-panel-elevated/40 p-1 gap-1">
+        <div className="flex rounded-btn bg-panel p-0.5 border border-border">
           <button
             type="button"
             onClick={() => setTab('note')}
-            className={`flex-1 py-1.5 px-3 rounded-btn text-xs font-semibold flex items-center justify-center gap-1.5 transition-colors ${
+            className={`flex-1 flex items-center justify-center gap-1.5 py-1.5 text-xs font-semibold rounded-btn transition-colors cursor-pointer ${
               tab === 'note'
-                ? 'bg-accent text-on-accent shadow-sm'
-                : 'text-muted hover:text-main hover:bg-panel-elevated'
+                ? 'bg-panel-elevated text-main shadow-xs'
+                : 'text-muted hover:text-main'
             }`}
           >
             <FileText className="w-3.5 h-3.5" />
@@ -150,10 +157,10 @@ export const LinkModal: React.FC<LinkModalProps> = ({
           <button
             type="button"
             onClick={() => setTab('web')}
-            className={`flex-1 py-1.5 px-3 rounded-btn text-xs font-semibold flex items-center justify-center gap-1.5 transition-colors ${
+            className={`flex-1 flex items-center justify-center gap-1.5 py-1.5 text-xs font-semibold rounded-btn transition-colors cursor-pointer ${
               tab === 'web'
-                ? 'bg-accent text-on-accent shadow-sm'
-                : 'text-muted hover:text-main hover:bg-panel-elevated'
+                ? 'bg-panel-elevated text-main shadow-xs'
+                : 'text-muted hover:text-main'
             }`}
           >
             <Globe className="w-3.5 h-3.5" />
@@ -162,7 +169,7 @@ export const LinkModal: React.FC<LinkModalProps> = ({
         </div>
 
         {/* Modal Body */}
-        <div className="p-4 flex-1 overflow-y-auto">
+        <div>
           {tab === 'note' ? (
             <div className="space-y-3">
               <div className="relative">
@@ -172,8 +179,8 @@ export const LinkModal: React.FC<LinkModalProps> = ({
                   type="text"
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Notiz suchen…"
-                  className="w-full bg-input border border-border focus:border-accent text-main text-xs pl-8 pr-3 py-1.5 rounded-btn focus:outline-none transition-colors"
+                  placeholder="Notiz nach Titel oder Ordner filtern…"
+                  className="input-field w-full text-xs pl-8 pr-3 py-2 text-main"
                 />
               </div>
 
@@ -183,22 +190,22 @@ export const LinkModal: React.FC<LinkModalProps> = ({
                   <span>Notizen werden geladen…</span>
                 </div>
               ) : (
-                <div className="max-h-60 overflow-y-auto space-y-1 pr-1">
+                <div className="max-h-64 overflow-y-auto space-y-1 pr-1">
                   {filteredDocs.map((d) => (
                     <button
                       key={d.id}
                       type="button"
                       onClick={() => handleSelectNote(d)}
-                      className="w-full text-left px-3 py-2 rounded-btn hover:bg-panel-elevated flex items-center justify-between text-xs transition-colors group"
+                      className="w-full text-left px-3 py-2 rounded-btn hover:bg-panel border border-transparent hover:border-border flex items-center justify-between text-xs transition-colors group cursor-pointer"
                     >
                       <div className="flex items-center gap-2 min-w-0">
                         <span className="text-base shrink-0">{d.icon || '📝'}</span>
-                        <span className="font-medium text-main truncate group-hover:text-accent">
+                        <span className="font-semibold text-main truncate group-hover:text-accent">
                           {d.title || 'Unbenannte Notiz'}
                         </span>
                       </div>
                       {d.folderPath && (
-                        <span className="text-[10px] text-faint ml-2 shrink-0 truncate max-w-[100px]">
+                        <span className="badge-neutral text-[10px] ml-2 shrink-0 truncate max-w-[120px]">
                           📁 {d.folderPath}
                         </span>
                       )}
@@ -206,7 +213,7 @@ export const LinkModal: React.FC<LinkModalProps> = ({
                   ))}
 
                   {filteredDocs.length === 0 && (
-                    <div className="py-8 text-center text-xs text-muted">
+                    <div className="py-8 text-center text-xs text-muted border border-dashed border-border rounded-card">
                       {search
                         ? `Keine Notiz für "${search}" gefunden.`
                         : 'Keine Notizen im Workspace vorhanden.'}
@@ -218,8 +225,8 @@ export const LinkModal: React.FC<LinkModalProps> = ({
           ) : (
             <form onSubmit={handleWebLinkSubmit} className="space-y-3">
               <div>
-                <label className="block text-[11px] font-semibold text-muted mb-1">
-                  Link-Text / Titel
+                <label className="text-[10px] font-bold uppercase tracking-wider text-faint mb-1 block">
+                  Link-Text / Label
                 </label>
                 <input
                   ref={webTitleInputRef}
@@ -227,12 +234,12 @@ export const LinkModal: React.FC<LinkModalProps> = ({
                   value={webTitle}
                   onChange={(e) => setWebTitle(e.target.value)}
                   placeholder="z. B. MindSift Dokumentation"
-                  className="w-full bg-input border border-border focus:border-accent text-main text-xs px-3 py-1.5 rounded-btn focus:outline-none transition-colors"
+                  className="input-field w-full p-2 text-xs text-main"
                 />
               </div>
 
               <div>
-                <label className="block text-[11px] font-semibold text-muted mb-1">
+                <label className="text-[10px] font-bold uppercase tracking-wider text-faint mb-1 block">
                   Web-Adresse (URL) *
                 </label>
                 <input
@@ -241,22 +248,22 @@ export const LinkModal: React.FC<LinkModalProps> = ({
                   value={webUrl}
                   onChange={(e) => setWebUrl(e.target.value)}
                   placeholder="https://example.com"
-                  className="w-full bg-input border border-border focus:border-accent text-main text-xs px-3 py-1.5 rounded-btn focus:outline-none transition-colors"
+                  className="input-field w-full p-2 text-xs text-main"
                 />
               </div>
 
-              <div className="pt-2 flex justify-end gap-2">
+              <div className="pt-2 flex justify-end gap-2 border-t border-border">
                 <button
                   type="button"
                   onClick={onClose}
-                  className="btn-action px-3 py-1.5 text-xs text-muted hover:text-main"
+                  className="btn-action px-3 py-1.5 text-xs text-main cursor-pointer"
                 >
                   Abbrechen
                 </button>
                 <button
                   type="submit"
                   disabled={!webUrl.trim()}
-                  className="btn-primary inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-on-accent rounded-btn disabled:opacity-50 transition-opacity"
+                  className="btn-primary inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-on-accent rounded-btn disabled:opacity-50 transition-opacity cursor-pointer"
                 >
                   <ExternalLink className="w-3.5 h-3.5" />
                   <span>Link einfügen</span>
diff --git a/frontend/src/features/workspace/OutlinerBlock.tsx b/frontend/src/features/workspace/OutlinerBlock.tsx
index 89c4da0..0d3ef76 100644
--- a/frontend/src/features/workspace/OutlinerBlock.tsx
+++ b/frontend/src/features/workspace/OutlinerBlock.tsx
@@ -63,6 +63,7 @@ export interface OutlinerBlockProps {
   onDragOverBlock?: (e: React.DragEvent, index: number) => void;
   onDropBlock?: (index: number) => void;
   isDragTarget?: boolean;
+  isTargeted?: boolean;
   registerTextareaRef: (blockId: string, el: HTMLTextAreaElement | null) => void;
 }
 
@@ -88,6 +89,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   onDragOverBlock,
   onDropBlock,
   isDragTarget,
+  isTargeted,
   registerTextareaRef,
 }) => {
   const [localContent, setLocalContent] = useState<string>(block.content || '');
@@ -439,9 +441,11 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
 
   return (
     <div
-      className={`group relative flex items-start gap-1 py-1 rounded-card transition-colors ${
+      className={`group relative flex items-start gap-1 py-1 rounded-card transition-all duration-300 ${
         isDragTarget
           ? 'border-t-2 border-accent bg-accent/10'
+          : isTargeted
+          ? 'bg-accent/15 ring-2 ring-accent'
           : isFocused
           ? 'bg-panel-elevated'
           : 'hover:bg-panel'
diff --git a/frontend/src/features/workspace/OutlinerTree.tsx b/frontend/src/features/workspace/OutlinerTree.tsx
index 864f89a..107e8d5 100644
--- a/frontend/src/features/workspace/OutlinerTree.tsx
+++ b/frontend/src/features/workspace/OutlinerTree.tsx
@@ -18,6 +18,7 @@ export interface OutlinerTreeProps {
   onMoveBlock: (blockId: string, newIndex: number, level?: number) => void;
   onTagClick?: (tag: string) => void;
   onWikiLinkClick?: (pageTitle: string) => void;
+  initialFocusedBlockId?: string | null;
 }
 
 export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
@@ -34,14 +35,38 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
   onMoveBlock,
   onTagClick,
   onWikiLinkClick,
+  initialFocusedBlockId,
 }) => {
   const [focusedBlockId, setFocusedBlockId] = useState<string | null>(null);
+  const [highlightedBlockId, setHighlightedBlockId] = useState<string | null>(
+    initialFocusedBlockId || null
+  );
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
 
   const textareaMapRef = useRef<Map<string, HTMLTextAreaElement>>(new Map());
   const pendingFocusRef = useRef<{ blockId: string; cursor: 'start' | 'end' } | null>(null);
 
+  useEffect(() => {
+    if (initialFocusedBlockId) {
+      setHighlightedBlockId(initialFocusedBlockId);
+      const timer = setTimeout(() => {
+        focusBlockInput(initialFocusedBlockId, 'end');
+        const el = textareaMapRef.current.get(initialFocusedBlockId);
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }, 80);
+      const fadeTimer = setTimeout(() => {
+        setHighlightedBlockId(null);
+      }, 2500);
+      return () => {
+        clearTimeout(timer);
+        clearTimeout(fadeTimer);
+      };
+    }
+  }, [initialFocusedBlockId]);
+
   const registerTextareaRef = useCallback((blockId: string, el: HTMLTextAreaElement | null) => {
     if (el) {
       textareaMapRef.current.set(blockId, el);
@@ -304,6 +329,7 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
           onDragOverBlock={handleDragOverBlock}
           onDropBlock={handleDropBlock}
           isDragTarget={dragOverIndex === index && draggedIndex !== index}
+          isTargeted={highlightedBlockId === block.id}
           registerTextareaRef={registerTextareaRef}
         />
       ))}
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 454c095..c6c88d4 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -41,6 +41,197 @@ interface WorkspaceViewProps {
 
 type WorkspaceSubView = 'editor' | 'tag_detail' | 'todos';
 
+interface FolderTreeNode {
+  name: string;
+  fullPath: string;
+  subfolders: FolderTreeNode[];
+  docs: Document[];
+  sharedFolderObj?: SharedFolder;
+}
+
+interface FolderTreeItemProps {
+  node: FolderTreeNode;
+  depth: number;
+  expandedFolders: Record<string, boolean>;
+  setExpandedFolders: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+  selectedDocId: string | null;
+  subView: WorkspaceSubView;
+  dragOverFolder: string | null;
+  setDragOverFolder: (f: string | null) => void;
+  handleDropOnFolder: (folderPath: string, e: React.DragEvent) => void;
+  handleFolderDragStart: (e: React.DragEvent, path: string) => void;
+  handleDocDragStart: (e: React.DragEvent, id: string) => void;
+  handleCreateDocument: (folderPath?: string) => void;
+  handleShareFolderClick: (folderPath: string, existingSf?: SharedFolder) => void;
+  handleDeleteFolder: (folderPath: string) => void;
+  onSelectDoc: (id: string) => void;
+}
+
+const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
+  node,
+  depth,
+  expandedFolders,
+  setExpandedFolders,
+  selectedDocId,
+  subView,
+  dragOverFolder,
+  setDragOverFolder,
+  handleDropOnFolder,
+  handleFolderDragStart,
+  handleDocDragStart,
+  handleCreateDocument,
+  handleShareFolderClick,
+  handleDeleteFolder,
+  onSelectDoc,
+}) => {
+  const isExpanded = Boolean(expandedFolders[node.fullPath]);
+  const isDragOver = dragOverFolder === node.fullPath;
+  const hasContent = node.subfolders.length > 0 || node.docs.length > 0;
+
+  return (
+    <div
+      onDragOver={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOverFolder(node.fullPath);
+      }}
+      onDragLeave={(e) => {
+        e.preventDefault();
+        if (dragOverFolder === node.fullPath) setDragOverFolder(null);
+      }}
+      onDrop={(e) => handleDropOnFolder(node.fullPath, e)}
+      className="space-y-0.5"
+    >
+      <div
+        draggable
+        onDragStart={(e) => handleFolderDragStart(e, node.fullPath)}
+        style={{ paddingLeft: `${depth * 12 + 8}px` }}
+        className={`group flex items-center justify-between pr-2 py-1 rounded-btn text-xs cursor-pointer transition-colors ${
+          isDragOver
+            ? 'bg-accent/20 border-l-2 border-accent text-main font-semibold'
+            : 'hover:bg-panel-elevated text-muted'
+        }`}
+      >
+        <button
+          type="button"
+          onClick={() =>
+            setExpandedFolders((prev) => ({
+              ...prev,
+              [node.fullPath]: !prev[node.fullPath],
+            }))
+          }
+          className="flex items-center gap-1.5 flex-1 min-w-0 text-left cursor-pointer"
+        >
+          {hasContent ? (
+            isExpanded ? (
+              <ChevronDown className="w-3.5 h-3.5 text-faint shrink-0" />
+            ) : (
+              <ChevronRight className="w-3.5 h-3.5 text-faint shrink-0" />
+            )
+          ) : (
+            <span className="w-3.5 shrink-0" />
+          )}
+          {isExpanded ? (
+            <FolderOpen className="w-3.5 h-3.5 text-accent shrink-0" />
+          ) : (
+            <Folder className="w-3.5 h-3.5 text-accent shrink-0" />
+          )}
+          <span className="truncate">{node.name}</span>
+          {node.sharedFolderObj && (
+            <Users className="w-3 h-3 text-status-ok shrink-0" />
+          )}
+          <span className="text-[10px] text-faint ml-auto pr-1">
+            {node.docs.length}
+          </span>
+        </button>
+
+        <div className="hidden group-hover:flex items-center gap-0.5">
+          <button
+            type="button"
+            onClick={() => handleCreateDocument(node.fullPath)}
+            className="p-1 rounded-btn hover:bg-canvas text-muted hover:text-main cursor-pointer"
+            title="Notiz in diesem Ordner erstellen"
+          >
+            <Plus className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => handleShareFolderClick(node.fullPath, node.sharedFolderObj)}
+            className={`p-1 rounded-btn hover:bg-canvas cursor-pointer ${
+              node.sharedFolderObj ? 'text-accent' : 'text-faint hover:text-accent'
+            }`}
+            title="Ordner teilen und Berechtigungen"
+          >
+            <Users className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => handleDeleteFolder(node.fullPath)}
+            className="p-1 rounded-btn hover:bg-status-err/20 text-faint hover:text-status-err cursor-pointer"
+            title="Ordner löschen"
+          >
+            <Trash2 className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div className="space-y-0.5">
+          {/* Subfolders in this folder */}
+          {node.subfolders.map((childNode) => (
+            <FolderTreeItem
+              key={childNode.fullPath}
+              node={childNode}
+              depth={depth + 1}
+              expandedFolders={expandedFolders}
+              setExpandedFolders={setExpandedFolders}
+              selectedDocId={selectedDocId}
+              subView={subView}
+              dragOverFolder={dragOverFolder}
+              setDragOverFolder={setDragOverFolder}
+              handleDropOnFolder={handleDropOnFolder}
+              handleFolderDragStart={handleFolderDragStart}
+              handleDocDragStart={handleDocDragStart}
+              handleCreateDocument={handleCreateDocument}
+              handleShareFolderClick={handleShareFolderClick}
+              handleDeleteFolder={handleDeleteFolder}
+              onSelectDoc={onSelectDoc}
+            />
+          ))}
+
+          {/* Notes directly in this folder */}
+          {node.docs.map((d) => (
+            <div
+              key={d.id}
+              draggable
+              onDragStart={(e) => handleDocDragStart(e, d.id)}
+              onClick={() => onSelectDoc(d.id)}
+              style={{ paddingLeft: `${(depth + 1) * 12 + 16}px` }}
+              className={`w-full flex items-center gap-2 pr-2 py-1.5 rounded-btn text-left text-xs cursor-pointer transition-colors ${
+                selectedDocId === d.id && subView === 'editor'
+                  ? 'bg-accent text-on-accent font-semibold'
+                  : 'text-main hover:bg-panel-elevated'
+              }`}
+            >
+              <span className="shrink-0">{d.icon || '📝'}</span>
+              <span className="truncate flex-1">{d.title || 'Unbenannte Notiz'}</span>
+            </div>
+          ))}
+
+          {!hasContent && (
+            <div
+              style={{ paddingLeft: `${(depth + 1) * 12 + 16}px` }}
+              className="py-1 text-[10px] text-faint italic"
+            >
+              Leer
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
 export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   currentUser,
   initialDocId,
@@ -52,6 +243,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [tagsSummary, setTagsSummary] = useState<TagSummary[]>([]);
 
   const [selectedDocId, setSelectedDocId] = useState<string | null>(initialDocId || null);
+  const [targetBlockId, setTargetBlockId] = useState<string | null>(null);
+  const [newlyCreatedDocId, setNewlyCreatedDocId] = useState<string | null>(null);
   const [subView, setSubView] = useState<WorkspaceSubView>('editor');
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
   const [tagDetails, setTagDetails] = useState<TagDetails | null>(null);
@@ -69,9 +262,13 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [draggingFolderPath, setDraggingFolderPath] = useState<string | null>(null);
   const [dragOverFolder, setDragOverFolder] = useState<string | null>(null);
 
-  // Rollup drilldown
+  // Rollup drilldown & View Mode
   const [todoFolderDrilldown, setTodoFolderDrilldown] = useState<string | null>(null);
+  const [todoGrouping, setTodoGrouping] = useState<'folder_note' | 'note' | 'folder'>(() => {
+    return (localStorage.getItem('mindsift_todo_grouping') as any) || 'folder_note';
+  });
   const [collapsedTodoFolders, setCollapsedTodoFolders] = useState<Set<string>>(new Set());
+  const [collapsedTodoNotes, setCollapsedTodoNotes] = useState<Set<string>>(new Set());
 
   // Sharing Modal State
   const [shareModalDoc, setShareModalDoc] = useState<Document | null>(null);
@@ -174,6 +371,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           ],
         });
         setDocs((prev) => (prev.some((d) => d.id === created.id) ? prev : [created, ...prev]));
+        setNewlyCreatedDocId(created.id);
+        setTargetBlockId(null);
         setSelectedDocId(created.id);
         setSubView('editor');
         setMobileShowDetail(true);
@@ -192,6 +391,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     [onStatsChange]
   );
 
+  const handleJumpToDocBlock = useCallback((docId: string, blockId?: string) => {
+    setSelectedDocId(docId);
+    setTargetBlockId(blockId || null);
+    setNewlyCreatedDocId(null);
+    setSubView('editor');
+    setMobileShowDetail(true);
+  }, []);
+
   // Register mobile FAB actions
   useEffect(() => {
     setPrimaryAction(() => handleCreateDocument(''));
@@ -451,6 +658,55 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return Array.from(set).sort();
   }, [docs, folders, sharedFolders]);
 
+  const folderTree = useMemo(() => {
+    const rootNodes: FolderTreeNode[] = [];
+    const nodeMap = new Map<string, FolderTreeNode>();
+
+    const allPathsSet = new Set<string>();
+    for (const p of allFolderPaths) {
+      const parts = p.split('/');
+      let current = '';
+      for (const part of parts) {
+        current = current ? `${current}/${part}` : part;
+        allPathsSet.add(current);
+      }
+    }
+
+    const sortedPaths = Array.from(allPathsSet).sort((a, b) => a.localeCompare(b));
+
+    for (const p of sortedPaths) {
+      const parts = p.split('/');
+      const leafName = parts[parts.length - 1];
+      const sharedFolderObj = sharedFolders.find(
+        (sf) => sf.mountPath === p || sf.name === p
+      );
+      const folderDocs = filteredDocs.filter((d) => d.folderPath === p);
+
+      const node: FolderTreeNode = {
+        name: leafName,
+        fullPath: p,
+        subfolders: [],
+        docs: folderDocs,
+        sharedFolderObj,
+      };
+      nodeMap.set(p, node);
+
+      if (parts.length === 1) {
+        rootNodes.push(node);
+      } else {
+        const parentPath = parts.slice(0, -1).join('/');
+        const parentNode = nodeMap.get(parentPath);
+        if (parentNode) {
+          parentNode.subfolders.push(node);
+        } else {
+          rootNodes.push(node);
+        }
+      }
+    }
+
+    return rootNodes;
+  }, [allFolderPaths, filteredDocs, sharedFolders]);
+
   const filteredDocs = useMemo(() => {
     const q = searchQuery.trim().toLowerCase();
     if (!q) return docs;
@@ -472,23 +728,48 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     [filteredDocs]
   );
 
-  // Global To-Dos rollup grouped by folder
-  const rollupTodosByFolder = useMemo(() => {
-    const folderMap = new Map<string, { doc: Document; blockId: string; content: string; checked: boolean }[]>();
+  // Global To-Dos rollup collections
+  const allRollupTodos = useMemo(() => {
+    const list: { doc: Document; blockId: string; content: string; checked: boolean }[] = [];
     for (const d of docs) {
       const fName = d.folderPath || 'Hauptebene';
       if (todoFolderDrilldown && fName !== todoFolderDrilldown) continue;
       for (const b of d.blocks || []) {
         if (b.type === 'todo' && b.content.trim() !== '') {
-          const arr = folderMap.get(fName) || [];
-          arr.push({ doc: d, blockId: b.id, content: b.content, checked: Boolean(b.checked) });
-          folderMap.set(fName, arr);
+          list.push({ doc: d, blockId: b.id, content: b.content, checked: Boolean(b.checked) });
         }
       }
     }
-    return folderMap;
+    return list;
   }, [docs, todoFolderDrilldown]);
 
+  const rollupTodosByFolder = useMemo(() => {
+    const map = new Map<string, { doc: Document; blockId: string; content: string; checked: boolean }[]>();
+    for (const item of allRollupTodos) {
+      const fName = item.doc.folderPath || 'Hauptebene';
+      const arr = map.get(fName) || [];
+      arr.push(item);
+      map.set(fName, arr);
+    }
+    return map;
+  }, [allRollupTodos]);
+
+  const rollupTodosByNote = useMemo(() => {
+    const map = new Map<
+      string,
+      { doc: Document; items: { doc: Document; blockId: string; content: string; checked: boolean }[] }
+    >();
+    for (const item of allRollupTodos) {
+      const existing = map.get(item.doc.id);
+      if (existing) {
+        existing.items.push(item);
+      } else {
+        map.set(item.doc.id, { doc: item.doc, items: [item] });
+      }
+    }
+    return map;
+  }, [allRollupTodos]);
+
   const totalOpenTodos = useMemo(() => {
     let count = 0;
     for (const d of docs) {
@@ -670,139 +951,39 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             </div>
           )}
 
-          {/* Folders Tree with Drag & Drop */}
-          {allFolderPaths.length > 0 && (
+          {/* Folders Tree with Recursive Hierarchical Nesting */}
+          {folderTree.length > 0 && (
             <div>
               <div className="px-2 mb-1 text-[10px] font-bold uppercase tracking-wider text-faint">
                 Ordner
               </div>
               <div className="space-y-0.5">
-                {allFolderPaths.map((folderPath) => {
-                  const isExpanded = Boolean(expandedFolders[folderPath]);
-                  const folderDocs = filteredDocs.filter((d) => d.folderPath === folderPath);
-                  const sharedFolderObj = sharedFolders.find(
-                    (sf) => sf.mountPath === folderPath || sf.name === folderPath
-                  );
-                  const isDragOver = dragOverFolder === folderPath;
-
-                  return (
-                    <div
-                      key={folderPath}
-                      onDragOver={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        setDragOverFolder(folderPath);
-                      }}
-                      onDragLeave={(e) => {
-                        e.preventDefault();
-                        if (dragOverFolder === folderPath) setDragOverFolder(null);
-                      }}
-                      onDrop={(e) => handleDropOnFolder(folderPath, e)}
-                      className="space-y-0.5"
-                    >
-                      <div
-                        draggable
-                        onDragStart={(e) => handleFolderDragStart(e, folderPath)}
-                        className={`group flex items-center justify-between px-2 py-1 rounded-btn text-xs cursor-pointer transition-colors ${
-                          isDragOver
-                            ? 'bg-accent/20 border-l-2 border-accent text-main font-semibold'
-                            : 'hover:bg-panel-elevated text-muted'
-                        }`}
-                      >
-                        <button
-                          type="button"
-                          onClick={() =>
-                            setExpandedFolders((prev) => ({
-                              ...prev,
-                              [folderPath]: !prev[folderPath],
-                            }))
-                          }
-                          className="flex items-center gap-1.5 flex-1 min-w-0 text-left"
-                        >
-                          {isExpanded ? (
-                            <ChevronDown className="w-3.5 h-3.5 text-faint shrink-0" />
-                          ) : (
-                            <ChevronRight className="w-3.5 h-3.5 text-faint shrink-0" />
-                          )}
-                          {isExpanded ? (
-                            <FolderOpen className="w-3.5 h-3.5 text-accent shrink-0" />
-                          ) : (
-                            <Folder className="w-3.5 h-3.5 text-accent shrink-0" />
-                          )}
-                          <span className="truncate">{folderPath}</span>
-                          {sharedFolderObj && (
-                            <Users className="w-3 h-3 text-status-ok shrink-0" />
-                          )}
-                          <span className="text-[10px] text-faint ml-auto pr-1">
-                            {folderDocs.length}
-                          </span>
-                        </button>
-
-                        <div className="hidden group-hover:flex items-center gap-0.5">
-                          <button
-                            type="button"
-                            onClick={() => handleCreateDocument(folderPath)}
-                            className="p-1 rounded-btn hover:bg-canvas text-muted hover:text-main"
-                            title="Notiz in diesem Ordner erstellen"
-                          >
-                            <Plus className="w-3 h-3" />
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => handleShareFolderClick(folderPath, sharedFolderObj)}
-                            className={`p-1 rounded-btn hover:bg-canvas ${
-                              sharedFolderObj ? 'text-accent' : 'text-faint hover:text-accent'
-                            }`}
-                            title="Ordner teilen und Berechtigungen"
-                          >
-                            <Users className="w-3 h-3" />
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => handleDeleteFolder(folderPath)}
-                            className="p-1 rounded-btn hover:bg-status-err/20 text-faint hover:text-status-err"
-                            title="Ordner löschen"
-                          >
-                            <Trash2 className="w-3 h-3" />
-                          </button>
-                        </div>
-                      </div>
-
-                      {isExpanded && (
-                        <div className="pl-4 space-y-0.5">
-                          {folderDocs.length === 0 ? (
-                            <div className="px-2 py-0.5 text-[10px] text-faint italic">
-                              Leer
-                            </div>
-                          ) : (
-                            folderDocs.map((d) => (
-                              <div
-                                key={d.id}
-                                draggable
-                                onDragStart={(e) => handleDocDragStart(e, d.id)}
-                                onClick={() => {
-                                  setSelectedDocId(d.id);
-                                  setSubView('editor');
-                                  setMobileShowDetail(true);
-                                }}
-                                className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer transition-colors ${
-                                  selectedDocId === d.id && subView === 'editor'
-                                    ? 'bg-accent text-on-accent font-semibold'
-                                    : 'text-main hover:bg-panel-elevated'
-                                }`}
-                              >
-                                <span>{d.icon || '📝'}</span>
-                                <span className="truncate flex-1">
-                                  {d.title || 'Unbenannte Notiz'}
-                                </span>
-                              </div>
-                            ))
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  );
-                })}
+                {folderTree.map((node) => (
+                  <FolderTreeItem
+                    key={node.fullPath}
+                    node={node}
+                    depth={0}
+                    expandedFolders={expandedFolders}
+                    setExpandedFolders={setExpandedFolders}
+                    selectedDocId={selectedDocId}
+                    subView={subView}
+                    dragOverFolder={dragOverFolder}
+                    setDragOverFolder={setDragOverFolder}
+                    handleDropOnFolder={handleDropOnFolder}
+                    handleFolderDragStart={handleFolderDragStart}
+                    handleDocDragStart={handleDocDragStart}
+                    handleCreateDocument={handleCreateDocument}
+                    handleShareFolderClick={handleShareFolderClick}
+                    handleDeleteFolder={handleDeleteFolder}
+                    onSelectDoc={(id) => {
+                      setSelectedDocId(id);
+                      setTargetBlockId(null);
+                      setNewlyCreatedDocId(null);
+                      setSubView('editor');
+                      setMobileShowDetail(true);
+                    }}
+                  />
+                ))}
               </div>
             </div>
           )}
@@ -886,6 +1067,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             currentUser={currentUser}
             initialDoc={selectedDocObj}
             availableFolders={allFolderPaths}
+            autoFocusTitle={newlyCreatedDocId === selectedDocId}
+            initialFocusedBlockId={targetBlockId}
             onDocMetadataChange={handleDocMetadataChange}
             onDeleteDoc={handleDeleteDocument}
             onOpenShareModal={openDocShareModal}
@@ -906,7 +1089,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 <button
                   type="button"
                   onClick={() => setSubView('editor')}
-                  className="btn-action px-3 py-1 text-xs text-main"
+                  className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
                 >
                   Zurück zum Editor
                 </button>
@@ -930,33 +1113,82 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               {/* Matched Document Blocks */}
               <div className="space-y-3">
                 <h3 className="text-[10px] font-bold uppercase tracking-wider text-faint">
-                  Verknüpfte Outliner-Blöcke ({tagDetails?.totalMatches || 0})
+                  Verknüpfte Outliner-Blöcke & Unterpunkte ({tagDetails?.totalMatches || 0})
                 </h3>
                 {tagDetails?.documents.map((docGroup) => (
                   <div
                     key={docGroup.docId}
-                    className="p-3 rounded-card border border-border bg-canvas space-y-1.5"
+                    className="p-3 rounded-card border border-border bg-canvas space-y-2"
                   >
                     <button
                       type="button"
-                      onClick={() => {
-                        setSelectedDocId(docGroup.docId);
-                        setSubView('editor');
-                      }}
-                      className="flex items-center gap-2 text-xs font-semibold text-accent hover:underline"
+                      onClick={() => handleJumpToDocBlock(docGroup.docId)}
+                      className="flex items-center gap-2 text-xs font-semibold text-accent hover:underline cursor-pointer"
                     >
                       <span>{docGroup.icon || '📝'}</span>
                       <span>{docGroup.title}</span>
+                      {docGroup.folderPath && (
+                        <span className="badge-neutral text-[10px] font-normal">
+                          📁 {docGroup.folderPath}
+                        </span>
+                      )}
                     </button>
-                    <div className="space-y-1 pl-3 border-l border-border">
+                    <div className="space-y-2 pl-3 border-l-2 border-border/70">
                       {docGroup.matchedBlocks.map((mb) => (
-                        <div key={mb.rootBlock.id} className="text-xs text-main">
-                          <div>• {mb.rootBlock.content}</div>
-                          {mb.children.map((ch) => (
-                            <div key={ch.id} className="pl-3 text-muted text-[11px]">
-                              ◦ {ch.content}
+                        <div key={mb.rootBlock.id} className="space-y-1">
+                          {/* Root Bullet Point containing the hashtag */}
+                          <div
+                            onClick={() => handleJumpToDocBlock(docGroup.docId, mb.rootBlock.id)}
+                            className="flex items-start gap-1.5 text-xs text-main font-medium group cursor-pointer hover:bg-panel-elevated p-1 rounded-btn transition-colors"
+                            title="Klick: Zu dieser Zeile springen"
+                          >
+                            <span className="text-accent font-bold select-none">•</span>
+                            <span className="flex-1 break-words">{mb.rootBlock.content}</span>
+                          </div>
+
+                          {/* All Children indented */}
+                          {mb.children && mb.children.length > 0 && (
+                            <div className="space-y-0.5">
+                              {mb.children.map((ch) => {
+                                const relLevel = Math.max(
+                                  1,
+                                  (ch.level || 0) - (mb.rootBlock.level || 0)
+                                );
+                                return (
+                                  <div
+                                    key={ch.id}
+                                    onClick={() => handleJumpToDocBlock(docGroup.docId, ch.id)}
+                                    style={{ paddingLeft: `${relLevel * 16}px` }}
+                                    className="flex items-start gap-1.5 text-xs text-muted hover:text-main group cursor-pointer hover:bg-panel-elevated p-1 rounded-btn transition-colors"
+                                    title="Klick: Zu dieser Zeile springen"
+                                  >
+                                    {ch.type === 'todo' ? (
+                                      <span
+                                        className={`w-3.5 h-3.5 mt-0.5 checkbox-square flex items-center justify-center shrink-0 border ${
+                                          ch.checked
+                                            ? 'bg-status-ok border-status-ok text-on-accent'
+                                            : 'border-strong text-transparent'
+                                        }`}
+                                      >
+                                        <Check className="w-2.5 h-2.5 stroke-[3]" />
+                                      </span>
+                                    ) : (
+                                      <span className="text-faint group-hover:text-accent font-bold select-none">
+                                        ◦
+                                      </span>
+                                    )}
+                                    <span
+                                      className={`flex-1 break-words ${
+                                        ch.checked ? 'line-through text-faint' : ''
+                                      }`}
+                                    >
+                                      {ch.content}
+                                    </span>
+                                  </div>
+                                );
+                              })}
                             </div>
-                          ))}
+                          )}
                         </div>
                       ))}
                     </div>
@@ -968,7 +1200,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         ) : subView === 'todos' ? (
           <div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
             <div className="max-w-3xl mx-auto space-y-4">
-              <div className="flex items-center justify-between border-b border-border pb-3">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between border-b border-border pb-3 gap-2">
                 <div>
                   <h2 className="text-lg font-bold text-main">
                     Globaler To-Do Rollup ({totalOpenTodos} offen)
@@ -977,13 +1209,69 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     Alle Aufgaben aus deinen Notizen im gesamten Workspace
                   </p>
                 </div>
-                <button
-                  type="button"
-                  onClick={() => setSubView('editor')}
-                  className="btn-action px-3 py-1 text-xs text-main"
-                >
-                  Zum Editor
-                </button>
+
+                <div className="flex items-center gap-2">
+                  {/* View Grouping Selector */}
+                  <div className="flex rounded-btn bg-panel p-0.5 border border-border">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setTodoGrouping('folder_note');
+                        localStorage.setItem('mindsift_todo_grouping', 'folder_note');
+                      }}
+                      className={`px-2 py-1 text-[11px] font-semibold rounded-btn transition-colors cursor-pointer flex items-center gap-1 ${
+                        todoGrouping === 'folder_note'
+                          ? 'bg-panel-elevated text-main shadow-xs'
+                          : 'text-muted hover:text-main'
+                      }`}
+                      title="Gruppieren nach Ordner und Notiz"
+                    >
+                      <Folder className="w-3 h-3 text-accent" />
+                      <span>+</span>
+                      <FileText className="w-3 h-3 text-accent" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setTodoGrouping('note');
+                        localStorage.setItem('mindsift_todo_grouping', 'note');
+                      }}
+                      className={`px-2 py-1 text-[11px] font-semibold rounded-btn transition-colors cursor-pointer flex items-center gap-1 ${
+                        todoGrouping === 'note'
+                          ? 'bg-panel-elevated text-main shadow-xs'
+                          : 'text-muted hover:text-main'
+                      }`}
+                      title="Direkt nach Notiz gruppieren"
+                    >
+                      <FileText className="w-3 h-3 text-accent" />
+                      <span>Notiz</span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setTodoGrouping('folder');
+                        localStorage.setItem('mindsift_todo_grouping', 'folder');
+                      }}
+                      className={`px-2 py-1 text-[11px] font-semibold rounded-btn transition-colors cursor-pointer flex items-center gap-1 ${
+                        todoGrouping === 'folder'
+                          ? 'bg-panel-elevated text-main shadow-xs'
+                          : 'text-muted hover:text-main'
+                      }`}
+                      title="Nur nach Ordner gruppieren"
+                    >
+                      <Folder className="w-3 h-3 text-accent" />
+                      <span>Ordner</span>
+                    </button>
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() => setSubView('editor')}
+                    className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
+                  >
+                    Zum Editor
+                  </button>
+                </div>
               </div>
 
               {/* Folder Drilldown Tag */}
@@ -995,7 +1283,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                   <button
                     type="button"
                     onClick={() => setTodoFolderDrilldown(null)}
-                    className="text-accent hover:underline font-semibold"
+                    className="text-accent hover:underline font-semibold cursor-pointer"
                   >
                     Filter aufheben
                   </button>
@@ -1003,7 +1291,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               )}
 
               {/* Grouped Folders & To-Dos */}
-              {rollupTodosByFolder.size === 0 ? (
+              {allRollupTodos.length === 0 ? (
                 <div className="p-8 text-center text-muted text-xs space-y-1">
                   <Sparkles className="w-6 h-6 text-accent mx-auto mb-1" />
                   <p className="font-semibold text-main">Keine To-Dos in Notizen gefunden!</p>
@@ -1011,7 +1299,246 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     Tippe in einem beliebigen Dokument <code>/todo</code> oder <code>[] </code> ein.
                   </p>
                 </div>
+              ) : todoGrouping === 'note' ? (
+                /* Grouped by Note directly */
+                <div className="space-y-3">
+                  {Array.from(rollupTodosByNote.entries()).map(([docId, { doc, items }]) => {
+                    const isCollapsed = collapsedTodoNotes.has(docId);
+                    const openCount = items.filter((i) => !i.checked).length;
+
+                    return (
+                      <div
+                        key={docId}
+                        className="border border-border rounded-card bg-canvas overflow-hidden"
+                      >
+                        <div className="p-2 bg-canvas border-b border-border flex items-center justify-between">
+                          <div
+                            onClick={() => {
+                              setCollapsedTodoNotes((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(docId)) next.delete(docId);
+                                else next.add(docId);
+                                return next;
+                              });
+                            }}
+                            className="flex items-center gap-2 cursor-pointer select-none"
+                          >
+                            {isCollapsed ? (
+                              <ChevronRight className="w-3.5 h-3.5 text-faint" />
+                            ) : (
+                              <ChevronDown className="w-3.5 h-3.5 text-accent" />
+                            )}
+                            <span className="text-sm">{doc.icon || '📝'}</span>
+                            <span className="font-bold text-xs text-main">{doc.title}</span>
+                            {doc.folderPath && (
+                              <span className="badge-neutral text-[10px]">📁 {doc.folderPath}</span>
+                            )}
+                            <span className="badge-neutral text-[10px] font-mono">
+                              {openCount} offen
+                            </span>
+                          </div>
+
+                          <button
+                            type="button"
+                            onClick={() => handleJumpToDocBlock(doc.id)}
+                            className="text-[10px] text-accent hover:underline px-1.5 py-0.5 rounded-btn hover:bg-canvas cursor-pointer flex items-center gap-1"
+                            title="Zur Notiz springen"
+                          >
+                            <span>Notiz öffnen</span>
+                            <ExternalLink className="w-2.5 h-2.5" />
+                          </button>
+                        </div>
+
+                        {!isCollapsed && (
+                          <div className="p-2 space-y-1">
+                            {items.map((item) => (
+                              <div
+                                key={`${item.doc.id}-${item.blockId}`}
+                                className="flex items-center justify-between gap-2 p-1.5 rounded-btn hover:bg-panel-elevated text-xs transition-colors group cursor-pointer"
+                              >
+                                <div className="flex items-center gap-2 min-w-0 flex-1">
+                                  <button
+                                    type="button"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleToggleRollupTodo(item.doc, item.blockId, item.checked);
+                                    }}
+                                    className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center transition-colors border cursor-pointer ${
+                                      item.checked
+                                        ? 'bg-status-ok border-status-ok text-on-accent'
+                                        : 'border-strong hover:border-accent text-transparent'
+                                    }`}
+                                  >
+                                    <Check className="w-2.5 h-2.5 stroke-[3]" />
+                                  </button>
+                                  <span
+                                    onClick={() => handleJumpToDocBlock(item.doc.id, item.blockId)}
+                                    className={`truncate flex-1 ${
+                                      item.checked
+                                        ? 'line-through text-faint'
+                                        : 'text-main font-medium group-hover:text-accent'
+                                    }`}
+                                  >
+                                    {item.content}
+                                  </span>
+                                </div>
+                                <button
+                                  type="button"
+                                  onClick={() => handleJumpToDocBlock(item.doc.id, item.blockId)}
+                                  className="text-faint hover:text-accent opacity-0 group-hover:opacity-100 transition-opacity p-1"
+                                  title="Zu dieser Zeile springen"
+                                >
+                                  <ExternalLink className="w-3 h-3" />
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : todoGrouping === 'folder_note' ? (
+                /* Grouped by Folder -> grouped by Note */
+                <div className="space-y-3">
+                  {Array.from(rollupTodosByFolder.entries()).map(([folderName, items]) => {
+                    const isCollapsed = collapsedTodoFolders.has(folderName);
+                    const openCount = items.filter((i) => !i.checked).length;
+
+                    // Subgroup by doc
+                    const docGroupsMap = new Map<string, { doc: Document; items: typeof items }>();
+                    for (const it of items) {
+                      const ex = docGroupsMap.get(it.doc.id);
+                      if (ex) ex.items.push(it);
+                      else docGroupsMap.set(it.doc.id, { doc: it.doc, items: [it] });
+                    }
+
+                    return (
+                      <div
+                        key={folderName}
+                        className="border border-border rounded-card bg-canvas overflow-hidden"
+                      >
+                        {/* Folder Header */}
+                        <div className="p-2 bg-canvas border-b border-border flex items-center justify-between">
+                          <div
+                            onClick={() => {
+                              setCollapsedTodoFolders((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(folderName)) next.delete(folderName);
+                                else next.add(folderName);
+                                return next;
+                              });
+                            }}
+                            className="flex items-center gap-2 cursor-pointer select-none"
+                          >
+                            {isCollapsed ? (
+                              <ChevronRight className="w-3.5 h-3.5 text-faint" />
+                            ) : (
+                              <ChevronDown className="w-3.5 h-3.5 text-accent" />
+                            )}
+                            <Folder className="w-3.5 h-3.5 text-accent" />
+                            <span className="font-bold text-xs text-main">{folderName}</span>
+                            <span className="badge-neutral text-[10px] font-mono">
+                              {openCount} offen
+                            </span>
+                          </div>
+
+                          <button
+                            type="button"
+                            onClick={() => setTodoFolderDrilldown(folderName)}
+                            className="text-[10px] text-muted hover:text-main px-1.5 py-0.5 rounded-btn hover:bg-canvas cursor-pointer"
+                            title="Diesen Ordner isolieren"
+                          >
+                            Nur diesen Ordner
+                          </button>
+                        </div>
+
+                        {/* Folder Notes Subgroups */}
+                        {!isCollapsed && (
+                          <div className="p-2 space-y-3">
+                            {Array.from(docGroupsMap.values()).map(({ doc, items: docItems }) => {
+                              const docOpenCount = docItems.filter((i) => !i.checked).length;
+                              return (
+                                <div
+                                  key={doc.id}
+                                  className="border border-border/60 rounded-btn p-2 bg-panel-elevated/30 space-y-1.5"
+                                >
+                                  <div className="flex items-center justify-between pb-1 border-b border-border/40">
+                                    <button
+                                      type="button"
+                                      onClick={() => handleJumpToDocBlock(doc.id)}
+                                      className="flex items-center gap-1.5 text-xs font-semibold text-accent hover:underline cursor-pointer"
+                                    >
+                                      <span>{doc.icon || '📝'}</span>
+                                      <span>{doc.title}</span>
+                                      <span className="badge-neutral text-[9px]">
+                                        {docOpenCount} offen
+                                      </span>
+                                    </button>
+                                  </div>
+
+                                  <div className="space-y-0.5">
+                                    {docItems.map((item) => (
+                                      <div
+                                        key={`${item.doc.id}-${item.blockId}`}
+                                        className="flex items-center justify-between gap-2 p-1 rounded-btn hover:bg-canvas text-xs transition-colors group cursor-pointer"
+                                      >
+                                        <div className="flex items-center gap-2 min-w-0 flex-1">
+                                          <button
+                                            type="button"
+                                            onClick={(e) => {
+                                              e.stopPropagation();
+                                              handleToggleRollupTodo(
+                                                item.doc,
+                                                item.blockId,
+                                                item.checked
+                                              );
+                                            }}
+                                            className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center transition-colors border cursor-pointer ${
+                                              item.checked
+                                                ? 'bg-status-ok border-status-ok text-on-accent'
+                                                : 'border-strong hover:border-accent text-transparent'
+                                            }`}
+                                          >
+                                            <Check className="w-2.5 h-2.5 stroke-[3]" />
+                                          </button>
+                                          <span
+                                            onClick={() =>
+                                              handleJumpToDocBlock(item.doc.id, item.blockId)
+                                            }
+                                            className={`truncate flex-1 ${
+                                              item.checked
+                                                ? 'line-through text-faint'
+                                                : 'text-main font-medium group-hover:text-accent'
+                                            }`}
+                                          >
+                                            {item.content}
+                                          </span>
+                                        </div>
+                                        <button
+                                          type="button"
+                                          onClick={() =>
+                                            handleJumpToDocBlock(item.doc.id, item.blockId)
+                                          }
+                                          className="text-faint hover:text-accent opacity-0 group-hover:opacity-100 transition-opacity p-1"
+                                          title="Zu dieser Zeile springen"
+                                        >
+                                          <ExternalLink className="w-3 h-3" />
+                                        </button>
+                                      </div>
+                                    ))}
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
               ) : (
+                /* Grouped by Folder (Flat tasks inside folder) */
                 <div className="space-y-3">
                   {Array.from(rollupTodosByFolder.entries()).map(([folderName, items]) => {
                     const isCollapsed = collapsedTodoFolders.has(folderName);
@@ -1050,7 +1577,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                           <button
                             type="button"
                             onClick={() => setTodoFolderDrilldown(folderName)}
-                            className="text-[10px] text-muted hover:text-main px-1.5 py-0.5 rounded-btn hover:bg-canvas"
+                            className="text-[10px] text-muted hover:text-main px-1.5 py-0.5 rounded-btn hover:bg-canvas cursor-pointer"
                             title="Diesen Ordner isolieren"
                           >
                             Nur diesen Ordner
@@ -1063,15 +1590,16 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                             {items.map((item) => (
                               <div
                                 key={`${item.doc.id}-${item.blockId}`}
-                                className="flex items-center justify-between gap-2 p-1.5 rounded-btn hover:bg-canvas text-xs"
+                                className="flex items-center justify-between gap-2 p-1.5 rounded-btn hover:bg-panel-elevated text-xs transition-colors group cursor-pointer"
                               >
-                                <div className="flex items-center gap-2 min-w-0">
+                                <div className="flex items-center gap-2 min-w-0 flex-1">
                                   <button
                                     type="button"
-                                    onClick={() =>
-                                      handleToggleRollupTodo(item.doc, item.blockId, item.checked)
-                                    }
-                                    className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center transition-colors border ${
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleToggleRollupTodo(item.doc, item.blockId, item.checked);
+                                    }}
+                                    className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center transition-colors border cursor-pointer ${
                                       item.checked
                                         ? 'bg-status-ok border-status-ok text-on-accent'
                                         : 'border-strong hover:border-accent text-transparent'
@@ -1080,10 +1608,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                                     <Check className="w-2.5 h-2.5 stroke-[3]" />
                                   </button>
                                   <span
-                                    className={`truncate ${
+                                    onClick={() => handleJumpToDocBlock(item.doc.id, item.blockId)}
+                                    className={`truncate flex-1 ${
                                       item.checked
                                         ? 'line-through text-faint'
-                                        : 'text-main font-medium'
+                                        : 'text-main font-medium group-hover:text-accent'
                                     }`}
                                   >
                                     {item.content}
@@ -1091,11 +1620,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                                 </div>
                                 <button
                                   type="button"
-                                  onClick={() => {
-                                    setSelectedDocId(item.doc.id);
-                                    setSubView('editor');
-                                  }}
-                                  className="text-[11px] text-accent hover:underline flex items-center gap-1 shrink-0"
+                                  onClick={() => handleJumpToDocBlock(item.doc.id, item.blockId)}
+                                  className="text-[11px] text-accent hover:underline flex items-center gap-1 shrink-0 cursor-pointer"
+                                  title="Zu dieser Zeile springen"
                                 >
                                   <span>{item.doc.icon || '📝'}</span>
                                   <span className="truncate max-w-[120px]">{item.doc.title}</span>
diff --git a/internal/storage/sqlite.go b/internal/storage/sqlite.go
index 6b206f5..c744eb6 100644
--- a/internal/storage/sqlite.go
+++ b/internal/storage/sqlite.go
@@ -2404,11 +2404,18 @@ func (s *Store) GetWorkspaceTags(userID string) ([]domain.TagSummary, error) {
 		     JOIN team_members tm ON tm.team_id = dts2.team_id
 		     WHERE tm.user_id = ?
 		 ) dts ON d.id = dts.doc_id
-		 WHERE (d.user_id = ? OR s.user_id = ? OR dts.doc_id IS NOT NULL)
+		 LEFT JOIN workspace_shared_folders wsf ON d.shared_folder_id = wsf.id
+		 LEFT JOIN (
+		     SELECT wfs2.folder_id
+		     FROM workspace_folder_shares wfs2
+		     WHERE (wfs2.target_type = 'user' AND wfs2.target_id = ?)
+		        OR (wfs2.target_type = 'team' AND wfs2.target_id IN (SELECT team_id FROM team_members WHERE user_id = ?))
+		 ) wfs ON d.shared_folder_id = wfs.folder_id
+		 WHERE (d.user_id = ? OR s.user_id = ? OR dts.doc_id IS NOT NULL OR (wsf.id IS NOT NULL AND (wsf.owner_id = ? OR wfs.folder_id IS NOT NULL)))
 		   AND d.is_archived = 0
 		 GROUP BY t.tag
 		 ORDER BY count DESC, t.tag ASC`,
-		userID, userID, userID, userID,
+		userID, userID, userID, userID, userID, userID, userID,
 	)
 	if err != nil {
 		return nil, err
@@ -2460,7 +2467,7 @@ func (s *Store) GetTagDetails(userID, tag string) (*domain.TagDetails, error) {
 	rows, err := s.db.Query(
 		`SELECT t.block_id, d.id, d.title, d.icon, d.folder_path, d.blocks_json, d.updated_at, d.user_id,
 		        COALESCE(u.display_name, '') as owner_name,
-		        COALESCE(s.permission, dts.permission, '') as shared_permission
+		        COALESCE(s.permission, dts.permission, wfs.permission, '') as shared_permission
 		 FROM block_tags t
 		 JOIN documents d ON t.document_id = d.id
 		 LEFT JOIN users u ON d.user_id = u.id
@@ -2471,11 +2478,18 @@ func (s *Store) GetTagDetails(userID, tag string) (*domain.TagDetails, error) {
 		     JOIN team_members tm ON tm.team_id = dts2.team_id
 		     WHERE tm.user_id = ?
 		 ) dts ON d.id = dts.doc_id
-		 WHERE (d.user_id = ? OR s.user_id = ? OR dts.doc_id IS NOT NULL)
+		 LEFT JOIN workspace_shared_folders wsf ON d.shared_folder_id = wsf.id
+		 LEFT JOIN (
+		     SELECT wfs2.folder_id, wfs2.permission
+		     FROM workspace_folder_shares wfs2
+		     WHERE (wfs2.target_type = 'user' AND wfs2.target_id = ?)
+		        OR (wfs2.target_type = 'team' AND wfs2.target_id IN (SELECT team_id FROM team_members WHERE user_id = ?))
+		 ) wfs ON d.shared_folder_id = wfs.folder_id
+		 WHERE (d.user_id = ? OR s.user_id = ? OR dts.doc_id IS NOT NULL OR (wsf.id IS NOT NULL AND (wsf.owner_id = ? OR wfs.folder_id IS NOT NULL)))
 		   AND t.tag = ?
 		   AND d.is_archived = 0
 		 ORDER BY d.updated_at DESC`,
-		userID, userID, userID, userID, cleanTag,
+		userID, userID, userID, userID, userID, userID, userID, cleanTag,
 	)
 	if err != nil {
 		return nil, err
-- 
2.54.0


From 27b3567008c5b480ede15c7ed1c8752f631f7d4c Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 07:11:28 +0100
Subject: [PATCH 16/33] style(workspace): align LinkModal 1:1 with
 UnifiedShareModal design language

---
 frontend/src/features/workspace/LinkModal.tsx | 208 ++++++++++--------
 1 file changed, 119 insertions(+), 89 deletions(-)

diff --git a/frontend/src/features/workspace/LinkModal.tsx b/frontend/src/features/workspace/LinkModal.tsx
index 5c44b0d..2f31dcf 100644
--- a/frontend/src/features/workspace/LinkModal.tsx
+++ b/frontend/src/features/workspace/LinkModal.tsx
@@ -1,5 +1,14 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { Link as LinkIcon, FileText, Globe, X, Search, ExternalLink, Loader2 } from 'lucide-react';
+import {
+  Link as LinkIcon,
+  FileText,
+  Globe,
+  X,
+  Search,
+  ExternalLink,
+  Loader2,
+  Plus,
+} from 'lucide-react';
 import { api } from '../../lib/api';
 import { Document } from '../../lib/types';
 
@@ -117,7 +126,7 @@ export const LinkModal: React.FC<LinkModalProps> = ({
       }}
     >
       <div className="panel-surface w-full max-w-lg p-5 shadow-panel rounded-card border border-border space-y-4 animate-in fade-in zoom-in-95 duration-150">
-        {/* Header */}
+        {/* Header - identical to UnifiedShareModal */}
         <div className="flex items-center justify-between pb-3 border-b border-border">
           <div className="flex items-center gap-2.5 min-w-0">
             <div className="w-8 h-8 rounded-btn bg-accent/15 text-accent flex items-center justify-center shrink-0">
@@ -134,96 +143,58 @@ export const LinkModal: React.FC<LinkModalProps> = ({
             type="button"
             onClick={onClose}
             className="p-1.5 text-muted hover:text-main rounded-btn hover:bg-panel transition-colors cursor-pointer"
-            title="Schließen (Esc)"
+            title="Schließen"
           >
             <X className="w-4 h-4" />
           </button>
         </div>
 
-        {/* Tab Switcher */}
-        <div className="flex rounded-btn bg-panel p-0.5 border border-border">
-          <button
-            type="button"
-            onClick={() => setTab('note')}
-            className={`flex-1 flex items-center justify-center gap-1.5 py-1.5 text-xs font-semibold rounded-btn transition-colors cursor-pointer ${
-              tab === 'note'
-                ? 'bg-panel-elevated text-main shadow-xs'
-                : 'text-muted hover:text-main'
-            }`}
-          >
-            <FileText className="w-3.5 h-3.5" />
-            <span>Notiz verknüpfen</span>
-          </button>
-          <button
-            type="button"
-            onClick={() => setTab('web')}
-            className={`flex-1 flex items-center justify-center gap-1.5 py-1.5 text-xs font-semibold rounded-btn transition-colors cursor-pointer ${
-              tab === 'web'
-                ? 'bg-panel-elevated text-main shadow-xs'
-                : 'text-muted hover:text-main'
-            }`}
-          >
-            <Globe className="w-3.5 h-3.5" />
-            <span>Web-Link</span>
-          </button>
-        </div>
+        {/* Control Box - matching UnifiedShareModal form header */}
+        <div className="space-y-3 p-3 bg-panel-elevated border border-border rounded-card">
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-xs font-semibold text-main">Link-Typ:</span>
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => setTab('note')}
+                className={`h-7 px-2.5 text-xs rounded-btn font-medium flex items-center gap-1.5 border transition-colors cursor-pointer ${
+                  tab === 'note'
+                    ? 'bg-panel border-accent text-accent font-semibold shadow-xs'
+                    : 'bg-canvas border-border text-muted hover:text-main'
+                }`}
+              >
+                <FileText className="w-3.5 h-3.5" />
+                <span>Notiz</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => setTab('web')}
+                className={`h-7 px-2.5 text-xs rounded-btn font-medium flex items-center gap-1.5 border transition-colors cursor-pointer ${
+                  tab === 'web'
+                    ? 'bg-panel border-accent text-accent font-semibold shadow-xs'
+                    : 'bg-canvas border-border text-muted hover:text-main'
+                }`}
+              >
+                <Globe className="w-3.5 h-3.5" />
+                <span>Web-Link</span>
+              </button>
+            </div>
+          </div>
 
-        {/* Modal Body */}
-        <div>
           {tab === 'note' ? (
-            <div className="space-y-3">
-              <div className="relative">
-                <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-muted" />
-                <input
-                  ref={searchInputRef}
-                  type="text"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Notiz nach Titel oder Ordner filtern…"
-                  className="input-field w-full text-xs pl-8 pr-3 py-2 text-main"
-                />
-              </div>
-
-              {loading ? (
-                <div className="py-8 flex items-center justify-center text-xs text-muted gap-2">
-                  <Loader2 className="w-4 h-4 animate-spin text-accent" />
-                  <span>Notizen werden geladen…</span>
-                </div>
-              ) : (
-                <div className="max-h-64 overflow-y-auto space-y-1 pr-1">
-                  {filteredDocs.map((d) => (
-                    <button
-                      key={d.id}
-                      type="button"
-                      onClick={() => handleSelectNote(d)}
-                      className="w-full text-left px-3 py-2 rounded-btn hover:bg-panel border border-transparent hover:border-border flex items-center justify-between text-xs transition-colors group cursor-pointer"
-                    >
-                      <div className="flex items-center gap-2 min-w-0">
-                        <span className="text-base shrink-0">{d.icon || '📝'}</span>
-                        <span className="font-semibold text-main truncate group-hover:text-accent">
-                          {d.title || 'Unbenannte Notiz'}
-                        </span>
-                      </div>
-                      {d.folderPath && (
-                        <span className="badge-neutral text-[10px] ml-2 shrink-0 truncate max-w-[120px]">
-                          📁 {d.folderPath}
-                        </span>
-                      )}
-                    </button>
-                  ))}
-
-                  {filteredDocs.length === 0 && (
-                    <div className="py-8 text-center text-xs text-muted border border-dashed border-border rounded-card">
-                      {search
-                        ? `Keine Notiz für "${search}" gefunden.`
-                        : 'Keine Notizen im Workspace vorhanden.'}
-                    </div>
-                  )}
-                </div>
-              )}
+            <div className="relative">
+              <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-muted pointer-events-none" />
+              <input
+                ref={searchInputRef}
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Notiz suchen (Titel oder Ordner)…"
+                className="input-field bg-panel h-8 pl-8 pr-2.5 text-xs w-full text-main placeholder:text-muted"
+              />
             </div>
           ) : (
-            <form onSubmit={handleWebLinkSubmit} className="space-y-3">
+            <form onSubmit={handleWebLinkSubmit} className="space-y-2.5">
               <div>
                 <label className="text-[10px] font-bold uppercase tracking-wider text-faint mb-1 block">
                   Link-Text / Label
@@ -234,7 +205,7 @@ export const LinkModal: React.FC<LinkModalProps> = ({
                   value={webTitle}
                   onChange={(e) => setWebTitle(e.target.value)}
                   placeholder="z. B. MindSift Dokumentation"
-                  className="input-field w-full p-2 text-xs text-main"
+                  className="input-field bg-panel h-8 px-2.5 text-xs w-full text-main placeholder:text-muted"
                 />
               </div>
 
@@ -248,30 +219,89 @@ export const LinkModal: React.FC<LinkModalProps> = ({
                   value={webUrl}
                   onChange={(e) => setWebUrl(e.target.value)}
                   placeholder="https://example.com"
-                  className="input-field w-full p-2 text-xs text-main"
+                  className="input-field bg-panel h-8 px-2.5 text-xs w-full text-main placeholder:text-muted"
                 />
               </div>
 
-              <div className="pt-2 flex justify-end gap-2 border-t border-border">
+              <div className="flex justify-end gap-2 pt-1">
                 <button
                   type="button"
                   onClick={onClose}
-                  className="btn-action px-3 py-1.5 text-xs text-main cursor-pointer"
+                  className="btn-action text-xs h-8 px-3.5 cursor-pointer"
                 >
                   Abbrechen
                 </button>
                 <button
                   type="submit"
                   disabled={!webUrl.trim()}
-                  className="btn-primary inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-on-accent rounded-btn disabled:opacity-50 transition-opacity cursor-pointer"
+                  className="btn-primary text-xs h-8 px-3.5 flex items-center gap-1.5 cursor-pointer disabled:opacity-50"
                 >
-                  <ExternalLink className="w-3.5 h-3.5" />
+                  <Plus className="w-3.5 h-3.5" />
                   <span>Link einfügen</span>
                 </button>
               </div>
             </form>
           )}
         </div>
+
+        {/* Note List Section (Matching Active Shares list in UnifiedShareModal) */}
+        {tab === 'note' && (
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-xs font-semibold text-muted uppercase tracking-wider px-0.5">
+              <span>Verfügbare Notizen</span>
+              <span className="font-mono text-[11px] font-normal lowercase">
+                {filteredDocs.length} {filteredDocs.length === 1 ? 'Notiz' : 'Notizen'}
+              </span>
+            </div>
+
+            <div className="space-y-1.5 max-h-56 overflow-y-auto pr-0.5">
+              {loading ? (
+                <div className="p-6 bg-canvas border border-border rounded-card text-xs text-muted flex items-center gap-2 justify-center text-center">
+                  <Loader2 className="w-4 h-4 animate-spin text-accent" />
+                  <span>Notizen werden geladen…</span>
+                </div>
+              ) : filteredDocs.length === 0 ? (
+                <div className="p-4 bg-canvas border border-border rounded-card text-xs text-muted flex items-center gap-2.5 justify-center text-center">
+                  <Search className="w-4 h-4 text-faint shrink-0" />
+                  <span>
+                    {search
+                      ? `Keine Notiz für "${search}" gefunden.`
+                      : 'Keine Notizen im Workspace vorhanden.'}
+                  </span>
+                </div>
+              ) : (
+                filteredDocs.map((d) => (
+                  <div
+                    key={d.id}
+                    onClick={() => handleSelectNote(d)}
+                    className="flex items-center justify-between p-2.5 bg-canvas border border-border rounded-card hover:border-accent/60 transition-colors group cursor-pointer"
+                  >
+                    <div className="flex items-center gap-2.5 min-w-0">
+                      <span className="text-base shrink-0">{d.icon || '📝'}</span>
+                      <div className="min-w-0">
+                        <div className="text-xs font-semibold text-main truncate group-hover:text-accent">
+                          {d.title || 'Unbenannte Notiz'}
+                        </div>
+                        {d.folderPath && (
+                          <div className="text-[10px] text-muted truncate">
+                            📁 {d.folderPath}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <button
+                      type="button"
+                      className="btn-action text-xs h-7 px-2.5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 text-accent cursor-pointer shrink-0"
+                    >
+                      <span>Einfügen</span>
+                      <ExternalLink className="w-3 h-3" />
+                    </button>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );
-- 
2.54.0


From d3dd4c8cc6134c92d27c56af15fe01dbf2ce28c2 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 07:16:20 +0100
Subject: [PATCH 17/33] fix(workspace): refine folder row drop target,
 depth-first tree sorting & auto-expansion

---
 .../src/features/workspace/WorkspaceView.tsx  | 60 ++++++++++++++-----
 1 file changed, 45 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index c6c88d4..73b183a 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -89,22 +89,20 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
   const hasContent = node.subfolders.length > 0 || node.docs.length > 0;
 
   return (
-    <div
-      onDragOver={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setDragOverFolder(node.fullPath);
-      }}
-      onDragLeave={(e) => {
-        e.preventDefault();
-        if (dragOverFolder === node.fullPath) setDragOverFolder(null);
-      }}
-      onDrop={(e) => handleDropOnFolder(node.fullPath, e)}
-      className="space-y-0.5"
-    >
+    <div className="space-y-0.5">
       <div
         draggable
         onDragStart={(e) => handleFolderDragStart(e, node.fullPath)}
+        onDragOver={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDragOverFolder(node.fullPath);
+        }}
+        onDragLeave={(e) => {
+          e.preventDefault();
+          if (dragOverFolder === node.fullPath) setDragOverFolder(null);
+        }}
+        onDrop={(e) => handleDropOnFolder(node.fullPath, e)}
         style={{ paddingLeft: `${depth * 12 + 8}px` }}
         className={`group flex items-center justify-between pr-2 py-1 rounded-btn text-xs cursor-pointer transition-colors ${
           isDragOver
@@ -464,7 +462,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       }
       const res = await api.createFolder(clean);
       setFolders((prev) => (prev.includes(res.path) ? prev : [...prev, res.path].sort()));
-      setExpandedFolders((prev) => ({ ...prev, [res.path]: true }));
+      const parts = res.path.split('/');
+      let acc = '';
+      const expansions: Record<string, boolean> = {};
+      for (const part of parts) {
+        acc = acc ? `${acc}/${part}` : part;
+        expansions[acc] = true;
+      }
+      setExpandedFolders((prev) => ({ ...prev, ...expansions }));
       setNewFolderName('');
       setNewFolderIsShared(false);
       setShowNewFolderModal(false);
@@ -526,6 +531,16 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         setDocs((prev) =>
           prev.map((d) => (d.id === docId ? { ...d, folderPath: updatedDoc.folderPath } : d))
         );
+        if (targetFolder) {
+          const parts = targetFolder.split('/');
+          let acc = '';
+          const expansions: Record<string, boolean> = {};
+          for (const part of parts) {
+            acc = acc ? `${acc}/${part}` : part;
+            expansions[acc] = true;
+          }
+          setExpandedFolders((prev) => ({ ...prev, ...expansions }));
+        }
       } catch {
         // ignore
       }
@@ -533,6 +548,16 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       triggerHaptic(15);
       try {
         await api.moveFolder(folderPath, targetFolder);
+        if (targetFolder) {
+          const parts = targetFolder.split('/');
+          let acc = '';
+          const expansions: Record<string, boolean> = {};
+          for (const part of parts) {
+            acc = acc ? `${acc}/${part}` : part;
+            expansions[acc] = true;
+          }
+          setExpandedFolders((prev) => ({ ...prev, ...expansions }));
+        }
         loadWorkspaceData();
       } catch {
         // ignore
@@ -672,7 +697,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       }
     }
 
-    const sortedPaths = Array.from(allPathsSet).sort((a, b) => a.localeCompare(b));
+    const sortedPaths = Array.from(allPathsSet).sort((a, b) => {
+      const depthA = a.split('/').length;
+      const depthB = b.split('/').length;
+      if (depthA !== depthB) return depthA - depthB;
+      return a.localeCompare(b);
+    });
 
     for (const p of sortedPaths) {
       const parts = p.split('/');
-- 
2.54.0


From ffa14b01a2d3576ae9613960bbd89df76ba8481d Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 07:17:27 +0100
Subject: [PATCH 18/33] style(workspace): remove any border or box from doc
 title emoji

---
 frontend/src/features/workspace/DocumentEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
index cc287af..da21364 100644
--- a/frontend/src/features/workspace/DocumentEditor.tsx
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -963,7 +963,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
                 <button
                   type="button"
                   onClick={() => canEdit && setShowEmojiPicker((prev) => !prev)}
-                  className="text-2xl sm:text-3xl hover:opacity-80 transition-opacity p-0.5 rounded cursor-pointer select-none"
+                  className="text-2xl sm:text-3xl hover:opacity-80 transition-opacity cursor-pointer select-none leading-none bg-transparent border-0 outline-none p-0 focus:outline-none focus:ring-0 shadow-none"
                   title="Icon ändern"
                 >
                   {doc?.icon || '📝'}
-- 
2.54.0


From 5144f7b01b7b3c32aacbe4b5fa777132fe8619be Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 07:19:47 +0100
Subject: [PATCH 19/33] fix(workspace): ensure immediate cursor autofocus and
 select on note title creation

---
 .../src/features/workspace/DocumentEditor.tsx | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
index da21364..2142b77 100644
--- a/frontend/src/features/workspace/DocumentEditor.tsx
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -165,17 +165,28 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   const [showFolderMenu, setShowFolderMenu] = useState<boolean>(false);
   const [zoomedBlockId, setZoomedBlockId] = useState<string | null>(null);
 
+  const titleInputRef = useRef<HTMLInputElement | null>(null);
+  const titleDebounceRef = useRef<number | null>(null);
+  const docRef = useRef<Document | null>(doc);
+  docRef.current = doc;
+
   useEffect(() => {
-    if (autoFocusTitle || (doc?.title === 'Neue Notiz' && !doc?.markdownCache)) {
-      const timer = setTimeout(() => {
+    if (!loading && (autoFocusTitle || (doc?.title === 'Neue Notiz' && (!doc?.blocks || doc?.blocks.length <= 1)))) {
+      const focusTitle = () => {
         if (titleInputRef.current) {
           titleInputRef.current.focus();
           titleInputRef.current.select();
         }
-      }, 60);
-      return () => clearTimeout(timer);
+      };
+      focusTitle();
+      const t1 = setTimeout(focusTitle, 50);
+      const t2 = setTimeout(focusTitle, 150);
+      return () => {
+        clearTimeout(t1);
+        clearTimeout(t2);
+      };
     }
-  }, [autoFocusTitle]);
+  }, [loading, autoFocusTitle, doc?.id]);
 
   useEffect(() => {
     if (zoomedBlockId && !blocks.some((b) => b.id === zoomedBlockId)) {
@@ -191,11 +202,6 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
     return computeBreadcrumbs(title || doc?.title || 'Dokument', blocks, zoomedBlockId);
   }, [title, doc?.title, blocks, zoomedBlockId]);
 
-  const titleInputRef = useRef<HTMLInputElement | null>(null);
-  const titleDebounceRef = useRef<number | null>(null);
-  const docRef = useRef<Document | null>(doc);
-  docRef.current = doc;
-
   // Crucial fix: Collaborator with write permission can edit!
   const canEdit = useMemo(() => {
     if (!doc) return true;
@@ -342,7 +348,9 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   // Fetch isolated document state on mount
   useEffect(() => {
     let isCancelled = false;
-    setLoading(true);
+    if (!initialDoc) {
+      setLoading(true);
+    }
     setError(null);
 
     api
@@ -989,6 +997,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
                 type="text"
                 value={title}
                 readOnly={!canEdit}
+                autoFocus={autoFocusTitle}
                 onChange={handleTitleChange}
                 onBlur={handleTitleBlur}
                 placeholder="Titel der Notiz…"
-- 
2.54.0


From 928cc72491976fed5b96d53730d2d39fad948980 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 07:21:31 +0100
Subject: [PATCH 20/33] feat(workspace): enhance todo view switcher and add
 note-level collapsible cards in folder_note mode

---
 .../src/features/workspace/WorkspaceView.tsx  | 134 +++++++++++-------
 1 file changed, 81 insertions(+), 53 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 73b183a..db89a42 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -1240,9 +1240,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                   </p>
                 </div>
 
-                <div className="flex items-center gap-2">
+                <div className="flex flex-wrap items-center gap-2">
                   {/* View Grouping Selector */}
-                  <div className="flex rounded-btn bg-panel p-0.5 border border-border">
+                  <div className="flex items-center rounded-btn bg-panel p-0.5 border border-border shadow-xs">
+                    <span className="text-[10px] uppercase font-bold text-faint px-1.5 hidden sm:inline">
+                      Ansicht:
+                    </span>
                     <button
                       type="button"
                       onClick={() => {
@@ -1254,11 +1257,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                           ? 'bg-panel-elevated text-main shadow-xs'
                           : 'text-muted hover:text-main'
                       }`}
-                      title="Gruppieren nach Ordner und Notiz"
+                      title="Erst nach Ordner, dann nach Notiz gruppieren"
                     >
                       <Folder className="w-3 h-3 text-accent" />
                       <span>+</span>
                       <FileText className="w-3 h-3 text-accent" />
+                      <span>Ordner & Notiz</span>
                     </button>
                     <button
                       type="button"
@@ -1488,76 +1492,100 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                           <div className="p-2 space-y-3">
                             {Array.from(docGroupsMap.values()).map(({ doc, items: docItems }) => {
                               const docOpenCount = docItems.filter((i) => !i.checked).length;
+                              const isDocCollapsed = collapsedTodoNotes.has(doc.id);
                               return (
                                 <div
                                   key={doc.id}
                                   className="border border-border/60 rounded-btn p-2 bg-panel-elevated/30 space-y-1.5"
                                 >
                                   <div className="flex items-center justify-between pb-1 border-b border-border/40">
+                                    <div
+                                      onClick={() => {
+                                        setCollapsedTodoNotes((prev) => {
+                                          const next = new Set(prev);
+                                          if (next.has(doc.id)) next.delete(doc.id);
+                                          else next.add(doc.id);
+                                          return next;
+                                        });
+                                      }}
+                                      className="flex items-center gap-1.5 text-xs font-semibold text-main hover:text-accent cursor-pointer select-none"
+                                    >
+                                      {isDocCollapsed ? (
+                                        <ChevronRight className="w-3 h-3 text-faint" />
+                                      ) : (
+                                        <ChevronDown className="w-3 h-3 text-accent" />
+                                      )}
+                                      <span>{doc.icon || '📝'}</span>
+                                      <span>{doc.title}</span>
+                                      <span className="badge-neutral text-[9px] font-mono">
+                                        {docOpenCount} offen
+                                      </span>
+                                    </div>
+
                                     <button
                                       type="button"
                                       onClick={() => handleJumpToDocBlock(doc.id)}
-                                      className="flex items-center gap-1.5 text-xs font-semibold text-accent hover:underline cursor-pointer"
+                                      className="text-[10px] text-accent hover:underline px-1.5 py-0.5 rounded-btn hover:bg-canvas cursor-pointer flex items-center gap-1"
+                                      title="Notiz öffnen"
                                     >
-                                      <span>{doc.icon || '📝'}</span>
-                                      <span>{doc.title}</span>
-                                      <span className="badge-neutral text-[9px]">
-                                        {docOpenCount} offen
-                                      </span>
+                                      <span>Notiz öffnen</span>
+                                      <ExternalLink className="w-2.5 h-2.5" />
                                     </button>
                                   </div>
 
-                                  <div className="space-y-0.5">
-                                    {docItems.map((item) => (
-                                      <div
-                                        key={`${item.doc.id}-${item.blockId}`}
-                                        className="flex items-center justify-between gap-2 p-1 rounded-btn hover:bg-canvas text-xs transition-colors group cursor-pointer"
-                                      >
-                                        <div className="flex items-center gap-2 min-w-0 flex-1">
+                                  {!isDocCollapsed && (
+                                    <div className="space-y-0.5">
+                                      {docItems.map((item) => (
+                                        <div
+                                          key={`${item.doc.id}-${item.blockId}`}
+                                          className="flex items-center justify-between gap-2 p-1 rounded-btn hover:bg-canvas text-xs transition-colors group cursor-pointer"
+                                        >
+                                          <div className="flex items-center gap-2 min-w-0 flex-1">
+                                            <button
+                                              type="button"
+                                              onClick={(e) => {
+                                                e.stopPropagation();
+                                                handleToggleRollupTodo(
+                                                  item.doc,
+                                                  item.blockId,
+                                                  item.checked
+                                                );
+                                              }}
+                                              className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center transition-colors border cursor-pointer ${
+                                                item.checked
+                                                  ? 'bg-status-ok border-status-ok text-on-accent'
+                                                  : 'border-strong hover:border-accent text-transparent'
+                                              }`}
+                                            >
+                                              <Check className="w-2.5 h-2.5 stroke-[3]" />
+                                            </button>
+                                            <span
+                                              onClick={() =>
+                                                handleJumpToDocBlock(item.doc.id, item.blockId)
+                                              }
+                                              className={`truncate flex-1 ${
+                                                item.checked
+                                                  ? 'line-through text-faint'
+                                                  : 'text-main font-medium group-hover:text-accent'
+                                              }`}
+                                            >
+                                              {item.content}
+                                            </span>
+                                          </div>
                                           <button
                                             type="button"
-                                            onClick={(e) => {
-                                              e.stopPropagation();
-                                              handleToggleRollupTodo(
-                                                item.doc,
-                                                item.blockId,
-                                                item.checked
-                                              );
-                                            }}
-                                            className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center transition-colors border cursor-pointer ${
-                                              item.checked
-                                                ? 'bg-status-ok border-status-ok text-on-accent'
-                                                : 'border-strong hover:border-accent text-transparent'
-                                            }`}
-                                          >
-                                            <Check className="w-2.5 h-2.5 stroke-[3]" />
-                                          </button>
-                                          <span
                                             onClick={() =>
                                               handleJumpToDocBlock(item.doc.id, item.blockId)
                                             }
-                                            className={`truncate flex-1 ${
-                                              item.checked
-                                                ? 'line-through text-faint'
-                                                : 'text-main font-medium group-hover:text-accent'
-                                            }`}
+                                            className="text-faint hover:text-accent opacity-0 group-hover:opacity-100 transition-opacity p-1"
+                                            title="Zu dieser Zeile springen"
                                           >
-                                            {item.content}
-                                          </span>
+                                            <ExternalLink className="w-3 h-3" />
+                                          </button>
                                         </div>
-                                        <button
-                                          type="button"
-                                          onClick={() =>
-                                            handleJumpToDocBlock(item.doc.id, item.blockId)
-                                          }
-                                          className="text-faint hover:text-accent opacity-0 group-hover:opacity-100 transition-opacity p-1"
-                                          title="Zu dieser Zeile springen"
-                                        >
-                                          <ExternalLink className="w-3 h-3" />
-                                        </button>
-                                      </div>
-                                    ))}
-                                  </div>
+                                      ))}
+                                    </div>
+                                  )}
                                 </div>
                               );
                             })}
-- 
2.54.0


From 149cfdc244caaccf478a01a6b1938d29e6cc8800 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 07:23:23 +0100
Subject: [PATCH 21/33] fix(workspace): select and focus exact block line when
 jumping from todos or tags

---
 .../src/features/workspace/OutlinerTree.tsx   | 89 +++++++++++--------
 1 file changed, 52 insertions(+), 37 deletions(-)

diff --git a/frontend/src/features/workspace/OutlinerTree.tsx b/frontend/src/features/workspace/OutlinerTree.tsx
index 107e8d5..41b1762 100644
--- a/frontend/src/features/workspace/OutlinerTree.tsx
+++ b/frontend/src/features/workspace/OutlinerTree.tsx
@@ -45,27 +45,33 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
 
   const textareaMapRef = useRef<Map<string, HTMLTextAreaElement>>(new Map());
-  const pendingFocusRef = useRef<{ blockId: string; cursor: 'start' | 'end' } | null>(null);
+  const pendingFocusRef = useRef<{ blockId: string; cursor: 'start' | 'end' | 'select' } | null>(null);
 
-  useEffect(() => {
-    if (initialFocusedBlockId) {
-      setHighlightedBlockId(initialFocusedBlockId);
-      const timer = setTimeout(() => {
-        focusBlockInput(initialFocusedBlockId, 'end');
-        const el = textareaMapRef.current.get(initialFocusedBlockId);
-        if (el) {
+  const focusBlockInput = useCallback(
+    (blockId: string, cursor: 'start' | 'end' | 'select' = 'end') => {
+      setFocusedBlockId(blockId);
+      const el = textareaMapRef.current.get(blockId);
+      if (el) {
+        requestAnimationFrame(() => {
+          el.focus();
+          try {
+            if (cursor === 'select') {
+              el.select();
+            } else {
+              const pos = cursor === 'end' ? el.value.length : 0;
+              el.setSelectionRange(pos, pos);
+            }
+          } catch {
+            // ignore
+          }
           el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-      }, 80);
-      const fadeTimer = setTimeout(() => {
-        setHighlightedBlockId(null);
-      }, 2500);
-      return () => {
-        clearTimeout(timer);
-        clearTimeout(fadeTimer);
-      };
-    }
-  }, [initialFocusedBlockId]);
+        });
+      } else {
+        pendingFocusRef.current = { blockId, cursor };
+      }
+    },
+    []
+  );
 
   const registerTextareaRef = useCallback((blockId: string, el: HTMLTextAreaElement | null) => {
     if (el) {
@@ -74,13 +80,19 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
         const target = pendingFocusRef.current;
         pendingFocusRef.current = null;
         requestAnimationFrame(() => {
+          setFocusedBlockId(blockId);
           el.focus();
-          const pos = target.cursor === 'end' ? el.value.length : 0;
           try {
-            el.setSelectionRange(pos, pos);
+            if (target.cursor === 'select') {
+              el.select();
+            } else {
+              const pos = target.cursor === 'end' ? el.value.length : 0;
+              el.setSelectionRange(pos, pos);
+            }
           } catch {
             // ignore
           }
+          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
         });
       }
     } else {
@@ -88,23 +100,26 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
     }
   }, []);
 
-  const focusBlockInput = useCallback((blockId: string, cursor: 'start' | 'end' = 'end') => {
-    setFocusedBlockId(blockId);
-    const el = textareaMapRef.current.get(blockId);
-    if (el) {
-      requestAnimationFrame(() => {
-        el.focus();
-        const pos = cursor === 'end' ? el.value.length : 0;
-        try {
-          el.setSelectionRange(pos, pos);
-        } catch {
-          // ignore
-        }
-      });
-    } else {
-      pendingFocusRef.current = { blockId, cursor };
+  useEffect(() => {
+    if (initialFocusedBlockId) {
+      setHighlightedBlockId(initialFocusedBlockId);
+      focusBlockInput(initialFocusedBlockId, 'select');
+      const timer = setTimeout(() => {
+        focusBlockInput(initialFocusedBlockId, 'select');
+      }, 70);
+      const timer2 = setTimeout(() => {
+        focusBlockInput(initialFocusedBlockId, 'select');
+      }, 200);
+      const fadeTimer = setTimeout(() => {
+        setHighlightedBlockId(null);
+      }, 2800);
+      return () => {
+        clearTimeout(timer);
+        clearTimeout(timer2);
+        clearTimeout(fadeTimer);
+      };
     }
-  }, []);
+  }, [initialFocusedBlockId, blocks.length, focusBlockInput]);
 
   // Compute visibility based on collapsed ancestor blocks
   const visibleEntries = useMemo(() => {
-- 
2.54.0


From 7a8d759bf25f77cdd8f0a67b358b2534922f0c42 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 07:27:12 +0100
Subject: [PATCH 22/33] feat(workspace): real-time live child block resolution
 and interactive checkboxes in hashtag overview

---
 .../src/features/workspace/WorkspaceView.tsx  | 296 +++++++++++++-----
 1 file changed, 223 insertions(+), 73 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index db89a42..f0b1d79 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -812,6 +812,87 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return count;
   }, [docs]);
 
+  // Real-time matched blocks and all nested children for the selected hashtag
+  const activeTagGroups = useMemo(() => {
+    if (!selectedTag) return [];
+    const cleanTag = selectedTag.toLowerCase();
+
+    const map = new Map<
+      string,
+      {
+        docId: string;
+        title: string;
+        icon: string;
+        folderPath: string;
+        matchedBlocks: { rootBlock: DocumentBlock; children: DocumentBlock[] }[];
+      }
+    >();
+
+    for (const d of docs) {
+      const blks = d.blocks || [];
+      if (blks.length === 0) continue;
+
+      const matched: { rootBlock: DocumentBlock; children: DocumentBlock[] }[] = [];
+      const processedChildIds = new Set<string>();
+
+      for (let i = 0; i < blks.length; i++) {
+        const b = blks[i];
+        if (processedChildIds.has(b.id)) continue;
+
+        const content = b.content || '';
+        const regex = new RegExp(`(?:^|[\\s(])#(${cleanTag})(?=[\\s.,!?:;)#\\]}]|$)`, 'i');
+        if (regex.test(content)) {
+          const children: DocumentBlock[] = [];
+          const rootLevel = b.level || 0;
+          for (let j = i + 1; j < blks.length; j++) {
+            const nextB = blks[j];
+            if ((nextB.level || 0) > rootLevel) {
+              children.push(nextB);
+              processedChildIds.add(nextB.id);
+            } else {
+              break;
+            }
+          }
+          matched.push({ rootBlock: b, children });
+        }
+      }
+
+      if (matched.length > 0) {
+        map.set(d.id, {
+          docId: d.id,
+          title: d.title || 'Unbenannte Notiz',
+          icon: d.icon || '📝',
+          folderPath: d.folderPath || '',
+          matchedBlocks: matched,
+        });
+      }
+    }
+
+    if (tagDetails?.documents) {
+      for (const dg of tagDetails.documents) {
+        if (!map.has(dg.docId)) {
+          map.set(dg.docId, {
+            docId: dg.docId,
+            title: dg.title || 'Unbenannte Notiz',
+            icon: dg.icon || '📝',
+            folderPath: dg.folderPath || '',
+            matchedBlocks: dg.matchedBlocks || [],
+          });
+        }
+      }
+    }
+
+    return Array.from(map.values());
+  }, [docs, selectedTag, tagDetails]);
+
+  const activeTagTotalMatches = useMemo(() => {
+    let count = 0;
+    for (const g of activeTagGroups) {
+      count += g.matchedBlocks.length;
+    }
+    return count;
+  }, [activeTagGroups]);
+
   const selectedDocObj = useMemo(
     () => docs.find((d) => d.id === selectedDocId) || null,
     [docs, selectedDocId]
@@ -1143,87 +1224,156 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               {/* Matched Document Blocks */}
               <div className="space-y-3">
                 <h3 className="text-[10px] font-bold uppercase tracking-wider text-faint">
-                  Verknüpfte Outliner-Blöcke & Unterpunkte ({tagDetails?.totalMatches || 0})
+                  Verknüpfte Outliner-Blöcke & Unterpunkte ({activeTagTotalMatches})
                 </h3>
-                {tagDetails?.documents.map((docGroup) => (
-                  <div
-                    key={docGroup.docId}
-                    className="p-3 rounded-card border border-border bg-canvas space-y-2"
-                  >
-                    <button
-                      type="button"
-                      onClick={() => handleJumpToDocBlock(docGroup.docId)}
-                      className="flex items-center gap-2 text-xs font-semibold text-accent hover:underline cursor-pointer"
-                    >
-                      <span>{docGroup.icon || '📝'}</span>
-                      <span>{docGroup.title}</span>
-                      {docGroup.folderPath && (
-                        <span className="badge-neutral text-[10px] font-normal">
-                          📁 {docGroup.folderPath}
-                        </span>
-                      )}
-                    </button>
-                    <div className="space-y-2 pl-3 border-l-2 border-border/70">
-                      {docGroup.matchedBlocks.map((mb) => (
-                        <div key={mb.rootBlock.id} className="space-y-1">
-                          {/* Root Bullet Point containing the hashtag */}
-                          <div
-                            onClick={() => handleJumpToDocBlock(docGroup.docId, mb.rootBlock.id)}
-                            className="flex items-start gap-1.5 text-xs text-main font-medium group cursor-pointer hover:bg-panel-elevated p-1 rounded-btn transition-colors"
-                            title="Klick: Zu dieser Zeile springen"
+                {activeTagGroups.length === 0 ? (
+                  <div className="p-8 text-center text-muted text-xs space-y-1 border border-border rounded-card bg-canvas">
+                    <p className="font-semibold text-main">Keine Blöcke mit #{selectedTag} gefunden.</p>
+                  </div>
+                ) : (
+                  activeTagGroups.map((docGroup) => {
+                    const docObj = docs.find((d) => d.id === docGroup.docId);
+                    return (
+                      <div
+                        key={docGroup.docId}
+                        className="p-3 rounded-card border border-border bg-canvas space-y-2"
+                      >
+                        <div className="flex items-center justify-between">
+                          <button
+                            type="button"
+                            onClick={() => handleJumpToDocBlock(docGroup.docId)}
+                            className="flex items-center gap-2 text-xs font-semibold text-accent hover:underline cursor-pointer"
                           >
-                            <span className="text-accent font-bold select-none">•</span>
-                            <span className="flex-1 break-words">{mb.rootBlock.content}</span>
-                          </div>
+                            <span>{docGroup.icon || '📝'}</span>
+                            <span>{docGroup.title}</span>
+                            {docGroup.folderPath && (
+                              <span className="badge-neutral text-[10px] font-normal">
+                                📁 {docGroup.folderPath}
+                              </span>
+                            )}
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => handleJumpToDocBlock(docGroup.docId)}
+                            className="text-[10px] text-accent hover:underline px-1.5 py-0.5 rounded-btn hover:bg-canvas cursor-pointer flex items-center gap-1"
+                            title="Notiz öffnen"
+                          >
+                            <span>Notiz öffnen</span>
+                            <ExternalLink className="w-2.5 h-2.5" />
+                          </button>
+                        </div>
 
-                          {/* All Children indented */}
-                          {mb.children && mb.children.length > 0 && (
-                            <div className="space-y-0.5">
-                              {mb.children.map((ch) => {
-                                const relLevel = Math.max(
-                                  1,
-                                  (ch.level || 0) - (mb.rootBlock.level || 0)
-                                );
-                                return (
-                                  <div
-                                    key={ch.id}
-                                    onClick={() => handleJumpToDocBlock(docGroup.docId, ch.id)}
-                                    style={{ paddingLeft: `${relLevel * 16}px` }}
-                                    className="flex items-start gap-1.5 text-xs text-muted hover:text-main group cursor-pointer hover:bg-panel-elevated p-1 rounded-btn transition-colors"
-                                    title="Klick: Zu dieser Zeile springen"
-                                  >
-                                    {ch.type === 'todo' ? (
-                                      <span
-                                        className={`w-3.5 h-3.5 mt-0.5 checkbox-square flex items-center justify-center shrink-0 border ${
-                                          ch.checked
-                                            ? 'bg-status-ok border-status-ok text-on-accent'
-                                            : 'border-strong text-transparent'
-                                        }`}
-                                      >
-                                        <Check className="w-2.5 h-2.5 stroke-[3]" />
-                                      </span>
-                                    ) : (
-                                      <span className="text-faint group-hover:text-accent font-bold select-none">
-                                        ◦
-                                      </span>
-                                    )}
-                                    <span
-                                      className={`flex-1 break-words ${
-                                        ch.checked ? 'line-through text-faint' : ''
+                        <div className="space-y-2 pl-3 border-l-2 border-border/70">
+                          {docGroup.matchedBlocks.map((mb) => (
+                            <div key={mb.rootBlock.id} className="space-y-1">
+                              {/* Root Bullet Point containing the hashtag */}
+                              <div
+                                onClick={() => handleJumpToDocBlock(docGroup.docId, mb.rootBlock.id)}
+                                className="flex items-start justify-between gap-1.5 text-xs text-main font-medium group cursor-pointer hover:bg-panel-elevated p-1.5 rounded-btn transition-colors"
+                                title="Klick: Zu dieser Zeile springen und markieren"
+                              >
+                                <div className="flex items-start gap-2 flex-1 min-w-0">
+                                  {mb.rootBlock.type === 'todo' ? (
+                                    <button
+                                      type="button"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        if (docObj) {
+                                          handleToggleRollupTodo(
+                                            docObj,
+                                            mb.rootBlock.id,
+                                            Boolean(mb.rootBlock.checked)
+                                          );
+                                        }
+                                      }}
+                                      className={`w-3.5 h-3.5 mt-0.5 checkbox-square flex items-center justify-center shrink-0 border cursor-pointer ${
+                                        mb.rootBlock.checked
+                                          ? 'bg-status-ok border-status-ok text-on-accent'
+                                          : 'border-strong hover:border-accent text-transparent'
                                       }`}
                                     >
-                                      {ch.content}
+                                      <Check className="w-2.5 h-2.5 stroke-[3]" />
+                                    </button>
+                                  ) : (
+                                    <span className="text-accent font-bold select-none text-sm leading-none mt-0.5">
+                                      •
                                     </span>
-                                  </div>
-                                );
-                              })}
+                                  )}
+                                  <span
+                                    className={`flex-1 break-words ${
+                                      mb.rootBlock.checked ? 'line-through text-faint' : ''
+                                    }`}
+                                  >
+                                    {mb.rootBlock.content}
+                                  </span>
+                                </div>
+                                <ExternalLink className="w-3 h-3 text-faint group-hover:text-accent opacity-0 group-hover:opacity-100 transition-opacity shrink-0 mt-0.5" />
+                              </div>
+
+                              {/* All Children indented */}
+                              {mb.children && mb.children.length > 0 && (
+                                <div className="space-y-0.5">
+                                  {mb.children.map((ch) => {
+                                    const relLevel = Math.max(
+                                      1,
+                                      (ch.level || 0) - (mb.rootBlock.level || 0)
+                                    );
+                                    return (
+                                      <div
+                                        key={ch.id}
+                                        onClick={() => handleJumpToDocBlock(docGroup.docId, ch.id)}
+                                        style={{ paddingLeft: `${relLevel * 16}px` }}
+                                        className="flex items-start justify-between gap-1.5 text-xs text-muted hover:text-main group cursor-pointer hover:bg-panel-elevated p-1 rounded-btn transition-colors"
+                                        title="Klick: Zu dieser Zeile springen und markieren"
+                                      >
+                                        <div className="flex items-start gap-2 flex-1 min-w-0">
+                                          {ch.type === 'todo' ? (
+                                            <button
+                                              type="button"
+                                              onClick={(e) => {
+                                                e.stopPropagation();
+                                                if (docObj) {
+                                                  handleToggleRollupTodo(
+                                                    docObj,
+                                                    ch.id,
+                                                    Boolean(ch.checked)
+                                                  );
+                                                }
+                                              }}
+                                              className={`w-3.5 h-3.5 mt-0.5 checkbox-square flex items-center justify-center shrink-0 border cursor-pointer ${
+                                                ch.checked
+                                                  ? 'bg-status-ok border-status-ok text-on-accent'
+                                                  : 'border-strong hover:border-accent text-transparent'
+                                              }`}
+                                            >
+                                              <Check className="w-2.5 h-2.5 stroke-[3]" />
+                                            </button>
+                                          ) : (
+                                            <span className="text-faint group-hover:text-accent font-bold select-none text-xs leading-none mt-1">
+                                              ◦
+                                            </span>
+                                          )}
+                                          <span
+                                            className={`flex-1 break-words ${
+                                              ch.checked ? 'line-through text-faint' : ''
+                                            }`}
+                                          >
+                                            {ch.content}
+                                          </span>
+                                        </div>
+                                        <ExternalLink className="w-3 h-3 text-faint group-hover:text-accent opacity-0 group-hover:opacity-100 transition-opacity shrink-0 mt-0.5" />
+                                      </div>
+                                    );
+                                  })}
+                                </div>
+                              )}
                             </div>
-                          )}
+                          ))}
                         </div>
-                      ))}
-                    </div>
-                  </div>
-                ))}
+                      </div>
+                    );
+                  })
+                )}
               </div>
             </div>
           </div>
-- 
2.54.0


From d11153309fff23fe2d5ef803095130bf42c30c83 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 08:14:39 +0100
Subject: [PATCH 23/33] fix(frontend): resolve TS2448 filteredDocs TDZ and
 import missing DocumentBlock in WorkspaceView

---
 .../src/features/workspace/WorkspaceView.tsx  | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index f0b1d79..c926251 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -20,6 +20,7 @@ import {
 } from 'lucide-react';
 import {
   Document,
+  DocumentBlock,
   DocShare,
   SharedFolder,
   TagDetails,
@@ -683,6 +684,17 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return Array.from(set).sort();
   }, [docs, folders, sharedFolders]);
 
+  const filteredDocs = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return docs;
+    return docs.filter(
+      (d) =>
+        d.title.toLowerCase().includes(q) ||
+        (d.content && d.content.toLowerCase().includes(q)) ||
+        (d.tags && d.tags.some((t) => t.toLowerCase().includes(q)))
+    );
+  }, [docs, searchQuery]);
+
   const folderTree = useMemo(() => {
     const rootNodes: FolderTreeNode[] = [];
     const nodeMap = new Map<string, FolderTreeNode>();
@@ -737,17 +749,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return rootNodes;
   }, [allFolderPaths, filteredDocs, sharedFolders]);
 
-  const filteredDocs = useMemo(() => {
-    const q = searchQuery.trim().toLowerCase();
-    if (!q) return docs;
-    return docs.filter(
-      (d) =>
-        d.title.toLowerCase().includes(q) ||
-        (d.content && d.content.toLowerCase().includes(q)) ||
-        (d.tags && d.tags.some((t) => t.toLowerCase().includes(q)))
-    );
-  }, [docs, searchQuery]);
-
   const pinnedDocs = useMemo(
     () => filteredDocs.filter((d) => d.isPinned),
     [filteredDocs]
-- 
2.54.0


From 23eff21520894b7542509da1541a7c0b79491cf2 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 08:41:09 +0100
Subject: [PATCH 24/33] style(workspace): style '+ Notiz' button in sidebar
 matching 'Neue Liste' dashed style

---
 frontend/src/features/workspace/WorkspaceView.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index c926251..8fab347 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -951,7 +951,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <button
                 type="button"
                 onClick={() => handleCreateDocument('')}
-                className="btn-primary inline-flex items-center gap-1 px-2 py-1 text-xs font-semibold"
+                className="h-7 px-2.5 bg-canvas hover:bg-panel border border-border border-dashed rounded-btn text-xs text-muted hover:text-main inline-flex items-center gap-1 transition-colors cursor-pointer"
+                title="Neue Notiz anlegen"
               >
                 <Plus className="w-3.5 h-3.5" />
                 <span>Notiz</span>
-- 
2.54.0


From 60fd1c9ae7aa1d657ac7a6ddbe32f02b6c964469 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 08:46:10 +0100
Subject: [PATCH 25/33] feat(workspace): add hashtag tabs matching tasks view
 style and interactive tile grid with search and sorting

---
 .../src/features/workspace/WorkspaceView.tsx  | 435 +++++++++++++++++-
 1 file changed, 421 insertions(+), 14 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 8fab347..2f55c18 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -17,6 +17,8 @@ import {
   X,
   ExternalLink,
   Sparkles,
+  ArrowLeft,
+  CheckSquare,
 } from 'lucide-react';
 import {
   Document,
@@ -40,7 +42,7 @@ interface WorkspaceViewProps {
   onStatsChange: () => void;
 }
 
-type WorkspaceSubView = 'editor' | 'tag_detail' | 'todos';
+type WorkspaceSubView = 'editor' | 'tag_detail' | 'todos' | 'tags';
 
 interface FolderTreeNode {
   name: string;
@@ -248,6 +250,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
   const [tagDetails, setTagDetails] = useState<TagDetails | null>(null);
   const [tagNoteDraft, setTagNoteDraft] = useState<string>('');
+  const [tagSearchQuery, setTagSearchQuery] = useState<string>('');
+  const [tagSortBy, setTagSortBy] = useState<'count' | 'name'>('count');
 
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [expandedFolders, setExpandedFolders] = useState<Record<string, boolean>>({});
@@ -925,6 +929,70 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return [];
   }, [activeDocShares, shareModalDoc, shareModalFolder]);
 
+  // Aggregated metadata map for every tag (documents where it occurs, open todos count)
+  const tagsMetadataMap = useMemo(() => {
+    const map = new Map<
+      string,
+      {
+        tag: string;
+        count: number;
+        docs: { id: string; title: string; icon?: string; folderPath?: string }[];
+        openTodosCount: number;
+      }
+    >();
+
+    for (const t of tagsSummary) {
+      const cleanTag = t.tag.toLowerCase();
+      const matchingDocs: { id: string; title: string; icon?: string; folderPath?: string }[] = [];
+      let openTodos = 0;
+
+      for (const d of docs) {
+        let hasInDoc = false;
+        const blocks = d.blocks || [];
+        for (const b of blocks) {
+          const content = b.content || '';
+          const regex = new RegExp(`(?:^|[\\s(])#(${cleanTag})(?=[\\s.,!?:;)#\\]}]|$)`, 'i');
+          if (regex.test(content)) {
+            hasInDoc = true;
+            if (b.type === 'todo' && !b.checked) openTodos++;
+          }
+        }
+        if (hasInDoc) {
+          matchingDocs.push({
+            id: d.id,
+            title: d.title || 'Unbenannte Notiz',
+            icon: d.icon,
+            folderPath: d.folderPath,
+          });
+        }
+      }
+
+      map.set(cleanTag, {
+        tag: t.tag,
+        count: t.count,
+        docs: matchingDocs,
+        openTodosCount: openTodos,
+      });
+    }
+
+    return map;
+  }, [tagsSummary, docs]);
+
+  // Filtered and sorted tags for the Kachel Grid view
+  const filteredTags = useMemo(() => {
+    const q = tagSearchQuery.trim().toLowerCase().replace(/^#/, '');
+    let list = [...tagsSummary];
+    if (q) {
+      list = list.filter((t) => t.tag.toLowerCase().includes(q));
+    }
+    if (tagSortBy === 'count') {
+      list.sort((a, b) => b.count - a.count || a.tag.localeCompare(b.tag));
+    } else {
+      list.sort((a, b) => a.tag.localeCompare(b.tag));
+    }
+    return list;
+  }, [tagsSummary, tagSearchQuery, tagSortBy]);
+
   return (
     <div className="flex h-[calc(100vh-4rem)] bg-canvas rounded-card border border-border overflow-hidden shadow-panel">
       {/* LEFT MASTER SIDEBAR */}
@@ -981,18 +1049,20 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             )}
           </div>
 
-          {/* Sub-view Switcher: Notizen vs. To-Dos */}
-          <div className="grid grid-cols-2 gap-1 p-0.5 rounded-btn bg-canvas border border-border text-xs">
+          {/* Sub-view Switcher: Notizen vs. To-Dos vs. Hashtags */}
+          <div className="grid grid-cols-3 gap-1 p-0.5 rounded-btn bg-canvas border border-border text-xs">
             <button
               type="button"
               onClick={() => setSubView('editor')}
-              className={`py-1 rounded-btn font-medium transition-colors ${
+              className={`py-1.5 px-1 rounded-btn font-medium transition-colors flex items-center justify-center gap-1 cursor-pointer truncate ${
                 subView === 'editor'
-                  ? 'bg-panel-elevated text-main font-semibold shadow-sm'
+                  ? 'bg-panel-elevated text-main font-semibold shadow-xs'
                   : 'text-muted hover:text-main'
               }`}
+              title="Notizen & Dokumente"
             >
-              Dokumente ({docs.length})
+              <FileText className="w-3.5 h-3.5 text-accent shrink-0" />
+              <span className="truncate">Notizen</span>
             </button>
             <button
               type="button"
@@ -1000,13 +1070,37 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 setSubView('todos');
                 setMobileShowDetail(true);
               }}
-              className={`py-1 rounded-btn font-medium transition-colors ${
+              className={`py-1.5 px-1 rounded-btn font-medium transition-colors flex items-center justify-center gap-1 cursor-pointer truncate ${
                 subView === 'todos'
-                  ? 'bg-panel-elevated text-main font-semibold shadow-sm'
+                  ? 'bg-panel-elevated text-main font-semibold shadow-xs'
                   : 'text-muted hover:text-main'
               }`}
+              title="To-Dos Rollup"
             >
-              To-Dos ({totalOpenTodos})
+              <Check className="w-3.5 h-3.5 text-status-ok shrink-0" />
+              <span className="truncate">To-Dos</span>
+              {totalOpenTodos > 0 && (
+                <span className="badge-neutral text-[9px] px-1 py-0">{totalOpenTodos}</span>
+              )}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setSubView('tags');
+                setMobileShowDetail(true);
+              }}
+              className={`py-1.5 px-1 rounded-btn font-medium transition-colors flex items-center justify-center gap-1 cursor-pointer truncate ${
+                subView === 'tags' || subView === 'tag_detail'
+                  ? 'bg-panel-elevated text-main font-semibold shadow-xs'
+                  : 'text-muted hover:text-main'
+              }`}
+              title="Hashtag Kacheln & Übersicht"
+            >
+              <Hash className="w-3.5 h-3.5 text-accent shrink-0" />
+              <span className="truncate">Hashtags</span>
+              {tagsSummary.length > 0 && (
+                <span className="badge-neutral text-[9px] px-1 py-0">{tagsSummary.length}</span>
+              )}
             </button>
           </div>
         </div>
@@ -1189,22 +1283,292 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             onWikiLinkClick={handleWikiLinkClick}
             onBackMobile={() => setMobileShowDetail(false)}
           />
+        ) : subView === 'tags' ? (
+          /* =========================================================================
+             HASHTAG OVERVIEW & TILE DIRECTORY (KACHEL-ANSICHT MIT SUCHE)
+             ========================================================================= */
+          <div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
+            <div className="max-w-4xl mx-auto space-y-5">
+              {/* Top Navigation Tabs */}
+              <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-3">
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <button
+                    type="button"
+                    onClick={() => setSubView('editor')}
+                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
+                  >
+                    <FileText className="w-3.5 h-3.5 text-accent" />
+                    <span>Notizen</span>
+                    <span className="badge-neutral text-[10px]">{docs.length}</span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSubView('todos');
+                      setMobileShowDetail(true);
+                    }}
+                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
+                  >
+                    <Check className="w-3.5 h-3.5 text-status-ok" />
+                    <span>To-Dos</span>
+                    <span className="badge-neutral text-[10px]">{totalOpenTodos}</span>
+                  </button>
+                  <button
+                    type="button"
+                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-panel border-accent text-main font-semibold shadow-xs"
+                  >
+                    <Hash className="w-3.5 h-3.5 text-accent" />
+                    <span>Hashtags</span>
+                    <span className="badge-neutral text-[10px]">{tagsSummary.length}</span>
+                  </button>
+                </div>
+
+                <button
+                  type="button"
+                  onClick={() => setSubView('editor')}
+                  className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
+                >
+                  Zum Editor
+                </button>
+              </div>
+
+              {/* Header with Title and Search Controls */}
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <Hash className="w-5 h-5 text-accent" />
+                    <h1 className="text-xl font-bold text-main">Hashtags Übersicht</h1>
+                    <span className="badge-neutral text-xs font-mono">{tagsSummary.length} Tags</span>
+                  </div>
+                  <p className="text-xs text-muted mt-0.5">
+                    Entdecke alle Themen, Schlagworte und verknüpften Blöcke aus deinen Notizen
+                  </p>
+                </div>
+
+                {/* Search & Sort Toolbar */}
+                <div className="flex items-center gap-2">
+                  <div className="relative min-w-[200px] sm:min-w-[240px]">
+                    <Search className="w-3.5 h-3.5 text-faint absolute left-2.5 top-1/2 -translate-y-1/2" />
+                    <input
+                      type="text"
+                      value={tagSearchQuery}
+                      onChange={(e) => setTagSearchQuery(e.target.value)}
+                      placeholder="Hashtags durchsuchen…"
+                      className="input-field w-full pl-8 pr-7 py-1.5 text-xs"
+                    />
+                    {tagSearchQuery && (
+                      <button
+                        type="button"
+                        onClick={() => setTagSearchQuery('')}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 text-faint hover:text-main cursor-pointer"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    )}
+                  </div>
+
+                  {/* Sort Mode Switcher */}
+                  <div className="flex items-center bg-canvas border border-border rounded-btn p-0.5 text-[11px]">
+                    <button
+                      type="button"
+                      onClick={() => setTagSortBy('count')}
+                      className={`px-2 py-1 rounded-btn font-semibold transition-colors cursor-pointer ${
+                        tagSortBy === 'count'
+                          ? 'bg-panel-elevated text-main shadow-xs'
+                          : 'text-muted hover:text-main'
+                      }`}
+                      title="Nach Häufigkeit sortieren"
+                    >
+                      Häufigkeit
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setTagSortBy('name')}
+                      className={`px-2 py-1 rounded-btn font-semibold transition-colors cursor-pointer ${
+                        tagSortBy === 'name'
+                          ? 'bg-panel-elevated text-main shadow-xs'
+                          : 'text-muted hover:text-main'
+                      }`}
+                      title="Alphabetisch sortieren"
+                    >
+                      A-Z
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Grid of Hashtag Tiles (Kacheln) */}
+              {filteredTags.length === 0 ? (
+                <div className="p-12 text-center text-muted text-xs space-y-2 border border-border rounded-card bg-canvas">
+                  <Hash className="w-8 h-8 text-faint mx-auto" />
+                  <p className="font-semibold text-main text-sm">
+                    {tagSearchQuery
+                      ? `Keine Hashtags für "${tagSearchQuery}" gefunden`
+                      : 'Noch keine Hashtags vorhanden'}
+                  </p>
+                  <p className="text-faint max-w-sm mx-auto">
+                    {tagSearchQuery
+                      ? 'Versuche einen anderen Suchbegriff oder setze die Suche zurück.'
+                      : 'Schreibe #tag in einen beliebigen Notiz-Bullet, um Themen automatisch als Kachel zu gruppieren.'}
+                  </p>
+                  {tagSearchQuery && (
+                    <button
+                      type="button"
+                      onClick={() => setTagSearchQuery('')}
+                      className="btn-action inline-flex items-center gap-1 px-3 py-1 text-xs text-accent mt-2 cursor-pointer"
+                    >
+                      Suche zurücksetzen
+                    </button>
+                  )}
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
+                  {filteredTags.map((t) => {
+                    const meta = tagsMetadataMap.get(t.tag.toLowerCase());
+                    return (
+                      <div
+                        key={t.tag}
+                        onClick={() => handleSelectTag(t.tag)}
+                        className="p-4 rounded-card border border-border bg-canvas hover:border-accent hover:shadow-panel transition-all cursor-pointer group flex flex-col justify-between space-y-3"
+                      >
+                        <div className="space-y-2.5">
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="flex items-center gap-2 min-w-0">
+                              <span className="w-7 h-7 rounded-btn bg-accent/10 border border-accent/20 text-accent font-bold flex items-center justify-center shrink-0 text-sm group-hover:bg-accent group-hover:text-on-accent transition-colors">
+                                #
+                              </span>
+                              <h3 className="font-bold text-sm text-main group-hover:text-accent transition-colors truncate">
+                                #{t.tag}
+                              </h3>
+                            </div>
+                            <span className="badge-neutral font-mono text-[10px] shrink-0">
+                              {t.count} {t.count === 1 ? 'Treffer' : 'Treffer'}
+                            </span>
+                          </div>
+
+                          {meta && meta.docs.length > 0 && (
+                            <div className="space-y-1">
+                              <span className="text-[10px] font-semibold text-faint uppercase tracking-wider block">
+                                In {meta.docs.length} {meta.docs.length === 1 ? 'Notiz' : 'Notizen'}:
+                              </span>
+                              <div className="flex flex-wrap gap-1">
+                                {meta.docs.slice(0, 3).map((d) => (
+                                  <span
+                                    key={d.id}
+                                    className="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-btn bg-panel-elevated text-muted truncate max-w-[140px]"
+                                    title={d.title}
+                                  >
+                                    <span>{d.icon || '📝'}</span>
+                                    <span className="truncate">{d.title}</span>
+                                  </span>
+                                ))}
+                                {meta.docs.length > 3 && (
+                                  <span className="text-[10px] text-faint self-center">
+                                    +{meta.docs.length - 3}
+                                  </span>
+                                )}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+
+                        <div className="flex items-center justify-between pt-2.5 border-t border-border/50 text-[11px]">
+                          <div>
+                            {meta && meta.openTodosCount > 0 ? (
+                              <span className="text-status-warn text-[10px] flex items-center gap-1 font-medium">
+                                <Check className="w-2.5 h-2.5" />
+                                {meta.openTodosCount} offene To-Dos
+                              </span>
+                            ) : (
+                              <span className="text-faint text-[10px]">Blöcke & Childs anzeigen</span>
+                            )}
+                          </div>
+                          <span className="text-accent text-xs font-semibold group-hover:translate-x-0.5 transition-transform flex items-center gap-0.5">
+                            <span>Details</span>
+                            <span>→</span>
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
         ) : subView === 'tag_detail' && selectedTag ? (
           <div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
             <div className="max-w-3xl mx-auto space-y-4">
-              <div className="flex items-center justify-between border-b border-border pb-3">
+              {/* Top Navigation Tabs */}
+              <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-3">
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <button
+                    type="button"
+                    onClick={() => setSubView('editor')}
+                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
+                  >
+                    <FileText className="w-3.5 h-3.5 text-accent" />
+                    <span>Notizen</span>
+                    <span className="badge-neutral text-[10px]">{docs.length}</span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSubView('todos');
+                      setMobileShowDetail(true);
+                    }}
+                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
+                  >
+                    <Check className="w-3.5 h-3.5 text-status-ok" />
+                    <span>To-Dos</span>
+                    <span className="badge-neutral text-[10px]">{totalOpenTodos}</span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setSubView('tags')}
+                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-panel border-accent text-main font-semibold shadow-xs"
+                  >
+                    <Hash className="w-3.5 h-3.5 text-accent" />
+                    <span>Hashtags</span>
+                    <span className="badge-neutral text-[10px]">{tagsSummary.length}</span>
+                  </button>
+                </div>
+
+                <div className="flex items-center gap-1.5">
+                  <button
+                    type="button"
+                    onClick={() => setSubView('tags')}
+                    className="btn-action inline-flex items-center gap-1 px-2.5 py-1 text-xs text-muted hover:text-main cursor-pointer"
+                  >
+                    <ArrowLeft className="w-3.5 h-3.5" />
+                    <span>Alle Kacheln</span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setSubView('editor')}
+                    className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
+                  >
+                    Zum Editor
+                  </button>
+                </div>
+              </div>
+
+              {/* Tag Context Header */}
+              <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
-                  <Hash className="w-5 h-5 text-accent" />
+                  <span className="w-7 h-7 rounded-btn bg-accent/10 border border-accent/20 text-accent font-bold flex items-center justify-center shrink-0 text-sm">
+                    #
+                  </span>
                   <h1 className="text-xl font-bold text-main">
                     #{selectedTag}
                   </h1>
                 </div>
                 <button
                   type="button"
-                  onClick={() => setSubView('editor')}
-                  className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
+                  onClick={() => setSubView('tags')}
+                  className="text-xs text-accent hover:underline flex items-center gap-1 cursor-pointer"
                 >
-                  Zurück zum Editor
+                  <ArrowLeft className="w-3 h-3" />
+                  <span>Zur Kachel-Übersicht</span>
                 </button>
               </div>
 
@@ -1382,6 +1746,49 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         ) : subView === 'todos' ? (
           <div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
             <div className="max-w-3xl mx-auto space-y-4">
+              {/* Top Navigation Tabs */}
+              <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-3">
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <button
+                    type="button"
+                    onClick={() => setSubView('editor')}
+                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
+                  >
+                    <FileText className="w-3.5 h-3.5 text-accent" />
+                    <span>Notizen</span>
+                    <span className="badge-neutral text-[10px]">{docs.length}</span>
+                  </button>
+                  <button
+                    type="button"
+                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-panel border-accent text-main font-semibold shadow-xs"
+                  >
+                    <Check className="w-3.5 h-3.5 text-status-ok" />
+                    <span>To-Dos</span>
+                    <span className="badge-neutral text-[10px]">{totalOpenTodos}</span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSubView('tags');
+                      setMobileShowDetail(true);
+                    }}
+                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
+                  >
+                    <Hash className="w-3.5 h-3.5 text-accent" />
+                    <span>Hashtags</span>
+                    <span className="badge-neutral text-[10px]">{tagsSummary.length}</span>
+                  </button>
+                </div>
+
+                <button
+                  type="button"
+                  onClick={() => setSubView('editor')}
+                  className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
+                >
+                  Zum Editor
+                </button>
+              </div>
+
               <div className="flex flex-col sm:flex-row sm:items-center justify-between border-b border-border pb-3 gap-2">
                 <div>
                   <h2 className="text-lg font-bold text-main">
-- 
2.54.0


From 5a931e9bb63c3bc289822d1c0c77a3db83d2d68d Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 08:47:58 +0100
Subject: [PATCH 26/33] style(workspace): style selected note with panel
 background and accent border matching task list selection

---
 .../src/features/workspace/WorkspaceView.tsx   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 2f55c18..04e69ac 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -208,10 +208,10 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
               onDragStart={(e) => handleDocDragStart(e, d.id)}
               onClick={() => onSelectDoc(d.id)}
               style={{ paddingLeft: `${(depth + 1) * 12 + 16}px` }}
-              className={`w-full flex items-center gap-2 pr-2 py-1.5 rounded-btn text-left text-xs cursor-pointer transition-colors ${
+              className={`w-full flex items-center gap-2 pr-2 py-1.5 rounded-btn text-left text-xs cursor-pointer border transition-colors ${
                 selectedDocId === d.id && subView === 'editor'
-                  ? 'bg-accent text-on-accent font-semibold'
-                  : 'text-main hover:bg-panel-elevated'
+                  ? 'bg-panel border-accent text-main font-semibold shadow-xs'
+                  : 'border-transparent text-main hover:bg-panel-elevated'
               }`}
             >
               <span className="shrink-0">{d.icon || '📝'}</span>
@@ -1144,10 +1144,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                       setSubView('editor');
                       setMobileShowDetail(true);
                     }}
-                    className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer transition-colors ${
+                    className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer border transition-colors ${
                       selectedDocId === d.id && subView === 'editor'
-                        ? 'bg-accent text-on-accent font-semibold'
-                        : 'text-main hover:bg-panel-elevated'
+                        ? 'bg-panel border-accent text-main font-semibold shadow-xs'
+                        : 'border-transparent text-main hover:bg-panel-elevated'
                     }`}
                   >
                     <span>{d.icon || '📝'}</span>
@@ -1216,10 +1216,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                       setSubView('editor');
                       setMobileShowDetail(true);
                     }}
-                    className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer transition-colors ${
+                    className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer border transition-colors ${
                       selectedDocId === d.id && subView === 'editor'
-                        ? 'bg-accent text-on-accent font-semibold'
-                        : 'text-main hover:bg-panel-elevated'
+                        ? 'bg-panel border-accent text-main font-semibold shadow-xs'
+                        : 'border-transparent text-main hover:bg-panel-elevated'
                     }`}
                   >
                     <span>{d.icon || '📝'}</span>
-- 
2.54.0


From 7baab8faa2d46ab245b80b7c60bd8358a56a09d7 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 08:49:08 +0100
Subject: [PATCH 27/33] fix(workspace): eliminate hover height shift on folder
 tree row with fixed height and opacity fade

---
 .../src/features/workspace/WorkspaceView.tsx  | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 04e69ac..d650a1a 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -107,10 +107,10 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
         }}
         onDrop={(e) => handleDropOnFolder(node.fullPath, e)}
         style={{ paddingLeft: `${depth * 12 + 8}px` }}
-        className={`group flex items-center justify-between pr-2 py-1 rounded-btn text-xs cursor-pointer transition-colors ${
+        className={`group flex items-center justify-between pr-1.5 h-7 rounded-btn text-xs cursor-pointer border-l-2 transition-colors ${
           isDragOver
-            ? 'bg-accent/20 border-l-2 border-accent text-main font-semibold'
-            : 'hover:bg-panel-elevated text-muted'
+            ? 'bg-accent/20 border-accent text-main font-semibold'
+            : 'border-transparent hover:bg-panel-elevated text-muted'
         }`}
       >
         <button
@@ -121,7 +121,7 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
               [node.fullPath]: !prev[node.fullPath],
             }))
           }
-          className="flex items-center gap-1.5 flex-1 min-w-0 text-left cursor-pointer"
+          className="flex items-center gap-1.5 flex-1 min-w-0 text-left h-full cursor-pointer"
         >
           {hasContent ? (
             isExpanded ? (
@@ -146,19 +146,25 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
           </span>
         </button>
 
-        <div className="hidden group-hover:flex items-center gap-0.5">
+        <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity shrink-0">
           <button
             type="button"
-            onClick={() => handleCreateDocument(node.fullPath)}
-            className="p-1 rounded-btn hover:bg-canvas text-muted hover:text-main cursor-pointer"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleCreateDocument(node.fullPath);
+            }}
+            className="p-1 h-6 w-6 flex items-center justify-center rounded-btn hover:bg-canvas text-muted hover:text-main cursor-pointer"
             title="Notiz in diesem Ordner erstellen"
           >
             <Plus className="w-3 h-3" />
           </button>
           <button
             type="button"
-            onClick={() => handleShareFolderClick(node.fullPath, node.sharedFolderObj)}
-            className={`p-1 rounded-btn hover:bg-canvas cursor-pointer ${
+            onClick={(e) => {
+              e.stopPropagation();
+              handleShareFolderClick(node.fullPath, node.sharedFolderObj);
+            }}
+            className={`p-1 h-6 w-6 flex items-center justify-center rounded-btn hover:bg-canvas cursor-pointer ${
               node.sharedFolderObj ? 'text-accent' : 'text-faint hover:text-accent'
             }`}
             title="Ordner teilen und Berechtigungen"
@@ -167,8 +173,11 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
           </button>
           <button
             type="button"
-            onClick={() => handleDeleteFolder(node.fullPath)}
-            className="p-1 rounded-btn hover:bg-status-err/20 text-faint hover:text-status-err cursor-pointer"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDeleteFolder(node.fullPath);
+            }}
+            className="p-1 h-6 w-6 flex items-center justify-center rounded-btn hover:bg-status-err/20 text-faint hover:text-status-err cursor-pointer"
             title="Ordner löschen"
           >
             <Trash2 className="w-3 h-3" />
-- 
2.54.0


From 59ddca91f346c991d8a5faf9bd14dd693933a32a Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 10:55:42 +0100
Subject: [PATCH 28/33] feat(workspace): align workspace UI with tasks and
 lists, add top tabs and collapsible sidebar

---
 .../src/features/workspace/DocumentEditor.tsx | 149 ++----
 .../src/features/workspace/WorkspaceView.tsx  | 465 ++++++++----------
 2 files changed, 252 insertions(+), 362 deletions(-)

diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
index 2142b77..6e40574 100644
--- a/frontend/src/features/workspace/DocumentEditor.tsx
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -4,7 +4,7 @@ import {
   Users,
   Trash2,
   Download,
-  Folder as FolderIcon,
+  FileText,
   Radio,
   Loader2,
   ArrowLeft,
@@ -162,7 +162,6 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   const [loading, setLoading] = useState<boolean>(!initialDoc);
   const [error, setError] = useState<string | null>(null);
   const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
-  const [showFolderMenu, setShowFolderMenu] = useState<boolean>(false);
   const [zoomedBlockId, setZoomedBlockId] = useState<string | null>(null);
 
   const titleInputRef = useRef<HTMLInputElement | null>(null);
@@ -543,18 +542,6 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
     }
   };
 
-  const handleMoveToFolder = async (folderPath: string) => {
-    setShowFolderMenu(false);
-    if (!doc || !canEdit) return;
-    try {
-      const updated = await api.moveDocument(doc.id, folderPath);
-      setDoc(updated);
-      onDocMetadataChange(updated);
-    } catch {
-      // ignore
-    }
-  };
-
   const handleExportMarkdown = () => {
     const lines: string[] = [`# ${title || 'Unbenannte Notiz'}`, ''];
     for (const b of blocks) {
@@ -626,46 +613,58 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             </button>
           )}
 
-          {/* Folder Selector */}
-          <div className="relative">
-            <button
-              type="button"
-              onClick={() => canEdit && setShowFolderMenu((prev) => !prev)}
-              className="btn-action inline-flex items-center gap-1.5 px-2 py-1 text-xs text-muted hover:text-main"
-              title="Ordner wechseln"
+          {/* Breadcrumbs Navigation (Fokus-Modus) or Doc Indicator */}
+          {zoomedBlock && breadcrumbs.length > 0 ? (
+            <nav
+              aria-label="Breadcrumb Navigation"
+              className="flex items-center flex-wrap gap-1 text-xs text-muted"
             >
-              <FolderIcon className="w-3.5 h-3.5 text-accent" />
-              <span className="truncate max-w-[140px]">
-                {doc?.folderPath ? doc.folderPath : 'Hauptebene'}
-              </span>
-            </button>
+              <button
+                type="button"
+                onClick={() => setZoomedBlockId(null)}
+                className="hover:text-accent inline-flex items-center gap-1 font-medium transition-colors cursor-pointer"
+                title="Zurück zum Hauptdokument"
+              >
+                <Home className="w-3.5 h-3.5 text-accent shrink-0" />
+                <span className="truncate max-w-[130px]">
+                  {title || doc?.title || 'Dokument'}
+                </span>
+              </button>
 
-            {showFolderMenu && canEdit && (
-              <div className="absolute left-0 mt-1 w-52 bg-canvas shadow-panel border border-border rounded-card py-1 z-30 max-h-60 overflow-y-auto">
-                <button
-                  type="button"
-                  onClick={() => handleMoveToFolder('')}
-                  className={`w-full text-left px-3 py-1.5 text-xs hover:bg-panel-elevated ${
-                    !doc?.folderPath ? 'font-bold text-accent' : 'text-main'
-                  }`}
-                >
-                  / (Hauptebene)
-                </button>
-                {availableFolders.map((folder) => (
-                  <button
-                    key={folder}
-                    type="button"
-                    onClick={() => handleMoveToFolder(folder)}
-                    className={`w-full text-left px-3 py-1.5 text-xs hover:bg-panel-elevated truncate ${
-                      doc?.folderPath === folder ? 'font-bold text-accent' : 'text-main'
-                    }`}
-                  >
-                    📁 {folder}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
+              {breadcrumbs.slice(1).map((crumb, idx) => {
+                const isCurrent = idx === breadcrumbs.length - 2;
+                return (
+                  <React.Fragment key={crumb.id || idx}>
+                    <ChevronRight className="w-3 h-3 text-faint shrink-0" />
+                    {isCurrent ? (
+                      <span
+                        className="font-bold text-accent truncate max-w-[160px]"
+                        title={crumb.title}
+                      >
+                        {crumb.title || 'Punkt'}
+                      </span>
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={() => setZoomedBlockId(crumb.id)}
+                        className="hover:text-main truncate max-w-[120px] transition-colors cursor-pointer"
+                        title={`Zoom zu "${crumb.title}"`}
+                      >
+                        {crumb.title || 'Punkt'}
+                      </button>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </nav>
+          ) : (
+            <div className="flex items-center gap-1.5 text-xs text-muted">
+              <FileText className="w-3.5 h-3.5 text-accent shrink-0" />
+              <span className="truncate max-w-[180px] font-medium text-main">
+                {title || doc?.title || 'Dokument'}
+              </span>
+            </div>
+          )}
 
           {/* Read-only indicator */}
           {!canEdit && (
@@ -821,52 +820,6 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
              FOKUS-MODUS & ZOOM-IN (HOISTED SUBTREE VIEW)
              ========================================================================= */
           <div className="space-y-3">
-            {/* Clickable Breadcrumb Bar */}
-            {breadcrumbs.length > 0 && (
-              <nav
-                aria-label="Breadcrumb Navigation"
-                className="flex items-center flex-wrap gap-1.5 py-1.5 px-3 bg-canvas border border-border rounded-btn text-xs text-muted"
-              >
-                <button
-                  type="button"
-                  onClick={() => setZoomedBlockId(null)}
-                  className="hover:text-accent inline-flex items-center gap-1 font-medium transition-colors"
-                  title="Zurück zum Hauptdokument"
-                >
-                  <Home className="w-3.5 h-3.5 text-accent" />
-                  <span className="truncate max-w-[120px]">
-                    {title || doc?.title || 'Dokument'}
-                  </span>
-                </button>
-
-                {breadcrumbs.slice(1).map((crumb, idx) => {
-                  const isCurrent = idx === breadcrumbs.length - 2;
-                  return (
-                    <React.Fragment key={crumb.id || idx}>
-                      <ChevronRight className="w-3 h-3 text-faint shrink-0" />
-                      {isCurrent ? (
-                        <span
-                          className="font-bold text-accent truncate max-w-[200px]"
-                          title={crumb.title}
-                        >
-                          {crumb.title || 'Punkt'}
-                        </span>
-                      ) : (
-                        <button
-                          type="button"
-                          onClick={() => setZoomedBlockId(crumb.id)}
-                          className="hover:text-main truncate max-w-[140px] transition-colors"
-                          title={`Zoom zu "${crumb.title}"`}
-                        >
-                          {crumb.title || 'Punkt'}
-                        </button>
-                      )}
-                    </React.Fragment>
-                  );
-                })}
-              </nav>
-            )}
-
             {/* Prominent Zoomed Ast-Heading */}
             <div className="flex items-start justify-between gap-3 pb-4 mb-2 border-b border-border">
               <div className="flex-1 min-w-0">
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index d650a1a..647c293 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -19,6 +19,9 @@ import {
   Sparkles,
   ArrowLeft,
   CheckSquare,
+  PanelLeftClose,
+  PanelLeftOpen,
+  ChevronLeft,
 } from 'lucide-react';
 import {
   Document,
@@ -268,6 +271,23 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [newFolderName, setNewFolderName] = useState<string>('');
   const [newFolderIsShared, setNewFolderIsShared] = useState<boolean>(false);
   const [mobileShowDetail, setMobileShowDetail] = useState<boolean>(Boolean(initialDocId));
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState<boolean>(() => {
+    try {
+      return localStorage.getItem('mindsift:workspace_sidebar_collapsed') === 'true';
+    } catch {
+      return false;
+    }
+  });
+
+  const toggleSidebar = useCallback(() => {
+    setIsSidebarCollapsed((prev) => {
+      const next = !prev;
+      try {
+        localStorage.setItem('mindsift:workspace_sidebar_collapsed', String(next));
+      } catch {}
+      return next;
+    });
+  }, []);
 
   // Drag and Drop state
   const [draggingDocId, setDraggingDocId] = useState<string | null>(null);
@@ -1003,117 +1023,155 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   }, [tagsSummary, tagSearchQuery, tagSortBy]);
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] bg-canvas rounded-card border border-border overflow-hidden shadow-panel">
-      {/* LEFT MASTER SIDEBAR */}
-      <aside
-        className={`${
-          mobileShowDetail ? 'hidden lg:flex' : 'flex'
-        } w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-canvas border-r border-border`}
-      >
-        {/* Sidebar Header & Actions */}
-        <div className="p-3 border-b border-border space-y-2">
-          <div className="flex items-center justify-between">
-            <h2 className="text-xs font-bold text-main uppercase tracking-wider">
-              Notizen & Outliner
-            </h2>
-            <div className="flex items-center gap-1">
-              <button
-                type="button"
-                onClick={() => setShowNewFolderModal(true)}
-                className="btn-action p-1 text-muted hover:text-main"
-                title="Neuer Ordner"
-              >
-                <FolderPlus className="w-4 h-4" />
-              </button>
-              <button
-                type="button"
-                onClick={() => handleCreateDocument('')}
-                className="h-7 px-2.5 bg-canvas hover:bg-panel border border-border border-dashed rounded-btn text-xs text-muted hover:text-main inline-flex items-center gap-1 transition-colors cursor-pointer"
-                title="Neue Notiz anlegen"
-              >
-                <Plus className="w-3.5 h-3.5" />
-                <span>Notiz</span>
-              </button>
+    <div className="w-full space-y-3">
+      {/* Top Header: Workspace Tabs & Actions */}
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
+        {/* Workspace selector tabs */}
+        <div className="flex flex-wrap items-center gap-1">
+          <button
+            type="button"
+            onClick={() => setSubView('editor')}
+            className={`h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer ${
+              subView === 'editor'
+                ? 'bg-panel border-accent text-main'
+                : 'bg-canvas border-border text-muted hover:text-main'
+            }`}
+          >
+            <FileText className="w-3.5 h-3.5 text-accent" />
+            <span>Notizen</span>
+            {docs.length > 0 && <span className="ml-1 badge-neutral text-[10px]">{docs.length}</span>}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => {
+              setSubView('todos');
+              setMobileShowDetail(true);
+            }}
+            className={`h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer ${
+              subView === 'todos'
+                ? 'bg-panel border-accent text-main'
+                : 'bg-canvas border-border text-muted hover:text-main'
+            }`}
+          >
+            <Check className="w-3.5 h-3.5 text-status-ok" />
+            <span>To-Dos</span>
+            {totalOpenTodos > 0 && <span className="ml-1 badge-neutral text-[10px]">{totalOpenTodos}</span>}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => {
+              setSubView('tags');
+              setMobileShowDetail(true);
+            }}
+            className={`h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer ${
+              subView === 'tags' || subView === 'tag_detail'
+                ? 'bg-panel border-accent text-main'
+                : 'bg-canvas border-border text-muted hover:text-main'
+            }`}
+          >
+            <Hash className="w-3.5 h-3.5 text-accent" />
+            <span>Hashtags</span>
+            {tagsSummary.length > 0 && <span className="ml-1 badge-neutral text-[10px]">{tagsSummary.length}</span>}
+          </button>
+        </div>
+
+        {/* Right Action buttons */}
+        <div className="flex items-center gap-2">
+          {subView === 'editor' && (
+            <button
+              type="button"
+              onClick={toggleSidebar}
+              className={`hidden sm:flex h-8 px-2.5 text-xs font-medium border rounded-btn transition-colors items-center gap-1.5 cursor-pointer ${
+                isSidebarCollapsed
+                  ? 'bg-panel border-accent text-accent'
+                  : 'bg-canvas border-border text-muted hover:text-main'
+              }`}
+              title={isSidebarCollapsed ? 'Ordnerleiste einblenden' : 'Ordnerleiste einklappen'}
+            >
+              {isSidebarCollapsed ? (
+                <PanelLeftOpen className="w-3.5 h-3.5" />
+              ) : (
+                <PanelLeftClose className="w-3.5 h-3.5" />
+              )}
+              <span>{isSidebarCollapsed ? 'Ordner anzeigen' : 'Ordner einklappen'}</span>
+            </button>
+          )}
+
+          <button
+            type="button"
+            onClick={() => handleCreateDocument('')}
+            className="h-8 px-2.5 bg-canvas hover:bg-panel border border-border border-dashed rounded-btn text-xs text-muted hover:text-main flex items-center gap-1 transition-colors cursor-pointer"
+            title="Neue Notiz anlegen"
+          >
+            <Plus className="w-3.5 h-3.5" />
+            <span>Neue Notiz</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Main Workspace Split Pane */}
+      <div className="flex h-[calc(100vh-7.5rem)] bg-canvas rounded-card border border-border overflow-hidden shadow-panel">
+        {/* LEFT MASTER SIDEBAR */}
+        <aside
+          className={`${
+            isSidebarCollapsed
+              ? 'hidden'
+              : mobileShowDetail
+              ? 'hidden lg:flex'
+              : 'flex'
+          } w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-canvas border-r border-border transition-all duration-200`}
+        >
+          {/* Sidebar Header & Actions */}
+          <div className="p-3 border-b border-border space-y-2">
+            <div className="flex items-center justify-between">
+              <h2 className="text-xs font-bold text-main uppercase tracking-wider">
+                Notizen & Outliner
+              </h2>
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  onClick={() => setShowNewFolderModal(true)}
+                  className="btn-action p-1 text-muted hover:text-main"
+                  title="Neuer Ordner"
+                >
+                  <FolderPlus className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleCreateDocument('')}
+                  className="h-7 px-2.5 bg-canvas hover:bg-panel border border-border border-dashed rounded-btn text-xs text-muted hover:text-main inline-flex items-center gap-1 transition-colors cursor-pointer"
+                  title="Neue Notiz anlegen"
+                >
+                  <Plus className="w-3.5 h-3.5" />
+                  <span>Notiz</span>
+                </button>
+              </div>
+            </div>
+
+            {/* Search Input */}
+            <div className="relative">
+              <Search className="w-3.5 h-3.5 text-faint absolute left-2.5 top-1/2 -translate-y-1/2" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Notizen oder #Tags suchen…"
+                className="input-field w-full pl-8 pr-6 py-1 text-xs"
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => setSearchQuery('')}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-faint hover:text-main"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              )}
             </div>
           </div>
 
-          {/* Search Input */}
-          <div className="relative">
-            <Search className="w-3.5 h-3.5 text-faint absolute left-2.5 top-1/2 -translate-y-1/2" />
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Notizen oder #Tags suchen…"
-              className="input-field w-full pl-8 pr-6 py-1 text-xs"
-            />
-            {searchQuery && (
-              <button
-                type="button"
-                onClick={() => setSearchQuery('')}
-                className="absolute right-2 top-1/2 -translate-y-1/2 text-faint hover:text-main"
-              >
-                <X className="w-3.5 h-3.5" />
-              </button>
-            )}
-          </div>
-
-          {/* Sub-view Switcher: Notizen vs. To-Dos vs. Hashtags */}
-          <div className="grid grid-cols-3 gap-1 p-0.5 rounded-btn bg-canvas border border-border text-xs">
-            <button
-              type="button"
-              onClick={() => setSubView('editor')}
-              className={`py-1.5 px-1 rounded-btn font-medium transition-colors flex items-center justify-center gap-1 cursor-pointer truncate ${
-                subView === 'editor'
-                  ? 'bg-panel-elevated text-main font-semibold shadow-xs'
-                  : 'text-muted hover:text-main'
-              }`}
-              title="Notizen & Dokumente"
-            >
-              <FileText className="w-3.5 h-3.5 text-accent shrink-0" />
-              <span className="truncate">Notizen</span>
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setSubView('todos');
-                setMobileShowDetail(true);
-              }}
-              className={`py-1.5 px-1 rounded-btn font-medium transition-colors flex items-center justify-center gap-1 cursor-pointer truncate ${
-                subView === 'todos'
-                  ? 'bg-panel-elevated text-main font-semibold shadow-xs'
-                  : 'text-muted hover:text-main'
-              }`}
-              title="To-Dos Rollup"
-            >
-              <Check className="w-3.5 h-3.5 text-status-ok shrink-0" />
-              <span className="truncate">To-Dos</span>
-              {totalOpenTodos > 0 && (
-                <span className="badge-neutral text-[9px] px-1 py-0">{totalOpenTodos}</span>
-              )}
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setSubView('tags');
-                setMobileShowDetail(true);
-              }}
-              className={`py-1.5 px-1 rounded-btn font-medium transition-colors flex items-center justify-center gap-1 cursor-pointer truncate ${
-                subView === 'tags' || subView === 'tag_detail'
-                  ? 'bg-panel-elevated text-main font-semibold shadow-xs'
-                  : 'text-muted hover:text-main'
-              }`}
-              title="Hashtag Kacheln & Übersicht"
-            >
-              <Hash className="w-3.5 h-3.5 text-accent shrink-0" />
-              <span className="truncate">Hashtags</span>
-              {tagsSummary.length > 0 && (
-                <span className="badge-neutral text-[9px] px-1 py-0">{tagsSummary.length}</span>
-              )}
-            </button>
-          </div>
-        </div>
-
         {/* Scrollable Navigation Tree */}
         <div className="flex-1 overflow-y-auto p-2 space-y-3">
           {/* Drop target for moving docs or folders to root */}
@@ -1273,7 +1331,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       {/* RIGHT DETAIL AREA (STRICTLY ISOLATED BY KEY) */}
       <main
         className={`${
-          mobileShowDetail ? 'flex' : 'hidden lg:flex'
+          mobileShowDetail ? 'flex' : isSidebarCollapsed ? 'flex' : 'hidden lg:flex'
         } flex-1 flex-col min-w-0 h-full overflow-hidden bg-canvas`}
       >
         {subView === 'editor' && selectedDocId ? (
@@ -1298,49 +1356,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
              ========================================================================= */
           <div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
             <div className="max-w-4xl mx-auto space-y-5">
-              {/* Top Navigation Tabs */}
-              <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-3">
-                <div className="flex flex-wrap items-center gap-1.5">
-                  <button
-                    type="button"
-                    onClick={() => setSubView('editor')}
-                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
-                  >
-                    <FileText className="w-3.5 h-3.5 text-accent" />
-                    <span>Notizen</span>
-                    <span className="badge-neutral text-[10px]">{docs.length}</span>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setSubView('todos');
-                      setMobileShowDetail(true);
-                    }}
-                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
-                  >
-                    <Check className="w-3.5 h-3.5 text-status-ok" />
-                    <span>To-Dos</span>
-                    <span className="badge-neutral text-[10px]">{totalOpenTodos}</span>
-                  </button>
-                  <button
-                    type="button"
-                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-panel border-accent text-main font-semibold shadow-xs"
-                  >
-                    <Hash className="w-3.5 h-3.5 text-accent" />
-                    <span>Hashtags</span>
-                    <span className="badge-neutral text-[10px]">{tagsSummary.length}</span>
-                  </button>
-                </div>
-
-                <button
-                  type="button"
-                  onClick={() => setSubView('editor')}
-                  className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
-                >
-                  Zum Editor
-                </button>
-              </div>
-
               {/* Header with Title and Search Controls */}
               <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                 <div>
@@ -1507,58 +1522,16 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         ) : subView === 'tag_detail' && selectedTag ? (
           <div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
             <div className="max-w-3xl mx-auto space-y-4">
-              {/* Top Navigation Tabs */}
-              <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-3">
-                <div className="flex flex-wrap items-center gap-1.5">
-                  <button
-                    type="button"
-                    onClick={() => setSubView('editor')}
-                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
-                  >
-                    <FileText className="w-3.5 h-3.5 text-accent" />
-                    <span>Notizen</span>
-                    <span className="badge-neutral text-[10px]">{docs.length}</span>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setSubView('todos');
-                      setMobileShowDetail(true);
-                    }}
-                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
-                  >
-                    <Check className="w-3.5 h-3.5 text-status-ok" />
-                    <span>To-Dos</span>
-                    <span className="badge-neutral text-[10px]">{totalOpenTodos}</span>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setSubView('tags')}
-                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-panel border-accent text-main font-semibold shadow-xs"
-                  >
-                    <Hash className="w-3.5 h-3.5 text-accent" />
-                    <span>Hashtags</span>
-                    <span className="badge-neutral text-[10px]">{tagsSummary.length}</span>
-                  </button>
-                </div>
-
-                <div className="flex items-center gap-1.5">
-                  <button
-                    type="button"
-                    onClick={() => setSubView('tags')}
-                    className="btn-action inline-flex items-center gap-1 px-2.5 py-1 text-xs text-muted hover:text-main cursor-pointer"
-                  >
-                    <ArrowLeft className="w-3.5 h-3.5" />
-                    <span>Alle Kacheln</span>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setSubView('editor')}
-                    className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
-                  >
-                    Zum Editor
-                  </button>
-                </div>
+              {/* Back to all tags */}
+              <div className="flex items-center justify-between border-b border-border pb-3">
+                <button
+                  type="button"
+                  onClick={() => setSubView('tags')}
+                  className="btn-action inline-flex items-center gap-1.5 px-2.5 py-1 text-xs text-muted hover:text-main cursor-pointer"
+                >
+                  <ArrowLeft className="w-3.5 h-3.5" />
+                  <span>Alle Hashtag-Kacheln</span>
+                </button>
               </div>
 
               {/* Tag Context Header */}
@@ -1755,49 +1728,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         ) : subView === 'todos' ? (
           <div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
             <div className="max-w-3xl mx-auto space-y-4">
-              {/* Top Navigation Tabs */}
-              <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-3">
-                <div className="flex flex-wrap items-center gap-1.5">
-                  <button
-                    type="button"
-                    onClick={() => setSubView('editor')}
-                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
-                  >
-                    <FileText className="w-3.5 h-3.5 text-accent" />
-                    <span>Notizen</span>
-                    <span className="badge-neutral text-[10px]">{docs.length}</span>
-                  </button>
-                  <button
-                    type="button"
-                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-panel border-accent text-main font-semibold shadow-xs"
-                  >
-                    <Check className="w-3.5 h-3.5 text-status-ok" />
-                    <span>To-Dos</span>
-                    <span className="badge-neutral text-[10px]">{totalOpenTodos}</span>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setSubView('tags');
-                      setMobileShowDetail(true);
-                    }}
-                    className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
-                  >
-                    <Hash className="w-3.5 h-3.5 text-accent" />
-                    <span>Hashtags</span>
-                    <span className="badge-neutral text-[10px]">{tagsSummary.length}</span>
-                  </button>
-                </div>
-
-                <button
-                  type="button"
-                  onClick={() => setSubView('editor')}
-                  className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
-                >
-                  Zum Editor
-                </button>
-              </div>
-
               <div className="flex flex-col sm:flex-row sm:items-center justify-between border-b border-border pb-3 gap-2">
                 <div>
                   <h2 className="text-lg font-bold text-main">
@@ -1865,14 +1795,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                       <span>Ordner</span>
                     </button>
                   </div>
-
-                  <button
-                    type="button"
-                    onClick={() => setSubView('editor')}
-                    className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
-                  >
-                    Zum Editor
-                  </button>
                 </div>
               </div>
 
@@ -2272,16 +2194,30 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               Keine Notiz ausgewählt
             </h3>
             <p className="text-xs text-muted max-w-sm mb-3">
-              Wähle links in der Seitenleiste eine bestehende Notiz aus oder erstelle eine neue.
+              {isSidebarCollapsed
+                ? 'Die Ordnerleiste ist eingeklappt. Blende sie ein oder erstelle eine neue Notiz.'
+                : 'Wähle links in der Seitenleiste eine bestehende Notiz aus oder erstelle eine neue.'}
             </p>
-            <button
-              type="button"
-              onClick={() => handleCreateDocument('')}
-              className="btn-primary inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold"
-            >
-              <Plus className="w-3.5 h-3.5" />
-              <span>Notiz erstellen</span>
-            </button>
+            <div className="flex items-center gap-2">
+              {isSidebarCollapsed && (
+                <button
+                  type="button"
+                  onClick={toggleSidebar}
+                  className="btn-action inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold cursor-pointer"
+                >
+                  <PanelLeftOpen className="w-3.5 h-3.5" />
+                  <span>Ordner anzeigen</span>
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={() => handleCreateDocument('')}
+                className="btn-primary inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold"
+              >
+                <Plus className="w-3.5 h-3.5" />
+                <span>Notiz erstellen</span>
+              </button>
+            </div>
           </div>
         )}
       </main>
@@ -2402,6 +2338,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           }}
         />
       )}
+      </div>
     </div>
   );
 };
-- 
2.54.0


From 894a2e3b766d1073ba5d8cf7e0e8f42ef8f3b1e6 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 11:02:28 +0100
Subject: [PATCH 29/33] style(workspace): move sidebar toggle to the left as
 icon-only button

---
 .../src/features/workspace/WorkspaceView.tsx  | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 647c293..518d8a8 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -1026,8 +1026,28 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     <div className="w-full space-y-3">
       {/* Top Header: Workspace Tabs & Actions */}
       <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
-        {/* Workspace selector tabs */}
+        {/* Workspace selector tabs & left sidebar toggle */}
         <div className="flex flex-wrap items-center gap-1">
+          {subView === 'editor' && (
+            <button
+              type="button"
+              onClick={toggleSidebar}
+              className={`hidden sm:inline-flex h-8 w-8 items-center justify-center rounded-btn border transition-colors cursor-pointer ${
+                isSidebarCollapsed
+                  ? 'bg-panel border-accent text-accent'
+                  : 'bg-canvas border-border text-muted hover:text-main'
+              }`}
+              title={isSidebarCollapsed ? 'Ordnerleiste einblenden' : 'Ordnerleiste einklappen'}
+              aria-label={isSidebarCollapsed ? 'Ordnerleiste einblenden' : 'Ordnerleiste einklappen'}
+            >
+              {isSidebarCollapsed ? (
+                <PanelLeftOpen className="w-4 h-4" />
+              ) : (
+                <PanelLeftClose className="w-4 h-4" />
+              )}
+            </button>
+          )}
+
           <button
             type="button"
             onClick={() => setSubView('editor')}
@@ -1079,26 +1099,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
         {/* Right Action buttons */}
         <div className="flex items-center gap-2">
-          {subView === 'editor' && (
-            <button
-              type="button"
-              onClick={toggleSidebar}
-              className={`hidden sm:flex h-8 px-2.5 text-xs font-medium border rounded-btn transition-colors items-center gap-1.5 cursor-pointer ${
-                isSidebarCollapsed
-                  ? 'bg-panel border-accent text-accent'
-                  : 'bg-canvas border-border text-muted hover:text-main'
-              }`}
-              title={isSidebarCollapsed ? 'Ordnerleiste einblenden' : 'Ordnerleiste einklappen'}
-            >
-              {isSidebarCollapsed ? (
-                <PanelLeftOpen className="w-3.5 h-3.5" />
-              ) : (
-                <PanelLeftClose className="w-3.5 h-3.5" />
-              )}
-              <span>{isSidebarCollapsed ? 'Ordner anzeigen' : 'Ordner einklappen'}</span>
-            </button>
-          )}
-
           <button
             type="button"
             onClick={() => handleCreateDocument('')}
-- 
2.54.0


From 8ee7b135af685679ee87216e476d9225bb690376 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 11:07:36 +0100
Subject: [PATCH 30/33] style(tasks,lists): align header spacing with workspace
 by eliminating top margin

---
 .../src/features/lists/SharedListsView.tsx    | 90 +++++++++----------
 frontend/src/features/triage/TasksView.tsx    | 58 ++++++------
 2 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/frontend/src/features/lists/SharedListsView.tsx b/frontend/src/features/lists/SharedListsView.tsx
index 03b737d..49f9484 100644
--- a/frontend/src/features/lists/SharedListsView.tsx
+++ b/frontend/src/features/lists/SharedListsView.tsx
@@ -794,52 +794,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
   return (
     <div className="w-full space-y-3">
-      {/* Mobile Compact Header Bar (List switching & actions live in MindSift Logo Menu) */}
-      <div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border">
-        <div className="flex items-center gap-2 min-w-0">
-          <span className="text-sm font-semibold text-main truncate">
-            {activeList ? `${activeList.icon} ${activeList.title}` : '🛒 Einkaufsliste'}
-          </span>
-          {openItems.length > 0 && (
-            <span className="badge-neutral text-[11px] flex-shrink-0">
-              {openItems.length} offen
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-1.5 flex-shrink-0">
-          {activeList && (
-            <button
-              type="button"
-              onClick={openShareModal}
-              className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center"
-              title="Liste teilen"
-            >
-              <Users className="w-4 h-4 text-accent" />
-            </button>
-          )}
-          <div
-            className={`h-9 w-9 flex items-center justify-center rounded-btn border transition-colors ${
-              wsConnected
-                ? realtimeTransport === 'sse'
-                  ? 'bg-teal-500/10 border-teal-500/30 text-teal-400'
-                  : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
-                : 'bg-canvas border-border text-muted'
-            }`}
-            title={
-              wsConnected
-                ? realtimeTransport === 'sse'
-                  ? 'Live synchronisiert (Server-Sent Events / Proxy-Stream)'
-                  : 'Live synchronisiert (WebSocket online)'
-                : 'Offline'
-            }
-          >
-            <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
-          </div>
-        </div>
-      </div>
-
       {/* Top Header: List Tabs & Actions (Desktop) */}
-      <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
+      <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2 !mt-0">
         {/* List Tabs */}
         <div className="flex flex-wrap items-center gap-1">
           {lists.map((lst) => {
@@ -952,6 +908,50 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
         </div>
       </div>
 
+      {/* Mobile Compact Header Bar (List switching & actions live in MindSift Logo Menu) */}
+      <div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border !mt-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="text-sm font-semibold text-main truncate">
+            {activeList ? `${activeList.icon} ${activeList.title}` : '🛒 Einkaufsliste'}
+          </span>
+          {openItems.length > 0 && (
+            <span className="badge-neutral text-[11px] flex-shrink-0">
+              {openItems.length} offen
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1.5 flex-shrink-0">
+          {activeList && (
+            <button
+              type="button"
+              onClick={openShareModal}
+              className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center"
+              title="Liste teilen"
+            >
+              <Users className="w-4 h-4 text-accent" />
+            </button>
+          )}
+          <div
+            className={`h-9 w-9 flex items-center justify-center rounded-btn border transition-colors ${
+              wsConnected
+                ? realtimeTransport === 'sse'
+                  ? 'bg-teal-500/10 border-teal-500/30 text-teal-400'
+                  : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
+                : 'bg-canvas border-border text-muted'
+            }`}
+            title={
+              wsConnected
+                ? realtimeTransport === 'sse'
+                  ? 'Live synchronisiert (Server-Sent Events / Proxy-Stream)'
+                  : 'Live synchronisiert (WebSocket online)'
+                : 'Offline'
+            }
+          >
+            <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
+          </div>
+        </div>
+      </div>
+
       {showNewListModal && (
         <form
           onSubmit={handleCreateList}
diff --git a/frontend/src/features/triage/TasksView.tsx b/frontend/src/features/triage/TasksView.tsx
index de19dd4..3c057e4 100644
--- a/frontend/src/features/triage/TasksView.tsx
+++ b/frontend/src/features/triage/TasksView.tsx
@@ -1264,36 +1264,8 @@ export const TasksView: React.FC<TasksViewProps> = ({
 
   return (
     <div className="w-full space-y-3">
-      {/* Mobile Compact Context Bar (replaces cluttered button rows; options live in MindSift Logo Menu) */}
-      <div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border">
-        <div className="flex items-center gap-2 min-w-0">
-          <span className="text-sm font-semibold text-main truncate">
-            {currentSelectedList ? `${currentSelectedList.icon} ${currentSelectedList.title}` : '📋 Alle Aufgaben'}
-          </span>
-          <span className="badge-neutral text-[11px] flex-shrink-0">
-            {viewMode === 'kanban'
-              ? 'Kanban'
-              : filter === 'open'
-              ? `Offen (${openTasks.length})`
-              : filter === 'done'
-              ? `Erledigt (${doneTasks.length})`
-              : `Papierkorb (${safeDiscarded.length})`}
-          </span>
-        </div>
-        {currentSelectedList && (
-          <button
-            type="button"
-            onClick={() => handleOpenShareModal(currentSelectedList)}
-            className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center flex-shrink-0"
-            title="Aufgabenliste teilen"
-          >
-            <Users className="w-4 h-4 text-accent" />
-          </button>
-        )}
-      </div>
-
       {/* Top Header: Task Lists Tabs & View Mode Switcher (Desktop) */}
-      <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
+      <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2 !mt-0">
         {/* Task Lists selector tabs */}
         <div className="flex flex-wrap items-center gap-1">
           <button
@@ -1448,6 +1420,34 @@ export const TasksView: React.FC<TasksViewProps> = ({
         </div>
       </div>
 
+      {/* Mobile Compact Context Bar (replaces cluttered button rows; options live in MindSift Logo Menu) */}
+      <div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border !mt-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="text-sm font-semibold text-main truncate">
+            {currentSelectedList ? `${currentSelectedList.icon} ${currentSelectedList.title}` : '📋 Alle Aufgaben'}
+          </span>
+          <span className="badge-neutral text-[11px] flex-shrink-0">
+            {viewMode === 'kanban'
+              ? 'Kanban'
+              : filter === 'open'
+              ? `Offen (${openTasks.length})`
+              : filter === 'done'
+              ? `Erledigt (${doneTasks.length})`
+              : `Papierkorb (${safeDiscarded.length})`}
+          </span>
+        </div>
+        {currentSelectedList && (
+          <button
+            type="button"
+            onClick={() => handleOpenShareModal(currentSelectedList)}
+            className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center flex-shrink-0"
+            title="Aufgabenliste teilen"
+          >
+            <Users className="w-4 h-4 text-accent" />
+          </button>
+        )}
+      </div>
+
       {/* Quick Add Task Input (Desktop only - on mobile, tapping the bottom '+' FAB opens mobile create sheet) */}
       <form
         onSubmit={handleQuickAddTask}
-- 
2.54.0


From 3d780856b009b35fe7426386061be25c7e281294 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 11:11:44 +0100
Subject: [PATCH 31/33] refactor(workspace): remove duplicate new note button
 from top tabs

---
 frontend/src/features/workspace/WorkspaceView.tsx | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 518d8a8..791b8a2 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -1096,19 +1096,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             {tagsSummary.length > 0 && <span className="ml-1 badge-neutral text-[10px]">{tagsSummary.length}</span>}
           </button>
         </div>
-
-        {/* Right Action buttons */}
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => handleCreateDocument('')}
-            className="h-8 px-2.5 bg-canvas hover:bg-panel border border-border border-dashed rounded-btn text-xs text-muted hover:text-main flex items-center gap-1 transition-colors cursor-pointer"
-            title="Neue Notiz anlegen"
-          >
-            <Plus className="w-3.5 h-3.5" />
-            <span>Neue Notiz</span>
-          </button>
-        </div>
       </div>
 
       {/* Main Workspace Split Pane */}
-- 
2.54.0


From 37948d3a6ab6db1118f726152078b53ada05d5d0 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 11:32:25 +0100
Subject: [PATCH 32/33] feat(workspace): move connection status indicator to
 top tabs header

---
 .../src/features/workspace/DocumentEditor.tsx | 37 ++--------
 .../src/features/workspace/WorkspaceView.tsx  | 67 ++++++++++++++++++-
 2 files changed, 73 insertions(+), 31 deletions(-)

diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
index 6e40574..80d9f44 100644
--- a/frontend/src/features/workspace/DocumentEditor.tsx
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -5,7 +5,6 @@ import {
   Trash2,
   Download,
   FileText,
-  Radio,
   Loader2,
   ArrowLeft,
   Hash,
@@ -18,7 +17,7 @@ import {
 } from 'lucide-react';
 import { Document, DocumentBlock, User } from '../../lib/types';
 import { api } from '../../lib/api';
-import { useDocumentSync, DocSyncEvent, RemoteCursor } from '../../lib/useDocumentSync';
+import { useDocumentSync, DocSyncEvent, RemoteCursor, DocSyncStatus } from '../../lib/useDocumentSync';
 import { OutlinerTree } from './OutlinerTree';
 
 export interface DocumentEditorProps {
@@ -34,6 +33,7 @@ export interface DocumentEditorProps {
   onSelectTag: (tag: string) => void;
   onWikiLinkClick?: (pageTitle: string) => void;
   onBackMobile?: () => void;
+  onSyncStatusChange?: (status: DocSyncStatus) => void;
 }
 
 const EMOJI_PALETTE = ['📝', '📄', '💡', '🚀', '📌', '📂', '🧠', '⚡', '🎯', '🛠️', '📊', '🔒'];
@@ -153,6 +153,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   onSelectTag,
   onWikiLinkClick,
   onBackMobile,
+  onSyncStatusChange,
 }) => {
   const [doc, setDoc] = useState<Document | null>(initialDoc || null);
   const [title, setTitle] = useState<string>(initialDoc?.title || '');
@@ -344,6 +345,10 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
     sendTitleUpdated,
   } = useDocumentSync(docId, handleRemoteEvent, canEdit, currentUser);
 
+  useEffect(() => {
+    onSyncStatusChange?.(syncStatus);
+  }, [syncStatus, onSyncStatusChange]);
+
   // Fetch isolated document state on mount
   useEffect(() => {
     let isCancelled = false;
@@ -750,34 +755,6 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             );
           })()}
 
-          {/* Live Sync Status (1:1 styling from SharedListsView) */}
-          <div
-            className={`h-8 w-8 flex items-center justify-center rounded-btn border transition-colors ${
-              syncStatus === 'connected'
-                ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
-                : syncStatus === 'connecting' || syncStatus === 'reconnecting'
-                ? 'bg-amber-500/10 border-amber-500/30 text-amber-500'
-                : 'bg-canvas border-border text-muted'
-            }`}
-            title={
-              syncStatus === 'connected'
-                ? 'Live synchronisiert (WebSocket online)'
-                : syncStatus === 'connecting' || syncStatus === 'reconnecting'
-                ? 'Verbindung wird aufgebaut…'
-                : 'Offline'
-            }
-          >
-            <Radio
-              className={`w-3.5 h-3.5 ${
-                syncStatus === 'connected'
-                  ? 'animate-pulse'
-                  : syncStatus === 'connecting' || syncStatus === 'reconnecting'
-                  ? 'animate-spin'
-                  : ''
-              }`}
-            />
-          </div>
-
           <button
             type="button"
             onClick={handleTogglePin}
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 791b8a2..9668fdf 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -22,6 +22,7 @@ import {
   PanelLeftClose,
   PanelLeftOpen,
   ChevronLeft,
+  Radio,
 } from 'lucide-react';
 import {
   Document,
@@ -34,7 +35,16 @@ import {
   UnifiedShare,
   User,
 } from '../../lib/types';
-import { api, onWebSocketMessage, triggerHaptic } from '../../lib/api';
+import {
+  api,
+  onWebSocketMessage,
+  triggerHaptic,
+  onRealtimeStatus,
+  isRealtimeConnected,
+  getRealtimeTransport,
+  RealtimeTransport,
+} from '../../lib/api';
+import { DocSyncStatus } from '../../lib/useDocumentSync';
 import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { useMobileActions } from '../../context/MobileActionContext';
 import { DocumentEditor } from './DocumentEditor';
@@ -289,6 +299,19 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     });
   }, []);
 
+  // Realtime connection status for top header indicator (identical to SharedListsView)
+  const [realtimeConnected, setRealtimeConnected] = useState<boolean>(() => isRealtimeConnected());
+  const [realtimeTransport, setRealtimeTransport] = useState<RealtimeTransport>(() => getRealtimeTransport());
+  const [activeDocSyncStatus, setActiveDocSyncStatus] = useState<DocSyncStatus>('connected');
+
+  useEffect(() => {
+    const unsub = onRealtimeStatus((connected, transport) => {
+      setRealtimeConnected(connected);
+      setRealtimeTransport(transport);
+    });
+    return unsub;
+  }, []);
+
   // Drag and Drop state
   const [draggingDocId, setDraggingDocId] = useState<string | null>(null);
   const [draggingFolderPath, setDraggingFolderPath] = useState<string | null>(null);
@@ -1096,6 +1119,47 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             {tagsSummary.length > 0 && <span className="ml-1 badge-neutral text-[10px]">{tagsSummary.length}</span>}
           </button>
         </div>
+
+        {/* Right Header Section: Live Sync Status (identical to SharedListsView) */}
+        <div className="flex items-center gap-2">
+          {(() => {
+            const isDocActive = subView === 'editor' && Boolean(selectedDocId);
+            const isConnected = isDocActive
+              ? activeDocSyncStatus === 'connected'
+              : realtimeConnected;
+            const isConnecting = isDocActive && (activeDocSyncStatus === 'connecting' || activeDocSyncStatus === 'reconnecting');
+            const isSSE = !isDocActive && realtimeTransport === 'sse';
+
+            return (
+              <div
+                className={`h-8 w-8 flex items-center justify-center rounded-btn border transition-colors ${
+                  isConnected
+                    ? isSSE
+                      ? 'bg-teal-500/10 border-teal-500/30 text-teal-400'
+                      : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
+                    : isConnecting
+                    ? 'bg-amber-500/10 border-amber-500/30 text-amber-500'
+                    : 'bg-canvas border-border text-muted'
+                }`}
+                title={
+                  isConnected
+                    ? isSSE
+                      ? 'Live synchronisiert (Server-Sent Events / Proxy-Stream)'
+                      : 'Live synchronisiert (WebSocket online)'
+                    : isConnecting
+                    ? 'Verbindung wird aufgebaut…'
+                    : 'Offline'
+                }
+              >
+                <Radio
+                  className={`w-3.5 h-3.5 ${
+                    isConnected ? 'animate-pulse' : isConnecting ? 'animate-spin' : ''
+                  }`}
+                />
+              </div>
+            );
+          })()}
+        </div>
       </div>
 
       {/* Main Workspace Split Pane */}
@@ -1336,6 +1400,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             onSelectTag={handleSelectTag}
             onWikiLinkClick={handleWikiLinkClick}
             onBackMobile={() => setMobileShowDetail(false)}
+            onSyncStatusChange={setActiveDocSyncStatus}
           />
         ) : subView === 'tags' ? (
           /* =========================================================================
-- 
2.54.0


From f74ff7c63b7ccd27cb3277e2b6611269698bdf94 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 11:33:47 +0100
Subject: [PATCH 33/33] feat(workspace): hide folder sidebar in todos and tags,
 keep toggle button fixed and disabled

---
 .../src/features/workspace/WorkspaceView.tsx  | 55 ++++++++++++-------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 9668fdf..0aa8cb7 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -1051,25 +1051,38 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
         {/* Workspace selector tabs & left sidebar toggle */}
         <div className="flex flex-wrap items-center gap-1">
-          {subView === 'editor' && (
-            <button
-              type="button"
-              onClick={toggleSidebar}
-              className={`hidden sm:inline-flex h-8 w-8 items-center justify-center rounded-btn border transition-colors cursor-pointer ${
-                isSidebarCollapsed
-                  ? 'bg-panel border-accent text-accent'
-                  : 'bg-canvas border-border text-muted hover:text-main'
-              }`}
-              title={isSidebarCollapsed ? 'Ordnerleiste einblenden' : 'Ordnerleiste einklappen'}
-              aria-label={isSidebarCollapsed ? 'Ordnerleiste einblenden' : 'Ordnerleiste einklappen'}
-            >
-              {isSidebarCollapsed ? (
-                <PanelLeftOpen className="w-4 h-4" />
-              ) : (
-                <PanelLeftClose className="w-4 h-4" />
-              )}
-            </button>
-          )}
+          <button
+            type="button"
+            disabled={subView !== 'editor'}
+            onClick={subView === 'editor' ? toggleSidebar : undefined}
+            className={`hidden sm:inline-flex h-8 w-8 items-center justify-center rounded-btn border transition-colors ${
+              subView !== 'editor'
+                ? 'opacity-35 bg-canvas border-border text-faint cursor-not-allowed pointer-events-none'
+                : isSidebarCollapsed
+                ? 'bg-panel border-accent text-accent cursor-pointer'
+                : 'bg-canvas border-border text-muted hover:text-main cursor-pointer'
+            }`}
+            title={
+              subView !== 'editor'
+                ? 'Ordnerleiste nur im Notizen-Modus verfügbar'
+                : isSidebarCollapsed
+                ? 'Ordnerleiste einblenden'
+                : 'Ordnerleiste einklappen'
+            }
+            aria-label={
+              subView !== 'editor'
+                ? 'Ordnerleiste nur im Notizen-Modus verfügbar'
+                : isSidebarCollapsed
+                ? 'Ordnerleiste einblenden'
+                : 'Ordnerleiste einklappen'
+            }
+          >
+            {isSidebarCollapsed ? (
+              <PanelLeftOpen className="w-4 h-4" />
+            ) : (
+              <PanelLeftClose className="w-4 h-4" />
+            )}
+          </button>
 
           <button
             type="button"
@@ -1167,7 +1180,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         {/* LEFT MASTER SIDEBAR */}
         <aside
           className={`${
-            isSidebarCollapsed
+            subView !== 'editor' || isSidebarCollapsed
               ? 'hidden'
               : mobileShowDetail
               ? 'hidden lg:flex'
@@ -1382,7 +1395,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       {/* RIGHT DETAIL AREA (STRICTLY ISOLATED BY KEY) */}
       <main
         className={`${
-          mobileShowDetail ? 'flex' : isSidebarCollapsed ? 'flex' : 'hidden lg:flex'
+          subView !== 'editor' || mobileShowDetail || isSidebarCollapsed ? 'flex' : 'hidden lg:flex'
         } flex-1 flex-col min-w-0 h-full overflow-hidden bg-canvas`}
       >
         {subView === 'editor' && selectedDocId ? (
-- 
2.54.0