feat(web): replace hover buttons with right-click context menu in file tree

Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-03 17:40:07 +08:00
parent fcb678773c
commit 7a6e7e7ebb
1 changed files with 160 additions and 71 deletions
@@ -5,11 +5,16 @@ import {
  FilePlus,
  Folder,
  FolderPlus,
-  Pencil,
  RefreshCw,
-  Trash2,
 } from "lucide-react";
-import type { ReactNode } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";

 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
@@ -28,42 +33,48 @@ interface FileExplorerPanelProps {
  workspaceId: string | null;
 }

+type OnRowContextMenu = (
+  entry: FileEntry,
+  point: { x: number; y: number },
+) => void;

 interface FileTreeDirectoryProps {
  workspaceId: string;
  entry: FileEntry;
  depth: number;
  onSelectFile: (path: string) => void;
-  onRename: (entry: FileEntry) => void;
-  onDelete: (entry: FileEntry) => void;
+  onContextMenu: OnRowContextMenu;
 }

 interface FileTreeFileProps {
  entry: FileEntry;
  depth: number;
  onSelectFile: (path: string) => void;
-  onRename: (entry: FileEntry) => void;
-  onDelete: (entry: FileEntry) => void;
+  onContextMenu: OnRowContextMenu;
 }

 function FileTreeFile({
  entry,
  depth,
  onSelectFile,
-  onRename,
-  onDelete,
+  onContextMenu,
 }: FileTreeFileProps) {
  const selectedPath = useFileTreeStore((s) => s.selectedPath);
  const isSelected = selectedPath === entry.path;
  const paddingLeft = `${depth * 0.875 + 0.75}rem`;

  return (
-    <li className="group relative">
+    <li>
      <button
        type="button"
        onClick={() => onSelectFile(entry.path)}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onContextMenu(entry, { x: e.clientX, y: e.clientY });
+        }}
        className={cn(
-          "flex h-7 w-full items-center gap-1.5 truncate px-2 pr-14 text-left text-xs transition-colors",
+          "flex h-7 w-full items-center gap-1.5 truncate px-2 text-left text-xs transition-colors",
          "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
          isSelected && "bg-accent text-accent-foreground",
        )}
@@ -72,30 +83,6 @@ function FileTreeFile({
        <FileCode2 className="size-3.5 shrink-0" aria-hidden="true" />
        <span className="truncate">{entry.name}</span>
      </button>
-      <div className="absolute right-0 top-0 hidden h-full items-center gap-0.5 px-1 group-hover:flex">
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onRename(entry);
-          }}
-          aria-label={`Rename ${entry.name}`}
-          className="inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
-        >
-          <Pencil className="size-3" aria-hidden="true" />
-        </button>
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onDelete(entry);
-          }}
-          aria-label={`Delete ${entry.name}`}
-          className="inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-destructive hover:text-destructive-foreground"
-        >
-          <Trash2 className="size-3" aria-hidden="true" />
-        </button>
-      </div>
    </li>
  );
 }
@@ -105,8 +92,7 @@ function FileTreeDirectory({
  entry,
  depth,
  onSelectFile,
-  onRename,
-  onDelete,
+  onContextMenu,
 }: FileTreeDirectoryProps) {
  const expanded = useFileTreeStore((s) => s.expandedPaths.has(entry.path));
  const toggleExpanded = useFileTreeStore((s) => s.toggleExpanded);
@@ -118,12 +104,17 @@ function FileTreeDirectory({
  const paddingLeft = `${depth * 0.875 + 0.75}rem`;

  return (
-    <li className="group relative">
+    <li>
      <button
        type="button"
        onClick={() => toggleExpanded(entry.path)}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onContextMenu(entry, { x: e.clientX, y: e.clientY });
+        }}
        className={cn(
-          "flex h-7 w-full items-center gap-1.5 truncate px-2 pr-14 text-left text-xs transition-colors",
+          "flex h-7 w-full items-center gap-1.5 truncate px-2 text-left text-xs transition-colors",
          "text-foreground hover:bg-accent hover:text-accent-foreground",
        )}
        style={{ paddingLeft }}
@@ -138,30 +129,6 @@ function FileTreeDirectory({
        <Folder className="size-3.5 shrink-0" aria-hidden="true" />
        <span className="truncate">{entry.name}</span>
      </button>
-      <div className="absolute right-0 top-0 hidden h-full items-center gap-0.5 px-1 group-hover:flex">
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onRename(entry);
-          }}
-          aria-label={`Rename ${entry.name}`}
-          className="inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
-        >
-          <Pencil className="size-3" aria-hidden="true" />
-        </button>
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onDelete(entry);
-          }}
-          aria-label={`Delete ${entry.name}`}
-          className="inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-destructive hover:text-destructive-foreground"
-        >
-          <Trash2 className="size-3" aria-hidden="true" />
-        </button>
-      </div>
      {expanded && (
        <ul>
          {isLoading && (
@@ -182,8 +149,7 @@ function FileTreeDirectory({
                entry={child}
                depth={depth + 1}
                onSelectFile={onSelectFile}
-                onRename={onRename}
-                onDelete={onDelete}
+                onContextMenu={onContextMenu}
              />
            ) : (
              <FileTreeFile
@@ -191,8 +157,7 @@ function FileTreeDirectory({
                entry={child}
                depth={depth + 1}
                onSelectFile={onSelectFile}
-                onRename={onRename}
-                onDelete={onDelete}
+                onContextMenu={onContextMenu}
              />
            ),
          )}
@@ -223,6 +188,23 @@ export function FileExplorerPanel({ workspaceId }: FileExplorerPanelProps) {
  const removeMutation = useFileRemove();
  const renameMutation = useFileRename();

+  const [contextMenu, setContextMenu] = useState<{
+    entry: FileEntry;
+    x: number;
+    y: number;
+  } | null>(null);
+  const [adjustedPos, setAdjustedPos] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const hasMeasuredRef = useRef(false);
+
+  const menuPos = useMemo(
+    () => adjustedPos ?? (contextMenu ? { x: contextMenu.x, y: contextMenu.y } : null),
+    [adjustedPos, contextMenu],
+  );
+
  const onSelectFile = (path: string) => {
    setSelectedPath(path);
    setActiveFilePath(path);
@@ -266,6 +248,46 @@ export function FileExplorerPanel({ workspaceId }: FileExplorerPanelProps) {
    removeMutation.mutate({ workspaceId, path: entry.path });
  };

+  const handleRowContextMenu: OnRowContextMenu = (entry, point) => {
+    setContextMenu({ entry, x: point.x, y: point.y });
+  };
+
+  useEffect(() => {
+    setAdjustedPos(null);
+    hasMeasuredRef.current = false;
+  }, [contextMenu]);
+
+  useLayoutEffect(() => {
+    if (!menuRef.current || !menuPos || hasMeasuredRef.current) return;
+    const rect = menuRef.current.getBoundingClientRect();
+    const nextX = Math.min(menuPos.x, window.innerWidth - rect.width - 8);
+    const nextY = Math.min(menuPos.y, window.innerHeight - rect.height - 8);
+    hasMeasuredRef.current = true;
+    if (nextX !== menuPos.x || nextY !== menuPos.y) {
+      setAdjustedPos({ x: nextX, y: nextY });
+    }
+  }, [menuPos]);
+
+  useEffect(() => {
+    if (!contextMenu) return;
+    const handleMouseDown = (e: MouseEvent) => {
+      if (!menuRef.current?.contains(e.target as Node)) {
+        setContextMenu(null);
+      }
+    };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setContextMenu(null);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [contextMenu]);
+
  const lastError = [
    writeMutation,
    mkdirMutation,
@@ -355,8 +377,7 @@ export function FileExplorerPanel({ workspaceId }: FileExplorerPanelProps) {
                  entry={entry}
                  depth={0}
                  onSelectFile={onSelectFile}
-                  onRename={handleRename}
-                  onDelete={handleDelete}
+                  onContextMenu={handleRowContextMenu}
                />
              ) : (
                <FileTreeFile
@@ -364,14 +385,82 @@ export function FileExplorerPanel({ workspaceId }: FileExplorerPanelProps) {
                  entry={entry}
                  depth={0}
                  onSelectFile={onSelectFile}
-                  onRename={handleRename}
-                  onDelete={handleDelete}
+                  onContextMenu={handleRowContextMenu}
                />
              ),
            )}
          </ul>
        </nav>
      </ScrollArea>
+      {contextMenu && menuPos && (
+        <div
+          ref={menuRef}
+          style={{ position: "fixed", left: menuPos.x, top: menuPos.y }}
+          className="z-50 min-w-[10rem] rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-md"
+        >
+          <button
+            type="button"
+            onClick={() => {
+              handleRename(contextMenu.entry);
+              setContextMenu(null);
+            }}
+            className="w-full px-3 py-1.5 text-left text-xs hover:bg-accent hover:text-accent-foreground"
+          >
+            Rename
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              handleDelete(contextMenu.entry);
+              setContextMenu(null);
+            }}
+            className="w-full px-3 py-1.5 text-left text-xs hover:bg-accent hover:text-accent-foreground"
+          >
+            Delete
+          </button>
+          {contextMenu.entry.isDir && (
+            <>
+              <div className="my-1 h-px bg-border" />
+              <button
+                type="button"
+                onClick={() => {
+                  if (!workspaceId) return;
+                  const raw = window.prompt(
+                    "New file path:",
+                    contextMenu.entry.path + "/",
+                  );
+                  if (!raw) return;
+                  const path = raw.trim();
+                  if (!path) return;
+                  writeMutation.mutate({ workspaceId, path, content: "" });
+                  setContextMenu(null);
+                }}
+                className="w-full px-3 py-1.5 text-left text-xs hover:bg-accent hover:text-accent-foreground"
+              >
+                New File in here
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  if (!workspaceId) return;
+                  const raw = window.prompt(
+                    "New folder path:",
+                    contextMenu.entry.path + "/",
+                  );
+                  if (!raw) return;
+                  const path = raw.trim();
+                  if (!path) return;
+                  mkdirMutation.mutate({ workspaceId, path });
+                  setContextMenu(null);
+                }}
+                className="w-full px-3 py-1.5 text-left text-xs hover:bg-accent hover:text-accent-foreground"
+              >
+                New Folder in here
+              </button>
+            </>
+          )}
+        </div>
+      )}
    </aside>
  );
 }