feat(webui): merge file-manager folder/chevron into one hover toggle

The directory expand/collapse control now shows the folder icon by
default and crossfades to a chevron on hover (motion, reduced-motion
aware); the single element toggles expansion on click. Nesting indent
gains the icon->text gap (22px/level) so a child's icon lines up under
its parent's label, and the header expand-all control moves to the
shared Button. Folder and chevron share the text-blue-400 accent set on
the parent (header chevron picks it up on hover).

Also prunes ~46 restatement/justification comments and a dead
collectAllFilePaths export (plus its tests) to match the house style.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: sirozha

frontend/src/components/shared/file-manager/file-manager-actions.tsx

@@ -26,7 +26,6 @@ export const downloadAction = (
     };
 };
 
-/** Built-in copy-path action. */
 export const copyPathAction = (onCopyPath: (file: FileNode) => void): FileManagerAction => ({
     appliesToDirs: true,
     icon: ClipboardCopy,
@@ -48,14 +47,6 @@ export const deleteAction = (onDelete: (file: FileNode) => void): FileManagerAct
     separatorBefore: true,
 });
 
-// ── Bulk-action helpers ─────────────────────────────────────────────────────
-//
-// Each helper produces a `FileManagerBulkAction` with sensible defaults; the
-// caller passes any callback / config it needs and lets the bar handle the
-// rendering, confirmation and dedup. Mirrors the row-action helpers above so
-// consumers compose `bulkActions={[bulkXAction(...), bulkYAction(...)]}` the
-// same way they compose `actions={[xAction(...), yAction(...)]}`.
-
 interface BulkDeleteOptions {
     /** Confirm-dialog body formatter. Default: "This will delete N items. This action cannot be undone." */
     confirmDescription?: (countLabel: string) => string;
@@ -202,10 +193,6 @@ export const bulkDownloadAction = (
 
         const href = getDownloadHref(files);
 
-        // Trigger the download via a transient anchor so the browser respects
-        // the `download` attribute and the backend's `Content-Disposition`.
-        // `window.open` would do, but it can be blocked as a popup and doesn't
-        // honour the filename hint the same way.
         const anchor = document.createElement('a');
 
         anchor.href = href;

frontend/src/components/shared/file-manager/file-manager-bulk-actions-bar.tsx

@@ -60,9 +60,6 @@ export function FileManagerBulkActionsBar({
 }: FileManagerBulkActionsBarProps) {
     const [pendingAction, setPendingAction] = useState<FileManagerBulkAction | null>(null);
 
-    // Resolve the deduped FileNode[] once per render — every action callback,
-    // confirm-dialog title and isDisabled / isHidden predicate share it, so
-    // recomputing per call would be wasteful.
     const dedupedFiles = useMemo(() => {
         if (selectedPaths.size === 0) {
             return [];
@@ -89,9 +86,6 @@ export function FileManagerBulkActionsBar({
 
     const runAction = useCallback(
         async (action: FileManagerBulkAction) => {
-            // `dedupedFiles` is captured at click time — the state used by the
-            // bar at that moment matches what the host receives, even if the
-            // selection mutates while an async confirm is open.
             await action.onSelect(dedupedFiles);
         },
         [dedupedFiles],
@@ -215,11 +209,6 @@ export function FileManagerBulkActionsBar({
     );
 }
 
-/**
- * Inline button for a single non-overflow bulk action. Extracted so the icon-only
- * variant (no `label` text on narrow screens) can be added later without bloating
- * the parent's JSX.
- */
 function BulkActionButton({ action, isDisabled, onClick }: BulkActionButtonProps) {
     const Icon = action.icon as ComponentType<{ className?: string }> | undefined;
     const button = (
@@ -235,9 +224,6 @@ function BulkActionButton({ action, isDisabled, onClick }: BulkActionButtonProps
         </Button>
     );
 
-    // Tooltip surfaces the label when the inline text is hidden on narrow
-    // viewports (icon-only mode). On wider screens the label is already visible,
-    // so the tooltip is a harmless duplicate but still helps with keyboard focus.
     if (!action.icon) {
         return button;
     }

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

@@ -1,4 +1,5 @@
 import { ChevronRight, Ellipsis } from 'lucide-react';
+import { motion, type Transition, useReducedMotion, type Variants } from 'motion/react';
 import {
     type CSSProperties,
     memo,
@@ -44,6 +45,21 @@ import { formatModifiedRelative as defaultFormatModified, formatFileSize } from
 const SKIP_ROW_CLICK_ATTR = 'data-fm-skip-row-click';
 const skipRowClickProps = { [SKIP_ROW_CLICK_ATTR]: '' };
 
+// The `rest`/`hover` labels are set by the toggle's `whileHover` and reach both
+// icon layers via motion variant propagation — the layers declare no gesture of
+// their own.
+const ICON_SWAP_TRANSITION: Transition = { duration: 0.15, ease: 'easeOut' };
+const FOLDER_ICON_VARIANTS: Variants = {
+    hover: { opacity: 0, scale: 0.8 },
+    rest: { opacity: 1, scale: 1 },
+};
+const CHEVRON_ICON_VARIANTS: Variants = {
+    hover: { opacity: 1, scale: 1 },
+    rest: { opacity: 0, scale: 0.8 },
+};
+const FOLDER_ICON_VARIANTS_REDUCED: Variants = { hover: { opacity: 0 }, rest: { opacity: 1 } };
+const CHEVRON_ICON_VARIANTS_REDUCED: Variants = { hover: { opacity: 1 }, rest: { opacity: 0 } };
+
 /**
  * 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
@@ -190,6 +206,10 @@ function FileManagerRowImpl({
         [file.groupIcon, file.isDir, file.name, isExpanded],
     );
 
+    const prefersReducedMotion = useReducedMotion();
+    const folderIconVariants = prefersReducedMotion ? FOLDER_ICON_VARIANTS_REDUCED : FOLDER_ICON_VARIANTS;
+    const chevronIconVariants = prefersReducedMotion ? CHEVRON_ICON_VARIANTS_REDUCED : CHEVRON_ICON_VARIANTS;
+
     const visibleActions = useMemo(() => buildVisibleActions(actions, file), [actions, file]);
 
     const handleRowClick = (event: ReactMouseEvent) => {
@@ -219,9 +239,7 @@ function FileManagerRowImpl({
     // browsers can override this by passing `onOpenDirectory`, which gets called
     // instead — typical for drilling into a remote container directory by
     // replacing the listing rather than expanding inline. Files always forward
-    // to `onOpen` — typically wired to download / preview / open-in-tab. The
-    // chevron icon on the row's left edge always toggles expand/collapse for
-    // directories, regardless of `onOpenDirectory`.
+    // to `onOpen` — typically wired to download / preview / open-in-tab.
     const handleRowDoubleClick = (event: ReactMouseEvent) => {
         // Same React-tree-bubbling guard as `handleRowClick` — a double-click
         // on a portaled menu item must not be treated as a row "open" gesture
@@ -442,42 +460,52 @@ function FileManagerRowImpl({
                 />
             )}
 
-            <div className="relative flex min-w-0 items-center gap-1.5 self-stretch pl-[calc(var(--fm-depth)*16px)]">
+            <div className="relative flex min-w-0 items-center gap-1.5 self-stretch pl-[calc(var(--fm-depth)*22px)]">
                 {Array.from({ length: file.depth }, (_, i) => (
                     <span
                         aria-hidden="true"
                         className="bg-border pointer-events-none absolute -inset-y-1.75 w-px"
                         key={i}
-                        style={{ left: `${i * 16 + 6}px` }}
+                        style={{ left: `${i * 22 + 6}px` }}
                     />
                 ))}
                 {file.isDir ? (
-                    <span
+                    <motion.span
+                        animate="rest"
                         aria-hidden="true"
-                        className="text-muted-foreground hover:bg-muted -mx-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded transition-colors"
+                        className="relative -mx-0.5 inline-flex size-4 shrink-0 items-center justify-center text-blue-400"
+                        initial="rest"
                         onClick={() => {
-                            // Mirror the double-click / Enter semantics here so the
-                            // chevron stays consistent with the row-level "open"
-                            // gesture: navigation-style consumers (e.g. the remote
-                            // container browser) drill into the folder instead of
-                            // toggling expansion that has no children to show.
+                            // Mirror the double-click / Enter "open" gesture: navigation-style
+                            // consumers (e.g. the remote container browser) drill into the folder
+                            // via onOpenDirectory instead of toggling inline expansion.
                             if (onOpenDirectory) {
                                 onOpenDirectory(file);
                             } else {
                                 onToggleExpand(file.path, isExpanded);
                             }
                         }}
+                        whileHover="hover"
                         {...skipRowClickProps}
                     >
-                        <ChevronRight className={cn('size-3.5 transition-transform', isExpanded && 'rotate-90')} />
-                    </span>
+                        <motion.span
+                            className="absolute inset-0 flex items-center justify-center"
+                            transition={ICON_SWAP_TRANSITION}
+                            variants={folderIconVariants}
+                        >
+                            <Icon className="size-4 shrink-0" />
+                        </motion.span>
+                        <motion.span
+                            className="absolute inset-0 flex items-center justify-center"
+                            transition={ICON_SWAP_TRANSITION}
+                            variants={chevronIconVariants}
+                        >
+                            <ChevronRight className={cn('size-4 transition-transform', isExpanded && 'rotate-90')} />
+                        </motion.span>
+                    </motion.span>
                 ) : (
-                    <span
-                        aria-hidden="true"
-                        className="-mx-0.5 size-4 shrink-0"
-                    />
+                    <Icon className={cn('-mx-0.5 size-4 shrink-0', tone)} />
                 )}
-                <Icon className={cn('size-4 shrink-0', tone)} />
                 <FileManagerHighlightedName
                     className={cn('text-sm', file.isGroupRoot && 'font-semibold')}
                     name={file.name}

frontend/src/components/shared/file-manager/file-manager-skeleton.tsx

@@ -89,16 +89,8 @@ export function FileManagerSkeleton({
                                 />
                             )}
 
-                            <div className="flex min-w-0 items-center gap-1.5 pl-[calc(var(--fm-depth)*16px)]">
-                                {row.isDir ? (
-                                    <Skeleton className="-mx-0.5 size-4 shrink-0 rounded-sm" />
-                                ) : (
-                                    <span
-                                        aria-hidden="true"
-                                        className="-mx-0.5 size-4 shrink-0"
-                                    />
-                                )}
-                                <Skeleton className="size-4 shrink-0 rounded-sm" />
+                            <div className="flex min-w-0 items-center gap-1.5 pl-[calc(var(--fm-depth)*22px)]">
+                                <Skeleton className="-mx-0.5 size-4 shrink-0 rounded-sm" />
                                 <Skeleton className={cn('h-4', row.nameWidth)} />
                             </div>
 

frontend/src/components/shared/file-manager/file-manager-storage.ts

@@ -19,11 +19,6 @@ const fileManagerSortingSchema = z
     })
     .nullable();
 
-/**
- * Loader for the FileManager sort descriptor. Both "nothing stored" and
- * "stored as null" surface as `null` (no-sort) — the two cases are
- * indistinguishable from the consumer's point of view.
- */
 export const loadFileManagerSorting = (key: string): FileManagerSortState =>
     getStorageItem(key, fileManagerSortingSchema);
 

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

@@ -26,12 +26,6 @@ interface FileManagerTreeNodeProps {
     setSize: number;
 }
 
-/**
- * Recursive tree node renderer. The component itself is not memoized — `FileManagerRow`
- * is, which is where per-row reconciliation savings actually matter. Extracting the
- * recursion into a component (instead of an inline `renderNode` function) keeps
- * `FileManager` lean and gives React DevTools a real boundary to inspect.
- */
 export function FileManagerTreeNode({
     actions,
     activeRowPath,
@@ -51,11 +45,6 @@ export function 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;
 

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

@@ -34,7 +34,6 @@ export interface FileManagerAction {
     label: string;
     /** Triggered on item activation. Ignored when `getHref` is set. */
     onSelect: (file: FileNode) => void;
-    /** When true, separator is rendered before this action. */
     separatorBefore?: boolean;
     variant?: 'default' | 'destructive';
 }
@@ -118,7 +117,6 @@ export interface FileManagerEmptyAreaAction {
     id: string;
     label: string;
     onSelect: () => void;
-    /** When true, separator is rendered before this item. */
     separatorBefore?: boolean;
     variant?: 'default' | 'destructive';
 }

frontend/src/components/shared/file-manager/file-manager-utils.test.ts

@@ -8,7 +8,6 @@ import {
     buildFileManagerGridTemplate,
     buildFileManagerTree,
     clamp,
-    collectAllFilePaths,
     collectAllNodePaths,
     collectDirectoryPaths,
     collectSubtreePaths,
@@ -256,26 +255,6 @@ describe('buildFileManagerTree', () => {
     });
 });
 
-describe('collectAllFilePaths', () => {
-    it('returns only file paths (no directories, no group roots)', () => {
-        const tree = buildFileManagerTree(
-            [file('a/b.txt'), file('a/c.txt'), file('d/e.txt')],
-            [
-                { id: 'a', label: 'A', pathPrefix: 'a' },
-                { id: 'd', label: 'D', pathPrefix: 'd' },
-            ],
-        );
-
-        expect(collectAllFilePaths(tree).sort()).toEqual(['a/b.txt', 'a/c.txt', 'd/e.txt']);
-    });
-
-    it('omits synthetic intermediate directories from the result', () => {
-        const tree = buildFileManagerTree([file('foo/bar/baz.txt')]);
-
-        expect(collectAllFilePaths(tree)).toEqual(['foo/bar/baz.txt']);
-    });
-});
-
 describe('collectVisibleFlat', () => {
     it('walks only expanded directories', () => {
         const tree = buildFileManagerTree([file('a/b.txt'), file('c.txt')]);
@@ -411,7 +390,6 @@ describe('walkTree', () => {
     });
 
     it('powers all collect* helpers consistently', () => {
-        expect(collectAllFilePaths(tree).sort()).toEqual(['a/b/c.txt', 'a/d.txt', 'e.txt']);
         expect(collectAllNodePaths(tree).sort()).toEqual(['a', 'a/b', 'a/b/c.txt', 'a/d.txt', 'e.txt'].sort());
         expect(collectDirectoryPaths(tree).sort()).toEqual(['a', 'a/b']);
     });

frontend/src/components/shared/file-manager/file-manager-utils.ts

@@ -55,10 +55,6 @@ export const formatModifiedRelative = (modifiedAt?: Date | string): string => {
     }
 
     const now = Date.now();
-    // All `differenceIn*` helpers are computed up-front so each branch's
-    // fallback (`!minutes`, `!hours`, …) can guard against the upper unit
-    // rounding down to zero — without it, an edge case like 59 minutes 30s
-    // could fall through to the next branch and render as `0h ago`.
     const seconds = differenceInSeconds(now, date);
     const minutes = differenceInMinutes(now, date);
     const hours = differenceInHours(now, date);
@@ -191,7 +187,6 @@ export const buildFileManagerTree = (
     const groups = normalizeRootGroups(rootGroups);
     const roots: FileManagerInternalNode[] = groups?.length ? groups.map(buildSyntheticGroupRoot) : [];
 
-    // O(1) folder lookup by absolute path; replaces O(n) `siblings.find(...)`.
     const folderByPath = new Map<string, FileManagerInternalNode>();
 
     for (const file of sorted) {
@@ -301,10 +296,6 @@ export const walkTree = (
     return result;
 };
 
-/** Collect paths of *file* nodes only (no synthetic group roots, no directories). */
-export const collectAllFilePaths = (nodes: FileManagerInternalNode[]): string[] =>
-    walkTree(nodes, { include: (node) => !node.isGroupRoot && !node.isDir });
-
 /**
  * Collect paths of every selectable node (files + real directories), excluding
  * synthetic group roots. Used as the universe for "select all" / bulk operations.
@@ -455,9 +446,6 @@ export const sortFileManagerTree = (
         }
 
         const reordered = [...recursed].sort((a, b) => {
-            // `isFoldersFirst` is treated as a primary partition before any
-            // other criterion so directories always stay above files
-            // regardless of the active comparator (or its absence).
             if (isFoldersFirst) {
                 const aIsDir = a.isDir || a.isGroupRoot;
                 const bIsDir = b.isDir || b.isGroupRoot;
@@ -781,7 +769,6 @@ interface ComputeRowClickSelectionArgs {
     /** Visible nodes in DFS order; range modifier resolves anchor/target indices against this list. */
     flatVisible: readonly string[];
     modifier: 'range' | 'single' | 'toggle';
-    /** Path of the row that was clicked. */
     path: string;
     /** Current selection. Pure reducer — never mutated. */
     prev: ReadonlySet<string>;
@@ -938,7 +925,6 @@ export const computeToggleSelection = ({ path, prev, subtreePaths }: ComputeTogg
 };
 
 interface ComputeToggleSelectAllArgs {
-    /** Universe of every selectable path in the current visible tree. */
     allSelectablePaths: readonly string[];
     prev: ReadonlySet<string>;
 }