@reviewflow/ui 6.23.0 → 6.25.0

package/src/components/pull-request-diff-jump.ts

@@ -1,5 +1,12 @@
 import { animationDurationsMs } from "alouette";
-import { createContext, use, useSyncExternalStore } from "react";
+import type { RefObject } from "react";
+import {
+  createContext,
+  use,
+  useEffect,
+  useState,
+  useSyncExternalStore,
+} from "react";
 
 /** How long a file gone to stays outlined before the outline fades. */
 const highlightHoldMs = 1500;
@@ -20,6 +27,8 @@ export interface DiffFileElements {
   /** returns the unregistration */
   register: (path: string, element: HTMLElement) => () => void;
   elementOf: (path: string) => HTMLElement | undefined;
+  /** the file whose element spans the viewport's `y`; null in a gap or past the files */
+  fileAt: (y: number) => string | null;
   /** outlines the file's header in `color`, replacing any outline still showing */
   highlight: (path: string, color: string) => void;
   subscribe: (listener: () => void) => () => void;
@@ -43,6 +52,13 @@ export const createDiffFileElements = (): DiffFileElements => {
       };
     },
     elementOf: (path) => elements.get(path),
+    fileAt: (y) => {
+      for (const [path, element] of elements) {
+        const { top, bottom } = element.getBoundingClientRect();
+        if (top <= y && y < bottom) return path;
+      }
+      return null;
+    },
     highlight: (path, color) => {
       for (const timer of timers) clearTimeout(timer);
       setHighlighted({ path, phase: "shown", color });
@@ -73,6 +89,48 @@ export const DiffFileElementsContext = createContext<DiffFileElements | null>(
 export const useDiffFileElements = (): DiffFileElements | null =>
   use(DiffFileElementsContext);
 
+/**
+ * The file read at the moment: the one under the bottom edge of `bar`, the
+ * sticky toolbar the diff scrolls beneath. Measured once a frame while
+ * anything scrolls, on the web only; it keeps the last file found while the
+ * edge is over a gap between files, and is null until one is.
+ */
+export const useFileInView = (
+  fileElements: DiffFileElements,
+  bar: RefObject<unknown>,
+  enabled: boolean,
+): string | null => {
+  const [path, setPath] = useState<string | null>(null);
+  useEffect(() => {
+    if (!enabled || typeof document === "undefined") return undefined;
+    let frame: number | null = null;
+    const measure = (): void => {
+      frame = null;
+      const element = bar.current;
+      if (!(element instanceof HTMLElement)) return;
+      const found = fileElements.fileAt(
+        element.getBoundingClientRect().bottom + 1,
+      );
+      if (found !== null) setPath(found);
+    };
+    const schedule = (): void => {
+      frame ??= requestAnimationFrame(measure);
+    };
+    schedule();
+    document.addEventListener("scroll", schedule, {
+      capture: true,
+      passive: true,
+    });
+    window.addEventListener("resize", schedule);
+    return () => {
+      if (frame !== null) cancelAnimationFrame(frame);
+      document.removeEventListener("scroll", schedule, { capture: true });
+      window.removeEventListener("resize", schedule);
+    };
+  }, [fileElements, bar, enabled]);
+  return enabled ? path : null;
+};
+
 const noSubscription = (): (() => void) => () => {};
 
 /** Re-renders only the file whose highlight changes, not every file of the diff. */

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

@@ -0,0 +1,57 @@
+export interface OverviewTreeRow {
+  /** `workspaceIdOf` or `fileIdOf`: a workspace and a file may share a path */
+  id: string;
+  kind: "file" | "workspace";
+  /** 1 for a workspace, 2 for its files, 3 for a test below its subject */
+  level: 1 | 2 | 3;
+  parent: string | null;
+  /** a workspace's rows are listed; false for a file */
+  expanded: boolean;
+}
+
+export const workspaceIdOf = (name: string): string => `workspace:${name}`;
+export const fileIdOf = (path: string): string => `file:${path}`;
+
+export type OverviewTreeAction =
+  | { type: "focus"; id: string }
+  | { type: "press"; id: string }
+  | { type: "toggle"; id: string };
+
+/**
+ * What a key does on the focused row, as the WAI-ARIA tree pattern has it:
+ * up and down move a row, home and end to either end, right opens a closed
+ * workspace or enters an open one, left closes an open workspace or goes up to
+ * the parent, space presses the row. Enter is left to the pressable, which
+ * presses on it already. Null for any other key.
+ */
+export const overviewTreeActionOf = (
+  rows: readonly OverviewTreeRow[],
+  focusedId: string,
+  key: string,
+): OverviewTreeAction | null => {
+  const index = rows.findIndex(({ id }) => id === focusedId);
+  const row = rows[index];
+  if (row === undefined) return null;
+  const focus = (
+    target: OverviewTreeRow | undefined,
+  ): OverviewTreeAction | null =>
+    target === undefined ? null : { type: "focus", id: target.id };
+  if (key === "ArrowDown") return focus(rows[index + 1]);
+  if (key === "ArrowUp") return focus(rows[index - 1]);
+  if (key === "Home") return focus(rows[0]);
+  if (key === "End") return focus(rows.at(-1));
+  if (key === " ") return { type: "press", id: row.id };
+  if (key === "ArrowRight") {
+    if (row.kind === "file") return null;
+    if (!row.expanded) return { type: "toggle", id: row.id };
+    const child = rows[index + 1];
+    return child?.parent === row.id ? focus(child) : null;
+  }
+  if (key === "ArrowLeft") {
+    if (row.kind === "workspace" && row.expanded) {
+      return { type: "toggle", id: row.id };
+    }
+    return row.parent === null ? null : { type: "focus", id: row.parent };
+  }
+  return null;
+};