feat: complete workspace, triage, outliner and sharing overhaul (tasks 1-26)

frontend/public/icon.svg

@@ -1,5 +1,14 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
-  <rect width="512" height="512" rx="128" fill="#0b0f19"/>
-  <circle cx="256" cy="256" r="164" fill="none" stroke="#8ab4f8" stroke-width="36"/>
-  <path d="M184 266 L236 318 L338 194" fill="none" stroke="#c58af9" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect width="512" height="512" rx="128" fill="#8ab4f8"/>
+  <g transform="translate(80, 80) scale(14.666)" fill="none" stroke="#0b0f19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/>
+    <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/>
+    <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/>
+    <path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/>
+    <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/>
+    <path d="M3.477 10.896a4 4 0 0 1 .585-.396"/>
+    <path d="M19.938 10.5a4 4 0 0 1 .585.396"/>
+    <path d="M6 18a4 4 0 0 1-1.967-.516"/>
+    <path d="M19.967 17.484A4 4 0 0 1 18 18"/>
+  </g>
 </svg>

frontend/src/App.tsx

@@ -127,6 +127,7 @@ export const App: React.FC = () => {
   const [activeTab, setActiveTab] = useState<ActiveTab>('triage');
   const [previousTab, setPreviousTab] = useState<ActiveTab>('triage');
   const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
   const [captureFocusCount, setCaptureFocusCount] = useState(0);
   const [refreshRevision, setRefreshRevision] = useState(0);
 
@@ -143,6 +144,7 @@ export const App: React.FC = () => {
   const [mobileVoiceActive, setMobileVoiceActive] = useState(false);
   const [isVoiceCaptured, setIsVoiceCaptured] = useState(false);
   const mobileRecognitionRef = useRef<any>(null);
+  const mobileBaseVoiceRef = useRef('');
 
   const toggleMobileVoice = () => {
     const SpeechRecognition =
@@ -157,6 +159,7 @@ export const App: React.FC = () => {
       return;
     }
     try {
+      mobileBaseVoiceRef.current = mobileTriageContent.replace(/\s*\[…\]$/, '').trim();
       const recognition = new SpeechRecognition();
       recognition.lang = 'de-DE';
       recognition.continuous = false;
@@ -170,10 +173,8 @@ export const App: React.FC = () => {
         for (let i = 0; i < event.results.length; i++) {
           transcript += event.results[i][0].transcript;
         }
-        setMobileTriageContent((prev) => {
-          const base = prev.replace(/\s*\[…\]$/, '').trim();
-          return base ? `${base} ${transcript}` : transcript;
-        });
+        const base = mobileBaseVoiceRef.current;
+        setMobileTriageContent(base ? `${base} ${transcript}` : transcript);
         setIsVoiceCaptured(true);
       };
       recognition.onerror = () => setMobileVoiceActive(false);
@@ -549,8 +550,9 @@ export const App: React.FC = () => {
     refreshAll();
   };
 
-  const handleOpenDocument = (docId: string) => {
+  const handleOpenDocument = (docId: string, blockId?: string) => {
     setSelectedDocId(docId);
+    setSelectedBlockId(blockId || null);
     setActiveTab('workspace');
   };
 
@@ -636,9 +638,12 @@ export const App: React.FC = () => {
               <Brain className="w-4 h-4" />
             </div>
             <div className="flex items-center gap-1.5">
-              <span className="font-bold text-base text-main tracking-tight">
-                {authStatus.instanceName || 'MindSift'}
-              </span>
+              <div className="flex flex-col">
+                <span className="font-bold text-base text-main tracking-tight leading-none">
+                  {authStatus.instanceName || 'MindSift'}
+                </span>
+                <span className="text-[9px] text-muted font-mono leading-tight mt-0.5">v0.1</span>
+              </div>
               <span className="text-[11px] font-semibold text-accent bg-accent/15 px-1.5 py-0.5 rounded-md">
                 {activeTabLabelMap[activeTab]}
               </span>
@@ -698,9 +703,12 @@ export const App: React.FC = () => {
             <div className="w-7 h-7 bg-accent text-on-accent rounded-btn flex items-center justify-center">
               <Brain className="w-4 h-4" />
             </div>
-            <span className="font-bold text-sm sm:text-base text-main tracking-tight leading-none">
-              {authStatus.instanceName || 'MindSift'}
-            </span>
+            <div className="flex flex-col">
+              <span className="font-bold text-sm sm:text-base text-main tracking-tight leading-none">
+                {authStatus.instanceName || 'MindSift'}
+              </span>
+              <span className="text-[10px] text-muted font-mono leading-tight mt-0.5">v0.1</span>
+            </div>
           </div>
 
           {/* Quick-Capture Input Bubble directly in Header (above Tabs) */}
@@ -961,6 +969,7 @@ export const App: React.FC = () => {
               <WorkspaceView
                 currentUser={user}
                 initialDocId={selectedDocId}
+                initialBlockId={selectedBlockId}
                 onStatsChange={refreshAll}
               />
             )}

frontend/src/features/capture/InstantCaptureBar.tsx

@@ -52,6 +52,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const containerRef = useRef<HTMLFormElement>(null);
   const recognitionRef = useRef<any>(null);
+  const baseVoiceTextRef = useRef('');
+  const hasVoiceInputRef = useRef(false);
 
   const adjustHeight = (el?: HTMLTextAreaElement | null) => {
     const targetEl = el || inputRef.current;
@@ -131,6 +133,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
     }
 
     try {
+      baseVoiceTextRef.current = content.replace(/\s*\[…\]$/, '').trim();
+      hasVoiceInputRef.current = true;
+
       const recognition = new SpeechRecognition();
       recognition.lang = 'de-DE';
       recognition.continuous = false;
@@ -146,10 +151,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
         for (let i = 0; i < event.results.length; i++) {
           transcript += event.results[i][0].transcript;
         }
-        setContent((prev) => {
-          const base = prev.replace(/\s*\[…\]$/, '').trim();
-          return base ? `${base} ${transcript}` : transcript;
-        });
+        const base = baseVoiceTextRef.current;
+        setContent(base ? `${base} ${transcript}` : transcript);
       };
 
       recognition.onerror = () => {
@@ -180,7 +183,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
       overrideListId || targetListId || (lists.length > 0 ? lists[0].id : '');
     const capturedPriority = priority;
     const capturedDueDate = dueDate;
-    const capturedSource = isListening ? 'voice' : 'manual';
+    const capturedSource = hasVoiceInputRef.current || isListening ? 'voice' : 'manual';
+    hasVoiceInputRef.current = false;
 
     // Optimistically clear input immediately so the UI feels instant (<10ms) in all browsers
     setContent('');

frontend/src/features/lists/SharedListsView.tsx

@@ -85,6 +85,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
   const [newItemText, setNewItemText] = useState('');
   const [newItemQty, setNewItemQty] = useState('');
   const [isSubmittingItem, setIsSubmittingItem] = useState(false);
+  const [editingQtyItemId, setEditingQtyItemId] = useState<string | null>(null);
+  const [editingQtyValue, setEditingQtyValue] = useState('');
 
   const [wsConnected, setWsConnected] = useState(false);
   const [realtimeTransport, setRealtimeTransport] = useState<RealtimeTransport>('none');
@@ -174,7 +176,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
               return { ...l, items: deduplicateItems([newItem, ...l.items]) };
             })
           );
-        } else if (msg.event === 'ITEM_TOGGLED' && msgListId) {
+        } else if ((msg.event === 'ITEM_TOGGLED' || msg.event === 'ITEM_UPDATED') && msgListId) {
           const updatedItem: ListItem = msg.payload;
           setLists((prev) =>
             prev.map((l) => {
@@ -273,6 +275,26 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
     }
   };
 
+  const handleSaveQuantity = async (itemId: string, quantity: string) => {
+    setEditingQtyItemId(null);
+    if (!activeList) return;
+    const trimmed = quantity.trim();
+    try {
+      const updated = await api.updateListItem(activeList.id, itemId, { quantity: trimmed });
+      setLists((prev) =>
+        prev.map((l) => {
+          if (l.id !== activeList.id) return l;
+          return {
+            ...l,
+            items: l.items.map((i) => (i.id === itemId ? { ...i, quantity: updated.quantity } : i)),
+          };
+        })
+      );
+    } catch (err: any) {
+      console.error('Fehler beim Aktualisieren der Menge', err);
+    }
+  };
+
   const handleToggleItem = async (item: ListItem) => {
     if (!activeList) return;
     triggerHaptic(10);
@@ -1085,8 +1107,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
               <input
                 type="text"
                 value={newItemQty}
-                onChange={(e) => setNewItemQty(e.target.value)}
-                placeholder="Menge (z.B. 2x)"
+                onChange={(e) => setNewItemQty(e.target.value.replace(/[^0-9.,xX]/g, ''))}
+                placeholder="Menge (z.B. 2)"
                 className="flex-1 sm:flex-none sm:w-28 h-9 sm:h-7 px-2.5 sm:px-2 input-field text-xs"
               />
               <button
@@ -1196,10 +1218,45 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                               {displayContent}
                             </span>
 
-                            {item.quantity && (
-                              <span className="badge-accent">
-                                {item.quantity}
-                              </span>
+                            {editingQtyItemId === item.id ? (
+                              <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+                                <input
+                                  type="text"
+                                  autoFocus
+                                  value={editingQtyValue}
+                                  onChange={(e) => setEditingQtyValue(e.target.value.replace(/[^0-9.,xX]/g, ''))}
+                                  onKeyDown={async (e) => {
+                                    if (e.key === 'Enter') {
+                                      e.preventDefault();
+                                      await handleSaveQuantity(item.id, editingQtyValue);
+                                    } else if (e.key === 'Escape') {
+                                      setEditingQtyItemId(null);
+                                    }
+                                  }}
+                                  onBlur={async () => {
+                                    await handleSaveQuantity(item.id, editingQtyValue);
+                                  }}
+                                  className="w-16 h-6 px-1.5 text-xs input-field font-semibold text-accent text-center"
+                                  placeholder="Menge"
+                                />
+                              </div>
+                            ) : (
+                              <button
+                                type="button"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setEditingQtyItemId(item.id);
+                                  setEditingQtyValue(item.quantity || '');
+                                }}
+                                className={`text-xs px-2 py-0.5 rounded-full transition-colors ${
+                                  item.quantity
+                                    ? 'badge-accent cursor-pointer hover:brightness-125'
+                                    : 'opacity-0 group-hover:opacity-60 hover:!opacity-100 text-muted hover:text-accent border border-dashed border-border/70 hover:border-accent text-[11px]'
+                                }`}
+                                title="Menge bearbeiten"
+                              >
+                                {item.quantity || '+ Menge'}
+                              </button>
                             )}
 
                             {cat && !group.label && (
@@ -1274,8 +1331,45 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                           {displayContent}
                         </span>
 
-                        {item.quantity && (
-                          <span className="text-xs text-faint">({item.quantity})</span>
+                        {editingQtyItemId === item.id ? (
+                          <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+                            <input
+                              type="text"
+                              autoFocus
+                              value={editingQtyValue}
+                              onChange={(e) => setEditingQtyValue(e.target.value.replace(/[^0-9.,xX]/g, ''))}
+                              onKeyDown={async (e) => {
+                                if (e.key === 'Enter') {
+                                  e.preventDefault();
+                                  await handleSaveQuantity(item.id, editingQtyValue);
+                                } else if (e.key === 'Escape') {
+                                  setEditingQtyItemId(null);
+                                }
+                              }}
+                              onBlur={async () => {
+                                await handleSaveQuantity(item.id, editingQtyValue);
+                              }}
+                              className="w-16 h-6 px-1.5 text-xs input-field font-semibold text-accent text-center"
+                              placeholder="Menge"
+                            />
+                          </div>
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setEditingQtyItemId(item.id);
+                              setEditingQtyValue(item.quantity || '');
+                            }}
+                            className={`text-xs px-1.5 py-0.5 rounded transition-colors ${
+                              item.quantity
+                                ? 'text-faint hover:text-main cursor-pointer'
+                                : 'opacity-0 group-hover:opacity-60 text-faint hover:text-main text-[11px]'
+                            }`}
+                            title="Menge bearbeiten"
+                          >
+                            {item.quantity ? `(${item.quantity})` : '+ Menge'}
+                          </button>
                         )}
                       </div>
 

frontend/src/features/triage/TaskDetailModal.tsx

@@ -18,6 +18,7 @@ import {
 } from 'lucide-react';
 import { Thought, SubTask, TaskList, KanbanColumn } from '../../lib/types';
 import { triggerHaptic } from '../../lib/api';
+import { MarkdownViewer } from '../../lib/markdown';
 
 interface TaskDetailModalProps {
   task: Thought | null;
@@ -36,6 +37,7 @@ interface TaskDetailModalProps {
   onAddSubtask: (task: Thought, title: string) => Promise<void>;
   onDeleteSubtask: (task: Thought, subtaskId: string) => Promise<void>;
   onConvertToDoc: (task: Thought) => void;
+  onOpenDocument?: (docId: string, blockId?: string) => void;
   onDeleteTask: (taskId: string) => void;
 }
 
@@ -56,6 +58,7 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
   onAddSubtask,
   onDeleteSubtask,
   onConvertToDoc,
+  onOpenDocument,
   onDeleteTask,
 }) => {
   if (!isOpen || !task) return null;
@@ -202,18 +205,35 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
           </div>
 
           <div className="flex items-center gap-1.5">
-            <button
-              type="button"
-              onClick={() => {
-                onClose();
-                onConvertToDoc(task);
-              }}
-              title="Als Dokument / Notiz vertiefen"
-              className="btn-action min-h-[38px] sm:min-h-0 h-9 sm:h-7 px-2.5 sm:px-2 text-xs flex items-center gap-1.5"
-            >
-              <FileText className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-accent" />
-              <span className="hidden sm:inline">Als Notiz vertiefen</span>
-            </button>
+            {(task.convertedType === 'document_block' || task.docId) ? (
+              <button
+                type="button"
+                onClick={() => {
+                  onClose();
+                  const docId = task.docId || (task.convertedRefId ? task.convertedRefId.split(':')[0] : '');
+                  const blockId = task.blockId || (task.convertedRefId ? task.convertedRefId.split(':')[1] : '');
+                  if (docId && onOpenDocument) onOpenDocument(docId, blockId);
+                }}
+                title="Zur verlinkten Notiz springen"
+                className="btn-primary min-h-[38px] sm:min-h-0 h-9 sm:h-7 px-2.5 sm:px-2 text-xs flex items-center gap-1.5 font-semibold"
+              >
+                <FileText className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
+                <span>In Notiz öffnen</span>
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={() => {
+                  onClose();
+                  onConvertToDoc(task);
+                }}
+                title="Als Dokument / Notiz vertiefen"
+                className="btn-action min-h-[38px] sm:min-h-0 h-9 sm:h-7 px-2.5 sm:px-2 text-xs flex items-center gap-1.5"
+              >
+                <FileText className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-accent" />
+                <span className="hidden sm:inline">Als Notiz vertiefen</span>
+              </button>
+            )}
             <button
               type="button"
               onClick={() => {
@@ -656,10 +676,10 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
                   setNotesDraft(task.notes || '');
                   setIsEditingNotes(true);
                 }}
-                className="p-3 bg-canvas border border-border rounded-card text-xs text-muted leading-relaxed whitespace-pre-wrap cursor-pointer hover:border-strong transition-colors"
+                className="p-3 bg-canvas border border-border rounded-card text-xs text-muted leading-relaxed cursor-pointer hover:border-strong transition-colors"
                 title="Klicken zum Bearbeiten"
               >
-                {task.notes}
+                <MarkdownViewer content={task.notes} />
               </div>
             ) : (
               <button

frontend/src/features/triage/TasksView.tsx

@@ -46,7 +46,7 @@ const getInitials = (name?: string): string => {
 interface TasksViewProps {
   currentUser?: User | null;
   onRefreshStats: () => void;
-  onOpenDocument: (docId: string) => void;
+  onOpenDocument: (docId: string, blockId?: string) => void;
   refreshTrigger?: number;
 }
 
@@ -1135,6 +1135,23 @@ export const TasksView: React.FC<TasksViewProps> = ({
               className="flex flex-wrap items-center gap-1.5 pt-0.5 empty:hidden"
               onClick={(e) => e.stopPropagation()}
             >
+              {(task.convertedType === 'document_block' || task.docId) && (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const docId = task.docId || (task.convertedRefId ? task.convertedRefId.split(':')[0] : '');
+                    const blockId = task.blockId || (task.convertedRefId ? task.convertedRefId.split(':')[1] : '');
+                    if (docId) onOpenDocument(docId, blockId);
+                  }}
+                  className="h-5 px-1.5 text-[10px] rounded-btn border border-accent/40 bg-accent/10 text-accent hover:bg-accent/20 cursor-pointer flex items-center gap-1 font-medium"
+                  title="In Notiz an der passenden Stelle öffnen"
+                >
+                  <FileText className="w-2.5 h-2.5" />
+                  <span>In Notiz</span>
+                </button>
+              )}
+
               {/* Kanban status selector pill (Desktop only - on mobile done via TaskDetailModal) */}
               <select
                 value={task.kanbanStatus || (isCompleted ? 'done' : 'todo')}
@@ -2030,6 +2047,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
         }}
         activeColumns={activeColumns}
         taskLists={safeTaskLists}
+        onOpenDocument={onOpenDocument}
         onUpdateTitle={handleUpdateTaskTitle}
         onUpdateStatus={handleSetKanbanStatus}
         onUpdatePriority={handleSetPriority}

frontend/src/features/workspace/DocumentEditor.tsx

@@ -13,6 +13,7 @@ import {
   Minimize2,
   Sparkles,
   Plus,
+  Search,
 } from 'lucide-react';
 import { Document, DocumentBlock, User } from '../../lib/types';
 import { api, getToken } from '../../lib/api';
@@ -36,7 +37,63 @@ export interface DocumentEditorProps {
   onSaveStatusChange?: (status: DocSaveStatus, errorMsg?: string) => void;
 }
 
-const EMOJI_PALETTE = ['📝', '📄', '💡', '🚀', '📌', '📂', '🧠', '⚡', '🎯', '🛠️', '📊', '🔒'];
+interface EmojiItem {
+  emoji: string;
+  category: string;
+  keywords: string;
+}
+
+const EMOJI_CATALOG: EmojiItem[] = [
+  // Notizen & Dokumente
+  { emoji: '📝', category: 'Notizen', keywords: 'notiz schreiben memo text note' },
+  { emoji: '📄', category: 'Notizen', keywords: 'dokument seite page doc' },
+  { emoji: '📋', category: 'Notizen', keywords: 'clipboard klemmbrett liste' },
+  { emoji: '📂', category: 'Notizen', keywords: 'ordner mappe folder datei' },
+  { emoji: '📁', category: 'Notizen', keywords: 'ordner folder directory' },
+  { emoji: '📌', category: 'Notizen', keywords: 'pin anheften bookmark wichtig' },
+  { emoji: '📍', category: 'Notizen', keywords: 'standort ort pin location' },
+  { emoji: '🏷️', category: 'Notizen', keywords: 'tag etikett label markierung' },
+  { emoji: '📚', category: 'Notizen', keywords: 'buch bibliothek lesen studium' },
+  { emoji: '📖', category: 'Notizen', keywords: 'buch open book wissen' },
+
+  // Ideen & Fokus
+  { emoji: '🧠', category: 'Ideen', keywords: 'gehirn brain denken wissen thought mind' },
+  { emoji: '💡', category: 'Ideen', keywords: 'idee inspiration lampe glühbirne idea' },
+  { emoji: '🎯', category: 'Ideen', keywords: 'ziel target fokus mission okr' },
+  { emoji: '🚀', category: 'Ideen', keywords: 'rakete start launch projekt rocket' },
+  { emoji: '⚡', category: 'Ideen', keywords: 'blitz energie schnell quick power' },
+  { emoji: '🔥', category: 'Ideen', keywords: 'feuer flame priorität hot wichtig' },
+  { emoji: '⭐', category: 'Ideen', keywords: 'stern favoriten star top' },
+  { emoji: '✨', category: 'Ideen', keywords: 'funkeln magie neu neuigkeit sparkles' },
+  { emoji: '🧩', category: 'Ideen', keywords: 'puzzle teil lösung problem' },
+  { emoji: '🔬', category: 'Ideen', keywords: 'mikroskop forschung analyse test' },
+
+  // Tech & Dev
+  { emoji: '💻', category: 'Tech', keywords: 'laptop computer dev code programming' },
+  { emoji: '🖥️', category: 'Tech', keywords: 'desktop monitor bildschirm workstation' },
+  { emoji: '🛠️', category: 'Tech', keywords: 'werkzeug tools optionen settings einstellungen' },
+  { emoji: '⚙️', category: 'Tech', keywords: 'zahnrad config settings system' },
+  { emoji: '📊', category: 'Tech', keywords: 'diagramm chart daten statistik dashboard' },
+  { emoji: '📈', category: 'Tech', keywords: 'wachstum trend kurve business' },
+  { emoji: '🔒', category: 'Tech', keywords: 'schloss sicherheit geheim privat secure' },
+  { emoji: '🔑', category: 'Tech', keywords: 'schlüssel key passwort access' },
+  { emoji: '🌐', category: 'Tech', keywords: 'web internet network welt globus' },
+  { emoji: '📦', category: 'Tech', keywords: 'paket box release lieferung package' },
+
+  // Alltag & Organisation
+  { emoji: '💬', category: 'Alltag', keywords: 'chat nachricht kommentar call sprechen' },
+  { emoji: '✉️', category: 'Alltag', keywords: 'mail email brief post nachricht' },
+  { emoji: '📅', category: 'Alltag', keywords: 'kalender datum termin plan event' },
+  { emoji: '⏰', category: 'Alltag', keywords: 'wecker uhr zeit deadline alarm' },
+  { emoji: '🛒', category: 'Alltag', keywords: 'warenkorb einkauf shopping liste' },
+  { emoji: '☕', category: 'Alltag', keywords: 'kaffee pause bistro morning' },
+  { emoji: '🏠', category: 'Alltag', keywords: 'haus heim home wohnung' },
+  { emoji: '🏢', category: 'Alltag', keywords: 'büro firma arbeit office work' },
+  { emoji: '✈️', category: 'Alltag', keywords: 'flugzeug reise urlaub trip travel' },
+  { emoji: '🎨', category: 'Alltag', keywords: 'kunst farbe design creative' },
+  { emoji: '🏆', category: 'Alltag', keywords: 'pokal erfolg win trophy award' },
+  { emoji: '✅', category: 'Alltag', keywords: 'haken check done erledigt' },
+];
 
 function ensureNonEmptyBlocks(docId: string, blocks?: DocumentBlock[]): DocumentBlock[] {
   if (!blocks || blocks.length === 0) {
@@ -162,8 +219,17 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   const [loading, setLoading] = useState<boolean>(!initialDoc);
   const [error, setError] = useState<string | null>(null);
   const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
+  const [emojiSearch, setEmojiSearch] = useState<string>('');
   const [zoomedBlockId, setZoomedBlockId] = useState<string | null>(null);
 
+  const filteredEmojis = useMemo(() => {
+    const q = emojiSearch.trim().toLowerCase();
+    if (!q) return EMOJI_CATALOG;
+    return EMOJI_CATALOG.filter(
+      (item) => item.keywords.includes(q) || item.emoji.includes(q) || item.category.toLowerCase().includes(q)
+    );
+  }, [emojiSearch]);
+
   // AutoSave state (REST persistence)
   const [, setSaveStatus] = useState<DocSaveStatus>('saved');
   const [, setSaveErrorMessage] = useState<string | null>(null);
@@ -172,7 +238,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   const lastSavedSnapshotRef = useRef<string>('');
   const isInitialLoadRef = useRef<boolean>(true);
 
-  const titleInputRef = useRef<HTMLInputElement | null>(null);
+  const titleInputRef = useRef<HTMLTextAreaElement | HTMLInputElement | null>(null);
   const docRef = useRef<Document | null>(doc);
   docRef.current = doc;
 
@@ -416,7 +482,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
     onDocMetadataChange(updatedDoc);
   }, [blocks, extractedTags, title]);
 
-  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     if (!canEdit) return;
     setTitle(e.target.value);
   };
@@ -896,31 +962,81 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
                   {doc?.icon || '📝'}
                 </button>
                 {showEmojiPicker && canEdit && (
-                  <div className="absolute left-0 mt-1 p-2 panel-surface shadow-panel border border-border rounded-card grid grid-cols-6 gap-1 z-30 w-52">
-                    {EMOJI_PALETTE.map((emoji) => (
+                  <div
+                    className="absolute left-0 mt-1 p-2 panel-surface shadow-lg border border-border rounded-card z-30 w-72 space-y-2"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="relative">
+                      <Search className="w-3.5 h-3.5 text-faint absolute left-2 top-1/2 -translate-y-1/2" />
+                      <input
+                        type="text"
+                        autoFocus
+                        value={emojiSearch}
+                        onChange={(e) => setEmojiSearch(e.target.value)}
+                        placeholder="Icon suchen oder Emoji eingeben…"
+                        className="input-field w-full pl-7 pr-2 py-1 text-xs"
+                      />
+                    </div>
+                    {emojiSearch.trim() && (
                       <button
-                        key={emoji}
                         type="button"
-                        onClick={() => handleSelectIcon(emoji)}
-                        className="p-1.5 rounded-btn hover:bg-panel-elevated text-base flex items-center justify-center cursor-pointer"
+                        onClick={() => {
+                          handleSelectIcon(emojiSearch.trim());
+                          setShowEmojiPicker(false);
+                          setEmojiSearch('');
+                        }}
+                        className="w-full text-left px-2 py-1 bg-accent/10 hover:bg-accent/20 text-accent rounded text-xs font-medium flex items-center justify-between cursor-pointer"
                       >
-                        {emoji}
+                        <span>Eingabe als Icon nutzen</span>
+                        <span className="text-base">{emojiSearch.trim()}</span>
                       </button>
-                    ))}
+                    )}
+                    <div className="max-h-48 overflow-y-auto grid grid-cols-6 gap-1 pr-1">
+                      {filteredEmojis.map((item) => (
+                        <button
+                          key={item.emoji}
+                          type="button"
+                          onClick={() => {
+                            handleSelectIcon(item.emoji);
+                            setShowEmojiPicker(false);
+                            setEmojiSearch('');
+                          }}
+                          className="p-1.5 rounded-btn hover:bg-panel-elevated text-lg flex items-center justify-center cursor-pointer transition-colors"
+                          title={item.keywords}
+                        >
+                          {item.emoji}
+                        </button>
+                      ))}
+                      {filteredEmojis.length === 0 && (
+                        <div className="col-span-6 text-center text-xs text-faint py-3">
+                          Kein passendes Standard-Icon
+                        </div>
+                      )}
+                    </div>
                   </div>
                 )}
               </div>
 
-              <input
-                ref={titleInputRef}
-                type="text"
+              <textarea
+                ref={(el) => {
+                  titleInputRef.current = el;
+                  if (el) {
+                    el.style.height = 'auto';
+                    el.style.height = `${el.scrollHeight}px`;
+                  }
+                }}
+                rows={1}
                 value={title}
                 readOnly={!canEdit}
                 autoFocus={autoFocusTitle}
-                onChange={handleTitleChange}
+                onChange={(e) => {
+                  handleTitleChange(e);
+                  e.target.style.height = 'auto';
+                  e.target.style.height = `${e.target.scrollHeight}px`;
+                }}
                 onBlur={handleTitleBlur}
                 placeholder="Titel der Notiz…"
-                className="flex-1 min-w-0 text-xl sm:text-2xl font-bold text-main bg-transparent border-0 focus:outline-none focus:ring-0 tracking-tight"
+                className="flex-1 min-w-0 text-xl sm:text-2xl font-bold text-main bg-transparent border-0 focus:outline-none focus:ring-0 tracking-tight resize-none leading-snug whitespace-pre-wrap break-words [overflow-wrap:anywhere]"
               />
             </div>
 

frontend/src/features/workspace/OutlinerBlock.tsx

@@ -3,7 +3,10 @@ import {
   ChevronRight,
   ChevronDown,
   Check,
+  CheckSquare,
   X,
+  Trash2,
+  MoreHorizontal,
   Code,
   Heading1,
   Heading2,
@@ -19,6 +22,8 @@ import {
 } from 'lucide-react';
 import { DocumentBlock, BlockType } from '../../lib/types';
 import { LinkModal } from './LinkModal';
+import { renderInlineMarkdown } from '../../lib/markdown';
+import { api } from '../../lib/api';
 
 export interface SlashCommand {
   type: BlockType | 'link';
@@ -50,7 +55,7 @@ export interface OutlinerBlockProps {
   onZoomBlock?: (blockId: string) => void;
   onUpdateBlock: (updated: DocumentBlock, immediate?: boolean) => void;
   onCreateBlockBelow: (afterBlockId: string, currentContent: string) => void;
-  onDeleteBlock: (blockId: string) => void;
+  onDeleteBlock: (blockId: string, deleteSubtree?: boolean) => void;
   onIndentBlock: (blockId: string, delta: 1 | -1) => void;
   onNavigateFocus: (blockId: string, direction: 'up' | 'down') => void;
   onTagClick?: (tag: string) => void;
@@ -91,6 +96,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   const [slashSearch, setSlashSearch] = useState<string | null>(null);
   const [slashIndex, setSlashIndex] = useState(0);
   const [showLinkModal, setShowLinkModal] = useState<boolean>(false);
+  const [showTodoMenu, setShowTodoMenu] = useState<boolean>(false);
 
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const debounceTimerRef = useRef<number | null>(null);
@@ -475,7 +481,34 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
           <span className="w-3.5" />
         )}
 
-        {block.type === 'todo' ? (
+        {/* Bullet handle for dragging and zoom focus */}
+        <button
+          type="button"
+          draggable={canEdit}
+          onDragStart={() => canEdit && onDragStartBlock?.(index)}
+          onClick={() => onZoomBlock?.(block.id)}
+          className={`w-4 h-4 flex items-center justify-center rounded-btn hover:bg-panel-hover group/bullet transition-transform ${
+            canEdit ? 'cursor-grab active:cursor-grabbing' : 'cursor-pointer'
+          }`}
+          title={
+            canEdit
+              ? 'Ziehen zum Verschieben • Klick: Ast hineinzoomen (Fokus-Modus)'
+              : 'Klick: In diesen Ast hineinzoomen (Fokus-Modus)'
+          }
+        >
+          <span
+            className={`w-1.5 h-1.5 rounded-full transition-all ${
+              block.collapsed && hasChildren
+                ? 'bg-accent ring-2 ring-accent/30'
+                : isFocused
+                ? 'bg-accent scale-125'
+                : 'bg-faint group-hover/bullet:bg-accent group-hover/bullet:scale-125'
+            }`}
+          />
+        </button>
+
+        {/* If To-Do block: checkbox alongside bullet */}
+        {block.type === 'todo' && (
           <button
             type="button"
             disabled={!canEdit}
@@ -491,31 +524,16 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
           >
             <Check className="w-3 h-3 stroke-[3]" />
           </button>
-        ) : (
-          <button
-            type="button"
-            draggable={canEdit}
-            onDragStart={() => canEdit && onDragStartBlock?.(index)}
-            onClick={() => onZoomBlock?.(block.id)}
-            className={`w-4 h-4 flex items-center justify-center rounded-btn hover:bg-panel-hover group/bullet transition-transform ${
-              canEdit ? 'cursor-grab active:cursor-grabbing' : 'cursor-pointer'
-            }`}
-            title={
-              canEdit
-                ? 'Ziehen zum Verschieben • Klick: Ast hineinzoomen (Fokus-Modus)'
-                : 'Klick: In diesen Ast hineinzoomen (Fokus-Modus)'
-            }
+        )}
+
+        {block.taskId && (
+          <span
+            className="badge-accent text-[9px] inline-flex items-center gap-0.5 px-1 py-0.2 rounded font-medium shrink-0"
+            title="Mit erweiterter Aufgabe synchronisiert"
           >
-            <span
-              className={`w-1.5 h-1.5 rounded-full transition-all ${
-                block.collapsed && hasChildren
-                  ? 'bg-accent ring-2 ring-accent/30'
-                  : isFocused
-                  ? 'bg-accent scale-125'
-                  : 'bg-faint group-hover/bullet:bg-accent group-hover/bullet:scale-125'
-              }`}
-            />
-          </button>
+            <CheckSquare className="w-2.5 h-2.5" />
+            <span>Erweitert</span>
+          </span>
         )}
       </div>
 
@@ -571,6 +589,23 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
           </div>
         ) : (
           <div className="relative w-full">
+            {!isFocused && localContent && (
+              <div
+                className={`absolute inset-0 cursor-text select-text pointer-events-none w-full leading-relaxed whitespace-pre-wrap break-words [overflow-wrap:anywhere] ${
+                  block.type === 'h1'
+                    ? 'text-lg font-bold text-main tracking-tight'
+                    : block.type === 'h2'
+                    ? 'text-base font-semibold text-main'
+                    : block.type === 'h3'
+                    ? 'text-sm font-semibold text-main'
+                    : block.type === 'todo' && block.checked
+                    ? 'text-sm text-faint line-through'
+                    : 'text-sm text-main'
+                }`}
+              >
+                {renderInlineMarkdown(localContent)}
+              </div>
+            )}
             <textarea
               ref={(el) => {
                 textareaRef.current = el;
@@ -588,7 +623,9 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
                   ? 'Schreibe einen Punkt… (Enter = Neu, Tab = Einrücken, Shift+Tab = Ausrücken, / für Befehle)'
                   : ''
               }
-              className={`w-full resize-none overflow-hidden bg-transparent border-0 focus:outline-none focus:ring-0 leading-relaxed whitespace-pre-wrap break-words ${
+              className={`w-full resize-none overflow-hidden bg-transparent border-0 focus:outline-none focus:ring-0 leading-relaxed whitespace-pre-wrap break-words [overflow-wrap:anywhere] ${
+                !isFocused && localContent ? 'text-transparent selection:text-transparent' : ''
+              } ${
                 block.type === 'h1'
                   ? 'text-lg font-bold text-main tracking-tight'
                   : block.type === 'h2'
@@ -712,6 +749,50 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
         )}
       </div>
 
+      {/* Enhanced Task Option (3-dots) for To-Do Blocks */}
+      {canEdit && block.type === 'todo' && !block.taskId && (
+        <div className="relative shrink-0">
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowTodoMenu((prev) => !prev);
+            }}
+            className="opacity-0 group-hover:opacity-100 p-0.5 text-faint hover:text-accent rounded-btn transition-opacity cursor-pointer"
+            title="Aufgaben-Optionen"
+          >
+            <MoreHorizontal className="w-3.5 h-3.5" />
+          </button>
+          {showTodoMenu && (
+            <div
+              className="absolute right-0 top-full mt-1 bg-panel border border-border shadow-lg rounded-card p-1 z-30 w-52 text-xs"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <button
+                type="button"
+                onClick={async () => {
+                  setShowTodoMenu(false);
+                  try {
+                    const docId = block.documentId || block.docId || '';
+                    const thought = await api.createEnhancedTask(docId, block.id, {
+                      content: localContent || 'Aufgabe',
+                      checked: Boolean(block.checked),
+                    });
+                    flushDebounce(localContent, { taskId: thought.id });
+                  } catch (err: any) {
+                    alert(err.message || 'Fehler beim Erstellen der erweiterten Aufgabe');
+                  }
+                }}
+                className="w-full text-left px-2 py-1.5 rounded-btn hover:bg-panel-elevated hover:text-accent flex items-center gap-1.5 text-main font-medium cursor-pointer"
+              >
+                <CheckSquare className="w-3.5 h-3.5 text-accent" />
+                <span>In erweiterte Aufgabe umwandeln</span>
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Zoom / Focus button on hover */}
       <button
         type="button"
@@ -722,15 +803,23 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
         <Maximize2 className="w-3.5 h-3.5" />
       </button>
 
-      {/* Delete button on hover */}
+      {/* Delete button on hover (Trash2 icon) */}
       {canEdit && (
         <button
           type="button"
-          onClick={() => onDeleteBlockRef.current(block.id)}
-          className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-status-err rounded-btn transition-opacity shrink-0"
+          onClick={() => {
+            if (hasChildren) {
+              if (window.confirm('Bist du sicher? Alle Unterpunkte dieses Asts werden ebenfalls gelöscht.')) {
+                onDeleteBlockRef.current(block.id, true);
+              }
+            } else {
+              onDeleteBlockRef.current(block.id, false);
+            }
+          }}
+          className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-status-err rounded-btn transition-opacity shrink-0 cursor-pointer"
           title="Block löschen"
         >
-          <X className="w-3.5 h-3.5" />
+          <Trash2 className="w-3.5 h-3.5" />
         </button>
       )}
 

frontend/src/features/workspace/OutlinerTree.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { Plus } from 'lucide-react';
-import { DocumentBlock } from '../../lib/types';
+import { DocumentBlock, BlockType } from '../../lib/types';
 import { OutlinerBlock } from './OutlinerBlock';
 
 export interface OutlinerTreeProps {
@@ -169,8 +169,7 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
       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 inheritedType: BlockType = 'text';
 
       const newBlock: DocumentBlock = {
         id: `blk_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`,
@@ -191,7 +190,7 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
   );
 
   const handleDeleteBlock = useCallback(
-    (blockId: string) => {
+    (blockId: string, deleteSubtree = false) => {
       if (!canEdit) return;
       const idx = blocks.findIndex((b) => b.id === blockId);
       if (idx === -1) return;
@@ -216,9 +215,25 @@ export const OutlinerTree: React.FC<OutlinerTreeProps> = ({
       if (targetFocusBlock) {
         focusBlockInput(targetFocusBlock.id, 'end');
       }
-      onDeleteBlock(blockId);
+
+      if (deleteSubtree) {
+        const rootLevel = blocks[idx].level || 0;
+        const idsToDelete = [blockId];
+        for (let j = idx + 1; j < blocks.length; j++) {
+          if ((blocks[j].level || 0) > rootLevel) {
+            idsToDelete.push(blocks[j].id);
+          } else {
+            break;
+          }
+        }
+        for (const id of idsToDelete) {
+          onDeleteBlock(id);
+        }
+      } else {
+        onDeleteBlock(blockId);
+      }
     },
-    [blocks, canEdit, focusBlockInput, onDeleteBlock, onUpdateBlock]
+    [blocks, canEdit, focusBlockInput, levelOffset, onDeleteBlock, onUpdateBlock]
   );
 
   const handleIndentBlock = useCallback(

frontend/src/features/workspace/WorkspaceView.tsx

@@ -55,6 +55,7 @@ import { DocumentEditor, DocSaveStatus } from './DocumentEditor';
 interface WorkspaceViewProps {
   currentUser?: User | null;
   initialDocId?: string | null;
+  initialBlockId?: string | null;
   onStatsChange: () => void;
 }
 
@@ -81,6 +82,7 @@ interface FolderTreeItemProps {
   handleFolderDragStart: (e: React.DragEvent, path: string) => void;
   handleDocDragStart: (e: React.DragEvent, id: string) => void;
   handleCreateDocument: (folderPath?: string) => void;
+  handleOpenNewFolder: (parentPath?: string, e?: React.MouseEvent) => void;
   handleShareFolderClick: (folderPath: string, existingSf?: SharedFolder) => void;
   handleDeleteFolder: (folderPath: string) => void;
   onSelectDoc: (id: string) => void;
@@ -99,13 +101,14 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
   handleFolderDragStart,
   handleDocDragStart,
   handleCreateDocument,
+  handleOpenNewFolder,
   handleShareFolderClick,
   handleDeleteFolder,
   onSelectDoc,
 }) => {
-  const isExpanded = Boolean(expandedFolders[node.fullPath]);
-  const isDragOver = dragOverFolder === node.fullPath;
   const hasContent = node.subfolders.length > 0 || node.docs.length > 0;
+  const isExpanded = Boolean(hasContent && expandedFolders[node.fullPath]);
+  const isDragOver = dragOverFolder === node.fullPath;
 
   return (
     <div className="space-y-0.5">
@@ -132,6 +135,7 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
         <button
           type="button"
           onClick={() =>
+            hasContent &&
             setExpandedFolders((prev) => ({
               ...prev,
               [node.fullPath]: !prev[node.fullPath],
@@ -145,9 +149,7 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
             ) : (
               <ChevronRight className="w-3.5 h-3.5 text-faint shrink-0" />
             )
-          ) : (
-            <span className="w-3.5 shrink-0" />
-          )}
+          ) : null}
           {isExpanded ? (
             <FolderOpen className="w-3.5 h-3.5 text-accent shrink-0" />
           ) : (
@@ -157,9 +159,6 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
           {node.sharedFolderObj && (
             <Users className="w-3 h-3 text-status-ok shrink-0" />
           )}
-          <span className="text-[10px] text-faint ml-auto pr-1">
-            {node.docs.length}
-          </span>
         </button>
 
         <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity shrink-0">
@@ -169,18 +168,29 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
               e.stopPropagation();
               handleCreateDocument(node.fullPath);
             }}
-            className="p-1 h-6 w-6 flex items-center justify-center rounded-btn hover:bg-canvas text-muted hover:text-main cursor-pointer"
+            className="p-1 h-6 w-6 flex items-center justify-center text-muted hover:text-main transition-colors cursor-pointer"
             title="Notiz in diesem Ordner erstellen"
           >
             <Plus className="w-3 h-3" />
           </button>
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleOpenNewFolder(node.fullPath, e);
+            }}
+            className="p-1 h-6 w-6 flex items-center justify-center text-muted hover:text-main transition-colors cursor-pointer"
+            title="Neuen Unterordner erstellen"
+          >
+            <FolderPlus className="w-3 h-3" />
+          </button>
           <button
             type="button"
             onClick={(e) => {
               e.stopPropagation();
               handleShareFolderClick(node.fullPath, node.sharedFolderObj);
             }}
-            className={`p-1 h-6 w-6 flex items-center justify-center rounded-btn hover:bg-canvas cursor-pointer ${
+            className={`p-1 h-6 w-6 flex items-center justify-center transition-colors cursor-pointer ${
               node.sharedFolderObj ? 'text-accent' : 'text-faint hover:text-accent'
             }`}
             title="Ordner teilen und Berechtigungen"
@@ -193,7 +203,7 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
               e.stopPropagation();
               handleDeleteFolder(node.fullPath);
             }}
-            className="p-1 h-6 w-6 flex items-center justify-center rounded-btn hover:bg-status-err/20 text-faint hover:text-status-err cursor-pointer"
+            className="p-1 h-6 w-6 flex items-center justify-center text-faint hover:text-status-err transition-colors cursor-pointer"
             title="Ordner löschen"
           >
             <Trash2 className="w-3 h-3" />
@@ -219,6 +229,7 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
               handleFolderDragStart={handleFolderDragStart}
               handleDocDragStart={handleDocDragStart}
               handleCreateDocument={handleCreateDocument}
+              handleOpenNewFolder={handleOpenNewFolder}
               handleShareFolderClick={handleShareFolderClick}
               handleDeleteFolder={handleDeleteFolder}
               onSelectDoc={onSelectDoc}
@@ -235,7 +246,7 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
               style={{ paddingLeft: `${(depth + 1) * 12 + 16}px` }}
               className={`w-full flex items-center gap-2 pr-2 py-1.5 rounded-btn text-left text-xs cursor-pointer border transition-colors ${
                 selectedDocId === d.id && subView === 'editor'
-                  ? 'bg-panel border-accent text-main font-semibold shadow-xs'
+                  ? 'bg-panel-elevated text-main font-semibold border-border/80'
                   : 'border-transparent text-main hover:bg-panel-elevated'
               }`}
             >
@@ -261,6 +272,7 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
 export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   currentUser,
   initialDocId,
+  initialBlockId,
   onStatsChange,
 }) => {
   const [docs, setDocs] = useState<Document[]>([]);
@@ -291,7 +303,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   }, [docs, serverTagsSummary]);
 
   const [selectedDocId, setSelectedDocId] = useState<string | null>(initialDocId || null);
-  const [targetBlockId, setTargetBlockId] = useState<string | null>(null);
+  const [targetBlockId, setTargetBlockId] = useState<string | null>(initialBlockId || null);
   const [newlyCreatedDocId, setNewlyCreatedDocId] = useState<string | null>(null);
   const [subView, setSubView] = useState<WorkspaceSubView>('editor');
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
@@ -301,10 +313,40 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [tagSortBy, setTagSortBy] = useState<'count' | 'name'>('count');
 
   const [searchQuery, setSearchQuery] = useState<string>('');
-  const [expandedFolders, setExpandedFolders] = useState<Record<string, boolean>>({});
+  const [expandedFolders, setExpandedFolders] = useState<Record<string, boolean>>(() => {
+    try {
+      const saved = localStorage.getItem('mindsift:workspace_expanded_folders');
+      return saved ? JSON.parse(saved) : {};
+    } catch {
+      return {};
+    }
+  });
+
+  useEffect(() => {
+    try {
+      localStorage.setItem('mindsift:workspace_expanded_folders', JSON.stringify(expandedFolders));
+    } catch {}
+  }, [expandedFolders]);
+
   const [showNewFolderModal, setShowNewFolderModal] = useState<boolean>(false);
+  const [newFolderCoords, setNewFolderCoords] = useState<{ x: number; y: number } | null>(null);
+  const [newFolderParentPath, setNewFolderParentPath] = useState<string>('');
   const [newFolderName, setNewFolderName] = useState<string>('');
   const [newFolderIsShared, setNewFolderIsShared] = useState<boolean>(false);
+
+  const handleOpenNewFolder = (parentPath = '', e?: React.MouseEvent) => {
+    setNewFolderParentPath(parentPath);
+    setNewFolderName('');
+    if (e) {
+      setNewFolderCoords({
+        x: Math.min(e.clientX, window.innerWidth - 270),
+        y: Math.min(e.clientY, window.innerHeight - 130),
+      });
+    } else {
+      setNewFolderCoords({ x: 100, y: 150 });
+    }
+    setShowNewFolderModal(true);
+  };
   const [mobileShowDetail, setMobileShowDetail] = useState<boolean>(Boolean(initialDocId));
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState<boolean>(() => {
     try {
@@ -345,8 +387,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
   // Rollup drilldown & View Mode
   const [todoFolderDrilldown, setTodoFolderDrilldown] = useState<string | null>(null);
-  const [todoGrouping, setTodoGrouping] = useState<'folder_note' | 'note' | 'folder'>(() => {
-    return (localStorage.getItem('mindsift_todo_grouping') as any) || 'folder_note';
+  const [todoGrouping, setTodoGrouping] = useState<'grouped' | 'list'>(() => {
+    const saved = localStorage.getItem('mindsift_todo_grouping');
+    return saved === 'list' ? 'list' : 'grouped';
   });
   const [collapsedTodoFolders, setCollapsedTodoFolders] = useState<Set<string>>(new Set());
   const [collapsedTodoNotes, setCollapsedTodoNotes] = useState<Set<string>>(new Set());
@@ -536,14 +579,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
   const handleCreateFolderSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const clean = newFolderName.trim().replace(/^\/+|\/+$/g, '');
-    if (!clean) return;
+    const cleanName = newFolderName.trim().replace(/^\/+|\/+$/g, '');
+    if (!cleanName) return;
+    const cleanPath = newFolderParentPath ? `${newFolderParentPath}/${cleanName}` : cleanName;
     try {
-      if (newFolderIsShared) {
-        const sf = await api.createSharedFolder({ name: clean, mountPath: clean });
-        setSharedFolders((prev) => [...prev, sf]);
-      }
-      const res = await api.createFolder(clean);
+      const res = await api.createFolder(cleanPath);
       setFolders((prev) => (prev.includes(res.path) ? prev : [...prev, res.path].sort()));
       const parts = res.path.split('/');
       let acc = '';
@@ -554,10 +594,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       }
       setExpandedFolders((prev) => ({ ...prev, ...expansions }));
       setNewFolderName('');
-      setNewFolderIsShared(false);
+      setNewFolderParentPath('');
       setShowNewFolderModal(false);
-    } catch {
-      // ignore
+    } catch (err: any) {
+      alert(err.message || 'Fehler beim Erstellen des Ordners');
     }
   };
 
@@ -1208,40 +1248,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 </>
               )}
             </div>
-          ) : (
-            /* Standalone Realtime Status Indicator for Todos / Hashtags */
-            (() => {
-              const isConnected = realtimeConnected;
-              const isSSE = realtimeTransport === 'sse';
-              return (
-                <div
-                  className={`h-8 w-8 flex items-center justify-center rounded-btn border transition-colors ${
-                    isConnected
-                      ? isSSE
-                        ? 'bg-teal-500/10 border-teal-500/30 text-teal-400'
-                        : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
-                      : 'bg-canvas border-border text-muted'
-                  }`}
-                  title={
-                    isConnected
-                      ? isSSE
-                        ? 'Synchronisiert (Server-Sent Events / HTTPS)'
-                        : 'Synchronisiert (WebSocket online)'
-                      : 'Offline'
-                  }
-                >
-                  <Radio
-                    className={`w-3.5 h-3.5 ${isConnected ? 'animate-pulse' : ''}`}
-                  />
-                </div>
-              );
-            })()
-          )}
+          ) : null}
         </div>
       </div>
 
       {/* Main Workspace Split Pane */}
-      <div className="flex h-[calc(100vh-7.5rem)] bg-canvas rounded-card border border-border overflow-hidden shadow-panel">
+      <div className="flex h-[calc(100vh-7.5rem)] bg-canvas rounded-card border border-border overflow-hidden">
         {/* LEFT MASTER SIDEBAR */}
         <aside
           className={`${
@@ -1250,7 +1262,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               : mobileShowDetail
               ? 'hidden lg:flex'
               : 'flex'
-          } w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-canvas border-r border-border transition-all duration-200`}
+          } w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-panel border-r border-border transition-all duration-200`}
         >
           {/* Sidebar Header & Actions */}
           <div className="p-3 border-b border-border space-y-2">
@@ -1261,7 +1273,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <div className="flex items-center gap-1">
                 <button
                   type="button"
-                  onClick={() => setShowNewFolderModal(true)}
+                  onClick={(e) => handleOpenNewFolder('', e)}
                   className="btn-action p-1 text-muted hover:text-main"
                   title="Neuer Ordner"
                 >
@@ -1303,23 +1315,19 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
         {/* Scrollable Navigation Tree */}
         <div className="flex-1 overflow-y-auto p-2 space-y-3">
-          {/* Drop target for moving docs or folders to root */}
+          {/* Top drop target for moving to root */}
           {(draggingDocId || draggingFolderPath) && (
             <div
               onDragOver={(e) => {
                 e.preventDefault();
-                setDragOverFolder('__root__');
+                setDragOverFolder('__root_top__');
               }}
               onDragLeave={() => setDragOverFolder(null)}
               onDrop={(e) => handleDropOnFolder('', e)}
-              className={`p-2 border-2 border-dashed rounded-btn text-center text-xs transition-colors ${
-                dragOverFolder === '__root__'
-                  ? 'border-accent bg-accent/20 text-main font-semibold'
-                  : 'border-border text-muted bg-canvas'
+              className={`h-2.5 -mx-1 my-0.5 rounded transition-all ${
+                dragOverFolder === '__root_top__' ? 'bg-accent/40 ring-1 ring-accent h-4' : 'opacity-0'
               }`}
-            >
-              📁 In Hauptebene ablegen
-            </div>
+            />
           )}
 
           {/* Pinned Notes */}
@@ -1342,7 +1350,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     }}
                     className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer border transition-colors ${
                       selectedDocId === d.id && subView === 'editor'
-                        ? 'bg-panel border-accent text-main font-semibold shadow-xs'
+                        ? 'bg-panel-elevated text-main font-semibold border-border/80'
                         : 'border-transparent text-main hover:bg-panel-elevated'
                     }`}
                   >
@@ -1376,6 +1384,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     handleFolderDragStart={handleFolderDragStart}
                     handleDocDragStart={handleDocDragStart}
                     handleCreateDocument={handleCreateDocument}
+                    handleOpenNewFolder={handleOpenNewFolder}
                     handleShareFolderClick={handleShareFolderClick}
                     handleDeleteFolder={handleDeleteFolder}
                     onSelectDoc={(id) => {
@@ -1414,7 +1423,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     }}
                     className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer border transition-colors ${
                       selectedDocId === d.id && subView === 'editor'
-                        ? 'bg-panel border-accent text-main font-semibold shadow-xs'
+                        ? 'bg-panel-elevated text-main font-semibold border-border/80'
                         : 'border-transparent text-main hover:bg-panel-elevated'
                     }`}
                   >
@@ -1429,6 +1438,21 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             )}
           </div>
 
+          {/* Bottom drop target for moving to root */}
+          {(draggingDocId || draggingFolderPath) && (
+            <div
+              onDragOver={(e) => {
+                e.preventDefault();
+                setDragOverFolder('__root_bottom__');
+              }}
+              onDragLeave={() => setDragOverFolder(null)}
+              onDrop={(e) => handleDropOnFolder('', e)}
+              className={`min-h-[2.5rem] flex-1 rounded transition-all ${
+                dragOverFolder === '__root_bottom__' ? 'bg-accent/20 ring-1 ring-accent' : ''
+              }`}
+            />
+          )}
+
           {/* Tags Explorer */}
           {tagsSummary.length > 0 && (
             <div>
@@ -1586,7 +1610,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                       <div
                         key={t.tag}
                         onClick={() => handleSelectTag(t.tag)}
-                        className="p-4 rounded-card border border-border bg-canvas hover:border-accent hover:shadow-panel transition-all cursor-pointer group flex flex-col justify-between space-y-3"
+                        className="p-4 rounded-card border border-border bg-panel hover:border-accent hover:bg-panel-elevated transition-all cursor-pointer group flex flex-col justify-between space-y-3"
                       >
                         <div className="space-y-2.5">
                           <div className="flex items-start justify-between gap-2">
@@ -1595,35 +1619,25 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                                 #
                               </span>
                               <h3 className="font-bold text-sm text-main group-hover:text-accent transition-colors truncate">
-                                #{t.tag}
+                                {t.tag.replace(/^#/, '')}
                               </h3>
                             </div>
                             <span className="badge-neutral font-mono text-[10px] shrink-0">
-                              {t.count} {t.count === 1 ? 'Treffer' : 'Treffer'}
+                              {t.count} Treffer
                             </span>
                           </div>
 
                           {meta && meta.docs.length > 0 && (
                             <div className="space-y-1">
                               <span className="text-[10px] font-semibold text-faint uppercase tracking-wider block">
-                                In {meta.docs.length} {meta.docs.length === 1 ? 'Notiz' : 'Notizen'}:
+                                Aktuellste Notiz:
                               </span>
-                              <div className="flex flex-wrap gap-1">
-                                {meta.docs.slice(0, 3).map((d) => (
-                                  <span
-                                    key={d.id}
-                                    className="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-btn bg-panel-elevated text-muted truncate max-w-[140px]"
-                                    title={d.title}
-                                  >
-                                    <span>{d.icon || '📝'}</span>
-                                    <span className="truncate">{d.title}</span>
-                                  </span>
-                                ))}
-                                {meta.docs.length > 3 && (
-                                  <span className="text-[10px] text-faint self-center">
-                                    +{meta.docs.length - 3}
-                                  </span>
-                                )}
+                              <div
+                                className="inline-flex items-center gap-1.5 text-[11px] px-2 py-0.5 rounded-btn bg-panel-elevated text-main truncate max-w-full"
+                                title={meta.docs[0].title}
+                              >
+                                <span>{meta.docs[0].icon || '📝'}</span>
+                                <span className="truncate">{meta.docs[0].title || 'Unbenannte Notiz'}</span>
                               </div>
                             </div>
                           )}
@@ -1631,13 +1645,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
                         <div className="flex items-center justify-between pt-2.5 border-t border-border/50 text-[11px]">
                           <div>
-                            {meta && meta.openTodosCount > 0 ? (
+                            {meta && meta.openTodosCount > 0 && (
                               <span className="text-status-warn text-[10px] flex items-center gap-1 font-medium">
                                 <Check className="w-2.5 h-2.5" />
                                 {meta.openTodosCount} offene To-Dos
                               </span>
-                            ) : (
-                              <span className="text-faint text-[10px]">Blöcke & Childs anzeigen</span>
                             )}
                           </div>
                           <span className="text-accent text-xs font-semibold group-hover:translate-x-0.5 transition-transform flex items-center gap-0.5">
@@ -1863,8 +1875,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             <div className="w-full space-y-4">
               <div className="flex flex-col sm:flex-row sm:items-center justify-between border-b border-border pb-3 gap-2">
                 <div>
-                  <h2 className="text-lg font-bold text-main">
-                    Globaler To-Do Rollup ({totalOpenTodos} offen)
+                  <h2 className="text-base sm:text-lg font-bold text-main">
+                    To-Dos aus Notizen ({totalOpenTodos} offen)
                   </h2>
                   <p className="text-xs text-muted">
                     Alle Aufgaben aus deinen Notizen im gesamten Workspace
@@ -1872,60 +1884,37 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 </div>
 
                 <div className="flex flex-wrap items-center gap-2">
-                  {/* View Grouping Selector */}
-                  <div className="flex items-center rounded-btn bg-panel p-0.5 border border-border shadow-xs">
-                    <span className="text-[10px] uppercase font-bold text-faint px-1.5 hidden sm:inline">
-                      Ansicht:
-                    </span>
+                  {/* View Grouping Selector (matching hashtag switcher style) */}
+                  <div className="flex items-center bg-canvas border border-border rounded-btn p-0.5 text-[11px]">
                     <button
                       type="button"
                       onClick={() => {
-                        setTodoGrouping('folder_note');
-                        localStorage.setItem('mindsift_todo_grouping', 'folder_note');
+                        setTodoGrouping('grouped');
+                        localStorage.setItem('mindsift_todo_grouping', 'grouped');
                       }}
-                      className={`px-2 py-1 text-[11px] font-semibold rounded-btn transition-colors cursor-pointer flex items-center gap-1 ${
-                        todoGrouping === 'folder_note'
+                      className={`px-2.5 py-1 rounded-btn font-semibold transition-colors cursor-pointer ${
+                        todoGrouping === 'grouped'
                           ? 'bg-panel-elevated text-main shadow-xs'
                           : 'text-muted hover:text-main'
                       }`}
-                      title="Erst nach Ordner, dann nach Notiz gruppieren"
+                      title="Sortiert nach Ordner und Notiz"
                     >
-                      <Folder className="w-3 h-3 text-accent" />
-                      <span>+</span>
-                      <FileText className="w-3 h-3 text-accent" />
-                      <span>Ordner & Notiz</span>
+                      Gruppiert
                     </button>
                     <button
                       type="button"
                       onClick={() => {
-                        setTodoGrouping('note');
-                        localStorage.setItem('mindsift_todo_grouping', 'note');
+                        setTodoGrouping('list');
+                        localStorage.setItem('mindsift_todo_grouping', 'list');
                       }}
-                      className={`px-2 py-1 text-[11px] font-semibold rounded-btn transition-colors cursor-pointer flex items-center gap-1 ${
-                        todoGrouping === 'note'
+                      className={`px-2.5 py-1 rounded-btn font-semibold transition-colors cursor-pointer ${
+                        todoGrouping === 'list'
                           ? 'bg-panel-elevated text-main shadow-xs'
                           : 'text-muted hover:text-main'
                       }`}
-                      title="Direkt nach Notiz gruppieren"
+                      title="Alle To-Dos als einfache Liste"
                     >
-                      <FileText className="w-3 h-3 text-accent" />
-                      <span>Notiz</span>
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setTodoGrouping('folder');
-                        localStorage.setItem('mindsift_todo_grouping', 'folder');
-                      }}
-                      className={`px-2 py-1 text-[11px] font-semibold rounded-btn transition-colors cursor-pointer flex items-center gap-1 ${
-                        todoGrouping === 'folder'
-                          ? 'bg-panel-elevated text-main shadow-xs'
-                          : 'text-muted hover:text-main'
-                      }`}
-                      title="Nur nach Ordner gruppieren"
-                    >
-                      <Folder className="w-3 h-3 text-accent" />
-                      <span>Ordner</span>
+                      Liste
                     </button>
                   </div>
                 </div>
@@ -1949,113 +1938,72 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
               {/* Grouped Folders & To-Dos */}
               {allRollupTodos.length === 0 ? (
-                <div className="p-8 text-center text-muted text-xs space-y-1">
+                <div className="p-8 text-center text-muted text-xs space-y-1 border border-border rounded-card bg-panel">
                   <Sparkles className="w-6 h-6 text-accent mx-auto mb-1" />
                   <p className="font-semibold text-main">Keine To-Dos in Notizen gefunden!</p>
                   <p className="text-faint">
                     Tippe in einem beliebigen Dokument <code>/todo</code> oder <code>[] </code> ein.
                   </p>
                 </div>
-              ) : todoGrouping === 'note' ? (
-                /* Grouped by Note directly */
-                <div className="space-y-3">
-                  {Array.from(rollupTodosByNote.entries()).map(([docId, { doc, items }]) => {
-                    const isCollapsed = collapsedTodoNotes.has(docId);
-                    const openCount = items.filter((i) => !i.checked).length;
-
-                    return (
-                      <div
-                        key={docId}
-                        className="border border-border rounded-card bg-canvas overflow-hidden"
-                      >
-                        <div className="p-2 bg-canvas border-b border-border flex items-center justify-between">
-                          <div
-                            onClick={() => {
-                              setCollapsedTodoNotes((prev) => {
-                                const next = new Set(prev);
-                                if (next.has(docId)) next.delete(docId);
-                                else next.add(docId);
-                                return next;
-                              });
-                            }}
-                            className="flex items-center gap-2 cursor-pointer select-none"
-                          >
-                            {isCollapsed ? (
-                              <ChevronRight className="w-3.5 h-3.5 text-faint" />
-                            ) : (
-                              <ChevronDown className="w-3.5 h-3.5 text-accent" />
-                            )}
-                            <span className="text-sm">{doc.icon || '📝'}</span>
-                            <span className="font-bold text-xs text-main">{doc.title}</span>
-                            {doc.folderPath && (
-                              <span className="badge-neutral text-[10px]">📁 {doc.folderPath}</span>
-                            )}
-                            <span className="badge-neutral text-[10px] font-mono">
-                              {openCount} offen
-                            </span>
-                          </div>
-
-                          <button
-                            type="button"
-                            onClick={() => handleJumpToDocBlock(doc.id)}
-                            className="text-[10px] text-accent hover:underline px-1.5 py-0.5 rounded-btn hover:bg-canvas cursor-pointer flex items-center gap-1"
-                            title="Zur Notiz springen"
-                          >
-                            <span>Notiz öffnen</span>
-                            <ExternalLink className="w-2.5 h-2.5" />
-                          </button>
-                        </div>
-
-                        {!isCollapsed && (
-                          <div className="p-2 space-y-1">
-                            {items.map((item) => (
-                              <div
-                                key={`${item.doc.id}-${item.blockId}`}
-                                className="flex items-center justify-between gap-2 p-1.5 rounded-btn hover:bg-panel-elevated text-xs transition-colors group cursor-pointer"
-                              >
-                                <div className="flex items-center gap-2 min-w-0 flex-1">
-                                  <button
-                                    type="button"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleToggleRollupTodo(item.doc, item.blockId, item.checked);
-                                    }}
-                                    className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center transition-colors border cursor-pointer ${
-                                      item.checked
-                                        ? 'bg-status-ok border-status-ok text-on-accent'
-                                        : 'border-strong hover:border-accent text-transparent'
-                                    }`}
-                                  >
-                                    <Check className="w-2.5 h-2.5 stroke-[3]" />
-                                  </button>
-                                  <span
-                                    onClick={() => handleJumpToDocBlock(item.doc.id, item.blockId)}
-                                    className={`truncate flex-1 ${
-                                      item.checked
-                                        ? 'line-through text-faint'
-                                        : 'text-main font-medium group-hover:text-accent'
-                                    }`}
-                                  >
-                                    {item.content}
-                                  </span>
-                                </div>
-                                <button
-                                  type="button"
-                                  onClick={() => handleJumpToDocBlock(item.doc.id, item.blockId)}
-                                  className="text-faint hover:text-accent opacity-0 group-hover:opacity-100 transition-opacity p-1"
-                                  title="Zu dieser Zeile springen"
-                                >
-                                  <ExternalLink className="w-3 h-3" />
-                                </button>
-                              </div>
-                            ))}
-                          </div>
-                        )}
+              ) : todoGrouping === 'list' ? (
+                /* Flat list of all todos across notes */
+                <div className="border border-border rounded-card bg-panel p-2 space-y-1">
+                  {allRollupTodos.map((item) => (
+                    <div
+                      key={`${item.doc.id}-${item.blockId}`}
+                      className="flex items-center justify-between gap-2 p-2 rounded-btn hover:bg-panel-elevated text-xs transition-colors group cursor-pointer"
+                    >
+                      <div className="flex items-center gap-2 min-w-0 flex-1">
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleToggleRollupTodo(item.doc, item.blockId, item.checked);
+                          }}
+                          className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center transition-colors border cursor-pointer ${
+                            item.checked
+                              ? 'bg-status-ok border-status-ok text-on-accent'
+                              : 'border-strong hover:border-accent text-transparent'
+                          }`}
+                        >
+                          <Check className="w-2.5 h-2.5 stroke-[3]" />
+                        </button>
+                        <span
+                          onClick={() => handleJumpToDocBlock(item.doc.id, item.blockId)}
+                          className={`truncate flex-1 ${
+                            item.checked
+                              ? 'line-through text-faint'
+                              : 'text-main font-medium group-hover:text-accent'
+                          }`}
+                        >
+                          {item.content}
+                        </span>
                       </div>
-                    );
-                  })}
+                      <div className="flex items-center gap-1.5 shrink-0">
+                        <span
+                          onClick={() => handleJumpToDocBlock(item.doc.id, item.blockId)}
+                          className="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-btn bg-panel-elevated text-muted hover:text-main"
+                          title={item.doc.title}
+                        >
+                          <span>{item.doc.icon || '📝'}</span>
+                          <span className="truncate max-w-[120px]">{item.doc.title}</span>
+                          {item.doc.folderPath && (
+                            <span className="text-faint text-[10px]">({item.doc.folderPath})</span>
+                          )}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={() => handleJumpToDocBlock(item.doc.id, item.blockId)}
+                          className="text-faint hover:text-accent opacity-0 group-hover:opacity-100 transition-opacity p-1"
+                          title="Zu dieser Zeile springen"
+                        >
+                          <ExternalLink className="w-3 h-3" />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
                 </div>
-              ) : todoGrouping === 'folder_note' ? (
+              ) : (
                 /* Grouped by Folder -> grouped by Note */
                 <div className="space-y-3">
                   {Array.from(rollupTodosByFolder.entries()).map(([folderName, items]) => {
@@ -2073,10 +2021,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     return (
                       <div
                         key={folderName}
-                        className="border border-border rounded-card bg-canvas overflow-hidden"
+                        className="border border-border rounded-card bg-panel overflow-hidden"
                       >
                         {/* Folder Header */}
-                        <div className="p-2 bg-canvas border-b border-border flex items-center justify-between">
+                        <div className="p-2 bg-panel border-b border-border flex items-center justify-between">
                           <div
                             onClick={() => {
                               setCollapsedTodoFolders((prev) => {
@@ -2103,7 +2051,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                           <button
                             type="button"
                             onClick={() => setTodoFolderDrilldown(folderName)}
-                            className="text-[10px] text-muted hover:text-main px-1.5 py-0.5 rounded-btn hover:bg-canvas cursor-pointer"
+                            className="text-[10px] text-muted hover:text-main px-1.5 py-0.5 rounded-btn hover:bg-panel-elevated cursor-pointer"
                             title="Diesen Ordner isolieren"
                           >
                             Nur diesen Ordner
@@ -2119,7 +2067,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                               return (
                                 <div
                                   key={doc.id}
-                                  className="border border-border/60 rounded-btn p-2 bg-panel-elevated/30 space-y-1.5"
+                                  className="border border-border/60 rounded-btn p-2 bg-panel-elevated/40 space-y-1.5"
                                 >
                                   <div className="flex items-center justify-between pb-1 border-b border-border/40">
                                     <div
@@ -2148,7 +2096,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                                     <button
                                       type="button"
                                       onClick={() => handleJumpToDocBlock(doc.id)}
-                                      className="text-[10px] text-accent hover:underline px-1.5 py-0.5 rounded-btn hover:bg-canvas cursor-pointer flex items-center gap-1"
+                                      className="text-[10px] text-accent hover:underline px-1.5 py-0.5 rounded-btn hover:bg-panel cursor-pointer flex items-center gap-1"
                                       title="Notiz öffnen"
                                     >
                                       <span>Notiz öffnen</span>
@@ -2161,7 +2109,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                                       {docItems.map((item) => (
                                         <div
                                           key={`${item.doc.id}-${item.blockId}`}
-                                          className="flex items-center justify-between gap-2 p-1 rounded-btn hover:bg-canvas text-xs transition-colors group cursor-pointer"
+                                          className="flex items-center justify-between gap-2 p-1 rounded-btn hover:bg-panel-elevated text-xs transition-colors group cursor-pointer"
                                         >
                                           <div className="flex items-center gap-2 min-w-0 flex-1">
                                             <button
@@ -2218,105 +2166,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     );
                   })}
                 </div>
-              ) : (
-                /* Grouped by Folder (Flat tasks inside folder) */
-                <div className="space-y-3">
-                  {Array.from(rollupTodosByFolder.entries()).map(([folderName, items]) => {
-                    const isCollapsed = collapsedTodoFolders.has(folderName);
-                    const openCount = items.filter((i) => !i.checked).length;
-
-                    return (
-                      <div
-                        key={folderName}
-                        className="border border-border rounded-card bg-canvas overflow-hidden"
-                      >
-                        {/* Folder Header */}
-                        <div className="p-2 bg-canvas border-b border-border flex items-center justify-between">
-                          <div
-                            onClick={() => {
-                              setCollapsedTodoFolders((prev) => {
-                                const next = new Set(prev);
-                                if (next.has(folderName)) next.delete(folderName);
-                                else next.add(folderName);
-                                return next;
-                              });
-                            }}
-                            className="flex items-center gap-2 cursor-pointer select-none"
-                          >
-                            {isCollapsed ? (
-                              <ChevronRight className="w-3.5 h-3.5 text-faint" />
-                            ) : (
-                              <ChevronDown className="w-3.5 h-3.5 text-accent" />
-                            )}
-                            <Folder className="w-3.5 h-3.5 text-accent" />
-                            <span className="font-bold text-xs text-main">{folderName}</span>
-                            <span className="badge-neutral text-[10px] font-mono">
-                              {openCount} offen
-                            </span>
-                          </div>
-
-                          <button
-                            type="button"
-                            onClick={() => setTodoFolderDrilldown(folderName)}
-                            className="text-[10px] text-muted hover:text-main px-1.5 py-0.5 rounded-btn hover:bg-canvas cursor-pointer"
-                            title="Diesen Ordner isolieren"
-                          >
-                            Nur diesen Ordner
-                          </button>
-                        </div>
-
-                        {/* Folder Tasks */}
-                        {!isCollapsed && (
-                          <div className="p-2 space-y-1">
-                            {items.map((item) => (
-                              <div
-                                key={`${item.doc.id}-${item.blockId}`}
-                                className="flex items-center justify-between gap-2 p-1.5 rounded-btn hover:bg-panel-elevated text-xs transition-colors group cursor-pointer"
-                              >
-                                <div className="flex items-center gap-2 min-w-0 flex-1">
-                                  <button
-                                    type="button"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleToggleRollupTodo(item.doc, item.blockId, item.checked);
-                                    }}
-                                    className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center transition-colors border cursor-pointer ${
-                                      item.checked
-                                        ? 'bg-status-ok border-status-ok text-on-accent'
-                                        : 'border-strong hover:border-accent text-transparent'
-                                    }`}
-                                  >
-                                    <Check className="w-2.5 h-2.5 stroke-[3]" />
-                                  </button>
-                                  <span
-                                    onClick={() => handleJumpToDocBlock(item.doc.id, item.blockId)}
-                                    className={`truncate flex-1 ${
-                                      item.checked
-                                        ? 'line-through text-faint'
-                                        : 'text-main font-medium group-hover:text-accent'
-                                    }`}
-                                  >
-                                    {item.content}
-                                  </span>
-                                </div>
-                                <button
-                                  type="button"
-                                  onClick={() => handleJumpToDocBlock(item.doc.id, item.blockId)}
-                                  className="text-[11px] text-accent hover:underline flex items-center gap-1 shrink-0 cursor-pointer"
-                                  title="Zu dieser Zeile springen"
-                                >
-                                  <span>{item.doc.icon || '📝'}</span>
-                                  <span className="truncate max-w-[120px]">{item.doc.title}</span>
-                                  <ExternalLink className="w-2.5 h-2.5 opacity-60" />
-                                </button>
-                              </div>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
               )}
             </div>
           </div>
@@ -2355,55 +2204,45 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         )}
       </main>
 
-      {/* New Folder Modal */}
+      {/* New Folder Popover (small & positioned near click, asks only for name & OK) */}
       {showNewFolderModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-overlay backdrop-blur-sm p-4">
+        <div
+          className="fixed inset-0 z-50 bg-black/20"
+          onClick={() => setShowNewFolderModal(false)}
+        >
           <form
             onSubmit={handleCreateFolderSubmit}
-            className="w-full max-w-md panel-surface shadow-panel border border-border rounded-card p-4 space-y-3"
+            onClick={(e) => e.stopPropagation()}
+            style={
+              newFolderCoords
+                ? { top: `${newFolderCoords.y}px`, left: `${newFolderCoords.x}px` }
+                : undefined
+            }
+            className="fixed w-64 bg-panel border border-border rounded-card p-3 shadow-lg space-y-2.5 z-50 text-xs"
           >
-            <div className="flex items-center justify-between">
-              <h3 className="text-sm font-bold text-main">
-                Neuen Ordner anlegen
-              </h3>
+            <div className="font-semibold text-main text-xs flex items-center justify-between">
+              <span className="truncate">{newFolderParentPath ? `Unterordner in "${newFolderParentPath}"` : 'Neuer Ordner'}</span>
               <button
                 type="button"
                 onClick={() => setShowNewFolderModal(false)}
-                className="p-1 rounded-btn text-faint hover:text-main"
+                className="text-faint hover:text-main cursor-pointer"
               >
-                <X className="w-4 h-4" />
+                <X className="w-3.5 h-3.5" />
               </button>
             </div>
-
-            <div className="space-y-1">
-              <label className="text-[11px] font-medium text-muted">
-                Ordnerpfad (z.B. <code>Projekte/2026</code>)
-              </label>
-              <input
-                type="text"
-                autoFocus
-                value={newFolderName}
-                onChange={(e) => setNewFolderName(e.target.value)}
-                placeholder="Projekte"
-                className="input-field w-full px-2.5 py-1.5 text-xs"
-              />
-            </div>
-
-            <label className="flex items-center gap-2 text-xs text-muted cursor-pointer">
-              <input
-                type="checkbox"
-                checked={newFolderIsShared}
-                onChange={(e) => setNewFolderIsShared(e.target.checked)}
-                className="checkbox-square"
-              />
-              <span>Als geteilten Team-Ordner freigeben</span>
-            </label>
-
-            <div className="flex justify-end gap-2 pt-1">
+            <input
+              type="text"
+              autoFocus
+              value={newFolderName}
+              onChange={(e) => setNewFolderName(e.target.value)}
+              placeholder="Ordnername"
+              className="input-field w-full px-2 py-1 text-xs"
+            />
+            <div className="flex justify-end gap-1.5 pt-1">
               <button
                 type="button"
                 onClick={() => setShowNewFolderModal(false)}
-                className="btn-action px-3 py-1 text-xs"
+                className="btn-action px-2.5 py-1 text-xs"
               >
                 Abbrechen
               </button>
@@ -2411,14 +2250,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 type="submit"
                 className="btn-primary px-3 py-1 text-xs font-semibold"
               >
-                Erstellen
+                OK
               </button>
             </div>
           </form>
         </div>
       )}
 
-      {/* Unified Sharing Modal */}
+      {/* Unified Sharing Modal (Strictly Read-Only for Docs and Folders) */}
       {(shareModalDoc || shareModalFolder) && (
         <UnifiedShareModal
           isOpen={true}
@@ -2437,9 +2276,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           shares={unifiedShares}
           teams={teams}
           collaborators={collaborators}
-          allowRoleSelection={!shareModalDoc}
-          onAddShare={async (targetType, targetId, permission) => {
-            const perm = (!shareModalDoc && permission === 'editor') ? 'write' : 'read';
+          allowRoleSelection={false}
+          fixedPermission="viewer"
+          onAddShare={async (targetType, targetId) => {
             if (shareModalDoc) {
               await api.createDocShare(
                 shareModalDoc.id,
@@ -2453,7 +2292,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               await api.createFolderShare(shareModalFolder.id, {
                 targetType,
                 targetId,
-                permission: perm,
+                permission: 'read',
               });
               const updatedFolder = await api.getSharedFolder(shareModalFolder.id);
               setShareModalFolder(updatedFolder);

frontend/src/lib/api.ts

@@ -649,6 +649,17 @@ export const api = {
     };
   },
 
+  async createEnhancedTask(
+    docId: string,
+    blockId: string,
+    payload: { content: string; checked: boolean }
+  ): Promise<Thought> {
+    return request<Thought>(`/api/v1/documents/${docId}/blocks/${blockId}/enhanced-task`, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+  },
+
   // --- DOCUMENT SHARING ---
   async getDocShares(docId: string): Promise<DocShare[]> {
     const res = await request<DocShare[]>(`/api/v1/documents/${docId}/shares`);
@@ -796,6 +807,17 @@ export const api = {
     });
   },
 
+  async updateListItem(
+    listId: string,
+    itemId: string,
+    payload: { content?: string; category?: string; quantity?: string }
+  ): Promise<ListItem> {
+    return request<ListItem>(`/api/v1/lists/${listId}/items/${itemId}`, {
+      method: 'PUT',
+      body: JSON.stringify(payload),
+    });
+  },
+
   async deleteListItem(listId: string, itemId: string): Promise<void> {
     await request(`/api/v1/lists/${listId}/items/${itemId}`, { method: 'DELETE' });
   },

frontend/src/lib/markdown.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+
+/**
+ * Parses inline markdown:
+ * - **bold** or __bold__
+ * - *italic* or _italic_
+ * - ~~strikethrough~~
+ * - `code`
+ * - [label](url)
+ */
+export function renderInlineMarkdown(text: string): React.ReactNode[] {
+  if (!text) return [];
+
+  const regex = /(`[^`]+`|\*\*[^*]+\*\*|__[^_]+__|~~[^~]+~~|\*[^*]+\*|_[^_]+_|\[([^\]]+)\]\(([^)]+)\))/g;
+
+  const elements: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      elements.push(text.slice(lastIndex, match.index));
+    }
+    const token = match[0];
+    const key = `${match.index}-${token}`;
+
+    if (token.startsWith('`') && token.endsWith('`')) {
+      elements.push(
+        <code key={key} className="px-1.5 py-0.5 rounded bg-panel-elevated text-accent font-mono text-[0.9em] border border-border/50">
+          {token.slice(1, -1)}
+        </code>
+      );
+    } else if (
+      (token.startsWith('**') && token.endsWith('**')) ||
+      (token.startsWith('__') && token.endsWith('__'))
+    ) {
+      elements.push(
+        <strong key={key} className="font-semibold text-main">
+          {token.slice(2, -2)}
+        </strong>
+      );
+    } else if (
+      (token.startsWith('*') && token.endsWith('*')) ||
+      (token.startsWith('_') && token.endsWith('_'))
+    ) {
+      elements.push(
+        <em key={key} className="italic text-main/90">
+          {token.slice(1, -1)}
+        </em>
+      );
+    } else if (token.startsWith('~~') && token.endsWith('~~')) {
+      elements.push(
+        <del key={key} className="line-through text-muted/80">
+          {token.slice(2, -2)}
+        </del>
+      );
+    } else if (token.startsWith('[') && match[2] && match[3]) {
+      const label = match[2];
+      const url = match[3];
+      elements.push(
+        <a
+          key={key}
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-accent underline hover:opacity-80 transition-opacity"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {label}
+        </a>
+      );
+    } else {
+      elements.push(token);
+    }
+
+    lastIndex = regex.lastIndex;
+  }
+
+  if (lastIndex < text.length) {
+    elements.push(text.slice(lastIndex));
+  }
+
+  return elements;
+}
+
+export function MarkdownViewer({ content, className = '' }: { content: string; className?: string }) {
+  if (!content) return null;
+
+  const lines = content.split('\n');
+  const renderedNodes: React.ReactNode[] = [];
+  let inCodeBlock = false;
+  let codeBlockLines: string[] = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    if (line.trim().startsWith('```')) {
+      if (inCodeBlock) {
+        renderedNodes.push(
+          <pre key={`code-${i}`} className="p-2.5 my-2 rounded bg-panel-elevated text-accent font-mono text-xs overflow-x-auto border border-border/60">
+            <code>{codeBlockLines.join('\n')}</code>
+          </pre>
+        );
+        codeBlockLines = [];
+        inCodeBlock = false;
+      } else {
+        inCodeBlock = true;
+        codeBlockLines = [];
+      }
+      continue;
+    }
+
+    if (inCodeBlock) {
+      codeBlockLines.push(line);
+      continue;
+    }
+
+    const trimmed = line.trim();
+
+    if (trimmed.startsWith('### ')) {
+      renderedNodes.push(
+        <h3 key={i} className="text-sm font-bold text-main mt-2 mb-1">
+          {renderInlineMarkdown(trimmed.slice(4))}
+        </h3>
+      );
+    } else if (trimmed.startsWith('## ')) {
+      renderedNodes.push(
+        <h2 key={i} className="text-base font-bold text-main mt-3 mb-1">
+          {renderInlineMarkdown(trimmed.slice(3))}
+        </h2>
+      );
+    } else if (trimmed.startsWith('# ')) {
+      renderedNodes.push(
+        <h1 key={i} className="text-lg font-bold text-main mt-3 mb-1.5">
+          {renderInlineMarkdown(trimmed.slice(2))}
+        </h1>
+      );
+    } else if (trimmed.startsWith('> ')) {
+      renderedNodes.push(
+        <blockquote key={i} className="border-l-2 border-accent pl-2.5 my-1 text-muted italic">
+          {renderInlineMarkdown(trimmed.slice(2))}
+        </blockquote>
+      );
+    } else if (trimmed.startsWith('- ') || trimmed.startsWith('* ')) {
+      renderedNodes.push(
+        <div key={i} className="flex items-start gap-1.5 my-0.5">
+          <span className="text-accent mt-0.5">•</span>
+          <span className="flex-1 text-main">{renderInlineMarkdown(trimmed.slice(2))}</span>
+        </div>
+      );
+    } else if (/^\d+\.\s/.test(trimmed)) {
+      const matchNum = trimmed.match(/^(\d+)\.\s(.*)$/);
+      renderedNodes.push(
+        <div key={i} className="flex items-start gap-1.5 my-0.5">
+          <span className="text-muted text-[11px] font-mono mt-0.5">{matchNum ? matchNum[1] + '.' : '•'}</span>
+          <span className="flex-1 text-main">{renderInlineMarkdown(matchNum ? matchNum[2] : trimmed)}</span>
+        </div>
+      );
+    } else if (trimmed === '') {
+      renderedNodes.push(<div key={i} className="h-2" />);
+    } else {
+      renderedNodes.push(
+        <div key={i} className="my-0.5 text-main leading-relaxed">
+          {renderInlineMarkdown(line)}
+        </div>
+      );
+    }
+  }
+
+  if (inCodeBlock && codeBlockLines.length > 0) {
+    renderedNodes.push(
+      <pre key="code-end" className="p-2.5 my-2 rounded bg-panel-elevated text-accent font-mono text-xs overflow-x-auto border border-border/60">
+        <code>{codeBlockLines.join('\n')}</code>
+      </pre>
+    );
+  }
+
+  return <div className={`markdown-body text-xs ${className}`}>{renderedNodes}</div>;
+}

frontend/src/lib/types.ts

@@ -53,8 +53,10 @@ export interface Thought {
   source: 'manual' | 'voice' | 'webhook';
   status: ThoughtStatus;
   isCompleted: boolean;
-  convertedType?: 'task' | 'document' | 'list_item';
+  convertedType?: 'task' | 'document' | 'list_item' | 'document_block';
   convertedRefId?: string;
+  docId?: string;
+  blockId?: string;
   dueDate?: string;
   taskListId?: string;
   kanbanStatus?: string;
@@ -159,6 +161,7 @@ export interface DocumentBlock {
   id: string;
   docId?: string;
   documentId?: string;
+  taskId?: string;
   type: BlockType;
   content: string;
   checked?: boolean;