@cueloop/client 0.1.0-alpha.64 → 0.1.0-alpha.66

package/src/components/ThreadsSidebar.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ThreadsSidebar } from "./ThreadsSidebar";
+import { groupInbox } from "./session-tree";
+import { fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "Surfaces/ThreadsSidebar" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", height: "100%", flexDirection: "row" }}>{children}</box>;
+}
+
+const plan = fixturePlanSession();
+const projectPlan = {
+  ...plan,
+  workspace: { ...plan.workspace, rootCommit: "root-1", remote: "git@github.com:acme/widget.git" },
+};
+const { rows, ordered } = groupInbox([projectPlan, fixtureDiffSession()]);
+
+export const Open: Story = {
+  render: () => (
+    <Frame>
+      <ThreadsSidebar
+        open
+        rows={rows}
+        cursor={0}
+        activeId={ordered[0]!.id}
+        onSelect={() => {}}
+        theme={DARK}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.border],
+  size: { width: 60, height: 12 },
+};

package/src/components/ThreadsSidebar.tsx

@@ -0,0 +1,57 @@
+// The left Projects and Threads column: a collapsible, scrollable tree beside the
+// thread. A click jumps to that thread; the open thread stays highlighted. Renders
+// nothing when collapsed so the thread reclaims the width.
+
+import React from "react";
+import type { Theme } from "../theme";
+import { InboxList } from "./InboxList";
+import type { InboxRow } from "./session-tree";
+
+export interface ThreadsSidebarProps {
+  open: boolean;
+  rows: InboxRow[];
+  cursor: number;
+  /** The open thread's id, highlighted in the list. */
+  activeId?: string;
+  onSelect: (sessionId: string) => void;
+  /** Ask to delete a thread (the selected row's [delete] button). */
+  onRequestDelete?: (id: string, title: string) => void;
+  width?: number;
+  theme?: Theme;
+}
+
+export function ThreadsSidebar({
+  open,
+  rows,
+  cursor,
+  activeId,
+  onSelect,
+  onRequestDelete,
+  width = 30,
+  theme,
+}: ThreadsSidebarProps): React.ReactNode {
+  if (!open) return null;
+
+  return (
+    <box
+      style={{
+        width,
+        flexDirection: "column",
+        borderStyle: "single",
+        border: ["right"],
+        borderColor: theme?.border,
+      }}
+    >
+      <scrollbox style={{ flexGrow: 1 }} focused={false}>
+        <InboxList
+          rows={rows}
+          cursor={cursor}
+          activeId={activeId}
+          onSelect={onSelect}
+          onRequestDelete={onRequestDelete}
+          theme={theme}
+        />
+      </scrollbox>
+    </box>
+  );
+}

package/src/components/Toast.stories.tsx

@@ -3,7 +3,7 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { Toast } from "./Toast";
 
-export const meta: StoryMeta = { title: "Toast" };
+export const meta: StoryMeta = { title: "Overlays/Toast" };
 
 export const ShareLink: Story = {
   render: () => <Toast title="share link copied" body="ssh review-4f2a@cueloop.dev" />,

package/src/components/TreePane.stories.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { TreePane } from "./TreePane";
+import type { TreeRow } from "../tree-view";
+
+export const meta: StoryMeta = { title: "Surfaces/TreePane" };
+
+const callbacks = {
+  onSelect: () => {},
+  onGo: () => {},
+  onBranch: () => {},
+  onLabel: () => {},
+  onFork: () => {},
+  onForkAndShare: () => {},
+};
+
+/** rev1 -> comment (labelled, a branch hangs off it) -> the branch's comment -> rev2 as main's tip. */
+const ROWS: TreeRow[] = [
+  {
+    entryId: "e1",
+    depth: 0,
+    glyph: "◉",
+    text: "revision 1",
+    onPath: true,
+    tips: [],
+    isCurrentTip: false,
+  },
+  {
+    entryId: "e2",
+    depth: 0,
+    glyph: "·",
+    text: "comment",
+    onPath: true,
+    tips: [],
+    isCurrentTip: false,
+    label: "start",
+  },
+  {
+    entryId: "e3",
+    depth: 1,
+    glyph: "·",
+    text: "comment",
+    onPath: false,
+    tips: ["alt"],
+    isCurrentTip: false,
+  },
+  {
+    entryId: "e4",
+    depth: 0,
+    glyph: "◉",
+    text: "revision 2",
+    onPath: true,
+    tips: ["main"],
+    isCurrentTip: true,
+  },
+];
+
+/** The rail expects a height-constrained parent, like the app's main row. */
+function PaneFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box
+      style={{ flexDirection: "column", width: 40, height: "100%", backgroundColor: DARK.panel }}
+    >
+      {children}
+    </box>
+  );
+}
+
+export const OwnerWithBranch: Story = {
+  render: () => (
+    <PaneFrame>
+      <TreePane rows={ROWS} selectedEntryId="e2" canMove canFork {...callbacks} />
+    </PaneFrame>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 40, height: 16 },
+};
+
+export const CollaboratorReadsOnly: Story = {
+  render: () => (
+    <PaneFrame>
+      <TreePane rows={ROWS} canMove={false} canFork={false} {...callbacks} />
+    </PaneFrame>
+  ),
+  size: { width: 40, height: 16 },
+};
+
+/** A resolved review: the owner can still fork, not move. */
+export const ResolvedForkOnly: Story = {
+  render: () => (
+    <PaneFrame>
+      <TreePane rows={ROWS} canMove={false} canFork {...callbacks} />
+    </PaneFrame>
+  ),
+  size: { width: 40, height: 16 },
+};
+
+export const NoHistory: Story = {
+  render: () => (
+    <PaneFrame>
+      <TreePane rows={[]} canMove canFork {...callbacks} />
+    </PaneFrame>
+  ),
+  size: { width: 40, height: 8 },
+};

package/src/components/TreePane.tsx

@@ -0,0 +1,156 @@
+/**
+ * The rail's Tree tab: the session's history as one row per entry. The active
+ * path reads bright, everything else dim; a branch tip carries its name, the
+ * current tip a marker, a checkpoint its label. Clicking a row selects it,
+ * clicking the selected row goes there; the buttons underneath are the mouse
+ * path to the same primitives the option chords reach.
+ */
+
+import React, { useEffect, useRef } from "react";
+import { createTextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import type { TreeRow } from "../tree-view";
+import { useComponentTheme } from "./theme-context";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+
+export interface TreePaneProps {
+  rows: TreeRow[];
+  selectedEntryId?: string;
+  /** The owner of an open review may move the tree; everyone else reads it. */
+  canMove: boolean;
+  /** The owner may fork, a resolved review included. */
+  canFork: boolean;
+  onSelect: (entryId: string) => void;
+  onGo: (entryId: string) => void;
+  onBranch: () => void;
+  onLabel: () => void;
+  onFork: () => void;
+  onForkAndShare: () => void;
+  theme?: Theme;
+}
+
+const DIM = createTextAttributes({ dim: true });
+const BOLD = createTextAttributes({ bold: true });
+
+/** The marker column: the current tip stands out, every other row keeps its kind's glyph. */
+function markerFor(row: TreeRow): string {
+  return row.isCurrentTip ? "●" : row.glyph;
+}
+
+/** What follows the entry's name: the branches whose tip it is, and its checkpoint. */
+function trailerFor(row: TreeRow): string {
+  const parts: string[] = [];
+
+  if (row.tips.length) parts.push(`← ${row.tips.join(", ")}`);
+  if (row.label !== undefined) parts.push(`⚑ ${row.label}`);
+
+  return parts.length ? `  ${parts.join("  ")}` : "";
+}
+
+export function TreePane({
+  rows,
+  selectedEntryId,
+  canMove,
+  canFork,
+  onSelect,
+  onGo,
+  onBranch,
+  onLabel,
+  onFork,
+  onForkAndShare,
+  theme,
+}: TreePaneProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+  const revealId = selectedEntryId ?? rows.find((row) => row.isCurrentTip)?.entryId;
+
+  // the trunk draws last, so a long history opens with its tip below the fold: keep the row in view
+  useEffect(() => {
+    if (revealId === undefined) return;
+    try {
+      scrollRef.current?.scrollChildIntoView(`tree-row-${revealId}`);
+    } catch {
+      // reveal is best-effort; the selection is already correct
+    }
+  }, [revealId]);
+
+  if (rows.length === 0)
+    return (
+      <box style={{ flexGrow: 1, alignItems: "center", justifyContent: "center" }}>
+        <text fg={tokens.textDim}>no history yet</text>
+      </box>
+    );
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "column" }}>
+      <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
+        {rows.map((row) => {
+          const selected = row.entryId === selectedEntryId;
+          const foreground = row.onPath ? tokens.text : tokens.textDim;
+
+          return (
+            <box
+              key={row.entryId}
+              id={`tree-row-${row.entryId}`}
+              style={{
+                flexDirection: "row",
+                paddingLeft: 1 + row.depth * 2,
+                backgroundColor: selected ? tokens.elevated : undefined,
+              }}
+              onMouseUp={() => (selected && canMove ? onGo(row.entryId) : onSelect(row.entryId))}
+            >
+              <text
+                fg={row.isCurrentTip ? tokens.accent : foreground}
+                attributes={row.onPath ? undefined : DIM}
+              >
+                {markerFor(row)} {row.text}
+              </text>
+              <text fg={tokens.textMuted} attributes={row.label === undefined ? undefined : BOLD}>
+                {trailerFor(row)}
+              </text>
+            </box>
+          );
+        })}
+      </scrollbox>
+      {canMove || canFork ? (
+        <box style={{ paddingLeft: 1 }}>
+          <Toolbar>
+            {canMove ? (
+              <Button
+                onPress={() => {
+                  if (selectedEntryId !== undefined) onGo(selectedEntryId);
+                }}
+                isDisabled={selectedEntryId === undefined}
+                marginRight={1}
+                theme={theme}
+              >
+                Go
+              </Button>
+            ) : null}
+            {canMove ? (
+              <Button onPress={onBranch} marginRight={1} theme={theme}>
+                Branch
+              </Button>
+            ) : null}
+            {canMove ? (
+              <Button onPress={onLabel} marginRight={1} theme={theme}>
+                Label
+              </Button>
+            ) : null}
+            {canFork ? (
+              <Button onPress={onFork} marginRight={1} theme={theme}>
+                Fork
+              </Button>
+            ) : null}
+            {canFork ? (
+              <Button onPress={onForkAndShare} theme={theme}>
+                Fork+share
+              </Button>
+            ) : null}
+          </Toolbar>
+        </box>
+      ) : null}
+    </box>
+  );
+}

package/src/components/WalkWizard.stories.tsx

@@ -4,7 +4,7 @@ import type { WalkFile } from "../walk";
 import type { Story, StoryMeta } from "./story";
 import { WalkWizard } from "./WalkWizard";
 
-export const meta: StoryMeta = { title: "WalkWizard" };
+export const meta: StoryMeta = { title: "Overlays/WalkWizard" };
 
 const FILES: WalkFile[] = [
   {