@reviewflow/ui 6.25.0 → 6.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reviewflow/ui",
-  "version": "6.25.0",
+  "version": "6.27.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",
@@ -42,6 +42,10 @@
       "types": "./src/index.ts",
       "default": "./src/index.ts"
     },
+    "./diff-viewer": {
+      "types": "./src/components/diff-viewer.tsx",
+      "default": "./src/components/diff-viewer.tsx"
+    },
     "./diff-worker-pool": {
       "types": "./src/components/branch-diff/diff-worker-pool.tsx",
       "browser": "./src/components/branch-diff/diff-worker-pool.web.tsx",
@@ -73,7 +77,7 @@
     "@lezer/markdown": "1.7.2",
     "@pierre/diffs": "1.5.2",
     "@pierre/trees": "1.0.0-beta.6",
-    "@reviewflow/sdk": "6.25.0",
+    "@reviewflow/sdk": "6.27.0",
     "@tanstack/markdown": "0.0.13",
     "alouette-icons": "12.0.0",
     "gemoji": "8.1.0",

package/src/board/pull-request-row.tsx

@@ -31,7 +31,49 @@ const stopRowPress = (event: GestureResponderEvent): void => {
   event.stopPropagation();
 };
 
-const metaSeparator = <Text className="text-xs text-muted">·</Text>;
+export function PullRequestMetaSeparator(): ReactNode {
+  return <Text className="text-xs text-muted">·</Text>;
+}
+
+const metaSeparator = <PullRequestMetaSeparator />;
+
+export interface PullRequestRowFrameProps {
+  ariaLabel: string;
+  onPress: () => void;
+  /** the meta line's items, joined with `PullRequestMetaSeparator` */
+  meta: ReactNode;
+  title: string;
+  /** beside the title, e.g. who it waits on */
+  titleAside?: ReactNode;
+  /** under the title */
+  children?: ReactNode;
+}
+
+/**
+ * The layout every pull request row shares, whatever its source: a meta line,
+ * the title, then what the source adds.
+ */
+export function PullRequestRowFrame({
+  ariaLabel,
+  onPress,
+  meta,
+  title,
+  titleAside,
+  children,
+}: PullRequestRowFrameProps): ReactNode {
+  return (
+    <PressableListItem role="link" aria-label={ariaLabel} onPress={onPress}>
+      <View className="min-w-0 gap-xxs">
+        <View className="flex-row flex-wrap items-center gap-xs">{meta}</View>
+        <View className="flex-row flex-wrap items-baseline gap-xs">
+          <Text className="font-body-bold">{title}</Text>
+          {titleAside}
+        </View>
+        {children}
+      </View>
+    </PressableListItem>
+  );
+}
 
 const statusSeparator = <Text className="text-sm text-muted">·</Text>;
 
@@ -59,7 +101,7 @@ function MetaLine({ pr }: { pr: ReviewflowBoardPr }): ReactNode {
   const flowDate = reviewflowPrFlowDate(pr);
 
   return (
-    <View className="flex-row flex-wrap items-center gap-xs">
+    <>
       <Text className="font-mono text-xs text-muted">
         {`${pr.ownerRepo}#${String(pr.number)}`}
       </Text>
@@ -95,7 +137,7 @@ function MetaLine({ pr }: { pr: ReviewflowBoardPr }): ReactNode {
           <Text className="text-xs text-muted">{flowDate}</Text>
         </>
       )}
-    </View>
+    </>
   );
 }
 
@@ -161,24 +203,21 @@ export function PullRequestRow({
   const extra = renderRowExtra?.(row);
 
   return (
-    <PressableListItem
-      role="link"
-      aria-label={`Open ${pr.ownerRepo}#${String(pr.number)} ${pr.title}`}
+    <PullRequestRowFrame
+      ariaLabel={`Open ${pr.ownerRepo}#${String(pr.number)} ${pr.title}`}
+      meta={<MetaLine pr={pr} />}
+      title={pr.title}
+      titleAside={
+        owners === null ? null : (
+          <Text className="text-sm text-muted">{owners}</Text>
+        )
+      }
       onPress={() => {
         onOpenPullRequest({ ownerRepo: pr.ownerRepo, number: pr.number });
       }}
     >
-      <View className="min-w-0 gap-xxs">
-        <MetaLine pr={pr} />
-        <View className="flex-row flex-wrap items-baseline gap-xs">
-          <Text className="font-body-bold">{pr.title}</Text>
-          {owners === null ? null : (
-            <Text className="text-sm text-muted">{owners}</Text>
-          )}
-        </View>
-        <StatusLine pr={pr} context={context} />
-        {extra === undefined || extra === null ? null : extra}
-      </View>
-    </PressableListItem>
+      <StatusLine pr={pr} context={context} />
+      {extra === undefined || extra === null ? null : extra}
+    </PullRequestRowFrame>
   );
 }

package/src/components/branch-diff/diff-change-mark.tsx

@@ -0,0 +1,86 @@
+import type { FileDiffMetadata } from "@pierre/diffs";
+import type { Accent, SVGIconElement } from "alouette";
+import { AccentScope, Icon, Tooltip, View } from "alouette";
+import { ArrowSquareRightRegularIcon } from "alouette-icons/phosphor-icons/ArrowSquareRight";
+import { MinusSquareRegularIcon } from "alouette-icons/phosphor-icons/MinusSquare";
+import { PencilSimpleLineRegularIcon } from "alouette-icons/phosphor-icons/PencilSimpleLine";
+import { PlusSquareRegularIcon } from "alouette-icons/phosphor-icons/PlusSquare";
+import type { ReactNode } from "react";
+
+/**
+ * For a pierre file's `unsafeCSS`, with `DiffChangeMark` in its header prefix:
+ * pierre draws its change icon inside the file's shadow root, where nothing of
+ * ours can give it a tooltip.
+ */
+export const hidePierreChangeIcon = "[data-change-icon] { display: none; }";
+
+interface ChangeMarkProps {
+  label: string;
+  accent: Accent;
+  icon: SVGIconElement;
+}
+
+function ChangeMark({ label, accent, icon }: ChangeMarkProps): ReactNode {
+  return (
+    <Tooltip
+      content={label}
+      render={(triggerProps) => (
+        <View role="img" aria-label={label} {...triggerProps}>
+          <AccentScope accent={accent}>
+            <Icon icon={icon} size={16} className="text-accent" />
+          </AccentScope>
+        </View>
+      )}
+    />
+  );
+}
+
+interface DiffChangeMarkProps {
+  type: FileDiffMetadata["type"];
+}
+
+export function DiffChangeMark({ type }: DiffChangeMarkProps): ReactNode {
+  if (type === "new") {
+    return (
+      <ChangeMark
+        label="Added"
+        accent="success"
+        icon={<PlusSquareRegularIcon />}
+      />
+    );
+  }
+  if (type === "deleted") {
+    return (
+      <ChangeMark
+        label="Deleted"
+        accent="danger"
+        icon={<MinusSquareRegularIcon />}
+      />
+    );
+  }
+  if (type === "rename-pure") {
+    return (
+      <ChangeMark
+        label="Renamed, content unchanged"
+        accent="warning"
+        icon={<ArrowSquareRightRegularIcon />}
+      />
+    );
+  }
+  if (type === "rename-changed") {
+    return (
+      <ChangeMark
+        label="Renamed and modified"
+        accent="warning"
+        icon={<ArrowSquareRightRegularIcon />}
+      />
+    );
+  }
+  return (
+    <ChangeMark
+      label="Modified"
+      accent="info"
+      icon={<PencilSimpleLineRegularIcon />}
+    />
+  );
+}

package/src/components/branch-diff/use-collapsed-files.ts

@@ -18,6 +18,9 @@ interface CollapsedState {
  * not the file list: the viewer parses the patch and is loaded lazily. Stored
  * as a default plus exceptions, so either "all" needs no list of files and a
  * file new to a refreshed diff follows the last "all" pressed.
+ *
+ * @deprecated `DiffViewer` and the pull request diff take a
+ * `PullRequestCollapse`: use `usePullRequestCollapse`.
  */
 export const useCollapsedFiles = (): CollapsedFiles => {
   const [state, setState] = useState<CollapsedState>({

package/src/components/checkout-sync-buttons.tsx

@@ -0,0 +1,76 @@
+import type { CheckoutStatus } from "@reviewflow/sdk";
+import { pullRefusal, pushRefusal } from "@reviewflow/sdk";
+import { ActionButton } from "alouette";
+import { CloudArrowDownRegularIcon } from "alouette-icons/phosphor-icons/CloudArrowDown";
+import { CloudArrowUpRegularIcon } from "alouette-icons/phosphor-icons/CloudArrowUp";
+import type { ReactNode } from "react";
+import { errorToMessage } from "../services/errorToMessage.ts";
+
+export interface CheckoutSyncButtonsProps {
+  status: CheckoutStatus;
+  hasOrigin: boolean;
+  /** what the user calls this checkout, so each label names one of several */
+  name: string;
+  onPull: () => Promise<void>;
+  onPush: () => Promise<void>;
+  /** after every press, succeeded or not: git state moved either way, or may have */
+  onDone: () => void;
+}
+
+/**
+ * Pull and Push appear only when `pullRefusal` / `pushRefusal` would not refuse
+ * them — the server asks the same question before running git, so a button is
+ * never offered for a press the server turns down on its own terms. A failure
+ * is git's reason, shown under the button.
+ */
+export function CheckoutSyncButtons({
+  status,
+  hasOrigin,
+  name,
+  onPull,
+  onPush,
+  onDone,
+}: CheckoutSyncButtonsProps): ReactNode {
+  const run = async (action: () => Promise<void>): Promise<void> => {
+    try {
+      await action();
+    } finally {
+      onDone();
+    }
+  };
+
+  return (
+    <>
+      {pullRefusal(status) === null ? (
+        <ActionButton
+          text={`Pull ${String(status.behind)}`}
+          icon={<CloudArrowDownRegularIcon />}
+          accent="brand"
+          variant="tonal"
+          size="sm"
+          aria-label={`Pull ${name}`}
+          errorMessageVariant="flat"
+          errorToMessage={errorToMessage}
+          onPress={() => run(onPull)}
+        />
+      ) : null}
+      {pushRefusal(status, hasOrigin) === null ? (
+        <ActionButton
+          text={
+            status.upstream === null
+              ? "Publish"
+              : `Push ${String(status.ahead)}`
+          }
+          icon={<CloudArrowUpRegularIcon />}
+          accent="brand"
+          variant="tonal"
+          size="sm"
+          aria-label={`Push ${name}`}
+          errorMessageVariant="flat"
+          errorToMessage={errorToMessage}
+          onPress={() => run(onPush)}
+        />
+      ) : null}
+    </>
+  );
+}