@reviewflow/ui 6.24.0 → 6.26.0

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

@@ -10,7 +10,6 @@ import { formatRelativeDate, pluralOf } from "@reviewflow/sdk";
 import {
   Button,
   Code,
-  IconButton,
   InfoMessage,
   Menu,
   MenuItem,
@@ -54,6 +53,7 @@ import {
   PullRequestPartPending,
   PullRequestPartReading,
 } from "./pull-request-part-notice.tsx";
+import { TooltipIconButton } from "./tooltip-icon-button.tsx";
 
 type Scope = "all" | "since";
 
@@ -130,7 +130,7 @@ function ByCommitButton({
   onToggle,
 }: ByCommitButtonProps): ReactNode {
   return (
-    <IconButton
+    <TooltipIconButton
       icon={<GitCommitRegularIcon />}
       size="sm"
       accent={byCommit ? "brand" : "neutral"}
@@ -173,7 +173,7 @@ function CommitStepper({
   if (commit === undefined) return null;
   return (
     <View className="min-w-0 shrink flex-row items-center gap-xs">
-      <IconButton
+      <TooltipIconButton
         icon={<CaretLeftRegularIcon />}
         size="sm"
         accent="neutral"
@@ -207,7 +207,7 @@ function CommitStepper({
           />
         ))}
       </Menu>
-      <IconButton
+      <TooltipIconButton
         icon={<CaretRightRegularIcon />}
         size="sm"
         accent="neutral"

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

@@ -40,7 +40,7 @@ import { ChatCircleDotsRegularIcon } from "alouette-icons/phosphor-icons/ChatCir
 import type { ReactNode } from "react";
 import { useState } from "react";
 import { usePullRequestDataSource } from "../dataSource.ts";
-import { prStatusAccents } from "../prStatus.ts";
+import { usePrStatusAccent } from "../prStatus.ts";
 import { emojify } from "../services/emojify.ts";
 import { errorToMessage } from "../services/errorToMessage.ts";
 import { formatDataAge } from "../services/formatDataAge.ts";
@@ -156,6 +156,12 @@ interface MergeLineProps {
   children?: ReactNode;
 }
 
+function StatusBadge({ status }: { status: PrStatus }): ReactNode {
+  return (
+    <Badge accent={usePrStatusAccent(status)}>{prStatusLabels[status]}</Badge>
+  );
+}
+
 function MergeLine({
   status,
   author,
@@ -165,9 +171,7 @@ function MergeLine({
 }: MergeLineProps): ReactNode {
   return (
     <View className="flex-row flex-wrap items-center gap-xs">
-      {status === null ? null : (
-        <Badge accent={prStatusAccents[status]}>{prStatusLabels[status]}</Badge>
-      )}
+      {status === null ? null : <StatusBadge status={status} />}
       <Text className="text-sm font-body-bold">
         {author ?? "unknown author"}
       </Text>
@@ -1163,7 +1167,8 @@ function PullRequestActions({ detail, onEdited }: EditableProps): ReactNode {
 export interface PullRequestPanelProps extends CandidatesProps {
   /** why the editors stay read-only, when GitHub refused what they offer */
   candidatesError: string | null;
-  tab: PullRequestTab;
+  /** absent: the first tab, Review for a reviewer and Conversation for the author */
+  tab?: PullRequestTab;
   onTabChange: (tab: PullRequestTab) => void;
   /** the commit whose diff is open on the Commits tab; absent: the tab holds it */
   openCommit?: string | null;
@@ -1183,7 +1188,7 @@ export function PullRequestPanel({
   candidates,
   candidatesError,
   onEdited,
-  tab,
+  tab: tabProp,
   onTabChange,
   openCommit,
   onOpenCommitChange,
@@ -1194,6 +1199,7 @@ export function PullRequestPanel({
     "checks",
   ).value;
   const viewerIsAuthor = isViewerAuthor(detail);
+  const tab = tabProp ?? (viewerIsAuthor ? "timeline" : "review");
   const reviewTab = (
     <Tab
       value="review"

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

@@ -1,5 +1,6 @@
 import { pullRequestPartsStaleAfter } from "@reviewflow/sdk";
 import type {
+  DiffFont,
   DiffWhitespace,
   PullRequestDetailResponse,
   PullRequestEdit,
@@ -63,7 +64,7 @@ interface PullRequestBodyProps {
   ownerRepo: string;
   number: number;
   headerStart?: ReactNode;
-  tab: PullRequestTab;
+  tab?: PullRequestTab;
   onTabChange: (tab: PullRequestTab) => void;
   openCommit?: string | null;
   onOpenCommitChange?: (oid: string | null) => void;
@@ -203,8 +204,11 @@ function PullRequestBody({
 export interface PullRequestScreenProps {
   ownerRepo: string;
   number: number;
-  /** the tab shown; controlled, so an app can keep it in its url */
-  tab: PullRequestTab;
+  /**
+   * The tab shown; controlled, so an app can keep it in its url. Absent: the
+   * first tab, Review for a reviewer and Conversation for the author.
+   */
+  tab?: PullRequestTab;
   onTabChange: (tab: PullRequestTab) => void;
   /**
    * The commit whose diff is open on the Commits tab, by oid. Absent: the
@@ -239,8 +243,12 @@ export interface PullRequestScreenProps {
    * Absent: they live as long as the screen.
    */
   draftStore?: DraftStore;
-  /** the diff's syntax theme family; default `github` */
+  /** the diff's syntax theme family; default `reviewflow` */
   diffTheme?: DiffTheme;
+  /** the diff's code font; default `alouette` */
+  diffFont?: DiffFont;
+  /** the CSS `font-family` of the `custom` diff font */
+  diffCustomFont?: string;
   /** wrap long lines in the diff; default true */
   diffWordWrap?: boolean;
   /** whether the diff starts with whitespace changes hidden; the toolbar toggle then owns it */
@@ -271,6 +279,8 @@ export function PullRequestScreen({
   slots = {},
   draftStore,
   diffTheme,
+  diffFont,
+  diffCustomFont,
   diffWordWrap,
   initialWhitespace,
   diffFileOrder,
@@ -281,6 +291,8 @@ export function PullRequestScreen({
     <PullRequestSlotsProvider value={slots}>
       <DiffSettingsProvider
         theme={diffTheme}
+        font={diffFont}
+        customFont={diffCustomFont}
         wordWrap={diffWordWrap}
         initialWhitespace={initialWhitespace}
         fileOrder={diffFileOrder}

package/src/components/scroll-parent.ts

@@ -41,6 +41,26 @@ export const scrollToTopOf = (
   container.scrollTop -= hiddenAbove(element, container, stickyTop);
 };
 
+/**
+ * Scrolls `element`'s scroll parent alone, the least that shows it whole
+ * below the `stickyTop` pixels a pinned row covers: the page around it stays
+ * where the reader has it, unlike `scrollIntoView`.
+ */
+export const revealWithinScrollParent = (
+  element: HTMLElement,
+  stickyTop: number,
+): void => {
+  const container = scrollParentOf(element);
+  if (container === null) return;
+  const bounds = container.getBoundingClientRect();
+  const { top, bottom } = element.getBoundingClientRect();
+  const hidden = bounds.top + stickyTop - top;
+  if (hidden > 0) container.scrollTop -= hidden;
+  else if (bottom > bounds.bottom) {
+    container.scrollTop += bottom - bounds.bottom;
+  }
+};
+
 /** As `scrollToTopOf`, only when `element`'s top is hidden above that bar. */
 export const revealTopOf = (element: HTMLElement, stickyTop: number): void => {
   const container = scrollParentOf(element);

package/src/components/tooltip-icon-button.tsx

@@ -0,0 +1,27 @@
+import type { IconButtonProps } from "alouette";
+import { IconButton, Tooltip } from "alouette";
+import type { ReactNode } from "react";
+
+/**
+ * An icon-only button whose label shows on hover, so its purpose is not left
+ * to the glyph. A disabled one shows its reason instead, in the tooltip the
+ * button renders itself. To replace by alouette's own once released:
+ * https://github.com/christophehurpeau/alouette/pull/448
+ */
+export function TooltipIconButton(props: IconButtonProps): ReactNode {
+  const { disabledReason, "aria-label": label } = props;
+  return (
+    <Tooltip
+      content={disabledReason ? null : label}
+      // the label already names the button: as its description too, a screen reader reads it twice
+      render={(triggerProps) => (
+        <IconButton
+          {...props}
+          {...triggerProps}
+          aria-describedby={undefined}
+          accessibilityHint={undefined}
+        />
+      )}
+    />
+  );
+}

package/src/editor/code-editor.tsx

@@ -6,6 +6,7 @@ import type { CodeLanguage } from "./codeEditorExtensions.ts";
 import { codeEditorExtensions } from "./codeEditorExtensions.ts";
 import { changeBetween, externalUpdate } from "./extensions.ts";
 import "./markdown-editor.css";
+import "./code-token-colors.css";
 
 export interface CodeEditorProps {
   value: string;

package/src/editor/code-token-colors.css

@@ -0,0 +1,39 @@
+/* Generated by build-code-theme.ts from the palette in src/palette.ts. DO NOT EDIT. */
+/* The code tokens of the editors, in fences and in the frontmatter's yaml. */
+
+.markdown-editor {
+  --md-tok-comment: #63707e;
+  --md-tok-keyword: #cd112a;
+  --md-tok-string: #064d8e;
+  --md-tok-constant: #0c71c1;
+  --md-tok-property: #0c71c1;
+  --md-tok-type: #986b0c;
+  --md-tok-function: #8837df;
+  --md-tok-invalid: #cd112a;
+}
+
+.dark .markdown-editor {
+  --md-tok-comment: #b4bdc7;
+  --md-tok-keyword: #f56d68;
+  --md-tok-string: #97caf6;
+  --md-tok-constant: #47a5f4;
+  --md-tok-property: #47a5f4;
+  --md-tok-type: #e2b83c;
+  --md-tok-function: #af87e8;
+  --md-tok-invalid: #f56d68;
+}
+
+/* the "system" preference never sets .dark: the palette resolves it with this
+   media query, so the dark tokens are repeated here */
+@media (prefers-color-scheme: dark) {
+  .system .markdown-editor {
+    --md-tok-comment: #b4bdc7;
+    --md-tok-keyword: #f56d68;
+    --md-tok-string: #97caf6;
+    --md-tok-constant: #47a5f4;
+    --md-tok-property: #47a5f4;
+    --md-tok-type: #e2b83c;
+    --md-tok-function: #af87e8;
+    --md-tok-invalid: #f56d68;
+  }
+}

package/src/editor/codeHighlight.ts

@@ -13,7 +13,8 @@ import { tags } from "@lezer/highlight";
  * **Every style is scoped to a nested language**: `@lezer/markdown` tags its
  * own nodes too (`heading1`, `strong`), and an unscoped style would paint prose
  * a second time over the `md-*` classes. Classes, not colours: the palette is
- * in `markdown-editor.css`, switched with the theme.
+ * in `code-token-colors.css`, generated with the diff's reviewflow theme
+ * (`build-code-theme.ts`), switched with the theme.
  *
  * Coarse on purpose — a parent tag catches its children, so a language emitting
  * a tag nobody listed still lands somewhere sensible. Ported from

package/src/editor/markdown-editor.css

@@ -28,14 +28,7 @@
   --md-frontmatter-bg: color-mix(in srgb, var(--color-muted) 7%, transparent);
   --md-quote-bg: color-mix(in srgb, var(--color-muted) 6%, transparent);
 
-  --md-tok-comment: #6e7781;
-  --md-tok-keyword: #cf222e;
-  --md-tok-string: #0a3069;
-  --md-tok-constant: #0550ae;
-  --md-tok-property: #0550ae;
-  --md-tok-type: #116329;
-  --md-tok-function: #8250df;
-  --md-tok-invalid: #82071e;
+  /* the --md-tok-* colors are generated, in code-token-colors.css */
 
   /* fills a column the caller grew; the editor still sizes to its content, and
      the page — the app layout is the scroll container — scrolls a long one */
@@ -53,32 +46,6 @@
   transition: border-color 150ms ease-in;
 }
 
-.dark .markdown-editor {
-  --md-tok-comment: #8b949e;
-  --md-tok-keyword: #ff7b72;
-  --md-tok-string: #a5d6ff;
-  --md-tok-constant: #79c0ff;
-  --md-tok-property: #79c0ff;
-  --md-tok-type: #7ee787;
-  --md-tok-function: #d2a8ff;
-  --md-tok-invalid: #f85149;
-}
-
-/* the "system" preference never sets .dark: the palette resolves it with this
-   media query, so the dark tokens are repeated here */
-@media (prefers-color-scheme: dark) {
-  .system .markdown-editor {
-    --md-tok-comment: #8b949e;
-    --md-tok-keyword: #ff7b72;
-    --md-tok-string: #a5d6ff;
-    --md-tok-constant: #79c0ff;
-    --md-tok-property: #79c0ff;
-    --md-tok-type: #7ee787;
-    --md-tok-function: #d2a8ff;
-    --md-tok-invalid: #f85149;
-  }
-}
-
 .markdown-editor:hover {
   border-color: var(--color-interactive-outlined-hover);
 }

package/src/editor/markdown-editor.tsx

@@ -32,6 +32,7 @@ import {
   markdownEditorExtensions,
 } from "./extensions.ts";
 import "./markdown-editor.css";
+import "./code-token-colors.css";
 
 interface FormatButtonProps {
   icon: SVGIconElement;

package/src/index.ts

@@ -34,18 +34,18 @@ export {
   isDiffFileOrder,
 } from "./components/branch-diff/use-diff-settings.tsx";
 export type { DiffFileOrder } from "./components/branch-diff/use-diff-settings.tsx";
-export type { DiffTheme } from "./components/branch-diff/diff-themes.ts";
-export {
-  diffThemeNames,
-  diffThemeOptions,
-  diffThemes,
-} from "./components/branch-diff/diff-themes.ts";
+// From the sdk, not `branch-diff/diff-themes.ts`: that one registers the reviewflow themes with
+// @pierre/diffs, which this index would put in every importer's main bundle.
+export type { DiffTheme } from "@reviewflow/sdk";
+export { diffThemeNames, diffThemeOptions, diffThemes } from "@reviewflow/sdk";
 // DiffWorkerPool is the `@reviewflow/ui/diff-worker-pool` subpath, not exported here: its web
 // variant pulls @pierre/diffs and shiki, which this index would put in every importer's main
 // bundle. A lazily loaded diff viewer imports the subpath.
 export type { CollapsedFiles } from "./components/branch-diff/use-collapsed-files.ts";
 export { useCollapsedFiles } from "./components/branch-diff/use-collapsed-files.ts";
 export { WhitespaceButton } from "./components/branch-diff/whitespace-button.tsx";
+export type { DiffDisplaySettings } from "./components/diff-settings-section.tsx";
+export { DiffSettingsSection } from "./components/diff-settings-section.tsx";
 export { CopyableCodeBlock } from "./components/copyable-code-block.tsx";
 export { PullRequestReviewDraftProvider } from "./services/PullRequestReviewDraftProvider.tsx";
 export type { DraftStore } from "./services/PullRequestDraftsProvider.tsx";

package/src/palette.ts

@@ -0,0 +1,22 @@
+import type { AccentName, PaletteSpec } from "alouette/theme-generator";
+
+// Hues fitted (in OKLCH) on GitHub Primer's own scales, so reviewflow reads as
+// a companion to the GitHub UI it augments: green brand and success, Primer
+// blue for info, its slightly pink red, its amber-to-cream yellow ramp, and the
+// blue-tinted grays instead of alouette's neutral ones.
+// Read by the app's `build-theme.ts` (its alouette palette) and by this
+// package's `build-code-theme.ts` (the reviewflow code theme).
+export const reviewflowPalette = {
+  grayscale: { type: "grayscale", hue: 250, intensity: 0.18 },
+  brand: { type: "accent", hue: 148, hueHi: 152 },
+  success: { type: "accent", hue: 148, hueHi: 152 },
+  danger: { type: "accent", hue: 21, hueHi: 26 },
+  info: { type: "accent", hue: 260, hueHi: 242 },
+  warning: { type: "brightAccent", hue: 52, hueHi: 99 },
+} as const satisfies Partial<Record<AccentName, PaletteSpec>>;
+
+// Hues alouette has no accent for, used by the code theme only: Primer's
+// purple, for functions as GitHub colors them, its tints pinker as Primer's.
+export const reviewflowCodePalette = {
+  purple: { type: "accent", hue: 295, hueHi: 305, intensity: 0.85 },
+} as const satisfies Record<string, PaletteSpec>;

package/src/prStatus.ts

@@ -1,7 +1,8 @@
 import type { PrStatus } from "@reviewflow/sdk";
 import type { Accent } from "alouette";
+import { usePullRequestSlots } from "./slots.tsx";
 
-/** A merged pull request takes the brand accent; an app with its own accent for it passes one instead. */
+/** A merged pull request takes the brand accent; an app with its own accent for it passes one in the `prStatusAccents` slot. */
 export const prStatusAccents: Record<PrStatus, Accent | undefined> = {
   approved: "success",
   changesRequested: "danger",
@@ -11,3 +12,9 @@ export const prStatusAccents: Record<PrStatus, Accent | undefined> = {
   noReviewers: "warning",
   waitingReview: "info",
 };
+
+/** The badge accent of `status`: the app's (the `prStatusAccents` slot) over the ui's. */
+export const usePrStatusAccent = (status: PrStatus): Accent | undefined => {
+  const { prStatusAccents: appAccents = {} } = usePullRequestSlots();
+  return status in appAccents ? appAccents[status] : prStatusAccents[status];
+};

package/src/slots.tsx

@@ -1,3 +1,5 @@
+import type { PrStatus } from "@reviewflow/sdk";
+import type { Accent } from "alouette";
 import type { ReactNode } from "react";
 import { createContext, use } from "react";
 
@@ -25,6 +27,12 @@ export interface PullRequestSlots {
    * checkout is configured. Absent: the message stands alone.
    */
   renderRepositoryAction?: (ownerRepo: string) => ReactNode;
+  /**
+   * The status badge's accent, per status, over `prStatusAccents`: an app with
+   * an accent of its own for one (a theme it generates beside alouette's, cast
+   * to `Accent`) passes it here.
+   */
+  prStatusAccents?: Partial<Record<PrStatus, Accent | undefined>>;
 }
 
 const SlotsContext = createContext<PullRequestSlots>({});