feat(file-manager): add subtree selection, open gesture, and parent-dir drop forwarding

- Folder rows now surface a tri-state checkbox derived from descendant selection;
  clicking / shift-clicking / toggling a folder flips the entire subtree in one
  gesture, including descendants of a collapsed folder.
- Files get a new onOpen prop, fired on double-click and Enter; directories keep
  expanding/collapsing. The resources page wires it to the existing download flow.
- Drop on a file row forwards to its parent folder so the whole folder acts as a
  single drop zone (Finder/Explorer semantics), with a shared drag-enter counter
  so highlight stays stable when moving the cursor between sibling rows.
- Extract pure data layer into useFileManagerData and pure selection reducers
  (computeRowClickSelection / computeToggleSelection / computeToggleSelectAll /
  computeDirSelectionState) into file-manager-utils; bundle per-tree row props
  into display / handlers so memoized rows stay reference-stable across parent
  re-renders, keyboard expansion, and selection changes.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: sirozha

frontend/src/components/file-manager/file-manager-row.tsx

@@ -19,49 +19,95 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { cn } from '@/lib/utils';
 
-import type { FileManagerAction, FileManagerInternalNode } from './file-manager-types';
+import type { FileManagerAction, FileManagerInternalNode, FileNode } from './file-manager-types';
 import type { FileManagerNodeDndHandlers } from './use-file-manager-dnd';
 
 import { FileManagerHighlightedName } from './file-manager-highlighted-name';
 import { getFileTypeIcon } from './file-manager-icons';
 import { formatModified as defaultFormatModified, formatFileSize } from './file-manager-utils';
 
 /**
- * Marker on every interactive child of the row that should NOT bubble into a row click.
- * Detected via `closest()` in the row's click handler — descendants don't need to call
- * `event.stopPropagation()` themselves.
+ * Marker on every interactive child of the row that should NOT bubble into a row
+ * click or double-click. Detected via `closest()` in the row's handlers — descendants
+ * don't need to call `event.stopPropagation()` themselves.
  */
 const SKIP_ROW_CLICK_ATTR = 'data-fm-skip-row-click';
 const skipRowClickProps = { [SKIP_ROW_CLICK_ATTR]: '' };
 
-interface FileManagerRowProps {
-    actions: readonly FileManagerAction[];
-    activeRowPath: null | string;
-    /** Drag/drop handlers for this row. `null` when intra-tree DnD is disabled. */
-    dnd: FileManagerNodeDndHandlers | null;
-    file: FileManagerInternalNode;
+/**
+ * Layout/visibility/i18n props that are identical for every row in the tree.
+ * `FileManager` builds this object once with `useMemo` so memoized rows do not
+ * have to compare seven separate primitives on every parent re-render — a single
+ * reference check is enough.
+ */
+export interface FileManagerRowDisplay {
     formatModified?: (modifiedAt: Date | string | undefined) => string;
     gridTemplate: string;
     hasActions: boolean;
     isCheckboxVisible: boolean;
-    isExpanded: boolean;
     isModifiedVisible: boolean;
-    isSelected: boolean;
     isSizeVisible: boolean;
-    onClick: (event: ReactMouseEvent, path: string) => void;
+    searchQuery?: string;
+}
+
+/**
+ * Stable callback bundle shared by every row. All handlers are produced by
+ * hooks that go through the latest-ref pattern, so this object is built once
+ * and never invalidates the row memo.
+ */
+export interface FileManagerRowHandlers {
+    onClick: (event: ReactMouseEvent, path: string, subtreePaths?: readonly string[]) => void;
     onFocusRow: (path: string) => void;
-    onToggleCheckbox: (path: string) => void;
+    onOpen?: (file: FileNode) => void;
     onToggleExpand: (path: string, wasExpanded: boolean) => void;
+    /**
+     * Polymorphic selection toggle: file rows pass just `path`, directory rows
+     * pass the precomputed subtree so the whole branch flips in one gesture.
+     */
+    onToggleSelection: (path: string, subtreePaths?: readonly string[]) => void;
+}
+
+interface FileManagerRowProps {
+    actions: readonly FileManagerAction[];
+    activeRowPath: null | string;
+    /**
+     * Tri-state checkbox value for directory rows (`true`, `false`, `'indeterminate'`).
+     * `undefined` for file rows — files fall back to `isSelected`.
+     */
+    dirCheckboxState?: 'indeterminate' | boolean;
+    /**
+     * Pre-computed list of every selectable path in the directory's subtree
+     * (the directory itself plus all descendants). `undefined` for files.
+     * Captured by the directory-checkbox click handler so a single gesture
+     * flips the entire branch.
+     */
+    dirSubtreePaths?: readonly string[];
+    /** Per-tree shared layout / i18n bundle (one stable reference). */
+    display: FileManagerRowDisplay;
+    /** Drag/drop handlers for this row. `null` when intra-tree DnD is disabled. */
+    dnd: FileManagerNodeDndHandlers | null;
+    file: FileManagerInternalNode;
+    /** Per-tree shared callback bundle (one stable reference). */
+    handlers: FileManagerRowHandlers;
+    isExpanded: boolean;
+    isSelected: boolean;
     /** 1-based position of the row inside its parent's child list (for `aria-posinset`). */
     posInSet: number;
-    searchQuery?: string;
     /** Total number of siblings the row is part of (for `aria-setsize`). */
     setSize: number;
 }
 
-/** Returns `true` when the click originated from an element opted-out of row activation. */
+/**
+ * Returns `true` when the click originated from an element opted-out of row activation.
+ *
+ * `Element` (not `HTMLElement`) is the correct guard: `<svg>` and its children
+ * (`<path>` etc.) are `SVGElement`s, which do NOT extend `HTMLElement` even
+ * though they share the `Element.closest()` API. Using `HTMLElement` here would
+ * make a click on the actual painted pixels of an icon (chevron, action button
+ * icon, …) bypass the skip-marker check and re-trigger row selection.
+ */
 const isClickInsideSkipZone = (target: EventTarget | null): boolean =>
-    target instanceof HTMLElement && !!target.closest(`[${SKIP_ROW_CLICK_ATTR}]`);
+    target instanceof Element && !!target.closest(`[${SKIP_ROW_CLICK_ATTR}]`);
 
 const buildVisibleActions = (
     actions: readonly FileManagerAction[],
@@ -71,24 +117,28 @@ const buildVisibleActions = (
 const FileManagerRowImpl = ({
     actions,
     activeRowPath,
+    dirCheckboxState,
+    dirSubtreePaths,
+    display,
     dnd,
     file,
-    formatModified = defaultFormatModified,
-    gridTemplate,
-    hasActions,
-    isCheckboxVisible,
+    handlers,
     isExpanded,
-    isModifiedVisible,
     isSelected,
-    isSizeVisible,
-    onClick,
-    onFocusRow,
-    onToggleCheckbox,
-    onToggleExpand,
     posInSet,
-    searchQuery,
     setSize,
 }: FileManagerRowProps) => {
+    const {
+        formatModified = defaultFormatModified,
+        gridTemplate,
+        hasActions,
+        isCheckboxVisible,
+        isModifiedVisible,
+        isSizeVisible,
+        searchQuery,
+    } = display;
+    const { onClick, onFocusRow, onOpen, onToggleExpand, onToggleSelection } = handlers;
+
     const { icon: Icon, tone } = useMemo(
         () =>
             file.groupIcon
@@ -104,11 +154,34 @@ const FileManagerRowImpl = ({
             return;
         }
 
+        // Hand the precomputed subtree paths to the selection hook for directory
+        // rows: a plain or `Cmd`/`Ctrl`+click on a folder then operates on the
+        // entire branch — including descendants of a collapsed folder — instead
+        // of just the folder's own path.
+        onClick(event, file.path, file.isDir ? dirSubtreePaths : undefined);
+    };
+
+    // Double-click is the row's "open" gesture. For directories it expands or
+    // collapses (decoupling expansion from the single click keeps `Shift`/`Cmd`+click
+    // pure selection gestures and matches Finder/Explorer). For files it forwards
+    // to `onOpen` — typically wired to download / preview / open-in-tab. The
+    // chevron icon and arrow keys remain alternative ways to expand without selecting.
+    const handleRowDoubleClick = (event: ReactMouseEvent) => {
+        if (isClickInsideSkipZone(event.target)) {
+            return;
+        }
+
         if (file.isDir) {
+            event.preventDefault();
             onToggleExpand(file.path, isExpanded);
+
+            return;
         }
 
-        onClick(event, file.path);
+        if (onOpen) {
+            event.preventDefault();
+            onOpen(file);
+        }
     };
 
     const renderActionItem = (
@@ -189,6 +262,9 @@ const FileManagerRowImpl = ({
             className={cn(
                 'group hover:bg-accent grid cursor-pointer items-center gap-3 px-3 py-1.5 transition-colors outline-none',
                 'focus-visible:bg-muted/70 focus-visible:ring-ring focus-visible:ring-1',
+                // `select-none` keeps double-click reserved for expand/collapse
+                // — without it the browser would highlight the row's text on dblclick.
+                'select-none',
                 isSelected && 'bg-muted',
                 isDropTarget && 'bg-primary/10 ring-primary/40 ring-1 ring-inset',
                 // Ghost every row that's part of the in-flight drag (the grabbed row
@@ -205,6 +281,7 @@ const FileManagerRowImpl = ({
             data-path={file.path}
             draggable={isDraggable}
             onClick={handleRowClick}
+            onDoubleClick={handleRowDoubleClick}
             onDragEnd={dnd?.onDragEnd}
             onDragEnter={dnd?.onDragEnter}
             onDragLeave={dnd?.onDragLeave}
@@ -223,8 +300,15 @@ const FileManagerRowImpl = ({
                 >
                     <Checkbox
                         aria-label={`Select ${file.name}`}
-                        checked={isSelected}
-                        onCheckedChange={() => onToggleCheckbox(file.path)}
+                        // Directories surface a tri-state value derived from their
+                        // descendants; files (and edge cases without a precomputed
+                        // value) fall back to the row's own selection flag.
+                        checked={file.isDir ? (dirCheckboxState ?? isSelected) : isSelected}
+                        // For folders we hand the precomputed subtree to the
+                        // selection hook so one gesture flips the entire branch
+                        // (the directory itself + every descendant); files just
+                        // toggle their own path.
+                        onCheckedChange={() => onToggleSelection(file.path, file.isDir ? dirSubtreePaths : undefined)}
                     />
                 </span>
             ) : (
@@ -238,7 +322,7 @@ const FileManagerRowImpl = ({
                 {Array.from({ length: file.depth }, (_, i) => (
                     <span
                         aria-hidden="true"
-                        className="bg-border pointer-events-none absolute -inset-y-1.5 w-px"
+                        className="bg-border pointer-events-none absolute -inset-y-1.75 w-px"
                         key={i}
                         style={{ left: `${i * 16 + 6}px` }}
                     />

frontend/src/components/file-manager/file-manager-tree-node.tsx

@@ -1,5 +1,6 @@
-import { Fragment, type MouseEvent as ReactMouseEvent } from 'react';
+import { Fragment } from 'react';
 
+import type { FileManagerRowDisplay, FileManagerRowHandlers } from './file-manager-row';
 import type { FileManagerAction, FileManagerInternalNode } from './file-manager-types';
 import type { FileManagerNodeDndHandlers } from './use-file-manager-dnd';
 
@@ -10,22 +11,19 @@ interface FileManagerTreeNodeProps {
     activeRowPath: null | string;
     /** Returns drag/drop handlers for a node, or `null` when DnD is disabled. */
     bindNodeDnd: (node: FileManagerInternalNode) => FileManagerNodeDndHandlers | null;
+    /** Pre-computed tri-state value per directory path; missing entries default to `false`. */
+    dirSelectionStates: ReadonlyMap<string, 'indeterminate' | boolean>;
+    /** Pre-computed subtree paths per directory path (the dir itself + descendants). */
+    dirSubtreePaths: ReadonlyMap<string, readonly string[]>;
+    /** Per-tree shared layout / i18n bundle. Forwarded as-is to every row. */
+    display: FileManagerRowDisplay;
     expandedPaths: Set<string>;
-    formatModified?: (modifiedAt: Date | string | undefined) => string;
-    gridTemplate: string;
-    hasActions: boolean;
-    isCheckboxVisible: boolean;
-    isModifiedVisible: boolean;
-    isSizeVisible: boolean;
+    /** Per-tree shared callback bundle. Forwarded as-is to every row. */
+    handlers: FileManagerRowHandlers;
     node: FileManagerInternalNode;
-    onClick: (event: ReactMouseEvent, path: string) => void;
-    onFocusRow: (path: string) => void;
-    onToggleCheckbox: (path: string) => void;
-    onToggleExpand: (path: string, wasExpanded: boolean) => void;
     /** 1-based position of the node inside its parent's child list (for `aria-posinset`). */
     posInSet: number;
-    searchQuery?: string;
-    selectedPaths: Set<string>;
+    selectedPaths: ReadonlySet<string>;
     /** Total number of siblings the node is part of (for `aria-setsize`). */
     setSize: number;
 }
@@ -40,20 +38,13 @@ export const FileManagerTreeNode = ({
     actions,
     activeRowPath,
     bindNodeDnd,
+    dirSelectionStates,
+    dirSubtreePaths,
+    display,
     expandedPaths,
-    formatModified,
-    gridTemplate,
-    hasActions,
-    isCheckboxVisible,
-    isModifiedVisible,
-    isSizeVisible,
+    handlers,
     node,
-    onClick,
-    onFocusRow,
-    onToggleCheckbox,
-    onToggleExpand,
     posInSet,
-    searchQuery,
     selectedPaths,
     setSize,
 }: FileManagerTreeNodeProps) => {
@@ -62,27 +53,28 @@ export const FileManagerTreeNode = ({
     const renderChildren = node.isDir && isExpanded && node.children.length > 0;
     const dnd = bindNodeDnd(node);
 
+    // Pre-resolve tri-state + subtree paths per row: keeping the lookup outside
+    // the memoized `FileManagerRow` lets each row receive primitive/stable props
+    // (`'indeterminate' | true | false | undefined` plus a `Map`-stored array
+    // reference) so a selection change only re-renders the rows whose computed
+    // state actually flipped.
+    const dirCheckboxState = node.isDir ? (dirSelectionStates.get(node.path) ?? false) : undefined;
+    const subtreePaths = node.isDir ? dirSubtreePaths.get(node.path) : undefined;
+
     return (
         <Fragment>
             <FileManagerRow
                 actions={actions}
                 activeRowPath={activeRowPath}
+                dirCheckboxState={dirCheckboxState}
+                dirSubtreePaths={subtreePaths}
+                display={display}
                 dnd={dnd}
                 file={node}
-                formatModified={formatModified}
-                gridTemplate={gridTemplate}
-                hasActions={hasActions}
-                isCheckboxVisible={isCheckboxVisible && !node.isGroupRoot}
+                handlers={handlers}
                 isExpanded={isExpanded}
-                isModifiedVisible={isModifiedVisible}
                 isSelected={isSelected}
-                isSizeVisible={isSizeVisible}
-                onClick={onClick}
-                onFocusRow={onFocusRow}
-                onToggleCheckbox={onToggleCheckbox}
-                onToggleExpand={onToggleExpand}
                 posInSet={posInSet}
-                searchQuery={searchQuery}
                 setSize={setSize}
             />
             {renderChildren &&
@@ -91,21 +83,14 @@ export const FileManagerTreeNode = ({
                         actions={actions}
                         activeRowPath={activeRowPath}
                         bindNodeDnd={bindNodeDnd}
+                        dirSelectionStates={dirSelectionStates}
+                        dirSubtreePaths={dirSubtreePaths}
+                        display={display}
                         expandedPaths={expandedPaths}
-                        formatModified={formatModified}
-                        gridTemplate={gridTemplate}
-                        hasActions={hasActions}
-                        isCheckboxVisible={isCheckboxVisible}
-                        isModifiedVisible={isModifiedVisible}
-                        isSizeVisible={isSizeVisible}
+                        handlers={handlers}
                         key={child.id}
                         node={child}
-                        onClick={onClick}
-                        onFocusRow={onFocusRow}
-                        onToggleCheckbox={onToggleCheckbox}
-                        onToggleExpand={onToggleExpand}
                         posInSet={index + 1}
-                        searchQuery={searchQuery}
                         selectedPaths={selectedPaths}
                         setSize={node.children.length}
                     />

frontend/src/components/file-manager/file-manager-types.ts

@@ -100,15 +100,26 @@ export interface FileManagerProps {
      * the data (or rely on subscriptions) so the new positions become visible.
      */
     onMoveItems?: (sources: FileNode[], destinationDir: string) => Promise<void> | void;
+    /**
+     * Fired when the user "opens" a *file* row via double-click or `Enter`. Directories
+     * are not passed through this callback; they always toggle expand/collapse on
+     * activation, mirroring Finder/Explorer semantics.
+     *
+     * Use it to wire downloads, in-app previews, or open-in-tab behavior.
+     */
+    onOpen?: (file: FileNode) => void;
     /**
      * Fires whenever the multi-selection changes. Use it from selection-only
      * flows (e.g. resource pickers) where the parent owns its own confirm button
      * and needs to know which items are currently checked.
      *
      * The supplied callback is read through a ref, so it does not need to be
      * memoized — only meaningful selection changes will trigger it.
+     *
+     * The Set is owned by the manager and must be treated as read-only —
+     * mutating it will desync the manager's internal state.
      */
-    onSelectionChange?: (selectedPaths: Set<string>) => void;
+    onSelectionChange?: (selectedPaths: ReadonlySet<string>) => void;
     /** Synthetic top-level groups (e.g. Uploads / Container). When omitted, root is flat. */
     rootGroups?: FileManagerRootGroup[];
     /** Search query and matching empty state. Provide `query` to enable filtering. */