feat: drag&drop treeview, flat chat UI, activity indicator, fixed toolbar registration

2026-07-17 17:09:26 +02:00
parent 70b8a66fd4
commit f2d624720f
3 changed files with 105 additions and 106 deletions
@@ -22,32 +22,21 @@ interface TreeNode {
 function buildTree(folders: ChatFolder[], sessions: ChatSession[]): TreeNode[] {
  const rootSessions = sessions.filter((s) => !s.folder_id);
  const root: TreeNode = { folder: null, sessions: rootSessions, children: [] };
-
  const folderMap = new Map<string, TreeNode>();
-  for (const f of folders) {
-    folderMap.set(f.id, { folder: f, sessions: [], children: [] });
-  }
-
+  for (const f of folders) folderMap.set(f.id, { folder: f, sessions: [], children: [] });
  for (const f of folders) {
    const node = folderMap.get(f.id)!;
-    if (f.parent_id && folderMap.has(f.parent_id)) {
-      folderMap.get(f.parent_id)!.children.push(node);
-    } else {
-      root.children.push(node);
-    }
+    if (f.parent_id && folderMap.has(f.parent_id)) folderMap.get(f.parent_id)!.children.push(node);
+    else root.children.push(node);
  }
-
  for (const s of sessions) {
-    if (s.folder_id && folderMap.has(s.folder_id)) {
-      folderMap.get(s.folder_id)!.sessions.push(s);
-    }
+    if (s.folder_id && folderMap.has(s.folder_id)) folderMap.get(s.folder_id)!.sessions.push(s);
  }
-
  return [root];
 }

 function TreeItem({
-  node, activeSessionId, onSelectSession, depth, onMoveSession, onDeleteFolder, onAddFolder,
+  node, activeSessionId, onSelectSession, depth, onMoveSession, onDeleteFolder, onAddFolder, onDragSession, onDropToFolder,
 }: {
  node: TreeNode;
  activeSessionId: string | null;
@@ -56,16 +45,25 @@ function TreeItem({
  onMoveSession: (sessionId: string, folderId: string | null) => void;
  onDeleteFolder: (folderId: string) => void;
  onAddFolder: (parentId: string | null) => void;
+  onDragSession: (sessionId: string) => void;
+  onDropToFolder: (folderId: string | null) => void;
 }) {
  const [expanded, setExpanded] = useState(true);
+  const [isDragOver, setIsDragOver] = useState(false);
  const isRoot = node.folder === null;

  return (
-    <div>
-      {/* Folder header */}
+    <div
+      onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
+      onDragLeave={() => setIsDragOver(false)}
+      onDrop={(e) => { e.preventDefault(); setIsDragOver(false); onDropToFolder(node.folder?.id || null); }}
+    >
      {!isRoot && (
        <div
-          className="group flex items-center gap-1 px-2 py-1.5 text-sm font-medium text-secondary-700 hover:bg-secondary-100 rounded-md cursor-pointer"
+          className={clsx(
+            'group flex items-center gap-1 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer',
+            isDragOver ? 'bg-primary-100 ring-1 ring-primary-300' : 'text-secondary-700 hover:bg-secondary-100'
+          )}
          style={{ paddingLeft: depth * 12 + 8 }}
          onClick={() => setExpanded(!expanded)}
        >
@@ -76,29 +74,21 @@ function TreeItem({
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
          </svg>
          <span className="flex-1 truncate">{node.folder!.name}</span>
-          <button
-            onClick={(e) => { e.stopPropagation(); onAddFolder(node.folder!.id); }}
-            className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-primary-600"
-            title="Unterordner"
-          >+</button>
-          <button
-            onClick={(e) => { e.stopPropagation(); onDeleteFolder(node.folder!.id); }}
-            className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600"
-            title="Löschen"
-          >✕</button>
+          <button onClick={(e) => { e.stopPropagation(); onAddFolder(node.folder!.id); }} className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-primary-600" title="Unterordner">+</button>
+          <button onClick={(e) => { e.stopPropagation(); onDeleteFolder(node.folder!.id); }} className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600" title="Löschen">✕</button>
        </div>
      )}
-
-      {/* Sessions in this folder */}
      {(isRoot || expanded) && (
        <div>
          {node.sessions.map((session) => (
            <div
              key={session.id}
+              draggable
+              onDragStart={() => onDragSession(session.id)}
              onClick={() => onSelectSession(session.id)}
              className={clsx(
                'group flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer rounded-md',
-                'hover:bg-secondary-100',
+                'hover:bg-secondary-100 active:cursor-grabbing',
                activeSessionId === session.id && 'bg-primary-100 text-primary-700'
              )}
              style={{ paddingLeft: depth * 12 + 24 }}
@@ -107,26 +97,11 @@ function TreeItem({
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h8M8 8h8m-8 4h8m-8 4h8" />
              </svg>
              <span className="flex-1 truncate">{session.title}</span>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  const folderId = node.folder?.id || null;
-                  onMoveSession(session.id, folderId ? null : 'root');
-                }}
-                className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-primary-600"
-                title="Verschieben"
-              >↦</button>
-              <button
-                onClick={(e) => { e.stopPropagation(); deleteSession(session.id).then(() => window.location.reload()); }}
-                className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600"
-                title="Löschen"
-              >✕</button>
+              <button onClick={(e) => { e.stopPropagation(); deleteSession(session.id).then(() => window.location.reload()); }} className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600" title="Löschen">✕</button>
            </div>
          ))}
        </div>
      )}
-
-      {/* Child folders */}
      {(isRoot || expanded) && node.children.map((child) => (
        <TreeItem
          key={child.folder!.id}
@@ -137,6 +112,8 @@ function TreeItem({
          onMoveSession={onMoveSession}
          onDeleteFolder={onDeleteFolder}
          onAddFolder={onAddFolder}
+          onDragSession={onDragSession}
+          onDropToFolder={onDropToFolder}
        />
      ))}
    </div>
@@ -148,22 +125,15 @@ export function SessionList({ activeSessionId, onSelectSession, isSidebar, class
  const [folders, setFolders] = useState<ChatFolder[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
+  const [dragSessionId, setDragSessionId] = useState<string | null>(null);

  const loadData = async () => {
    try {
      setLoading(true);
-      const [s, f] = await Promise.all([
-        fetchSessions(isSidebar ? true : undefined),
-        fetchFolders(),
-      ]);
-      setSessions(s);
-      setFolders(f);
-      setError(null);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to load');
-    } finally {
-      setLoading(false);
-    }
+      const [s, f] = await Promise.all([fetchSessions(isSidebar ? true : undefined), fetchFolders()]);
+      setSessions(s); setFolders(f); setError(null);
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to load'); }
+    finally { setLoading(false); }
  };

  useEffect(() => { loadData(); }, [isSidebar]);
@@ -171,19 +141,14 @@ export function SessionList({ activeSessionId, onSelectSession, isSidebar, class
  const handleNewChat = async () => {
    try {
      const session = await createSession({ is_sidebar: isSidebar || false });
-      setSessions((prev) => [session, ...prev]);
-      onSelectSession(session.id);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to create session');
-    }
+      setSessions((prev) => [session, ...prev]); onSelectSession(session.id);
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed'); }
  };

  const handleAddFolder = (parentId: string | null) => {
-    const name = prompt('Ordnername:');
+    const name = prompt('Ordnername:');;
    if (!name) return;
-    createFolder({ name, parent_id: parentId || undefined })
-      .then(() => loadData())
-      .catch((e) => setError(e?.message));
+    createFolder({ name, parent_id: parentId || undefined }).then(() => loadData()).catch((e) => setError(e?.message));
  };

  const handleDeleteFolder = (folderId: string) => {
@@ -191,14 +156,13 @@ export function SessionList({ activeSessionId, onSelectSession, isSidebar, class
    deleteFolder(folderId).then(() => loadData()).catch((e) => setError(e?.message));
  };

-  const handleMoveSession = async (sessionId: string, target: string) => {
-    const folderId = target === 'root' ? null : target;
+  const handleDropToFolder = async (folderId: string | null) => {
+    if (!dragSessionId) return;
    try {
-      await updateSession(sessionId, { folder_id: folderId });
+      await updateSession(dragSessionId, { folder_id: folderId });
+      setDragSessionId(null);
      loadData();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to move');
-    }
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to move'); }
  };

  if (loading) return <div className="p-4 text-sm text-secondary-400">Laden...</div>;
@@ -208,19 +172,8 @@ export function SessionList({ activeSessionId, onSelectSession, isSidebar, class
  return (
    <div className={clsx('flex flex-col h-full', className)}>
      <div className="p-3 border-b border-secondary-200 flex gap-2">
-        <button
-          onClick={handleNewChat}
-          className="flex-1 rounded-lg bg-primary-600 text-white px-3 py-2 text-sm font-medium hover:bg-primary-700"
-        >
-          + Neuer Chat
-        </button>
-        <button
-          onClick={() => handleAddFolder(null)}
-          className="rounded-lg border border-secondary-300 px-3 py-2 text-sm hover:bg-secondary-100"
-          title="Neuer Ordner"
-        >
-          📁+
-        </button>
+        <button onClick={handleNewChat} className="flex-1 rounded-lg bg-primary-600 text-white px-3 py-2 text-sm font-medium hover:bg-primary-700">+ Neuer Chat</button>
+        <button onClick={() => handleAddFolder(null)} className="rounded-lg border border-secondary-300 px-3 py-2 text-sm hover:bg-secondary-100" title="Neuer Ordner">📁+</button>
      </div>
      {error && <div className="p-2 text-xs text-red-600">{error}</div>}
      <div className="flex-1 overflow-y-auto p-2">
@@ -231,9 +184,11 @@ export function SessionList({ activeSessionId, onSelectSession, isSidebar, class
            activeSessionId={activeSessionId}
            onSelectSession={onSelectSession}
            depth={0}
-            onMoveSession={handleMoveSession}
+            onMoveSession={() => {}}
            onDeleteFolder={handleDeleteFolder}
            onAddFolder={handleAddFolder}
+            onDragSession={setDragSessionId}
+            onDropToFolder={handleDropToFolder}
          />
        ))}
      </div>