@hienlh/ppm 0.17.56 → 0.18.0

package/src/web/components/os-explorer/icons/thumbnail-image.tsx

@@ -0,0 +1,124 @@
+/**
+ * Lazy, viewport-gated thumbnail for image files.
+ *
+ * A bare `<img src="/api/fs/raw?...">` cannot carry the Authorization header the API
+ * requires, so the bytes are fetched manually and turned into an object URL — the same
+ * trick `useBlobUrl` uses — but gated by an `IntersectionObserver` (nothing fetches until
+ * the tile scrolls near the viewport) and a module-wide concurrency cap, so opening a
+ * folder of a thousand photos does not fire a thousand requests at once.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { getAuthToken } from "@/lib/api-client";
+import type { FsEntry } from "@/lib/fs-api";
+import { cn } from "@/lib/utils";
+import { FileTypeIcon } from "./file-type-icon";
+import { acquireSlot } from "./thumbnail-fetch-semaphore";
+
+export interface ThumbnailImageProps {
+  entry: Pick<FsEntry, "name" | "path" | "kind">;
+  /** Square box the thumbnail (or its icon fallback) renders into, in px. */
+  size: number;
+  className?: string;
+}
+
+export function ThumbnailImage({ entry, size, className }: ThumbnailImageProps) {
+  const [src, setSrc] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const urlRef = useRef<string | null>(null);
+
+  // A different entry (row recycled by the virtualizer, or the user navigated) starts over.
+  useEffect(() => {
+    setSrc(null);
+    setFailed(false);
+  }, [entry.path]);
+
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el || src || failed) return;
+    // A scrolled-past tile must stop downloading (the server has no thumbnail endpoint —
+    // `/api/fs/raw` streams the whole original file) and give its semaphore slot back
+    // immediately rather than waiting for a fetch nobody will render.
+    const controller = new AbortController();
+    let release: (() => void) | null = null;
+
+    const observer = new IntersectionObserver(
+      (observed) => {
+        if (!observed[0]?.isIntersecting) return;
+        observer.disconnect();
+        void (async () => {
+          release = await acquireSlot();
+          if (controller.signal.aborted) {
+            release();
+            return;
+          }
+          try {
+            const token = getAuthToken();
+            const res = await fetch(`/api/fs/raw?path=${encodeURIComponent(entry.path)}`, {
+              headers: token ? { Authorization: `Bearer ${token}` } : {},
+              signal: controller.signal,
+            });
+            if (!res.ok) throw new Error(String(res.status));
+            const blob = await res.blob();
+            if (controller.signal.aborted) return;
+            const url = URL.createObjectURL(blob);
+            urlRef.current = url;
+            setSrc(url);
+          } catch {
+            if (!controller.signal.aborted) setFailed(true);
+          } finally {
+            // Idempotent: harmless if this fires again from the cleanup below for the same
+            // completed acquisition.
+            release?.();
+          }
+        })();
+      },
+      // Start the fetch a little before the tile is actually visible so it is usually
+      // ready by the time it scrolls fully into view.
+      { rootMargin: "200px" },
+    );
+    observer.observe(el);
+    return () => {
+      controller.abort();
+      observer.disconnect();
+      release?.();
+    };
+  }, [entry.path, src, failed]);
+
+  useEffect(
+    () => () => {
+      if (urlRef.current) URL.revokeObjectURL(urlRef.current);
+    },
+    [],
+  );
+
+  if (failed || !src) {
+    return (
+      <div
+        ref={rootRef}
+        className={cn("flex items-center justify-center", className)}
+        style={{ width: size, height: size }}
+      >
+        <FileTypeIcon name={entry.name} kind={entry.kind} className="size-1/2" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn("flex items-center justify-center overflow-hidden", className)}
+      style={{ width: size, height: size }}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element -- plain img, not next/image */}
+      <img
+        src={src}
+        alt=""
+        loading="lazy"
+        className="max-h-full max-w-full rounded object-contain"
+        onError={() => setFailed(true)}
+      />
+    </div>
+  );
+}

package/src/web/components/os-explorer/mobile/mobile-bottom-toolbar.tsx

@@ -0,0 +1,102 @@
+/**
+ * Bottom toolbar: every frequent action lives here, in the thumb zone. Two rows share the
+ * one bar — the normal row (navigate / create / paste / enter Select) and, once "Select" is
+ * tapped, a row of bulk actions over the current selection. "Delete permanently" is
+ * deliberately not here (it lives in the More sheet) — Trash is the default and the one-tap
+ * row should not make the irreversible action as easy to reach as the reversible one.
+ */
+
+import { useState } from "react";
+import {
+  ArrowLeft, Check, ClipboardPaste, Copy, Download, FilePlus, FolderPlus, Info, MoreHorizontal, Plus, Scissors, Trash2, X,
+} from "lucide-react";
+import type { FsEntry } from "@/lib/fs-api";
+import { BottomSheet, BottomSheetItem } from "@/components/ui/mobile-bottom-sheet";
+import type { ExplorerActions } from "../actions/use-explorer-actions";
+import type { ExplorerSlice } from "../explorer-store";
+import type { ExplorerNavigation } from "../use-explorer-navigation";
+import { useMobileExplorerOpenState } from "../use-explorer-open-state";
+import { MobileMoreSheet } from "./mobile-more-sheet";
+
+function ToolbarButton({
+  icon: Icon, label, onClick, disabled, destructive,
+}: {
+  icon: typeof Plus; label: string; onClick(): void; disabled?: boolean; destructive?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      disabled={disabled}
+      onClick={onClick}
+      className={`flex min-w-[44px] flex-1 flex-col items-center gap-0.5 rounded-lg py-1.5 text-[10px] active:bg-surface-elevated disabled:opacity-30 ${destructive ? "text-error" : "text-text-2"}`}
+    >
+      <Icon className="size-5" />
+      <span className="truncate">{label}</span>
+    </button>
+  );
+}
+
+export interface MobileBottomToolbarProps {
+  slice: ExplorerSlice;
+  nav: ExplorerNavigation;
+  actions: ExplorerActions;
+  entries: FsEntry[];
+  hasClipboard: boolean;
+}
+
+export function MobileBottomToolbar({ slice, nav, actions, entries, hasClipboard }: MobileBottomToolbarProps) {
+  const selectMode = useMobileExplorerOpenState((s) => s.selectMode);
+  const setSelectMode = useMobileExplorerOpenState((s) => s.setSelectMode);
+  const [newOpen, setNewOpen] = useState(false);
+  const [moreOpen, setMoreOpen] = useState(false);
+
+  const selected = entries.filter((e) => slice.selection.has(e.path));
+
+  if (selectMode) {
+    const exitSelect = () => { setSelectMode(false); };
+    return (
+      <div className="flex shrink-0 items-center gap-1 border-t border-border px-1 py-1">
+        <ToolbarButton icon={X} label="Cancel" onClick={exitSelect} />
+        <span className="px-1 text-xs text-text-subtle">{selected.length} selected</span>
+        <div className="flex-1" />
+        <ToolbarButton icon={Scissors} label="Cut" disabled={selected.length === 0} onClick={() => actions.cut(selected)} />
+        <ToolbarButton icon={Copy} label="Copy" disabled={selected.length === 0} onClick={() => actions.copy(selected)} />
+        <ToolbarButton icon={Trash2} label="Trash" disabled={selected.length === 0} destructive onClick={() => actions.trash(selected)} />
+        <ToolbarButton
+          icon={Download}
+          label="Download"
+          disabled={!selected.some((e) => e.type === "file")}
+          onClick={() => actions.download(selected)}
+        />
+        {selected.length === 1 && (
+          <ToolbarButton icon={Info} label="Info" onClick={() => actions.showProperties(selected[0]!)} />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex shrink-0 items-center gap-1 border-t border-border px-1 py-1">
+        <ToolbarButton icon={ArrowLeft} label="Back" disabled={!nav.canGoBack} onClick={nav.back} />
+        <ToolbarButton icon={Plus} label="New" onClick={() => setNewOpen(true)} />
+        <ToolbarButton icon={ClipboardPaste} label="Paste" disabled={!hasClipboard} onClick={() => actions.paste()} />
+        <ToolbarButton icon={Check} label="Select" onClick={() => setSelectMode(true)} />
+        <ToolbarButton icon={MoreHorizontal} label="More" onClick={() => setMoreOpen(true)} />
+      </div>
+
+      <BottomSheet open={newOpen} onClose={() => setNewOpen(false)} className="p-2">
+        <BottomSheetItem onClick={() => actions.startCreate("new-file")}>
+          <FilePlus className="size-4" /> New File
+        </BottomSheetItem>
+        <BottomSheetItem onClick={() => actions.startCreate("new-folder")}>
+          <FolderPlus className="size-4" /> New Folder
+        </BottomSheetItem>
+      </BottomSheet>
+
+      <MobileMoreSheet open={moreOpen} onClose={() => setMoreOpen(false)} slice={slice} actions={actions} entries={entries} />
+    </>
+  );
+}

package/src/web/components/os-explorer/mobile/mobile-explorer-sheet.tsx

@@ -0,0 +1,61 @@
+/**
+ * Full-screen mobile presentation of the explorer: a `BottomSheet` sized to the whole
+ * visible viewport, hosting the exact same `ExplorerBody` every desktop window uses
+ * (`variant="sheet"`), so file-type icons, the active OS skin's vocabulary and every mutation
+ * action are shared code, not a parallel mobile implementation.
+ *
+ * Self-gated singleton, mounted once at the app root next to the other overlay singletons
+ * (`ComparePicker`, `ImageOverlay`, …) — renders nothing until `openMobileExplorer` is called.
+ */
+
+import { useEffect, type TouchEvent } from "react";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { ExplorerBody } from "../explorer-body";
+import { useExplorerStore } from "../explorer-store";
+import { MOBILE_EXPLORER_WINDOW_ID, useMobileExplorerOpenState } from "../use-explorer-open-state";
+
+export function MobileExplorerSheet() {
+  const isOpen = useMobileExplorerOpenState((s) => s.isOpen);
+  const close = useMobileExplorerOpenState((s) => s.close);
+  const setSelectMode = useMobileExplorerOpenState((s) => s.setSelectMode);
+  const path = useExplorerStore((s) => s.slices[MOBILE_EXPLORER_WINDOW_ID]?.path);
+  const renaming = useExplorerStore(
+    (s) => s.slices[MOBILE_EXPLORER_WINDOW_ID]?.inlineEdit?.kind === "rename",
+  );
+
+  // Navigating (forward, back, or via a place/breadcrumb) already clears the shared
+  // selection — Select mode's own checkbox/bottom-bar state must follow it, or the toolbar
+  // is left on Cut/Copy/Trash with 0 items and no way back short of the explicit Cancel.
+  useEffect(() => {
+    setSelectMode(false);
+  }, [path, setSelectMode]);
+
+  // Swallowed only while an inline rename is active: a drag meant to clear the soft keyboard
+  // (or just reach a field below it) would otherwise also read as a swipe-to-dismiss, since
+  // `BottomSheet` wires its drag handlers on the panel — an ancestor of everything here.
+  const suppressSwipe = (e: TouchEvent) => {
+    if (renaming) e.stopPropagation();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    // Below the default sheet z-index (50): the explorer opens further sheets on top of
+    // itself (row actions, "New", "More", "Places") that all rely on that default, and a
+    // higher value here would silently sit above every one of them instead. 45 still clears
+    // the mobile bottom nav (z-40) so the sheet reads as full-screen underneath it.
+    <BottomSheet open={isOpen} onClose={close} zIndex={45} className="flex h-[var(--sheet-vh)] flex-col p-0">
+      <div
+        className="flex min-h-0 flex-1 flex-col"
+        onTouchStart={suppressSwipe}
+        onTouchMove={suppressSwipe}
+      >
+        {path ? (
+          <ExplorerBody windowId={MOBILE_EXPLORER_WINDOW_ID} initialPath={path} variant="sheet" />
+        ) : (
+          <div className="flex flex-1 items-center justify-center text-sm text-text-2">Loading…</div>
+        )}
+      </div>
+    </BottomSheet>
+  );
+}

package/src/web/components/os-explorer/mobile/mobile-explorer-top-bar.tsx

@@ -0,0 +1,41 @@
+/**
+ * Mobile sheet header: current folder name, nothing else. Every frequent action lives in
+ * the bottom toolbar (the thumb zone) — putting anything interactive up here would be the
+ * one part of a one-handed grip that is hardest to reach.
+ *
+ * The close button is the one addition beyond "title only": a sheet that fills the whole
+ * screen leaves no backdrop to tap, so swipe-to-dismiss would otherwise be the only way out.
+ */
+
+import { X } from "lucide-react";
+import type { ExplorerSlice } from "../explorer-store";
+
+export interface MobileExplorerTopBarProps {
+  slice: ExplorerSlice;
+  onClose(): void;
+}
+
+/** The folder name to show for the current path — the last breadcrumb is the folder itself. */
+function currentFolderName(slice: ExplorerSlice): string {
+  const last = slice.breadcrumbs[slice.breadcrumbs.length - 1];
+  return last?.name ?? slice.path;
+}
+
+export function MobileExplorerTopBar({ slice, onClose }: MobileExplorerTopBarProps) {
+  return (
+    <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2.5">
+      <span className="min-w-0 flex-1 truncate text-[15px] font-semibold text-text">
+        {currentFolderName(slice)}
+      </span>
+      <button
+        type="button"
+        aria-label="Close file explorer"
+        title="Close"
+        onClick={onClose}
+        className="flex size-11 shrink-0 items-center justify-center rounded-full text-text-2 active:bg-surface-elevated"
+      >
+        <X className="size-5" />
+      </button>
+    </div>
+  );
+}

package/src/web/components/os-explorer/mobile/mobile-more-sheet.tsx

@@ -0,0 +1,117 @@
+/**
+ * The mobile toolbar's overflow sheet: view mode, sort, hidden files, permanent delete and
+ * properties of the *current folder* (not the selection — that's what the row/tile menu and
+ * the selection-mode toolbar are for).
+ *
+ * "Delete permanently" lives here rather than on the one-tap selection toolbar so the
+ * irreversible action never sits as close at hand as Trash.
+ */
+
+import {
+  Columns3, Eye, EyeOff, Info, LayoutGrid, List, Trash2,
+} from "lucide-react";
+import type { FsEntry } from "@/lib/fs-api";
+import { BottomSheet, BottomSheetItem, BottomSheetSeparator, BottomSheetSubLabel } from "@/components/ui/mobile-bottom-sheet";
+import type { ExplorerActions } from "../actions/use-explorer-actions";
+import { useExplorerStore, type ExplorerSlice, type ViewMode } from "../explorer-store";
+import { SORT_KEY_OPTIONS } from "../sort-options";
+import { activeEntries } from "../use-explorer-keyboard";
+import { AVAILABLE_VIEW_MODES } from "../views/explorer-view-registry";
+import { cn } from "@/lib/utils";
+
+const VIEW_ICON: Record<ViewMode, typeof List> = { list: List, icons: LayoutGrid, columns: Columns3 };
+const VIEW_LABEL: Record<ViewMode, string> = { list: "List", icons: "Icons", columns: "Columns" };
+
+/** The current folder, in the shape `showProperties`/`PropertiesDialog` need — the dialog
+ *  fetches everything else itself from `/api/fs/stat`. */
+function currentFolderEntry(slice: ExplorerSlice): FsEntry {
+  const name = slice.breadcrumbs[slice.breadcrumbs.length - 1]?.name ?? slice.path;
+  return { name, path: slice.path, type: "directory", kind: "directory", modified: "" };
+}
+
+export interface MobileMoreSheetProps {
+  open: boolean;
+  onClose(): void;
+  slice: ExplorerSlice;
+  actions: ExplorerActions;
+  entries: FsEntry[];
+}
+
+export function MobileMoreSheet({ open, onClose, slice, actions, entries }: MobileMoreSheetProps) {
+  const viewMode = useExplorerStore((s) => s.viewMode);
+  const sort = useExplorerStore((s) => s.sort);
+  const showHidden = useExplorerStore((s) => s.showHidden);
+  const setPrefs = useExplorerStore((s) => s.setPrefs);
+  const targets = activeEntries(slice, entries);
+
+  return (
+    <BottomSheet open={open} onClose={onClose} className="p-2">
+      <BottomSheetSubLabel>View</BottomSheetSubLabel>
+      <div className="flex gap-1 px-2 pb-2">
+        {AVAILABLE_VIEW_MODES.map((mode) => {
+          const Icon = VIEW_ICON[mode];
+          return (
+            <button
+              key={mode}
+              type="button"
+              aria-pressed={viewMode === mode}
+              onClick={() => { setPrefs({ viewMode: mode }); onClose(); }}
+              className={cn(
+                "flex flex-1 flex-col items-center gap-1 rounded-lg py-2 text-xs active:bg-surface-elevated",
+                viewMode === mode ? "bg-accent-wash text-primary" : "text-text-2",
+              )}
+            >
+              <Icon className="size-4" />
+              {VIEW_LABEL[mode]}
+            </button>
+          );
+        })}
+      </div>
+
+      <BottomSheetSeparator />
+      <BottomSheetSubLabel>Sort by</BottomSheetSubLabel>
+      <div className="flex flex-wrap gap-1 px-2 pb-2">
+        {SORT_KEY_OPTIONS.map(({ key, label }) => (
+          <button
+            key={key}
+            type="button"
+            aria-pressed={sort.key === key}
+            onClick={() => {
+              setPrefs({ sort: { key, dir: sort.key === key && sort.dir === "asc" ? "desc" : "asc" } });
+              onClose();
+            }}
+            className={cn(
+              // min-h-11 (44px) keeps the tap target compliant without inflating the pill's
+              // padding to match — inline-flex + items-center re-centers the small text
+              // inside the taller box.
+              "inline-flex min-h-11 items-center justify-center rounded-full border px-3 py-1.5 text-xs active:bg-surface-elevated",
+              sort.key === key ? "border-primary bg-accent-wash text-text" : "border-border text-text-2",
+            )}
+          >
+            {label}{sort.key === key ? (sort.dir === "asc" ? " ↑" : " ↓") : ""}
+          </button>
+        ))}
+      </div>
+
+      <BottomSheetSeparator />
+      <BottomSheetItem onClick={() => setPrefs({ showHidden: !showHidden })}>
+        {showHidden ? <Eye className="size-4" /> : <EyeOff className="size-4" />}
+        {showHidden ? "Hide hidden files" : "Show hidden files"}
+      </BottomSheetItem>
+
+      <BottomSheetSeparator />
+      <BottomSheetItem
+        variant="destructive"
+        disabled={targets.length === 0}
+        onClick={() => actions.confirmPermanentDelete(targets)}
+      >
+        <Trash2 className="size-4" />
+        Delete permanently{targets.length > 1 ? ` (${targets.length})` : ""}
+      </BottomSheetItem>
+      <BottomSheetItem onClick={() => actions.showProperties(currentFolderEntry(slice))}>
+        <Info className="size-4" />
+        Properties of this folder
+      </BottomSheetItem>
+    </BottomSheet>
+  );
+}

package/src/web/components/os-explorer/mobile/mobile-places-sheet.tsx

@@ -0,0 +1,120 @@
+/**
+ * Full places list behind the chip strip's "All places" chip: PPM pins, OS pinned folders,
+ * known folders and drives, each sectioned exactly like the desktop sidebar — the strip only
+ * condenses the *common case*, this sheet is where everything still lives.
+ */
+
+import type { ReactNode } from "react";
+import { HardDrive, Network, Pin, Usb } from "lucide-react";
+import type { Drive, HostInfo } from "../../../../types/system";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { useExplorerPinsStore } from "../explorer-pins-store";
+import { FileTypeIcon } from "../icons/file-type-icon";
+import type { SkinVocab } from "../skins/skin-types";
+import { cn } from "@/lib/utils";
+
+const ICON_CLASS = "size-4 shrink-0 text-text-subtle";
+const DRIVE_ICON: Record<Drive["kind"], typeof HardDrive> = {
+  fixed: HardDrive,
+  removable: Usb,
+  network: Network,
+  unknown: HardDrive,
+};
+
+/** Folder-type place rows draw the current skin's folder glyph, same as the desktop sidebar. */
+function folderIcon(): ReactNode {
+  return <FileTypeIcon name="" kind="directory" className={ICON_CLASS} />;
+}
+
+function Row({
+  label, path, active, icon, onNavigate,
+}: {
+  label: string; path: string; active: boolean; icon: ReactNode; onNavigate(path: string): void;
+}) {
+  return (
+    <button
+      type="button"
+      title={path}
+      onClick={() => onNavigate(path)}
+      className={cn(
+        "flex min-h-[44px] w-full items-center gap-2.5 rounded-lg px-3 text-left text-sm active:bg-surface-elevated",
+        active ? "bg-accent-wash text-text" : "text-text-2",
+      )}
+    >
+      {icon}
+      <span className="truncate">{label}</span>
+    </button>
+  );
+}
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <div className="pb-2">
+      <p className="px-3 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-wide text-text-subtle">{title}</p>
+      {children}
+    </div>
+  );
+}
+
+export interface MobilePlacesSheetProps {
+  open: boolean;
+  onClose(): void;
+  host: HostInfo | null;
+  currentPath: string;
+  vocab: SkinVocab;
+  onNavigate(path: string): void;
+}
+
+export function MobilePlacesSheet({ open, onClose, host, currentPath, vocab, onNavigate }: MobilePlacesSheetProps) {
+  const pins = useExplorerPinsStore((s) => s.pins);
+  const isActive = (path: string) => path === currentPath;
+
+  return (
+    <BottomSheet open={open} onClose={onClose} zIndex={65} className="p-1">
+      <div className="max-h-[70vh] overflow-y-auto px-1 pb-2">
+        {pins.length > 0 && (
+          <Section title="Pinned">
+            {pins.map((pin) => (
+              <Row key={pin.path} label={pin.name} path={pin.path} icon={<Pin className={ICON_CLASS} />} active={isActive(pin.path)} onNavigate={onNavigate} />
+            ))}
+          </Section>
+        )}
+
+        {host && host.pinned.length > 0 && (
+          <Section title={vocab.pinned}>
+            {host.pinned.map((entry) => (
+              <Row key={entry.path} label={entry.name} path={entry.path} icon={folderIcon()} active={isActive(entry.path)} onNavigate={onNavigate} />
+            ))}
+          </Section>
+        )}
+
+        {host && (
+          <Section title={vocab.known}>
+            <Row label={vocab.home} path={host.homedir} icon={folderIcon()} active={isActive(host.homedir)} onNavigate={onNavigate} />
+            {host.knownFolders.map((folder) => (
+              <Row key={folder.path} label={folder.name} path={folder.path} icon={folderIcon()} active={isActive(folder.path)} onNavigate={onNavigate} />
+            ))}
+          </Section>
+        )}
+
+        {host && host.drives.length > 0 && (
+          <Section title={vocab.drives}>
+            {host.drives.map((drive) => {
+              const DriveIcon = DRIVE_ICON[drive.kind];
+              return (
+                <Row
+                  key={drive.path}
+                  label={drive.label ? `${drive.label} (${drive.name})` : drive.name}
+                  path={drive.path}
+                  icon={<DriveIcon className={ICON_CLASS} />}
+                  active={isActive(drive.path)}
+                  onNavigate={onNavigate}
+                />
+              );
+            })}
+          </Section>
+        )}
+      </div>
+    </BottomSheet>
+  );
+}

package/src/web/components/os-explorer/mobile/mobile-places-strip.tsx

@@ -0,0 +1,109 @@
+/**
+ * Sidebar → horizontally scrollable "places" chip strip on mobile: PPM pins, the host's own
+ * pinned folders, Home, and drives — condensed to fit under the title instead of a side
+ * column. The full list (known folders included) lives in a "Places" sheet behind the last
+ * chip.
+ *
+ * `touch-pan-x` keeps the browser's native scroll-chaining to the horizontal axis only, so a
+ * drag that starts on a chip does not also read as a vertical page scroll.
+ */
+
+import { useState, type ComponentType } from "react";
+import { HardDrive, MoreHorizontal, Network, Pin, Usb } from "lucide-react";
+import type { Drive, HostInfo } from "../../../../types/system";
+import { cn } from "@/lib/utils";
+import { useExplorerPinsStore } from "../explorer-pins-store";
+import { FileTypeIcon } from "../icons/file-type-icon";
+import type { SkinVocab } from "../skins/skin-types";
+import { MobilePlacesSheet } from "./mobile-places-sheet";
+
+function FolderChipIcon({ className }: { className?: string }) {
+  return <FileTypeIcon name="" kind="directory" className={className} />;
+}
+
+const DRIVE_ICON: Record<Drive["kind"], ComponentType<{ className?: string }>> = {
+  fixed: HardDrive,
+  removable: Usb,
+  network: Network,
+  unknown: HardDrive,
+};
+
+interface Chip {
+  key: string;
+  label: string;
+  path: string;
+  icon: ComponentType<{ className?: string }>;
+}
+
+function Chip({ chip, active, onNavigate }: { chip: Chip; active: boolean; onNavigate(path: string): void }) {
+  const Icon = chip.icon;
+  return (
+    <button
+      type="button"
+      onClick={() => onNavigate(chip.path)}
+      title={chip.path}
+      className={cn(
+        "flex h-11 shrink-0 items-center gap-1.5 rounded-full border px-3 text-[13px] active:bg-surface-elevated",
+        active ? "border-primary bg-accent-wash text-text" : "border-border text-text-2",
+      )}
+    >
+      <Icon className="size-4 shrink-0 text-text-subtle" />
+      <span className="max-w-[9rem] truncate">{chip.label}</span>
+    </button>
+  );
+}
+
+export interface MobilePlacesStripProps {
+  host: HostInfo | null;
+  currentPath: string;
+  onNavigate(path: string): void;
+  vocab: SkinVocab;
+}
+
+export function MobilePlacesStrip({ host, currentPath, onNavigate, vocab }: MobilePlacesStripProps) {
+  const pins = useExplorerPinsStore((s) => s.pins);
+  const [placesOpen, setPlacesOpen] = useState(false);
+
+  const chips: Chip[] = [
+    ...pins.map((pin): Chip => ({ key: `pin:${pin.path}`, label: pin.name, path: pin.path, icon: Pin })),
+    ...(host ? [{ key: "home", label: vocab.home, path: host.homedir, icon: FolderChipIcon }] : []),
+    ...(host?.pinned.map((p): Chip => ({ key: `os:${p.path}`, label: p.name, path: p.path, icon: FolderChipIcon })) ?? []),
+    ...(host?.drives.map((d): Chip => ({
+      key: `drive:${d.path}`,
+      label: d.label ? `${d.label} (${d.name})` : d.name,
+      path: d.path,
+      icon: DRIVE_ICON[d.kind],
+    })) ?? []),
+  ];
+
+  return (
+    <>
+      <div className="flex shrink-0 items-center gap-1.5 overflow-x-auto touch-pan-x border-b border-border px-2 py-1.5">
+        {chips.map((chip) => (
+          <Chip key={chip.key} chip={chip} active={chip.path === currentPath} onNavigate={onNavigate} />
+        ))}
+        <button
+          type="button"
+          aria-label="All places"
+          title="All places"
+          onClick={() => setPlacesOpen(true)}
+          className="flex h-11 shrink-0 items-center gap-1 rounded-full border border-border px-3 text-[13px] text-text-2 active:bg-surface-elevated"
+        >
+          <MoreHorizontal className="size-4" />
+        </button>
+      </div>
+
+      <MobilePlacesSheet
+        open={placesOpen}
+        onClose={() => setPlacesOpen(false)}
+        host={host}
+        currentPath={currentPath}
+        vocab={vocab}
+        onNavigate={(path) => {
+          setPlacesOpen(false);
+          onNavigate(path);
+        }}
+      />
+    </>
+  );
+}