fix: keep tree structure in multi-select, checkbox+chevron, separate toggle/expand

This commit is contained in:
Agent Zero
2026-07-28 12:37:04 +02:00
parent 04bd5b1c09
commit 7194240a32
@@ -163,10 +163,11 @@ function FolderTreeItem({
return ( return (
<div> <div>
<div className="flex items-center" style={{ paddingLeft: multiSelectMode ? 8 : depth * 12 + 8 }}> <div className="flex items-center" style={{ paddingLeft: depth * 12 + 8 }}>
<div <div
draggable draggable={!multiSelectMode}
onDragStart={(e) => { onDragStart={(e) => {
if (multiSelectMode) return;
e.dataTransfer.setData('text/folder-id', node.id); e.dataTransfer.setData('text/folder-id', node.id);
e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.effectAllowed = 'move';
}} }}
@@ -192,13 +193,21 @@ function FolderTreeItem({
}} }}
> >
{multiSelectMode ? ( {multiSelectMode ? (
<input <>
type="checkbox" <input
checked={isChecked} type="checkbox"
onChange={() => onToggleMultiSelect?.(node.id)} checked={isChecked}
onClick={(e) => e.stopPropagation()} onChange={() => onToggleMultiSelect?.(node.id)}
className="w-3.5 h-3.5 rounded border-secondary-300 text-primary-600 focus:ring-primary-500 flex-shrink-0 cursor-pointer" onClick={(e) => e.stopPropagation()}
/> className="w-3.5 h-3.5 rounded border-secondary-300 text-primary-600 focus:ring-primary-500 flex-shrink-0 cursor-pointer"
/>
<span
onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }}
className="flex-shrink-0 cursor-pointer"
>
{chevron(expanded)}
</span>
</>
) : ( ) : (
chevron(expanded) chevron(expanded)
)} )}
@@ -221,24 +230,7 @@ function FolderTreeItem({
)} )}
</div> </div>
{expanded && !multiSelectMode && node.children.map((child) => ( {expanded && node.children.map((child) => (
<FolderTreeItem
key={child.id}
node={child}
depth={depth + 1}
selectedFilter={selectedFilter}
onSelectFolder={onSelectFolder}
onMoreClick={onMoreClick}
isDragOver={false}
onDragOver={onDragOver}
onDragLeave={onDragLeave}
onDrop={onDrop}
multiSelectMode={multiSelectMode}
multiSelectedFolders={multiSelectedFolders}
onToggleMultiSelect={onToggleMultiSelect}
/>
))}
{multiSelectMode && node.children.map((child) => (
<FolderTreeItem <FolderTreeItem
key={child.id} key={child.id}
node={child} node={child}