@hienlh/ppm 0.17.57 → 0.18.1

package/src/web/components/os-explorer/use-coarse-long-press.ts

@@ -0,0 +1,97 @@
+/**
+ * Long-press → context menu on touch screens that are wide enough to get the desktop
+ * layout (an iPad is ≥ 768 px, so `useIsMobile` is false and the bottom-sheet path never
+ * runs). Radix opens its own menu on long-press but only after 700 ms; the design rules
+ * ask for 400 ms, so the press is timed here and delivered as a synthetic `contextmenu`
+ * event, which is exactly what the trigger already listens for.
+ *
+ * Attached only when the primary pointer is coarse — a mouse keeps plain right-click.
+ */
+
+import { useCallback, useEffect, useRef, useState, type MouseEvent, type TouchEvent } from "react";
+
+const LONG_PRESS_MS = 400;
+/** Finger travel that turns a press into a scroll instead. */
+const MOVE_TOLERANCE_PX = 10;
+
+export function usePrefersCoarsePointer(): boolean {
+  const [coarse, setCoarse] = useState(
+    () => typeof window !== "undefined" && window.matchMedia?.("(pointer: coarse)").matches === true,
+  );
+  useEffect(() => {
+    const query = window.matchMedia?.("(pointer: coarse)");
+    if (!query) return;
+    const update = () => setCoarse(query.matches);
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+  return coarse;
+}
+
+export interface LongPressHandlers {
+  onTouchStart?(event: TouchEvent): void;
+  onTouchMove?(event: TouchEvent): void;
+  onTouchEnd?(event: TouchEvent): void;
+  onContextMenu?(event: MouseEvent): void;
+}
+
+/**
+ * Handlers to spread on a row. `onBeforeOpen` runs first so the menu acts on the pressed
+ * row rather than whatever was selected before.
+ */
+export function useCoarseLongPress(onBeforeOpen?: () => void): LongPressHandlers {
+  const coarse = usePrefersCoarsePointer();
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const origin = useRef<{ x: number; y: number } | null>(null);
+  const fired = useRef(false);
+
+  const cancel = useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+
+  useEffect(() => cancel, [cancel]);
+
+  const start = useCallback(
+    (event: TouchEvent) => {
+      const touch = event.touches[0];
+      if (!touch) return;
+      const target = event.currentTarget as HTMLElement;
+      origin.current = { x: touch.clientX, y: touch.clientY };
+      fired.current = false;
+      cancel();
+      timer.current = setTimeout(() => {
+        fired.current = true;
+        onBeforeOpen?.();
+        target.dispatchEvent(
+          new MouseEvent("contextmenu", {
+            bubbles: true,
+            cancelable: true,
+            clientX: touch.clientX,
+            clientY: touch.clientY,
+          }),
+        );
+      }, LONG_PRESS_MS);
+    },
+    [cancel, onBeforeOpen],
+  );
+
+  const move = useCallback(
+    (event: TouchEvent) => {
+      const touch = event.touches[0];
+      if (!touch || !origin.current) return;
+      const moved =
+        Math.abs(touch.clientX - origin.current.x) > MOVE_TOLERANCE_PX ||
+        Math.abs(touch.clientY - origin.current.y) > MOVE_TOLERANCE_PX;
+      if (moved) cancel();
+    },
+    [cancel],
+  );
+
+  if (!coarse) return {};
+  return {
+    onTouchStart: start,
+    onTouchMove: move,
+    onTouchEnd: cancel,
+  };
+}

package/src/web/components/os-explorer/use-explorer-keyboard.ts

@@ -0,0 +1,124 @@
+/**
+ * Keyboard behaviour for an explorer view container, shared by every view mode.
+ *
+ * Bound to the scrolling element rather than the window so two open explorers never both
+ * react to the same key, and so PPM's global shortcuts keep working when focus is
+ * elsewhere.
+ */
+
+import { useCallback } from "react";
+import type { KeyboardEvent } from "react";
+import type { FsEntry } from "@/lib/fs-api";
+import type { ExplorerActions } from "./actions/use-explorer-actions";
+import type { ExplorerSlice } from "./explorer-store";
+import type { ExplorerNavigation } from "./use-explorer-navigation";
+import type { EntrySelection } from "./views/use-entry-selection";
+
+export interface ExplorerKeyboardOptions {
+  /** Undefined for the one frame before the window has a slice. */
+  slice: ExplorerSlice | undefined;
+  /** Rows in visible order. */
+  entries: FsEntry[];
+  actions: ExplorerActions;
+  selection: EntrySelection;
+  nav: ExplorerNavigation;
+}
+
+/** Entries the keyboard acts on: the selection, or the cursor row when nothing is selected. */
+export function activeEntries(slice: ExplorerSlice, entries: FsEntry[]): FsEntry[] {
+  if (slice.selection.size > 0) return entries.filter((e) => slice.selection.has(e.path));
+  const cursor = entries.find((e) => e.path === slice.anchor);
+  return cursor ? [cursor] : [];
+}
+
+export function useExplorerKeyboard({
+  slice, entries, actions, selection, nav,
+}: ExplorerKeyboardOptions): (event: KeyboardEvent) => void {
+  return useCallback(
+    (event: KeyboardEvent) => {
+      if (!slice) return;
+      // The inline rename field and the filter box own their own keys.
+      const target = event.target as HTMLElement;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) return;
+
+      const mod = event.ctrlKey || event.metaKey;
+      const targets = activeEntries(slice, entries);
+
+      if (mod) {
+        switch (event.key.toLowerCase()) {
+          case "a":
+            event.preventDefault();
+            selection.selectAll();
+            return;
+          case "c":
+            event.preventDefault();
+            actions.copy(targets);
+            return;
+          case "x":
+            event.preventDefault();
+            actions.cut(targets);
+            return;
+          case "v":
+            event.preventDefault();
+            actions.paste();
+            return;
+          default:
+            return; // leave every other accelerator to the app
+        }
+      }
+
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          selection.moveTo(1, event.shiftKey);
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          selection.moveTo(-1, event.shiftKey);
+          return;
+        case "Home":
+          event.preventDefault();
+          if (entries[0]) selection.selectOnly(entries[0].path);
+          return;
+        case "End":
+          event.preventDefault();
+          if (entries.length > 0) selection.selectOnly(entries[entries.length - 1]!.path);
+          return;
+        case "ArrowLeft":
+          if (event.altKey) { event.preventDefault(); nav.back(); }
+          return;
+        case "ArrowRight":
+          if (event.altKey) { event.preventDefault(); nav.forward(); }
+          return;
+        case "Backspace":
+          event.preventDefault();
+          nav.back();
+          return;
+        case "Enter":
+          event.preventDefault();
+          if (targets.length === 1) actions.openEntry(targets[0]!);
+          return;
+        case "F2":
+          event.preventDefault();
+          if (targets.length === 1) actions.startRename(targets[0]!);
+          return;
+        case "Delete":
+          event.preventDefault();
+          if (targets.length === 0) return;
+          if (event.shiftKey) actions.confirmPermanentDelete(targets);
+          else actions.trash(targets);
+          return;
+        case "Escape":
+          selection.clear();
+          return;
+      }
+
+      // Type-ahead: a single printable character with no modifier jumps to a name.
+      if (event.key.length === 1 && !event.altKey) {
+        event.preventDefault();
+        selection.typeAhead(event.key);
+      }
+    },
+    [slice, entries, actions, selection, nav],
+  );
+}

package/src/web/components/os-explorer/use-explorer-navigation.ts

@@ -0,0 +1,155 @@
+/**
+ * Directory navigation for one explorer window: fetching, history, and cross-window
+ * refresh.
+ *
+ * Two requests for the same window must never race: a slow `C:\Windows\System32` listing
+ * arriving after the user already stepped into another folder would repaint stale rows.
+ * Each fetch therefore aborts the previous one and re-checks its own identity before
+ * writing to the store.
+ */
+
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { fsApi, FsError } from "@/lib/fs-api";
+import { useWindowStore } from "@/components/floating-window/window-store";
+import { onFsChanged, useExplorerStore, type ExplorerSlice } from "./explorer-store";
+
+export interface ExplorerNavigation {
+  go(path: string, opts?: { replace?: boolean }): void;
+  back(): void;
+  forward(): void;
+  up(): void;
+  refresh(): void;
+  canGoBack: boolean;
+  canGoForward: boolean;
+}
+
+export function useExplorerNavigation(
+  windowId: string,
+  slice: ExplorerSlice | undefined,
+  showHidden: boolean,
+): ExplorerNavigation {
+  const abortRef = useRef<AbortController | null>(null);
+  const patch = useExplorerStore((s) => s.patch);
+
+  // The load target is read from a ref so `load` keeps a stable identity: it is a
+  // dependency of the fsChanged subscription, which must not resubscribe per keystroke.
+  const pathRef = useRef(slice?.path ?? "");
+  pathRef.current = slice?.path ?? "";
+  const hiddenRef = useRef(showHidden);
+  hiddenRef.current = showHidden;
+
+  const load = useCallback(
+    async (path: string) => {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      patch(windowId, { loading: true, error: null });
+      try {
+        const result = await fsApi.browse(path, {
+          showHidden: hiddenRef.current,
+          signal: controller.signal,
+        });
+        if (controller.signal.aborted) return;
+        patch(windowId, {
+          entries: result.entries,
+          breadcrumbs: result.breadcrumbs,
+          parent: result.parent,
+          sep: result.sep,
+          truncated: result.truncated === true,
+          loading: false,
+          error: null,
+        });
+      } catch (e) {
+        if (controller.signal.aborted || (e instanceof DOMException && e.name === "AbortError")) return;
+        patch(windowId, {
+          loading: false,
+          entries: [],
+          error:
+            e instanceof FsError
+              ? { message: e.message, code: e.code, hint: e.hint }
+              : { message: e instanceof Error ? e.message : "Failed to read directory", code: "EUNKNOWN" },
+        });
+      }
+    },
+    [windowId, patch],
+  );
+
+  // Fetch whenever the target directory or the hidden-files preference changes.
+  const path = slice?.path;
+  useEffect(() => {
+    if (!path) return;
+    void load(path);
+    return () => abortRef.current?.abort();
+  }, [path, showHidden, load]);
+
+  // Another window (or this one) mutated a directory we are displaying.
+  useEffect(() => {
+    return onFsChanged((dir) => {
+      if (dir === pathRef.current) void load(dir);
+    });
+  }, [load]);
+
+  const go = useCallback(
+    (target: string, opts?: { replace?: boolean }) => {
+      const current = useExplorerStore.getState().slices[windowId];
+      if (!current || target === current.path) return;
+      const history = opts?.replace
+        ? [...current.history.slice(0, current.historyIndex), target]
+        : [...current.history.slice(0, current.historyIndex + 1), target];
+      patch(windowId, {
+        path: target,
+        history: history.slice(-100),
+        historyIndex: Math.min(history.length, 100) - 1,
+        selection: new Set(),
+        anchor: null,
+        filter: "",
+        inlineEdit: null,
+      });
+      // Keeps the titlebar in step and makes the window reopen here after a reload.
+      useWindowStore.getState().setPayload(windowId, { path: target });
+    },
+    [windowId, patch],
+  );
+
+  const step = useCallback(
+    (delta: number) => {
+      const current = useExplorerStore.getState().slices[windowId];
+      if (!current) return;
+      const index = current.historyIndex + delta;
+      const target = current.history[index];
+      if (target == null) return;
+      patch(windowId, {
+        path: target,
+        historyIndex: index,
+        selection: new Set(),
+        anchor: null,
+        filter: "",
+        inlineEdit: null,
+      });
+      useWindowStore.getState().setPayload(windowId, { path: target });
+    },
+    [windowId, patch],
+  );
+
+  const back = useCallback(() => step(-1), [step]);
+  const forward = useCallback(() => step(1), [step]);
+
+  const up = useCallback(() => {
+    const current = useExplorerStore.getState().slices[windowId];
+    if (current?.parent) go(current.parent);
+  }, [windowId, go]);
+
+  const refresh = useCallback(() => {
+    if (pathRef.current) void load(pathRef.current);
+  }, [load]);
+
+  const canGoBack = (slice?.historyIndex ?? 0) > 0;
+  const canGoForward = slice ? slice.historyIndex < slice.history.length - 1 : false;
+
+  // A fresh object every render would defeat memo(ListRow) (it receives this as a prop
+  // several levels down) even though the callbacks themselves are already stable.
+  return useMemo(
+    () => ({ go, back, forward, up, refresh, canGoBack, canGoForward }),
+    [go, back, forward, up, refresh, canGoBack, canGoForward],
+  );
+}

package/src/web/components/os-explorer/use-explorer-open-state.ts

@@ -0,0 +1,67 @@
+/**
+ * Global open/close state for the single mobile explorer sheet, plus its one UI-only mode
+ * flag ("Select").
+ *
+ * Desktop windows are many and multiplex through `useWindowStore`; the mobile sheet is
+ * always exactly one instance (`windowId = MOBILE_EXPLORER_WINDOW_ID`), so a tiny dedicated
+ * store is simpler than threading a "mobile" window kind through the desktop window model.
+ */
+
+import { create } from "zustand";
+import { useExplorerStore } from "./explorer-store";
+import { cachedHomedir, getHostInfo } from "./use-host-info";
+
+/** The one explorer-store slice id the mobile sheet ever uses. */
+export const MOBILE_EXPLORER_WINDOW_ID = "mobile";
+
+interface MobileExplorerOpenState {
+  isOpen: boolean;
+  /** "Select" toolbar mode: rows show checkboxes and a tap toggles selection instead of opening. */
+  selectMode: boolean;
+  close(): void;
+  setSelectMode(value: boolean): void;
+}
+
+export const useMobileExplorerOpenState = create<MobileExplorerOpenState>((set) => ({
+  isOpen: false,
+  selectMode: false,
+  close: () => set({ isOpen: false, selectMode: false }),
+  setSelectMode: (value) => set({ selectMode: value }),
+}));
+
+/**
+ * Open the mobile sheet, landing on `path`. With no path: an already-open-before instance
+ * resumes wherever it was (the slice survives a close, since only `isOpen` is reset), and a
+ * first-ever open falls back to the host home directory — same resolution order as the
+ * desktop facade.
+ */
+export async function openMobileExplorer(path?: string): Promise<void> {
+  const store = useExplorerStore.getState();
+  const existing = store.slices[MOBILE_EXPLORER_WINDOW_ID];
+  let target = path ?? existing?.path ?? cachedHomedir();
+  if (!target) {
+    try {
+      target = (await getHostInfo()).homedir;
+    } catch {
+      return; // No usable starting directory — nothing sensible to open.
+    }
+  }
+
+  if (!existing) {
+    store.ensure(MOBILE_EXPLORER_WINDOW_ID, target);
+  } else if (path && existing.path !== path) {
+    // Jump an already-open instance to a new path, mirroring what `nav.go` does for a
+    // window: fresh history, cleared selection — this is a new place, not a back/forward step.
+    store.patch(MOBILE_EXPLORER_WINDOW_ID, {
+      path: target,
+      history: [target],
+      historyIndex: 0,
+      selection: new Set(),
+      anchor: null,
+      filter: "",
+      inlineEdit: null,
+    });
+  }
+
+  useMobileExplorerOpenState.setState({ isOpen: true, selectMode: false });
+}

package/src/web/components/os-explorer/use-host-info.ts

@@ -0,0 +1,85 @@
+/**
+ * Host facts (platform, separator, home, drives, known folders, OS pins) for the sidebar.
+ *
+ * Every explorer window needs the same answer, and the server call spawns PowerShell /
+ * plutil / findmnt, so the result is cached module-wide and the in-flight promise is
+ * shared: N windows opening at once produce exactly one request.
+ */
+
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api-client";
+import type { HostInfo } from "../../../types/system";
+
+const CACHE_TTL_MS = 60_000;
+
+let cached: { at: number; value: HostInfo } | null = null;
+let inFlight: Promise<HostInfo> | null = null;
+const subscribers = new Set<(value: HostInfo) => void>();
+
+function fetchHostInfo(): Promise<HostInfo> {
+  if (cached && Date.now() - cached.at < CACHE_TTL_MS) return Promise.resolve(cached.value);
+  if (inFlight) return inFlight;
+  inFlight = api
+    .get<HostInfo>("/api/system/host")
+    .then((value) => {
+      cached = { at: Date.now(), value };
+      for (const notify of subscribers) notify(value);
+      return value;
+    })
+    .finally(() => {
+      inFlight = null;
+    });
+  return inFlight;
+}
+
+export interface HostInfoState {
+  host: HostInfo | null;
+  loading: boolean;
+  error: string | null;
+}
+
+export function useHostInfo(): HostInfoState {
+  const [state, setState] = useState<HostInfoState>(() => ({
+    host: cached?.value ?? null,
+    loading: cached == null,
+    error: null,
+  }));
+
+  useEffect(() => {
+    let alive = true;
+    const notify = (value: HostInfo) => {
+      if (alive) setState({ host: value, loading: false, error: null });
+    };
+    subscribers.add(notify);
+    fetchHostInfo()
+      .then(notify)
+      .catch((e: unknown) => {
+        if (alive) {
+          setState({
+            host: null,
+            loading: false,
+            error: e instanceof Error ? e.message : "Failed to read host info",
+          });
+        }
+      });
+    return () => {
+      alive = false;
+      subscribers.delete(notify);
+    };
+  }, []);
+
+  return state;
+}
+
+/**
+ * Host info for callers outside React (command palette, nav rail): resolves from cache
+ * when warm, otherwise fetches. Used to pick a sensible starting directory.
+ */
+export function getHostInfo(): Promise<HostInfo> {
+  return fetchHostInfo();
+}
+
+/** Best-effort home directory without waiting for the server. */
+export function cachedHomedir(): string | null {
+  return cached?.value.homedir ?? null;
+}

package/src/web/components/os-explorer/views/column-row.tsx

@@ -0,0 +1,126 @@
+/**
+ * One row inside a Miller column: icon, name, a drill-in chevron for directories. Split out
+ * of `column-view-column.tsx` to keep that file under the size budget — the column container
+ * and one of its rows are different concerns (virtualised layout vs. a single interactive
+ * element).
+ */
+
+import { forwardRef, useContext, type HTMLAttributes } from "react";
+import { BottomSheetCtx } from "@/components/ui/mobile-bottom-sheet";
+import { ContextMenu, ContextMenuTrigger } from "@/components/ui/adaptive-context-menu";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import type { FsEntry } from "@/lib/fs-api";
+import { cn } from "@/lib/utils";
+import type { ExplorerActions } from "../actions/use-explorer-actions";
+import { DROP_TARGET_CLASS } from "../dnd/drop-target-style";
+import { useEntryRowDnd } from "../dnd/use-entry-row-dnd";
+import { ExplorerContextMenu } from "../explorer-context-menu";
+import { FileTypeIcon } from "../icons/file-type-icon";
+import { mobileTapAction } from "../mobile/mobile-tap-action";
+import { useCoarseLongPress } from "../use-coarse-long-press";
+import { composeInteractiveRowProps, type InjectedRowProps } from "./compose-interactive-row-props";
+
+export interface ColumnRowProps {
+  entry: FsEntry;
+  selected: boolean;
+  currentDir: string;
+  hasClipboard: boolean;
+  isPinned(path: string): boolean;
+  actions: ExplorerActions;
+  rowHeight: number;
+  onSelect(): void;
+  onOpen(): void;
+}
+
+export function ColumnRow({ entry, selected, currentDir, hasClipboard, isPinned, actions, rowHeight, onSelect, onOpen }: ColumnRowProps) {
+  // Column view has no multi-select — a drag always carries just this one entry.
+  // Spring-load is Column view's own drill-in gesture (`onSelect` already navigates for a
+  // directory), so a rested hover reaches a deep folder without dropping first.
+  const dnd = useEntryRowDnd({ entry, dragPaths: [entry.path], run: actions.transferInto, springLoad: onSelect });
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <ColumnRowInteractive
+          entry={entry}
+          selected={selected}
+          rowHeight={rowHeight}
+          onSelect={onSelect}
+          onOpen={onOpen}
+          dnd={dnd.props}
+          dropActive={dnd.isDropTarget}
+        />
+      </ContextMenuTrigger>
+      <ExplorerContextMenu
+        targets={[entry]}
+        currentDir={currentDir}
+        hasClipboard={hasClipboard}
+        isPinned={isPinned}
+        actions={actions}
+      />
+    </ContextMenu>
+  );
+}
+
+/**
+ * Rendered inside the row's own `<ContextMenu>` — the position `useContext(BottomSheetCtx)`
+ * needs to reach this row's own sheet state (see `use-mobile-row-tap.ts` for the same
+ * pattern in List/Icons). Column view keeps its existing single-select semantics on mobile —
+ * a directory already navigates on tap via `onSelect`; the only mobile addition is opening a
+ * viewable file immediately (no double-click on touch) and surfacing the actions sheet for
+ * one that has no viewer, instead of a tap that silently does nothing.
+ *
+ * `forwardRef` plus `composeInteractiveRowProps` over *everything* injected — not just
+ * `onContextMenu` — is required here: `asChild` clones this element and merges its own
+ * `onContextMenu` (which actually opens the row's menu), a `ref`, pointer handlers,
+ * `data-state` and a `style` that suppresses the native touch callout, but a component that
+ * doesn't accept and forward all of them keeps them from ever touching the real DOM node.
+ */
+export const ColumnRowInteractive = forwardRef<
+  HTMLDivElement,
+  Pick<ColumnRowProps, "entry" | "selected" | "rowHeight" | "onSelect" | "onOpen"> & InjectedRowProps
+>(function ColumnRowInteractive({ entry, selected, rowHeight, onSelect, onOpen, dnd, dropActive, ...injected }, ref) {
+  const longPress = useCoarseLongPress(onSelect);
+  const isMobile = useIsMobile();
+  const { setOpen } = useContext(BottomSheetCtx);
+
+  const handleClick = () => {
+    onSelect();
+    if (!isMobile || entry.type === "directory") return;
+    if (mobileTapAction(entry) === "open") onOpen();
+    else setOpen(true);
+  };
+
+  const props = composeInteractiveRowProps<Record<string, unknown>>(
+    { ...injected, ...longPress, ...dnd },
+    {
+      role: "option",
+      "aria-selected": selected,
+      "data-testid": "explorer-column-row",
+      "data-path": entry.path,
+      title: entry.name,
+      style: { height: rowHeight },
+      // Radix's own handler is chained in first (it opens this row's menu); only afterwards
+      // does this stop the event from also reaching the background trigger further up the DOM.
+      onContextMenu: (e: React.MouseEvent) => {
+        onSelect();
+        e.stopPropagation();
+      },
+      onClick: handleClick,
+      onDoubleClick: onOpen,
+      className: cn(
+        "flex w-full items-center gap-1.5 px-2 text-[13px] select-none",
+        "can-hover:hover:bg-surface-elevated",
+        selected && "bg-accent-wash text-text",
+        dropActive && DROP_TARGET_CLASS,
+      ),
+    },
+  );
+
+  return (
+    <div ref={ref} {...(props as HTMLAttributes<HTMLDivElement>)}>
+      <FileTypeIcon name={entry.name} kind={entry.kind} className="size-4 shrink-0" />
+      <span className={cn("flex-1 truncate", selected ? "text-text" : "text-text-2")}>{entry.name}</span>
+      {entry.type === "directory" && <span className="text-text-subtle">›</span>}
+    </div>
+  );
+});