@hienlh/ppm 0.20.9 → 0.21.0

package/src/web/components/layout/notification-bell-popover.tsx

@@ -4,7 +4,7 @@ import { useShallow } from "zustand/shallow";
 import { useNotificationStore, selectTotalUnread, notificationTint } from "@/stores/notification-store";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
-import { Bell, BellOff } from "lucide-react";
+import { Bell, BellOff } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { resolveProjectColor } from "@/lib/project-palette";
 

package/src/web/components/layout/panel-layout.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useRef, memo } from "react";
 import { Panel, Group, Separator } from "react-resizable-panels";
-import { GripVertical, GripHorizontal } from "lucide-react";
+import { GripVertical, GripHorizontal } from "@/lib/icons";
 import { usePanelStore } from "@/stores/panel-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { createPanel } from "@/stores/panel-utils";

package/src/web/components/layout/project-bottom-sheet.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useCallback, useMemo } from "react";
-import { X, Check, Plus, Settings, ChevronUp, ChevronDown, Pencil, Trash2, Palette, ArrowLeft, Image as ImageIcon, Search, ExternalLink, Copy } from "lucide-react";
+import { X, Check, Plus, Settings, ChevronUp, ChevronDown, Pencil, Trash2, Palette, ArrowLeft, Image as ImageIcon, Search, ExternalLink, Copy } from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore, resolveOrder, loadRecentTimes } from "@/stores/project-store";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -296,6 +296,9 @@ export function ProjectBottomSheet({ isOpen, onClose }: ProjectBottomSheetProps)
                 onTouchStart={() => startLongPress(project.name)}
                 onTouchEnd={cancelLongPress}
                 onTouchMove={cancelLongPress}
+                // A scroll fires `touchcancel` and then delivers no further
+                // move/end, so the timer has to be disarmed here too.
+                onTouchCancel={cancelLongPress}
               >
                 <ProjectAvatar name={project.name} color={color} image={project.image} size={40} allNames={allNames} />
 

package/src/web/components/layout/project-sort.ts

@@ -1,4 +1,4 @@
-import { Clock, ArrowDownUp, ArrowDownAZ } from "lucide-react";
+import { Clock, ArrowDownUp, ArrowDownAZ } from "@/lib/icons";
 import { resolveOrder, sortByRecent, type ProjectInfo, type SortMode } from "@/stores/project-store";
 
 // Sort modes for the project list, shared by the desktop flyout and the

package/src/web/components/layout/project-switcher.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo, useRef, useEffect, memo } from "react";
 import { createPortal } from "react-dom";
-import { Plus, Pencil, Trash2, Palette, Copy, Search, ChevronsUpDown, ExternalLink, Image as ImageIcon } from "lucide-react";
+import { Plus, Pencil, Trash2, Palette, Copy, Search, ChevronsUpDown, ExternalLink, Image as ImageIcon } from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore, resolveOrder, loadRecentTimes, type ProjectInfo } from "@/stores/project-store";
 import { SORT_OPTIONS, applySort } from "@/components/layout/project-sort";

package/src/web/components/layout/reparenting-tab.tsx

@@ -14,7 +14,7 @@
  */
 import { useLayoutEffect, useRef, Suspense, type LazyExoticComponent, type ComponentType } from "react";
 import { createPortal } from "react-dom";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { usePanelStore } from "@/stores/panel-store";
 import { DOCK_PANEL_ID, isWindowPanelId } from "@/stores/panel-utils";
 import { PortalContainerProvider } from "@/components/ui/portal-container-context";

package/src/web/components/layout/sidebar.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useRef, memo } from "react";
-import { PanelLeftOpen } from "lucide-react";
+import { PanelLeftOpen } from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";

package/src/web/components/layout/status-bar.tsx

@@ -1,11 +1,12 @@
 import { memo } from "react";
-import { PanelBottom, GitBranch, ArrowUp, ArrowDown, Check } from "lucide-react";
+import { PanelBottom, GitBranch, ArrowUp, ArrowDown, Check } from "@/lib/icons";
 import { useExtensionStore, type StatusBarItemUI } from "@/stores/extension-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useGitStatusStore } from "@/stores/git-status-store";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { ResourceStatusBar } from "@/components/system/resource-status-bar";
+import { ProblemsStatus } from "@/components/problems/problems-status";
 import { ThemePicker } from "@/components/settings/theme-picker";
 import { UpgradeButton } from "@/components/layout/upgrade-button";
 import { WakeLockStatusBarItem } from "@/components/layout/wake-lock-indicator";
@@ -30,6 +31,8 @@ export const StatusBar = memo(function StatusBar() {
       <div className="flex items-center gap-3 min-w-0">
         {/* Git: branch · ahead/behind · synced (design status bar). */}
         <GitStatus />
+        {/* Errors/warnings across every open file — VS Code's leftmost item. */}
+        <ProblemsStatus />
         {left.map((item) => (
           <StatusBarEntry key={item.id} item={item} />
         ))}

package/src/web/components/layout/tab-bar.tsx

@@ -13,11 +13,12 @@ import {
   GitCommitHorizontal,
   Sparkles,
   Users,
-} from "lucide-react";
+  CircleX,
+} from "@/lib/icons";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { DOCK_PANEL_ID, visibleTabs } from "@/stores/panel-utils";
-import { PanelBottom, Grid2x2 } from "lucide-react";
+import { PanelBottom, Grid2x2 } from "@/lib/icons";
 import { useProjectStore } from "@/stores/project-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useCompareStore } from "@/stores/compare-store";
@@ -32,7 +33,7 @@ import {
   ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent,
   ContextMenuItem, ContextMenuSeparator,
 } from "@/components/ui/context-menu";
-import { Tag, Check, Columns2, Circle } from "lucide-react";
+import { Tag, Check, Columns2, Circle } from "@/lib/icons";
 import { basename } from "@/lib/utils";
 import { useNotificationStore, notificationColor } from "@/stores/notification-store";
 import { useStreamingStore } from "@/stores/streaming-store";
@@ -46,6 +47,7 @@ import type { Tab } from "@/stores/tab-store";
 import { downloadFile } from "@/lib/file-download";
 import { copyToClipboard } from "@/lib/clipboard";
 import { FileActions } from "@/components/explorer/file-actions";
+import { getTabIcon } from "@/lib/tab-type-icons";
 import {
   ContextMenu as BarContextMenu,
   ContextMenuContent as BarContextMenuContent,
@@ -54,24 +56,6 @@ import {
   ContextMenuSeparator as BarContextMenuSeparator,
 } from "@/components/ui/context-menu";
 
-const TAB_ICONS: Record<TabType, React.ElementType> = {
-  terminal: Terminal,
-  chat: MessageSquare,
-  editor: FileCode,
-  database: Database,
-  sqlite: Database,
-  postgres: Database,
-  "git-diff": FileDiff,
-  settings: Settings,
-  extension: Puzzle,
-  "extension-webview": Puzzle,
-  "conflict-editor": FileDiff,
-  "system-monitor": Settings,
-  "git-log": GitCommitHorizontal,
-  "ai-resource": Sparkles,
-  group: Users,
-};
-
 interface TabBarProps {
   panelId?: string;
 }
@@ -92,7 +76,8 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
 
   const { dropIndex, handleDragStart, handleDragOver, handleDragOverBar, handleDrop, handleDragEnd } =
     useTabDrag(effectivePanelId);
-  const { handleTouchStart, handleTouchMove, handleTouchEnd } = useTouchTabDrag(effectivePanelId);
+  const { handleTouchStart, handleTouchMove, handleTouchEnd, handleTouchCancel } =
+    useTouchTabDrag(effectivePanelId);
 
   const { projectTags, loadTags } = useProjectTags(activeProject?.name);
   const [sessionTagMap, setSessionTagMap] = useState<Record<string, { id: number; name: string; color: string }>>({});
@@ -369,7 +354,7 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
               key={tab.id}
               tab={tab}
               isActive={tab.id === activeTabId}
-              icon={TAB_ICONS[tab.type] || Puzzle}
+              icon={getTabIcon(tab)}
               showDropBefore={dropIndex === i}
               notificationType={notiType}
               notificationManual={notiManual}
@@ -386,6 +371,7 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
               onTouchStart={(e) => handleTouchStart(e, tab.id, tab.title)}
               onTouchMove={handleTouchMove}
               onTouchEnd={handleTouchEnd}
+              onTouchCancel={handleTouchCancel}
               tabRef={(el) => {
                 if (el) tabRefs.current.set(tab.id, el);
                 else tabRefs.current.delete(tab.id);

package/src/web/components/layout/tab-content.tsx

@@ -1,7 +1,7 @@
 import { Suspense, lazy } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { useTabStore, type TabType } from "@/stores/tab-store";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 
 const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentType<{ metadata?: Record<string, unknown>; tabId?: string }>>> = {
   terminal: lazy(() =>
@@ -79,6 +79,11 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.GroupChatTab,
     })),
   ),
+  problems: lazy(() =>
+    import("@/components/problems/problems-panel").then((m) => ({
+      default: m.ProblemsPanel,
+    })),
+  ),
 };
 
 function LoadingFallback() {

package/src/web/components/layout/tab-pool.tsx

@@ -42,6 +42,7 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
   "git-log": lazy(() => import("@/components/git/git-log-panel").then((m) => ({ default: m.GitLogPanel }))),
   "ai-resource": lazy(() => import("@/components/ai-resources/ai-resource-editor").then((m) => ({ default: m.AiResourceEditor }))),
   group: lazy(() => import("@/components/group-chat/group-chat-tab").then((m) => ({ default: m.GroupChatTab }))),
+  problems: lazy(() => import("@/components/problems/problems-panel").then((m) => ({ default: m.ProblemsPanel }))),
 };
 
 const HIDDEN_CONTAINER_STYLE: React.CSSProperties = {

package/src/web/components/layout/tab-pop-out-menu-item.tsx

@@ -8,7 +8,7 @@
  * the item would move a tab somewhere the user cannot see (a scaled-down window is never
  * the answer — see the mobile-first UI rules).
  */
-import { ExternalLink, PictureInPicture2 } from "lucide-react";
+import { ExternalLink, PictureInPicture2 } from "@/lib/icons";
 import { toast } from "sonner";
 import { openTabInPip } from "@/components/floating-window/open-tab-in-pip";
 import { isDocumentPipSupported } from "@/components/floating-window/pip/pip-support";

package/src/web/components/layout/upgrade-button.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { api } from "@/lib/api-client";
 import { toast } from "sonner";
-import { Loader2, ArrowUpCircle, RefreshCw, Download, ExternalLink, History } from "lucide-react";
+import { Loader2, ArrowUpCircle, RefreshCw, Download, ExternalLink, History } from "@/lib/icons";
 import { useSettingsStore } from "@/stores/settings-store";
 import { fetchRecentChangelog, newestSectionVersion, compareSemver, type ChangelogSection } from "@/lib/changelog";
 import { cn } from "@/lib/utils";

package/src/web/components/layout/wake-lock-indicator.tsx

@@ -11,7 +11,7 @@
  */
 
 import { memo } from "react";
-import { Sun } from "lucide-react";
+import { Sun } from "@/lib/icons";
 import { useWakeLockStore } from "@/stores/wake-lock-store";
 
 const LABEL = "Screen awake";

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

@@ -6,7 +6,7 @@
  */
 
 import { useEffect, useMemo } from "react";
-import { AlertTriangle, Home } from "lucide-react";
+import { AlertTriangle, Home } from "@/lib/icons";
 import { useFileStore } from "@/stores/file-store";
 import { useExplorerActions } from "./actions/use-explorer-actions";
 import { ExplorerDialogs } from "./explorer-dialogs";

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

@@ -6,7 +6,7 @@
  * one overflow menu, so the bar never pushes the toolbar controls out of a narrow window.
  */
 
-import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { ChevronRight, MoreHorizontal } from "@/lib/icons";
 import {
   DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";

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

@@ -8,7 +8,7 @@
  */
 
 import type { ComponentType } from "react";
-import { AlertTriangle, HardDrive, Pin, Usb, Network } from "lucide-react";
+import { AlertTriangle, HardDrive, Pin, Usb, Network } from "@/lib/icons";
 import type { HostInfo, Drive } from "../../../types/system";
 import { cn } from "@/lib/utils";
 import { DROP_TARGET_CLASS } from "./dnd/drop-target-style";

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

@@ -4,7 +4,7 @@
  * `views/list-view.tsx`). Backed by the same `prefs.sort` every view already reads.
  */
 
-import { ArrowUpDown } from "lucide-react";
+import { ArrowUpDown } from "@/lib/icons";
 import {
   DropdownMenu,
   DropdownMenuContent,

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

@@ -11,7 +11,7 @@ import { useEffect, useState } from "react";
 import {
   ArrowLeft, ArrowRight, ArrowUp, Columns3, Eye, EyeOff, LayoutGrid, List, PencilLine, RefreshCw, Search,
   Upload, X,
-} from "lucide-react";
+} from "@/lib/icons";
 import {
   DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";

package/src/web/components/os-explorer/icons/file-type-icon-map.ts

@@ -1,106 +1,22 @@
 /**
- * Extension → icon component, using the Symbols set (the VS Code icon theme by Miguel
- * Solorio) so an explorer window reads like a real file manager.
+ * The folder glyph an explorer skin starts from.
  *
- * Imports come from the `/files` and `/folders` subpaths only. The root barrel pulls the
- * whole library (900+ icons) into the graph, and `/utils` drags in a lookup table that
- * defeats tree-shaking; naming each icon explicitly keeps the built chunk to the ~45
- * glyphs actually referenced here.
+ * This file used to hold a curated extension → glyph table as well, from the
+ * Symbols set. File icons now come from `@/lib/file-icons` — the vscode-icons
+ * theme the whole app uses — so that a `.ts` file looks the same here as in the
+ * editor's tree. What stays is the *folder*, because that is the part each skin
+ * replaces: a Windows 11 folder looks nothing like a Finder one.
  *
- * The map is deliberately curated rather than exhaustive: rare extensions fall back to a
- * neutral glyph, which costs nothing and keeps the chunk inside its size budget.
+ * Imports come from the `/folders` subpath only. The root barrel pulls the whole
+ * library (900+ icons) into the graph and `/utils` drags in a lookup table that
+ * defeats tree-shaking; naming each icon explicitly keeps the built chunk to the
+ * glyphs actually referenced.
  */
 
 import type { FC, ComponentProps } from "react";
-import {
-  Astro, Audio, BracketsYellow, CLang, CodeBlue, CodeOrange, Cplus, Csharp, Csv, Dart,
-  Database, Docker, Document, Exe, Font, Gear, Gif, Git, Go, Image, Java, Js, Kotlin,
-  License, Lock, Lua, Markdown, Notebook, PDF, PHP, Python, Reactjs, Reactts, Ruby,
-  Rust, Sass, Shell, SVG, Svelte, Swift, Text, TypeScript, Video, Vue, XML, Yaml, Zip,
-} from "@react-symbols/icons/files";
 import { Folder, FolderOpen } from "@react-symbols/icons/folders";
 
 export type SymbolIcon = FC<ComponentProps<"svg">>;
 
 export const FOLDER_ICON: SymbolIcon = Folder;
 export const FOLDER_OPEN_ICON: SymbolIcon = FolderOpen;
-
-/** One entry per icon; the key list is the set of extensions that share that glyph. */
-const GROUPS: [SymbolIcon, string[]][] = [
-  [TypeScript, ["ts", "mts", "cts"]],
-  [Reactts, ["tsx"]],
-  [Js, ["js", "mjs", "cjs"]],
-  [Reactjs, ["jsx"]],
-  [Vue, ["vue"]],
-  [Svelte, ["svelte"]],
-  [Astro, ["astro"]],
-  [BracketsYellow, ["json", "jsonc", "json5"]],
-  [Markdown, ["md", "mdx"]],
-  [CodeOrange, ["html", "htm"]],
-  [CodeBlue, ["css"]],
-  [Sass, ["scss", "sass", "less"]],
-  [Yaml, ["yaml", "yml"]],
-  [XML, ["xml", "plist"]],
-  [Gear, ["toml", "ini", "cfg", "conf", "env", "properties"]],
-  [Python, ["py", "pyi"]],
-  [Ruby, ["rb"]],
-  [Go, ["go"]],
-  [Rust, ["rs"]],
-  [Java, ["java", "jar"]],
-  [Kotlin, ["kt", "kts"]],
-  [Swift, ["swift"]],
-  [CLang, ["c", "h"]],
-  [Cplus, ["cpp", "cc", "cxx", "hpp"]],
-  [Csharp, ["cs"]],
-  [PHP, ["php"]],
-  [Lua, ["lua"]],
-  [Dart, ["dart"]],
-  [Shell, ["sh", "bash", "zsh", "fish", "ps1", "psm1", "bat", "cmd"]],
-  [Database, ["sql", "db", "sqlite", "sqlite3"]],
-  [Csv, ["csv", "tsv"]],
-  [PDF, ["pdf"]],
-  [Document, ["doc", "docx", "rtf", "odt", "pages"]],
-  [Notebook, ["ipynb"]],
-  [Text, ["txt", "log", "text"]],
-  [Image, ["png", "jpg", "jpeg", "webp", "bmp", "ico", "tif", "tiff", "avif"]],
-  [Gif, ["gif"]],
-  [SVG, ["svg"]],
-  [Video, ["mp4", "webm", "mov", "avi", "mkv", "m4v"]],
-  [Audio, ["mp3", "wav", "flac", "aac", "m4a", "ogg", "wma"]],
-  [Zip, ["zip", "rar", "7z", "tar", "gz", "tgz", "bz2", "xz"]],
-  [Exe, ["exe", "msi", "dmg", "appimage", "deb", "rpm"]],
-  [Font, ["ttf", "otf", "woff", "woff2", "eot"]],
-  [Lock, ["lock"]],
-];
-
-const BY_EXTENSION = new Map<string, SymbolIcon>();
-for (const [icon, extensions] of GROUPS) {
-  for (const ext of extensions) BY_EXTENSION.set(ext, icon);
-}
-
-/** Whole-name matches, for files whose type lives in the name rather than an extension. */
-const BY_FILENAME = new Map<string, SymbolIcon>([
-  [".gitignore", Git],
-  [".gitattributes", Git],
-  [".gitmodules", Git],
-  ["dockerfile", Docker],
-  [".dockerignore", Docker],
-  ["license", License],
-  ["licence", License],
-  ["makefile", Gear],
-  [".editorconfig", Gear],
-  [".npmrc", Gear],
-  [".env", Gear],
-]);
-
-/** Icon for a file name, or `null` when nothing in the curated set matches. */
-export function fileIconFor(name: string): SymbolIcon | null {
-  const base = (name.split(/[/\\]/).pop() ?? name).toLowerCase();
-  const byName = BY_FILENAME.get(base);
-  if (byName) return byName;
-  // Compound extensions ("archive.tar.gz") resolve on the last segment, which is right
-  // for every entry above.
-  const dot = base.lastIndexOf(".");
-  if (dot <= 0) return null;
-  return BY_EXTENSION.get(base.slice(dot + 1)) ?? null;
-}

package/src/web/components/os-explorer/icons/file-type-icon.tsx

@@ -3,14 +3,16 @@
  *
  * Skins need to swap the folder glyph (a Windows 11 folder looks nothing like a Finder
  * one) without touching the per-extension table, so the folder icon is read from a
- * React context with the Symbols folder as the default. File icons stay shared: VS
- * Code-style file glyphs are the same on all platforms.
+ * React context with the Symbols folder as the default. File icons are the app's own
+ * (`@/lib/file-icons`, the vscode-icons theme): a `.ts` file should look the same in
+ * this window as in the editor's tree, and only the *folder* is a platform idiom.
  */
 
-import { createContext, useContext, type ComponentProps, type FC } from "react";
-import { File as GenericFile, FolderSymlink, HelpCircle } from "lucide-react";
+import { createContext, useContext, type ComponentProps } from "react";
+import { FolderSymlink, HelpCircle } from "@/lib/icons";
 import { cn } from "@/lib/utils";
-import { fileIconFor, FOLDER_ICON, FOLDER_OPEN_ICON, type SymbolIcon } from "./file-type-icon-map";
+import { FileIcon } from "@/lib/file-icons";
+import { FOLDER_ICON, FOLDER_OPEN_ICON, type SymbolIcon } from "./file-type-icon-map";
 
 export interface FolderIconSlot {
   closed: SymbolIcon;
@@ -25,32 +27,34 @@ const FolderIconContext = createContext<FolderIconSlot>({
 /** Skin hook: wrap a subtree to replace the folder glyphs it renders. */
 export const FolderIconProvider = FolderIconContext.Provider;
 
-export interface FileTypeIconProps extends ComponentProps<"svg"> {
+// `className` is the only prop any call site passes, and the file branch is no
+// longer an SVG element — so the props are spelled out rather than inherited
+// from `ComponentProps<"svg">`.
+export interface FileTypeIconProps {
+  className?: string;
   name: string;
   kind: "file" | "directory" | "symlink" | "unknown";
   /** Directories only — draws the open variant (column view, expanded rows). */
   open?: boolean;
 }
 
-export function FileTypeIcon({ name, kind, open, className, ...rest }: FileTypeIconProps) {
+export function FileTypeIcon({ name, kind, open, className }: FileTypeIconProps) {
   const folder = useContext(FolderIconContext);
   const classes = cn("shrink-0", className);
 
   if (kind === "directory") {
     const Icon = open ? folder.open : folder.closed;
-    return <Icon className={classes} {...rest} />;
+    return <Icon className={classes} />;
   }
   if (kind === "symlink") {
     // A link's target may be a file or a directory and is never followed, so it gets its
     // own glyph rather than borrowing one of the two.
-    return <FolderSymlink className={cn(classes, "text-text-2")} {...rest} />;
+    return <FolderSymlink className={cn(classes, "text-text-2")} />;
   }
   if (kind === "unknown") {
     // The server timed out reading this entry; showing a file icon would be a lie.
-    return <HelpCircle className={cn(classes, "text-text-subtle")} {...rest} />;
+    return <HelpCircle className={cn(classes, "text-text-subtle")} />;
   }
 
-  const Icon: FC<ComponentProps<"svg">> | null = fileIconFor(name);
-  if (!Icon) return <GenericFile className={cn(classes, "text-text-2")} {...rest} />;
-  return <Icon className={classes} {...rest} />;
+  return <FileIcon name={name} className={classes} />;
 }

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

@@ -10,7 +10,7 @@ import { useState } from "react";
 import {
   ArrowLeft, Check, ClipboardPaste, Copy, Download, FilePlus, FolderPlus, Info, MoreHorizontal, Plus, Scissors,
   Trash2, Upload, X,
-} from "lucide-react";
+} from "@/lib/icons";
 import type { FsEntry } from "@/lib/fs-api";
 import { BottomSheet, BottomSheetItem } from "@/components/ui/mobile-bottom-sheet";
 import type { ExplorerActions } from "../actions/use-explorer-actions";

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

@@ -7,7 +7,7 @@
  * screen leaves no backdrop to tap, so swipe-to-dismiss would otherwise be the only way out.
  */
 
-import { X } from "lucide-react";
+import { X } from "@/lib/icons";
 import type { ExplorerSlice } from "../explorer-store";
 
 export interface MobileExplorerTopBarProps {

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

@@ -9,7 +9,7 @@
 
 import {
   Columns3, Eye, EyeOff, Info, LayoutGrid, List, Trash2,
-} from "lucide-react";
+} from "@/lib/icons";
 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";

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

@@ -5,7 +5,7 @@
  */
 
 import type { ReactNode } from "react";
-import { HardDrive, Network, Pin, Usb } from "lucide-react";
+import { HardDrive, Network, Pin, Usb } from "@/lib/icons";
 import type { Drive, HostInfo } from "../../../../types/system";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { useExplorerPinsStore } from "../explorer-pins-store";

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

@@ -9,7 +9,7 @@
  */
 
 import { useState, type ComponentType } from "react";
-import { HardDrive, MoreHorizontal, Network, Pin, Usb } from "lucide-react";
+import { HardDrive, MoreHorizontal, Network, Pin, Usb } from "@/lib/icons";
 import type { Drive, HostInfo } from "../../../../types/system";
 import { cn } from "@/lib/utils";
 import { useExplorerPinsStore } from "../explorer-pins-store";

package/src/web/components/os-explorer/properties-dialog.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useEffect, useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { fsApi, type FsEntry, type FsStatResult } from "@/lib/fs-api";
 import { Button } from "@/components/ui/button";
 import { ExplorerModalShell } from "./explorer-modal-shell";

package/src/web/components/os-explorer/skins/macos-window-chrome.tsx

@@ -13,7 +13,7 @@
  * element that itself carries the attribute.
  */
 
-import { Minus, Plus, X } from "lucide-react";
+import { Minus, Plus, X } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { TITLEBAR_HEIGHT, type WindowChromeProps } from "@/components/floating-window/window-chrome-contract";
 import { PipCaptionButton } from "@/components/floating-window/pip/pip-caption-button";

package/src/web/components/os-explorer/skins/windows-window-chrome.tsx

@@ -15,7 +15,7 @@
  * `--x-radius`, `--x-font`) only resolve on an element that itself carries the attribute.
  */
 
-import { Minus, Square, Copy, X } from "lucide-react";
+import { Minus, Square, Copy, X } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { TITLEBAR_HEIGHT, type WindowChromeProps } from "@/components/floating-window/window-chrome-contract";
 import { PipCaptionButton } from "@/components/floating-window/pip/pip-caption-button";

package/src/web/components/os-explorer/upload/upload-batch-card.tsx

@@ -4,7 +4,7 @@
  * chrome differs between them (see `upload-progress-panel.tsx`).
  */
 
-import { X } from "lucide-react";
+import { X } from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 import { summarizeBatch } from "./upload-batch-progress";
 import { UploadBatchRow } from "./upload-batch-row";

package/src/web/components/os-explorer/upload/upload-batch-row.tsx

@@ -3,7 +3,7 @@
  * bar, state, and a per-row Cancel while it is still queued/uploading.
  */
 
-import { AlertTriangle, Check, X } from "lucide-react";
+import { AlertTriangle, Check, X } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { UploadItem } from "./upload-store";
 

package/src/web/components/os-explorer/use-coarse-long-press.ts

@@ -32,6 +32,7 @@ export interface LongPressHandlers {
   onTouchStart?(event: TouchEvent): void;
   onTouchMove?(event: TouchEvent): void;
   onTouchEnd?(event: TouchEvent): void;
+  onTouchCancel?(event: TouchEvent): void;
   onContextMenu?(event: MouseEvent): void;
 }
 
@@ -93,5 +94,12 @@ export function useCoarseLongPress(onBeforeOpen?: () => void): LongPressHandlers
     onTouchStart: start,
     onTouchMove: move,
     onTouchEnd: cancel,
+    // `touchcancel` is the one that matters, and it is the easiest to leave out.
+    // Once the browser claims the gesture for scrolling it fires this and then
+    // sends **no further** `touchmove` or `touchend` to the element — so a timer
+    // armed on touchstart survives the scroll and fires into it, opening a menu
+    // over a list the finger is already moving. The move tolerance above cannot
+    // catch it, because the moves it would have measured are never delivered.
+    onTouchCancel: cancel,
   };
 }

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

@@ -6,7 +6,7 @@
  */
 
 import type { KeyboardEvent, RefObject } from "react";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft } from "@/lib/icons";
 import { ContextMenu, ContextMenuTrigger } from "@/components/ui/adaptive-context-menu";
 import type { FsEntry } from "@/lib/fs-api";
 import type { ExplorerActions } from "../actions/use-explorer-actions";

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

@@ -7,7 +7,7 @@
  */
 
 import { forwardRef, memo, useMemo, type HTMLAttributes } from "react";
-import { Check } from "lucide-react";
+import { Check } from "@/lib/icons";
 import { ContextMenu, ContextMenuTrigger } from "@/components/ui/adaptive-context-menu";
 import type { FsEntry } from "@/lib/fs-api";
 import { cn } from "@/lib/utils";

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

@@ -11,7 +11,7 @@
  */
 
 import { forwardRef, memo, useMemo, type HTMLAttributes } from "react";
-import { Check } from "lucide-react";
+import { Check } from "@/lib/icons";
 import { ContextMenu, ContextMenuTrigger } from "@/components/ui/adaptive-context-menu";
 import type { FsEntry } from "@/lib/fs-api";
 import { cn } from "@/lib/utils";