diff --git a/frontend/src/components/ai/SessionList.tsx b/frontend/src/components/ai/SessionList.tsx index 5313816..abc8652 100644 --- a/frontend/src/components/ai/SessionList.tsx +++ b/frontend/src/components/ai/SessionList.tsx @@ -50,18 +50,39 @@ function TreeItem({ const [expanded, setExpanded] = useState(true); const [isDragOver, setIsDragOver] = useState(false); const isRoot = node.folder === null; + const folderId = node.folder?.id || null; + + // Drop handler for this specific folder - stopPropagation so parent doesn't also fire + const handleDrop = (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragOver(false); + onDropToFolder(folderId); + }; + + const handleDragOver = (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragOver(true); + }; + + const handleDragLeave = (e: React.DragEvent) => { + e.stopPropagation(); + // Only clear if leaving to a non-child element + setIsDragOver(false); + }; return ( -
{ e.preventDefault(); setIsDragOver(true); }} - onDragLeave={() => setIsDragOver(false)} - onDrop={(e) => { e.preventDefault(); setIsDragOver(false); onDropToFolder(node.folder?.id || null); }} - > +
+ {/* Folder header - this is the drop target */} {!isRoot && (
setExpanded(!expanded)} @@ -77,17 +98,19 @@ function TreeItem({
)} + + {/* Sessions in this folder */} {(isRoot || expanded) && (
{node.sessions.map((session) => (
onDragSession(session.id)} + onDragStart={(e) => { e.stopPropagation(); 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 active:cursor-grabbing', + 'hover:bg-secondary-100', activeSessionId === session.id && 'bg-primary-100 text-primary-700' )} style={{ paddingLeft: depth * 12 + 24 }} @@ -101,6 +124,21 @@ function TreeItem({ ))}
)} + + {/* Root drop zone - only for root level, separate from sessions */} + {isRoot && ( +
+ )} + + {/* Child folders */} {(isRoot || expanded) && node.children.map((child) => (