@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.90

package/src/use-changes-workbench.ts

@@ -0,0 +1,190 @@
+// The Changes/Project right-region state machine: the Project pane is the right sidebar and is always
+// present when the region is on, the Changes editor rides on it and never stands alone, and the two
+// toggles are mutually-exclusive file-tree modes. Owns the editor grid (tabs and splits) too.
+
+import { useRef, useState } from "react";
+import type { ProjectPanelMode } from "./components/AppShell";
+import type { LaunchLayout } from "./launch-layout";
+import {
+  activateTab,
+  addTab,
+  changesTab,
+  closeTab,
+  containsGroup,
+  fileTab,
+  firstGroupId,
+  makeGroup,
+  splitGroup,
+  welcomeTab,
+  type EditorNode,
+  type SplitDirection,
+} from "./components/editor-grid";
+
+/** Seed the workbench for a bare launch: the region opens on a disposable Welcome tab. */
+export interface ChangesWorkbenchOptions {
+  seed?: "changes" | "welcome";
+  /** The launch layout the right region opens in; overrides the seed's defaults. */
+  layout?: LaunchLayout;
+}
+
+interface InitialPanes {
+  projectOpen: boolean;
+  changesOpen: boolean;
+  projectMode: ProjectPanelMode;
+  zoomed: boolean;
+}
+
+/** The right region's opening state: from the launch layout when given, else the welcome-seed defaults. */
+function initialPanes(options?: ChangesWorkbenchOptions): InitialPanes {
+  const layout = options?.layout;
+
+  if (layout) {
+    const changesOpen = layout.rightSidebar === "changes";
+
+    return {
+      projectOpen: layout.rightSidebar !== "off",
+      changesOpen,
+      projectMode: layout.rightSidebar === "project" ? "tree" : "changes",
+      // zoom fills the middle with the Changes editor, so a hand-edited layout that zooms without one
+      // would strand a blank center with the Thread pane hidden; only honor zoom when Changes is open
+      zoomed: layout.zoomChanges && changesOpen,
+    };
+  }
+  const welcomeSeed = options?.seed === "welcome";
+
+  return {
+    projectOpen: welcomeSeed,
+    changesOpen: welcomeSeed,
+    projectMode: "changes",
+    zoomed: false,
+  };
+}
+
+export interface ChangesWorkbench {
+  projectOpen: boolean;
+  changesOpen: boolean;
+  projectMode: ProjectPanelMode;
+  zoomed: boolean;
+  grid: EditorNode;
+  activeGroup: string;
+  toggleRight: () => void;
+  toggleChanges: () => void;
+  toggleProject: () => void;
+  toggleZoom: () => void;
+  focusGroup: (groupId: string) => void;
+  activate: (groupId: string, tabId: string) => void;
+  close: (groupId: string, tabId: string) => void;
+  split: (groupId: string, direction: SplitDirection) => void;
+  openFile: (path: string, fileView: "diff" | "contents") => void;
+  /** Re-open defaults when the session changes: a diff opens the region in changed-files mode. */
+  syncSession: (sessionId: string | undefined, isDiff: boolean) => void;
+}
+
+export function useChangesWorkbench(options?: ChangesWorkbenchOptions): ChangesWorkbench {
+  const welcomeSeed = options?.seed === "welcome";
+  const initial = initialPanes(options);
+  const [projectOpen, setProjectOpen] = useState(initial.projectOpen);
+  const [changesOpen, setChangesOpen] = useState(initial.changesOpen);
+  const [projectMode, setProjectMode] = useState<ProjectPanelMode>(initial.projectMode);
+  const [zoomed, setZoomed] = useState(initial.zoomed);
+  const [grid, setGrid] = useState<EditorNode>(() =>
+    makeGroup([welcomeSeed ? welcomeTab() : changesTab()]),
+  );
+  const [focusedGroup, setFocusedGroup] = useState<string | null>(null);
+  const rememberedChanges = useRef(welcomeSeed);
+  const seenSession = useRef<string | undefined>(undefined);
+
+  const syncSession = (sessionId: string | undefined, isDiff: boolean): void => {
+    if (sessionId === undefined || sessionId === seenSession.current) return;
+    seenSession.current = sessionId;
+    setProjectOpen(isDiff);
+    setChangesOpen(isDiff);
+    setProjectMode(isDiff ? "changes" : "tree");
+    rememberedChanges.current = isDiff;
+    // a non-diff thread has no Changes editor; leaving zoom on would strand the hidden Thread pane
+    if (!isDiff) setZoomed(false);
+    setGrid(makeGroup([changesTab()]));
+    setFocusedGroup(null);
+  };
+
+  const toggleRight = (): void => {
+    if (projectOpen) {
+      rememberedChanges.current = changesOpen;
+      setChangesOpen(false);
+      setProjectOpen(false);
+      // zoom focuses the Changes editor; collapsing the region returns the Thread pane full width
+      setZoomed(false);
+    } else {
+      setProjectOpen(true);
+      setChangesOpen(rememberedChanges.current);
+      setProjectMode(rememberedChanges.current ? "changes" : "tree");
+    }
+  };
+  const toggleChanges = (): void => {
+    if (projectMode === "changes") {
+      setChangesOpen(false);
+      setProjectMode("tree");
+      // never leave zoom on with the Changes editor gone - the Thread pane would stay hidden
+      setZoomed(false);
+    } else {
+      setChangesOpen(true);
+      setProjectOpen(true);
+      setProjectMode("changes");
+    }
+  };
+  const toggleProject = (): void => {
+    setProjectOpen(true);
+    setProjectMode("tree");
+  };
+  const close = (groupId: string, tabId: string): void => {
+    setGrid((tree) => {
+      const pruned = closeTab(tree, groupId, tabId);
+      if (pruned === null) {
+        setChangesOpen(false);
+        setProjectMode("tree");
+        // leaving zoom on would hide the Thread pane with no editor to fill the gap
+        setZoomed(false);
+        return makeGroup([changesTab()]);
+      }
+      // re-home focus when the closed group was pruned away, so the next open has a live target
+      setFocusedGroup((current) =>
+        current !== null && containsGroup(pruned, current) ? current : firstGroupId(pruned),
+      );
+      return pruned;
+    });
+  };
+  const split = (groupId: string, direction: SplitDirection): void => {
+    setGrid((tree) => {
+      const result = splitGroup(tree, groupId, direction);
+      setFocusedGroup(result.focusGroupId);
+      return result.tree;
+    });
+  };
+  const openFile = (path: string, fileView: "diff" | "contents"): void => {
+    setProjectOpen(true);
+    setChangesOpen(true);
+    const label = path.split("/").pop() ?? path;
+    setGrid((tree) =>
+      addTab(tree, focusedGroup ?? firstGroupId(tree), fileTab(label, path, fileView)),
+    );
+  };
+
+  return {
+    projectOpen,
+    changesOpen,
+    projectMode,
+    zoomed,
+    grid,
+    activeGroup: focusedGroup ?? firstGroupId(grid),
+    toggleRight,
+    toggleChanges,
+    toggleProject,
+    toggleZoom: () => setZoomed((value) => !value),
+    focusGroup: setFocusedGroup,
+    activate: (groupId, tabId) => setGrid((tree) => activateTab(tree, groupId, tabId)),
+    close,
+    split,
+    openFile,
+    syncSession,
+  };
+}

package/src/use-frame-measure.ts

@@ -0,0 +1,41 @@
+/**
+ * Read a layout-dependent value after every rendered frame (and resize),
+ * committing only on change. Layout lands after the commit, so a timer
+ * would race the visual-idle wait; measuring on the frame event converges
+ * deterministically within a frame or two.
+ */
+
+import { useEffect, useState } from "react";
+import { useRenderer } from "@opentui/react";
+
+export function useFrameMeasure<T>(
+  read: () => T,
+  isEqual: (left: T, right: T) => boolean,
+  initial: T,
+  active = true,
+): T {
+  const renderer = useRenderer();
+  const [value, setValue] = useState(initial);
+
+  useEffect(() => {
+    // a measurement only needed while a popover is open subscribes no per-frame listener when closed
+    if (!active) return;
+    const measure = (): void => {
+      const next = read();
+
+      setValue((current) => (isEqual(current, next) ? current : next));
+    };
+
+    measure();
+    renderer?.on("frame", measure);
+    renderer?.on("resize", measure);
+
+    return () => {
+      renderer?.off("frame", measure);
+      renderer?.off("resize", measure);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [renderer, active]);
+
+  return value;
+}

package/src/use-remember-layout.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react";
+import { persistLayout } from "./config";
+import { layoutFromPanes, type LaunchLayout } from "./launch-layout";
+
+/**
+ * Persist the pane composition whenever the user changes it, so the next bare launch restores it.
+ * Only a launch that carried an intended layout (a create-command or the vanilla inbox) remembers;
+ * a bare thread open collapses the sidebar and must not clobber the remembered composition. The
+ * mount write is skipped: the opening composition is the one just restored.
+ */
+export function useRememberLayout(
+  layout: LaunchLayout | undefined,
+  active: boolean,
+  threads: boolean,
+  changesOpen: boolean,
+  projectOpen: boolean,
+  zoomChanges: boolean,
+): void {
+  const settled = useRef(false);
+
+  useEffect(() => {
+    if (!settled.current) {
+      settled.current = true;
+
+      return;
+    }
+    // only the active workbench persists: on a bare launch App's unused panes must not clobber the shell's
+    if (!active || layout === undefined) return;
+    persistLayout(layoutFromPanes({ threads, changesOpen, projectOpen, zoomChanges }));
+  }, [active, layout, threads, changesOpen, projectOpen, zoomChanges]);
+}

package/src/use-repo-changes.ts

@@ -0,0 +1,87 @@
+import { useEffect, useEffectEvent, useState } from "react";
+import type { DiffFileContents } from "@cueloop/schema";
+
+const CHANGES_REFRESH_MS = 2000;
+const EMPTY_CHANGED_FILES: readonly DiffFileContents[] = [];
+
+interface RepoChangesOptions {
+  loadChanges: () => Promise<readonly DiffFileContents[]>;
+  visible: boolean;
+  diffSourceKey: string;
+  refreshAutomatically?: boolean;
+}
+
+interface RepoChangesSnapshot {
+  diffSourceKey: string;
+  files: readonly DiffFileContents[];
+}
+
+function sameChangedFiles(a: readonly DiffFileContents[], b: readonly DiffFileContents[]): boolean {
+  return (
+    a.length === b.length &&
+    a.every(
+      (file, index) =>
+        file.path === b[index]?.path &&
+        file.status === b[index]?.status &&
+        file.oldContents === b[index]?.oldContents &&
+        file.newContents === b[index]?.newContents,
+    )
+  );
+}
+
+/** Refresh the visible Changes tree from the working repo; keep captured diff reviews fixed. */
+export function useRepoChanges({
+  loadChanges,
+  visible,
+  diffSourceKey,
+  refreshAutomatically = true,
+}: RepoChangesOptions): readonly DiffFileContents[] {
+  const [snapshot, setSnapshot] = useState<RepoChangesSnapshot | null>(null);
+  const loadLatestChanges = useEffectEvent(loadChanges);
+
+  useEffect(() => {
+    if (!visible) return;
+
+    let cancelled = false;
+    let requestInFlight = false;
+
+    const refreshChanges = async (): Promise<void> => {
+      if (requestInFlight) return;
+      requestInFlight = true;
+
+      try {
+        const files = await loadLatestChanges();
+
+        if (!cancelled) {
+          setSnapshot((previous) =>
+            previous?.diffSourceKey === diffSourceKey && sameChangedFiles(previous.files, files)
+              ? previous
+              : { diffSourceKey, files },
+          );
+        }
+      } catch {
+        if (!cancelled) {
+          setSnapshot((previous) =>
+            previous?.diffSourceKey === diffSourceKey && previous.files.length === 0
+              ? previous
+              : { diffSourceKey, files: EMPTY_CHANGED_FILES },
+          );
+        }
+      } finally {
+        requestInFlight = false;
+      }
+    };
+
+    void refreshChanges();
+    const timer = refreshAutomatically
+      ? setInterval(() => void refreshChanges(), CHANGES_REFRESH_MS)
+      : null;
+
+    return () => {
+      cancelled = true;
+      if (timer !== null) clearInterval(timer);
+    };
+  }, [visible, diffSourceKey, refreshAutomatically]);
+
+  return snapshot?.diffSourceKey === diffSourceKey ? snapshot.files : EMPTY_CHANGED_FILES;
+}