@reviewflow/ui 6.23.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-actions-review.tsx

@@ -53,7 +53,7 @@ const submitBlocker = (
 };
 
 /**
- * "Review changes", ending the Files changed tab's sticky toolbar: the verdict, a
+ * "Review changes", ending the Review tab's sticky toolbar: the verdict, a
  * summary and the inline comments the diff collected, sent as one review.
  * Brand while comments are pending, so an unsent review is not forgotten. Never
  * offered to the author, whom GitHub lets comment but not review. A review
@@ -181,7 +181,7 @@ export function PullRequestReviewButton({
             </Text>
             {comments.length === 0 ? (
               <Text className="text-sm text-muted">
-                None. Add them from the Files changed tab.
+                None. Add them from the diff lines.
               </Text>
             ) : (
               comments.map((comment) => (

package/src/components/pull-request-commits.tsx

@@ -3,6 +3,7 @@ import type {
   PullRequestDetailResponse,
   PullRequestEdit,
 } from "@reviewflow/sdk";
+import { pluralOf } from "@reviewflow/sdk";
 import {
   Button,
   Code,
@@ -213,7 +214,7 @@ export function PullRequestCommits({
       ))}
       {unlisted > 0 ? (
         <Text className="text-xs text-muted">
-          {`${String(unlisted)} more commit${unlisted === 1 ? "" : "s"} not listed`}
+          {`${pluralOf(unlisted, "more commit")} not listed`}
         </Text>
       ) : null}
     </View>

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

@@ -4,7 +4,7 @@ import type {
   PullRequestEdit,
   PullRequestThread,
 } from "@reviewflow/sdk";
-import { suggestionOriginalLines } from "@reviewflow/sdk";
+import { pluralOf, suggestionOriginalLines } from "@reviewflow/sdk";
 import {
   ActionButton,
   Badge,
@@ -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>
@@ -114,7 +117,7 @@ export function ThreadAnnotation({
             Resolved
           </Badge>
           <Text className="text-sm text-muted">
-            {`${first?.author.login ?? "thread"}, ${String(thread.commentsTotal)} comment${thread.commentsTotal === 1 ? "" : "s"}`}
+            {`${first?.author.login ?? "thread"}, ${pluralOf(thread.commentsTotal, "comment")}`}
           </Text>
           <Button
             size="sm"
@@ -160,7 +163,7 @@ export function ThreadAnnotation({
       </SuggestionOriginalContext>
       {unlisted > 0 ? (
         <Text className="text-xs text-muted">
-          {`${String(unlisted)} more comment${unlisted === 1 ? "" : "s"} on GitHub`}
+          {`${pluralOf(unlisted, "more comment")} on GitHub`}
         </Text>
       ) : null}
       {thread.viewerCanReply && first !== undefined ? (

package/src/components/pull-request-diff-impacts-summary.tsx

@@ -1,10 +1,11 @@
 import type { DiffImpactsResponse } from "@reviewflow/sdk";
+import { pluralOf } from "@reviewflow/sdk";
 import { AccentScope, Icon, Text, View } from "alouette";
 import { InfoRegularIcon } from "alouette-icons/phosphor-icons/Info";
 import { ShareNetworkDuotoneIcon } from "alouette-icons/phosphor-icons/ShareNetwork";
 import type { ReactNode } from "react";
 import type { ImpactsStatus } from "./pull-request-diff-impacts.ts";
-import { countImpacts, pluralOf } from "./pull-request-diff-impacts.ts";
+import { countImpacts } from "./pull-request-diff-impacts.ts";
 
 interface PullRequestDiffImpactsSummaryProps {
   /** null until read, or when it could not be */

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

@@ -1,4 +1,5 @@
 import type { DiffFileImpacts } from "@reviewflow/sdk";
+import { pluralOf } from "@reviewflow/sdk";
 
 /** `none`: no checkout, or a source that cannot read impacts. */
 export type ImpactsStatus = "failed" | "none" | "reading" | "ready";
@@ -34,9 +35,6 @@ export const countImpacts = (
 /** Past this many files using a changed file's exports, each export carries its counts only. */
 export const maxImporterNames = 50;
 
-export const pluralOf = (count: number, word: string): string =>
-  `${String(count)} ${word}${count === 1 ? "" : "s"}`;
-
 /** "4 files · 2 tests", either part left out when it is 0. */
 export const usageLabel = ({ files, tests }: ImpactCounts): string =>
   [