@hienlh/ppm 0.20.10 → 0.21.0

package/src/web/lib/file-icons.tsx

@@ -0,0 +1,192 @@
+/**
+ * The one file icon in the app: the vscode-icons theme, for every surface that
+ * lists a file.
+ *
+ * What it replaces is worth stating, because it looked deliberate: the tree used
+ * a single lucide `FileCode` glyph tinted a different colour per language, so
+ * twenty languages were the same shape in twenty shades and the eye had nothing
+ * to catch. A file icon's whole job is to be recognised before the name is read.
+ *
+ * Drawn as a `background-image` on a span rather than an inline `<svg>`, for
+ * three reasons. These glyphs are full-colour artwork, so there is no
+ * `currentColor` to inherit and nothing to gain from having the paths in the
+ * DOM. A tree of 500 rows would otherwise carry a few thousand extra path
+ * nodes for React to reconcile on every expand. And a row is draggable — an
+ * inner `<img>` supplies its own drag image and has to be talked out of it.
+ *
+ * Resolution order is the extension theme's own: whole filename, then double
+ * extension (`.spec.ts`), then extension. `fileIconElement` is for the slots
+ * that want a component rather than an element — the tab bar and the palette
+ * both take an `icon: ElementType`.
+ */
+import type { FC } from "react";
+// `?url` gives the built stylesheet's address without putting it on the module
+// graph: nothing is fetched until the `<link>` below is appended.
+import ICON_CSS_URL from "@/styles/file-icons.generated.css?url";
+import { basename, cn } from "@/lib/utils";
+import {
+  DEFAULT_FILE_ICON,
+  DEFAULT_FOLDER_ICON,
+  DEFAULT_FOLDER_OPEN_ICON,
+  EXTENSION_ICONS,
+  FILENAME_ICONS,
+  FOLDER_ICONS,
+  FOLDER_OPEN_ICONS,
+} from "./file-icons.generated";
+
+/**
+ * The artwork is fetched when something first asks for an icon, not before.
+ *
+ * Imported at module scope it was not lazy in any useful sense: this module is
+ * reached from `tab-type-icons.ts`, which the tab bar, the mobile nav and the
+ * dock header all import eagerly, so Vite hoisted the stylesheet into a
+ * `<link rel="stylesheet">` in `index.html` — render-blocking on every load,
+ * measured at 499,375 bytes raw / 127,333 gzip / 79,836 brotli. The app's
+ * entire other stylesheet is 25,956 gzip, so the icons were 4.9x everything
+ * else put together, in front of the first paint.
+ *
+ * So it is fetched at runtime by a `<link>` this function appends. The cost is
+ * honest and visible: an icon that renders before the stylesheet lands is a
+ * correctly-sized blank span for one round trip, so icons pop in a beat after
+ * the text. That is the trade — paint the app now and the artwork shortly,
+ * rather than neither until half a megabyte arrives — and a session that never
+ * lists a file never fetches it at all.
+ *
+ * A `<link>` rather than `import()`, which is what this used to be: a dynamic
+ * import that fails dispatches `vite:preloadError`, and `chunk-recovery.ts`
+ * answers that by purging the asset caches and reloading the page — a path that
+ * deliberately steps around the unsaved-work guard, because a missing *code*
+ * chunk means the app cannot run. A missing icon sheet means the icons are
+ * unstyled. A tunnel flap while someone scrolls a file tree must not reload the
+ * app out from under them, and `.catch()` would not have helped: the event is
+ * dispatched whether or not the promise is handled.
+ *
+ * Called from render rather than an effect because the point is to start the
+ * fetch at the earliest moment anything wants an icon; it is idempotent and
+ * touches no state, so a double invocation under StrictMode costs nothing.
+ */
+let cssPending = false;
+let cssAttempts = 0;
+function requestIconCss(): void {
+  // Two attempts, not one: a tab left open through a network blip would
+  // otherwise show unstyled icons for the rest of its life. Not unlimited,
+  // because every icon that mounts comes through here.
+  if (cssPending || cssAttempts >= 2 || typeof document === "undefined") return;
+  cssPending = true;
+  cssAttempts++;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = ICON_CSS_URL;
+  link.addEventListener("error", () => {
+    link.remove();
+    cssPending = false;
+  });
+  document.head.appendChild(link);
+}
+
+/** The icon name for a file, by name alone. */
+export function fileIconName(path: string): string {
+  const name = basename(path).toLowerCase();
+  const byName = FILENAME_ICONS[name];
+  if (byName) return byName;
+
+  const parts = name.split(".");
+  if (parts.length > 2) {
+    // `.spec.ts`, `.d.ts`, `.config.js` — the theme gives these their own
+    // glyphs, and matching only the last extension would lose them.
+    const double = `${parts[parts.length - 2]}.${parts[parts.length - 1]}`;
+    const byDouble = EXTENSION_ICONS[double];
+    if (byDouble) return byDouble;
+  }
+  if (parts.length > 1) {
+    const byExt = EXTENSION_ICONS[parts[parts.length - 1]!];
+    if (byExt) return byExt;
+  }
+  // A dotfile with no extension (`.gitignore` handled above, `.foorc` not) has
+  // its name as its only extension.
+  if (name.startsWith(".")) {
+    const byDot = EXTENSION_ICONS[name.slice(1)];
+    if (byDot) return byDot;
+  }
+  return DEFAULT_FILE_ICON;
+}
+
+/** The icon name for a folder, open or closed. */
+export function folderIconName(path: string, open = false): string {
+  const name = basename(path).toLowerCase();
+  const table = open ? FOLDER_OPEN_ICONS : FOLDER_ICONS;
+  return table[name] ?? (open ? DEFAULT_FOLDER_OPEN_ICON : DEFAULT_FOLDER_ICON);
+}
+
+export type FileIconKind = "file" | "directory";
+
+export interface FileIconProps {
+  /** File or folder name; a whole path is fine, only the last segment is read. */
+  name: string;
+  kind?: FileIconKind;
+  /** Directories only — the expanded glyph. */
+  open?: boolean;
+  className?: string;
+}
+
+/**
+ * `size-4` by default, which is the size the trees and tab strips use. Pass a
+ * `size-*` class to override — the span has no intrinsic size, so a caller that
+ * passes none gets nothing visible.
+ *
+ * `inline-block` is load-bearing: `width`/`height` do not apply to a
+ * non-replaced inline element, so a bare `<span class="size-4">` measures 0×0
+ * wherever its parent is not a flex container. The trees are flex rows and
+ * blockify it for free; the tab strip wraps its icon in a `<span class="relative">`
+ * for the notification dot, and there the icon simply did not render — the one
+ * place an inline `<svg>` would have worked without saying so.
+ */
+function iconClass(icon: string, className?: string): string {
+  return cn(
+    "inline-block shrink-0 size-4 bg-center bg-no-repeat bg-contain",
+    `vsi-${icon}`,
+    className,
+  );
+}
+
+export function FileIcon({ name, kind = "file", open, className }: FileIconProps) {
+  requestIconCss();
+  const icon = kind === "directory" ? folderIconName(name, open) : fileIconName(name);
+  return <span aria-hidden="true" className={iconClass(icon, className)} />;
+}
+
+/**
+ * The same icon as a zero-prop component, for the `icon: ElementType` slots the
+ * tab bar and the command palette already have.
+ *
+ * Cached because React treats a *component type* as identity: a fresh arrow
+ * function per render would unmount and remount the node on every keystroke in
+ * the palette's filter.
+ *
+ * Keyed by the resolved glyph rather than by the path that resolved to it. A
+ * path key is wrong twice over: `src/a/index.ts` and `src/b/index.ts` are two
+ * entries rendering the same span, and a repository indexed by the palette has
+ * as many keys as it has files — which is why the old key needed an eviction
+ * rule, and why that rule was `clear()`, remounting every icon on screen at the
+ * 501st distinct path. There are 224 glyphs, so keying on those makes the cache
+ * bounded by construction and eviction unnecessary.
+ */
+const elementCache = new Map<string, FC<{ className?: string }>>();
+
+export function fileIconElement(
+  name: string,
+  kind: FileIconKind = "file",
+): FC<{ className?: string }> {
+  // The palette asks for hundreds of these before any of them renders, so the
+  // fetch starts here too rather than waiting for the first mount.
+  requestIconCss();
+  const icon = kind === "directory" ? folderIconName(name) : fileIconName(name);
+  const cached = elementCache.get(icon);
+  if (cached) return cached;
+  const Bound: FC<{ className?: string }> = ({ className }) => (
+    <span aria-hidden="true" className={iconClass(icon, className)} />
+  );
+  Bound.displayName = `FileIcon(${icon})`;
+  elementCache.set(icon, Bound);
+  return Bound;
+}

package/src/web/lib/fluent-icon.tsx

@@ -0,0 +1,62 @@
+/**
+ * The one component every Fluent-backed product icon is built from.
+ *
+ * It has to be prop-compatible with lucide, because the swap is meant to be an
+ * import-path change and nothing else: 233 files pass `className`, a handful
+ * pass `strokeWidth`, and several hand the component itself to a slot typed
+ * `ElementType`. So `size` is honoured, `strokeWidth` is accepted and dropped
+ * (these glyphs are filled outlines — there is no stroke to weight), and the
+ * ref goes through, since a few icons sit inside a Radix trigger.
+ *
+ * The glyphs are 20×20 where lucide's are 24×24. That is not a detail to
+ * normalise away: Fluent's outlines are drawn *for* a 20px box, and scaling one
+ * into a 24px viewBox is what makes an icon set look slightly soft next to its
+ * own labels. The viewBox stays 20 and the rendered size is whatever the caller
+ * asks for — which in this app is a Tailwind `size-*` class almost everywhere,
+ * and those win over the width/height attributes because they are CSS.
+ */
+import { forwardRef, type SVGProps } from "react";
+import { ICON_VIEW_BOX } from "./icons.generated";
+
+export interface ProductIconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+  /** Pixel size, for the few call sites that pass no `size-*` class. */
+  size?: number | string;
+  /** Accepted for lucide compatibility and ignored: these glyphs are filled. */
+  strokeWidth?: number | string;
+  absoluteStrokeWidth?: boolean;
+}
+
+export type ProductIcon = ReturnType<typeof fluentIcon>;
+
+export function fluentIcon(name: string, paths: readonly string[]) {
+  const Icon = forwardRef<SVGSVGElement, ProductIconProps>(function Icon(
+    { size = 24, strokeWidth: _sw, absoluteStrokeWidth: _asw, ...rest },
+    ref,
+  ) {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox={ICON_VIEW_BOX}
+        width={size}
+        height={size}
+        fill="currentColor"
+        aria-hidden="true"
+        focusable="false"
+        // Which icon this is, readable from rendered markup and in devtools.
+        // lucide put the same thing in a *class* (`lucide lucide-circle-check`),
+        // which is why a test could assert a tool card was spinning by looking
+        // for `lucide-loader-circle`. An attribute keeps that possible without
+        // offering a class name for stylesheets to start depending on.
+        data-icon={name}
+        {...rest}
+      >
+        {paths.map((d) => (
+          <path key={d} d={d} />
+        ))}
+      </svg>
+    );
+  });
+  Icon.displayName = name;
+  return Icon;
+}

package/src/web/lib/git-file-tree.ts

@@ -0,0 +1,83 @@
+/**
+ * The shape of the Source Control panel's file tree, as pure functions.
+ *
+ * Kept out of the panel so it can be tested directly: importing the component
+ * pulls in the zustand stores, which read `localStorage` at module scope.
+ */
+import type { GitFileChange } from "../../types/git";
+
+export interface TreeNode {
+  name: string;
+  fullPath: string;
+  file?: GitFileChange;
+  children: TreeNode[];
+}
+
+/** Build a tree structure from flat file paths */
+export function buildTree(files: GitFileChange[]): TreeNode[] {
+  const root: TreeNode[] = [];
+
+  for (const f of files) {
+    const parts = f.path.split("/");
+    let current = root;
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]!;
+      const fullPath = parts.slice(0, i + 1).join("/");
+      const isFile = i === parts.length - 1;
+
+      let existing = current.find((n) => n.name === part);
+      if (!existing) {
+        existing = {
+          name: part,
+          fullPath,
+          file: isFile ? f : undefined,
+          children: [],
+        };
+        current.push(existing);
+      }
+      if (isFile) {
+        existing.file = f;
+      }
+      current = existing.children;
+    }
+  }
+
+  return root;
+}
+
+/**
+ * Join a chain of single-child directories into one row, the way VS Code's
+ * explorer does.
+ *
+ * A directory whose only child is another directory adds a row and a level of
+ * indent to say nothing: `src` → `services` → `remote-desktop` cost three rows
+ * and 36px of the width the filenames needed, to convey one path. Joined, they
+ * are `src/services/remote-desktop` on one line.
+ *
+ * The merged node keeps the *deepest* `fullPath`, because that is what the
+ * folder-level stage and discard actions are run against; only `name` is
+ * rewritten, and only for display.
+ */
+export function compactTree(nodes: TreeNode[]): TreeNode[] {
+  return nodes.map((node) => {
+    let current = node;
+    // Stop at a directory that holds a file: `folder/ > file.ts` stays two rows,
+    // because the file row owns its own status, icon and actions.
+    while (!current.file && current.children.length === 1 && !current.children[0]!.file) {
+      const only = current.children[0]!;
+      current = { ...only, name: `${current.name}/${only.name}` };
+    }
+    return { ...current, children: compactTree(current.children) };
+  });
+}
+
+/** Collect all file paths under a tree node (recursively) */
+export function collectFiles(node: TreeNode): GitFileChange[] {
+  const result: GitFileChange[] = [];
+  if (node.file) result.push(node.file);
+  for (const child of node.children) {
+    result.push(...collectFiles(child));
+  }
+  return result;
+}

package/src/web/lib/git-repo-scope.ts

@@ -0,0 +1,157 @@
+/**
+ * Which repository a git surface is looking at, when the project is not one.
+ *
+ * A workspace folder is often a container whose *children* are the
+ * repositories — a folder of checkouts, a monorepo of unrelated services. The
+ * server discovers them (`GET /git/repos`) and accepts a `?repo=` scope; these
+ * are the pure decisions the UI makes on top of that answer, kept out of the
+ * store so they can be tested without React.
+ *
+ * Two rules are load-bearing:
+ *
+ * - **The parameter is omitted when the repository *is* the project root.**
+ *   Every URL for an ordinary single-repo project stays byte-identical to what
+ *   it was, so nothing about the common case can regress on this path.
+ * - **A file outside the chosen repository resolves to `null`, not to a
+ *   best-effort path.** `git blame -- ../docs/x.md` does not error usefully; it
+ *   answers about a path the repository does not track, or reports the file as
+ *   untracked, and the annotation quietly shows nothing rather than saying why.
+ */
+
+export interface GitRepoCandidate {
+  path: string;
+  name: string;
+  /** Path relative to the project root; `.` when it is the root. */
+  relative: string;
+}
+
+export interface GitRepoDiscovery {
+  root: string;
+  rootIsRepo: boolean;
+  repos: GitRepoCandidate[];
+}
+
+/**
+ * The repository to run git in, or `null` when the answer is not yet decided.
+ *
+ * A single candidate is chosen without asking: a picker offering one option is
+ * a click that cannot go any other way.
+ */
+export function resolveRepo(
+  discovery: GitRepoDiscovery | undefined,
+  chosen: string | undefined,
+): GitRepoCandidate | null {
+  if (!discovery) return null;
+  if (discovery.rootIsRepo) return discovery.repos[0] ?? null;
+  if (chosen) {
+    const match = discovery.repos.find((r) => r.path === chosen);
+    if (match) return match;
+  }
+  return discovery.repos.length === 1 ? discovery.repos[0]! : null;
+}
+
+/** True when there is a choice to make and it has not been made. */
+export function needsPick(
+  discovery: GitRepoDiscovery | undefined,
+  chosen: string | undefined,
+): boolean {
+  if (!discovery || discovery.rootIsRepo) return false;
+  return discovery.repos.length > 1 && !resolveRepo(discovery, chosen);
+}
+
+/** True when nothing under the project is a repository at all. */
+export function hasNoRepo(discovery: GitRepoDiscovery | undefined): boolean {
+  return !!discovery && !discovery.rootIsRepo && discovery.repos.length === 0;
+}
+
+/**
+ * Add `repo=` to a git URL, unless the repository is the project root — in
+ * which case the URL is left exactly as it was before any of this existed.
+ */
+export function withRepoParam(url: string, repo: GitRepoCandidate | null): string {
+  if (!repo || repo.relative === ".") return url;
+  const separator = url.includes("?") ? "&" : "?";
+  return `${url}${separator}repo=${encodeURIComponent(repo.path)}`;
+}
+
+/**
+ * Rebase a project-relative file path onto the chosen repository.
+ *
+ * `null` means the file is not inside it — the caller has nothing to ask git.
+ */
+export function repoRelativePath(
+  projectRelative: string,
+  repo: GitRepoCandidate | null,
+): string | null {
+  const path = projectRelative.replace(/^\.?\//, "");
+  if (!repo || repo.relative === ".") return path;
+  const prefix = `${repo.relative}/`;
+  if (path === repo.relative) return "";
+  if (!path.startsWith(prefix)) return null;
+  return path.slice(prefix.length);
+}
+
+/**
+ * The inverse: a path git reported, expressed relative to the project.
+ *
+ * `git status` run inside the repository names files relative to *it*, and a
+ * tab's `filePath` is relative to the project — so opening a changed file from
+ * the panel without this lands one directory too high and the editor shows an
+ * empty buffer for a file that plainly exists.
+ */
+export function projectRelativePath(
+  repoRelative: string,
+  repo: GitRepoCandidate | null,
+): string {
+  const path = repoRelative.replace(/^\.?\//, "");
+  if (!repo || repo.relative === ".") return path;
+  return path ? `${repo.relative}/${path}` : repo.relative;
+}
+
+/** The shape of `GitStatus` this module needs, without importing it. */
+export interface StatusPaths {
+  staged: { path: string; oldPath?: string }[];
+  unstaged: { path: string; oldPath?: string }[];
+  untracked: string[];
+}
+
+/**
+ * A status answer, with its paths moved into the project's terms.
+ *
+ * Only for the *file tree*, which decorates nodes keyed by project-relative
+ * path. The panel's own copy stays as git reported it, because that is what
+ * `stage`, `unstage`, `discard` and the hunk picker send straight back — a
+ * rebased path there would name a file the repository does not have.
+ */
+export function rebaseStatusPaths<T extends StatusPaths>(
+  status: T,
+  repo: GitRepoCandidate | null,
+): T {
+  if (!repo || repo.relative === ".") return status;
+  const move = (path: string): string => projectRelativePath(path, repo);
+  const moveFile = <F extends { path: string; oldPath?: string }>(file: F): F => ({
+    ...file,
+    path: move(file.path),
+    ...(file.oldPath ? { oldPath: move(file.oldPath) } : {}),
+  });
+  return {
+    ...status,
+    staged: status.staged.map(moveFile),
+    unstaged: status.unstaged.map(moveFile),
+    untracked: status.untracked.map(move),
+  };
+}
+
+/**
+ * Whether an extension command's path argument should be the repository rather
+ * than the project folder.
+ *
+ * Every dispatch site hands over the active project's path, and for anything
+ * that is not running git that is still the right answer — an extension was
+ * told about a workspace folder, not about one checkout inside it. Only the git
+ * views are re-pointed, and they are recognised by their command namespace, so
+ * another extension opts in the same way.
+ */
+export function commandRunsGit(command: string): boolean {
+  return command.startsWith("git-graph.");
+}