@reviewflow/ui 6.23.0 → 6.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reviewflow/ui",
-  "version": "6.23.0",
+  "version": "6.24.0",
   "description": "react-native pull request screen components. Consumed as SOURCES (no build): exports resolve `default` to ./src/index.ts, which metro transforms like the app's own files; the consuming app's css must @source this package's src so tailwind keeps its classes.",
   "keywords": [
     "alouette",
@@ -52,7 +52,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "6.20.3",
+    "@codemirror/autocomplete": "6.20.4",
     "@codemirror/commands": "6.11.1",
     "@codemirror/lang-css": "6.3.1",
     "@codemirror/lang-html": "6.4.12",
@@ -60,15 +60,15 @@
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-markdown": "6.5.2",
     "@codemirror/lang-yaml": "6.1.3",
-    "@codemirror/language": "6.12.4",
+    "@codemirror/language": "6.13.1",
     "@codemirror/search": "6.7.2",
-    "@codemirror/state": "6.7.5",
-    "@codemirror/view": "6.43.12",
+    "@codemirror/state": "6.7.6",
+    "@codemirror/view": "6.43.15",
     "@lezer/common": "1.5.5",
     "@lezer/highlight": "1.2.3",
     "@lezer/markdown": "1.7.2",
     "@pierre/diffs": "1.5.2",
-    "@reviewflow/sdk": "6.23.0",
+    "@reviewflow/sdk": "6.24.0",
     "@tanstack/markdown": "0.0.13",
     "alouette-icons": "12.0.0",
     "gemoji": "8.1.0",

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,
@@ -114,7 +114,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 +160,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 =>
   [

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

@@ -4,7 +4,7 @@ import type {
   DiffOmittedFile,
   DiffReadingOrderResponse,
 } from "@reviewflow/sdk";
-import { isAttachablePath, subjectsOf } from "@reviewflow/sdk";
+import { isAttachablePath, pluralOf, subjectsOf } from "@reviewflow/sdk";
 import { Icon, PressableBox, Text, View } from "alouette";
 import { FileRegularIcon } from "alouette-icons/phosphor-icons/File";
 import { FileTsRegularIcon } from "alouette-icons/phosphor-icons/FileTs";
@@ -13,7 +13,6 @@ import { TestTubeRegularIcon } from "alouette-icons/phosphor-icons/TestTube";
 import type { ReactNode } from "react";
 import { PullRequestDiffImpactsSummary } from "./pull-request-diff-impacts-summary.tsx";
 import type { ImpactsStatus } from "./pull-request-diff-impacts.ts";
-import { pluralOf } from "./pull-request-diff-impacts.ts";
 
 /** Past this many names over the range, the rows carry their counts only. */
 export const maxOverviewNames = 50;

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

@@ -272,7 +272,7 @@ export function PullRequestDiffView({
     <View
       className={
         aside && diffStyle === "split"
-          ? "gap-m web:relative web:left-1/2 web:w-[min(100vw-3rem,1800px)] web:-translate-x-1/2"
+          ? "gap-m web:relative web:left-1/2 web:w-[100cqw] web:-translate-x-1/2"
           : "gap-m"
       }
     >

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

@@ -18,6 +18,7 @@ import type {
   PullRequestRef,
   PullRequestThread,
 } from "@reviewflow/sdk";
+import { pluralOf } from "@reviewflow/sdk";
 import {
   AccentScope,
   Badge,
@@ -70,7 +71,6 @@ import type { PullRequestMovedOn } from "./pull-request-diff-data.ts";
 import {
   countImpacts,
   maxImporterNames,
-  pluralOf,
   usageLabel,
 } from "./pull-request-diff-impacts.ts";
 import type { DiffFileHighlight } from "./pull-request-diff-jump.ts";
@@ -214,8 +214,7 @@ const useStableAnnotations = (
 /** Why a thread is listed above its file rather than placed on a line. */
 type UnplacedKind = "changedSince" | "outdated" | "whitespace";
 
-const commentsText = (count: number): string =>
-  `${String(count)} comment${count === 1 ? "" : "s"}`;
+const commentsText = (count: number): string => pluralOf(count, "comment");
 
 const unplacedLabel = (kind: UnplacedKind, count: number): string => {
   if (kind === "changedSince") {
@@ -224,7 +223,7 @@ const unplacedLabel = (kind: UnplacedKind, count: number): string => {
   if (kind === "whitespace") {
     return `${commentsText(count)} on lines hidden with whitespace changes`;
   }
-  return `${String(count)} outdated comment${count === 1 ? "" : "s"}`;
+  return pluralOf(count, "outdated comment");
 };
 
 const unplacedLineText = (

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

@@ -6,7 +6,7 @@ import type {
   PullRequestThread,
   PullRequestViewerLastReview,
 } from "@reviewflow/sdk";
-import { formatRelativeDate } from "@reviewflow/sdk";
+import { formatRelativeDate, pluralOf } from "@reviewflow/sdk";
 import {
   Button,
   Code,
@@ -149,7 +149,7 @@ const describeCommit = (
 ): string => {
   const oid = commit.oid.slice(0, 7);
   if (summary === undefined) return oid;
-  const files = `${String(summary.files)} ${summary.files === 1 ? "file" : "files"}`;
+  const files = pluralOf(summary.files, "file");
   return [oid, summary.workspaces.join(", "), files]
     .filter((part) => part !== "")
     .join(" · ");

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

@@ -7,7 +7,12 @@ import type {
   PullRequestReviewState,
   PullRequestSummary,
 } from "@reviewflow/sdk";
-import { prStatus, prStatusLabels, reviewflowPrStatus } from "@reviewflow/sdk";
+import {
+  pluralOf,
+  prStatus,
+  prStatusLabels,
+  reviewflowPrStatus,
+} from "@reviewflow/sdk";
 import type { Accent } from "alouette";
 import {
   AccentScope,
@@ -39,6 +44,7 @@ import { prStatusAccents } from "../prStatus.ts";
 import { emojify } from "../services/emojify.ts";
 import { errorToMessage } from "../services/errorToMessage.ts";
 import { formatDataAge } from "../services/formatDataAge.ts";
+import { isViewerAuthor } from "../services/isViewerAuthor.ts";
 import { LabelPill } from "./label-pill.tsx";
 import {
   PullRequestMergeButton,
@@ -48,7 +54,6 @@ import {
 import { CheckLine } from "./pull-request-checks.tsx";
 import { PullRequestCommits } from "./pull-request-commits.tsx";
 import { PersonAvatar } from "./pull-request-conversation-person.tsx";
-import { PullRequestFiles } from "./pull-request-files.tsx";
 import {
   PullRequestPartError,
   PullRequestPartPending,
@@ -361,7 +366,7 @@ function UnresolvedThreads({
         </View>
       </AccentScope>
       <Text className="min-w-0 flex-1 text-sm">
-        {`${String(unresolved)} unresolved ${unresolved === 1 ? "thread" : "threads"}`}
+        {pluralOf(unresolved, "unresolved thread")}
       </Text>
     </View>
   );
@@ -1120,18 +1125,12 @@ function Sidebar({ detail, candidates, onEdited }: CandidatesProps): ReactNode {
   );
 }
 
-export type PullRequestTab =
-  | "checks"
-  | "commits"
-  | "files"
-  | "review"
-  | "timeline";
+export type PullRequestTab = "checks" | "commits" | "review" | "timeline";
 
 export const isPullRequestTab = (value: unknown): value is PullRequestTab =>
   value === "checks" ||
   value === "commits" ||
   value === "timeline" ||
-  value === "files" ||
   value === "review";
 
 /** The timeline opens on the description, as GitHub's first comment. */
@@ -1174,7 +1173,7 @@ export interface PullRequestPanelProps extends CandidatesProps {
 /**
  * One pull request as GitHub reports it now, laid out as GitHub's own page —
  * the header, then Timeline (the description, a status box and a narrow
- * sidebar), Checks and Files changed — with the edits the operator makes
+ * sidebar), Commits, Checks and Review — with the edits the operator makes
  * before asking for a review. Every edit is GitHub's to refuse, and the panel
  * re-reads the pull request after it, so nothing on screen is the request
  * echoed back.
@@ -1194,6 +1193,13 @@ export function PullRequestPanel({
     pullRequest,
     "checks",
   ).value;
+  const viewerIsAuthor = isViewerAuthor(detail);
+  const reviewTab = (
+    <Tab
+      value="review"
+      label={`Review (${pluralOf(pullRequest.changedFiles, "file")})`}
+    />
+  );
   return (
     <View className="gap-l">
       {[...new Set([...errors, ...(candidates?.errors ?? [])])].map((error) => (
@@ -1214,6 +1220,7 @@ export function PullRequestPanel({
             if (isPullRequestTab(next)) onTabChange(next);
           }}
         >
+          {viewerIsAuthor ? null : reviewTab}
           <Tab value="timeline" label="Conversation" />
           <Tab
             value="commits"
@@ -1227,11 +1234,7 @@ export function PullRequestPanel({
                 : `Checks (${String(checks.checksTotal)})`
             }
           />
-          <Tab
-            value="files"
-            label={`Files changed (${String(pullRequest.changedFiles)})`}
-          />
-          <Tab value="review" label="Review" />
+          {viewerIsAuthor ? reviewTab : null}
         </Tabs>
         <PullRequestActions detail={detail} onEdited={onEdited} />
       </View>
@@ -1247,9 +1250,6 @@ export function PullRequestPanel({
           );
         }
         if (tab === "checks") return <ChecksTab pullRequest={pullRequest} />;
-        if (tab === "files") {
-          return <PullRequestFiles detail={detail} onEdited={onEdited} />;
-        }
         if (tab === "review") {
           return <PullRequestReview detail={detail} onEdited={onEdited} />;
         }

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

@@ -1,4 +1,4 @@
-import { pullRequestReactionContents } from "@reviewflow/sdk";
+import { pluralOf, pullRequestReactionContents } from "@reviewflow/sdk";
 import type {
   PullRequestEdit,
   PullRequestReactable,
@@ -58,7 +58,7 @@ function ReactionButton({
   toggle,
 }: ReactionButtonProps): ReactNode {
   const { content, count, viewerHasReacted } = reaction;
-  const people = count === 1 ? "1 person" : `${String(count)} people`;
+  const people = pluralOf(count, "person", "people");
   return (
     <ActionButton
       text={`${reactionEmoji[content]} ${String(count)}`}

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

@@ -3,6 +3,7 @@ import type {
   PullRequestRevision,
   PullRequestTextLine,
 } from "@reviewflow/sdk";
+import { pluralOf } from "@reviewflow/sdk";
 import {
   Box,
   Button,
@@ -86,7 +87,7 @@ function ChangeRunText({ run }: { run: ChangeRun }): ReactNode {
   if (run.kind === "folded") {
     return (
       <Text className="py-xxs text-xs text-muted">
-        {`⋯ ${String(run.count)} unchanged ${run.count === 1 ? "line" : "lines"}`}
+        {`⋯ ${pluralOf(run.count, "unchanged line")}`}
       </Text>
     );
   }

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

@@ -253,11 +253,17 @@ export interface PullRequestScreenProps {
 
 /**
  * One pull request laid out as GitHub's page: the header, then the tabs
- * Conversation, Commits, Checks and Files changed, with the edits a reviewer
+ * Conversation, Commits, Checks and Review, with the edits a reviewer
  * or an author makes. Reads and writes through the
  * {@link PullRequestDataSource} of the nearest
  * `PullRequestDataSourceProvider`, which the app provides. Mount it with a
  * `key` of the pull request, so a draft review never leaks to the next one.
+ *
+ * It fills its parent, and the app chooses how wide that is: its text stays in
+ * a 1200px column, and only a split diff beside its file list widens to the
+ * whole screen. The screen is the CSS container that diff is sized against
+ * (`100cqw`): the window (`100vw`) overflows an app that lays the page beside a
+ * sidebar.
  */
 export function PullRequestScreen({
   ownerRepo,
@@ -280,18 +286,20 @@ export function PullRequestScreen({
         fileOrder={diffFileOrder}
         onFileOrderChange={onDiffFileOrderChange}
       >
-        <View className="mx-auto w-full max-w-[1200px] gap-m px-l pt-l pb-xl">
-          <PullRequestDraftsProvider
-            store={draftStore}
-            pullRequest={{ ownerRepo, number }}
-          >
-            <PullRequestBody
-              key={`${ownerRepo}#${String(number)}`}
-              ownerRepo={ownerRepo}
-              number={number}
-              {...body}
-            />
-          </PullRequestDraftsProvider>
+        <View className="w-full px-l pt-l pb-xl web:@container">
+          <View className="mx-auto w-full max-w-[1200px] gap-m">
+            <PullRequestDraftsProvider
+              store={draftStore}
+              pullRequest={{ ownerRepo, number }}
+            >
+              <PullRequestBody
+                key={`${ownerRepo}#${String(number)}`}
+                ownerRepo={ownerRepo}
+                number={number}
+                {...body}
+              />
+            </PullRequestDraftsProvider>
+          </View>
         </View>
       </DiffSettingsProvider>
     </PullRequestSlotsProvider>

package/src/components/pull-request-suggestion-actions.tsx

@@ -1,13 +1,14 @@
-import {
-  parseSuggestions,
-  suggestionCommitRefusal,
-  suggestionRangesOverlap,
-} from "@reviewflow/sdk";
 import type {
   PullRequestComment,
   PullRequestSuggestionRef,
   PullRequestThread,
 } from "@reviewflow/sdk";
+import {
+  parseSuggestions,
+  pluralOf,
+  suggestionCommitRefusal,
+  suggestionRangesOverlap,
+} from "@reviewflow/sdk";
 import {
   Button,
   FormItem,
@@ -161,7 +162,7 @@ export function SuggestionActions({
         text={
           batch.batch.length === 0
             ? "Commit suggestion"
-            : `Commit ${String(batch.batch.length)} suggestion${batch.batch.length === 1 ? "" : "s"}`
+            : `Commit ${pluralOf(batch.batch.length, "suggestion")}`
         }
         disabledReason={
           toCommit.length === 0 ? (refusal ?? undefined) : undefined

package/src/components/repository-attachment-banner.tsx

@@ -13,7 +13,7 @@ interface RepositoryAttachmentBannerProps {
 /**
  * Says up front, on every tab, that the diff of this repository cannot be read
  * because no local checkout is attached to it, rather than leaving that to be
- * found in Files changed. An entry that exists but fails its check shows why.
+ * found in the Review tab. An entry that exists but fails its check shows why.
  * Nothing when the checkout is attached.
  */
 export function RepositoryAttachmentBanner({