@hienlh/ppm 0.13.15 → 0.13.17

package/src/web/components/editor/editor-breadcrumb.tsx

@@ -12,6 +12,7 @@ import {
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useShallow } from "zustand/react/shallow";
 import { useTabStore } from "@/stores/tab-store";
+import { useProjectStore } from "@/stores/project-store";
 import { basename } from "@/lib/utils";
 
 const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -34,11 +35,14 @@ interface BreadcrumbSegment {
   fullPath: string;
   node: FileNode | null;
   siblings: FileNode[];
+  /** Folder path whose children are the siblings (empty string = root) */
+  parentPath: string;
 }
 
 function walkTree(tree: FileNode[], segments: string[]): BreadcrumbSegment[] {
   const result: BreadcrumbSegment[] = [];
   let current: FileNode[] = tree;
+  let parentPath = "";
 
   for (let i = 0; i < segments.length; i++) {
     const seg = segments[i]!;
@@ -49,17 +53,20 @@ function walkTree(tree: FileNode[], segments: string[]): BreadcrumbSegment[] {
       fullPath,
       node: match ?? null,
       siblings: current,
+      parentPath,
     });
     if (match?.children) {
+      parentPath = match.path;
       current = match.children;
     } else {
-      // Remaining segments have no tree data — add as plain
+      // Remaining segments — parent children not loaded yet
       for (let j = i + 1; j < segments.length; j++) {
         result.push({
           name: segments[j]!,
           fullPath: segments.slice(0, j + 1).join("/"),
           node: null,
           siblings: [],
+          parentPath: segments.slice(0, j).join("/"),
         });
       }
       break;
@@ -85,11 +92,23 @@ interface EditorBreadcrumbProps {
 export function EditorBreadcrumb({ filePath, projectName, tabId, className }: EditorBreadcrumbProps) {
   const tree = useFileStore((s) => s.tree);
   const { updateTab, openTab } = useTabStore(useShallow((s) => ({ updateTab: s.updateTab, openTab: s.openTab })));
+  const projectPath = useProjectStore((s) => s.projects.find((p) => p.name === projectName)?.path ?? "");
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  // Strip project root prefix so segments align with the relative-path file tree
+  const { prefixParts, relativePath } = useMemo(() => {
+    const norm = filePath.startsWith("/") ? filePath.slice(1) : filePath;
+    const normRoot = projectPath.startsWith("/") ? projectPath.slice(1) : projectPath;
+    if (normRoot && norm.startsWith(normRoot + "/")) {
+      const rel = norm.slice(normRoot.length + 1);
+      return { prefixParts: normRoot.split("/"), relativePath: rel };
+    }
+    return { prefixParts: [] as string[], relativePath: norm };
+  }, [filePath, projectPath]);
+
   const segments = useMemo(
-    () => walkTree(tree, filePath.split("/").filter(Boolean)),
-    [tree, filePath],
+    () => walkTree(tree, relativePath.split("/").filter(Boolean)),
+    [tree, relativePath],
   );
 
   // Auto-scroll to rightmost segment
@@ -110,19 +129,21 @@ export function EditorBreadcrumb({ filePath, projectName, tabId, className }: Ed
 
   return (
     <div ref={scrollRef} className={className}>
+      {prefixParts.map((part, i) => (
+        <div key={`prefix-${i}`} className="flex items-center shrink-0">
+          {i > 0 && <ChevronRight className="size-3 text-muted-foreground shrink-0 mx-0.5" />}
+          <span className="text-xs text-muted-foreground px-1 py-0.5">{part}</span>
+        </div>
+      ))}
       {segments.map((seg, i) => (
         <div key={seg.fullPath} className="flex items-center shrink-0">
-          {i > 0 && <ChevronRight className="size-3 text-muted-foreground shrink-0 mx-0.5" />}
-          {seg.siblings.length > 0 ? (
-            <SegmentDropdown
-              segment={seg}
-              isLast={i === segments.length - 1}
-              projectName={projectName}
-              onFileClick={handleFileClick}
-            />
-          ) : (
-            <span className="text-xs text-muted-foreground px-1 py-0.5">{seg.name}</span>
-          )}
+          {(i > 0 || prefixParts.length > 0) && <ChevronRight className="size-3 text-muted-foreground shrink-0 mx-0.5" />}
+          <SegmentDropdown
+            segment={seg}
+            isLast={i === segments.length - 1}
+            projectName={projectName}
+            onFileClick={handleFileClick}
+          />
         </div>
       ))}
     </div>
@@ -137,10 +158,19 @@ interface SegmentDropdownProps {
 }
 
 function SegmentDropdown({ segment, isLast, projectName, onFileClick }: SegmentDropdownProps) {
+  const loadChildren = useFileStore((s) => s.loadChildren);
+  const loadedPaths = useFileStore((s) => s.loadedPaths);
   const sorted = useMemo(() => sortNodes(segment.siblings), [segment.siblings]);
+  const isLoaded = loadedPaths.has(segment.parentPath);
+
+  function handleOpenChange(open: boolean) {
+    if (open && !isLoaded) {
+      loadChildren(projectName, segment.parentPath);
+    }
+  }
 
   return (
-    <DropdownMenu>
+    <DropdownMenu onOpenChange={handleOpenChange}>
       <DropdownMenuTrigger asChild>
         <button
           type="button"
@@ -152,15 +182,21 @@ function SegmentDropdown({ segment, isLast, projectName, onFileClick }: SegmentD
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="max-h-[300px] p-1">
-        {sorted.map((node) => (
-          <NodeMenuItem
-            key={node.path}
-            node={node}
-            projectName={projectName}
-            activePath={segment.fullPath}
-            onFileClick={onFileClick}
-          />
-        ))}
+        {sorted.length === 0 ? (
+          <DropdownMenuItem disabled className="text-xs text-muted-foreground">
+            Loading…
+          </DropdownMenuItem>
+        ) : (
+          sorted.map((node) => (
+            <NodeMenuItem
+              key={node.path}
+              node={node}
+              projectName={projectName}
+              activePath={segment.fullPath}
+              onFileClick={onFileClick}
+            />
+          ))
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );
@@ -176,24 +212,41 @@ interface NodeMenuItemProps {
 function NodeMenuItem({ node, projectName, activePath, onFileClick }: NodeMenuItemProps) {
   const Icon = getIcon(node.name, node.type === "directory");
   const isActive = node.path === activePath;
+  const loadChildren = useFileStore((s) => s.loadChildren);
+  const loadedPaths = useFileStore((s) => s.loadedPaths);
+
+  if (node.type === "directory") {
+    const children = node.children ?? [];
+    const isLoaded = loadedPaths.has(node.path);
+
+    function handleSubOpen(open: boolean) {
+      if (open && !isLoaded) {
+        loadChildren(projectName, node.path);
+      }
+    }
 
-  if (node.type === "directory" && node.children && node.children.length > 0) {
     return (
-      <DropdownMenuSub>
+      <DropdownMenuSub onOpenChange={handleSubOpen}>
         <DropdownMenuSubTrigger className={`text-xs gap-1.5 ${isActive ? "bg-muted" : ""}`}>
           <Icon className="size-3.5 shrink-0 text-muted-foreground" />
           <span className="truncate">{node.name}</span>
         </DropdownMenuSubTrigger>
         <DropdownMenuSubContent className="max-h-[300px] overflow-y-auto p-1">
-          {sortNodes(node.children).map((child) => (
-            <NodeMenuItem
-              key={child.path}
-              node={child}
-              projectName={projectName}
-              activePath={activePath}
-              onFileClick={onFileClick}
-            />
-          ))}
+          {children.length === 0 ? (
+            <DropdownMenuItem disabled className="text-xs text-muted-foreground">
+              Loading…
+            </DropdownMenuItem>
+          ) : (
+            sortNodes(children).map((child) => (
+              <NodeMenuItem
+                key={child.path}
+                node={child}
+                projectName={projectName}
+                activePath={activePath}
+                onFileClick={onFileClick}
+              />
+            ))
+          )}
         </DropdownMenuSubContent>
       </DropdownMenuSub>
     );
@@ -206,7 +259,6 @@ function NodeMenuItem({ node, projectName, activePath, onFileClick }: NodeMenuIt
         // onSelect doesn't give MouseEvent, use click handler for Ctrl detection
       }}
       onClick={(e) => {
-        if (node.type === "directory") return;
         onFileClick(node.path, e);
       }}
     >

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

@@ -1,4 +1,8 @@
-import { useState, useEffect, useRef } from "react";
+/**
+ * FileActions — delete confirmation dialog.
+ * Create and rename are handled inline by InlineTreeInput.
+ */
+import { useState } from "react";
 import { api, projectUrl } from "@/lib/api-client";
 import type { FileNode } from "@/stores/file-store";
 import {
@@ -10,10 +14,9 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 
 interface FileActionsProps {
-  action: string;
+  action: "delete";
   node: FileNode;
   projectName: string;
   onClose: () => void;
@@ -21,73 +24,13 @@ interface FileActionsProps {
 }
 
 export function FileActions({
-  action,
   node,
   projectName,
   onClose,
   onRefresh,
 }: FileActionsProps) {
-  const [name, setName] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (action === "rename") {
-      setName(node.name);
-    } else {
-      setName("");
-    }
-  }, [action, node.name]);
-
-  useEffect(() => {
-    // Focus input after dialog mounts
-    const timer = setTimeout(() => inputRef.current?.focus(), 100);
-    return () => clearTimeout(timer);
-  }, []);
-
-  async function handleCreate(type: "file" | "directory") {
-    if (!name.trim()) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const parentPath = node.type === "directory" ? node.path : node.path.split("/").slice(0, -1).join("/");
-      const fullPath = parentPath ? `${parentPath}/${name.trim()}` : name.trim();
-      await api.post(`${projectUrl(projectName)}/files/create`, {
-        path: fullPath,
-        type,
-      });
-      onRefresh();
-      onClose();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to create");
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleRename() {
-    if (!name.trim() || name.trim() === node.name) {
-      onClose();
-      return;
-    }
-    setLoading(true);
-    setError(null);
-    try {
-      const parentPath = node.path.split("/").slice(0, -1).join("/");
-      const newPath = parentPath ? `${parentPath}/${name.trim()}` : name.trim();
-      await api.post(`${projectUrl(projectName)}/files/rename`, {
-        oldPath: node.path,
-        newPath,
-      });
-      onRefresh();
-      onClose();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to rename");
-    } finally {
-      setLoading(false);
-    }
-  }
 
   async function handleDelete() {
     setLoading(true);
@@ -105,84 +48,24 @@ export function FileActions({
     }
   }
 
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === "Enter") {
-      if (action === "new-file") handleCreate("file");
-      else if (action === "new-folder") handleCreate("directory");
-      else if (action === "rename") handleRename();
-    }
-    if (e.key === "Escape") onClose();
-  }
-
-  if (action === "delete") {
-    return (
-      <Dialog open onOpenChange={(open) => !open && onClose()}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Delete {node.type === "directory" ? "Folder" : "File"}</DialogTitle>
-            <DialogDescription>
-              Are you sure you want to delete{" "}
-              <span className="font-mono font-semibold">{node.name}</span>?
-              {node.type === "directory" && " This will delete all contents."}
-            </DialogDescription>
-          </DialogHeader>
-          {error && <p className="text-sm text-error">{error}</p>}
-          <DialogFooter>
-            <Button variant="outline" onClick={onClose} disabled={loading}>
-              Cancel
-            </Button>
-            <Button variant="destructive" onClick={handleDelete} disabled={loading}>
-              {loading ? "Deleting..." : "Delete"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  const title =
-    action === "new-file"
-      ? "New File"
-      : action === "new-folder"
-        ? "New Folder"
-        : "Rename";
-
-  const placeholder =
-    action === "rename" ? node.name : action === "new-file" ? "filename.ts" : "folder-name";
-
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
+          <DialogTitle>Delete {node.type === "directory" ? "Folder" : "File"}</DialogTitle>
           <DialogDescription>
-            {action === "rename"
-              ? `Rename "${node.name}" to:`
-              : `Create in ${node.type === "directory" ? node.path || "/" : node.path.split("/").slice(0, -1).join("/") || "/"}`}
+            Are you sure you want to delete{" "}
+            <span className="font-mono font-semibold">{node.name}</span>?
+            {node.type === "directory" && " This will delete all contents."}
           </DialogDescription>
         </DialogHeader>
-        <Input
-          ref={inputRef}
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder}
-          disabled={loading}
-        />
         {error && <p className="text-sm text-error">{error}</p>}
         <DialogFooter>
           <Button variant="outline" onClick={onClose} disabled={loading}>
             Cancel
           </Button>
-          <Button
-            onClick={() => {
-              if (action === "new-file") handleCreate("file");
-              else if (action === "new-folder") handleCreate("directory");
-              else handleRename();
-            }}
-            disabled={loading || !name.trim()}
-          >
-            {loading ? "Saving..." : action === "rename" ? "Rename" : "Create"}
+          <Button variant="destructive" onClick={handleDelete} disabled={loading}>
+            {loading ? "Deleting..." : "Delete"}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/web/components/explorer/file-icon-map.ts

@@ -0,0 +1,69 @@
+/**
+ * File extension → icon + color mapping for the file tree explorer.
+ * Extracted from file-tree.tsx for modularity.
+ */
+import {
+  File,
+  FileCode,
+  FileJson,
+  FileText,
+  FileType,
+  FileImage,
+  FileVideo,
+  FileAudio,
+  FileSpreadsheet,
+  FileArchive,
+  Database,
+} from "lucide-react";
+
+export type FileIconInfo = { icon: React.ComponentType<{ className?: string }>; color?: string };
+
+const FILE_ICON_MAP: Record<string, FileIconInfo> = {
+  // Code
+  ts: { icon: FileCode, color: "text-blue-400" }, tsx: { icon: FileCode, color: "text-blue-400" },
+  js: { icon: FileCode, color: "text-yellow-400" }, jsx: { icon: FileCode, color: "text-yellow-400" },
+  py: { icon: FileCode, color: "text-green-400" }, rs: { icon: FileCode, color: "text-orange-400" },
+  go: { icon: FileCode, color: "text-cyan-400" }, c: { icon: FileCode, color: "text-blue-300" },
+  cpp: { icon: FileCode, color: "text-blue-300" }, java: { icon: FileCode, color: "text-red-400" },
+  rb: { icon: FileCode, color: "text-red-400" }, php: { icon: FileCode, color: "text-purple-400" },
+  swift: { icon: FileCode, color: "text-orange-400" }, kt: { icon: FileCode, color: "text-purple-400" },
+  dart: { icon: FileCode, color: "text-cyan-400" }, sh: { icon: FileCode, color: "text-green-300" },
+  html: { icon: FileCode, color: "text-orange-400" }, css: { icon: FileCode, color: "text-blue-400" },
+  scss: { icon: FileCode, color: "text-pink-400" },
+  // Data
+  json: { icon: FileJson, color: "text-yellow-400" },
+  yaml: { icon: FileType, color: "text-orange-300" }, yml: { icon: FileType, color: "text-orange-300" },
+  toml: { icon: FileType, color: "text-orange-300" }, ini: { icon: FileType, color: "text-orange-300" },
+  env: { icon: FileType, color: "text-yellow-300" },
+  csv: { icon: FileSpreadsheet, color: "text-green-400" },
+  xls: { icon: FileSpreadsheet, color: "text-green-400" }, xlsx: { icon: FileSpreadsheet, color: "text-green-400" },
+  // Text/Docs
+  md: { icon: FileText, color: "text-text-secondary" }, txt: { icon: FileText, color: "text-text-secondary" },
+  log: { icon: FileText, color: "text-text-subtle" }, pdf: { icon: FileText, color: "text-red-400" },
+  // Images
+  png: { icon: FileImage, color: "text-green-400" }, jpg: { icon: FileImage, color: "text-green-400" },
+  jpeg: { icon: FileImage, color: "text-green-400" }, gif: { icon: FileImage, color: "text-green-400" },
+  svg: { icon: FileImage, color: "text-yellow-400" }, webp: { icon: FileImage, color: "text-green-400" },
+  ico: { icon: FileImage, color: "text-green-400" }, bmp: { icon: FileImage, color: "text-green-400" },
+  // Video
+  mp4: { icon: FileVideo, color: "text-purple-400" }, webm: { icon: FileVideo, color: "text-purple-400" },
+  mov: { icon: FileVideo, color: "text-purple-400" }, avi: { icon: FileVideo, color: "text-purple-400" },
+  mkv: { icon: FileVideo, color: "text-purple-400" },
+  // Audio
+  mp3: { icon: FileAudio, color: "text-pink-400" }, wav: { icon: FileAudio, color: "text-pink-400" },
+  ogg: { icon: FileAudio, color: "text-pink-400" }, flac: { icon: FileAudio, color: "text-pink-400" },
+  // Database
+  db: { icon: Database, color: "text-amber-400" }, sqlite: { icon: Database, color: "text-amber-400" },
+  sqlite3: { icon: Database, color: "text-amber-400" }, sql: { icon: Database, color: "text-amber-400" },
+  // Archives
+  zip: { icon: FileArchive, color: "text-amber-300" }, tar: { icon: FileArchive, color: "text-amber-300" },
+  gz: { icon: FileArchive, color: "text-amber-300" }, rar: { icon: FileArchive, color: "text-amber-300" },
+  "7z": { icon: FileArchive, color: "text-amber-300" },
+};
+
+const DEFAULT_FILE_ICON: FileIconInfo = { icon: File };
+
+export function getFileIcon(name: string): FileIconInfo {
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  return FILE_ICON_MAP[ext] ?? DEFAULT_FILE_ICON;
+}