@reviewflow/ui 6.23.0 → 6.25.0

package/src/components/pull-request-diff-tree-files.ts

@@ -0,0 +1,64 @@
+import type { PullRequestDiffResponse } from "@reviewflow/sdk";
+
+export type DiffTreeFileStatus = "added" | "deleted" | "modified" | "renamed";
+
+export interface DiffTreeFile {
+  path: string;
+  /** null for an omitted file, whose header the patch does not carry */
+  status: DiffTreeFileStatus | null;
+}
+
+const fileHeader = /^diff --git /mu;
+const samePathHeader = /^a\/(.+) b\/\1$/u;
+const renameTo = /^rename to (.+)$/mu;
+const newFile = /^new file mode /mu;
+const deletedFile = /^deleted file mode /mu;
+
+const statusOfBlock = (block: string): DiffTreeFileStatus => {
+  if (newFile.test(block)) return "added";
+  if (deletedFile.test(block)) return "deleted";
+  if (renameTo.test(block)) return "renamed";
+  return "modified";
+};
+
+const pathOfBlock = (block: string): string | undefined => {
+  const renamed = renameTo.exec(block)?.[1];
+  if (renamed !== undefined) return renamed;
+  const firstLine = block.slice(0, block.indexOf("\n"));
+  return samePathHeader.exec(firstLine)?.[1];
+};
+
+/** Read from the patch's git headers, keyed by the path after any rename. */
+export const fileStatusesOf = (
+  patch: string,
+): ReadonlyMap<string, DiffTreeFileStatus> =>
+  new Map(
+    patch
+      .split(fileHeader)
+      .slice(1)
+      .flatMap((block) => {
+        const path = pathOfBlock(block);
+        return path === undefined
+          ? []
+          : [[path, statusOfBlock(block)] as const];
+      }),
+  );
+
+/**
+ * Every file of the range: the patch's, with their status, then the omitted
+ * ones. A patch file whose header cannot be read counts as modified.
+ */
+export const diffTreeFilesOf = (
+  diff: Pick<PullRequestDiffResponse, "groups" | "omitted" | "patch">,
+): DiffTreeFile[] => {
+  const statuses = fileStatusesOf(diff.patch);
+  return [
+    ...diff.groups.flatMap(({ paths }) =>
+      paths.map((path) => ({
+        path,
+        status: statuses.get(path) ?? "modified",
+      })),
+    ),
+    ...diff.omitted.map(({ path }) => ({ path, status: null })),
+  ];
+};

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

@@ -0,0 +1,232 @@
+import { getResolvedOrResolveTheme } from "@pierre/diffs";
+import type {
+  FileTree as FileTreeModel,
+  FileTreeRowDecoration,
+  GitStatusEntry,
+} from "@pierre/trees";
+import { themeToTreeStyles } from "@pierre/trees";
+import { FileTree, useFileTree } from "@pierre/trees/react";
+import type { AccentOrNeutral } from "alouette";
+import { AccentScope, useCurrentMode } from "alouette";
+import type { CSSProperties, ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { DiffTheme } from "./branch-diff/diff-themes.ts";
+import { diffThemeNames } from "./branch-diff/diff-themes.ts";
+import type { DiffTreeFile } from "./pull-request-diff-tree-files.ts";
+
+export interface PullRequestDiffTreeProps {
+  files: DiffTreeFile[];
+  viewedPaths: readonly string[];
+  /** the diff's highlighting theme, whose git colors the statuses take */
+  theme: DiffTheme;
+  /** brings the file into view in the diff */
+  onFilePress: (path: string) => void;
+}
+
+interface DecorationData {
+  viewedPaths: ReadonlySet<string>;
+  omittedPaths: ReadonlySet<string>;
+}
+
+type CustomProperties = CSSProperties & Record<`--${string}`, string>;
+
+/**
+ * Custom properties cross the shadow root, and a `var()` in one resolves where
+ * it is declared, inside alouette's theme: the tree takes the screen's tokens.
+ * A status takes the diff theme's git color, as the diff's file headers do, and
+ * the color of its accent when the theme has none (`CapturedAccent`).
+ */
+const hostStyle = (
+  mode: "dark" | "light",
+  gitColors: CustomProperties,
+): CustomProperties => ({
+  ...gitColors,
+  height: "100%",
+  colorScheme: mode,
+  "--trees-bg-override": "transparent",
+  "--trees-fg-override": "var(--color-sharp)",
+  "--trees-fg-muted-override": "var(--color-muted)",
+  "--trees-bg-muted-override": "var(--color-interactive-soft-hover)",
+  "--trees-selected-bg-override": "var(--color-interactive-soft-active)",
+  "--trees-selected-fg-override": "var(--color-sharp)",
+  "--trees-border-color-override": "var(--color-border-muted)",
+  "--trees-indent-guide-bg-override": "var(--color-border-muted)",
+  "--trees-input-bg-override": "var(--color-lowered)",
+  "--trees-search-bg-override": "var(--color-lowered)",
+  "--trees-search-fg-override": "var(--color-sharp)",
+  "--trees-accent-override": "var(--tree-brand)",
+  "--trees-focus-ring-color-override": "var(--tree-brand)",
+  "--trees-status-added-override":
+    "var(--trees-theme-git-added-fg, var(--tree-success))",
+  "--trees-status-untracked-override":
+    "var(--trees-theme-git-untracked-fg, var(--tree-success))",
+  "--trees-status-modified-override":
+    "var(--trees-theme-git-modified-fg, var(--tree-info))",
+  "--trees-status-renamed-override":
+    "var(--trees-theme-git-renamed-fg, var(--tree-warning))",
+  "--trees-status-deleted-override":
+    "var(--trees-theme-git-deleted-fg, var(--tree-danger))",
+  "--trees-font-family-override": "var(--font-body)",
+  "--trees-font-size-override": "var(--text-sm, 13px)",
+  "--trees-padding-inline-override": "0px",
+});
+
+/** Holds `accent`'s color as `--tree-<accent>` for the subtree, whatever accent it is under. */
+function CapturedAccent({
+  accent,
+  children,
+}: {
+  accent: Exclude<AccentOrNeutral, "neutral">;
+  children: ReactNode;
+}): ReactNode {
+  const style: CustomProperties = {
+    display: "contents",
+    [`--tree-${accent}`]: "var(--color-accent)",
+  };
+  return (
+    <AccentScope accent={accent}>
+      <div style={style}>{children}</div>
+    </AccentScope>
+  );
+}
+
+const gitColorsOf = (styles: Record<string, string>): CustomProperties =>
+  Object.fromEntries(
+    Object.entries(styles).filter(([key]) =>
+      key.startsWith("--trees-theme-git-"),
+    ),
+  );
+
+interface ThemeGitColors {
+  themeName: string;
+  colors: CustomProperties;
+}
+
+/** Empty until the theme resolves, or when it cannot: the accents stand in. */
+const useThemeGitColors = (themeName: string): CustomProperties => {
+  const [resolved, setResolved] = useState<ThemeGitColors | null>(null);
+  useEffect(() => {
+    let current = true;
+    Promise.resolve(getResolvedOrResolveTheme(themeName)).then(
+      (theme) => {
+        if (current) {
+          setResolved({
+            themeName,
+            colors: gitColorsOf(themeToTreeStyles(theme)),
+          });
+        }
+      },
+      () => {
+        if (current) setResolved({ themeName, colors: {} });
+      },
+    );
+    return () => {
+      current = false;
+    };
+  }, [themeName]);
+  return resolved?.themeName === themeName ? resolved.colors : {};
+};
+
+const gitStatusOf = (files: readonly DiffTreeFile[]): GitStatusEntry[] =>
+  files.flatMap(({ path, status }) =>
+    status === null ? [] : [{ path, status }],
+  );
+
+const decorationOf = (
+  path: string,
+  { viewedPaths, omittedPaths }: DecorationData,
+): FileTreeRowDecoration | null => {
+  if (omittedPaths.has(path)) {
+    return { text: "left out", title: "Not in the diff: listed above it" };
+  }
+  if (viewedPaths.has(path)) return { text: "viewed", title: "Marked viewed" };
+  return null;
+};
+
+/**
+ * The range's files by folder, in `@pierre/trees`: searchable, virtualized,
+ * each file's git status and viewed mark on its row. Web only (DOM in a shadow
+ * root), loaded lazily as the diff viewer is.
+ *
+ * The model is created once and fed through its methods. Selecting a file
+ * scrolls the diff to it and is undone at once, so pressing the same file
+ * again scrolls again. The row decorations have no setter: they read the
+ * latest data from a ref, and resetting the git status repaints them.
+ */
+function PullRequestDiffTree({
+  files,
+  viewedPaths: viewedList,
+  theme,
+  onFilePress,
+}: PullRequestDiffTreeProps): ReactNode {
+  const mode = useCurrentMode();
+  const gitColors = useThemeGitColors(diffThemeNames(theme)[mode]);
+  const paths = files.map(({ path }) => path);
+  const pathsKey = paths.join("\n");
+  const repaintKey = [
+    ...files.map(({ path, status }) => `${status ?? "omitted"} ${path}`),
+    ...viewedList,
+  ].join("\n");
+  const viewedPaths = new Set(viewedList);
+  const omittedPaths = new Set(
+    files.filter(({ status }) => status === null).map(({ path }) => path),
+  );
+  const latest = useRef({ files, onFilePress, viewedPaths, omittedPaths });
+  const filePaths = useRef(new Set(paths));
+  const modelRef = useRef<FileTreeModel | null>(null);
+  const appliedPathsKey = useRef(pathsKey);
+
+  const { model } = useFileTree({
+    paths,
+    flattenEmptyDirectories: true,
+    initialExpansion: "open",
+    density: "compact",
+    icons: { set: "standard", colored: false },
+    search: true,
+    fileTreeSearchMode: "hide-non-matches",
+    gitStatus: gitStatusOf(files),
+    renderRowDecoration: ({ item }) =>
+      item.kind === "file" ? decorationOf(item.path, latest.current) : null,
+    onSelectionChange: (selected) => {
+      const path = selected.at(-1);
+      if (path === undefined || !filePaths.current.has(path)) return;
+      latest.current.onFilePress(path);
+      queueMicrotask(() => {
+        modelRef.current?.getItem(path)?.deselect();
+      });
+    },
+  });
+
+  useEffect(() => {
+    modelRef.current = model;
+    latest.current = { files, onFilePress, viewedPaths, omittedPaths };
+    filePaths.current = new Set(paths);
+  });
+
+  useEffect(() => {
+    const current = latest.current.files;
+    if (appliedPathsKey.current !== pathsKey) {
+      appliedPathsKey.current = pathsKey;
+      model.resetPaths(current.map(({ path }) => path));
+    }
+    model.setGitStatus(gitStatusOf(current));
+  }, [model, pathsKey, repaintKey]);
+
+  return (
+    <CapturedAccent accent="brand">
+      <CapturedAccent accent="success">
+        <CapturedAccent accent="info">
+          <CapturedAccent accent="warning">
+            <CapturedAccent accent="danger">
+              <AccentScope accent="neutral">
+                <FileTree model={model} style={hostStyle(mode, gitColors)} />
+              </AccentScope>
+            </CapturedAccent>
+          </CapturedAccent>
+        </CapturedAccent>
+      </CapturedAccent>
+    </CapturedAccent>
+  );
+}
+
+export default PullRequestDiffTree;

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

@@ -7,10 +7,11 @@ import type {
 import {
   AccentScope,
   Code,
-  IconButton,
   IndeterminateCircularProgress,
   IndeterminateLinearProgress,
   InfoMessage,
+  Tab,
+  Tabs,
   Text,
   View,
   WarningMessage,
@@ -31,6 +32,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { Platform } from "react-native";
 import type { PullRequestDiffRefusal } from "../dataSource.ts";
 import { usePullRequestReviewDraft } from "../services/PullRequestReviewDraftProvider.tsx";
 import { usePullRequestSlots } from "../slots.tsx";
@@ -51,20 +53,30 @@ import type { ImpactsStatus } from "./pull-request-diff-impacts.ts";
 import {
   DiffFileElementsContext,
   createDiffFileElements,
+  useFileInView,
 } from "./pull-request-diff-jump.ts";
 import type { Composer } from "./pull-request-diff-lines.ts";
 import type { OverviewReadingOrderStatus } from "./pull-request-diff-overview.tsx";
 import { PullRequestDiffOverview } from "./pull-request-diff-overview.tsx";
+import { diffTreeFilesOf } from "./pull-request-diff-tree-files.ts";
 import type {
   DiffStyle,
   PullRequestDiffReview,
 } from "./pull-request-diff-viewer.tsx";
 import { cssVariableOf, scrollToTopOf } from "./scroll-parent.ts";
+import { TooltipIconButton } from "./tooltip-icon-button.tsx";
 
 const PullRequestDiffViewer = lazy(
   () => import("./pull-request-diff-viewer.tsx"),
 );
 
+const PullRequestDiffTree = lazy(() => import("./pull-request-diff-tree.tsx"));
+
+/** the tree renders DOM in a shadow root */
+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";
@@ -209,6 +221,7 @@ export function PullRequestDiffView({
   const [toolbarHeight, setToolbarHeight] = useState(0);
   const fileElements = useMemo(createDiffFileElements, []);
   const highlightProbe = useRef<ComponentRef<typeof View>>(null);
+  const toolbar = useRef<ComponentRef<typeof View>>(null);
   // a JS breakpoint rather than `xl:` classes: the sticky offset is the measured toolbar's
   const aside = useCurrentBreakpointNameFiltered(["base", "wide"]) === "wide";
   const whitespace = useWhitespaceToggle();
@@ -244,7 +257,8 @@ export function PullRequestDiffView({
     (shownCommitComposer !== null ||
       (review.commitOid === undefined && draft.composer !== null));
   const mode = useCurrentMode();
-  const { wordWrap, theme, fileOrder, setFileOrder } = useDiffSettings();
+  const { wordWrap, theme, fontFamily, fileOrder, setFileOrder } =
+    useDiffSettings();
   const missingCheckout = useMissingCheckoutReason(range);
   const readingOrder = usePullRequestReadingOrder(
     range,
@@ -267,16 +281,59 @@ export function PullRequestDiffView({
     if (readingOrder.error !== null) return "failed";
     return "none";
   })();
+  const [requestedAsideView, setRequestedAsideView] =
+    useState<AsideView | null>(null);
+  const asideView = ((): AsideView => {
+    if (!diffTreeAvailable) return "list";
+    if (requestedAsideView !== null) return requestedAsideView;
+    return ordered ? "list" : "tree";
+  })();
+  const listTab = (
+    <Tab
+      value="list"
+      label={readingOrder.available ? "Reading order" : "Workspaces"}
+    />
+  );
+  const treeFiles = useMemo(
+    () => (shownDiff === null ? [] : diffTreeFilesOf(shownDiff)),
+    [shownDiff],
+  );
+  const statuses = useMemo(
+    () =>
+      new Map(
+        treeFiles.flatMap(({ path, status }) =>
+          status === null ? [] : [[path, status] as const],
+        ),
+      ),
+    [treeFiles],
+  );
+  const viewedPaths = (review?.files ?? [])
+    .filter(({ viewed }) => viewed === "viewed")
+    .map(({ path }) => path);
+  const fileInView = useFileInView(
+    fileElements,
+    toolbar,
+    aside && asideView === "list",
+  );
+
+  const goToFile = (path: string): void => {
+    const element = fileElements.elementOf(path);
+    if (element === undefined) return;
+    scrollToTopOf(element, toolbarHeight);
+    const color = cssVariableOf(highlightProbe.current, "--color-enabled");
+    if (color !== "") fileElements.highlight(path, color);
+  };
 
   return (
     <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"
       }
     >
       <View
+        ref={toolbar}
         className="-mx-l flex-row flex-wrap items-center justify-between gap-xs bg-screen px-l py-sm web:sticky web:top-0 web:z-10"
         onLayout={(event) => {
           setToolbarHeight(event.nativeEvent.layout.height);
@@ -296,7 +353,7 @@ export function PullRequestDiffView({
           {toolbarStart}
         </View>
         <View className="flex-row items-center gap-xs">
-          <IconButton
+          <TooltipIconButton
             icon={
               diffStyle === "split" ? (
                 <RowsRegularIcon />
@@ -313,7 +370,7 @@ export function PullRequestDiffView({
             }}
           />
           {readingOrder.available ? (
-            <IconButton
+            <TooltipIconButton
               icon={<TreeStructureRegularIcon />}
               size="sm"
               accent={ordered ? "brand" : "neutral"}
@@ -325,6 +382,7 @@ export function PullRequestDiffView({
               }
               onPress={() => {
                 setFileOrder(ordered ? "packages" : "reading");
+                setRequestedAsideView(null);
               }}
             />
           ) : null}
@@ -335,13 +393,13 @@ export function PullRequestDiffView({
             }
             onToggle={whitespace.toggle}
           />
-          <IconButton
+          <TooltipIconButton
             icon={<ArrowsOutLineVerticalRegularIcon />}
             size="sm"
             aria-label="Open every file"
             onPress={collapse.expandAll}
           />
-          <IconButton
+          <TooltipIconButton
             icon={<ArrowsInLineVerticalRegularIcon />}
             size="sm"
             aria-label="Close every file"
@@ -369,31 +427,56 @@ export function PullRequestDiffView({
               <View
                 className={
                   aside
-                    ? "w-[280px] shrink-0 web:sticky web:max-h-[calc(100vh-8rem)] web:overflow-y-auto"
+                    ? "w-[280px] shrink-0 gap-sm web:sticky web:max-h-[calc(100vh-8rem)] web:overflow-y-auto"
                     : ""
                 }
                 style={aside ? { top: toolbarHeight } : undefined}
               >
-                <PullRequestDiffOverview
-                  groups={shownDiff.groups}
-                  omitted={shownDiff.omitted}
-                  readingOrder={readingOrder.value}
-                  readingOrderStatus={overviewStatus}
-                  impacts={impacts.value}
-                  impactsStatus={impactsStatus}
-                  displayOrder={ordered ? readingOrder.value : null}
-                  aside={aside}
-                  onFilePress={(path) => {
-                    const element = fileElements.elementOf(path);
-                    if (element === undefined) return;
-                    scrollToTopOf(element, toolbarHeight);
-                    const color = cssVariableOf(
-                      highlightProbe.current,
-                      "--color-enabled",
-                    );
-                    if (color !== "") fileElements.highlight(path, color);
-                  }}
-                />
+                {aside && diffTreeAvailable ? (
+                  <Tabs
+                    aria-label="Files listed"
+                    value={asideView}
+                    onValueChange={(value) => {
+                      setRequestedAsideView(value as AsideView);
+                    }}
+                  >
+                    {ordered ? listTab : null}
+                    <Tab value="tree" label="Tree" />
+                    {ordered ? null : listTab}
+                  </Tabs>
+                ) : null}
+                {aside && asideView === "tree" ? (
+                  // a height of its own: the tree virtualizes, and grows to every row without one
+                  <View className="web:h-[calc(100vh-12rem)]">
+                    <Suspense fallback={<DiffLoading />}>
+                      <PullRequestDiffTree
+                        files={treeFiles}
+                        viewedPaths={viewedPaths}
+                        theme={theme}
+                        onFilePress={goToFile}
+                      />
+                    </Suspense>
+                  </View>
+                ) : (
+                  <PullRequestDiffOverview
+                    groups={shownDiff.groups}
+                    omitted={shownDiff.omitted}
+                    readingOrder={readingOrder.value}
+                    readingOrderStatus={overviewStatus}
+                    impacts={impacts.value}
+                    impactsStatus={impactsStatus}
+                    displayOrder={
+                      (aside && diffTreeAvailable) || ordered
+                        ? readingOrder.value
+                        : null
+                    }
+                    statuses={statuses}
+                    viewedPaths={viewedPaths}
+                    currentPath={fileInView}
+                    aside={aside}
+                    onFilePress={goToFile}
+                  />
+                )}
                 {/* the file header is pierre's shadow DOM, which no accent
                     class reaches: the color is read here and handed to it */}
                 <AccentScope accent="info">
@@ -418,6 +501,7 @@ export function PullRequestDiffView({
                         diffStyle={diffStyle}
                         theme={theme}
                         themeType={mode}
+                        fontFamily={fontFamily}
                         wordWrap={wordWrap}
                         stickyTop={toolbarHeight}
                         collapse={collapse}