@cueloop/client 0.1.0-alpha.91 → 0.1.0-alpha.93

package/src/components/DiffContentView.tsx

@@ -8,15 +8,20 @@
  * so a drag can hit-test any row, unified or side by side.
  */
 
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { createTextAttributes, type KeyEvent, type ScrollBoxRenderable } from "@opentui/core";
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  MacOSScrollAccel,
+  createTextAttributes,
+  type KeyEvent,
+  type ScrollBoxRenderable,
+} from "@opentui/core";
 import type { Annotation, Thread } from "@cueloop/schema";
 import { diffRowText, fileChangeCounts, type DiffRow, type Mark } from "../view-diff";
 import type { TextSpan } from "../thread-selection";
 import type { QuickAction } from "../config";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
-import { IconButton } from "./primitives/IconButton";
+import { useTooltip } from "./Tooltip";
 import { NERD } from "./primitives/icons";
 import { createIntralineResolver, type IntralineRun } from "../diff-intraline";
 import { highlightDiffRows, type SyntaxSpan } from "../diff-syntax";
@@ -39,9 +44,6 @@ const EMPTY_REJECTED: Set<number> = new Set();
 /** A rejected (curated-out) change row renders struck through and dimmed. */
 const REJECTED_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: true });
 
-/** A file band renders its name in bold between an equal rule above and below. */
-const FILE_HEADER_ATTRIBUTES = createTextAttributes({ bold: true });
-
 /** The split-view gutter before a code line: caret bar, four-digit line number, a space, the sign, a space. */
 const GUTTER_COLUMNS = 8;
 
@@ -67,7 +69,7 @@ export interface DiffFoldControls {
   canExpand: (file: string) => boolean;
   onToggleCollapse: (file: string) => void;
   onToggleExpand: (file: string) => void;
-  onCopyPath: (file: string) => void;
+  onCopyPath: (file: string) => boolean | Promise<boolean>;
 }
 
 export interface DiffContentViewProps {
@@ -104,6 +106,8 @@ export interface DiffContentViewProps {
   rejectedRows?: Set<number>;
   /** File-band chevron/copy/unfold actions; when absent the band shows no controls. */
   fold?: DiffFoldControls;
+  /** A single-file tab has no file-collapse chevron, but keeps copy and expand. */
+  showFileCollapse?: boolean;
   /** Per-file +/- counts from the base rows, so a collapsed file keeps its badge; else computed here. */
   fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
   /** Render old|new side by side instead of one inline column; the App gates this on zoom. */
@@ -163,21 +167,56 @@ function ExpandToggle({
   );
 }
 
-/**
- * A file band: chevron, bold name, and the added/removed counts between an equal rule above and
- * below. `fold` absent (story renders) drops the controls.
- */
+/** Copy feedback stays at the control the user clicked. */
+function CopyPathButton({
+  file,
+  onCopyPath,
+  marginRight,
+  tokens,
+}: {
+  file: string;
+  onCopyPath: (file: string) => boolean | Promise<boolean>;
+  marginRight: number;
+  tokens: Theme;
+}): React.ReactNode {
+  const { showTooltip, hideTooltip } = useTooltip();
+
+  return (
+    <box
+      onMouseUp={(event) => {
+        event.stopPropagation();
+        const { x, y } = event;
+
+        void Promise.resolve(onCopyPath(file)).then((copied) => {
+          showTooltip(copied ? "copied" : "copy failed", x, y);
+        });
+      }}
+      onMouseOver={(event) => {
+        showTooltip("Copy path", event.x, event.y);
+      }}
+      onMouseOut={hideTooltip}
+      style={{ flexShrink: 0, alignSelf: "center", marginRight }}
+    >
+      <text fg={tokens.textMuted}>{NERD.copy}</text>
+    </box>
+  );
+}
+
+/** A file band: clickable title and file actions between rules above and below. */
 function FileBand({
   row,
   stats,
   fold,
+  showFileCollapse,
   tokens,
 }: {
   row: DiffRow;
   stats: { additions: number; deletions: number } | undefined;
   fold: DiffFoldControls | undefined;
+  showFileCollapse: boolean;
   tokens: Theme;
 }): React.ReactNode {
+  const { showTooltip, hideTooltip } = useTooltip();
   const file = row.file;
   const collapsed = fold?.isCollapsed(file) ?? false;
   const expanded = fold?.isExpanded(file) ?? false;
@@ -187,32 +226,43 @@ function FileBand({
     <box style={{ borderStyle: "single", border: ["top", "bottom"], borderColor: tokens.border }}>
       <box style={{ flexDirection: "row", justifyContent: "space-between" }}>
         <box style={{ flexDirection: "row", flexShrink: 1, minWidth: 0 }}>
-          {fold ? (
-            <IconButton
-              glyph={collapsed ? NERD.chevronRight : NERD.chevronDown}
-              onPress={() => fold.onToggleCollapse(file)}
-              tip={collapsed ? "Expand file" : "Collapse file"}
-              marginRight={1}
-            />
-          ) : null}
-          <text
-            fg={tokens.text}
-            attributes={FILE_HEADER_ATTRIBUTES}
-            style={{ flexShrink: 1, minWidth: 0, wrapMode: "none" }}
+          <box
+            id={`file-title-${file}`}
+            onMouseUp={
+              fold && showFileCollapse
+                ? (event) => {
+                    event.stopPropagation();
+                    fold.onToggleCollapse(file);
+                    showTooltip(collapsed ? "collapse" : "uncollapse", event.x, event.y);
+                  }
+                : undefined
+            }
+            onMouseOver={
+              fold && showFileCollapse
+                ? (event) => showTooltip(collapsed ? "uncollapse" : "collapse", event.x, event.y)
+                : undefined
+            }
+            onMouseOut={fold && showFileCollapse ? hideTooltip : undefined}
+            style={{ flexShrink: 1, minWidth: 0 }}
           >
-            {diffRowText(row)}
-          </text>
+            <text
+              fg={collapsed ? tokens.textDim : tokens.textMuted}
+              style={{ flexShrink: 1, minWidth: 0, wrapMode: "none" }}
+            >
+              {diffRowText(row)}
+            </text>
+          </box>
         </box>
         <box style={{ flexDirection: "row", flexShrink: 0 }}>
           {stats ? (
             <FileCountsBadge stats={stats} tokens={tokens} marginRight={fold ? 1 : 0} />
           ) : null}
           {fold ? (
-            <IconButton
-              glyph={NERD.copy}
-              onPress={() => fold.onCopyPath(file)}
-              tip="Copy path"
+            <CopyPathButton
+              file={file}
+              onCopyPath={fold.onCopyPath}
               marginRight={canExpand ? 1 : 0}
+              tokens={tokens}
             />
           ) : null}
           {fold && canExpand ? (
@@ -497,6 +547,7 @@ export function DiffContentView({
   onExit,
   rejectedRows = EMPTY_REJECTED,
   fold,
+  showFileCollapse = true,
   fileStats: fileStatsProp,
   split = false,
   fileView = false,
@@ -504,6 +555,13 @@ export function DiffContentView({
 }: DiffContentViewProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+  const wheelAcceleration = useMemo(
+    () => new MacOSScrollAccel({ A: 0.4, tau: 4, maxMultiplier: 3 }),
+    [],
+  );
+  const verticalStepRef = useRef<
+    (from: number, to: number, direction: -1 | 1, targetY?: number) => boolean
+  >(() => false);
   const source: LineSource = {
     count: rows.length,
     textAt: (rowIndex) => diffRowText(rows[rowIndex]!),
@@ -545,6 +603,8 @@ export function DiffContentView({
     onComposingChange,
     onObserverBlocked,
     onCursorChange,
+    onVerticalStep: (from, to, direction, targetY) =>
+      verticalStepRef.current(from, to, direction, targetY),
     focusedAnnotationId,
     onFocusAnnotation,
     onAnnotate,
@@ -595,16 +655,80 @@ export function DiffContentView({
     overscan: OVERSCAN_LINES,
   });
 
-  // an opening card shifts the layout, so the row it belongs to is revealed again; a
-  // discussion focused from the rail is scrolled into view the same way
+  useEffect(() => {
+    const scrollbox = scrollRef.current;
+
+    if (scrollbox) scrollbox.verticalScrollBar.scrollStep = 1;
+  }, []);
+
+  verticalStepRef.current = (from, to, direction, targetY) => {
+    const scrollbox = scrollRef.current;
+
+    if (!scrollbox) return false;
+    let distance: number;
+
+    if (targetY !== undefined) {
+      const top = scrollbox.viewport.y;
+      const bottom = top + scrollbox.viewport.height - 1;
+
+      distance = direction === 1 ? targetY - bottom : top - targetY;
+    } else {
+      if (from === to) return false;
+      const item = layout.itemOfRow[to];
+      const target = item === undefined ? undefined : virtual.startOfIndex(item);
+
+      if (target === undefined) return false;
+      const top = scrollbox.scrollTop;
+      const bottom = top + scrollbox.viewport.height - 1;
+
+      distance = direction === 1 ? target - bottom : top - target;
+    }
+
+    if (distance <= 0) return false;
+    // Let the caret commit before scrolling the next visual row into view.
+    if (distance === 1) return false;
+    scrollbox.scrollBy(direction);
+
+    return distance > 1;
+  };
+
+  // An opening card or focused discussion reveals its owning item. Ordinary caret
+  // movement reveals the exact visual line, since an item's first wrapped line may
+  // sit above the viewport while the caret is already on screen.
   const revealItem = layout.itemOfRow[surface.revealBlockIndex];
 
   useEffect(() => {
-    if (revealItem !== undefined) {
-      virtual.scrollToIndex(revealItem, surface.compose ? "end" : "auto");
+    if (revealItem === undefined || (!surface.compose && !surface.focusedDiscussion)) return;
+    virtual.scrollToIndex(revealItem, surface.compose ? "end" : "auto");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [surface.revealBlockIndex, surface.compose, surface.focusedDiscussion]);
+
+  useLayoutEffect(() => {
+    if (revealItem === undefined || surface.compose || surface.focusedDiscussion) return;
+    const scrollbox = scrollRef.current;
+
+    if (!scrollbox) return;
+    const headY = surface.headVisualY();
+
+    if (headY !== undefined) {
+      const top = scrollbox.viewport.y;
+      const bottom = top + scrollbox.viewport.height - 1;
+
+      if (headY < top) scrollbox.scrollBy(-1);
+      else if (headY > bottom) scrollbox.scrollBy(1);
+
+      return;
     }
+    const start = virtual.startOfIndex(revealItem);
+
+    if (start === undefined) return;
+    const top = scrollbox.scrollTop;
+    const bottom = top + scrollbox.viewport.height - 1;
+
+    if (start < top) virtual.scrollToOffset(start);
+    else if (start > bottom) virtual.scrollToOffset(start - scrollbox.viewport.height + 1);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [surface.revealBlockIndex, surface.compose]);
+  }, [surface.revealBlockIndex, surface.head.char, surface.compose, surface.focusedDiscussion]);
 
   /**
    * The visual lines of one code row painted with gutter, colors, and marks; cards collected after.
@@ -638,9 +762,7 @@ export function DiffContentView({
     const isCaretRow = paintMarks && surface.head.blockIndex === rowIndex;
     // split view carries one number per side; the stacked view shows the old and new numbers together
     const splitLineNumber = row.kind === "del" ? row.oldLine : row.newLine;
-    const splitGutter = `${isCaretRow ? "▎" : " "}${String(splitLineNumber ?? "").padStart(4, " ")} ${rowSign(row)} `;
-    const barChar = isCaretRow ? "▎" : " ";
-    const barColor = isCaretRow ? tokens.accent : tokens.textDim;
+    const splitGutter = `${String(splitLineNumber ?? "").padStart(4, " ")} ${rowSign(row)} `;
     const oldNumber =
       row.kind === "add"
         ? " ".repeat(numberWidth)
@@ -649,34 +771,44 @@ export function DiffContentView({
       row.kind === "del"
         ? " ".repeat(numberWidth)
         : String(row.newLine ?? "").padStart(numberWidth);
-    const gutterFor = (lineIndex: number): React.ReactNode => {
+    const gutterFor = (lineIndex: number, isCaretLine: boolean): React.ReactNode => {
+      const bar = (
+        <span fg={isCaretLine ? tokens.accent : tokens.textDim}>{isCaretLine ? "▎" : " "}</span>
+      );
+
       if (fileView) {
         // a plain file has no old/new sides, so one line number reads like an ordinary file viewer
-        return lineIndex === 0 ? (
+        return (
           <>
-            <span fg={barColor}>{barChar}</span>
-            <span fg={tokens.textDim}>{String(row.newLine ?? "").padStart(numberWidth)}</span>
-            <span> </span>
+            {bar}
+            {lineIndex === 0 ? (
+              <span fg={tokens.textDim}>{String(row.newLine ?? "").padStart(numberWidth)} </span>
+            ) : (
+              " ".repeat(numberWidth + 1)
+            )}
           </>
-        ) : (
-          " ".repeat(numberWidth + 2)
         );
       }
       if (split) {
-        return lineIndex === 0 ? (
+        return (
           <>
-            <span fg={isCaretRow ? tokens.accent : tokens.textDim}>{splitGutter.slice(0, 6)}</span>
-            <span fg={rowBaseColor(row, tokens)}>{splitGutter.slice(6)}</span>
+            {bar}
+            {lineIndex === 0 ? (
+              <>
+                <span fg={tokens.textDim}>{splitGutter.slice(0, 5)}</span>
+                <span fg={rowBaseColor(row, tokens)}>{splitGutter.slice(5)}</span>
+              </>
+            ) : (
+              " ".repeat(GUTTER_COLUMNS - 1)
+            )}
           </>
-        ) : (
-          " ".repeat(GUTTER_COLUMNS)
         );
       }
       // stacked: caret bar, old new (each tinted red/green on its side), then the change sign;
       // the numbers sit on the row's soft band, only the changed code carries the brighter backdrop
       return lineIndex === 0 ? (
         <>
-          <span fg={barColor}>{barChar}</span>
+          {bar}
           <span fg={row.kind === "del" ? tokens.deletedForeground : tokens.textDim}>
             {oldNumber}
           </span>
@@ -689,7 +821,7 @@ export function DiffContentView({
         </>
       ) : (
         <>
-          <span fg={barColor}>{barChar}</span>
+          {bar}
           {" ".repeat(unifiedGutterColumns - 1)}
         </>
       );
@@ -700,6 +832,9 @@ export function DiffContentView({
     for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
       const line = lines[lineIndex]!;
       const isLastLine = lineIndex === lines.length - 1;
+      const lineRanges = lineMarkRanges(ranges, line);
+      const isCaretLine =
+        isCaretRow && (text.length === 0 || lineRanges.some((range) => range.caretOnly));
 
       lineNodes.push(
         <box
@@ -708,10 +843,10 @@ export function DiffContentView({
         >
           <text
             selectable={false}
-            fg={isCaretRow && lineIndex === 0 ? tokens.accent : tokens.textDim}
-            style={{ flexShrink: 0, wrapMode: "none" }}
+            fg={isCaretLine ? tokens.accent : tokens.textDim}
+            style={{ flexShrink: 0, height: 1, alignSelf: "flex-start", wrapMode: "none" }}
           >
-            {gutterFor(lineIndex)}
+            {gutterFor(lineIndex, isCaretLine)}
           </text>
           <text
             selectable={false}
@@ -722,7 +857,7 @@ export function DiffContentView({
             {codeLineSpans(
               text.slice(line.start, line.end),
               line.start,
-              lineMarkRanges(ranges, line),
+              lineRanges,
               fgByColumn,
               emphasisBgByColumn,
               rejected,
@@ -746,7 +881,13 @@ export function DiffContentView({
   const headerNode = (row: DiffRow, rowIndex: number): React.ReactNode =>
     row.kind === "file" ? (
       <box key={rowIndex} id={`diff-row-${rowIndex}`}>
-        <FileBand row={row} stats={fileStats.get(row.file)} fold={fold} tokens={tokens} />
+        <FileBand
+          row={row}
+          stats={fileStats.get(row.file)}
+          fold={fold}
+          showFileCollapse={showFileCollapse}
+          tokens={tokens}
+        />
       </box>
     ) : (
       <text
@@ -880,8 +1021,25 @@ export function DiffContentView({
           id="diff-scroll"
           ref={scrollRef}
           style={{ flexGrow: 1 }}
+          focusable={false}
           focused={false}
+          scrollAcceleration={wheelAcceleration}
           verticalScrollbarOptions={{ visible: false }}
+          onMouseScroll={(event) => {
+            const scrollbox = scrollRef.current;
+
+            if (!scrollbox || !event.scroll || event.modifiers.shift) return;
+            if (event.scroll.direction !== "up" && event.scroll.direction !== "down") return;
+            const before = scrollbox.scrollTop;
+            const followCaret = surface.prepareViewportScroll();
+
+            queueMicrotask(() => {
+              const delta = scrollbox.scrollTop - before;
+              const top = scrollbox.viewport.screenY;
+
+              followCaret(delta, top, top + scrollbox.viewport.height - 1);
+            });
+          }}
         >
           {materialized}
         </scrollbox>

package/src/components/EditorGrid.split.test.tsx

@@ -0,0 +1,118 @@
+import { expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import type { Renderable } from "@opentui/core";
+import { allowEventLoopUpdates } from "../test-support";
+import { EditorGrid } from "./EditorGrid";
+import { makeGroup, splitGroup, welcomeTab, type EditorNode } from "./editor-grid";
+import { WelcomePlayground } from "./WelcomePlayground";
+
+function findById(node: Renderable, id: string): Renderable | undefined {
+  if (node.id === id) return node;
+
+  for (const child of node.getChildren()) {
+    const found = findById(child, id);
+
+    if (found) return found;
+  }
+
+  return undefined;
+}
+
+function groupIds(node: EditorNode): string[] {
+  if (node.type === "group") return [node.id];
+
+  return node.children.flatMap(groupIds);
+}
+
+test("mixed splits keep each Welcome page inside its own tile", async () => {
+  const first = makeGroup([welcomeTab()]);
+  let tree: EditorNode = first;
+  let focusGroupId = first.id;
+
+  for (const direction of ["right", "up", "left", "down"] as const) {
+    const next = splitGroup(tree, focusGroupId, direction);
+
+    tree = next.tree;
+    focusGroupId = next.focusGroupId;
+  }
+
+  const setup = await testRender(
+    <EditorGrid
+      tree={tree}
+      focusedGroupId={focusGroupId}
+      onFocusGroup={() => {}}
+      onActivateTab={() => {}}
+      onCloseTab={() => {}}
+      onSplit={() => {}}
+      onZoom={() => {}}
+      zoomed={false}
+      renderTab={(_, focused) => <WelcomePlayground quickActions={[]} suspended={!focused} />}
+    />,
+    { width: 120, height: 48 },
+  );
+
+  allowEventLoopUpdates();
+  await setup.waitForVisualIdle();
+  expect(setup.renderer.listenerCount("frame")).toBeLessThan(10);
+  expect(setup.renderer.listenerCount("resize")).toBeLessThan(10);
+  expect(setup.renderer.keyInput.listenerCount("keypress")).toBeLessThan(10);
+
+  for (const id of groupIds(tree)) {
+    const group = findById(setup.renderer.root, `editor-group:${id}`);
+    const scroll = group && findById(group, "diff-scroll");
+
+    expect(group).toBeDefined();
+    expect(scroll).toBeDefined();
+    expect(scroll!.y).toBeGreaterThanOrEqual(group!.y + 2);
+    expect(scroll!.y + scroll!.height).toBeLessThanOrEqual(group!.y + group!.height);
+  }
+
+  setup.renderer.destroy();
+});
+
+test("Split is disabled at eight tiles and when a tile is too small", async () => {
+  const first = makeGroup([welcomeTab()]);
+  let tree: EditorNode = first;
+  let focusGroupId = first.id;
+
+  for (const direction of ["right", "up", "left", "down", "right", "up", "left"] as const) {
+    const next = splitGroup(tree, focusGroupId, direction);
+
+    tree = next.tree;
+    focusGroupId = next.focusGroupId;
+  }
+
+  for (const [candidate, width, height] of [
+    [tree, 240, 100],
+    [first, 40, 12],
+  ] as const) {
+    let splitCalls = 0;
+    const setup = await testRender(
+      <EditorGrid
+        tree={candidate}
+        focusedGroupId={first.id}
+        onFocusGroup={() => {}}
+        onActivateTab={() => {}}
+        onCloseTab={() => {}}
+        onSplit={() => {
+          splitCalls += 1;
+        }}
+        onZoom={() => {}}
+        zoomed={false}
+        renderTab={() => <text>body</text>}
+      />,
+      { width, height },
+    );
+
+    allowEventLoopUpdates();
+    await setup.waitForVisualIdle();
+    const button = findById(setup.renderer.root, `split-button:${first.id}`);
+
+    expect(button).toBeDefined();
+    await setup.mockMouse.click(button!.x, button!.y);
+    expect(setup.captureCharFrame()).not.toContain("right →");
+    expect(splitCalls).toBe(0);
+    setup.renderer.destroy();
+  }
+});

package/src/components/EditorGrid.stories.tsx

@@ -57,3 +57,30 @@ export const SplitGroups: Story = {
   expectedColors: [DARK.textMuted, DARK.border],
   size: { width: 100, height: 16 },
 };
+
+/** The rightmost group takes the remainder after whole-cell leading groups and divider cells. */
+export const WholeCellSizing: Story = {
+  render: () => (
+    <box style={{ flexDirection: "column", width: 100, height: 16 }}>
+      <text fg={DARK.text}>Whole-cell split sizing</text>
+      <text fg={DARK.textMuted}>100 cells = 49 left + 1 divider + 50 right</text>
+      <text fg={DARK.textDim}>Fix the leading width; let the last group take the remainder.</text>
+      <box style={{ flexGrow: 1, minHeight: 0 }}>
+        <EditorGrid
+          tree={splitTree}
+          focusedGroupId={null}
+          onFocusGroup={noop}
+          onActivateTab={noop}
+          onCloseTab={noop}
+          onSplit={noop}
+          onZoom={noop}
+          zoomed={false}
+          renderTab={renderTab}
+          theme={DARK}
+        />
+      </box>
+    </box>
+  ),
+  expectedColors: [DARK.textMuted, DARK.border],
+  size: { width: 100, height: 16 },
+};