@hienlh/ppm 0.13.15 → 0.13.16

package/src/web/components/explorer/use-tree-keyboard-nav.ts

@@ -0,0 +1,126 @@
+/**
+ * Hook for file tree keyboard navigation.
+ * Arrow keys, Enter, F2, Delete on focused tree items.
+ */
+import { useMemo, type KeyboardEvent } from "react";
+import { useFileStore, type FileNode } from "@/stores/file-store";
+
+interface UseTreeKeyboardNavOptions {
+  tree: FileNode[];
+  expandedPaths: Set<string>;
+  focusedPath: string | null;
+  setFocusedPath: (path: string | null) => void;
+  setExpanded: (path: string, expanded: boolean) => void;
+  toggleExpand: (projectName: string, path: string) => void;
+  projectName: string | undefined;
+  onAction: (action: string, node: FileNode) => void;
+}
+
+export function useTreeKeyboardNav({
+  tree,
+  expandedPaths,
+  focusedPath,
+  setFocusedPath,
+  setExpanded,
+  toggleExpand,
+  projectName,
+  onAction,
+}: UseTreeKeyboardNavOptions) {
+  /** Flat list of visible nodes (respects expand state and compact folders) */
+  const visibleNodes = useMemo(() => {
+    const result: FileNode[] = [];
+    function walk(nodes: FileNode[]) {
+      const sorted = [...nodes].sort((a, b) => {
+        if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+        return a.name.localeCompare(b.name);
+      });
+      for (const n of sorted) {
+        // Skip compacted intermediate dirs (single-child chains rendered as one row)
+        let effective = n;
+        if (n.type === "directory" && expandedPaths.has(n.path) && n.children) {
+          while (
+            effective.children &&
+            effective.children.length === 1 &&
+            effective.children[0]!.type === "directory" &&
+            expandedPaths.has(effective.children[0]!.path)
+          ) {
+            effective = effective.children[0]!;
+          }
+        }
+        result.push(effective);
+        if (effective.type === "directory" && expandedPaths.has(effective.path) && effective.children) {
+          walk(effective.children);
+        }
+      }
+    }
+    walk(tree);
+    return result;
+  }, [tree, expandedPaths]);
+
+  const focusedNode = useMemo(
+    () => visibleNodes.find((n) => n.path === focusedPath) ?? null,
+    [visibleNodes, focusedPath],
+  );
+
+  function handleTreeKeyDown(e: KeyboardEvent) {
+    if (!projectName) return;
+    const target = e.target as HTMLElement;
+    if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
+
+    const idx = focusedPath != null ? visibleNodes.findIndex((n) => n.path === focusedPath) : -1;
+
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const next = idx < visibleNodes.length - 1 ? idx + 1 : 0;
+        setFocusedPath(visibleNodes[next]!.path);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const prev = idx > 0 ? idx - 1 : visibleNodes.length - 1;
+        setFocusedPath(visibleNodes[prev]!.path);
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        if (focusedNode?.type === "directory" && !expandedPaths.has(focusedNode.path)) {
+          toggleExpand(projectName, focusedNode.path);
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        if (focusedNode?.type === "directory" && expandedPaths.has(focusedNode.path)) {
+          setExpanded(focusedNode.path, false);
+        } else if (focusedNode) {
+          const parentPath = focusedNode.path.includes("/")
+            ? focusedNode.path.slice(0, focusedNode.path.lastIndexOf("/"))
+            : "";
+          if (parentPath || parentPath === "") {
+            const parent = visibleNodes.find((n) => n.path === parentPath);
+            if (parent) setFocusedPath(parent.path);
+          }
+        }
+        break;
+      }
+      case "Enter": {
+        e.preventDefault();
+        if (focusedNode) onAction(focusedNode.type === "directory" ? "toggle-expand" : "open-file", focusedNode);
+        break;
+      }
+      case "F2": {
+        e.preventDefault();
+        if (focusedNode) onAction("rename", focusedNode);
+        break;
+      }
+      case "Delete": {
+        e.preventDefault();
+        if (focusedNode) onAction("delete", focusedNode);
+        break;
+      }
+    }
+  }
+
+  return { visibleNodes, focusedNode, handleTreeKeyDown };
+}

package/src/web/components/layout/mobile-nav.tsx

@@ -20,6 +20,7 @@ import { useTabOverflow, getHiddenUnreadDirection } from "@/hooks/use-tab-overfl
 import { downloadFile } from "@/lib/file-download";
 import { FileActions } from "@/components/explorer/file-actions";
 import { api, projectUrl } from "@/lib/api-client";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 
 const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
   { type: "terminal", label: "Terminal" },
@@ -300,91 +301,79 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
       </div>
 
       {/* New tab action sheet */}
-      {newTabSheetOpen && (
-        <>
-          <div className="fixed inset-0 z-50" onClick={() => setNewTabSheetOpen(false)} />
-          <div className="fixed bottom-14 left-2 right-2 z-50 bg-surface border border-border rounded-lg shadow-lg overflow-hidden animate-in slide-in-from-bottom-2 duration-150">
-            <div className="px-3 py-2 text-xs text-text-secondary border-b border-border">New Tab</div>
-            {NEW_TAB_OPTIONS.map((opt) => {
-              const Icon = TAB_ICONS[opt.type];
-              return (
-                <button
-                  key={opt.type}
-                  onClick={() => handleNewTab(opt.type)}
-                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated"
-                >
-                  <Icon className="size-4" /> {opt.label}
-                </button>
-              );
-            })}
-          </div>
-        </>
-      )}
+      <BottomSheet open={newTabSheetOpen} onClose={() => setNewTabSheetOpen(false)}>
+        <div className="px-3 py-2 text-xs text-text-secondary border-b border-border">New Tab</div>
+        {NEW_TAB_OPTIONS.map((opt) => {
+          const Icon = TAB_ICONS[opt.type];
+          return (
+            <button
+              key={opt.type}
+              onClick={() => handleNewTab(opt.type)}
+              className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated"
+            >
+              <Icon className="size-4" /> {opt.label}
+            </button>
+          );
+        })}
+      </BottomSheet>
 
-      {/* Long-press action sheet */}
-      {menuTab && (
-        <>
-          {/* Backdrop */}
-          <div className="fixed inset-0 z-50" onClick={() => setMenuTabId(null)} />
-          {/* Action sheet */}
-          <div className="fixed bottom-14 left-2 right-2 z-50 bg-surface border border-border rounded-lg shadow-lg overflow-hidden animate-in slide-in-from-bottom-2 duration-150">
-            <div className="px-3 py-2 text-xs text-text-secondary border-b border-border truncate">
-              {menuTab.title}
-            </div>
-            {menuTab.type === "editor" && (
-              <>
-                <button onClick={() => handleFileAction(menuTab, "copy-path")}
-                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
-                  <Copy className="size-4" /> Copy Path
-                </button>
-                <button onClick={() => handleFileAction(menuTab, "download")}
-                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
-                  <Download className="size-4" /> Download
-                </button>
-                <button onClick={() => handleFileAction(menuTab, "rename")}
-                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
-                  <Pencil className="size-4" /> Rename
-                </button>
-                <button onClick={() => handleFileAction(menuTab, "delete")}
-                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-error active:bg-surface-elevated">
-                  <Trash2 className="size-4" /> Delete
-                </button>
-                <div className="h-px bg-border mx-2" />
-              </>
-            )}
-            {menuTab.closable && (
-              <button onClick={() => { usePanelStore.getState().closeTab(menuTabId!); setMenuTabId(null); }}
-                className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
-                <X className="size-4" /> Close
-              </button>
-            )}
-            {menuTabIdx > 0 && (
-              <button onClick={() => { moveTabLeft(menuTabId!); setMenuTabId(null); }}
-                className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
-                <ArrowLeft className="size-4" /> Move Left
-              </button>
-            )}
-            {menuTabIdx < menuTabPanelTabs.length - 1 && (
-              <button onClick={() => { moveTabRight(menuTabId!); setMenuTabId(null); }}
-                className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
-                <ArrowRight className="size-4" /> Move Right
-              </button>
-            )}
-            {canSplitDown && menuTabPanelTabs.length > 1 && (
-              <button onClick={() => { splitDown(menuTabId!); setMenuTabId(null); }}
-                className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
-                <SplitSquareVertical className="size-4" /> Split to Bottom
-              </button>
-            )}
-            {otherPanelIds.map((pid, i) => (
-              <button key={pid} onClick={() => { moveToPanel(menuTabId!, pid); setMenuTabId(null); }}
-                className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
-                <MoveVertical className="size-4" /> Move to Panel {i + 1 === 1 ? "Top" : "Bottom"}
-              </button>
-            ))}
-          </div>
-        </>
-      )}
+      {/* Long-press tab action sheet */}
+      <BottomSheet open={!!menuTab} onClose={() => setMenuTabId(null)}>
+        <div className="px-3 py-2 text-xs text-text-secondary border-b border-border truncate">
+          {menuTab?.title}
+        </div>
+        {menuTab?.type === "editor" && (
+          <>
+            <button onClick={() => handleFileAction(menuTab, "copy-path")}
+              className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+              <Copy className="size-4" /> Copy Path
+            </button>
+            <button onClick={() => handleFileAction(menuTab, "download")}
+              className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+              <Download className="size-4" /> Download
+            </button>
+            <button onClick={() => handleFileAction(menuTab, "rename")}
+              className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+              <Pencil className="size-4" /> Rename
+            </button>
+            <button onClick={() => handleFileAction(menuTab, "delete")}
+              className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-error active:bg-surface-elevated">
+              <Trash2 className="size-4" /> Delete
+            </button>
+            <div className="h-px bg-border mx-2" />
+          </>
+        )}
+        {menuTab?.closable && (
+          <button onClick={() => { usePanelStore.getState().closeTab(menuTabId!); setMenuTabId(null); }}
+            className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+            <X className="size-4" /> Close
+          </button>
+        )}
+        {menuTabIdx > 0 && (
+          <button onClick={() => { moveTabLeft(menuTabId!); setMenuTabId(null); }}
+            className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+            <ArrowLeft className="size-4" /> Move Left
+          </button>
+        )}
+        {menuTabIdx < menuTabPanelTabs.length - 1 && (
+          <button onClick={() => { moveTabRight(menuTabId!); setMenuTabId(null); }}
+            className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+            <ArrowRight className="size-4" /> Move Right
+          </button>
+        )}
+        {canSplitDown && menuTabPanelTabs.length > 1 && (
+          <button onClick={() => { splitDown(menuTabId!); setMenuTabId(null); }}
+            className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+            <SplitSquareVertical className="size-4" /> Split to Bottom
+          </button>
+        )}
+        {otherPanelIds.map((pid, i) => (
+          <button key={pid} onClick={() => { moveToPanel(menuTabId!, pid); setMenuTabId(null); }}
+            className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
+            <MoveVertical className="size-4" /> Move to Panel {i + 1 === 1 ? "Top" : "Bottom"}
+          </button>
+        ))}
+      </BottomSheet>
 
       {fileActionState && (
         <FileActions

package/src/web/components/layout/project-bottom-sheet.tsx

@@ -8,6 +8,7 @@ import { AddProjectForm } from "@/components/layout/add-project-form";
 import { resolveProjectColor, PROJECT_PALETTE } from "@/lib/project-palette";
 import { getProjectInitials } from "@/lib/project-avatar";
 import { cn } from "@/lib/utils";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 
 interface ProjectBottomSheetProps {
   isOpen: boolean;
@@ -170,29 +171,8 @@ export function ProjectBottomSheet({ isOpen, onClose }: ProjectBottomSheetProps)
 
   return (
     <>
-      {/* Backdrop */}
-      <div
-        className={cn(
-          "fixed inset-0 z-50 md:hidden transition-opacity duration-200",
-          isOpen ? "opacity-100" : "opacity-0 pointer-events-none",
-        )}
-        onClick={handleClose}
-        style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
-      />
-
-      {/* Sheet */}
-      <div
-        className={cn(
-          "fixed bottom-0 left-0 right-0 z-50 md:hidden bg-background rounded-t-2xl border-t border-border shadow-2xl",
-          "transition-transform duration-300 ease-out",
-          isOpen ? "translate-y-0" : "translate-y-full",
-        )}
-      >
-        {/* Drag handle */}
-        <div className="flex justify-center pt-3 pb-1">
-          <div className="w-10 h-1 rounded-full bg-border" />
-        </div>
-
+      {/* Main project sheet */}
+      <BottomSheet open={isOpen} onClose={handleClose} className="bg-background">
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-2 border-b border-border">
           <div className="flex items-center gap-2">
@@ -293,69 +273,68 @@ export function ProjectBottomSheet({ isOpen, onClose }: ProjectBottomSheetProps)
           </button>
           {version && <span className="text-xs text-text-subtle">v{version}</span>}
         </div>
-      </div>
+      </BottomSheet>
 
       {/* Long-press action sheet */}
-      {actionTarget && !colorPickerOpen && (
-        <>
-          <div className="fixed inset-0 z-[60] md:hidden" onClick={() => setActionTarget(null)} />
-          <div className="fixed bottom-0 left-0 right-0 z-[61] md:hidden bg-surface border-t border-border rounded-t-2xl shadow-2xl animate-in slide-in-from-bottom-2 duration-150">
-            <div className="px-4 py-2 border-b border-border">
-              <p className="text-xs font-medium text-text-secondary">{actionTarget}</p>
-            </div>
-            {actionItems.map((item) => {
-              const Icon = item.icon;
-              return (
-                <button
-                  key={item.label}
-                  onClick={item.onClick}
-                  className={cn(
-                    "w-full flex items-center gap-3 px-4 py-3 text-sm transition-colors active:bg-surface-elevated",
-                    item.destructive ? "text-destructive" : "text-foreground",
-                  )}
-                >
-                  <Icon className="size-4 shrink-0" />
-                  {item.label}
-                </button>
-              );
-            })}
-          </div>
-        </>
-      )}
+      <BottomSheet
+        open={!!actionTarget && !colorPickerOpen}
+        onClose={() => setActionTarget(null)}
+        zIndex={60}
+      >
+        <div className="px-4 py-2 border-b border-border">
+          <p className="text-xs font-medium text-text-secondary">{actionTarget}</p>
+        </div>
+        {actionItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <button
+              key={item.label}
+              onClick={item.onClick}
+              className={cn(
+                "w-full flex items-center gap-3 px-4 py-3 text-sm transition-colors active:bg-surface-elevated",
+                item.destructive ? "text-destructive" : "text-foreground",
+              )}
+            >
+              <Icon className="size-4 shrink-0" />
+              {item.label}
+            </button>
+          );
+        })}
+      </BottomSheet>
 
       {/* Color picker sheet */}
-      {colorPickerOpen && actionTarget && (
-        <>
-          <div className="fixed inset-0 z-[60] md:hidden" onClick={() => { setColorPickerOpen(false); setActionTarget(null); }} />
-          <div className="fixed bottom-0 left-0 right-0 z-[61] md:hidden bg-surface border-t border-border rounded-t-2xl shadow-2xl p-4 space-y-4">
-            <p className="text-sm font-medium">Change Color</p>
-            <div className="flex flex-wrap gap-3">
-              {PROJECT_PALETTE.map((c) => (
-                <button
-                  key={c}
-                  type="button"
-                  onClick={() => setActionColor(c)}
-                  className={cn(
-                    "size-9 rounded-full border-2 transition-all",
-                    actionColor === c ? "border-primary scale-110" : "border-transparent",
-                  )}
-                  style={{ background: c }}
-                />
-              ))}
-            </div>
-            <div className="flex gap-2 pt-2">
-              <button
-                onClick={() => { setColorPickerOpen(false); setActionTarget(null); }}
-                className="flex-1 py-2 text-sm text-text-secondary border border-border rounded-md"
-              >Cancel</button>
-              <button
-                onClick={() => handleColorSave(actionTarget, actionColor)}
-                className="flex-1 py-2 text-sm bg-primary text-white rounded-md"
-              >Save</button>
-            </div>
-          </div>
-        </>
-      )}
+      <BottomSheet
+        open={colorPickerOpen && !!actionTarget}
+        onClose={() => { setColorPickerOpen(false); setActionTarget(null); }}
+        zIndex={60}
+        className="p-4 space-y-4"
+      >
+        <p className="text-sm font-medium">Change Color</p>
+        <div className="flex flex-wrap gap-3">
+          {PROJECT_PALETTE.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => setActionColor(c)}
+              className={cn(
+                "size-9 rounded-full border-2 transition-all",
+                actionColor === c ? "border-primary scale-110" : "border-transparent",
+              )}
+              style={{ background: c }}
+            />
+          ))}
+        </div>
+        <div className="flex gap-2 pt-2">
+          <button
+            onClick={() => { setColorPickerOpen(false); setActionTarget(null); }}
+            className="flex-1 py-2 text-sm text-text-secondary border border-border rounded-md"
+          >Cancel</button>
+          <button
+            onClick={() => handleColorSave(actionTarget!, actionColor)}
+            className="flex-1 py-2 text-sm bg-primary text-white rounded-md"
+          >Save</button>
+        </div>
+      </BottomSheet>
     </>
   );
 }