@hienlh/ppm 0.13.15 → 0.13.16

package/src/web/components/ui/adaptive-context-menu.tsx

@@ -0,0 +1,245 @@
+/**
+ * AdaptiveContextMenu — drop-in replacement for radix ContextMenu.
+ * Desktop: standard right-click context menu (radix).
+ * Mobile: long-press opens a bottom sheet.
+ *
+ * Usage: import from this file instead of "@/components/ui/context-menu".
+ * Same component names, same API — behavior adapts automatically.
+ */
+import React, { useState, useRef, useCallback, type ReactNode } from "react";
+import * as Radix from "./context-menu";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { cn } from "@/lib/utils";
+import {
+  BottomSheet,
+  BottomSheetCtx,
+  BottomSheetItem,
+  BottomSheetSeparator,
+  BottomSheetSubLabel,
+  BottomSheetSubContent,
+} from "./mobile-bottom-sheet";
+
+const LONG_PRESS_MS = 500;
+
+const IsMobileCtx = React.createContext(false);
+
+/* ------------------------------------------------------------------ */
+/*  Root                                                               */
+/* ------------------------------------------------------------------ */
+
+function ContextMenu({ children, ...props }: React.ComponentProps<typeof Radix.ContextMenu>) {
+  const isMobile = useIsMobile();
+  const [open, setOpen] = useState(false);
+
+  if (!isMobile) {
+    return <Radix.ContextMenu {...props}>{children}</Radix.ContextMenu>;
+  }
+
+  return (
+    <IsMobileCtx.Provider value={true}>
+      <BottomSheetCtx.Provider value={{ open, setOpen }}>
+        {children}
+      </BottomSheetCtx.Provider>
+    </IsMobileCtx.Provider>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Trigger                                                            */
+/* ------------------------------------------------------------------ */
+
+function ContextMenuTrigger({
+  children,
+  asChild,
+  ...props
+}: React.ComponentProps<typeof Radix.ContextMenuTrigger>) {
+  const isMobile = React.useContext(IsMobileCtx);
+  const { setOpen } = React.useContext(BottomSheetCtx);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+  const suppressRef = useRef(false);
+
+  if (!isMobile) {
+    return (
+      <Radix.ContextMenuTrigger asChild={asChild} {...props}>
+        {children}
+      </Radix.ContextMenuTrigger>
+    );
+  }
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      e.stopPropagation(); // prevent parent triggers from also firing
+      suppressRef.current = false;
+      timerRef.current = setTimeout(() => {
+        setOpen(true);
+        suppressRef.current = true;
+      }, LONG_PRESS_MS);
+    },
+    [setOpen],
+  );
+
+  const handleTouchMove = useCallback(() => {
+    clearTimeout(timerRef.current);
+  }, []);
+
+  const handleTouchEnd = useCallback(() => {
+    clearTimeout(timerRef.current);
+  }, []);
+
+  const handleClickCapture = useCallback((e: React.MouseEvent) => {
+    if (suppressRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      suppressRef.current = false;
+    }
+  }, []);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  return (
+    <div
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+      onClickCapture={handleClickCapture}
+      onContextMenu={handleContextMenu}
+      className="contents"
+    >
+      {children}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Content                                                            */
+/* ------------------------------------------------------------------ */
+
+function ContextMenuContent({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Radix.ContextMenuContent>) {
+  const isMobile = React.useContext(IsMobileCtx);
+  if (!isMobile) {
+    return (
+      <Radix.ContextMenuContent className={className} {...props}>
+        {children}
+      </Radix.ContextMenuContent>
+    );
+  }
+  const { open, setOpen } = React.useContext(BottomSheetCtx);
+  return (
+    <BottomSheet open={open} onClose={() => setOpen(false)} className={cn("p-2", className)}>
+      <div className="max-h-[60vh] overflow-y-auto">{children}</div>
+    </BottomSheet>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Item                                                               */
+/* ------------------------------------------------------------------ */
+
+function ContextMenuItem({
+  children,
+  className,
+  variant,
+  onClick,
+  disabled,
+  ...props
+}: React.ComponentProps<typeof Radix.ContextMenuItem> & {
+  variant?: "default" | "destructive";
+}) {
+  const isMobile = React.useContext(IsMobileCtx);
+  if (!isMobile) {
+    return (
+      <Radix.ContextMenuItem className={className} variant={variant} disabled={disabled} onClick={onClick} {...props}>
+        {children}
+      </Radix.ContextMenuItem>
+    );
+  }
+  return (
+    <BottomSheetItem
+      className={className}
+      variant={variant}
+      disabled={disabled}
+      onClick={onClick as unknown as (e: React.MouseEvent) => void}
+    >
+      {children}
+    </BottomSheetItem>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Separator                                                          */
+/* ------------------------------------------------------------------ */
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Radix.ContextMenuSeparator>) {
+  const isMobile = React.useContext(IsMobileCtx);
+  if (!isMobile) {
+    return <Radix.ContextMenuSeparator className={className} {...props} />;
+  }
+  return <BottomSheetSeparator className={className} />;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Sub-menu (flattened on mobile)                                     */
+/* ------------------------------------------------------------------ */
+
+function ContextMenuSub({ children, ...props }: React.ComponentProps<typeof Radix.ContextMenuSub>) {
+  const isMobile = React.useContext(IsMobileCtx);
+  if (!isMobile) return <Radix.ContextMenuSub {...props}>{children}</Radix.ContextMenuSub>;
+  return <>{children}</>;
+}
+
+function ContextMenuSubTrigger({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Radix.ContextMenuSubTrigger>) {
+  const isMobile = React.useContext(IsMobileCtx);
+  if (!isMobile) {
+    return (
+      <Radix.ContextMenuSubTrigger className={className} {...props}>
+        {children}
+      </Radix.ContextMenuSubTrigger>
+    );
+  }
+  return <BottomSheetSubLabel className={className}>{children}</BottomSheetSubLabel>;
+}
+
+function ContextMenuSubContent({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Radix.ContextMenuSubContent>) {
+  const isMobile = React.useContext(IsMobileCtx);
+  if (!isMobile) {
+    return (
+      <Radix.ContextMenuSubContent className={className} {...props}>
+        {children}
+      </Radix.ContextMenuSubContent>
+    );
+  }
+  return <BottomSheetSubContent className={className}>{children}</BottomSheetSubContent>;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Exports                                                            */
+/* ------------------------------------------------------------------ */
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+};

package/src/web/components/ui/mobile-bottom-sheet.tsx

@@ -0,0 +1,155 @@
+/**
+ * Reusable mobile bottom sheet component.
+ * Shell: portal + backdrop + slide-up panel + drag handle + swipe-to-dismiss.
+ * Content is fully consumer-controlled.
+ *
+ * Also exports context-menu-specific sub-components (BottomSheetItem, etc.)
+ * used by adaptive-context-menu.tsx.
+ */
+import { createContext, useContext, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/lib/utils";
+import { useSwipeToDismiss } from "@/hooks/use-swipe-to-dismiss";
+
+/* ------------------------------------------------------------------ */
+/*  Core BottomSheet — reusable everywhere                             */
+/* ------------------------------------------------------------------ */
+
+interface BottomSheetProps {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  className?: string;
+  /** Override z-index for stacked sheets (default: z-50) */
+  zIndex?: number;
+}
+
+/**
+ * General-purpose bottom sheet with swipe-to-dismiss.
+ * Renders portal + backdrop + rounded panel + drag handle.
+ * Put any content inside — headers, lists, forms, etc.
+ */
+export function BottomSheet({ open, onClose, children, className, zIndex = 50 }: BottomSheetProps) {
+  const { dragY, swipeHandlers, dragStyle, backdropOpacity, isDragging } =
+    useSwipeToDismiss(onClose);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0" style={{ zIndex }} onClick={onClose}>
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/40 animate-in fade-in-0 duration-200"
+        style={isDragging ? { opacity: backdropOpacity } : undefined}
+      />
+      {/* Panel */}
+      <div
+        className={cn(
+          "absolute bottom-0 left-0 right-0 rounded-t-2xl bg-popover border-t border-border",
+          "pb-[max(0.5rem,env(safe-area-inset-bottom))]",
+          !isDragging && "animate-in slide-in-from-bottom duration-200",
+          className,
+        )}
+        style={dragStyle}
+        onClick={(e) => e.stopPropagation()}
+        {...swipeHandlers}
+      >
+        {/* Drag handle */}
+        <div className="flex justify-center pt-3 pb-1">
+          <div className="w-10 h-1 rounded-full bg-border" />
+        </div>
+        {children}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Context-menu-specific helpers (used by adaptive-context-menu)       */
+/* ------------------------------------------------------------------ */
+
+/** Context for adaptive-context-menu to pass open/close state */
+export interface BottomSheetState {
+  open: boolean;
+  setOpen: (v: boolean) => void;
+}
+
+export const BottomSheetCtx = createContext<BottomSheetState>({
+  open: false,
+  setOpen: () => {},
+});
+
+/** Menu item styled for touch (44px+ height), auto-closes sheet on click */
+export function BottomSheetItem({
+  children,
+  onClick,
+  variant,
+  className,
+  disabled,
+}: {
+  children: ReactNode;
+  onClick?: (e: React.MouseEvent) => void;
+  variant?: "default" | "destructive";
+  className?: string;
+  disabled?: boolean;
+}) {
+  const { setOpen } = useContext(BottomSheetCtx);
+
+  return (
+    <button
+      disabled={disabled}
+      className={cn(
+        "flex w-full items-center gap-2 rounded-lg px-3 py-3 text-sm text-left",
+        "active:bg-accent transition-colors select-none",
+        "disabled:pointer-events-none disabled:opacity-50",
+        variant === "destructive" && "text-destructive",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      onClick={(e) => {
+        onClick?.(e);
+        setOpen(false);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+/** Separator line */
+export function BottomSheetSeparator({ className }: { className?: string }) {
+  return <div className={cn("-mx-1 my-1 h-px bg-border", className)} />;
+}
+
+/** Sub-menu label (flattened on mobile) */
+export function BottomSheetSubLabel({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 px-3 py-2 text-xs font-medium text-muted-foreground select-none",
+        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Sub-menu content wrapper (indented on mobile) */
+export function BottomSheetSubContent({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("pl-2", className)}>{children}</div>;
+}

package/src/web/hooks/use-is-mobile.ts

@@ -0,0 +1,28 @@
+/**
+ * Centralized mobile detection hook.
+ * Returns true when viewport width < 768px (Tailwind md breakpoint).
+ * Reactive — updates on window resize.
+ */
+import { useSyncExternalStore } from "react";
+
+function subscribe(cb: () => void) {
+  window.addEventListener("resize", cb);
+  return () => window.removeEventListener("resize", cb);
+}
+
+function getSnapshot() {
+  return typeof window !== "undefined" && window.innerWidth < 768;
+}
+
+function getServerSnapshot() {
+  return false;
+}
+
+export function useIsMobile() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+/** Non-hook check for use outside React components */
+export function isMobileDevice() {
+  return typeof window !== "undefined" && window.innerWidth < 768;
+}

package/src/web/hooks/use-swipe-to-dismiss.ts

@@ -0,0 +1,46 @@
+/**
+ * Hook for swipe-down-to-dismiss gesture on mobile bottom sheets.
+ * Returns touch handlers, drag offset, and style helpers.
+ */
+import { useRef, useCallback, useState } from "react";
+
+const DISMISS_THRESHOLD = 80;
+
+export function useSwipeToDismiss(onDismiss: () => void) {
+  const [dragY, setDragY] = useState(0);
+  const startYRef = useRef(0);
+  const draggingRef = useRef(false);
+
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    startYRef.current = e.touches[0]!.clientY;
+    draggingRef.current = true;
+    setDragY(0);
+  }, []);
+
+  const handleTouchMove = useCallback((e: React.TouchEvent) => {
+    if (!draggingRef.current) return;
+    const dy = e.touches[0]!.clientY - startYRef.current;
+    setDragY(Math.max(0, dy));
+  }, []);
+
+  const handleTouchEnd = useCallback(() => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    if (dragY >= DISMISS_THRESHOLD) {
+      onDismiss();
+    }
+    setDragY(0);
+  }, [dragY, onDismiss]);
+
+  return {
+    dragY,
+    swipeHandlers: {
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+    },
+    dragStyle: dragY > 0 ? { transform: `translateY(${dragY}px)` } as const : undefined,
+    backdropOpacity: dragY > 0 ? Math.max(0, 1 - dragY / 300) : 1,
+    isDragging: dragY > 0,
+  };
+}

package/src/web/stores/file-store.ts

@@ -16,6 +16,21 @@ export interface FileNode {
   ignored?: boolean;
 }
 
+/** State for inline create/rename in the file tree */
+export interface InlineAction {
+  type: "new-file" | "new-folder" | "rename";
+  /** Parent directory path (for new-file/new-folder) or parent of the renamed file */
+  parentPath: string;
+  /** Existing node being renamed (only for type=rename) */
+  existingNode?: FileNode;
+}
+
+/** Clipboard state for cut/copy/paste */
+export interface ClipboardState {
+  paths: string[];
+  operation: "cut" | "copy";
+}
+
 interface FileStore {
   tree: FileNode[];
   fileIndex: FileEntry[];
@@ -27,7 +42,14 @@ interface FileStore {
   inflight: Map<string, AbortController>;
   indexStatus: "idle" | "loading" | "ready" | "error";
   selectedFiles: string[];
+  inlineAction: InlineAction | null;
+  clipboard: ClipboardState | null;
+  focusedPath: string | null;
 
+  setInlineAction(action: InlineAction | null): void;
+  clearInlineAction(): void;
+  setClipboard(clipboard: ClipboardState | null): void;
+  setFocusedPath(path: string | null): void;
   loadRoot(projectName: string): Promise<void>;
   loadChildren(projectName: string, folderPath: string): Promise<void>;
   loadIndex(projectName: string): Promise<void>;
@@ -35,7 +57,9 @@ interface FileStore {
   invalidateFolder(projectName: string, folderPath: string): Promise<void>;
   toggleExpand(projectName: string, path: string): void;
   setExpanded(path: string, expanded: boolean): void;
+  collapseAll(): void;
   toggleFileSelect(path: string): void;
+  setSelectedFiles(paths: string[]): void;
   clearSelection(): void;
   reset(): void;
   /** @deprecated Use loadRoot instead */
@@ -52,6 +76,14 @@ export const useFileStore = create<FileStore>((set, get) => ({
   inflight: new Map<string, AbortController>(),
   indexStatus: "idle",
   selectedFiles: [],
+  inlineAction: null,
+  clipboard: null,
+  focusedPath: null,
+
+  setInlineAction: (action) => set({ inlineAction: action }),
+  clearInlineAction: () => set({ inlineAction: null }),
+  setClipboard: (clipboard) => set({ clipboard }),
+  setFocusedPath: (path) => set({ focusedPath: path }),
 
   loadRoot: async (projectName: string) => {
     set({ loading: true, error: null });
@@ -169,18 +201,22 @@ export const useFileStore = create<FileStore>((set, get) => ({
     set({ expandedPaths: paths });
   },
 
+  collapseAll: () => {
+    set({ expandedPaths: new Set<string>() });
+  },
+
   toggleFileSelect: (path: string) => {
     const current = get().selectedFiles;
     const idx = current.indexOf(path);
     if (idx >= 0) {
       set({ selectedFiles: current.filter((p) => p !== path) });
     } else {
-      // Max 2 selected files
-      const next = current.length >= 2 ? [current[1]!, path] : [...current, path];
-      set({ selectedFiles: next });
+      set({ selectedFiles: [...current, path] });
     }
   },
 
+  setSelectedFiles: (paths) => set({ selectedFiles: paths }),
+
   clearSelection: () => set({ selectedFiles: [] }),
 
   reset: () => {
@@ -196,6 +232,9 @@ export const useFileStore = create<FileStore>((set, get) => ({
       inflight: new Map(),
       indexStatus: "idle",
       selectedFiles: [],
+      inlineAction: null,
+      clipboard: null,
+      focusedPath: null,
     });
   },
 
@@ -205,3 +244,35 @@ export const useFileStore = create<FileStore>((set, get) => ({
     get().loadIndex(projectName);
   },
 }));
+
+/** Compute flat visible path list from current tree state (for range selection) */
+export function getVisiblePaths(): string[] {
+  const { tree, expandedPaths } = useFileStore.getState();
+  const result: string[] = [];
+  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 (matches compact folder rendering)
+      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.path);
+      if (effective.type === "directory" && expandedPaths.has(effective.path) && effective.children) {
+        walk(effective.children);
+      }
+    }
+  }
+  walk(tree);
+  return result;
+}