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)
 				}
 			}
 		}