gloomberb 0.9.2 → 0.9.4

package/src/components/layout/shell/index.test.tsx

@@ -2,11 +2,18 @@ import { afterEach, describe, expect, test } from "bun:test";
 import { TestDialogProvider, testRender } from "../../../renderers/opentui/test-utils";
 import { openTuiUiHost } from "../../../renderers/opentui/ui-host";
 import type { ReactNode } from "react";
-import { act, useReducer } from "react";
-import { AppContext, appReducer, createInitialState } from "../../../state/app/context";
+import { act, useReducer, useState } from "react";
+import {
+  AppContext,
+  appReducer,
+  createInitialState,
+  resolveTickerForPane,
+  usePaneTicker,
+} from "../../../state/app/context";
 import { cloneLayout, createDefaultConfig, TICKER_RESEARCH_PANE_ID, type LayoutConfig } from "../../../types/config";
 import type { PluginRegistry } from "../../../plugins/registry";
 import type { PaneProps } from "../../../types/plugin";
+import { Textarea } from "../../../ui";
 import { Header } from "../header";
 import {
   buildNativeWindowState,
@@ -14,6 +21,8 @@ import {
   resolveAppHeaderHeightCells,
   Shell,
 } from "./index";
+import { resolvePaneFocusSourceLayout } from "./fullscreen";
+import { TransientLayoutProvider, useTransientLayout, type TransientLayoutState } from "../transient-layout";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 
@@ -133,6 +142,44 @@ async function renderShellForWindowModeTest(
   return { actions, registry };
 }
 
+function CaptureTransientLayout({
+  controls,
+}: {
+  controls: { transientLayout: TransientLayoutState | null };
+}) {
+  const { transientLayout } = useTransientLayout();
+  controls.transientLayout = transientLayout;
+  return null;
+}
+
+function ShellTransientHarness({
+  initialState,
+  registry,
+  controls,
+}: {
+  initialState: ReturnType<typeof createInitialState>;
+  registry: PluginRegistry;
+  controls: {
+    dispatch?: (action: ShellTestAction) => void;
+    state?: ReturnType<typeof createInitialState>;
+    transientLayout: TransientLayoutState | null;
+  };
+}) {
+  const [state, dispatch] = useReducer(appReducer, initialState);
+  controls.dispatch = dispatch;
+  controls.state = state;
+  return (
+    <AppContext value={{ state, dispatch }}>
+      <TransientLayoutProvider>
+        <TestDialogProvider>
+          <Shell pluginRegistry={registry} />
+        </TestDialogProvider>
+        <CaptureTransientLayout controls={controls} />
+      </TransientLayoutProvider>
+    </AppContext>
+  );
+}
+
 function findUpdateLayout(actions: ShellTestAction[]) {
   return actions.find((action) => action.type === "UPDATE_LAYOUT");
 }
@@ -176,7 +223,7 @@ describe("Header", () => {
     );
 
     await testSetup.renderOnce();
-    const frame = testSetup.captureCharFrame();
+    const frame = testSetup!.captureCharFrame();
 
     expect(frame).toContain("v0.3.0 available");
     expect(frame).toContain("starting download");
@@ -196,7 +243,7 @@ describe("Header", () => {
     );
 
     await testSetup.renderOnce();
-    const frame = testSetup.captureCharFrame();
+    const frame = testSetup!.captureCharFrame();
 
     expect(frame).toContain("v0.3.0 available");
     expect(frame).toContain("run npm install -g gloomberb@latest");
@@ -417,6 +464,7 @@ describe("Shell", () => {
     expect(resolvePaneManagementShortcut({ ...base, name: "o", key: "o" })).toBe("pop-out");
     expect(resolvePaneManagementShortcut({ ...base, name: "c", key: "c" })).toBe("copy-screenshot");
     expect(resolvePaneManagementShortcut({ ...base, name: "l", key: "l" })).toBe("layout-actions");
+    expect(resolvePaneManagementShortcut({ ...base, name: "f", key: "f" })).toBe("toggle-fullscreen");
     expect(resolvePaneManagementShortcut({ ...base, name: "g", key: "g" })).toBe("gridlock-all");
     expect(resolvePaneManagementShortcut({ ...base, name: "m", key: "m" })).toBe("window-mode");
     expect(resolvePaneManagementShortcut({ ...base, name: "r", key: "r" })).toBe("window-resize-mode");
@@ -425,6 +473,441 @@ describe("Shell", () => {
     expect(resolvePaneManagementShortcut({ ...base, name: "d", key: "d", meta: false, super: false })).toBeNull();
   });
 
+  test("toggles the focused pane fullscreen without persisting layout", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-fullscreen-shortcut-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const dockedLayout = {
+      dockRoot: {
+        kind: "split" as const,
+        axis: "horizontal" as const,
+        ratio: 0.5,
+        first: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+        second: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    const { actions } = await renderShellForWindowModeTest(
+      createShellStateWithLayout(config, dockedLayout, "portfolio-list:main"),
+      { width: 80, height: 18 },
+    );
+
+    expect(testSetup.captureCharFrame()).toContain("Main Portfolio");
+    expect(testSetup.captureCharFrame()).toContain("Ticker Research Body");
+
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfolio");
+    expect(frame).not.toContain("Ticker Research Body");
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfolio");
+    expect(frame).toContain("Ticker Research Body");
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+  });
+
+  test("captures the source layout for transient pane focus", () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-fullscreen-layout-test");
+    const layout = cloneLayout(config.layout);
+    layout.dockRoot = { kind: "pane", instanceId: "portfolio-list:main" };
+    layout.floating = [{ instanceId: "ticker-detail:main", x: 8, y: 2, width: 32, height: 10, zIndex: 75 }];
+
+    const focusedLayout = resolvePaneFocusSourceLayout(layout, "ticker-detail:main");
+
+    expect(focusedLayout).toMatchObject({
+      dockRoot: { kind: "pane", instanceId: "portfolio-list:main" },
+      floating: [{ instanceId: "ticker-detail:main", x: 8, y: 2, width: 32, height: 10, zIndex: 75 }],
+    });
+    expect(focusedLayout).not.toBe(layout);
+    expect(focusedLayout?.instances.map((instance) => instance.instanceId)).toEqual(
+      layout.instances.map((instance) => instance.instanceId),
+    );
+  });
+
+  test("locks layout-changing mouse drags while fullscreen is active", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-fullscreen-drag-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const dockedLayout = {
+      dockRoot: {
+        kind: "split" as const,
+        axis: "horizontal" as const,
+        ratio: 0.5,
+        first: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+        second: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    const { actions } = await renderShellForWindowModeTest(
+      createShellStateWithLayout(config, dockedLayout, "portfolio-list:main"),
+      { width: 80, height: 18 },
+    );
+
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+    await act(async () => {
+      await testSetup!.mockMouse.drag(4, 0, 32, 4);
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfolio");
+    expect(frame).not.toContain("Ticker Research Body");
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+  });
+
+  test("updates the floating pane preview before mouse release", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-live-floating-drag-test");
+    const floatingLayout = cloneLayout(config.layout);
+    floatingLayout.dockRoot = { kind: "pane", instanceId: "portfolio-list:main" };
+    floatingLayout.floating = [{ instanceId: "ticker-detail:main", x: 8, y: 2, width: 32, height: 10, zIndex: 75 }];
+    await renderShellForWindowModeTest(
+      createShellStateWithLayout(config, floatingLayout, "ticker-detail:main"),
+      { width: 80, height: 18 },
+    );
+
+    await act(async () => {
+      await testSetup!.mockMouse.pressDown(10, 3);
+      await testSetup!.renderOnce();
+      await testSetup!.mockMouse.moveTo(16, 6);
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup!.captureCharFrame();
+    const rows = frame.split("\n");
+    expect(rows[2]?.indexOf("┌─:: Main Portfolio") ?? -1).toBeLessThan(0);
+    expect(rows[5]?.indexOf("┌─:: Main Portfolio")).toBeGreaterThanOrEqual(14);
+
+    await act(async () => {
+      await testSetup!.mockMouse.release(16, 6);
+      await testSetup!.renderOnce();
+    });
+  });
+
+  test("keeps the focused textarea cursor visible when it is not covered", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-cursor-visible-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const registry = createShellPluginRegistry({
+      portfolioListComponent: ({ focused, width, height }) => (
+        <Textarea
+          initialValue=""
+          focused={focused}
+          width={width}
+          height={Math.max(1, height)}
+        />
+      ),
+      tickerDetailComponent: () => <text>Chart Body</text>,
+    });
+    const layout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [{ instanceId: "ticker-detail:main", x: 30, y: 2, width: 24, height: 8, zIndex: 75 }],
+      detached: [],
+    };
+    await renderShellForWindowModeTest(
+      createShellStateWithLayout(config, layout, "portfolio-list:main"),
+      { registry, width: 80, height: 18 },
+    );
+    await testSetup!.renderOnce();
+
+    expect(testSetup!.renderer.getCursorState().visible).toBe(true);
+  });
+
+  test("hides the textarea cursor when a higher floating pane covers it", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-cursor-occlusion-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const registry = createShellPluginRegistry({
+      portfolioListComponent: ({ focused, width, height }) => (
+        <Textarea
+          initialValue=""
+          focused={focused}
+          width={width}
+          height={Math.max(1, height)}
+        />
+      ),
+      tickerDetailComponent: () => <text>Chart Body</text>,
+    });
+    const layout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [{ instanceId: "ticker-detail:main", x: 0, y: 0, width: 40, height: 8, zIndex: 75 }],
+      detached: [],
+    };
+    await renderShellForWindowModeTest(
+      createShellStateWithLayout(config, layout, "portfolio-list:main"),
+      { registry, width: 80, height: 18 },
+    );
+    await testSetup!.renderOnce();
+
+    expect(testSetup!.renderer.getCursorState().visible).toBe(false);
+  });
+
+  test("keeps focused pane local detail state when maximizing a floating pane", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-fullscreen-local-state-test");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    let openDetail: (() => void) | null = null;
+    const registry = createShellPluginRegistry({
+      tickerDetailComponent: () => {
+        const [detailOpen, setDetailOpen] = useState(false);
+        openDetail = () => setDetailOpen(true);
+        return <text>{detailOpen ? "Detail State" : "Table State"}</text>;
+      },
+    });
+    const floatingLayout = {
+      dockRoot: null,
+      instances: [{ ...detailPane }],
+      floating: [{ instanceId: "ticker-detail:main", x: 4, y: 2, width: 40, height: 10, zIndex: 50 }],
+      detached: [],
+    };
+    await renderShellForWindowModeTest(
+      createShellStateWithLayout(config, floatingLayout, "ticker-detail:main"),
+      { registry, width: 80, height: 18 },
+    );
+
+    await act(async () => {
+      openDetail?.();
+      await testSetup!.renderOnce();
+    });
+    expect(testSetup.captureCharFrame()).toContain("etail State");
+
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("etail State");
+    expect(frame).not.toContain("able State");
+  });
+
+  test("allows pane fullscreen shortcut while text input is captured on desktop", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-fullscreen-captured-input-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const dockedLayout = {
+      dockRoot: {
+        kind: "split" as const,
+        axis: "horizontal" as const,
+        ratio: 0.5,
+        first: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+        second: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    const { actions } = await renderShellForWindowModeTest(
+      {
+        ...createShellStateWithLayout(config, dockedLayout, "portfolio-list:main"),
+        inputCaptured: true,
+      },
+      { width: 80, height: 18 },
+    );
+
+    await emitKeypress({
+      name: "f",
+      key: "f",
+      meta: true,
+      super: true,
+      shift: true,
+      targetEditable: true,
+    } as any);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfolio");
+    expect(frame).not.toContain("Ticker Research Body");
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+  });
+
+  test("keeps the transient focus layout available after switching saved layouts", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-transient-focus-layout-tab-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const defaultLayout = {
+      dockRoot: {
+        kind: "split" as const,
+        axis: "horizontal" as const,
+        ratio: 0.5,
+        first: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+        second: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    const monitorLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      instances: [{ ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    config.layout = cloneLayout(defaultLayout);
+    config.layouts = [
+      { name: "Default", layout: cloneLayout(defaultLayout), focusedPaneId: "portfolio-list:main" },
+      { name: "Monitor", layout: cloneLayout(monitorLayout), focusedPaneId: "ticker-detail:main" },
+    ];
+    config.activeLayoutIndex = 0;
+
+    const initialState = {
+      ...createInitialState(config),
+      focusedPaneId: "portfolio-list:main",
+      statusBarVisible: true,
+    };
+    const registry = createShellPluginRegistry();
+    const controls: {
+      dispatch?: (action: ShellTestAction) => void;
+      state?: ReturnType<typeof createInitialState>;
+      transientLayout: TransientLayoutState | null;
+    } = { transientLayout: null };
+
+    testSetup = await testRender(
+      <ShellTransientHarness initialState={initialState} registry={registry} controls={controls} />,
+      { width: 100, height: 18 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfolio");
+    expect(frame).not.toContain("Ticker Research Body");
+    expect(controls.transientLayout).toMatchObject({
+      id: "pane-focus",
+      active: true,
+    });
+
+    await act(async () => {
+      controls.transientLayout?.onDeactivate?.();
+      controls.dispatch?.({ type: "SWITCH_LAYOUT", index: 1 });
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(controls.transientLayout).toMatchObject({
+      id: "pane-focus",
+      active: false,
+    });
+
+    await act(async () => {
+      controls.transientLayout?.onActivate?.();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(controls.transientLayout).toMatchObject({
+      id: "pane-focus",
+      active: true,
+    });
+  });
+
+  test("restores the focus source layout state when reactivating transient focus", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-transient-focus-state-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const defaultLayout = {
+      dockRoot: {
+        kind: "split" as const,
+        axis: "horizontal" as const,
+        ratio: 0.5,
+        first: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+        second: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    const monitorLayout = cloneLayout(defaultLayout);
+    config.layout = cloneLayout(defaultLayout);
+    config.layouts = [
+      {
+        name: "Default",
+        layout: cloneLayout(defaultLayout),
+        focusedPaneId: "ticker-detail:main",
+        paneState: {
+          "portfolio-list:main": { collectionId: "main", cursorSymbol: "MSTR" },
+          "ticker-detail:main": { activeTabId: "overview" },
+        },
+      },
+      {
+        name: "Monitor",
+        layout: monitorLayout,
+        focusedPaneId: "ticker-detail:main",
+        paneState: {
+          "portfolio-list:main": { collectionId: "main", cursorSymbol: null },
+          "ticker-detail:main": { activeTabId: "overview" },
+        },
+      },
+    ];
+    config.activeLayoutIndex = 0;
+    const registry = createShellPluginRegistry({
+      tickerDetailComponent: () => {
+        const { symbol } = usePaneTicker();
+        return <text>{`Ticker:${symbol ?? "none"}`}</text>;
+      },
+    });
+    const controls: {
+      dispatch?: (action: ShellTestAction) => void;
+      state?: ReturnType<typeof createInitialState>;
+      transientLayout: TransientLayoutState | null;
+    } = { transientLayout: null };
+
+    testSetup = await testRender(
+      <ShellTransientHarness
+        initialState={createInitialState(config)}
+        registry={registry}
+        controls={controls}
+      />,
+      { width: 100, height: 18 },
+    );
+
+    await testSetup.renderOnce();
+    expect(testSetup.captureCharFrame()).toContain("icker:MSTR");
+
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+    expect(testSetup.captureCharFrame()).toContain("icker:MSTR");
+
+    await act(async () => {
+      controls.transientLayout?.onDeactivate?.();
+      controls.dispatch?.({ type: "SWITCH_LAYOUT", index: 1 });
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+    expect(controls.transientLayout).toMatchObject({
+      id: "pane-focus",
+      active: false,
+    });
+    expect(controls.state?.config.activeLayoutIndex).toBe(1);
+    expect(controls.state?.paneState["portfolio-list:main"]?.cursorSymbol).toBeNull();
+    expect(controls.state ? resolveTickerForPane(controls.state, "ticker-detail:main") : null).toBeNull();
+
+    await act(async () => {
+      controls.transientLayout?.onActivate?.();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(controls.transientLayout).toMatchObject({
+      id: "pane-focus",
+      active: true,
+    });
+    expect(controls.state?.config.activeLayoutIndex).toBe(0);
+    expect(controls.state?.paneState["portfolio-list:main"]?.cursorSymbol).toBe("MSTR");
+    expect(controls.state ? resolveTickerForPane(controls.state, "ticker-detail:main") : null).toBe("MSTR");
+  });
+
   test("exits window mode on Enter without changes", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-window-mode-resize-shortcut-test");
     const mainPane = requireLayoutInstance(config, "portfolio-list:main");