@hienlh/ppm 0.17.57 → 0.18.1

package/src/web/components/os-explorer/dnd/use-entry-drop-target.ts

@@ -0,0 +1,150 @@
+/**
+ * Makes any element a drop target for an entry drag: a directory row, a view background, a
+ * sidebar place, a breadcrumb crumb or a project-tree node.
+ *
+ * Two timers, both Finder/Explorer behaviour: the highlight only appears after the pointer
+ * has stayed 120 ms (a drag that sweeps across ten rows must not flash all ten), and an
+ * optional spring-load opens the hovered folder after 800 ms so a deep destination is
+ * reachable without dropping first. Spring-load is opt-in because it only makes sense where
+ * "open" does not destroy the drag — Column view and the project tree.
+ */
+
+import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
+import { decideDrop, type DropDecision } from "./drop-target-decision";
+import { clearInFlightDrag, getInFlightDrag } from "./entry-drag-state";
+import { decodeEntryDrag, ENTRY_DRAG_MIME, type DropOperation, type EntryDragPayload } from "./entry-drag-payload";
+
+const HIGHLIGHT_DELAY_MS = 120;
+const SPRING_LOAD_MS = 800;
+
+export interface EntryDropTargetOptions {
+  /** Directory a drop writes into; null disables the target (a file row, a missing path). */
+  targetDir: string | null;
+  onDropEntries(payload: EntryDragPayload, op: DropOperation, targetDir: string): void;
+  /** Opens the hovered folder after a rest — Column view and the project tree only. */
+  springLoad?: () => void;
+  disabled?: boolean;
+}
+
+export interface EntryDropTargetResult {
+  /** True once the pointer has rested long enough for the target to claim the drop. */
+  isOver: boolean;
+  handlers: {
+    onDragEnter(event: DragEvent): void;
+    onDragOver(event: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    onDrop(event: DragEvent): void;
+  };
+}
+
+function decisionFor(event: DragEvent, targetDir: string | null, payload: EntryDragPayload | null): DropDecision {
+  return decideDrop({
+    types: Array.from(event.dataTransfer.types),
+    payload,
+    targetDir,
+    modifiers: { ctrlKey: event.ctrlKey, altKey: event.altKey },
+  });
+}
+
+export function useEntryDropTarget(options: EntryDropTargetOptions): EntryDropTargetResult {
+  const { targetDir, onDropEntries, springLoad, disabled } = options;
+  const [isOver, setIsOver] = useState(false);
+  // Nested children fire their own enter/leave pairs; only a balanced count means "left".
+  const depth = useRef(0);
+  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
+
+  const stopTimers = useCallback(() => {
+    for (const timer of timers.current) clearTimeout(timer);
+    timers.current = [];
+  }, []);
+
+  const reset = useCallback(() => {
+    depth.current = 0;
+    stopTimers();
+    setIsOver(false);
+  }, [stopTimers]);
+
+  useEffect(() => stopTimers, [stopTimers]);
+
+  const onDragEnter = useCallback(
+    (event: DragEvent) => {
+      if (disabled) return;
+      // Count this row's own entry drags unconditionally, even when the current decision
+      // rejects (e.g. same-directory move) — a modifier held later (Ctrl → copy) can flip
+      // that same hover to an accept without a matching enter/leave pair, so counting must
+      // not depend on the decision or a later dragleave over the same subtree desyncs the
+      // balance and clears the highlight while the pointer is still over the target.
+      if (!event.dataTransfer.types.includes(ENTRY_DRAG_MIME)) return;
+      const decision = decisionFor(event, targetDir, getInFlightDrag());
+      if (decision.accept) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      depth.current++;
+      if (depth.current > 1 || !decision.accept) return;
+      timers.current.push(setTimeout(() => setIsOver(true), HIGHLIGHT_DELAY_MS));
+      if (springLoad) timers.current.push(setTimeout(springLoad, SPRING_LOAD_MS));
+    },
+    [disabled, targetDir, springLoad],
+  );
+
+  const onDragOver = useCallback(
+    (event: DragEvent) => {
+      if (disabled) return;
+      const decision = decisionFor(event, targetDir, getInFlightDrag());
+      if (!decision.accept) return;
+      // Claiming the drop here is what keeps a directory row from also handing the drop to
+      // the view background behind it.
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.dropEffect = decision.op === "copy" ? "copy" : "move";
+    },
+    [disabled, targetDir],
+  );
+
+  const onDragLeave = useCallback(
+    (event: DragEvent) => {
+      if (depth.current === 0) return;
+      event.stopPropagation();
+      depth.current--;
+      if (depth.current === 0) {
+        stopTimers();
+        setIsOver(false);
+      }
+    },
+    [stopTimers],
+  );
+
+  const onDrop = useCallback(
+    (event: DragEvent) => {
+      if (disabled) return;
+      // The real payload is readable now; the module ref is only the hover-time stand-in.
+      // Clear it here too — `dragend` is not guaranteed to reach a source that unmounted
+      // mid-drag (e.g. a spring-load navigation), and a stale ref must never outlive a drop.
+      const payload = decodeEntryDrag(event.dataTransfer.getData(ENTRY_DRAG_MIME)) ?? getInFlightDrag();
+      clearInFlightDrag();
+      const decision = decisionFor(event, targetDir, payload);
+      if (!decision.accept) {
+        // A rejected PPM drag is still consumed here, so the browser does not fall back to
+        // navigating to the dropped path; a foreign drag is left alone entirely.
+        if (decision.reason !== "not-an-entry-drag") {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        reset();
+        return;
+      }
+      if (!payload || targetDir == null) {
+        reset();
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      reset();
+      onDropEntries(payload, decision.op, targetDir);
+    },
+    [disabled, targetDir, onDropEntries, reset],
+  );
+
+  return { isOver, handlers: { onDragEnter, onDragOver, onDragLeave, onDrop } };
+}

package/src/web/components/os-explorer/dnd/use-entry-row-dnd.ts

@@ -0,0 +1,66 @@
+/**
+ * Drag source + drop target for one entry row/tile, collapsed into a single spreadable prop
+ * bag.
+ *
+ * The row components sit under a Radix `ContextMenuTrigger asChild`, which clones them and
+ * merges its own `ref` and `onContextMenu`. Adding seven more handlers to those signatures
+ * would make an easy place to drop one of the two by accident, so the wiring stays one
+ * object the row spreads verbatim.
+ */
+
+import { useMemo, type DragEvent } from "react";
+import type { FsEntry } from "@/lib/fs-api";
+import type { DropRunner } from "./entry-drop-executor";
+import type { EntryDragOrigin } from "./entry-drag-payload";
+import { useEntryDragSource } from "./use-entry-drag-source";
+import { usePathDropTarget } from "./use-path-drop-target";
+
+export interface EntryRowDndProps {
+  draggable?: true;
+  onDragStart?(event: DragEvent): void;
+  onDragEnd?(event: DragEvent): void;
+  onDragEnter(event: DragEvent): void;
+  onDragOver(event: DragEvent): void;
+  onDragLeave(event: DragEvent): void;
+  onDrop(event: DragEvent): void;
+}
+
+export interface EntryRowDndOptions {
+  entry: FsEntry;
+  /** Absolute paths the drag carries — the whole selection when this row is part of it. */
+  dragPaths: string[];
+  run: DropRunner;
+  /** Column view and the tree open the hovered folder after a rest; List/Icons do not. */
+  springLoad?: () => void;
+  origin?: EntryDragOrigin;
+  projectName?: string;
+  extraData?: Record<string, string>;
+  onDragStarted?(): void;
+}
+
+export interface EntryRowDnd {
+  props: EntryRowDndProps;
+  /** True while this row is the claimed drop destination — draw the ring from it. */
+  isDropTarget: boolean;
+}
+
+export function useEntryRowDnd(options: EntryRowDndOptions): EntryRowDnd {
+  const { entry, dragPaths, run, springLoad, origin = "explorer", projectName, extraData, onDragStarted } = options;
+
+  const source = useEntryDragSource({ paths: dragPaths, origin, projectName, extraData, onDragStarted });
+
+  // Only a directory can receive a drop; a file row lets the event fall through to the view
+  // background, which is the same folder the file lives in — exactly what the OS does.
+  const target = usePathDropTarget({
+    targetDir: entry.type === "directory" ? entry.path : null,
+    run,
+    springLoad: entry.type === "directory" ? springLoad : undefined,
+  });
+
+  const props = useMemo<EntryRowDndProps>(
+    () => ({ ...source, ...target.handlers }),
+    [source, target.handlers],
+  );
+
+  return { props, isDropTarget: target.isOver };
+}

package/src/web/components/os-explorer/dnd/use-path-drop-target.ts

@@ -0,0 +1,30 @@
+/**
+ * Drop target for a surface that already knows its destination directory and has no drag
+ * source of its own: a view background, a sidebar place, a breadcrumb crumb, the tree root.
+ */
+
+import { useCallback } from "react";
+import { executeEntryDrop, type DropRunner } from "./entry-drop-executor";
+import type { DropOperation, EntryDragPayload } from "./entry-drag-payload";
+import { useEntryDropTarget, type EntryDropTargetResult } from "./use-entry-drop-target";
+
+export interface PathDropTargetOptions {
+  targetDir: string | null;
+  run: DropRunner;
+  /** Opens this destination after a rest — the project tree and Column view use it. */
+  springLoad?: () => void;
+  disabled?: boolean;
+}
+
+export function usePathDropTarget(options: PathDropTargetOptions): EntryDropTargetResult {
+  const { targetDir, run, springLoad, disabled } = options;
+
+  const onDropEntries = useCallback(
+    (payload: EntryDragPayload, op: DropOperation, dstDir: string) => {
+      void executeEntryDrop(payload, dstDir, op, run);
+    },
+    [run],
+  );
+
+  return useEntryDropTarget({ targetDir, onDropEntries, springLoad, disabled });
+}

package/src/web/components/os-explorer/explorer-body.tsx

@@ -0,0 +1,153 @@
+/**
+ * The explorer itself: sidebar · toolbar · view · status bar.
+ *
+ * Deliberately free of any window chrome so the mobile full-screen sheet can render the
+ * exact same component; `variant` is the only thing that differs between the two hosts.
+ */
+
+import { useEffect, useMemo } from "react";
+import { AlertTriangle, Home } from "lucide-react";
+import { useFileStore } from "@/stores/file-store";
+import { useExplorerActions } from "./actions/use-explorer-actions";
+import { ExplorerDialogs } from "./explorer-dialogs";
+import { ExplorerSidebar } from "./explorer-sidebar";
+import { ExplorerStatusBar } from "./explorer-status-bar";
+import { useExplorerStore } from "./explorer-store";
+import { ExplorerToolbar } from "./explorer-toolbar";
+import { useExplorerPinsStore } from "./explorer-pins-store";
+import { FolderIconProvider } from "./icons/file-type-icon";
+import { MobileBottomToolbar } from "./mobile/mobile-bottom-toolbar";
+import { MobileExplorerTopBar } from "./mobile/mobile-explorer-top-bar";
+import { MobilePlacesStrip } from "./mobile/mobile-places-strip";
+import { useExplorerSkin } from "./skins/use-explorer-skin";
+import { sortAndFilterEntries } from "./sort-and-filter-entries";
+import { useCoarseLongPress, usePrefersCoarsePointer } from "./use-coarse-long-press";
+import { useExplorerKeyboard } from "./use-explorer-keyboard";
+import { useExplorerNavigation } from "./use-explorer-navigation";
+import { useHostInfo } from "./use-host-info";
+import { useMobileExplorerOpenState } from "./use-explorer-open-state";
+import { useEntrySelection } from "./views/use-entry-selection";
+import { viewComponentFor } from "./views/explorer-view-registry";
+
+/** Row heights: comfortable for a mouse, ≥ 36 px for a finger, 48 px for the mobile sheet
+ *  (design-guidelines' touch-target minimum plus a little breathing room over 44). */
+const ROW_HEIGHT_FINE = 28;
+const ROW_HEIGHT_COARSE = 36;
+const ROW_HEIGHT_SHEET = 48;
+
+export interface ExplorerBodyProps {
+  windowId: string;
+  /** Where the window opens; navigation takes over from there. */
+  initialPath: string;
+  /** Presentation host. The sheet variant fills its parent and drops the desktop chrome. */
+  variant?: "window" | "sheet";
+}
+
+export function ExplorerBody({ windowId, initialPath, variant = "window" }: ExplorerBodyProps) {
+  const ensure = useExplorerStore((s) => s.ensure);
+  // Creating the slice in an effect (not during render) keeps the store write out of
+  // React's render phase; the window shows nothing for exactly one frame.
+  useEffect(() => ensure(windowId, initialPath), [ensure, windowId, initialPath]);
+
+  const slice = useExplorerStore((s) => s.slices[windowId]);
+  const showHidden = useExplorerStore((s) => s.showHidden);
+  const viewMode = useExplorerStore((s) => s.viewMode);
+  const sort = useExplorerStore((s) => s.sort);
+  const { host } = useHostInfo();
+  const hasClipboard = useFileStore((s) => (s.clipboard?.paths.length ?? 0) > 0);
+  const isPinned = useExplorerPinsStore((s) => s.isPinned);
+  const coarse = usePrefersCoarsePointer();
+  const skin = useExplorerSkin();
+
+  const nav = useExplorerNavigation(windowId, slice, showHidden);
+  const { actions, dialogs } = useExplorerActions(windowId, slice, nav, host?.platform);
+
+  const entries = useMemo(
+    () => (slice ? sortAndFilterEntries(slice.entries, slice.filter, sort) : []),
+    [slice?.entries, slice?.filter, sort], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const order = useMemo(() => entries.map((e) => e.path), [entries]);
+  const selection = useEntrySelection(windowId, order);
+  const onKeyDown = useExplorerKeyboard({
+    slice,
+    entries,
+    actions,
+    selection,
+    nav,
+  });
+  // The background menu needs a press target on touch just as the rows do.
+  const backgroundLongPress = useCoarseLongPress();
+  const closeSheet = useMobileExplorerOpenState((s) => s.close);
+
+  if (!slice) return null;
+
+  const View = viewComponentFor(viewMode);
+  const isSheet = variant === "sheet";
+  const rowHeight = isSheet ? ROW_HEIGHT_SHEET : coarse ? ROW_HEIGHT_COARSE : ROW_HEIGHT_FINE;
+
+  return (
+    <div
+      data-skin={skin.id}
+      style={{ fontFamily: "var(--x-font)" }}
+      className="flex h-full min-h-0 w-full flex-col bg-panel text-text"
+    >
+      {/* Mobile: title + a places chip strip replace the desktop toolbar/sidebar — every
+          frequent action moves to the bottom toolbar (thumb zone) below instead. */}
+      {isSheet ? (
+        <>
+          <MobileExplorerTopBar slice={slice} onClose={closeSheet} />
+          <MobilePlacesStrip host={host} currentPath={slice.path} onNavigate={nav.go} vocab={skin.vocab} />
+        </>
+      ) : (
+        <ExplorerToolbar windowId={windowId} slice={slice} nav={nav} />
+      )}
+
+      {slice.error && (
+        <div className="flex items-start gap-2 border-b border-border bg-error/10 px-2 py-1.5 text-xs text-error">
+          <AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
+          <div className="min-w-0 flex-1">
+            <p className="break-words">{slice.error.message}</p>
+            {slice.error.hint && <p className="mt-0.5 text-text-2">{slice.error.hint}</p>}
+          </div>
+          {host && (
+            <button
+              type="button"
+              onClick={() => nav.go(host.homedir)}
+              className="flex shrink-0 items-center gap-1 rounded border border-border px-1.5 py-0.5 text-text-2 can-hover:hover:bg-surface-elevated"
+            >
+              <Home className="size-3" /> Go home
+            </button>
+          )}
+        </div>
+      )}
+
+      <FolderIconProvider value={{ closed: skin.FolderIcon, open: skin.FolderOpenIcon }}>
+        <div className="flex min-h-0 flex-1">
+          {!isSheet && <ExplorerSidebar host={host} currentPath={slice.path} onNavigate={nav.go} vocab={skin.vocab} />}
+          <div className="min-w-0 flex-1" onKeyDown={onKeyDown}>
+            <View
+              windowId={windowId}
+              slice={slice}
+              entries={entries}
+              actions={actions}
+              selection={selection}
+              inlineError={dialogs.inlineError}
+              hasClipboard={hasClipboard}
+              isPinned={isPinned}
+              rowHeight={rowHeight}
+              nav={nav}
+              backgroundLongPress={backgroundLongPress}
+            />
+          </div>
+        </div>
+      </FolderIconProvider>
+
+      {isSheet ? (
+        <MobileBottomToolbar slice={slice} nav={nav} actions={actions} entries={entries} hasClipboard={hasClipboard} />
+      ) : (
+        <ExplorerStatusBar entries={entries} selection={slice.selection} truncated={slice.truncated} />
+      )}
+      <ExplorerDialogs dialogs={dialogs} platform={host?.platform} sep={slice.sep} />
+    </div>
+  );
+}

package/src/web/components/os-explorer/explorer-breadcrumb.tsx

@@ -0,0 +1,108 @@
+/**
+ * Path breadcrumb built from the server's segments — the client never splits paths itself,
+ * because a drive root, a UNC prefix and a POSIX root all split differently.
+ *
+ * Deep paths keep the first crumb and the last few; everything in between collapses into
+ * one overflow menu, so the bar never pushes the toolbar controls out of a narrow window.
+ */
+
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { FsBreadcrumb } from "@/lib/fs-api";
+import { cn } from "@/lib/utils";
+import { DROP_TARGET_CLASS } from "./dnd/drop-target-style";
+import { usePathDropTarget } from "./dnd/use-path-drop-target";
+import { useDropTransfer } from "./dnd/use-drop-transfer";
+
+/** Crumbs shown at the tail before the middle is collapsed. */
+const TAIL_CRUMBS = 3;
+
+export interface ExplorerBreadcrumbProps {
+  crumbs: FsBreadcrumb[];
+  onNavigate(path: string): void;
+  className?: string;
+  /** Host path separator — every crumb is an ancestor directory of the same window. */
+  sep: string;
+}
+
+export function ExplorerBreadcrumb({ crumbs, onNavigate, className, sep }: ExplorerBreadcrumbProps) {
+  // One drop-transfer context for the whole bar — dropping on any ancestor crumb lands
+  // through the same collision prompt as a paste.
+  const { run, prompts } = useDropTransfer(sep);
+
+  if (crumbs.length === 0) return <div className={className} />;
+
+  const collapsed = crumbs.length > TAIL_CRUMBS + 2;
+  const head = collapsed ? crumbs.slice(0, 1) : crumbs;
+  const hidden = collapsed ? crumbs.slice(1, crumbs.length - TAIL_CRUMBS) : [];
+  const tail = collapsed ? crumbs.slice(crumbs.length - TAIL_CRUMBS) : [];
+
+  return (
+    <nav aria-label="Path" className={cn("flex min-w-0 items-center gap-0.5 text-xs", className)}>
+      {head.map((crumb) => (
+        <span key={crumb.path} className="flex shrink-0 items-center gap-0.5">
+          <BreadcrumbCrumb crumb={crumb} last={!collapsed && crumb === crumbs[crumbs.length - 1]} onNavigate={onNavigate} run={run} />
+          <ChevronRight className="size-3 shrink-0 text-text-subtle" />
+        </span>
+      ))}
+
+      {collapsed && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              aria-label="Show hidden path segments"
+              className="rounded px-1 py-0.5 text-text-2 can-hover:hover:bg-surface-elevated"
+            >
+              <MoreHorizontal className="size-3.5" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="max-h-72 overflow-y-auto">
+            {hidden.map((crumb) => (
+              <DropdownMenuItem key={crumb.path} onClick={() => onNavigate(crumb.path)}>
+                {crumb.name}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+      {collapsed && <ChevronRight className="size-3 shrink-0 text-text-subtle" />}
+
+      {tail.map((crumb, index) => (
+        <span key={crumb.path} className="flex min-w-0 items-center gap-0.5">
+          <BreadcrumbCrumb crumb={crumb} last={index === tail.length - 1} onNavigate={onNavigate} run={run} />
+          {index < tail.length - 1 && <ChevronRight className="size-3 shrink-0 text-text-subtle" />}
+        </span>
+      ))}
+      {prompts}
+    </nav>
+  );
+}
+
+interface BreadcrumbCrumbProps {
+  crumb: FsBreadcrumb;
+  last: boolean;
+  onNavigate(path: string): void;
+  run: ReturnType<typeof useDropTransfer>["run"];
+}
+
+/** One crumb, as its own component: a drop target needs its own hook call per crumb. */
+function BreadcrumbCrumb({ crumb, last, onNavigate, run }: BreadcrumbCrumbProps) {
+  const drop = usePathDropTarget({ targetDir: crumb.path, run });
+  return (
+    <button
+      type="button"
+      onClick={() => onNavigate(crumb.path)}
+      className={cn(
+        "max-w-[12rem] truncate rounded px-1 py-0.5 can-hover:hover:bg-surface-elevated",
+        last ? "font-medium text-text" : "text-text-2",
+        drop.isOver && DROP_TARGET_CLASS,
+      )}
+      {...drop.handlers}
+    >
+      {crumb.name}
+    </button>
+  );
+}

package/src/web/components/os-explorer/explorer-context-menu.tsx

@@ -0,0 +1,131 @@
+/**
+ * The explorer's context menu. One component covers both cases: a right-click on rows
+ * (`targets` non-empty) and a right-click on empty space (`targets` empty), because the
+ * OS menus differ only in which items appear.
+ *
+ * Rendered through the adaptive menu, so it is a bottom sheet on phones and a radix menu
+ * everywhere else.
+ */
+
+import {
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+} from "@/components/ui/adaptive-context-menu";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import type { FsEntry } from "@/lib/fs-api";
+import { canOpenInPpm } from "./can-open-in-ppm";
+import type { ExplorerActions } from "./actions/use-explorer-actions";
+import { useExplorerStore, type SortDir, type SortKey } from "./explorer-store";
+import { SORT_DIR_OPTIONS, SORT_KEY_OPTIONS } from "./sort-options";
+
+export interface ExplorerContextMenuProps {
+  /** Entries the menu acts on; empty means the folder background. */
+  targets: FsEntry[];
+  currentDir: string;
+  hasClipboard: boolean;
+  isPinned(path: string): boolean;
+  actions: ExplorerActions;
+}
+
+export function ExplorerContextMenu({
+  targets, currentDir, hasClipboard, isPinned, actions,
+}: ExplorerContextMenuProps) {
+  // The mobile sheet is a single instance — "Open in New Window" would spawn a desktop
+  // floating window that `WindowLayer` never renders below `md`, a silent no-op there.
+  const isMobile = useIsMobile();
+  const single = targets.length === 1 ? targets[0]! : null;
+  const onlyDirs = targets.length > 0 && targets.every((e) => e.type === "directory");
+  const count = targets.length;
+  const suffix = count > 1 ? ` ${count} items` : "";
+  const sort = useExplorerStore((s) => s.sort);
+  const setPrefs = useExplorerStore((s) => s.setPrefs);
+
+  if (count === 0) {
+    return (
+      <ContextMenuContent>
+        <ContextMenuItem onClick={() => actions.startCreate("new-file")}>New File</ContextMenuItem>
+        <ContextMenuItem onClick={() => actions.startCreate("new-folder")}>New Folder</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem disabled={!hasClipboard} onClick={() => actions.paste()}>Paste</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>Sort by</ContextMenuSubTrigger>
+          <ContextMenuSubContent>
+            <ContextMenuRadioGroup
+              value={sort.key}
+              onValueChange={(key) => setPrefs({ sort: { key: key as SortKey, dir: sort.dir } })}
+            >
+              {SORT_KEY_OPTIONS.map(({ key, label }) => (
+                <ContextMenuRadioItem key={key} value={key}>{label}</ContextMenuRadioItem>
+              ))}
+            </ContextMenuRadioGroup>
+            <ContextMenuSeparator />
+            <ContextMenuRadioGroup
+              value={sort.dir}
+              onValueChange={(dir) => setPrefs({ sort: { key: sort.key, dir: dir as SortDir } })}
+            >
+              {SORT_DIR_OPTIONS.map(({ dir, label }) => (
+                <ContextMenuRadioItem key={dir} value={dir}>{label}</ContextMenuRadioItem>
+              ))}
+            </ContextMenuRadioGroup>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuItem onClick={() => actions.copyPath([currentDir])}>Copy Path</ContextMenuItem>
+      </ContextMenuContent>
+    );
+  }
+
+  return (
+    <ContextMenuContent>
+      {single && (single.type === "directory" || canOpenInPpm(single.name)) && (
+        <ContextMenuItem onClick={() => actions.openEntry(single)}>Open</ContextMenuItem>
+      )}
+      {onlyDirs && single && !isMobile && (
+        <ContextMenuItem onClick={() => actions.openInNewWindow(single)}>
+          Open in New Window
+        </ContextMenuItem>
+      )}
+      <ContextMenuSeparator />
+
+      <ContextMenuItem onClick={() => actions.cut(targets)}>Cut{suffix}</ContextMenuItem>
+      <ContextMenuItem onClick={() => actions.copy(targets)}>Copy{suffix}</ContextMenuItem>
+      {onlyDirs && single && (
+        <ContextMenuItem disabled={!hasClipboard} onClick={() => actions.paste(single.path)}>
+          Paste
+        </ContextMenuItem>
+      )}
+      <ContextMenuSeparator />
+
+      {single && <ContextMenuItem onClick={() => actions.startRename(single)}>Rename</ContextMenuItem>}
+      <ContextMenuItem onClick={() => actions.trash(targets)}>Move to Trash{suffix}</ContextMenuItem>
+      <ContextMenuItem variant="destructive" onClick={() => actions.confirmPermanentDelete(targets)}>
+        Delete permanently
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+
+      <ContextMenuItem onClick={() => actions.copyPath(targets.map((e) => e.path))}>Copy Path</ContextMenuItem>
+      <ContextMenuItem onClick={() => actions.copyName(targets.map((e) => e.name))}>Copy Name</ContextMenuItem>
+      {targets.some((e) => e.type === "file") && (
+        <ContextMenuItem onClick={() => actions.download(targets)}>Download</ContextMenuItem>
+      )}
+      {onlyDirs && single && (
+        <ContextMenuItem onClick={() => actions.togglePin(single.path, single.name)}>
+          {isPinned(single.path) ? "Unpin from Sidebar" : "Pin to Sidebar"}
+        </ContextMenuItem>
+      )}
+      {single && (
+        <>
+          <ContextMenuSeparator />
+          <ContextMenuItem onClick={() => actions.showProperties(single)}>Properties</ContextMenuItem>
+        </>
+      )}
+    </ContextMenuContent>
+  );
+}