@cueloop/client 0.1.0-alpha.8 → 0.1.0-alpha.80

package/src/components/RootOverlay.tsx

@@ -0,0 +1,48 @@
+// A root overlay slot: OpenTUI has no z-index, so an overlay drawn inside a pane is sliced by the
+// next pane's border. Anything pushed here renders after every pane (last in draw order), so it sits
+// on top of the whole shell - the same trick the tooltip uses. Callers position their node with
+// absolute screen coordinates and hold a stable key, so several overlays (a menu, a hover preview)
+// coexist instead of clobbering one shared slot.
+
+import React, { createContext, useContext, useMemo, useState } from "react";
+
+interface RootOverlayApi {
+  setOverlay: (key: string, node: React.ReactNode) => void;
+  clearOverlay: (key: string) => void;
+}
+
+const RootOverlayContext = createContext<RootOverlayApi>({
+  setOverlay: () => {},
+  clearOverlay: () => {},
+});
+
+export function useRootOverlay(): RootOverlayApi {
+  return useContext(RootOverlayContext);
+}
+
+export function RootOverlayProvider({ children }: { children: React.ReactNode }): React.ReactNode {
+  const [overlays, setOverlays] = useState<Map<string, React.ReactNode>>(new Map());
+  const api = useMemo<RootOverlayApi>(
+    () => ({
+      setOverlay: (key, node) => setOverlays((current) => new Map(current).set(key, node)),
+      clearOverlay: (key) =>
+        setOverlays((current) => {
+          if (!current.has(key)) return current;
+          const next = new Map(current);
+          next.delete(key);
+
+          return next;
+        }),
+    }),
+    [],
+  );
+
+  return (
+    <RootOverlayContext.Provider value={api}>
+      {children}
+      {[...overlays].map(([key, node]) => (
+        <React.Fragment key={key}>{node}</React.Fragment>
+      ))}
+    </RootOverlayContext.Provider>
+  );
+}

package/src/components/ScrollArea.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { DARK } from "../theme";
+import { ScrollArea } from "./ScrollArea";
+import type { Story, StoryMeta } from "./story";
+
+export const meta: StoryMeta = { title: "Chrome/ScrollArea" };
+
+// Taller-than-viewport content; the overlay bar stays hidden until the surface scrolls.
+export const AtRest: Story = {
+  render: () => (
+    <box style={{ width: 24, height: 8, backgroundColor: DARK.background }}>
+      <ScrollArea>
+        {Array.from({ length: 24 }, (_unused, index) => (
+          <text key={index} fg={DARK.textMuted}>{`row ${index + 1}`}</text>
+        ))}
+      </ScrollArea>
+    </box>
+  ),
+  size: { width: 24, height: 8 },
+};

package/src/components/ScrollArea.tsx

@@ -0,0 +1,44 @@
+/**
+ * A scrollbox whose bar follows the global rule: no always-on scrollbar. The built-in bar is
+ * hidden and an OverlayScrollbar rides the rightmost column, appearing only while scrolling.
+ * Pass scrollRef to keep scrollTo / scrollChildIntoView on the underlying ScrollBox.
+ */
+
+import React, { useRef, type ReactNode, type RefObject } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { OverlayScrollbar } from "./OverlayScrollbar";
+
+export interface ScrollAreaProps {
+  children: ReactNode;
+  focused?: boolean;
+  theme?: Theme;
+  scrollRef?: RefObject<ScrollBoxRenderable | null>;
+}
+
+export function ScrollArea({
+  children,
+  focused = false,
+  theme,
+  scrollRef,
+}: ScrollAreaProps): React.ReactNode {
+  const innerRef = useRef<ScrollBoxRenderable | null>(null);
+  const attach = (node: ScrollBoxRenderable | null): void => {
+    innerRef.current = node;
+    if (scrollRef) scrollRef.current = node;
+  };
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "row" }}>
+      <scrollbox
+        ref={attach}
+        style={{ flexGrow: 1 }}
+        focused={focused}
+        verticalScrollbarOptions={{ visible: false }}
+      >
+        {children}
+      </scrollbox>
+      <OverlayScrollbar scrollbox={innerRef} theme={theme} />
+    </box>
+  );
+}

package/src/components/SettingsDialog.stories.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { DARK } from "../theme";
+import { THEME_PRESETS } from "../theme-presets";
+import type { Story, StoryMeta } from "./story";
+import { SettingsDialog, type SettingsCategory } from "./SettingsDialog";
+
+export const meta: StoryMeta = { title: "Overlays/SettingsDialog" };
+
+const CATEGORIES: SettingsCategory[] = [
+  {
+    id: "general",
+    name: "General",
+    rows: [
+      { key: "displayName", label: "Display name", kind: "text" },
+      {
+        key: "autoClose",
+        label: "Auto-close on submit",
+        kind: "cycle",
+        options: ["off", "3s", "on"],
+      },
+    ],
+  },
+  {
+    id: "display",
+    name: "Display",
+    rows: [
+      {
+        key: "planWidth",
+        label: "Plan width",
+        kind: "cycle",
+        options: ["default", "wide", "full"],
+      },
+      { key: "showLineNumbers", label: "Line numbers", kind: "toggle" },
+    ],
+  },
+  {
+    id: "appearance",
+    name: "Appearance",
+    rows: [
+      {
+        key: "theme",
+        label: "Theme",
+        kind: "cycle",
+        options: ["cueloop", "Rosé Pine Moon", "Nord"],
+      },
+    ],
+  },
+];
+
+const VALUES = {
+  displayName: "amber-heron",
+  autoClose: "3s",
+  planWidth: "default",
+  showLineNumbers: true,
+  theme: "Rosé Pine Moon",
+};
+
+export const NavZone: Story = {
+  render: () => (
+    <SettingsDialog
+      isOpen
+      version="0.1.0-alpha.32"
+      keybindsSections={[]}
+      categories={CATEGORIES}
+      values={VALUES}
+      activeCategoryId="general"
+      activeRowIndex={0}
+      activeZone="nav"
+      onCategorySelect={() => {}}
+      onRowActivate={() => {}}
+      onClose={() => {}}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 100, height: 30 },
+};
+
+export const BodyZone: Story = {
+  render: () => (
+    <SettingsDialog
+      isOpen
+      version="0.1.0-alpha.32"
+      keybindsSections={[]}
+      categories={CATEGORIES}
+      values={VALUES}
+      activeCategoryId="display"
+      activeRowIndex={1}
+      activeZone="body"
+      onCategorySelect={() => {}}
+      onRowActivate={() => {}}
+      onClose={() => {}}
+    />
+  ),
+  expectedColors: [DARK.green],
+  size: { width: 100, height: 30 },
+};
+
+export const AppearanceThemed: Story = {
+  render: () => (
+    <SettingsDialog
+      isOpen
+      version="0.1.0-alpha.32"
+      keybindsSections={[]}
+      categories={CATEGORIES}
+      values={VALUES}
+      activeCategoryId="appearance"
+      activeRowIndex={0}
+      activeZone="body"
+      onCategorySelect={() => {}}
+      onRowActivate={() => {}}
+      onClose={() => {}}
+      theme={THEME_PRESETS["rose-pine-moon"]}
+    />
+  ),
+  expectedColors: [THEME_PRESETS["rose-pine-moon"].accent],
+  size: { width: 100, height: 30 },
+};

package/src/components/SettingsDialog.tsx

@@ -0,0 +1,186 @@
+/**
+ * The settings overlay: a centered Dialog whose left nav lists the categories as
+ * first-level leaves (General, Appearance, Actions, Keybinds), and whose right
+ * body shows the active category's typed rows or the keybinds cheatsheet. The
+ * component is controlled: the caller owns the open flag, the active
+ * category/row/zone, and value changes, so the app's keyboard grammar (and the
+ * stories catalog) drive it without a second key handler inside.
+ */
+
+import { ScrollArea } from "./ScrollArea";
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import type { CheatsheetSection } from "../key-bindings";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+import { Tree } from "./primitives/Tree";
+import type { TreeNode } from "./primitives/tree-model";
+import { CycleRow, TextRow, ToggleRow, type SettingsRowDescriptor } from "./SettingsRows";
+
+export interface SettingsCategory {
+  id: string;
+  name: string;
+  rows: SettingsRowDescriptor[];
+  /** A bespoke body (e.g. the quick-actions editor) rendered instead of typed rows. */
+  customBody?: React.ReactNode;
+}
+
+export type SettingsValues = Record<string, string | boolean>;
+
+/** The category id whose right pane shows the keybinds cheatsheet rather than rows. */
+const KEYBINDS_CATEGORY_ID = "keybinds";
+
+export interface SettingsDialogProps {
+  isOpen: boolean;
+  /** The client version, shown in the dialog footer (its home now the menu bar is gone). */
+  version: string;
+  categories: SettingsCategory[];
+  values: SettingsValues;
+  /** The keybinds cheatsheet, shown when the Keybinds leaf is active. */
+  keybindsSections: CheatsheetSection[];
+  activeCategoryId: string;
+  activeRowIndex: number;
+  activeZone: "nav" | "body";
+  onCategorySelect: (categoryId: string) => void;
+  onRowActivate: (row: SettingsRowDescriptor) => void;
+  onClose: () => void;
+  theme?: Theme;
+}
+
+function navTree(categories: SettingsCategory[]): TreeNode[] {
+  return categories.map((category) => ({ id: category.id, label: category.name }));
+}
+
+function KeybindsBody({
+  sections,
+  tokens,
+}: {
+  sections: CheatsheetSection[];
+  tokens: Theme;
+}): React.ReactNode {
+  return (
+    <ScrollArea>
+      {sections.map((section) => (
+        <box key={section.title} style={{ flexDirection: "column" }}>
+          <text fg={tokens.accent}>{section.title}</text>
+          {section.entries.map((entry, index) => (
+            <text key={`${section.title}-${index}`}>
+              <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
+              <span fg={tokens.textMuted}>{entry.label}</span>
+            </text>
+          ))}
+          <text> </text>
+        </box>
+      ))}
+    </ScrollArea>
+  );
+}
+
+export function SettingsDialog({
+  isOpen,
+  version,
+  categories,
+  values,
+  keybindsSections,
+  activeCategoryId,
+  activeRowIndex,
+  activeZone,
+  onCategorySelect,
+  onRowActivate,
+  onClose,
+  theme,
+}: SettingsDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+
+  if (!isOpen) return null;
+  const category =
+    categories.find((candidate) => candidate.id === activeCategoryId) ?? categories[0];
+
+  if (!category) return null;
+  const onKeybinds = category.id === KEYBINDS_CATEGORY_ID;
+
+  return (
+    <Dialog
+      isOpen
+      title=" Settings "
+      width={Math.min(76, terminalWidth - 6)}
+      height={Math.min(22, terminalHeight - 4)}
+      background={tokens.elevated}
+      onDismiss={onClose}
+      theme={theme}
+    >
+      <box style={{ flexDirection: "row", flexGrow: 1 }}>
+        <box style={{ flexDirection: "column", width: 20, paddingLeft: 1, paddingRight: 1 }}>
+          <Tree
+            nodes={navTree(categories)}
+            expandedIds={new Set<string>()}
+            selectedId={category.id}
+            hideIcons
+            selectedBackground={tokens.border}
+            onSelect={onCategorySelect}
+            onToggle={onCategorySelect}
+            theme={theme}
+          />
+        </box>
+        <box style={{ borderStyle: "single", border: ["left"], borderColor: tokens.border }} />
+        <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 2, paddingRight: 1 }}>
+          {onKeybinds ? <KeybindsBody sections={keybindsSections} tokens={tokens} /> : null}
+          {onKeybinds ? null : category.customBody}
+          {onKeybinds
+            ? null
+            : category.rows.map((row, rowIndex) => {
+                const isActive = activeZone === "body" && rowIndex === activeRowIndex;
+                const value = values[row.key];
+
+                if (row.kind === "toggle") {
+                  return (
+                    <ToggleRow
+                      key={row.key}
+                      label={row.label}
+                      value={value === true}
+                      isActive={isActive}
+                      onPress={() => onRowActivate(row)}
+                      theme={theme}
+                    />
+                  );
+                }
+                if (row.kind === "cycle") {
+                  return (
+                    <CycleRow
+                      key={row.key}
+                      label={row.label}
+                      value={String(value ?? "")}
+                      isActive={isActive}
+                      onPress={() => onRowActivate(row)}
+                      theme={theme}
+                    />
+                  );
+                }
+
+                return (
+                  <TextRow
+                    key={row.key}
+                    label={row.label}
+                    value={String(value ?? "")}
+                    isActive={isActive}
+                    onPress={() => onRowActivate(row)}
+                    theme={theme}
+                  />
+                );
+              })}
+        </box>
+      </box>
+      <box style={{ flexDirection: "row", height: 1, paddingLeft: 1, paddingRight: 1 }}>
+        <text fg={tokens.textDim}>
+          {activeZone === "nav"
+            ? "j/k nav · l/tab open · esc close"
+            : "j/k row · l/space change · h back · esc close"}
+        </text>
+        <box style={{ flexGrow: 1 }} />
+        <text fg={tokens.textDim}>{`cueloop v${version}`}</text>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/SettingsRows.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { CycleRow, TextRow, ToggleRow } from "./SettingsRows";
+
+export const meta: StoryMeta = { title: "Chrome/SettingsRows" };
+
+export const AllKinds: Story = {
+  render: () => (
+    <box style={{ flexDirection: "column", width: 50 }}>
+      <ToggleRow label="Line numbers" value={true} isActive={false} onPress={() => {}} />
+      <ToggleRow label="Hide whitespace" value={false} isActive={true} onPress={() => {}} />
+      <CycleRow label="Palette" value="dark" isActive={false} onPress={() => {}} />
+      <TextRow label="Vault path" value="~/vaults/notes" isActive={false} onPress={() => {}} />
+    </box>
+  ),
+  expectedColors: [DARK.green, DARK.accent, DARK.border],
+};

package/src/components/SettingsRows.tsx

@@ -0,0 +1,112 @@
+/**
+ * Typed settings rows for the settings dialog: toggle (on/off), cycle
+ * (enumerated options), and text (freeform value). Every row is one line -
+ * label column left, value right - and presses go through `onPress` so mouse
+ * and keyboard activation share one path.
+ */
+
+import React from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+
+export interface SettingsRowDescriptor {
+  key: string;
+  label: string;
+  kind: "toggle" | "cycle" | "text";
+  options?: string[];
+  hint?: string;
+}
+
+interface RowShellProps {
+  label: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+function RowShell({ label, isActive, onPress, theme, children }: RowShellProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: 1,
+        backgroundColor: isActive ? tokens.border : undefined,
+      }}
+      onMouseUp={onPress}
+    >
+      <box style={{ width: 26, paddingLeft: 1 }}>
+        <text fg={isActive ? tokens.text : tokens.textMuted}>{label}</text>
+      </box>
+      {children}
+    </box>
+  );
+}
+
+export interface ToggleRowProps {
+  label: string;
+  value: boolean;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function ToggleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: ToggleRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={value ? tokens.green : tokens.accent}>{value ? "on" : "off"}</text>
+    </RowShell>
+  );
+}
+
+export interface CycleRowProps {
+  label: string;
+  value: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function CycleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: CycleRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={tokens.accent}>{value}</text>
+    </RowShell>
+  );
+}
+
+export interface TextRowProps {
+  label: string;
+  value: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function TextRow({ label, value, isActive, onPress, theme }: TextRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={tokens.accent}>{value}</text>
+    </RowShell>
+  );
+}

package/src/components/ShareDialog.stories.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import type { ShareLink } from "@cueloop/schema";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ShareDialog } from "./ShareDialog";
+import { newWizardDraft, shareDialogStore } from "./share-dialog-store";
+
+export const meta: StoryMeta = { title: "Dialogs/Share" };
+
+const LINKS: ShareLink[] = [
+  { id: "p_ab12cd", name: "reviewers", requireAuth: true, allowlist: ["octocat"] },
+  { id: "p_ef34gh", requireAuth: false, allowlist: [] },
+];
+
+const NOOP = {
+  onCreateLink: () => {},
+  onUpdateLink: () => {},
+  onDeleteLink: () => {},
+  onCopyLink: () => {},
+  onClose: () => {},
+};
+
+const SIZE = { width: 80, height: 24 };
+
+export const EmptyList: Story = {
+  render: () => {
+    shareDialogStore.getState().reset();
+
+    return (
+      <ShareDialog
+        isOpen
+        threadName="Improve retry logic"
+        links={[]}
+        isOwner
+        {...NOOP}
+        theme={DARK}
+      />
+    );
+  },
+  size: SIZE,
+};
+
+export const WithLinks: Story = {
+  render: () => {
+    shareDialogStore.getState().reset();
+
+    return (
+      <ShareDialog
+        isOpen
+        threadName="Improve retry logic"
+        links={LINKS}
+        isOwner
+        {...NOOP}
+        theme={DARK}
+      />
+    );
+  },
+  size: SIZE,
+};
+
+export const ExportComingSoon: Story = {
+  render: () => {
+    shareDialogStore.getState().reset();
+    shareDialogStore.getState().setCategory("export");
+
+    return (
+      <ShareDialog
+        isOpen
+        threadName="Improve retry logic"
+        links={LINKS}
+        isOwner
+        {...NOOP}
+        theme={DARK}
+      />
+    );
+  },
+  size: SIZE,
+};
+
+export const NewLinkWizard: Story = {
+  render: () => {
+    shareDialogStore.getState().reset();
+    shareDialogStore.getState().openWizard(newWizardDraft("Improve retry logic"));
+
+    return (
+      <ShareDialog
+        isOpen
+        threadName="Improve retry logic"
+        links={[]}
+        isOwner
+        {...NOOP}
+        theme={DARK}
+      />
+    );
+  },
+  size: SIZE,
+};
+
+export const AuthWizard: Story = {
+  render: () => {
+    shareDialogStore.getState().reset();
+    shareDialogStore.getState().openWizard({
+      editingId: null,
+      name: "reviewers",
+      requireAuth: true,
+      allowlist: ["octocat", "hubot"],
+    });
+
+    return (
+      <ShareDialog
+        isOpen
+        threadName="Improve retry logic"
+        links={[]}
+        isOwner
+        {...NOOP}
+        theme={DARK}
+      />
+    );
+  },
+  size: SIZE,
+};