feat(workspace): remove bottom bar, implement square monochromatic file explorer tree with subfolders

frontend/src/App.tsx

@@ -8,7 +8,6 @@ import {
   Brain,
   LogOut,
   User as UserIcon,
-  Plus,
   Bell,
   Shield,
   ChevronRight,
@@ -305,7 +304,7 @@ export const App: React.FC = () => {
       </header>
 
       {/* Main Container */}
-      <main className="flex-1 max-w-6xl w-full mx-auto px-3 sm:px-4 pt-3 pb-24">
+      <main className="flex-1 max-w-6xl w-full mx-auto px-3 sm:px-4 pt-3 pb-6">
         {/* Instant Capture Section */}
         <section className="mb-3">
           <InstantCaptureBar
@@ -351,83 +350,6 @@ export const App: React.FC = () => {
         </section>
       </main>
 
-      {/* Floating Bottom Navigation Dock matching Template Screen 3 */}
-      <footer className="fixed bottom-0 left-0 right-0 z-40 bg-[#1c1e22]/95 backdrop-blur-lg border-t border-white/[0.08] px-4 py-2 sm:py-3 shadow-2xl">
-        <div className="max-w-md mx-auto flex items-center justify-between relative px-2">
-          {/* Triage / Inbox */}
-          <button
-            onClick={() => {
-              triggerHaptic(10);
-              setActiveTab('triage');
-            }}
-            className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
-              activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
-            }`}
-            title="Triage Deck"
-          >
-            <Layers className="w-5 h-5" />
-            <span className="text-[10px] mt-1 font-medium">Triage</span>
-          </button>
-
-          {/* Tasks */}
-          <button
-            onClick={() => {
-              triggerHaptic(10);
-              setActiveTab('tasks');
-            }}
-            className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
-              activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
-            }`}
-            title="Aufgaben"
-          >
-            <CheckSquare className="w-5 h-5" />
-            <span className="text-[10px] mt-1 font-medium">Aufgaben</span>
-          </button>
-
-          {/* Center Floating Action Button matching Template + Button */}
-          <div className="relative -top-5 flex flex-col items-center">
-            <button
-              onClick={handleTriggerAddButton}
-              className="w-13 h-13 sm:w-14 sm:h-14 rounded-full bg-[#1d8cf8] hover:bg-[#1877d5] active:scale-95 text-white flex items-center justify-center shadow-lg shadow-blue-500/30 border-4 border-[#16171a] transition-all"
-              title="Gedanke erfassen"
-            >
-              <Plus className="w-6 h-6 stroke-[2.5]" />
-            </button>
-            <span className="text-[10px] font-medium text-zinc-300 mt-1">Erfassen</span>
-          </div>
-
-          {/* Lists */}
-          <button
-            onClick={() => {
-              triggerHaptic(10);
-              setActiveTab('lists');
-            }}
-            className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
-              activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
-            }`}
-            title="Listen"
-          >
-            <ShoppingCart className="w-5 h-5" />
-            <span className="text-[10px] mt-1 font-medium">Listen</span>
-          </button>
-
-          {/* Workspace */}
-          <button
-            onClick={() => {
-              triggerHaptic(10);
-              setActiveTab('workspace');
-            }}
-            className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
-              activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
-            }`}
-            title="Workspace"
-          >
-            <FileText className="w-5 h-5" />
-            <span className="text-[10px] mt-1 font-medium">Workspace</span>
-          </button>
-        </div>
-      </footer>
-
       {/* Profile & Settings Modal styled identically to Template Screen 2 */}
       {showProfileModal && (
         <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">

frontend/src/features/workspace/WorkspaceView.tsx

@@ -1,6 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import {
-  Plus,
+  FilePlus,
+  FolderPlus,
+  Folder,
+  FolderOpen,
+  ChevronRight,
+  ChevronDown,
+  FileText,
+  Search,
   Pin,
   Trash2,
   Download,
@@ -12,7 +19,7 @@ import {
   Sparkles,
   AlignLeft,
   Check,
-  Search,
+  X,
   ArrowUp,
   ArrowDown,
 } from 'lucide-react';
@@ -26,6 +33,14 @@ interface WorkspaceViewProps {
 
 const ICONS = ['🚀', '💡', '📄', '🏡', '⚡', '🎯', '🍕', '🛠️', '🧠', '🔥', '🏔️', '📦'];
 
+interface FolderTreeItem {
+  path: string;
+  name: string;
+  depth: number;
+  subfolders: FolderTreeItem[];
+  docs: Document[];
+}
+
 export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   initialDocId,
   onStatsChange,
@@ -36,6 +51,20 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [saveState, setSaveState] = useState<'saved' | 'saving'>('saved');
   const [showIconPicker, setShowIconPicker] = useState(false);
 
+  // Folder management
+  const [customFolders, setCustomFolders] = useState<string[]>(() => {
+    try {
+      const stored = localStorage.getItem('mindsift_workspace_folders');
+      return stored ? JSON.parse(stored) : [];
+    } catch {
+      return [];
+    }
+  });
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+  const [isCreatingFolder, setIsCreatingFolder] = useState(false);
+  const [newFolderParent, setNewFolderParent] = useState<string | null>(null);
+  const [newFolderName, setNewFolderName] = useState('');
+
   const loadDocs = async (selectId?: string | null) => {
     const list = await api.getDocuments();
     setDocs(list);
@@ -75,8 +104,43 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     }
   };
 
-  const handleCreateDoc = async () => {
+  const getDocFolder = (doc: Document): string => {
+    const tag = doc.tags?.find((t) => t.startsWith('folder:'));
+    return tag ? tag.replace('folder:', '') : '';
+  };
+
+  // Compute all available folders (persisted custom folders + tags on documents)
+  const allFolderPaths = useMemo(() => {
+    const set = new Set<string>(customFolders);
+    docs.forEach((doc) => {
+      const f = getDocFolder(doc);
+      if (f) {
+        const parts = f.split('/');
+        let cur = '';
+        for (const p of parts) {
+          cur = cur ? `${cur}/${p}` : p;
+          set.add(cur);
+        }
+      }
+    });
+    return Array.from(set).sort((a, b) => a.localeCompare(b));
+  }, [customFolders, docs]);
+
+  // Ensure newly discovered folders start expanded so users see their files
+  useEffect(() => {
+    setExpandedFolders((prev) => {
+      const next = new Set(prev);
+      allFolderPaths.forEach((p) => next.add(p));
+      return next;
+    });
+  }, [allFolderPaths.join(',')]);
+
+  const handleCreateDoc = async (folderPath?: string | null) => {
     triggerHaptic(15);
+    const tags = ['projekt'];
+    if (folderPath) {
+      tags.push(`folder:${folderPath}`);
+    }
     const created = await api.createDocument({
       title: 'Neues Projekt / Notiz',
       icon: '💡',
@@ -98,8 +162,17 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           checked: false,
         },
       ],
-      tags: ['projekt'],
+      tags,
     });
+
+    if (folderPath) {
+      setExpandedFolders((prev) => {
+        const next = new Set(prev);
+        next.add(folderPath);
+        return next;
+      });
+    }
+
     await loadDocs(created.id);
     onStatsChange();
   };
@@ -113,6 +186,84 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     onStatsChange();
   };
 
+  const handleChangeDocFolder = (targetFolder: string) => {
+    if (!selectedDoc) return;
+    const cleanTags = (selectedDoc.tags || []).filter((t) => !t.startsWith('folder:'));
+    if (targetFolder) {
+      cleanTags.push(`folder:${targetFolder}`);
+    }
+    persistDocument({ ...selectedDoc, tags: cleanTags });
+  };
+
+  const handleStartCreateFolder = (parentPath: string | null = null) => {
+    triggerHaptic(10);
+    setNewFolderParent(parentPath);
+    setNewFolderName('');
+    setIsCreatingFolder(true);
+  };
+
+  const handleConfirmCreateFolder = () => {
+    const trimmed = newFolderName.trim().replace(/^\/+|\/+$/g, '');
+    if (!trimmed) {
+      setIsCreatingFolder(false);
+      return;
+    }
+    const fullPath = newFolderParent ? `${newFolderParent}/${trimmed}` : trimmed;
+    if (!customFolders.includes(fullPath)) {
+      const updated = [...customFolders, fullPath];
+      setCustomFolders(updated);
+      try {
+        localStorage.setItem('mindsift_workspace_folders', JSON.stringify(updated));
+      } catch {
+        // local storage fallback
+      }
+    }
+    setExpandedFolders((prev) => {
+      const next = new Set(prev);
+      next.add(fullPath);
+      if (newFolderParent) next.add(newFolderParent);
+      return next;
+    });
+    setIsCreatingFolder(false);
+    setNewFolderName('');
+    setNewFolderParent(null);
+  };
+
+  const handleDeleteFolder = (folderPath: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    triggerHaptic(15);
+    const updated = customFolders.filter(
+      (p) => p !== folderPath && !p.startsWith(folderPath + '/')
+    );
+    setCustomFolders(updated);
+    try {
+      localStorage.setItem('mindsift_workspace_folders', JSON.stringify(updated));
+    } catch {
+      // local storage fallback
+    }
+
+    // Keep docs safe: remove folder prefix so they revert to root
+    docs.forEach((d) => {
+      const f = getDocFolder(d);
+      if (f === folderPath || f.startsWith(folderPath + '/')) {
+        const nextTags = (d.tags || []).filter((t) => !t.startsWith('folder:'));
+        persistDocument({ ...d, tags: nextTags });
+      }
+    });
+  };
+
+  const toggleFolder = (folderPath: string) => {
+    setExpandedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(folderPath)) {
+        next.delete(folderPath);
+      } else {
+        next.add(folderPath);
+      }
+      return next;
+    });
+  };
+
   const addBlock = (type: BlockType, afterIndex?: number) => {
     if (!selectedDoc) return;
     const newBlock: DocumentBlock = {
@@ -200,61 +351,304 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const filteredDocs = docs.filter(
     (d) =>
       d.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      d.content.toLowerCase().includes(searchQuery.toLowerCase())
+      (d.content && d.content.toLowerCase().includes(searchQuery.toLowerCase()))
   );
 
-  return (
+  // Build recursive folder tree
-    <div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
+  const buildTree = (parentPath: string = '', depth: number = 0): FolderTreeItem[] => {
-      {/* Left Document List Sidebar */}
+    const directChildren = allFolderPaths.filter((p) => {
-      <div className="lg:col-span-4 bg-[#222428] border border-white/[0.08] flex flex-col self-start">
+      if (parentPath === '') {
-        <div className="flex items-center gap-2 p-2 border-b border-white/[0.06]">
+        return !p.includes('/');
-          <div className="relative flex-1">
+      }
-            <Search className="w-4 h-4 text-zinc-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
+      return p.startsWith(parentPath + '/') && !p.slice(parentPath.length + 1).includes('/');
-            <input
+    });
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Notizen durchsuchen…"
-              className="w-full h-9 pl-9 pr-3 bg-[#16171a] text-xs sm:text-sm text-white placeholder-zinc-500 border border-white/[0.06] focus:outline-none focus:border-[#1d8cf8] transition-colors"
-            />
-          </div>
 
-          <button
+    return directChildren.map((p) => {
-            onClick={handleCreateDoc}
+      const name = p.split('/').pop() || p;
-            className="h-9 px-4 rounded-full bg-[#1d8cf8] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors flex-shrink-0"
+      const matchingDocs = filteredDocs.filter((d) => getDocFolder(d) === p);
-          >
+      return {
-            <Plus className="w-4 h-4" />
+        path: p,
-            <span>Neu</span>
+        name,
-          </button>
+        depth,
-        </div>
+        subfolders: buildTree(p, depth + 1),
+        docs: matchingDocs,
+      };
+    });
+  };
 
-        <div className="divide-y divide-white/[0.06] max-h-[calc(100vh-240px)] overflow-y-auto">
+  const rootTree = useMemo(() => buildTree('', 0), [allFolderPaths, filteredDocs]);
-          {filteredDocs.map((doc) => {
+  const rootDocs = useMemo(
+    () => filteredDocs.filter((d) => !getDocFolder(d)),
+    [filteredDocs]
+  );
+
+  const renderDocItem = (doc: Document, depth: number = 0) => {
     const active = selectedDoc?.id === doc.id;
     return (
       <button
         key={doc.id}
+        type="button"
         onClick={() => setSelectedDoc(doc)}
-                className={`w-full text-left pl-2.5 pr-3 py-2 transition-colors flex items-start justify-between gap-3 border-l-2 ${
+        style={{ paddingLeft: `${depth * 14 + 10}px` }}
+        className={`w-full text-left py-1.5 pr-2 transition-colors flex items-center justify-between gap-2 border-l-2 ${
           active
-                    ? 'bg-[#282a2f] border-l-[#1d8cf8]'
+            ? 'bg-[#282a2f] border-l-[#1d8cf8] text-white'
-                    : 'border-l-transparent hover:bg-[#282a2f]'
+            : 'border-l-transparent text-zinc-300 hover:bg-[#282a2f] hover:text-white'
         }`}
       >
-                <div className="flex items-start gap-2.5 min-w-0">
+        <div className="flex items-center gap-1.5 min-w-0">
-                  <span className="text-lg leading-6 flex-shrink-0">{doc.icon}</span>
+          <span className="text-xs leading-none flex-shrink-0">
-                  <div className="min-w-0">
+            {doc.icon ? doc.icon : <FileText className="w-3.5 h-3.5 text-zinc-400" />}
-                    <h4 className="font-medium text-sm text-white truncate">{doc.title}</h4>
+          </span>
-                    <p className="text-xs text-zinc-400 truncate mt-0.5">
+          <span className="text-xs truncate font-normal">{doc.title || 'Ohne Titel'}</span>
-                      {doc.blocks?.[0]?.content || 'Leeres Dokument'}
-                    </p>
         </div>
-                </div>
+        {doc.isPinned && <Pin className="w-3 h-3 text-[#1d8cf8] flex-shrink-0" />}
-                {doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0 mt-1" />}
       </button>
     );
-          })}
+  };
+
+  const renderFolder = (node: FolderTreeItem) => {
+    const isExpanded = expandedFolders.has(node.path);
+    const isCreatingSubfolder = isCreatingFolder && newFolderParent === node.path;
+    const totalItems =
+      node.docs.length +
+      node.subfolders.reduce((acc, s) => acc + s.docs.length, 0);
+
+    return (
+      <div key={node.path} className="select-none">
+        {/* Folder Header Row */}
+        <div
+          onClick={() => toggleFolder(node.path)}
+          style={{ paddingLeft: `${node.depth * 14 + 8}px` }}
+          className="group flex items-center justify-between py-1.5 pr-2 hover:bg-[#282a2f] cursor-pointer transition-colors text-xs text-zinc-300"
+        >
+          <div className="flex items-center gap-1.5 min-w-0">
+            <span className="text-zinc-500 hover:text-zinc-300">
+              {isExpanded ? (
+                <ChevronDown className="w-3 h-3 flex-shrink-0" />
+              ) : (
+                <ChevronRight className="w-3 h-3 flex-shrink-0" />
+              )}
+            </span>
+            {isExpanded ? (
+              <FolderOpen className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0" />
+            ) : (
+              <Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
+            )}
+            <span className="font-medium text-xs text-zinc-200 truncate">{node.name}</span>
+            <span className="text-[10px] text-zinc-500 font-mono">({totalItems})</span>
           </div>
+
+          {/* Folder Actions on Hover */}
+          <div className="opacity-0 group-hover:opacity-100 flex items-center gap-1 transition-opacity">
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleCreateDoc(node.path);
+              }}
+              className="p-1 hover:bg-[#32353b] text-zinc-400 hover:text-white"
+              title="Neue Datei in diesem Ordner"
+            >
+              <FilePlus className="w-3 h-3" />
+            </button>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleStartCreateFolder(node.path);
+              }}
+              className="p-1 hover:bg-[#32353b] text-zinc-400 hover:text-white"
+              title="Neuer Unterordner"
+            >
+              <FolderPlus className="w-3 h-3" />
+            </button>
+            <button
+              type="button"
+              onClick={(e) => handleDeleteFolder(node.path, e)}
+              className="p-1 hover:bg-red-500/20 text-zinc-500 hover:text-red-400"
+              title="Ordner entfernen"
+            >
+              <Trash2 className="w-3 h-3" />
+            </button>
+          </div>
+        </div>
+
+        {/* Subfolder inline creation input */}
+        {isCreatingSubfolder && (
+          <div
+            style={{ paddingLeft: `${(node.depth + 1) * 14 + 8}px` }}
+            className="py-1 pr-2 flex items-center gap-1.5 bg-[#16171a]"
+          >
+            <Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
+            <input
+              type="text"
+              autoFocus
+              value={newFolderName}
+              onChange={(e) => setNewFolderName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleConfirmCreateFolder();
+                if (e.key === 'Escape') setIsCreatingFolder(false);
+              }}
+              placeholder="Unterordnername…"
+              className="flex-1 h-6 px-1.5 bg-[#222428] text-xs text-white border border-white/20 focus:outline-none focus:border-[#1d8cf8]"
+            />
+            <button
+              type="button"
+              onClick={handleConfirmCreateFolder}
+              className="p-1 text-[#1d8cf8] hover:text-white"
+              title="Bestätigen"
+            >
+              <Check className="w-3.5 h-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsCreatingFolder(false)}
+              className="p-1 text-zinc-400 hover:text-white"
+              title="Abbrechen"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        )}
+
+        {/* Expanded Folder Content */}
+        {isExpanded && (
+          <div>
+            {node.subfolders.map(renderFolder)}
+            {node.docs.map((doc) => renderDocItem(doc, node.depth + 1))}
+            {node.subfolders.length === 0 && node.docs.length === 0 && !isCreatingSubfolder && (
+              <div
+                style={{ paddingLeft: `${(node.depth + 1) * 14 + 14}px` }}
+                className="py-1 text-[11px] text-zinc-600 italic"
+              >
+                (leer)
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const isEmpty = docs.length === 0 && allFolderPaths.length === 0;
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
+      {/* Left Document & Folder Explorer Tree */}
+      <div className="lg:col-span-4 bg-[#222428] border border-white/[0.08] flex flex-col self-start">
+        {/* Top Explorer Action Bar */}
+        <div className="p-2 border-b border-white/[0.08] space-y-2">
+          {/* Quick Search */}
+          <div className="relative">
+            <Search className="w-3.5 h-3.5 text-zinc-400 absolute left-2.5 top-1/2 -translate-y-1/2" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Dateien durchsuchen…"
+              className="w-full h-7 pl-7 pr-2 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+            />
+          </div>
+
+          {/* Monochromatic Square Action Buttons */}
+          <div className="flex items-center gap-1.5">
+            <button
+              type="button"
+              onClick={() => handleCreateDoc(null)}
+              className="flex-1 h-7 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-zinc-300 hover:text-white text-xs font-medium flex items-center justify-center gap-1.5 transition-colors"
+              title="Neue Datei erstellen"
+            >
+              <FilePlus className="w-3.5 h-3.5 text-zinc-400" />
+              <span>Neue Datei</span>
+            </button>
+
+            <button
+              type="button"
+              onClick={() => handleStartCreateFolder(null)}
+              className="flex-1 h-7 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-zinc-300 hover:text-white text-xs font-medium flex items-center justify-center gap-1.5 transition-colors"
+              title="Neuen Ordner erstellen"
+            >
+              <FolderPlus className="w-3.5 h-3.5 text-zinc-400" />
+              <span>Neuer Ordner</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Root Folder Creation Input */}
+        {isCreatingFolder && newFolderParent === null && (
+          <div className="p-2 border-b border-white/[0.08] bg-[#16171a] flex items-center gap-1.5">
+            <Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
+            <input
+              type="text"
+              autoFocus
+              value={newFolderName}
+              onChange={(e) => setNewFolderName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleConfirmCreateFolder();
+                if (e.key === 'Escape') setIsCreatingFolder(false);
+              }}
+              placeholder="Neuer Ordnername…"
+              className="flex-1 h-6 px-1.5 bg-[#222428] text-xs text-white border border-white/20 focus:outline-none focus:border-[#1d8cf8]"
+            />
+            <button
+              type="button"
+              onClick={handleConfirmCreateFolder}
+              className="p-1 text-[#1d8cf8] hover:text-white"
+              title="Bestätigen"
+            >
+              <Check className="w-3.5 h-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsCreatingFolder(false)}
+              className="p-1 text-zinc-400 hover:text-white"
+              title="Abbrechen"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {isEmpty ? (
+          <div className="p-6 my-3 mx-2 border border-dashed border-white/10 bg-[#16171a]/50 text-center">
+            <Folder className="w-7 h-7 text-zinc-600 mx-auto mb-2" />
+            <h5 className="text-xs font-semibold text-zinc-300 mb-1">Keine Dateien vorhanden</h5>
+            <p className="text-[11px] text-zinc-500 mb-3 max-w-xs mx-auto leading-relaxed">
+              Erstelle eine neue Datei oder lege Ordner an, um deine Dokumente übersichtlich zu strukturieren.
+            </p>
+            <div className="flex items-center justify-center gap-2">
+              <button
+                type="button"
+                onClick={() => handleCreateDoc(null)}
+                className="h-7 px-2.5 border border-white/10 bg-[#222428] hover:bg-[#2c2f35] text-zinc-200 text-xs flex items-center gap-1.5 font-medium transition-colors"
+              >
+                <FilePlus className="w-3.5 h-3.5 text-zinc-400" />
+                <span>Neue Datei</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => handleStartCreateFolder(null)}
+                className="h-7 px-2.5 border border-white/10 bg-[#222428] hover:bg-[#2c2f35] text-zinc-200 text-xs flex items-center gap-1.5 font-medium transition-colors"
+              >
+                <FolderPlus className="w-3.5 h-3.5 text-zinc-400" />
+                <span>Neuer Ordner</span>
+              </button>
+            </div>
+          </div>
+        ) : (
+          /* File Explorer Tree View */
+          <div className="py-1 max-h-[calc(100vh-240px)] overflow-y-auto">
+            {rootTree.map(renderFolder)}
+            {rootDocs.map((doc) => renderDocItem(doc, 0))}
+            {filteredDocs.length === 0 && searchQuery && (
+              <div className="p-4 text-center text-xs text-zinc-500">
+                Keine Dateien gefunden für &quot;{searchQuery}&quot;
+              </div>
+            )}
+          </div>
+        )}
       </div>
 
       {/* Right Block Editor */}
@@ -263,23 +657,42 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           <div className="p-4 bg-[#222428] border border-white/[0.08]">
             {/* Document Top Action Bar */}
             <div className="flex flex-wrap items-center justify-between gap-3 pb-3 mb-3 border-b border-white/[0.06]">
-              <div className="flex items-center gap-2 text-xs text-zinc-400">
+              <div className="flex flex-wrap items-center gap-2 text-xs text-zinc-400">
                 <span className="px-2 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1 font-medium">
                   <Check className="w-3 h-3" />
                   {saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
                 </span>
+
+                {/* Folder Breadcrumb Selector */}
+                <div className="flex items-center gap-1.5">
+                  <Folder className="w-3.5 h-3.5 text-zinc-500" />
+                  <select
+                    value={getDocFolder(selectedDoc)}
+                    onChange={(e) => handleChangeDocFolder(e.target.value)}
+                    className="bg-[#16171a] border border-white/[0.08] text-zinc-300 text-xs px-2 py-0.5 focus:outline-none focus:border-[#1d8cf8]"
+                  >
+                    <option value="">(Kein Ordner / Root)</option>
+                    {allFolderPaths.map((fp) => (
+                      <option key={fp} value={fp}>
+                        {fp}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
                 <span>• {selectedDoc.blocks.length} Blöcke</span>
               </div>
 
               <div className="flex items-center gap-2">
                 <button
+                  type="button"
                   onClick={() =>
                     persistDocument({ ...selectedDoc, isPinned: !selectedDoc.isPinned })
                   }
-                  className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
+                  className={`h-7 px-2.5 border text-xs flex items-center gap-1.5 transition-colors ${
                     selectedDoc.isPinned
-                      ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
+                      ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40'
-                      : 'bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-zinc-300 hover:text-white'
+                      : 'bg-[#16171a] hover:bg-[#282a2f] border-white/[0.08] text-zinc-300 hover:text-white'
                   }`}
                 >
                   <Pin className="w-3.5 h-3.5" />
@@ -287,16 +700,19 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 </button>
 
                 <button
+                  type="button"
                   onClick={handleExportMarkdown}
-                  className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-xs text-zinc-200 hover:text-white flex items-center gap-1.5 transition-colors"
+                  className="h-7 px-2.5 bg-[#16171a] hover:bg-[#282a2f] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
                 >
                   <Download className="w-3.5 h-3.5 text-[#1d8cf8]" />
                   <span>Markdown (.md)</span>
                 </button>
 
                 <button
+                  type="button"
                   onClick={() => handleDeleteDoc(selectedDoc.id)}
-                  className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 border border-white/[0.06] text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
+                  className="w-7 h-7 bg-[#16171a] hover:bg-red-500/20 border border-white/[0.08] text-zinc-400 hover:text-red-400 flex items-center justify-center transition-colors"
+                  title="Dokument löschen"
                 >
                   <Trash2 className="w-3.5 h-3.5" />
                 </button>
@@ -308,14 +724,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <button
                 type="button"
                 onClick={() => setShowIconPicker((prev) => !prev)}
-                className="w-12 h-12 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors"
+                className="w-10 h-10 bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xl flex items-center justify-center flex-shrink-0 transition-colors"
                 title="Icon ändern"
               >
                 {selectedDoc.icon}
               </button>
 
               {showIconPicker && (
-                <div className="absolute top-14 left-0 z-20 p-2.5 bg-[#222428] border border-white/[0.12] flex flex-wrap gap-1 w-64">
+                <div className="absolute top-12 left-0 z-20 p-2.5 bg-[#222428] border border-white/[0.12] flex flex-wrap gap-1 w-64 shadow-xl">
                   {ICONS.map((ic) => (
                     <button
                       key={ic}
@@ -324,7 +740,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         persistDocument({ ...selectedDoc, icon: ic });
                         setShowIconPicker(false);
                       }}
-                      className="w-9 h-9 rounded-full hover:bg-[#2b2d33] text-lg flex items-center justify-center transition-colors"
+                      className="w-8 h-8 hover:bg-[#2b2d33] text-base flex items-center justify-center transition-colors"
                     >
                       {ic}
                     </button>
@@ -337,7 +753,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 value={selectedDoc.title}
                 onChange={(e) => persistDocument({ ...selectedDoc, title: e.target.value })}
                 placeholder="Dokument-Titel…"
-                className="w-full bg-transparent text-2xl sm:text-3xl font-bold text-white focus:outline-none"
+                className="w-full bg-transparent text-xl sm:text-2xl font-bold text-white focus:outline-none"
               />
             </div>
 
@@ -353,7 +769,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         value={block.content}
                         onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                         placeholder="Überschrift 1…"
-                        className="w-full bg-transparent text-2xl font-bold text-white focus:outline-none py-1"
+                        className="w-full bg-transparent text-xl font-bold text-white focus:outline-none py-1"
                       />
                     )}
 
@@ -363,7 +779,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         value={block.content}
                         onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                         placeholder="Abschnitts-Überschrift…"
-                        className="w-full bg-transparent text-lg font-semibold text-[#1d8cf8] focus:outline-none pt-2 pb-1"
+                        className="w-full bg-transparent text-base font-semibold text-[#1d8cf8] focus:outline-none pt-2 pb-1"
                       />
                     )}
 
@@ -373,24 +789,24 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         value={block.content}
                         onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                         placeholder="Text schreiben…"
-                        className="w-full bg-transparent text-sm sm:text-base text-zinc-200 leading-relaxed focus:outline-none resize-none font-normal"
+                        className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 leading-relaxed focus:outline-none resize-none font-normal"
                       />
                     )}
 
                     {block.type === 'todo' && (
-                      <div className="flex items-center gap-3 py-1">
+                      <div className="flex items-center gap-2.5 py-1">
                         <input
                           type="checkbox"
                           checked={!!block.checked}
                           onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
-                          className="w-4 h-4 accent-[#1d8cf8] cursor-pointer"
+                          className="w-3.5 h-3.5 accent-[#1d8cf8] cursor-pointer"
                         />
                         <input
                           type="text"
                           value={block.content}
                           onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                           placeholder="To-Do Punkt…"
-                          className={`w-full bg-transparent text-sm sm:text-base focus:outline-none ${
+                          className={`w-full bg-transparent text-xs sm:text-sm focus:outline-none ${
                             block.checked ? 'line-through text-zinc-500' : 'text-white'
                           }`}
                         />
@@ -398,33 +814,33 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     )}
 
                     {block.type === 'bullet' && (
-                      <div className="flex items-center gap-3 py-0.5">
+                      <div className="flex items-center gap-2.5 py-0.5">
                         <span className="w-1.5 h-1.5 bg-[#1d8cf8] flex-shrink-0" />
                         <input
                           type="text"
                           value={block.content}
                           onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                           placeholder="Listenpunkt…"
-                          className="w-full bg-transparent text-sm sm:text-base text-zinc-200 focus:outline-none"
+                          className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 focus:outline-none"
                         />
                       </div>
                     )}
 
                     {block.type === 'callout' && (
-                      <div className="p-3 bg-[#16171a] border border-[#1d8cf8]/40 flex items-start gap-2.5">
+                      <div className="p-2.5 bg-[#16171a] border border-[#1d8cf8]/40 flex items-start gap-2">
-                        <Sparkles className="w-4 h-4 text-[#1d8cf8] flex-shrink-0 mt-0.5" />
+                        <Sparkles className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0 mt-0.5" />
                         <textarea
                           rows={2}
                           value={block.content}
                           onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                           placeholder="Wichtiger Hinweis oder Zusammenfassung…"
-                          className="w-full bg-transparent text-sm text-zinc-200 focus:outline-none resize-none"
+                          className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 focus:outline-none resize-none"
                         />
                       </div>
                     )}
 
                     {block.type === 'code' && (
-                      <div className="p-3 bg-[#16171a] border border-white/[0.08] font-mono text-xs sm:text-sm text-zinc-200">
+                      <div className="p-2.5 bg-[#16171a] border border-white/[0.08] font-mono text-xs text-zinc-200">
                         <textarea
                           rows={Math.max(2, block.content.split('\n').length)}
                           value={block.content}
@@ -437,30 +853,30 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                   </div>
 
                   {/* Block Reorder & Delete Controls */}
-                  <div className="opacity-0 group-hover:opacity-100 flex items-center gap-1 transition-opacity pt-1">
+                  <div className="opacity-0 group-hover:opacity-100 flex items-center gap-0.5 transition-opacity pt-1">
                     <button
                       type="button"
                       onClick={() => moveBlock(idx, -1)}
-                      className="p-1 rounded-full hover:bg-[#2b2d33] text-zinc-400 hover:text-white transition-colors"
+                      className="p-1 hover:bg-[#282a2f] text-zinc-400 hover:text-white transition-colors"
                       title="Nach oben"
                     >
-                      <ArrowUp className="w-3.5 h-3.5" />
+                      <ArrowUp className="w-3 h-3" />
                     </button>
                     <button
                       type="button"
                       onClick={() => moveBlock(idx, 1)}
-                      className="p-1 rounded-full hover:bg-[#2b2d33] text-zinc-400 hover:text-white transition-colors"
+                      className="p-1 hover:bg-[#282a2f] text-zinc-400 hover:text-white transition-colors"
                       title="Nach unten"
                     >
-                      <ArrowDown className="w-3.5 h-3.5" />
+                      <ArrowDown className="w-3 h-3" />
                     </button>
                     <button
                       type="button"
                       onClick={() => removeBlock(block.id)}
-                      className="p-1 rounded-full hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] transition-colors"
+                      className="p-1 hover:bg-red-500/20 text-zinc-400 hover:text-red-400 transition-colors"
                       title="Block entfernen"
                     >
-                      <Trash2 className="w-3.5 h-3.5" />
+                      <Trash2 className="w-3 h-3" />
                     </button>
                   </div>
                 </div>
@@ -469,68 +885,68 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
             {/* Add Block Toolbar */}
             <div className="mt-4 pt-3 border-t border-white/[0.06] flex flex-wrap items-center gap-1.5">
-              <span className="text-xs text-zinc-400 mr-1">+ Block einfügen:</span>
+              <span className="text-xs text-zinc-400 mr-1">+ Block:</span>
 
               <button
                 type="button"
                 onClick={() => addBlock('paragraph')}
-                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
-                <AlignLeft className="w-3.5 h-3.5 text-[#1d8cf8]" /> Text
+                <AlignLeft className="w-3 h-3 text-[#1d8cf8]" /> Text
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('h2')}
-                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
-                <Heading2 className="w-3.5 h-3.5 text-[#1d8cf8]" /> Überschrift
+                <Heading2 className="w-3 h-3 text-[#1d8cf8]" /> Überschrift
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('todo')}
-                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
-                <CheckSquare className="w-3.5 h-3.5 text-[#1d8cf8]" /> Checkliste
+                <CheckSquare className="w-3 h-3 text-[#1d8cf8]" /> To-Do
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('bullet')}
-                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
-                <List className="w-3.5 h-3.5 text-[#1d8cf8]" /> Aufzählung
+                <List className="w-3 h-3 text-[#1d8cf8]" /> Liste
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('callout')}
-                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
-                <Sparkles className="w-3.5 h-3.5 text-[#1d8cf8]" /> Callout
+                <Sparkles className="w-3 h-3 text-[#1d8cf8]" /> Callout
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('code')}
-                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
-                <Code className="w-3.5 h-3.5 text-[#1d8cf8]" /> Codeblock
+                <Code className="w-3 h-3 text-[#1d8cf8]" /> Code
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('h1')}
-                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
-                <Heading1 className="w-3.5 h-3.5 text-[#1d8cf8]" /> H1
+                <Heading1 className="w-3 h-3 text-[#1d8cf8]" /> H1
               </button>
             </div>
           </div>
         ) : (
-          <div className="p-8 bg-[#222428] border border-white/[0.08] text-center text-zinc-400">
+          <div className="p-8 bg-[#222428] border border-white/[0.08] text-center text-zinc-400 text-xs">
-            Wähle links ein Dokument aus oder erstelle ein neues Projekt.
+            Wähle links eine Datei im Datei-Explorer aus oder erstelle eine neue Datei.
           </div>
         )}
       </div>