@reviewflow/ui 6.25.0 → 6.27.0

package/src/components/commit-list.tsx

@@ -0,0 +1,172 @@
+import type { PullRequestCommit } from "@reviewflow/sdk";
+import { Button, Code, PressableListItem, Text, View } from "alouette";
+import { ArrowLeftRegularIcon } from "alouette-icons/phosphor-icons/ArrowLeft";
+import { CaretDownRegularIcon } from "alouette-icons/phosphor-icons/CaretDown";
+import { CaretUpRegularIcon } from "alouette-icons/phosphor-icons/CaretUp";
+import type { ReactNode } from "react";
+import { formatDataAge } from "../services/formatDataAge.ts";
+import { PersonAvatar } from "./pull-request-conversation-person.tsx";
+import { TooltipIconButton } from "./tooltip-icon-button.tsx";
+
+const shortSha = (oid: string): string => oid.slice(0, 7);
+
+const dayOf = (commit: PullRequestCommit): string =>
+  new Date(commit.committedAt).toLocaleDateString([], {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+interface CommitRowProps<Commit extends PullRequestCommit> {
+  commit: Commit;
+  onOpen: () => void;
+  extra: ReactNode;
+}
+
+/** A link, as a board row is: it opens the commit's own diff. */
+function CommitRow<Commit extends PullRequestCommit>({
+  commit,
+  onOpen,
+  extra,
+}: CommitRowProps<Commit>): ReactNode {
+  const login = commit.author?.login ?? "unknown";
+
+  return (
+    <PressableListItem
+      role="link"
+      aria-label={`Show the changes of ${commit.headline}`}
+      onPress={onOpen}
+    >
+      <View className="flex-row items-center gap-sm">
+        <PersonAvatar person={commit.author} />
+        <View className="min-w-0 flex-1">
+          <Text className="text-sm font-body-bold" numberOfLines={1}>
+            {commit.headline}
+          </Text>
+          <Text className="text-xs text-muted" numberOfLines={1}>
+            {`${login} committed ${formatDataAge(commit.committedAt)}`}
+          </Text>
+        </View>
+        {extra}
+        <Code className="text-xs">{shortSha(commit.oid)}</Code>
+      </View>
+    </PressableListItem>
+  );
+}
+
+export interface CommitListProps<Commit extends PullRequestCommit> {
+  /** in the order to show them; a day heads each run of commits made that day */
+  commits: Commit[];
+  onOpen: (oid: string) => void;
+  /** beside the commit's short sha, e.g. a badge */
+  renderExtra?: (commit: Commit) => ReactNode;
+}
+
+/** Commits grouped by day as on GitHub; pressing one opens its own diff. */
+export function CommitList<Commit extends PullRequestCommit>({
+  commits,
+  onOpen,
+  renderExtra,
+}: CommitListProps<Commit>): ReactNode {
+  const days = new Map<string, Commit[]>();
+  for (const commit of commits) {
+    const day = dayOf(commit);
+    const ofDay = days.get(day);
+    if (ofDay === undefined) days.set(day, [commit]);
+    else ofDay.push(commit);
+  }
+
+  return (
+    <View className="gap-m">
+      {[...days].map(([day, ofDay]) => (
+        <View key={day} className="gap-xs">
+          <Text className="text-xs font-body-bold text-muted">{day}</Text>
+          {ofDay.map((commit) => (
+            <CommitRow
+              key={commit.oid}
+              commit={commit}
+              extra={renderExtra?.(commit)}
+              onOpen={() => {
+                onOpen(commit.oid);
+              }}
+            />
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+/** Steps to the neighbouring commits of the list; null at its end. */
+export interface CommitSteps {
+  onNewer: (() => void) | null;
+  onOlder: (() => void) | null;
+}
+
+function CommitStepButtons({ onNewer, onOlder }: CommitSteps): ReactNode {
+  return (
+    <View className="flex-row items-center gap-xxs">
+      <TooltipIconButton
+        icon={<CaretUpRegularIcon />}
+        size="sm"
+        aria-label="Newer commit"
+        disabledReason={onNewer === null ? "This is the newest commit" : null}
+        onPress={() => {
+          onNewer?.();
+        }}
+      />
+      <TooltipIconButton
+        icon={<CaretDownRegularIcon />}
+        size="sm"
+        aria-label="Older commit"
+        disabledReason={onOlder === null ? "This is the oldest commit" : null}
+        onPress={() => {
+          onOlder?.();
+        }}
+      />
+    </View>
+  );
+}
+
+interface CommitHeaderProps {
+  commit: PullRequestCommit;
+  onBack: () => void;
+  /** absent: the commit cannot be stepped from */
+  steps?: CommitSteps;
+  /** beside the commit's short sha, e.g. a badge */
+  extra?: ReactNode;
+}
+
+/** Above a commit's own diff: the way back to the list, its message and its sha. */
+export function CommitHeader({
+  commit,
+  onBack,
+  steps,
+  extra,
+}: CommitHeaderProps): ReactNode {
+  return (
+    <View className="gap-m">
+      <View className="flex-row flex-wrap items-center gap-sm">
+        <Button
+          text="Back to commits"
+          icon={<ArrowLeftRegularIcon />}
+          accent="neutral"
+          variant="tonal"
+          size="sm"
+          onPress={onBack}
+        />
+        <Text className="min-w-0 flex-1 text-sm font-body-bold">
+          {commit.headline}
+        </Text>
+        {extra}
+        <Code className="text-xs">{shortSha(commit.oid)}</Code>
+        {steps === undefined ? null : <CommitStepButtons {...steps} />}
+      </View>
+      {commit.body.trim() === "" ? null : (
+        <Text className="select-auto font-mono text-xs text-muted">
+          {commit.body}
+        </Text>
+      )}
+    </View>
+  );
+}

package/src/components/diff-viewer.tsx

@@ -0,0 +1 @@
+export { DiffViewer as default } from "./pull-request-diff-viewer.tsx";

package/src/components/omitted-files.tsx

@@ -0,0 +1,32 @@
+import type { DiffOmittedFile } from "@reviewflow/sdk";
+import { Code, Text, View } from "alouette";
+import type { ReactNode } from "react";
+
+const omissionLabel = (reason: DiffOmittedFile["reason"]): string => {
+  if (reason === "binary") return "binary";
+  if (reason === "tooLarge") return "too large";
+  if (reason === "whitespace") return "only whitespace changed";
+  return "over the diff budget";
+};
+
+interface OmittedFilesProps {
+  omitted: DiffOmittedFile[];
+}
+
+/** The files a diff left out and why; nothing when it left none out. */
+export function OmittedFiles({ omitted }: OmittedFilesProps): ReactNode {
+  if (omitted.length === 0) return null;
+  return (
+    <View className="gap-xxs">
+      <Text className="text-xs font-body-bold text-muted">
+        {`Left out (${String(omitted.length)})`}
+      </Text>
+      {omitted.map(({ path, reason }) => (
+        <View key={path} className="flex-row flex-wrap items-center gap-xs">
+          <Code className="text-xs">{path}</Code>
+          <Text className="text-xs text-muted">{omissionLabel(reason)}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}

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

@@ -4,20 +4,11 @@ import type {
   PullRequestEdit,
 } from "@reviewflow/sdk";
 import { pluralOf } from "@reviewflow/sdk";
-import {
-  Button,
-  Code,
-  InfoMessage,
-  PressableListItem,
-  Text,
-  View,
-} from "alouette";
-import { ArrowLeftRegularIcon } from "alouette-icons/phosphor-icons/ArrowLeft";
+import { InfoMessage, Text, View } from "alouette";
 import type { ReactNode } from "react";
 import { useState } from "react";
 import { usePullRequestDataSource } from "../dataSource.ts";
-import { formatDataAge } from "../services/formatDataAge.ts";
-import { PersonAvatar } from "./pull-request-conversation-person.tsx";
+import { CommitHeader, CommitList } from "./commit-list.tsx";
 import { PullRequestDiffView } from "./pull-request-diff-view.tsx";
 import {
   PullRequestPartError,
@@ -37,46 +28,6 @@ export interface PullRequestCommitsProps {
   onOpenCommitChange?: (oid: string | null) => void;
 }
 
-const shortSha = (oid: string): string => oid.slice(0, 7);
-
-const dayOf = (commit: PullRequestCommit): string =>
-  new Date(commit.committedAt).toLocaleDateString([], {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  });
-
-interface CommitRowProps {
-  commit: PullRequestCommit;
-  onOpen: () => void;
-}
-
-/** A link, as a board row is: it opens the commit's own page, which a url keeps. */
-function CommitRow({ commit, onOpen }: CommitRowProps): ReactNode {
-  const login = commit.author?.login ?? "unknown";
-
-  return (
-    <PressableListItem
-      role="link"
-      aria-label={`Show the changes of ${commit.headline}`}
-      onPress={onOpen}
-    >
-      <View className="flex-row items-center gap-sm">
-        <PersonAvatar person={commit.author} />
-        <View className="min-w-0 flex-1">
-          <Text className="text-sm font-body-bold" numberOfLines={1}>
-            {commit.headline}
-          </Text>
-          <Text className="text-xs text-muted" numberOfLines={1}>
-            {`${login} committed ${formatDataAge(commit.committedAt)}`}
-          </Text>
-        </View>
-        <Code className="text-xs">{shortSha(commit.oid)}</Code>
-      </View>
-    </PressableListItem>
-  );
-}
-
 interface CommitDiffProps {
   detail: PullRequestDetailResponse;
   commit: PullRequestCommit;
@@ -99,25 +50,7 @@ function CommitDiff({
   const dataSource = usePullRequestDataSource();
   return (
     <View className="gap-m">
-      <View className="flex-row flex-wrap items-center gap-sm">
-        <Button
-          text="Back to commits"
-          icon={<ArrowLeftRegularIcon />}
-          accent="neutral"
-          variant="tonal"
-          size="sm"
-          onPress={onBack}
-        />
-        <Text className="min-w-0 flex-1 text-sm font-body-bold">
-          {commit.headline}
-        </Text>
-        <Code className="text-xs">{shortSha(commit.oid)}</Code>
-      </View>
-      {commit.body.trim() === "" ? null : (
-        <Text className="select-auto font-mono text-xs text-muted">
-          {commit.body}
-        </Text>
-      )}
+      <CommitHeader commit={commit} onBack={onBack} />
       {commit.parentOid === null ? (
         <InfoMessage>
           This is a root commit with no parent: its changes cannot be shown.
@@ -185,33 +118,13 @@ export function PullRequestCommits({
     );
   }
 
-  const days = new Map<string, PullRequestCommit[]>();
-  for (const commit of listed) {
-    const day = dayOf(commit);
-    const ofDay = days.get(day);
-    if (ofDay === undefined) days.set(day, [commit]);
-    else ofDay.push(commit);
-  }
   const unlisted = pullRequest.commitsTotal - listed.length;
 
   return (
     <View className="gap-m">
       <PullRequestPartReading reading={reading} />
       <PullRequestPartError error={error} />
-      {[...days].map(([day, commits]) => (
-        <View key={day} className="gap-xs">
-          <Text className="text-xs font-body-bold text-muted">{day}</Text>
-          {commits.map((commit) => (
-            <CommitRow
-              key={commit.oid}
-              commit={commit}
-              onOpen={() => {
-                setOpenOid(commit.oid);
-              }}
-            />
-          ))}
-        </View>
-      ))}
+      <CommitList commits={listed} onOpen={setOpenOid} />
       {unlisted > 0 ? (
         <Text className="text-xs text-muted">
           {`${pluralOf(unlisted, "more commit")} not listed`}

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

@@ -1,5 +1,4 @@
 import type {
-  DiffOmittedFile,
   DiffStep,
   DiffWhitespace,
   PullRequestDiffResponse,
@@ -41,6 +40,7 @@ import {
   useWhitespaceToggle,
 } from "./branch-diff/use-diff-settings.tsx";
 import { WhitespaceButton } from "./branch-diff/whitespace-button.tsx";
+import { OmittedFiles } from "./omitted-files.tsx";
 import { usePullRequestCollapse } from "./pull-request-diff-collapse.ts";
 import type { PullRequestDiffTarget } from "./pull-request-diff-data.ts";
 import {
@@ -77,30 +77,6 @@ const diffTreeAvailable = Platform.OS === "web";
 
 type AsideView = "list" | "tree";
 
-const omissionLabel = (reason: DiffOmittedFile["reason"]): string => {
-  if (reason === "binary") return "binary";
-  if (reason === "tooLarge") return "too large";
-  if (reason === "whitespace") return "only whitespace changed";
-  return "over the diff budget";
-};
-
-function OmittedFiles({ omitted }: { omitted: DiffOmittedFile[] }): ReactNode {
-  if (omitted.length === 0) return null;
-  return (
-    <View className="gap-xxs">
-      <Text className="text-xs font-body-bold text-muted">
-        {`Left out (${String(omitted.length)})`}
-      </Text>
-      {omitted.map(({ path, reason }) => (
-        <View key={path} className="flex-row flex-wrap items-center gap-xs">
-          <Code className="text-xs">{path}</Code>
-          <Text className="text-xs text-muted">{omissionLabel(reason)}</Text>
-        </View>
-      ))}
-    </View>
-  );
-}
-
 interface DiffSourceProps {
   diff: PullRequestDiffResponse;
   asked: DiffWhitespace;

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

@@ -49,6 +49,10 @@ import type { PullRequestDataSource } from "../dataSource.ts";
 import { usePullRequestDataSource } from "../dataSource.ts";
 import type { PendingComment } from "../services/PullRequestReviewDraftProvider.tsx";
 import { usePullRequestReviewDraft } from "../services/PullRequestReviewDraftProvider.tsx";
+import {
+  DiffChangeMark,
+  hidePierreChangeIcon,
+} from "./branch-diff/diff-change-mark.tsx";
 import { diffFontCSS } from "./branch-diff/diff-font.ts";
 import type { DiffTheme } from "./branch-diff/diff-themes.ts";
 import {
@@ -736,26 +740,31 @@ function DiffFile({
           overflow: wordWrap ? "wrap" : "scroll",
           collapsed,
           stickyHeader: true,
-          unsafeCSS: `${stickyHeaderBelow(stickyTop)} ${headerInset} ${roundedFile} ${pierreScrollbars} ${diffFontCSS(fontFamily)} ${selectionCSS(theme, themeType)} ${changeBackgroundCSS(theme)} ${headerHighlight(highlight, collapsed)}`,
+          unsafeCSS: `${stickyHeaderBelow(stickyTop)} ${headerInset} ${roundedFile} ${pierreScrollbars} ${hidePierreChangeIcon} ${diffFontCSS(fontFamily)} ${selectionCSS(theme, themeType)} ${changeBackgroundCSS(theme)} ${headerHighlight(highlight, collapsed)}`,
           loadDiffFiles: loadFiles,
           enableGutterUtility: commentable,
           onGutterUtilityClick: commentable ? onGutterUtilityClick : undefined,
         }}
         renderHeaderPrefix={() => (
-          <IconButton
-            icon={
-              collapsed ? <CaretRightRegularIcon /> : <CaretDownRegularIcon />
-            }
-            size="sm"
-            variant="soft"
-            accent="neutral"
-            aria-label={collapsed ? `Open ${file.name}` : `Close ${file.name}`}
-            aria-expanded={!collapsed}
-            onPress={() => {
-              revealBeforeClosing();
-              onToggleCollapsed();
-            }}
-          />
+          <View className="flex-row items-center gap-xxs">
+            <IconButton
+              icon={
+                collapsed ? <CaretRightRegularIcon /> : <CaretDownRegularIcon />
+              }
+              size="sm"
+              variant="soft"
+              accent="neutral"
+              aria-label={
+                collapsed ? `Open ${file.name}` : `Close ${file.name}`
+              }
+              aria-expanded={!collapsed}
+              onPress={() => {
+                revealBeforeClosing();
+                onToggleCollapsed();
+              }}
+            />
+            <DiffChangeMark type={file.type} />
+          </View>
         )}
         renderHeaderMetadata={
           !entry &&
@@ -964,6 +973,56 @@ function FileGroups({ groups, renderFile }: FileGroupsProps): ReactNode {
   );
 }
 
+interface ReadOnlyFilesProps {
+  groups: FileGroup[];
+  diffStyle: DiffStyle;
+  theme: DiffTheme;
+  themeType: "dark" | "light";
+  fontFamily: string | null;
+  wordWrap: boolean;
+  stickyTop: number;
+  collapse: PullRequestCollapse;
+  loadFiles: FileDiffContentsLoader | undefined;
+  impactsOf?: (path: string) => DiffFileImpacts | undefined;
+}
+
+function ReadOnlyFiles({
+  groups,
+  diffStyle,
+  theme,
+  themeType,
+  fontFamily,
+  wordWrap,
+  stickyTop,
+  collapse,
+  loadFiles,
+  impactsOf,
+}: ReadOnlyFilesProps): ReactNode {
+  return (
+    <FileGroups
+      groups={groups}
+      renderFile={(file, { entry, attached }) => (
+        <DiffFile
+          file={file}
+          diffStyle={diffStyle}
+          theme={theme}
+          themeType={themeType}
+          fontFamily={fontFamily}
+          wordWrap={wordWrap}
+          stickyTop={stickyTop}
+          loadFiles={loadFiles}
+          entry={entry}
+          impacts={impactsOf?.(file.name)}
+          collapsed={collapse.isCollapsed(file.name, attached)}
+          onToggleCollapsed={() => {
+            collapse.set(file.name, !collapse.isCollapsed(file.name, attached));
+          }}
+        />
+      )}
+    />
+  );
+}
+
 export interface PullRequestDiffReview {
   /** the head a comment is anchored on: the diff's, not the header's last read */
   headSha: string;
@@ -1345,29 +1404,17 @@ function PullRequestDiffViewer({
   return (
     <DiffWorkerPool theme={theme}>
       {review === undefined ? (
-        <FileGroups
+        <ReadOnlyFiles
           groups={fileGroups}
-          renderFile={(file, { entry, attached }) => (
-            <DiffFile
-              file={file}
-              diffStyle={diffStyle}
-              theme={theme}
-              themeType={themeType}
-              fontFamily={fontFamily}
-              wordWrap={wordWrap}
-              stickyTop={stickyTop}
-              loadFiles={loadFiles}
-              entry={entry}
-              impacts={impactsOf(file.name)}
-              collapsed={collapse.isCollapsed(file.name, attached)}
-              onToggleCollapsed={() => {
-                collapse.set(
-                  file.name,
-                  !collapse.isCollapsed(file.name, attached),
-                );
-              }}
-            />
-          )}
+          diffStyle={diffStyle}
+          theme={theme}
+          themeType={themeType}
+          fontFamily={fontFamily}
+          wordWrap={wordWrap}
+          stickyTop={stickyTop}
+          collapse={collapse}
+          loadFiles={loadFiles}
+          impactsOf={impactsOf}
         />
       ) : (
         <ReviewedFiles
@@ -1392,3 +1439,64 @@ function PullRequestDiffViewer({
 }
 
 export default memo(PullRequestDiffViewer);
+
+export interface DiffViewerProps {
+  patch: string;
+  /** the files by package, in this order; a file no group names goes under the root */
+  groups: DiffGroup[];
+  diffStyle: DiffStyle;
+  theme: DiffTheme;
+  themeType: "dark" | "light";
+  fontFamily: string | null;
+  wordWrap: boolean;
+  /** where a file header sticks: the height of the toolbar stuck above it */
+  stickyTop: number;
+  collapse: PullRequestCollapse;
+  /** absent: the unchanged lines between hunks cannot be unfolded */
+  loadFiles?: FileDiffContentsLoader;
+}
+
+/**
+ * A read-only diff of any patch, with the pull request's file chrome and no
+ * pull request: a branch against its base, a working tree. Default export of
+ * `@reviewflow/ui/diff-viewer`, to be loaded lazily like the pull request's.
+ */
+function DiffViewer({
+  patch,
+  groups,
+  diffStyle,
+  theme,
+  themeType,
+  fontFamily,
+  wordWrap,
+  stickyTop,
+  collapse,
+  loadFiles,
+}: DiffViewerProps): ReactNode {
+  const fileGroups = useMemo(
+    () =>
+      groupFiles(
+        parsePatchFiles(patch).flatMap((parsed) => parsed.files),
+        groups,
+      ),
+    [patch, groups],
+  );
+  return (
+    <DiffWorkerPool theme={theme}>
+      <ReadOnlyFiles
+        groups={fileGroups}
+        diffStyle={diffStyle}
+        theme={theme}
+        themeType={themeType}
+        fontFamily={fontFamily}
+        wordWrap={wordWrap}
+        stickyTop={stickyTop}
+        collapse={collapse}
+        loadFiles={loadFiles}
+      />
+    </DiffWorkerPool>
+  );
+}
+
+const MemoizedDiffViewer = memo(DiffViewer);
+export { MemoizedDiffViewer as DiffViewer };