@hienlh/ppm 0.21.0 → 0.22.0

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

@@ -23,6 +23,7 @@ import {
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { useCompareStore } from "@/stores/compare-store";
+import { TreeNodeContextMenu } from "./tree-node-context-menu";
 import { openCompareTab } from "@/lib/open-compare-tab";
 import { toast } from "sonner";
 import { cn, basename } from "@/lib/utils";
@@ -37,7 +38,7 @@ import {
 import { FileActions } from "./file-actions";
 import { TreeRow } from "./tree-node";
 import { InlineTreeInput } from "./inline-tree-input";
-import { flattenVisibleTree, type InputRow } from "./flatten-visible-tree";
+import { flattenVisibleTree, rowKey, type InputRow } from "./flatten-visible-tree";
 import { downloadFile, downloadFolder } from "@/lib/file-download";
 import { api, projectUrl } from "@/lib/api-client";
 import { openExplorer } from "@/components/os-explorer/open-explorer";
@@ -201,6 +202,128 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     }
   }, [activeProject, selectedFiles, clipboard, setClipboard, pasteFiles]);
 
+  // Every row is a `memo(TreeRow)` and this is one of its props, so a fresh
+  // identity per render defeats the memo for the whole mounted set. The
+  // selection is read at call time rather than closed over for the same reason:
+  // as a dependency it would rebuild the callback on every click, which is the
+  // commonest thing that happens in this panel.
+  const handleAction = useCallback(async (action: string, node: FileNode) => {
+    const selectedFiles = useFileStore.getState().selectedFiles;
+    if (action === "toggle-expand" && node.type === "directory") {
+      toggleExpand(activeProject!.name, node.path);
+      return;
+    }
+    if (action === "open-file" && node.type === "file") {
+      const ext = node.name.split(".").pop()?.toLowerCase() ?? "";
+      const isSqlite = ext === "db" || ext === "sqlite" || ext === "sqlite3";
+      openTab({
+        type: isSqlite ? "sqlite" : "editor",
+        title: node.name,
+        metadata: { filePath: node.path, projectName: activeProject!.name },
+        projectId: activeProject!.name,
+        closable: true,
+      });
+      onFileOpen?.();
+      return;
+    }
+    if (action === "cut" || action === "copy-file") {
+      const paths = selectedFiles.length > 0 && selectedFiles.includes(node.path) ? [...selectedFiles] : [node.path];
+      copyToTreeClipboard(paths, action === "cut" ? "cut" : "copy");
+      return;
+    }
+    if (action === "open-in-file-explorer") {
+      const target = node.type === "directory" ? node.path : parentDirOfRelative(node.path);
+      void openExplorer(absoluteProjectPath(activeProject!.path, target));
+      return;
+    }
+    if (action === "open-in-terminal") {
+      const target = node.type === "directory" ? node.path : parentDirOfRelative(node.path);
+      openTerminalAt(absoluteProjectPath(activeProject!.path, target), activeProject!.name);
+      return;
+    }
+    if (action === "paste" && node.type === "directory") {
+      pasteFiles(node.path);
+      return;
+    }
+    if (action === "copy-path") {
+      void copyToClipboard(node.path);
+      return;
+    }
+    if (action === "copy-full-path") {
+      const root = activeProject?.path;
+      void copyToClipboard(root ? `${root}/${node.path}` : node.path);
+      return;
+    }
+    if (action === "select-for-compare") {
+      useCompareStore.getState().setSelection({
+        filePath: node.path,
+        projectName: activeProject!.name,
+        label: node.name,
+      });
+      return;
+    }
+    if (action === "compare-with-selected") {
+      const sel = useCompareStore.getState().selection;
+      if (!sel) return;
+      try {
+        await openCompareTab(
+          { path: sel.filePath, dirtyContent: sel.dirtyContent },
+          { path: node.path },
+          activeProject!.name,
+        );
+        useCompareStore.getState().clearSelection();
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Compare failed";
+        toast.error(msg);
+      }
+      return;
+    }
+    if (action === "download") {
+      if (node.type === "directory") {
+        downloadFolder(activeProject!.name, node.path);
+      } else {
+        downloadFile(activeProject!.name, node.path);
+      }
+      return;
+    }
+    if (action === "compare-selected" && selectedFiles.length === 2) {
+      const file1 = selectedFiles[0]!;
+      const file2 = selectedFiles[1]!;
+      const name1 = basename(file1);
+      const name2 = basename(file2);
+      openTab({
+        type: "git-diff",
+        title: `Compare ${name1} vs ${name2}`,
+        closable: true,
+        metadata: {
+          projectName: activeProject!.name,
+          file1,
+          file2,
+        },
+        projectId: activeProject!.name,
+      });
+      clearSelection();
+      return;
+    }
+    if (action === "new-file" || action === "new-folder") {
+      const parentPath = node.type === "directory" ? node.path : "";
+      if (parentPath) setExpanded(parentPath, true);
+      setInlineAction({ type: action as "new-file" | "new-folder", parentPath });
+      return;
+    }
+    if (action === "rename") {
+      const parentPath = node.path.includes("/")
+        ? node.path.slice(0, node.path.lastIndexOf("/"))
+        : "";
+      setInlineAction({ type: "rename", parentPath, existingNode: node });
+      return;
+    }
+    setActionState({ action, node });
+  }, [
+    activeProject, toggleExpand, openTab, onFileOpen,
+    copyToTreeClipboard, pasteFiles, clearSelection, setExpanded, setInlineAction,
+  ]);
+
   const { handleTreeKeyDown } = useTreeKeyboardNav({
     tree,
     expandedPaths,
@@ -303,23 +426,97 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     () => flattenVisibleTree(tree, expandedPaths, inlineAction),
     [tree, expandedPaths, inlineAction],
   );
+  // One context menu for the whole tree, resolved from whichever row the gesture
+  // landed on — VS Code does the same with a single `tree.onContextMenu`. A menu
+  // per row meant every mounted row built this menu's 39 items on every render.
+  //
+  // The row is read out of the DOM (`data-index` → `rows[i]`) rather than passed
+  // in, because by the time the menu opens there is no row component involved.
+  // `rows` goes through a ref so the handler itself stays stable: it is on the
+  // scroll container, and an unstable one there would be a new listener per render.
+  const [menuNode, setMenuNode] = useState<FileNode | null>(null);
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+  const compareSelection = useCompareStore((s) => s.selection);
+  const rememberMenuTarget = useCallback(
+    (e: React.MouseEvent | React.PointerEvent) => {
+    // A finger fires `pointerdown` before `touchstart`, and the long-press timer
+    // that opens the sheet is armed 400ms later — so this has landed well before
+    // the menu needs it. A mouse opens the menu on `contextmenu` instead; a left
+    // click needs no target and would only cost a render.
+    if (e.type === "pointerdown" && (e as React.PointerEvent).pointerType === "mouse") return;
+    const el = (e.target as HTMLElement | null)?.closest?.("[data-index]");
+    const index = el ? Number(el.getAttribute("data-index")) : -1;
+    const row = Number.isInteger(index) && index >= 0 ? rowsRef.current[index] : undefined;
+    const node = row?.kind === "node" ? row.node : null;
+    setMenuNode((prev) => (prev === node ? prev : node));
+    },
+    [],
+  );
+
   const scrollRef = useRef<HTMLDivElement>(null);
   useDragAutoScroll(scrollRef);
+
+  /**
+   * The keyboard's right-click.
+   *
+   * Focus lives on the panel container — the rows are virtualized and never take it — so a
+   * `ContextMenu` (or Shift+F10) press targets an element that is not inside the radix trigger
+   * at all: nothing opened, and there was no pointer position to open it at. Re-aiming the
+   * event at the focused row's own element produces exactly what right-clicking that row does,
+   * `rememberMenuTarget` included, so there is no second way of resolving the target to keep in
+   * step with the first. It is also why `menuNode` is not cleared when the menu closes: every
+   * path that opens this menu resolves the row first, and clearing on close would swap the
+   * content to the blank-area menu *during* the exit animation, in view.
+   */
+  const openMenuForFocusedRow = useCallback((e: React.KeyboardEvent) => {
+    if (e.key !== "ContextMenu" && !(e.key === "F10" && e.shiftKey)) return;
+    const index = rowsRef.current.findIndex((r) => r.kind === "node" && r.node.path === focusedPath);
+    const el = index >= 0 ? scrollRef.current?.querySelector(`[data-index="${index}"]`) : null;
+    if (!el) return; // no focused row, or it is outside the rendered range
+    e.preventDefault();
+    const rect = el.getBoundingClientRect();
+    el.dispatchEvent(new MouseEvent("contextmenu", {
+      bubbles: true,
+      cancelable: true,
+      button: 2,
+      clientX: Math.round(rect.left + 8),
+      clientY: Math.round(rect.top + rect.height / 2),
+    }));
+  }, [focusedPath]);
   const isMobile = useIsMobile();
+  // `directDomUpdates` is what keeps React off the scroll path: without it every
+  // scroll event ends in `flushSync(rerender)`, so the whole mounted row set is
+  // reconciled *inside* the scroll handler — measured at 92ms of a 137ms long
+  // frame on a 6x-throttled CPU. With it on, the virtualizer writes each row's
+  // transform itself and React only renders when the visible range changes.
+  // Three things below are load-bearing and have to stay in step with it: the row
+  // must not set `transform` (the virtualizer owns it), the sizing container must
+  // take `containerRef` and not set its own `height`, and `measureElement` must
+  // stay — `elementsCache`, which direct updates read to find each node, is
+  // populated by that very ref callback.
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
     getScrollElement: () => scrollRef.current,
     estimateSize: () => (isMobile ? 32 : 26),
+    // Must match the `key` below. The default is the index, and an index is not
+    // an identity: insert a row and every row under it is cached against the
+    // slot it used to occupy, so `directDomUpdates` positions none of them.
+    // A ResizeObserver can fire for a row React has not unmounted yet, carrying a
+    // `data-index` past the end of a list that just shrank — hence the fallback
+    // rather than a `!`, since throwing here happens inside the observer.
+    getItemKey: (index) => { const r = rows[index]; return r ? rowKey(r) : `#${index}`; },
     overscan: 10,
     paddingStart: 4,
     paddingEnd: 4,
+    directDomUpdates: true,
   });
 
   // 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),
+      (r) => r.kind === "node" && r.node.path === focusedPath,
     );
     if (idx >= 0) rowVirtualizer.scrollToIndex(idx, { align: "auto" });
   }, [focusedPath]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -351,118 +548,6 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     }
   }, [activeProject, clearInlineAction]);
 
-  async function handleAction(action: string, node: FileNode) {
-    if (action === "toggle-expand" && node.type === "directory") {
-      toggleExpand(activeProject!.name, node.path);
-      return;
-    }
-    if (action === "open-file" && node.type === "file") {
-      const ext = node.name.split(".").pop()?.toLowerCase() ?? "";
-      const isSqlite = ext === "db" || ext === "sqlite" || ext === "sqlite3";
-      openTab({
-        type: isSqlite ? "sqlite" : "editor",
-        title: node.name,
-        metadata: { filePath: node.path, projectName: activeProject!.name },
-        projectId: activeProject!.name,
-        closable: true,
-      });
-      onFileOpen?.();
-      return;
-    }
-    if (action === "cut" || action === "copy-file") {
-      const paths = selectedFiles.length > 0 && selectedFiles.includes(node.path) ? [...selectedFiles] : [node.path];
-      copyToTreeClipboard(paths, action === "cut" ? "cut" : "copy");
-      return;
-    }
-    if (action === "open-in-file-explorer") {
-      const target = node.type === "directory" ? node.path : parentDirOfRelative(node.path);
-      void openExplorer(absoluteProjectPath(activeProject!.path, target));
-      return;
-    }
-    if (action === "open-in-terminal") {
-      const target = node.type === "directory" ? node.path : parentDirOfRelative(node.path);
-      openTerminalAt(absoluteProjectPath(activeProject!.path, target), activeProject!.name);
-      return;
-    }
-    if (action === "paste" && node.type === "directory") {
-      pasteFiles(node.path);
-      return;
-    }
-    if (action === "copy-path") {
-      void copyToClipboard(node.path);
-      return;
-    }
-    if (action === "copy-full-path") {
-      const root = activeProject?.path;
-      void copyToClipboard(root ? `${root}/${node.path}` : node.path);
-      return;
-    }
-    if (action === "select-for-compare") {
-      useCompareStore.getState().setSelection({
-        filePath: node.path,
-        projectName: activeProject!.name,
-        label: node.name,
-      });
-      return;
-    }
-    if (action === "compare-with-selected") {
-      const sel = useCompareStore.getState().selection;
-      if (!sel) return;
-      try {
-        await openCompareTab(
-          { path: sel.filePath, dirtyContent: sel.dirtyContent },
-          { path: node.path },
-          activeProject!.name,
-        );
-        useCompareStore.getState().clearSelection();
-      } catch (err) {
-        const msg = err instanceof Error ? err.message : "Compare failed";
-        toast.error(msg);
-      }
-      return;
-    }
-    if (action === "download") {
-      if (node.type === "directory") {
-        downloadFolder(activeProject!.name, node.path);
-      } else {
-        downloadFile(activeProject!.name, node.path);
-      }
-      return;
-    }
-    if (action === "compare-selected" && selectedFiles.length === 2) {
-      const file1 = selectedFiles[0]!;
-      const file2 = selectedFiles[1]!;
-      const name1 = basename(file1);
-      const name2 = basename(file2);
-      openTab({
-        type: "git-diff",
-        title: `Compare ${name1} vs ${name2}`,
-        closable: true,
-        metadata: {
-          projectName: activeProject!.name,
-          file1,
-          file2,
-        },
-        projectId: activeProject!.name,
-      });
-      clearSelection();
-      return;
-    }
-    if (action === "new-file" || action === "new-folder") {
-      const parentPath = node.type === "directory" ? node.path : "";
-      if (parentPath) setExpanded(parentPath, true);
-      setInlineAction({ type: action as "new-file" | "new-folder", parentPath });
-      return;
-    }
-    if (action === "rename") {
-      const parentPath = node.path.includes("/")
-        ? node.path.slice(0, node.path.lastIndexOf("/"))
-        : "";
-      setInlineAction({ type: "rename", parentPath, existingNode: node });
-      return;
-    }
-    setActionState({ action, node });
-  }
 
   if (!activeProject) {
     return (
@@ -499,7 +584,7 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
       ref={treeContainerRef}
       className={cn("flex flex-col h-full outline-none", (isRootDragOver || backgroundDrop.isOver) && "bg-primary/5")}
       tabIndex={0}
-      onKeyDown={(e) => { handleClipboardKeyDown(e); handleTreeKeyDown(e); }}
+      onKeyDown={(e) => { handleClipboardKeyDown(e); handleTreeKeyDown(e); openMenuForFocusedRow(e); }}
       // Two independent drags share this background: OS files (handleRoot*, unchanged) and
       // a cross-surface entry drag (backgroundDrop, gated on its own MIME) — each ignores
       // the other's kind, so calling both in sequence is safe.
@@ -529,17 +614,21 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
       {/* File tree with blank-area context menu — virtualized flat rows */}
       <ContextMenu>
         <ContextMenuTrigger asChild>
-          <div ref={scrollRef} className="flex-1 overflow-y-auto">
-            <div className="relative w-full" style={{ height: rowVirtualizer.getTotalSize() }}>
+          <div
+            ref={scrollRef}
+            className="flex-1 overflow-y-auto"
+            onContextMenuCapture={rememberMenuTarget}
+            onPointerDownCapture={rememberMenuTarget}
+          >
+            <div ref={rowVirtualizer.containerRef} className="relative w-full">
               {rowVirtualizer.getVirtualItems().map((vi) => {
                 const row = rows[vi.index]!;
                 return (
                   <div
-                    key={row.kind === "node" ? row.node.path : `input:${row.targetPath}:${row.inline.type}`}
+                    key={rowKey(row)}
                     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
@@ -576,21 +665,33 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
             </div>
           </div>
         </ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem onClick={() => handleAction("new-file", ROOT_NODE)}>
-            <FilePlus className="size-3.5 mr-2" />
-            New File
-          </ContextMenuItem>
-          <ContextMenuItem onClick={() => handleAction("new-folder", ROOT_NODE)}>
-            <FolderPlus className="size-3.5 mr-2" />
-            New Folder
-          </ContextMenuItem>
-          <ContextMenuSeparator />
-          <ContextMenuItem onClick={reloadTree}>
-            <RefreshCw className="size-3.5 mr-2" />
-            Refresh
-          </ContextMenuItem>
-        </ContextMenuContent>
+        {menuNode ? (
+          <TreeNodeContextMenu
+            node={menuNode}
+            isDir={menuNode.type === "directory"}
+            projectName={activeProject.name}
+            selectedFiles={selectedFiles}
+            compareSelection={compareSelection}
+            clipboard={clipboard}
+            onAction={handleAction}
+          />
+        ) : (
+          <ContextMenuContent>
+            <ContextMenuItem onClick={() => handleAction("new-file", ROOT_NODE)}>
+              <FilePlus className="size-3.5 mr-2" />
+              New File
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => handleAction("new-folder", ROOT_NODE)}>
+              <FolderPlus className="size-3.5 mr-2" />
+              New Folder
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem onClick={reloadTree}>
+              <RefreshCw className="size-3.5 mr-2" />
+              Refresh
+            </ContextMenuItem>
+          </ContextMenuContent>
+        )}
       </ContextMenu>
 
       {actionState?.action === "delete" && (

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

@@ -1,20 +1,22 @@
 /**
  * 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.
+ * dir-first sorting, and inline create/rename input rows. Consumed by the
+ * virtualized renderer, keyboard navigation, and range selection.
+ *
+ * Every directory gets its own row. Single-child chains used to be joined into
+ * one `a/b/c` row (VS Code's compact folders) — but only *after* the child was
+ * expanded, because the join required both paths to be in `expandedPaths`. So
+ * the gesture that should have revealed a folder instead made the row you just
+ * clicked vanish into its parent, and depth stopped matching the hierarchy.
+ * Expanding is expanding: one row per directory, always.
  */
 import type { FileNode, InlineAction } from "@/stores/file-store";
 
 export interface NodeRow {
   kind: "node";
-  /** Original node (row identity, drag source, context menu target) */
+  /** 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;
 }
 
@@ -22,12 +24,28 @@ export interface InputRow {
   kind: "input";
   inline: InlineAction;
   depth: number;
-  /** Directory the created entry lands in (effective path for compacted chains) */
+  /** Directory the created entry lands in */
   targetPath: string;
 }
 
 export type FlatRow = NodeRow | InputRow;
 
+/**
+ * A row's identity, independent of where it currently sits in the list.
+ *
+ * This is React's `key` *and* the virtualizer's `getItemKey`, and the two have
+ * to be the same string. The virtualizer caches the DOM node it positions under
+ * its own key, and it only learns of a node through the `measureElement` ref —
+ * which React does not call again when a row merely changes index. So with the
+ * default key (the index), expanding a folder left every row below it registered
+ * under the index it used to have: the inserted rows overwrote those entries and
+ * the shifted ones were positioned by nothing at all, landing on top of each
+ * other at their old offsets.
+ */
+export function rowKey(row: FlatRow): string {
+  return row.kind === "node" ? row.node.path : `input:${row.targetPath}:${row.inline.type}`;
+}
+
 function sortNodes(nodes: FileNode[]): FileNode[] {
   return [...nodes].sort((a, b) => {
     if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
@@ -35,24 +53,6 @@ function sortNodes(nodes: FileNode[]): FileNode[] {
   });
 }
 
-/** 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>,
@@ -69,24 +69,19 @@ export function flattenVisibleTree(
 
   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 });
+        rows.push({ kind: "node", node: n, depth });
       }
 
-      const expanded = effective.type === "directory" && expandedPaths.has(effective.path);
+      const expanded = n.type === "directory" && expandedPaths.has(n.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 (isCreate && expanded && inlineAction!.parentPath === n.path) {
+        rows.push({ kind: "input", inline: inlineAction!, depth: depth + 1, targetPath: n.path });
       }
-      if (expanded && effective.children) {
-        walk(effective.children, depth + 1);
+      if (expanded && n.children) {
+        walk(n.children, depth + 1);
       }
     }
   }
@@ -94,9 +89,9 @@ export function flattenVisibleTree(
   return rows;
 }
 
-/** Flat visible effective-node list (keyboard nav, range selection) */
+/** Flat visible 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);
+    .map((r) => r.node);
 }