@reviewflow/ui 6.24.0 → 6.25.0

package/src/components/branch-diff/use-diff-settings.tsx

@@ -1,6 +1,8 @@
-import type { DiffWhitespace } from "@reviewflow/sdk";
+import type { DiffFont, DiffWhitespace } from "@reviewflow/sdk";
+import { defaultDiffFont, defaultDiffTheme } from "@reviewflow/sdk";
 import type { ReactNode } from "react";
 import { createContext, use, useMemo, useState } from "react";
+import { diffFontFamily } from "./diff-font.ts";
 import type { DiffTheme } from "./diff-themes.ts";
 
 /**
@@ -16,6 +18,8 @@ export const isDiffFileOrder = (value: string): value is DiffFileOrder =>
 export interface DiffSettings {
   wordWrap: boolean;
   theme: DiffTheme;
+  /** the code's CSS `font-family`; null keeps pierre's own */
+  fontFamily: string | null;
   whitespace: DiffWhitespace;
   setWhitespace: (whitespace: DiffWhitespace) => void;
   fileOrder: DiffFileOrder;
@@ -24,7 +28,8 @@ export interface DiffSettings {
 
 const defaults: DiffSettings = {
   wordWrap: true,
-  theme: "github",
+  theme: defaultDiffTheme,
+  fontFamily: diffFontFamily(defaultDiffFont, ""),
   whitespace: "show",
   setWhitespace: () => undefined,
   fileOrder: "packages",
@@ -35,6 +40,9 @@ const DiffSettingsContext = createContext<DiffSettings>(defaults);
 
 interface DiffSettingsProviderProps {
   theme?: DiffTheme;
+  font?: DiffFont;
+  /** the CSS `font-family` of the `custom` font */
+  customFont?: string;
   wordWrap?: boolean;
   /** the whitespace the diff starts with; the toolbar toggle then owns it */
   initialWhitespace?: DiffWhitespace;
@@ -52,6 +60,8 @@ interface DiffSettingsProviderProps {
  */
 export function DiffSettingsProvider({
   theme = defaults.theme,
+  font = defaultDiffFont,
+  customFont = "",
   wordWrap = defaults.wordWrap,
   initialWhitespace = defaults.whitespace,
   fileOrder: storedFileOrder,
@@ -61,9 +71,11 @@ export function DiffSettingsProvider({
   const [whitespace, setWhitespace] = useState(initialWhitespace);
   const [ownFileOrder, setOwnFileOrder] = useState(defaults.fileOrder);
   const fileOrder = storedFileOrder ?? ownFileOrder;
+  const fontFamily = diffFontFamily(font, customFont);
   const value = useMemo(
     () => ({
       theme,
+      fontFamily,
       wordWrap,
       whitespace,
       setWhitespace,
@@ -73,7 +85,7 @@ export function DiffSettingsProvider({
         onFileOrderChange?.(next);
       },
     }),
-    [theme, wordWrap, whitespace, fileOrder, onFileOrderChange],
+    [theme, fontFamily, wordWrap, whitespace, fileOrder, onFileOrderChange],
   );
   return <DiffSettingsContext value={value}>{children}</DiffSettingsContext>;
 }

package/src/components/branch-diff/whitespace-button.tsx

@@ -1,7 +1,7 @@
 import type { DiffWhitespace } from "@reviewflow/sdk";
-import { IconButton } from "alouette";
 import { ParagraphRegularIcon } from "alouette-icons/phosphor-icons/Paragraph";
 import type { ReactNode } from "react";
+import { TooltipIconButton } from "../tooltip-icon-button.tsx";
 
 interface WhitespaceButtonProps {
   whitespace: DiffWhitespace;
@@ -16,7 +16,7 @@ export function WhitespaceButton({
   onToggle,
 }: WhitespaceButtonProps): ReactNode {
   return (
-    <IconButton
+    <TooltipIconButton
       icon={<ParagraphRegularIcon />}
       size="sm"
       accent={whitespace === "hide" ? "brand" : "neutral"}

package/src/components/diff-settings-section.tsx

@@ -0,0 +1,189 @@
+import type { DiffFont, DiffTheme } from "@reviewflow/sdk";
+import {
+  diffFontOptions,
+  diffThemeOptions,
+  isDiffFont,
+  isDiffTheme,
+} from "@reviewflow/sdk";
+import {
+  Box,
+  ErrorMessage,
+  FormItem,
+  IndeterminateCircularProgress,
+  InputText,
+  Select,
+  Switch,
+  Text,
+  View,
+  useCurrentMode,
+} from "alouette";
+import type { ReactNode } from "react";
+import { Suspense, lazy, useState } from "react";
+import { errorToMessage } from "../services/errorToMessage.ts";
+import { diffFontFamily } from "./branch-diff/diff-font.ts";
+
+const DiffThemePreview = lazy(() => import("./diff-theme-preview.tsx"));
+
+export interface DiffDisplaySettings {
+  wordWrap: boolean;
+  hideWhitespace: boolean;
+  theme: DiffTheme;
+  font: DiffFont;
+  /** the CSS `font-family` of the `custom` font */
+  customFont: string;
+}
+
+interface DiffSettingsSectionProps {
+  settings: DiffDisplaySettings;
+  /** saves one change, wherever the app keeps them; a rejection is shown in the section */
+  onChange: (change: Partial<DiffDisplaySettings>) => Promise<void>;
+}
+
+/**
+ * How the diffs render, for an app's settings screen. Saved on the press; the
+ * preview follows the picked theme at once rather than waiting for the save.
+ */
+export function DiffSettingsSection({
+  settings,
+  onChange,
+}: DiffSettingsSectionProps): ReactNode {
+  const mode = useCurrentMode();
+  const [error, setError] = useState<string | null>(null);
+  const [pickedTheme, setPickedTheme] = useState<DiffTheme | null>(null);
+  const [pickedFont, setPickedFont] = useState<DiffFont | null>(null);
+  const [typedCustomFont, setTypedCustomFont] = useState<string | null>(null);
+
+  const save = (
+    change: Partial<DiffDisplaySettings>,
+    onSettled?: () => void,
+  ): void => {
+    setError(null);
+    onChange(change)
+      .catch((changeError: unknown) => {
+        setError(errorToMessage(changeError));
+      })
+      .finally(onSettled);
+  };
+
+  const previewTheme = pickedTheme ?? settings.theme;
+  const previewFont = pickedFont ?? settings.font;
+  const previewCustomFont = typedCustomFont ?? settings.customFont;
+
+  return (
+    <Box className="surface gap-m p-m">
+      <Text className="font-heading-bold text-lg">Diff</Text>
+
+      <FormItem
+        label="Wrap long lines"
+        details="On, a line longer than its column wraps. Off, it stays on one line and the file scrolls sideways."
+        render={({ labelId, describedBy }) => (
+          <Switch
+            aria-labelledby={labelId}
+            aria-describedby={describedBy}
+            checked={settings.wordWrap}
+            onValueChange={(wordWrap) => {
+              save({ wordWrap });
+            }}
+          />
+        )}
+      />
+
+      <FormItem
+        label="Hide whitespace changes"
+        details="On, a line whose only change is whitespace is not shown as changed, and a file with nothing else is listed as left out. The diff's toolbar switches it too. A pull request read from GitHub's API shows whitespace whatever this says."
+        render={({ labelId, describedBy }) => (
+          <Switch
+            aria-labelledby={labelId}
+            aria-describedby={describedBy}
+            checked={settings.hideWhitespace}
+            onValueChange={(hideWhitespace) => {
+              save({ hideWhitespace });
+            }}
+          />
+        )}
+      />
+
+      <FormItem
+        label="Theme"
+        details="The syntax colours of the diffs. Each theme has a light and a dark variant, following the app's mode."
+        render={({ labelId, describedBy }) => (
+          <Select
+            aria-labelledby={labelId}
+            aria-describedby={describedBy}
+            options={diffThemeOptions}
+            value={previewTheme}
+            onValueChange={(theme) => {
+              if (!isDiffTheme(theme)) return;
+              setPickedTheme(theme);
+              save({ theme }, () => {
+                setPickedTheme((current) =>
+                  current === theme ? null : current,
+                );
+              });
+            }}
+          />
+        )}
+      />
+
+      <FormItem
+        label="Font"
+        details="The font of the diffs' code: the app's own mono, the system mono font the diff library ships with, or one installed on this machine."
+        render={({ labelId, describedBy }) => (
+          <Select
+            aria-labelledby={labelId}
+            aria-describedby={describedBy}
+            options={diffFontOptions}
+            value={previewFont}
+            onValueChange={(font) => {
+              if (!isDiffFont(font)) return;
+              setPickedFont(font);
+              save({ font }, () => {
+                setPickedFont((current) => (current === font ? null : current));
+              });
+            }}
+          />
+        )}
+      />
+
+      {previewFont === "custom" ? (
+        <FormItem
+          label="Custom font"
+          details="A CSS font-family, as installed on this machine: JetBrains Mono, or a list such as “Fira Code”, Menlo. The app's mono stands in for a font this machine does not have."
+          render={({ labelId, describedBy }) => (
+            <InputText
+              value={previewCustomFont}
+              aria-labelledby={labelId}
+              aria-describedby={describedBy}
+              autoComplete="off"
+              placeholder="JetBrains Mono"
+              onChangeText={(customFont) => {
+                setTypedCustomFont(customFont);
+                save({ customFont }, () => {
+                  setTypedCustomFont((current) =>
+                    current === customFont ? null : current,
+                  );
+                });
+              }}
+            />
+          )}
+        />
+      ) : null}
+
+      <Suspense
+        fallback={
+          <View className="items-center py-m">
+            <IndeterminateCircularProgress loading />
+          </View>
+        }
+      >
+        <DiffThemePreview
+          theme={previewTheme}
+          fontFamily={diffFontFamily(previewFont, previewCustomFont)}
+          themeType={mode}
+        />
+      </Suspense>
+
+      {error === null ? null : <ErrorMessage>{error}</ErrorMessage>}
+    </Box>
+  );
+}

package/src/components/diff-theme-preview.tsx

@@ -0,0 +1,63 @@
+import { parseDiffFromFile } from "@pierre/diffs";
+import { FileDiff } from "@pierre/diffs/react";
+import type { DiffTheme } from "@reviewflow/sdk";
+import type { ReactNode } from "react";
+import { diffFontCSS } from "./branch-diff/diff-font.ts";
+import {
+  changeBackgroundCSS,
+  diffThemeNames,
+} from "./branch-diff/diff-themes.ts";
+
+const before = `import { readFile } from "node:fs/promises";
+
+/** Reads the settings, or null when there are none. */
+export async function loadSettings(path: string) {
+  const contents = await readFile(path, "utf8");
+  return JSON.parse(contents);
+}
+`;
+
+const after = `import { readFile } from "node:fs/promises";
+
+const defaultTheme = "github";
+
+/** Reads the settings, or the defaults when there are none. */
+export async function loadSettings(path: string): Promise<Settings> {
+  const contents = await readFile(path, "utf8").catch(() => "{}");
+  return { theme: defaultTheme, ...JSON.parse(contents) };
+}
+`;
+
+const sample = parseDiffFromFile(
+  { name: "settings.ts", contents: before },
+  { name: "settings.ts", contents: after },
+);
+
+interface DiffThemePreviewProps {
+  theme: DiffTheme;
+  fontFamily: string | null;
+  themeType: "dark" | "light";
+}
+
+/**
+ * A fixed diff rendered in the picked theme and font, in the app's current
+ * mode. Its own lazy chunk, like the diff viewers: it carries shiki.
+ */
+export default function DiffThemePreview({
+  theme,
+  fontFamily,
+  themeType,
+}: DiffThemePreviewProps): ReactNode {
+  return (
+    <FileDiff
+      fileDiff={sample}
+      options={{
+        diffStyle: "unified",
+        theme: diffThemeNames(theme),
+        themeType,
+        overflow: "wrap",
+        unsafeCSS: `${diffFontCSS(fontFamily)} ${changeBackgroundCSS(theme)}`,
+      }}
+    />
+  );
+}

package/src/components/file-kind.ts

@@ -0,0 +1,91 @@
+export type FileKind =
+  | "config"
+  | "css"
+  | "file"
+  | "html"
+  | "image"
+  | "javascript"
+  | "json"
+  | "jsx"
+  | "lock"
+  | "markdown"
+  | "package"
+  | "python"
+  | "rust"
+  | "shell"
+  | "sql"
+  | "svg"
+  | "text"
+  | "tsx"
+  | "typescript"
+  | "vue";
+
+const lockFiles = new Set([
+  "bun.lock",
+  "bun.lockb",
+  "composer.lock",
+  "Gemfile.lock",
+  "package-lock.json",
+  "pnpm-lock.yaml",
+  "poetry.lock",
+  "yarn.lock",
+]);
+
+const kindByExtension: Readonly<Record<string, FileKind>> = {
+  ts: "typescript",
+  mts: "typescript",
+  cts: "typescript",
+  tsx: "tsx",
+  js: "javascript",
+  mjs: "javascript",
+  cjs: "javascript",
+  jsx: "jsx",
+  json: "json",
+  jsonc: "json",
+  json5: "json",
+  md: "markdown",
+  mdx: "markdown",
+  css: "css",
+  scss: "css",
+  sass: "css",
+  less: "css",
+  html: "html",
+  htm: "html",
+  png: "image",
+  jpg: "image",
+  jpeg: "image",
+  gif: "image",
+  webp: "image",
+  avif: "image",
+  ico: "image",
+  svg: "svg",
+  yaml: "config",
+  yml: "config",
+  toml: "config",
+  ini: "config",
+  env: "config",
+  sh: "shell",
+  bash: "shell",
+  zsh: "shell",
+  fish: "shell",
+  sql: "sql",
+  py: "python",
+  rs: "rust",
+  vue: "vue",
+  txt: "text",
+  log: "text",
+};
+
+/** What a file is, from its name, for the icon standing for it. */
+export const fileKindOf = (path: string): FileKind => {
+  const name = path.slice(path.lastIndexOf("/") + 1);
+  if (lockFiles.has(name) || name.endsWith(".lock")) return "lock";
+  if (name === "package.json") return "package";
+  const dot = name.lastIndexOf(".");
+  const known =
+    dot > 0 ? kindByExtension[name.slice(dot + 1).toLowerCase()] : undefined;
+  if (known !== undefined) return known;
+  // a dotfile without a known extension (.gitignore, .npmrc, .env)
+  if (name.startsWith(".")) return "config";
+  return "file";
+};

package/src/components/file-type-icon.tsx

@@ -0,0 +1,70 @@
+import type { SVGIconElement } from "alouette";
+import { Icon } from "alouette";
+import { BracketsCurlyRegularIcon } from "alouette-icons/phosphor-icons/BracketsCurly";
+import { FileRegularIcon } from "alouette-icons/phosphor-icons/File";
+import { FileCssRegularIcon } from "alouette-icons/phosphor-icons/FileCss";
+import { FileHtmlRegularIcon } from "alouette-icons/phosphor-icons/FileHtml";
+import { FileImageRegularIcon } from "alouette-icons/phosphor-icons/FileImage";
+import { FileJsRegularIcon } from "alouette-icons/phosphor-icons/FileJs";
+import { FileJsxRegularIcon } from "alouette-icons/phosphor-icons/FileJsx";
+import { FileLockRegularIcon } from "alouette-icons/phosphor-icons/FileLock";
+import { FileMdRegularIcon } from "alouette-icons/phosphor-icons/FileMd";
+import { FilePyRegularIcon } from "alouette-icons/phosphor-icons/FilePy";
+import { FileRsRegularIcon } from "alouette-icons/phosphor-icons/FileRs";
+import { FileSqlRegularIcon } from "alouette-icons/phosphor-icons/FileSql";
+import { FileSvgRegularIcon } from "alouette-icons/phosphor-icons/FileSvg";
+import { FileTsRegularIcon } from "alouette-icons/phosphor-icons/FileTs";
+import { FileTsxRegularIcon } from "alouette-icons/phosphor-icons/FileTsx";
+import { FileTxtRegularIcon } from "alouette-icons/phosphor-icons/FileTxt";
+import { FileVueRegularIcon } from "alouette-icons/phosphor-icons/FileVue";
+import { GearSixRegularIcon } from "alouette-icons/phosphor-icons/GearSix";
+import { PackageRegularIcon } from "alouette-icons/phosphor-icons/Package";
+import { TerminalRegularIcon } from "alouette-icons/phosphor-icons/Terminal";
+import { TestTubeRegularIcon } from "alouette-icons/phosphor-icons/TestTube";
+import type { ReactNode } from "react";
+import type { FileKind } from "./file-kind.ts";
+import { fileKindOf } from "./file-kind.ts";
+
+const glyphOf = (kind: FileKind): SVGIconElement => {
+  if (kind === "typescript") return <FileTsRegularIcon />;
+  if (kind === "tsx") return <FileTsxRegularIcon />;
+  if (kind === "javascript") return <FileJsRegularIcon />;
+  if (kind === "jsx") return <FileJsxRegularIcon />;
+  if (kind === "json") return <BracketsCurlyRegularIcon />;
+  if (kind === "package") return <PackageRegularIcon />;
+  if (kind === "lock") return <FileLockRegularIcon />;
+  if (kind === "markdown") return <FileMdRegularIcon />;
+  if (kind === "css") return <FileCssRegularIcon />;
+  if (kind === "html") return <FileHtmlRegularIcon />;
+  if (kind === "image") return <FileImageRegularIcon />;
+  if (kind === "svg") return <FileSvgRegularIcon />;
+  if (kind === "config") return <GearSixRegularIcon />;
+  if (kind === "shell") return <TerminalRegularIcon />;
+  if (kind === "sql") return <FileSqlRegularIcon />;
+  if (kind === "python") return <FilePyRegularIcon />;
+  if (kind === "rust") return <FileRsRegularIcon />;
+  if (kind === "vue") return <FileVueRegularIcon />;
+  if (kind === "text") return <FileTxtRegularIcon />;
+  return <FileRegularIcon />;
+};
+
+interface FileTypeIconProps {
+  path: string;
+  /** a test or a story, whatever its extension */
+  test: boolean;
+  size: number;
+}
+
+export function FileTypeIcon({
+  path,
+  test,
+  size,
+}: FileTypeIconProps): ReactNode {
+  return (
+    <Icon
+      icon={test ? <TestTubeRegularIcon /> : glyphOf(fileKindOf(path))}
+      size={size}
+      className="text-muted"
+    />
+  );
+}

package/src/components/pull-request-diff-annotations.tsx

@@ -51,11 +51,14 @@ export interface ReviewDraftActions {
   remove: (key: string) => void;
 }
 
-/** Flat: it sits inside the file's card, which is already raised. */
+/**
+ * Raised off the code on its own highlight ground, not the line's: a selected
+ * line's tint would show through, and a hairline left it reading as code.
+ */
 function Frame({ children }: { children: ReactNode }): ReactNode {
   return (
     <View className="p-xs">
-      <View className="min-w-0 gap-sm rounded-sm border border-border-muted p-m">
+      <View className="min-w-0 gap-sm rounded-sm bg-highlight p-m shadow-s">
         {children}
       </View>
     </View>

package/src/components/pull-request-diff-jump.ts

@@ -1,5 +1,12 @@
 import { animationDurationsMs } from "alouette";
-import { createContext, use, useSyncExternalStore } from "react";
+import type { RefObject } from "react";
+import {
+  createContext,
+  use,
+  useEffect,
+  useState,
+  useSyncExternalStore,
+} from "react";
 
 /** How long a file gone to stays outlined before the outline fades. */
 const highlightHoldMs = 1500;
@@ -20,6 +27,8 @@ export interface DiffFileElements {
   /** returns the unregistration */
   register: (path: string, element: HTMLElement) => () => void;
   elementOf: (path: string) => HTMLElement | undefined;
+  /** the file whose element spans the viewport's `y`; null in a gap or past the files */
+  fileAt: (y: number) => string | null;
   /** outlines the file's header in `color`, replacing any outline still showing */
   highlight: (path: string, color: string) => void;
   subscribe: (listener: () => void) => () => void;
@@ -43,6 +52,13 @@ export const createDiffFileElements = (): DiffFileElements => {
       };
     },
     elementOf: (path) => elements.get(path),
+    fileAt: (y) => {
+      for (const [path, element] of elements) {
+        const { top, bottom } = element.getBoundingClientRect();
+        if (top <= y && y < bottom) return path;
+      }
+      return null;
+    },
     highlight: (path, color) => {
       for (const timer of timers) clearTimeout(timer);
       setHighlighted({ path, phase: "shown", color });
@@ -73,6 +89,48 @@ export const DiffFileElementsContext = createContext<DiffFileElements | null>(
 export const useDiffFileElements = (): DiffFileElements | null =>
   use(DiffFileElementsContext);
 
+/**
+ * The file read at the moment: the one under the bottom edge of `bar`, the
+ * sticky toolbar the diff scrolls beneath. Measured once a frame while
+ * anything scrolls, on the web only; it keeps the last file found while the
+ * edge is over a gap between files, and is null until one is.
+ */
+export const useFileInView = (
+  fileElements: DiffFileElements,
+  bar: RefObject<unknown>,
+  enabled: boolean,
+): string | null => {
+  const [path, setPath] = useState<string | null>(null);
+  useEffect(() => {
+    if (!enabled || typeof document === "undefined") return undefined;
+    let frame: number | null = null;
+    const measure = (): void => {
+      frame = null;
+      const element = bar.current;
+      if (!(element instanceof HTMLElement)) return;
+      const found = fileElements.fileAt(
+        element.getBoundingClientRect().bottom + 1,
+      );
+      if (found !== null) setPath(found);
+    };
+    const schedule = (): void => {
+      frame ??= requestAnimationFrame(measure);
+    };
+    schedule();
+    document.addEventListener("scroll", schedule, {
+      capture: true,
+      passive: true,
+    });
+    window.addEventListener("resize", schedule);
+    return () => {
+      if (frame !== null) cancelAnimationFrame(frame);
+      document.removeEventListener("scroll", schedule, { capture: true });
+      window.removeEventListener("resize", schedule);
+    };
+  }, [fileElements, bar, enabled]);
+  return enabled ? path : null;
+};
+
 const noSubscription = (): (() => void) => () => {};
 
 /** Re-renders only the file whose highlight changes, not every file of the diff. */

package/src/components/pull-request-diff-overview-tree.ts

@@ -0,0 +1,57 @@
+export interface OverviewTreeRow {
+  /** `workspaceIdOf` or `fileIdOf`: a workspace and a file may share a path */
+  id: string;
+  kind: "file" | "workspace";
+  /** 1 for a workspace, 2 for its files, 3 for a test below its subject */
+  level: 1 | 2 | 3;
+  parent: string | null;
+  /** a workspace's rows are listed; false for a file */
+  expanded: boolean;
+}
+
+export const workspaceIdOf = (name: string): string => `workspace:${name}`;
+export const fileIdOf = (path: string): string => `file:${path}`;
+
+export type OverviewTreeAction =
+  | { type: "focus"; id: string }
+  | { type: "press"; id: string }
+  | { type: "toggle"; id: string };
+
+/**
+ * What a key does on the focused row, as the WAI-ARIA tree pattern has it:
+ * up and down move a row, home and end to either end, right opens a closed
+ * workspace or enters an open one, left closes an open workspace or goes up to
+ * the parent, space presses the row. Enter is left to the pressable, which
+ * presses on it already. Null for any other key.
+ */
+export const overviewTreeActionOf = (
+  rows: readonly OverviewTreeRow[],
+  focusedId: string,
+  key: string,
+): OverviewTreeAction | null => {
+  const index = rows.findIndex(({ id }) => id === focusedId);
+  const row = rows[index];
+  if (row === undefined) return null;
+  const focus = (
+    target: OverviewTreeRow | undefined,
+  ): OverviewTreeAction | null =>
+    target === undefined ? null : { type: "focus", id: target.id };
+  if (key === "ArrowDown") return focus(rows[index + 1]);
+  if (key === "ArrowUp") return focus(rows[index - 1]);
+  if (key === "Home") return focus(rows[0]);
+  if (key === "End") return focus(rows.at(-1));
+  if (key === " ") return { type: "press", id: row.id };
+  if (key === "ArrowRight") {
+    if (row.kind === "file") return null;
+    if (!row.expanded) return { type: "toggle", id: row.id };
+    const child = rows[index + 1];
+    return child?.parent === row.id ? focus(child) : null;
+  }
+  if (key === "ArrowLeft") {
+    if (row.kind === "workspace" && row.expanded) {
+      return { type: "toggle", id: row.id };
+    }
+    return row.parent === null ? null : { type: "focus", id: row.parent };
+  }
+  return null;
+};