@hienlh/ppm 0.17.57 → 0.18.0

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>
+  );
+});

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

@@ -0,0 +1,112 @@
+/**
+ * One fixed-width, independently virtualised and independently scrolled column of the
+ * Miller browser. Column view keeps a single highlighted entry per column rather than the
+ * multi-select semantics List/Icons use — Finder's own column browser works the same way,
+ * and it is what lets "the highlighted entry" double as "which directory the next column
+ * shows" with no extra state.
+ */
+
+import { useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+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 { useDragAutoScroll } from "../dnd/use-drag-auto-scroll";
+import { usePathDropTarget } from "../dnd/use-path-drop-target";
+import { ColumnRow } from "./column-row";
+
+export const COLUMN_WIDTH = 220;
+/** Mobile's single full-width column needs a 44px+ touch target, bigger than the desktop
+ *  (fine/coarse-pointer) `rowHeight` threaded in from `ExplorerBody`. Exported so
+ *  `column-view-mobile.tsx` can pass a real value instead of a duplicated magic number —
+ *  the `fullWidth` branch here always wins over whatever `rowHeight` prop it receives. */
+export const ROW_HEIGHT_MOBILE = 48;
+
+export interface ColumnViewColumnProps {
+  path: string;
+  entries: FsEntry[];
+  loading: boolean;
+  error: string | null;
+  selectedPath: string | null;
+  isFocused: boolean;
+  currentDir: string;
+  hasClipboard: boolean;
+  isPinned(path: string): boolean;
+  actions: ExplorerActions;
+  /** Row height in px; larger on coarse-pointer devices, same as List/Icons. */
+  rowHeight: number;
+  onSelect(entry: FsEntry): void;
+  onOpen(entry: FsEntry): void;
+  onFocus(): void;
+  /** Mobile's single-column mode: fill the container instead of the fixed desktop width. */
+  fullWidth?: boolean;
+}
+
+export function ColumnViewColumn({
+  path, entries, loading, error, selectedPath, isFocused, currentDir,
+  hasClipboard, isPinned, actions, rowHeight, onSelect, onOpen, onFocus, fullWidth,
+}: ColumnViewColumnProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useDragAutoScroll(scrollRef);
+  // Mobile's single full-width column always wants the bigger touch target, regardless of
+  // whatever fine/coarse-pointer density the caller threaded in for the desktop Miller strip.
+  const effectiveRowHeight = fullWidth ? ROW_HEIGHT_MOBILE : rowHeight;
+  const virtualizer = useVirtualizer({
+    count: entries.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => effectiveRowHeight,
+    overscan: 8,
+  });
+  // The column's own empty area is a drop target for its own directory — dropping below the
+  // last row of an ancestor column moves/copies into that ancestor, not just the deepest one.
+  // Mobile's single full-width column never gets one: no drag source can ever start on touch.
+  const backgroundDrop = usePathDropTarget({ targetDir: path, run: actions.transferInto, disabled: fullWidth });
+
+  return (
+    <div
+      className={cn("flex h-full shrink-0 flex-col", !fullWidth && "border-r border-border", isFocused && "bg-panel-2/40")}
+      style={fullWidth ? undefined : { width: COLUMN_WIDTH }}
+    >
+      <div
+        ref={scrollRef}
+        role="listbox"
+        aria-label={path}
+        className={cn("flex-1 overflow-y-auto outline-none", backgroundDrop.isOver && DROP_TARGET_CLASS)}
+        {...backgroundDrop.handlers}
+      >
+        {loading && entries.length === 0 && <p className="p-2 text-xs text-text-subtle">Loading…</p>}
+        {error && <p className="p-2 text-xs text-error">{error}</p>}
+        {!loading && !error && entries.length === 0 && <p className="p-2 text-xs text-text-subtle">Empty</p>}
+        <div className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
+          {virtualizer.getVirtualItems().map((item) => {
+            const entry = entries[item.index]!;
+            const selected = entry.path === selectedPath;
+            return (
+              <div
+                key={entry.path}
+                className="absolute left-0 top-0 w-full"
+                style={{ transform: `translateY(${item.start}px)` }}
+              >
+                <ColumnRow
+                  entry={entry}
+                  selected={selected}
+                  currentDir={currentDir}
+                  hasClipboard={hasClipboard}
+                  isPinned={isPinned}
+                  actions={actions}
+                  rowHeight={effectiveRowHeight}
+                  onSelect={() => {
+                    onFocus();
+                    onSelect(entry);
+                  }}
+                  onOpen={() => onOpen(entry)}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,98 @@
+/**
+ * Column view's mobile presentation: only the focused column ever renders, full width, with
+ * a Back row above it instead of the desktop's side-by-side Miller strip — there is no room
+ * for more than one column on a phone, and no preview pane (files open directly on tap, see
+ * `column-view-column.tsx`'s mobile branch).
+ */
+
+import type { KeyboardEvent, RefObject } from "react";
+import { ArrowLeft } from "lucide-react";
+import { ContextMenu, ContextMenuTrigger } from "@/components/ui/adaptive-context-menu";
+import type { FsEntry } from "@/lib/fs-api";
+import type { ExplorerActions } from "../actions/use-explorer-actions";
+import { ExplorerContextMenu } from "../explorer-context-menu";
+import type { ExplorerSlice } from "../explorer-store";
+import type { LongPressHandlers } from "../use-coarse-long-press";
+import { ColumnViewColumn, ROW_HEIGHT_MOBILE } from "./column-view-column";
+import type { ColumnState } from "./use-column-view-state";
+
+export interface ColumnViewMobileProps {
+  containerRef: RefObject<HTMLDivElement | null>;
+  onKeyDown(event: KeyboardEvent): void;
+  backgroundLongPress: LongPressHandlers;
+  columns: ColumnState[];
+  focusedIndex: number;
+  setFocusedIndex(update: (i: number) => number): void;
+  selectedPathFor(index: number): string | null;
+  slice: ExplorerSlice;
+  hasClipboard: boolean;
+  isPinned(path: string): boolean;
+  actions: ExplorerActions;
+  onSelect(index: number, entry: FsEntry): void;
+  onOpen(entry: FsEntry): void;
+}
+
+export function ColumnViewMobile({
+  containerRef, onKeyDown, backgroundLongPress, columns, focusedIndex, setFocusedIndex,
+  selectedPathFor, slice, hasClipboard, isPinned, actions, onSelect, onOpen,
+}: ColumnViewMobileProps) {
+  const current = columns[focusedIndex];
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div
+          ref={containerRef}
+          tabIndex={0}
+          data-testid="explorer-columns"
+          aria-label="Column view"
+          onKeyDown={onKeyDown}
+          className="flex h-full min-h-0 w-full flex-col outline-none"
+          {...backgroundLongPress}
+        >
+          {focusedIndex > 0 && (
+            <button
+              type="button"
+              onClick={() => setFocusedIndex((i) => i - 1)}
+              aria-label="Back"
+              className="flex h-11 shrink-0 items-center gap-1.5 border-b border-border px-3 text-sm text-text-2 active:bg-surface-elevated"
+            >
+              <ArrowLeft className="size-4" /> Back
+            </button>
+          )}
+          {current && (
+            <div
+              key={current.path}
+              className="min-h-0 flex-1 motion-safe:animate-in motion-safe:slide-in-from-right-4 motion-safe:duration-150"
+            >
+              <ColumnViewColumn
+                path={current.path}
+                entries={current.entries}
+                loading={current.loading}
+                error={current.error}
+                selectedPath={selectedPathFor(focusedIndex)}
+                isFocused
+                fullWidth
+                rowHeight={ROW_HEIGHT_MOBILE}
+                currentDir={slice.path}
+                hasClipboard={hasClipboard}
+                isPinned={isPinned}
+                actions={actions}
+                onSelect={(entry) => onSelect(focusedIndex, entry)}
+                onOpen={onOpen}
+                onFocus={() => {}}
+              />
+            </div>
+          )}
+        </div>
+      </ContextMenuTrigger>
+      <ExplorerContextMenu
+        targets={[]}
+        currentDir={slice.path}
+        hasClipboard={hasClipboard}
+        isPinned={isPinned}
+        actions={actions}
+      />
+    </ContextMenu>
+  );
+}