@hienlh/ppm 0.17.56 → 0.18.0

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

@@ -0,0 +1,103 @@
+/**
+ * The two interruptions a mutation can raise: a name collision during paste, and the
+ * confirmation for a delete that skips the trash.
+ *
+ * Both are rendered by the window body from the state `useExplorerActions` owns, so the
+ * action modules stay free of React.
+ */
+
+import { Button } from "@/components/ui/button";
+import type { FsEntry } from "@/lib/fs-api";
+import type { ExplorerDialogState } from "./actions/use-explorer-actions";
+import { ExplorerModalShell } from "./explorer-modal-shell";
+import { PropertiesDialog } from "./properties-dialog";
+
+export interface ExplorerDialogsProps {
+  dialogs: ExplorerDialogState;
+  platform: string | undefined;
+  sep: string;
+}
+
+export function ExplorerDialogs({ dialogs, platform, sep }: ExplorerDialogsProps) {
+  const { collision, pendingDelete, permanentOverwrite, properties } = dialogs;
+
+  return (
+    <>
+      {collision && (
+        <ExplorerModalShell
+          open
+          // Dismissing without choosing must not silently overwrite anything.
+          onClose={() => collision.resolve("skip")}
+          title="An item with that name already exists"
+          description={collision.name}
+          footer={
+            <>
+              <Button variant="outline" onClick={() => collision.resolve("skip")}>Skip</Button>
+              <Button variant="outline" onClick={() => collision.resolve("keep-both")}>Keep both</Button>
+              <Button variant="destructive" onClick={() => collision.resolve("replace")}>Replace</Button>
+            </>
+          }
+        >
+          <p className="py-1 text-sm text-text-2">
+            Replacing moves the existing item to the Trash first, so it stays recoverable.
+            Keep both adds a numbered suffix.
+          </p>
+        </ExplorerModalShell>
+      )}
+
+      {pendingDelete && (
+        <ExplorerModalShell
+          open
+          onClose={dialogs.closeDelete}
+          title={`Delete ${pendingDelete.paths.length} item${pendingDelete.paths.length === 1 ? "" : "s"} permanently?`}
+          description="This cannot be undone — the items do not go to the Trash."
+          footer={
+            <>
+              <Button variant="outline" onClick={dialogs.closeDelete}>Cancel</Button>
+              <Button variant="destructive" onClick={dialogs.runPermanentDelete}>Delete permanently</Button>
+            </>
+          }
+        >
+          <ul className="space-y-0.5 py-1 text-sm text-text-2">
+            {pendingDelete.names.slice(0, 10).map((name) => (
+              <li key={name} className="truncate">{name}</li>
+            ))}
+            {pendingDelete.names.length > 10 && (
+              <li className="text-text-subtle">and {pendingDelete.names.length - 10} more…</li>
+            )}
+          </ul>
+        </ExplorerModalShell>
+      )}
+
+      {permanentOverwrite && (
+        <ExplorerModalShell
+          open
+          // Dismissing without choosing must not silently delete anything.
+          onClose={() => permanentOverwrite.resolve(false)}
+          title="This host has no Trash"
+          description={permanentOverwrite.name}
+          footer={
+            <>
+              <Button variant="outline" onClick={() => permanentOverwrite.resolve(false)}>Cancel</Button>
+              <Button variant="destructive" onClick={() => permanentOverwrite.resolve(true)}>Delete permanently</Button>
+            </>
+          }
+        >
+          <p className="py-1 text-sm text-text-2">
+            Replacing this item cannot go through the Trash on this host. Deleting it
+            permanently cannot be undone.
+          </p>
+        </ExplorerModalShell>
+      )}
+
+      {properties && (
+        <PropertiesDialog
+          entry={properties as FsEntry}
+          platform={platform}
+          sep={sep}
+          onClose={dialogs.closeProperties}
+        />
+      )}
+    </>
+  );
+}

package/src/web/components/os-explorer/explorer-modal-shell.tsx

@@ -0,0 +1,60 @@
+/**
+ * One modal presentation for every explorer prompt: a centred dialog on desktop, a
+ * bottom sheet below `md`.
+ *
+ * Properties, the collision prompt and the permanent-delete confirmation all need the
+ * same treatment, and the mobile rules say a dialog must become a sheet — doing that once
+ * here keeps the three call sites free of breakpoint logic.
+ */
+
+import type { ReactNode } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { cn } from "@/lib/utils";
+
+export interface ExplorerModalShellProps {
+  open: boolean;
+  onClose(): void;
+  title: string;
+  description?: string;
+  children: ReactNode;
+  /** Rendered bottom-right on desktop, stacked full-width in the sheet's thumb zone. */
+  footer?: ReactNode;
+  className?: string;
+}
+
+export function ExplorerModalShell({
+  open, onClose, title, description, children, footer, className,
+}: ExplorerModalShellProps) {
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return (
+      <BottomSheet open={open} onClose={onClose} className="p-4">
+        <div className={cn("space-y-3", className)}>
+          <div>
+            <h2 className="text-base font-semibold text-text">{title}</h2>
+            {description && <p className="mt-1 text-sm text-text-2">{description}</p>}
+          </div>
+          <div className="max-h-[50vh] overflow-y-auto">{children}</div>
+          {/* Primary actions sit at the bottom of the sheet, inside the thumb zone. */}
+          {footer && <div className="flex flex-col gap-2 pt-1">{footer}</div>}
+        </div>
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => { if (!next) onClose(); }}>
+      <DialogContent className={cn("sm:max-w-md", className)}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        <div className="max-h-[60vh] overflow-y-auto">{children}</div>
+        {footer && <div className="flex justify-end gap-2 pt-2">{footer}</div>}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/os-explorer/explorer-pins-store.ts

@@ -0,0 +1,63 @@
+/**
+ * PPM's own sidebar pins — folders the user pinned inside PPM, kept apart from the
+ * OS-provided pins (Quick Access / Finder Favorites / GTK-KDE bookmarks) which are
+ * read-only and re-read from the host on every load.
+ */
+
+import { create } from "zustand";
+
+export interface ExplorerPin {
+  name: string;
+  path: string;
+}
+
+const PINS_KEY = "ppm-explorer-pins";
+const MAX_PINS = 50;
+
+function loadPins(): ExplorerPin[] {
+  try {
+    const raw = localStorage.getItem(PINS_KEY);
+    const parsed: unknown = raw ? JSON.parse(raw) : [];
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .filter((p): p is ExplorerPin =>
+        !!p && typeof (p as ExplorerPin).path === "string" && typeof (p as ExplorerPin).name === "string")
+      .slice(0, MAX_PINS);
+  } catch {
+    return [];
+  }
+}
+
+function savePins(pins: ExplorerPin[]): void {
+  try {
+    localStorage.setItem(PINS_KEY, JSON.stringify(pins));
+  } catch {
+    /* quota or private mode — pins simply do not persist */
+  }
+}
+
+interface PinsStore {
+  pins: ExplorerPin[];
+  isPinned(path: string): boolean;
+  pin(pin: ExplorerPin): void;
+  unpin(path: string): void;
+}
+
+export const useExplorerPinsStore = create<PinsStore>((set, get) => ({
+  pins: loadPins(),
+
+  isPinned: (path) => get().pins.some((p) => p.path === path),
+
+  pin: (entry) => {
+    if (get().isPinned(entry.path)) return;
+    const pins = [...get().pins, entry].slice(0, MAX_PINS);
+    savePins(pins);
+    set({ pins });
+  },
+
+  unpin: (path) => {
+    const pins = get().pins.filter((p) => p.path !== path);
+    savePins(pins);
+    set({ pins });
+  },
+}));

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

@@ -0,0 +1,198 @@
+/**
+ * Places sidebar: PPM pins, the OS's own pinned folders, the known folders, and the
+ * drives.
+ *
+ * Host-info provider failures arrive as `warnings[]` rather than as an error — a Mac
+ * without Full Disk Access still has drives and known folders — so they render as a muted
+ * hint row instead of replacing the sidebar.
+ */
+
+import type { ComponentType } from "react";
+import { AlertTriangle, HardDrive, Pin, Usb, Network } from "lucide-react";
+import type { HostInfo, Drive } from "../../../types/system";
+import { cn } from "@/lib/utils";
+import { DROP_TARGET_CLASS } from "./dnd/drop-target-style";
+import type { DropRunner } from "./dnd/entry-drop-executor";
+import { usePathDropTarget } from "./dnd/use-path-drop-target";
+import { useDropTransfer } from "./dnd/use-drop-transfer";
+import { useExplorerPinsStore } from "./explorer-pins-store";
+import { FileTypeIcon } from "./icons/file-type-icon";
+import type { SkinVocab } from "./skins/skin-types";
+import { usePrefersCoarsePointer } from "./use-coarse-long-press";
+
+/** A folder-type place row draws the current skin's folder glyph via `FileTypeIcon`'s context. */
+function FolderPlaceIcon({ className }: { className?: string }) {
+  return <FileTypeIcon name="" kind="directory" className={cn("size-4 shrink-0", className)} />;
+}
+
+const DRIVE_ICON: Record<Drive["kind"], typeof HardDrive> = {
+  fixed: HardDrive,
+  removable: Usb,
+  network: Network,
+  unknown: HardDrive,
+};
+
+type PlaceIcon = ComponentType<{ className?: string }>;
+
+interface PlaceProps {
+  label: string;
+  path: string;
+  active: boolean;
+  icon: PlaceIcon;
+  onNavigate(path: string): void;
+  onUnpin?(): void;
+  /** Every place is a directory, so a drop always has somewhere valid to land. */
+  run: DropRunner;
+}
+
+function Place({ label, path, active, icon: Icon, onNavigate, onUnpin, run }: PlaceProps) {
+  // Gated on real pointer coarseness, not a `md:` breakpoint — an iPad is ≥768px but has no
+  // mouse, so a breakpoint-only rule was silently dropping the 44px minimum for it.
+  const coarse = usePrefersCoarsePointer();
+  const drop = usePathDropTarget({ targetDir: path, run });
+  return (
+    <div className="group/place relative flex items-center">
+      <button
+        type="button"
+        title={path}
+        onClick={() => onNavigate(path)}
+        className={cn(
+          "flex w-full items-center gap-2 rounded px-2 py-1 text-left text-[13px]",
+          coarse ? "min-h-[44px]" : "min-h-0",
+          "can-hover:hover:bg-surface-elevated",
+          active ? "bg-accent-wash text-text" : "text-text-2",
+          drop.isOver && DROP_TARGET_CLASS,
+        )}
+        {...drop.handlers}
+      >
+        <Icon className="size-4 shrink-0 text-text-subtle" />
+        <span className="truncate">{label}</span>
+      </button>
+      {onUnpin && (
+        <button
+          type="button"
+          aria-label={`Unpin ${label}`}
+          title="Unpin"
+          onClick={onUnpin}
+          // Always reachable on touch; only revealed on hover where hovering exists.
+          className="absolute right-1 rounded p-1 text-text-subtle can-hover:opacity-0 can-hover:group-hover/place:opacity-100 can-hover:hover:text-text"
+        >
+          <Pin className="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="pb-2">
+      <p className="px-2 pb-0.5 pt-2 text-[10px] font-semibold uppercase tracking-wide text-text-subtle">
+        {title}
+      </p>
+      {children}
+    </div>
+  );
+}
+
+/** Used when a caller renders the sidebar without a resolved skin (defensive default). */
+const DEFAULT_VOCAB: SkinVocab = { home: "Home", pinned: "Quick access", known: "Folders", drives: "Drives" };
+
+export interface ExplorerSidebarProps {
+  host: HostInfo | null;
+  currentPath: string;
+  onNavigate(path: string): void;
+  /** Section labels for the current OS skin — Finder says "Favorites"/"Locations". */
+  vocab?: SkinVocab;
+}
+
+export function ExplorerSidebar({ host, currentPath, onNavigate, vocab = DEFAULT_VOCAB }: ExplorerSidebarProps) {
+  const pins = useExplorerPinsStore((s) => s.pins);
+  const unpin = useExplorerPinsStore((s) => s.unpin);
+  const isActive = (path: string) => path === currentPath;
+  // One drop-transfer context for the whole sidebar — every place lands through the same
+  // collision prompt rather than each row owning its own dialog state.
+  const { run, prompts } = useDropTransfer(host?.sep ?? "/", host?.platform);
+
+  return (
+    <aside
+      aria-label="Places"
+      data-testid="explorer-sidebar"
+      className="hidden w-44 shrink-0 overflow-y-auto border-r border-border bg-[var(--x-sidebar-bg,var(--panel-2))] px-1 py-1 sm:block"
+    >
+      {pins.length > 0 && (
+        <Section title="Pinned">
+          {pins.map((pin) => (
+            <Place
+              key={pin.path}
+              label={pin.name}
+              path={pin.path}
+              icon={Pin}
+              active={isActive(pin.path)}
+              onNavigate={onNavigate}
+              onUnpin={() => unpin(pin.path)}
+              run={run}
+            />
+          ))}
+        </Section>
+      )}
+
+      {host && host.pinned.length > 0 && (
+        <Section title={vocab.pinned}>
+          {host.pinned.map((entry) => (
+            <Place
+              key={entry.path}
+              label={entry.name}
+              path={entry.path}
+              icon={FolderPlaceIcon}
+              active={isActive(entry.path)}
+              onNavigate={onNavigate}
+              run={run}
+            />
+          ))}
+        </Section>
+      )}
+
+      {host && (
+        <Section title={vocab.known}>
+          <Place label={vocab.home} path={host.homedir} icon={FolderPlaceIcon} active={isActive(host.homedir)} onNavigate={onNavigate} run={run} />
+          {host.knownFolders.map((folder) => (
+            <Place
+              key={folder.path}
+              label={folder.name}
+              path={folder.path}
+              icon={FolderPlaceIcon}
+              active={isActive(folder.path)}
+              onNavigate={onNavigate}
+              run={run}
+            />
+          ))}
+        </Section>
+      )}
+
+      {host && host.drives.length > 0 && (
+        <Section title={vocab.drives}>
+          {host.drives.map((drive) => (
+            <Place
+              key={drive.path}
+              label={drive.label ? `${drive.label} (${drive.name})` : drive.name}
+              path={drive.path}
+              icon={DRIVE_ICON[drive.kind]}
+              active={isActive(drive.path)}
+              onNavigate={onNavigate}
+              run={run}
+            />
+          ))}
+        </Section>
+      )}
+
+      {host?.warnings.map((warning) => (
+        <p key={warning} className="flex gap-1.5 px-2 py-1 text-[11px] leading-snug text-text-subtle">
+          <AlertTriangle className="mt-0.5 size-3 shrink-0" />
+          <span>{warning}</span>
+        </p>
+      ))}
+      {prompts}
+    </aside>
+  );
+}

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

@@ -0,0 +1,68 @@
+/**
+ * Toolbar "Sort" menu: the only sort control reachable from Icons and Column view, which
+ * have no clickable column header of their own (List view keeps that shortcut too — see
+ * `views/list-view.tsx`). Backed by the same `prefs.sort` every view already reads.
+ */
+
+import { ArrowUpDown } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useExplorerStore, type SortDir, type SortKey } from "./explorer-store";
+import { SORT_DIR_OPTIONS, SORT_KEY_OPTIONS, sortDirLabel, sortKeyLabel } from "./sort-options";
+import { toolbarButtonClass } from "./toolbar-icon-button";
+
+export interface ExplorerSortMenuProps {
+  coarse: boolean;
+}
+
+export function ExplorerSortMenu({ coarse }: ExplorerSortMenuProps) {
+  const sort = useExplorerStore((s) => s.sort);
+  const setPrefs = useExplorerStore((s) => s.setPrefs);
+
+  // No skin currently defines a `vocab` slot for this label, so both the Windows and
+  // macOS chrome fall back to the same plain word.
+  const label = "Sort";
+  const title = `${label}: ${sortKeyLabel(sort.key)}, ${sortDirLabel(sort.dir)}`;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button type="button" aria-label={label} title={title} className={toolbarButtonClass(coarse)}>
+          <ArrowUpDown className="size-4" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>Sort by</DropdownMenuLabel>
+        <DropdownMenuRadioGroup
+          value={sort.key}
+          onValueChange={(key) => setPrefs({ sort: { key: key as SortKey, dir: sort.dir } })}
+        >
+          {SORT_KEY_OPTIONS.map(({ key, label: keyLabel }) => (
+            <DropdownMenuRadioItem key={key} value={key}>
+              {keyLabel}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Order</DropdownMenuLabel>
+        <DropdownMenuRadioGroup
+          value={sort.dir}
+          onValueChange={(dir) => setPrefs({ sort: { key: sort.key, dir: dir as SortDir } })}
+        >
+          {SORT_DIR_OPTIONS.map(({ dir, label: dirLabel }) => (
+            <DropdownMenuRadioItem key={dir} value={dir}>
+              {dirLabel}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/web/components/os-explorer/explorer-status-bar.tsx

@@ -0,0 +1,35 @@
+/** Item count, selection count and the selected size — the strip along the window's foot. */
+
+import type { FsEntry } from "@/lib/fs-api";
+import { formatSize } from "./format-file-meta";
+import { totalSize } from "./sort-and-filter-entries";
+
+export interface ExplorerStatusBarProps {
+  /** Rows currently visible (after filtering). */
+  entries: FsEntry[];
+  selection: Set<string>;
+  /** True when the server capped the listing, so the counts are a lower bound. */
+  truncated: boolean;
+}
+
+export function ExplorerStatusBar({ entries, selection, truncated }: ExplorerStatusBarProps) {
+  const selected = entries.filter((e) => selection.has(e.path));
+  const parts = [`${entries.length}${truncated ? "+" : ""} item${entries.length === 1 ? "" : "s"}`];
+  if (selected.length > 0) {
+    parts.push(`${selected.length} selected`);
+    const bytes = totalSize(selected);
+    if (bytes > 0) parts.push(formatSize(bytes));
+  }
+
+  return (
+    <div
+      data-testid="explorer-status"
+      className="flex shrink-0 items-center gap-2 border-t border-border bg-panel-2 px-2 py-1 text-[11px] text-text-subtle"
+    >
+      {parts.join(" · ")}
+      {truncated && (
+        <span className="ml-auto">Listing capped — narrow the filter to see the rest.</span>
+      )}
+    </div>
+  );
+}