@hienlh/ppm 0.17.57 → 0.18.1

package/src/web/components/os-explorer/views/icons-view-tile.tsx

@@ -0,0 +1,158 @@
+/**
+ * One tile in the Icons view grid: a large glyph (file-type icon, or an image thumbnail
+ * once it scrolls into view) above a two-line truncated label. Selection, long-press and
+ * context-menu wiring mirror `ListRow` so switching views never changes what a row/tile
+ * can do, only how it looks — including the mobile tap/select-mode branch, see
+ * `useMobileRowTap`.
+ */
+
+import { forwardRef, memo, useMemo, type HTMLAttributes } from "react";
+import { Check } from "lucide-react";
+import { ContextMenu, ContextMenuTrigger } from "@/components/ui/adaptive-context-menu";
+import type { FsEntry } from "@/lib/fs-api";
+import { cn } from "@/lib/utils";
+import { viewerKindOf } from "../can-open-in-ppm";
+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 { ThumbnailImage } from "../icons/thumbnail-image";
+import { useMobileRowTap } from "../mobile/use-mobile-row-tap";
+import { useCoarseLongPress } from "../use-coarse-long-press";
+import { composeInteractiveRowProps, type InjectedRowProps } from "./compose-interactive-row-props";
+import type { ExplorerViewProps } from "./explorer-view-registry";
+import { InlineNameInput } from "./inline-name-input";
+
+export interface IconsViewTileProps
+  extends Pick<ExplorerViewProps, "actions" | "selection" | "hasClipboard" | "isPinned" | "inlineError"> {
+  entry: FsEntry;
+  currentDir: string;
+  selected: boolean;
+  focused: boolean;
+  cut: boolean;
+  renaming: boolean;
+  /** Fixed pixel width on desktop; `undefined` on mobile, where a CSS grid column sizes it. */
+  tileWidth: number | undefined;
+  /** Entries the menu should act on when this tile is right-clicked. */
+  menuTargets: FsEntry[];
+}
+
+export const IconsViewTile = memo(function IconsViewTile(props: IconsViewTileProps) {
+  const { entry, currentDir, hasClipboard, isPinned, actions, menuTargets } = props;
+  // A drag carries whatever a context menu would act on: the selection when this tile is
+  // part of it, otherwise just this tile.
+  const dragPaths = useMemo(() => menuTargets.map((target) => target.path), [menuTargets]);
+  const dnd = useEntryRowDnd({ entry, dragPaths, run: actions.transferInto });
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <IconsViewTileInteractive {...props} dnd={dnd.props} dropActive={dnd.isDropTarget} />
+      </ContextMenuTrigger>
+      <ExplorerContextMenu
+        targets={menuTargets}
+        currentDir={currentDir}
+        hasClipboard={hasClipboard}
+        isPinned={isPinned}
+        actions={actions}
+      />
+    </ContextMenu>
+  );
+});
+
+/**
+ * Rendered inside the tile's own `<ContextMenu>` — see `useMobileRowTap`'s doc comment.
+ *
+ * `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 tile'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 IconsViewTileInteractive = forwardRef<HTMLDivElement, IconsViewTileProps & InjectedRowProps>(
+  function IconsViewTileInteractive(
+    {
+      entry, selected, focused, cut, renaming, tileWidth, actions, selection, inlineError,
+      currentDir: _currentDir, hasClipboard: _hasClipboard, isPinned: _isPinned, menuTargets: _menuTargets,
+      dnd, dropActive, ...injected
+    },
+    ref,
+  ) {
+    const longPress = useCoarseLongPress(() => {
+      if (!selected) selection.selectOnly(entry.path);
+    });
+    const { isMobile, selectMode, handleTap } = useMobileRowTap(actions, selection);
+    const isImage = entry.type !== "directory" && viewerKindOf(entry.name) === "image";
+
+    const props = composeInteractiveRowProps<Record<string, unknown>>(
+      { ...injected, ...longPress, ...dnd },
+      {
+        role: "gridcell",
+        "aria-selected": selected,
+        "data-testid": "explorer-tile",
+        "data-path": entry.path,
+        title: entry.name,
+        style: tileWidth ? { width: tileWidth } : undefined,
+        // Radix's own handler is chained in first (it opens this tile's menu); only
+        // afterwards does this stop the event from also reaching the background trigger
+        // further up the DOM.
+        onContextMenu: (e: React.MouseEvent) => {
+          if (!selected) selection.selectOnly(entry.path);
+          e.stopPropagation();
+        },
+        onClick: (e: React.MouseEvent) => {
+          if (!handleTap(entry, selected)) selection.onRowClick(entry.path, e);
+        },
+        onDoubleClick: () => actions.openEntry(entry),
+        className: cn(
+          "relative flex flex-col items-center gap-1 rounded p-2 text-center select-none",
+          !tileWidth && "w-full",
+          "can-hover:hover:bg-surface-elevated",
+          focused && !selected && "bg-surface-elevated",
+          selected && "bg-accent-wash",
+          cut && "opacity-40",
+          dropActive && DROP_TARGET_CLASS,
+        ),
+      },
+    );
+
+    return (
+      <div ref={ref} {...(props as HTMLAttributes<HTMLDivElement>)}>
+        {isMobile && selectMode && (
+          <span
+            aria-hidden
+            className={cn(
+              "absolute left-1.5 top-1.5 flex size-5 items-center justify-center rounded border",
+              selected ? "border-primary bg-primary text-primary-foreground" : "border-border bg-panel",
+            )}
+          >
+            {selected && <Check className="size-3.5" />}
+          </span>
+        )}
+        <div className="flex h-12 w-12 shrink-0 items-center justify-center">
+          {isImage ? (
+            <ThumbnailImage entry={entry} size={48} />
+          ) : (
+            <FileTypeIcon name={entry.name} kind={entry.kind} className="size-12" />
+          )}
+        </div>
+        {renaming ? (
+          <InlineNameInput
+            initial={entry.name}
+            error={inlineError}
+            onCommit={(value) => void actions.commitInline(value)}
+            onCancel={actions.cancelInline}
+          />
+        ) : (
+          <span
+            className={cn(
+              "line-clamp-2 w-full break-words text-[12px] leading-tight",
+              selected ? "text-text" : "text-text-2",
+            )}
+          >
+            {entry.name}
+          </span>
+        )}
+      </div>
+    );
+  },
+);

package/src/web/components/os-explorer/views/icons-view.tsx

@@ -0,0 +1,188 @@
+/**
+ * Icons view: a responsive tile grid, virtualised by row so a folder of thousands of
+ * images never puts more than a couple of rows' worth of thumbnails in the DOM at once.
+ *
+ * Arrow-key vertical movement steps by a full row (the current column count) instead of
+ * one entry; left/right, Enter, Delete, type-ahead and the rest stay the single generic
+ * handler `useExplorerKeyboard` already gives every view, so only Up/Down/Left/Right are
+ * intercepted here.
+ */
+
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ContextMenu, ContextMenuTrigger } from "@/components/ui/adaptive-context-menu";
+import { useFileStore } from "@/stores/file-store";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { cn } from "@/lib/utils";
+import { DROP_TARGET_CLASS } from "../dnd/drop-target-style";
+import { useDragAutoScroll } from "../dnd/use-drag-auto-scroll";
+import { usePathDropTarget } from "../dnd/use-path-drop-target";
+import { ExplorerContextMenu } from "../explorer-context-menu";
+import { activeEntries } from "../use-explorer-keyboard";
+import type { ExplorerViewProps } from "./explorer-view-registry";
+import { IconsViewTile } from "./icons-view-tile";
+import { InlineNameInput } from "./inline-name-input";
+
+/** Tile footprint; the grid fits as many columns as this divides the container width into. */
+const TILE_WIDTH = 96;
+const TILE_HEIGHT = 88;
+/** Matches the grid's own `gap-1` and `p-2`, so a row of tiles never overflows or shrinks. */
+const TILE_GAP = 4;
+const GRID_PADDING = 16;
+/** Fixed column count on the mobile sheet — a grid (not fixed-width tiles) fills the row. */
+const MOBILE_COLUMNS = 3;
+
+export function IconsView({
+  slice, entries, actions, selection, inlineError, hasClipboard, isPinned, backgroundLongPress,
+}: ExplorerViewProps) {
+  const cutPaths = useFileStore((s) => (s.clipboard?.operation === "cut" ? s.clipboard.paths : null));
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useDragAutoScroll(scrollRef);
+  const isMobile = useIsMobile();
+  const [columns, setColumns] = useState(isMobile ? MOBILE_COLUMNS : 1);
+
+  useEffect(() => {
+    if (isMobile) { setColumns(MOBILE_COLUMNS); return; }
+    const el = scrollRef.current;
+    if (!el) return;
+    // Subtract the grid's own p-2 padding and one gap-1 (n columns need n-1 gaps, so adding
+    // one gap back before dividing accounts for exactly that) — a bare clientWidth / TILE_WIDTH
+    // let tiles shrink below 96px or overflow the row at some container widths.
+    const measure = () => {
+      const usable = el.clientWidth - GRID_PADDING + TILE_GAP;
+      setColumns(Math.max(1, Math.floor(usable / (TILE_WIDTH + TILE_GAP))));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [isMobile]);
+
+  const rowCount = Math.ceil(entries.length / columns);
+  const virtualizer = useVirtualizer({
+    count: rowCount,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => TILE_HEIGHT,
+    overscan: 4,
+  });
+
+  const anchorIndex = slice.anchor ? entries.findIndex((e) => e.path === slice.anchor) : -1;
+  const anchorRow = anchorIndex >= 0 ? Math.floor(anchorIndex / columns) : -1;
+  useEffect(() => {
+    if (anchorRow >= 0) virtualizer.scrollToIndex(anchorRow, { align: "auto" });
+  }, [anchorRow]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const menuTargets = useMemo(() => activeEntries(slice, entries), [slice, entries]);
+  const creating = slice.inlineEdit?.kind === "new-file" || slice.inlineEdit?.kind === "new-folder";
+  // The view background is the current directory itself — a tile already claims the drop
+  // (and stops the event) when it is a directory, so this only ever fires over empty space.
+  const backgroundDrop = usePathDropTarget({ targetDir: slice.path, run: actions.transferInto });
+
+  const onGridKeyDown = (event: KeyboardEvent) => {
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        event.stopPropagation();
+        selection.moveTo(columns, event.shiftKey);
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        event.stopPropagation();
+        selection.moveTo(-columns, event.shiftKey);
+        return;
+      case "ArrowLeft":
+        event.preventDefault();
+        event.stopPropagation();
+        selection.moveTo(-1, event.shiftKey);
+        return;
+      case "ArrowRight":
+        event.preventDefault();
+        event.stopPropagation();
+        selection.moveTo(1, event.shiftKey);
+        return;
+    }
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div
+          ref={scrollRef}
+          role="grid"
+          tabIndex={0}
+          data-testid="explorer-icons"
+          aria-label="File icons"
+          onKeyDown={onGridKeyDown}
+          onMouseDown={(e) => {
+            if (e.target === e.currentTarget) selection.clear();
+          }}
+          className={cn("h-full flex-1 overflow-auto p-2 outline-none", backgroundDrop.isOver && DROP_TARGET_CLASS)}
+          {...backgroundLongPress}
+          {...backgroundDrop.handlers}
+        >
+          {creating && (
+            <div
+              className="mb-2 flex flex-col items-center gap-1 p-2"
+              style={isMobile ? undefined : { width: TILE_WIDTH }}
+            >
+              <InlineNameInput
+                initial=""
+                error={inlineError}
+                onCommit={(value) => void actions.commitInline(value)}
+                onCancel={actions.cancelInline}
+              />
+            </div>
+          )}
+          <div className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
+            {virtualizer.getVirtualItems().map((row) => {
+              const start = row.index * columns;
+              const rowEntries = entries.slice(start, start + columns);
+              return (
+                <div
+                  key={row.index}
+                  role="row"
+                  className={cn("absolute left-0 top-0 w-full gap-1", isMobile ? "grid grid-cols-3" : "flex")}
+                  style={{ transform: `translateY(${row.start}px)` }}
+                >
+                  {rowEntries.map((entry) => (
+                    <IconsViewTile
+                      key={entry.path}
+                      entry={entry}
+                      currentDir={slice.path}
+                      selected={slice.selection.has(entry.path)}
+                      focused={slice.anchor === entry.path}
+                      cut={cutPaths?.includes(entry.path) === true}
+                      renaming={slice.inlineEdit?.kind === "rename" && slice.inlineEdit.path === entry.path}
+                      // On mobile the grid column itself sizes the tile — a fixed pixel
+                      // width would either overflow 3-across or leave the row half-empty.
+                      tileWidth={isMobile ? undefined : TILE_WIDTH}
+                      menuTargets={slice.selection.has(entry.path) ? menuTargets : [entry]}
+                      actions={actions}
+                      selection={selection}
+                      hasClipboard={hasClipboard}
+                      isPinned={isPinned}
+                      inlineError={inlineError}
+                    />
+                  ))}
+                </div>
+              );
+            })}
+          </div>
+          {entries.length === 0 && !slice.loading && !creating && (
+            <p className="p-3 text-xs text-text-subtle">
+              {slice.filter ? "No entries match the filter." : "This folder is empty."}
+            </p>
+          )}
+        </div>
+      </ContextMenuTrigger>
+      <ExplorerContextMenu
+        targets={[]}
+        currentDir={slice.path}
+        hasClipboard={hasClipboard}
+        isPinned={isPinned}
+        actions={actions}
+      />
+    </ContextMenu>
+  );
+}

package/src/web/components/os-explorer/views/inline-name-input.tsx

@@ -0,0 +1,60 @@
+/**
+ * The in-place text field used for both renaming an entry and naming a new one.
+ *
+ * Renaming preselects the stem (not the extension), which is what Explorer and Finder do
+ * and what makes "fix the typo in the name" a single gesture.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+export interface InlineNameInputProps {
+  initial: string;
+  /** Error from the last rejected commit; keeps the field open and explains why. */
+  error?: string | null;
+  onCommit(value: string): void;
+  onCancel(): void;
+  className?: string;
+}
+
+export function InlineNameInput({ initial, error, onCommit, onCancel, className }: InlineNameInputProps) {
+  const [value, setValue] = useState(initial);
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const input = ref.current;
+    if (!input) return;
+    input.focus();
+    const dot = initial.lastIndexOf(".");
+    if (dot > 0) input.setSelectionRange(0, dot);
+    else input.select();
+  }, [initial]);
+
+  return (
+    <div className="relative flex-1 min-w-0">
+      <input
+        ref={ref}
+        value={value}
+        aria-label="Name"
+        aria-invalid={!!error}
+        onChange={(e) => setValue(e.target.value)}
+        onBlur={() => onCommit(value)}
+        onKeyDown={(e) => {
+          e.stopPropagation(); // the view container owns the same keys for navigation
+          if (e.key === "Enter") onCommit(value);
+          else if (e.key === "Escape") onCancel();
+        }}
+        className={cn(
+          "w-full rounded-[var(--rad-sm)] border bg-panel px-1.5 py-0.5 text-[13px] text-text outline-none",
+          error ? "border-error" : "border-primary",
+          className,
+        )}
+      />
+      {error && (
+        <span className="absolute left-0 top-full z-10 mt-0.5 rounded border border-border bg-panel-2 px-1.5 py-0.5 text-[11px] text-error shadow-sm">
+          {error}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,162 @@
+/**
+ * One row of the List view: icon, name (or the inline rename field), size, modified, kind.
+ *
+ * The row is its own context-menu root so a right-click acts on the entry under the
+ * cursor, and it carries the coarse-pointer long-press handlers so touch devices wide
+ * enough to get the desktop layout still reach the menu.
+ *
+ * On the mobile sheet specifically, a tap replaces desktop's click-to-select: there is no
+ * double-click on touch, so a directory or a viewable file must open on the first tap (see
+ * `useMobileRowTap`), and "Select" mode swaps the tap for a checkbox toggle.
+ */
+
+import { forwardRef, memo, useMemo, type HTMLAttributes } from "react";
+import { Check } from "lucide-react";
+import { ContextMenu, ContextMenuTrigger } from "@/components/ui/adaptive-context-menu";
+import type { FsEntry } from "@/lib/fs-api";
+import { cn } from "@/lib/utils";
+import { extensionOf } from "../can-open-in-ppm";
+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 { formatRelativeTime, formatSize } from "../format-file-meta";
+import { useMobileRowTap } from "../mobile/use-mobile-row-tap";
+import { useCoarseLongPress } from "../use-coarse-long-press";
+import { composeInteractiveRowProps, type InjectedRowProps } from "./compose-interactive-row-props";
+import type { ExplorerViewProps } from "./explorer-view-registry";
+import { InlineNameInput } from "./inline-name-input";
+
+export interface ListRowProps extends Pick<ExplorerViewProps, "actions" | "selection" | "hasClipboard" | "isPinned" | "inlineError"> {
+  entry: FsEntry;
+  currentDir: string;
+  selected: boolean;
+  focused: boolean;
+  cut: boolean;
+  renaming: boolean;
+  height: number;
+  /** Entries the menu should act on when this row is right-clicked. */
+  menuTargets: FsEntry[];
+}
+
+export const ListRow = memo(function ListRow(props: ListRowProps) {
+  const { entry, currentDir, hasClipboard, isPinned, actions, menuTargets } = props;
+  // A drag carries whatever a context menu would act on: the selection when this row is part
+  // of it, otherwise just this row.
+  const dragPaths = useMemo(() => menuTargets.map((target) => target.path), [menuTargets]);
+  const dnd = useEntryRowDnd({ entry, dragPaths, run: actions.transferInto });
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <ListRowInteractive {...props} dnd={dnd.props} dropActive={dnd.isDropTarget} />
+      </ContextMenuTrigger>
+      <ExplorerContextMenu
+        targets={menuTargets}
+        currentDir={currentDir}
+        hasClipboard={hasClipboard}
+        isPinned={isPinned}
+        actions={actions}
+      />
+    </ContextMenu>
+  );
+});
+
+/**
+ * Rendered inside the row's own `<ContextMenu>` (not by the memo above, which renders that
+ * provider) — the position `useMobileRowTap` needs to reach this row's own sheet state.
+ *
+ * `ContextMenuTrigger asChild` clones its child and merges its own `onContextMenu` (the
+ * handler that actually opens the row's menu), a `ref`, pointer handlers, `data-state` and a
+ * `style` that suppresses the native touch callout — but `cloneElement` only reaches a plain
+ * function component's *props*, and a component that doesn't accept and forward them keeps
+ * them from ever touching the real DOM node. That was the bug: the row still ran its own
+ * local selection logic, but Radix's own trigger handler was silently dropped, so no menu
+ * ever opened. `forwardRef` plus `composeInteractiveRowProps` over *everything* injected —
+ * not just the two props that fixed the visible symptom — is what lets a wrapping component
+ * sit under `asChild` at all.
+ */
+export const ListRowInteractive = forwardRef<HTMLDivElement, ListRowProps & InjectedRowProps>(
+  function ListRowInteractive(
+    {
+      entry, selected, focused, cut, renaming, height, actions, selection, inlineError,
+      currentDir: _currentDir, hasClipboard: _hasClipboard, isPinned: _isPinned, menuTargets: _menuTargets,
+      dnd, dropActive, ...injected
+    },
+    ref,
+  ) {
+    const longPress = useCoarseLongPress(() => {
+      if (!selected) selection.selectOnly(entry.path);
+    });
+    const { isMobile, selectMode, handleTap } = useMobileRowTap(actions, selection);
+
+    const props = composeInteractiveRowProps<Record<string, unknown>>(
+      { ...injected, ...longPress, ...dnd },
+      {
+        role: "row",
+        "aria-selected": selected,
+        "data-testid": "explorer-row",
+        "data-path": entry.path,
+        title: entry.name,
+        style: { height },
+        // 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 — two independent `<ContextMenu>` roots would otherwise both react to one
+        // right-click.
+        onContextMenu: (e: React.MouseEvent) => {
+          if (!selected) selection.selectOnly(entry.path);
+          e.stopPropagation();
+        },
+        onClick: (e: React.MouseEvent) => {
+          if (!handleTap(entry, selected)) selection.onRowClick(entry.path, e);
+        },
+        onDoubleClick: () => actions.openEntry(entry),
+        className: cn(
+          "flex w-full items-center gap-2 px-2 text-[13px] select-none",
+          "can-hover:hover:bg-surface-elevated",
+          focused && !selected && "bg-surface-elevated",
+          selected && "bg-accent-wash",
+          cut && "opacity-40",
+          dropActive && DROP_TARGET_CLASS,
+        ),
+      },
+    );
+
+    return (
+      <div ref={ref} {...(props as HTMLAttributes<HTMLDivElement>)}>
+        {isMobile && selectMode && (
+          <span
+            aria-hidden
+            className={cn(
+              "flex size-5 shrink-0 items-center justify-center rounded border",
+              selected ? "border-primary bg-primary text-primary-foreground" : "border-border",
+            )}
+          >
+            {selected && <Check className="size-3.5" />}
+          </span>
+        )}
+        <FileTypeIcon name={entry.name} kind={entry.kind} className="size-4" />
+        {renaming ? (
+          <InlineNameInput
+            initial={entry.name}
+            error={inlineError}
+            onCommit={(value) => void actions.commitInline(value)}
+            onCancel={actions.cancelInline}
+          />
+        ) : (
+          <span className={cn("flex-1 truncate", selected ? "text-text" : "text-text-2")}>
+            {entry.name}
+          </span>
+        )}
+        <span className="w-20 shrink-0 text-right tabular-nums text-text-subtle">
+          {entry.type === "directory" ? "" : formatSize(entry.size)}
+        </span>
+        <span className="hidden w-24 shrink-0 text-right text-text-subtle sm:inline">
+          {formatRelativeTime(entry.modified)}
+        </span>
+        <span className="hidden w-16 shrink-0 truncate text-right text-text-subtle md:inline">
+          {entry.type === "directory" ? "Folder" : (extensionOf(entry.name) || "File")}
+        </span>
+      </div>
+    );
+  },
+);