@hienlh/ppm 0.17.40 → 0.17.42

package/src/web/components/explorer/file-tree.tsx

@@ -2,7 +2,8 @@
  * FileTree — the main file explorer container.
  * Renders toolbar, tree nodes via TreeNode, root-level drag/drop, and file actions.
  */
-import { useEffect, useCallback, useState, useRef } from "react";
+import { useEffect, useCallback, useState, useRef, useMemo } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import {
   FilePlus,
   FolderPlus,
@@ -15,14 +16,14 @@ import {
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { copyToClipboard } from "@/lib/clipboard";
 import { useShallow } from "zustand/react/shallow";
-import { useFileStore, type FileNode } from "@/stores/file-store";
+import { useFileStore, loadPersistedExpanded, savePersistedExpanded, type FileNode } from "@/stores/file-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { useCompareStore } from "@/stores/compare-store";
 import { openCompareTab } from "@/lib/open-compare-tab";
 import { toast } from "sonner";
 import { cn, basename } from "@/lib/utils";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { useIsMobile } from "@/hooks/use-is-mobile";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -31,8 +32,9 @@ import {
   ContextMenuTrigger,
 } from "@/components/ui/adaptive-context-menu";
 import { FileActions } from "./file-actions";
-import { TreeNode } from "./tree-node";
+import { TreeRow } from "./tree-node";
 import { InlineTreeInput } from "./inline-tree-input";
+import { flattenVisibleTree, type InputRow } from "./flatten-visible-tree";
 import { downloadFile, downloadFolder } from "@/lib/file-download";
 import { api, projectUrl } from "@/lib/api-client";
 import { useFileUploadDrag } from "./use-file-upload-drag";
@@ -166,17 +168,29 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     onAction: handleAction,
   });
 
-  // On project switch: reset + load root + load index + auto-expand root
+  // On project switch: reset + restore expanded state + load all visible folders in ONE batch
   useEffect(() => {
     if (!activeProject) return;
     reset();
     const name = activeProject.name;
-    loadRoot(name).then(() => {
-      useFileStore.getState().setExpanded("", true);
-    });
+    const persisted = loadPersistedExpanded(name);
+    useFileStore.setState({ expandedPaths: new Set(["", ...persisted]) });
+    if (persisted.length > 0) {
+      useFileStore.getState().loadPathsBatch(name, ["", ...persisted]);
+    } else {
+      loadRoot(name);
+    }
     loadIndex(name);
   }, [activeProject?.name]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Persist expanded state per project. Reads LIVE store state (not the captured
+  // render value): on project switch the captured set still belongs to the previous
+  // project, while live state was already reset+restored by the mount effect above.
+  useEffect(() => {
+    if (!activeProject) return;
+    savePersistedExpanded(activeProject.name, useFileStore.getState().expandedPaths);
+  }, [expandedPaths, activeProject?.name]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Handle WS file:changed → invalidate folder + index
   useEffect(() => {
     if (!activeProject) return;
@@ -212,6 +226,56 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     handleRootDragEnter, handleRootDragLeave, handleRootDragOver, handleRootDrop,
   } = useFileUploadDrag({ projectName: activeProject?.name, setExpanded });
 
+  // Virtualized flat rows: only visible rows are mounted (large dirs stay cheap)
+  const rows = useMemo(
+    () => flattenVisibleTree(tree, expandedPaths, inlineAction),
+    [tree, expandedPaths, inlineAction],
+  );
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const isMobile = useIsMobile();
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => (isMobile ? 32 : 26),
+    overscan: 10,
+    paddingStart: 4,
+    paddingEnd: 4,
+  });
+
+  // Keep focused row in view even when it's not mounted (offscreen)
+  useEffect(() => {
+    if (focusedPath == null) return;
+    const idx = rows.findIndex(
+      (r) => r.kind === "node" && (r.node.path === focusedPath || r.effectiveNode.path === focusedPath),
+    );
+    if (idx >= 0) rowVirtualizer.scrollToIndex(idx, { align: "auto" });
+  }, [focusedPath]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /** Confirm inline create/rename input rows */
+  const handleInlineConfirm = useCallback(async (row: InputRow, value: string) => {
+    const projectName = activeProject!.name;
+    const store = useFileStore.getState();
+    if (row.inline.type === "rename") {
+      const node = row.inline.existingNode!;
+      if (value === node.name) { clearInlineAction(); return; }
+      const parentPath = node.path.includes("/") ? node.path.slice(0, node.path.lastIndexOf("/")) : "";
+      const newPath = parentPath ? `${parentPath}/${value}` : value;
+      await api.post(`${projectUrl(projectName)}/files/rename`, { oldPath: node.path, newPath });
+      clearInlineAction();
+      store.invalidateIndex();
+      store.loadIndex(projectName);
+      store.invalidateFolder(projectName, parentPath);
+    } else {
+      const type = row.inline.type === "new-file" ? "file" : "directory";
+      const fullPath = row.targetPath ? `${row.targetPath}/${value}` : value;
+      await api.post(`${projectUrl(projectName)}/files/create`, { path: fullPath, type });
+      clearInlineAction();
+      store.invalidateIndex();
+      store.loadIndex(projectName);
+      store.invalidateFolder(projectName, row.targetPath);
+    }
+  }, [activeProject, clearInlineAction]);
+
   async function handleAction(action: string, node: FileNode) {
     if (action === "toggle-expand" && node.type === "directory") {
       toggleExpand(activeProject!.name, node.path);
@@ -348,11 +412,6 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     );
   }
 
-  const sorted = [...tree].sort((a, b) => {
-    if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
-    return a.name.localeCompare(b.name);
-  });
-
   const toolbarBtnClass = "flex size-6 items-center justify-center rounded text-text-subtle hover:bg-surface-elevated hover:text-foreground";
 
   return (
@@ -384,42 +443,54 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
         </button>
       </SidebarHeader>
 
-      {/* File tree with blank-area context menu */}
+      {/* File tree with blank-area context menu — virtualized flat rows */}
       <ContextMenu>
         <ContextMenuTrigger asChild>
-          <ScrollArea className="flex-1">
-            <div className="py-1">
-              {inlineAction && inlineAction.parentPath === "" && inlineAction.type !== "rename" && (
-                <InlineTreeInput
-                  defaultValue=""
-                  placeholder={inlineAction.type === "new-file" ? "filename.ts" : "folder-name"}
-                  depth={0}
-                  icon={inlineAction.type === "new-file" ? "file" : "folder"}
-                  onConfirm={async (name) => {
-                    const type = inlineAction.type === "new-file" ? "file" : "directory";
-                    await api.post(`${projectUrl(activeProject!.name)}/files/create`, { path: name, type });
-                    clearInlineAction();
-                    reloadTree();
-                  }}
-                  onCancel={clearInlineAction}
-                />
-              )}
-              {sorted.map((node) => (
-                <TreeNode
-                  key={node.path}
-                  node={node}
-                  depth={0}
-                  projectName={activeProject.name}
-                  onAction={handleAction}
-                  onFileDrop={uploadFiles}
-                  onFileOpen={onFileOpen}
-                />
-              ))}
-              {sorted.length === 0 && (
+          <div ref={scrollRef} className="flex-1 overflow-y-auto">
+            <div className="relative w-full" style={{ height: rowVirtualizer.getTotalSize() }}>
+              {rowVirtualizer.getVirtualItems().map((vi) => {
+                const row = rows[vi.index]!;
+                return (
+                  <div
+                    key={row.kind === "node" ? row.node.path : `input:${row.targetPath}:${row.inline.type}`}
+                    data-index={vi.index}
+                    ref={rowVirtualizer.measureElement}
+                    className="absolute left-0 top-0 w-full"
+                    style={{ transform: `translateY(${vi.start}px)` }}
+                  >
+                    {row.kind === "input" ? (
+                      <InlineTreeInput
+                        defaultValue={row.inline.type === "rename" ? row.inline.existingNode!.name : ""}
+                        placeholder={
+                          row.inline.type === "rename" ? row.inline.existingNode!.name
+                          : row.inline.type === "new-file" ? "filename.ts" : "folder-name"
+                        }
+                        depth={row.depth}
+                        icon={
+                          row.inline.type === "rename"
+                            ? (row.inline.existingNode!.type === "directory" ? "folder" : "file")
+                            : (row.inline.type === "new-file" ? "file" : "folder")
+                        }
+                        onConfirm={(value) => handleInlineConfirm(row, value)}
+                        onCancel={clearInlineAction}
+                      />
+                    ) : (
+                      <TreeRow
+                        row={row}
+                        projectName={activeProject.name}
+                        onAction={handleAction}
+                        onFileDrop={uploadFiles}
+                        onFileOpen={onFileOpen}
+                      />
+                    )}
+                  </div>
+                );
+              })}
+              {rows.length === 0 && (
                 <p className="p-3 text-xs text-text-subtle">Empty project.</p>
               )}
             </div>
-          </ScrollArea>
+          </div>
         </ContextMenuTrigger>
         <ContextMenuContent>
           <ContextMenuItem onClick={() => handleAction("new-file", ROOT_NODE)}>

package/src/web/components/explorer/flatten-visible-tree.ts

@@ -0,0 +1,102 @@
+/**
+ * Single source of truth for the explorer's visible-row computation.
+ * Flattens the lazy tree into ordered rows respecting expand state,
+ * dir-first sorting, compact single-child folder chains, and inline
+ * create/rename input rows. Consumed by the virtualized renderer,
+ * keyboard navigation, and range selection.
+ */
+import type { FileNode, InlineAction } from "@/stores/file-store";
+
+export interface NodeRow {
+  kind: "node";
+  /** Original node (row identity, drag source, context menu target) */
+  node: FileNode;
+  /** Terminal node of a compacted single-child dir chain (equals node when not compacted) */
+  effectiveNode: FileNode;
+  /** Display label, e.g. "a/b/c" for compacted chains */
+  displayName: string;
+  depth: number;
+}
+
+export interface InputRow {
+  kind: "input";
+  inline: InlineAction;
+  depth: number;
+  /** Directory the created entry lands in (effective path for compacted chains) */
+  targetPath: string;
+}
+
+export type FlatRow = NodeRow | InputRow;
+
+function sortNodes(nodes: FileNode[]): FileNode[] {
+  return [...nodes].sort((a, b) => {
+    if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+/** Follow expanded single-child dir chains; returns terminal node + joined label */
+function compactChain(node: FileNode, expandedPaths: Set<string>): { effective: FileNode; displayName: string } {
+  let effective = node;
+  let displayName = node.name;
+  if (node.type === "directory" && expandedPaths.has(node.path) && node.children) {
+    while (
+      effective.children &&
+      effective.children.length === 1 &&
+      effective.children[0]!.type === "directory" &&
+      expandedPaths.has(effective.children[0]!.path)
+    ) {
+      effective = effective.children[0]!;
+      displayName += `/${effective.name}`;
+    }
+  }
+  return { effective, displayName };
+}
+
+export function flattenVisibleTree(
+  tree: FileNode[],
+  expandedPaths: Set<string>,
+  inlineAction: InlineAction | null = null,
+): FlatRow[] {
+  const rows: FlatRow[] = [];
+  const isCreate = inlineAction != null && inlineAction.type !== "rename";
+  const renamePath = inlineAction?.type === "rename" ? inlineAction.existingNode?.path : undefined;
+
+  // Root-level create input appears before all rows
+  if (isCreate && inlineAction!.parentPath === "") {
+    rows.push({ kind: "input", inline: inlineAction!, depth: 0, targetPath: "" });
+  }
+
+  function walk(nodes: FileNode[], depth: number) {
+    for (const n of sortNodes(nodes)) {
+      const { effective, displayName } = compactChain(n, expandedPaths);
+
+      if (renamePath != null && renamePath === n.path) {
+        rows.push({ kind: "input", inline: inlineAction!, depth, targetPath: n.path });
+      } else {
+        rows.push({ kind: "node", node: n, effectiveNode: effective, displayName, depth });
+      }
+
+      const expanded = effective.type === "directory" && expandedPaths.has(effective.path);
+      // Create input pinned under its parent dir, before children
+      if (
+        isCreate && expanded &&
+        (inlineAction!.parentPath === n.path || inlineAction!.parentPath === effective.path)
+      ) {
+        rows.push({ kind: "input", inline: inlineAction!, depth: depth + 1, targetPath: effective.path });
+      }
+      if (expanded && effective.children) {
+        walk(effective.children, depth + 1);
+      }
+    }
+  }
+  walk(tree, 0);
+  return rows;
+}
+
+/** Flat visible effective-node list (keyboard nav, range selection) */
+export function visibleNodesOf(tree: FileNode[], expandedPaths: Set<string>): FileNode[] {
+  return flattenVisibleTree(tree, expandedPaths)
+    .filter((r): r is NodeRow => r.kind === "node")
+    .map((r) => r.effectiveNode);
+}