gloomberb 0.6.0 → 0.7.0

package/src/components/ticker-list-table-view.tsx

@@ -1,16 +1,24 @@
 import {
   useCallback,
   useEffect,
-  useRef,
-  useState,
   type ReactNode,
   type RefObject,
 } from "react";
-import { Box, type ScrollBoxRenderable } from "../ui";
+import type { ScrollBoxRenderable } from "../ui";
 import { useShortcut } from "../react/input";
 import { TickerListTable, type TickerListTableProps } from "./ticker-list-table";
 import type { TickerRecord } from "../types/ticker";
 import type { DataTableKeyEvent } from "./data-table-view";
+import {
+  isNextTableRowKey,
+  isPreviousTableRowKey,
+  isTableActivationKey,
+  stopTableKey,
+  TableViewFrame,
+  useResetTableScroll,
+  useTableBodyScrollActivity,
+  useTableViewState,
+} from "./table-view-shared";
 
 export interface TickerListVisibleRange {
   start: number;
@@ -47,23 +55,6 @@ export interface TickerListTableViewProps extends Omit<
   resetScrollKey?: unknown;
 }
 
-function isActivationKey(name: string | undefined): boolean {
-  return name === "enter" || name === "return";
-}
-
-function isNextRowKey(name: string | undefined): boolean {
-  return name === "j" || name === "down";
-}
-
-function isPreviousRowKey(name: string | undefined): boolean {
-  return name === "k" || name === "up";
-}
-
-function stopTableKey(event: DataTableKeyEvent) {
-  event.stopPropagation?.();
-  event.preventDefault?.();
-}
-
 export function TickerListTableView({
   focused = false,
   rootBefore,
@@ -86,17 +77,19 @@ export function TickerListTableView({
   resetScrollKey,
   ...tableProps
 }: TickerListTableViewProps) {
-  const internalHeaderScrollRef = useRef<ScrollBoxRenderable>(null);
-  const internalScrollRef = useRef<ScrollBoxRenderable>(null);
-  const [internalHoveredIdx, setInternalHoveredIdx] = useState<number | null>(
-    null,
-  );
-
-  const effectiveHeaderScrollRef = headerScrollRef ?? internalHeaderScrollRef;
-  const effectiveScrollRef = scrollRef ?? internalScrollRef;
-  const effectiveHoveredIdx =
-    hoveredIdx !== undefined ? hoveredIdx : internalHoveredIdx;
-  const effectiveSetHoveredIdx = setHoveredIdx ?? setInternalHoveredIdx;
+  const {
+    effectiveHeaderScrollRef,
+    effectiveScrollRef,
+    effectiveHoveredIdx,
+    effectiveSetHoveredIdx,
+    effectiveSyncHeaderScroll,
+  } = useTableViewState({
+    headerScrollRef,
+    scrollRef,
+    syncHeaderScroll,
+    hoveredIdx,
+    setHoveredIdx,
+  });
   const selectedIndex = tableProps.tickers.findIndex(
     (ticker) => ticker.metadata.ticker === tableProps.cursorSymbol,
   );
@@ -113,24 +106,11 @@ export function TickerListTableView({
     onVisibleRangeChange({ start, end });
   }, [effectiveScrollRef, onVisibleRangeChange, tableProps.tickers.length, visibleRangeBuffer]);
 
-  const defaultSyncHeaderScroll = useCallback(() => {
-    const body = effectiveScrollRef.current;
-    const header = effectiveHeaderScrollRef.current;
-    if (!body || !header) return;
-    if (header.scrollLeft !== body.scrollLeft) {
-      header.scrollLeft = body.scrollLeft;
-    }
-  }, [effectiveHeaderScrollRef, effectiveScrollRef]);
-  const effectiveSyncHeaderScroll = syncHeaderScroll ?? defaultSyncHeaderScroll;
-
-  const handleBodyScrollActivity = useCallback(() => {
-    if (onBodyScrollActivity) {
-      onBodyScrollActivity();
-    } else {
-      queueMicrotask(effectiveSyncHeaderScroll);
-    }
-    queueMicrotask(emitVisibleRange);
-  }, [effectiveSyncHeaderScroll, emitVisibleRange, onBodyScrollActivity]);
+  const handleBodyScrollActivity = useTableBodyScrollActivity({
+    onBodyScrollActivity,
+    syncHeaderScroll: effectiveSyncHeaderScroll,
+    afterScroll: emitVisibleRange,
+  });
 
   useEffect(() => {
     const scrollBox = effectiveScrollRef.current;
@@ -139,19 +119,12 @@ export function TickerListTableView({
     emitVisibleRange();
   }, [emitVisibleRange, effectiveScrollRef, rootHeight, tableProps.tickers.length]);
 
-  useEffect(() => {
-    if (resetScrollKey === undefined) return;
-    const body = effectiveScrollRef.current;
-    if (body) {
-      body.scrollTop = 0;
-      body.scrollLeft = 0;
-    }
-    const header = effectiveHeaderScrollRef.current;
-    if (header) {
-      header.scrollLeft = 0;
-    }
-    queueMicrotask(emitVisibleRange);
-  }, [effectiveHeaderScrollRef, effectiveScrollRef, emitVisibleRange, resetScrollKey]);
+  useResetTableScroll({
+    headerScrollRef: effectiveHeaderScrollRef,
+    scrollRef: effectiveScrollRef,
+    resetScrollKey,
+    afterReset: emitVisibleRange,
+  });
 
   const selectIndex = useCallback((index: number) => {
     if (index < 0 || index >= tableProps.tickers.length) return;
@@ -192,19 +165,19 @@ export function TickerListTableView({
     if (onRootKeyDown?.(event)) return;
     if (tableProps.tickers.length === 0) return;
 
-    if (isNextRowKey(event.name)) {
+    if (isNextTableRowKey(event.name)) {
       stopTableKey(event);
       selectByOffset(1);
       return;
     }
 
-    if (isPreviousRowKey(event.name)) {
+    if (isPreviousTableRowKey(event.name)) {
       stopTableKey(event);
       selectByOffset(-1);
       return;
     }
 
-    if (isActivationKey(event.name)) {
+    if (isTableActivationKey(event.name)) {
       stopTableKey(event);
       activateSelection();
     }
@@ -224,15 +197,13 @@ export function TickerListTableView({
   }, [effectiveScrollRef, emitVisibleRange, selectedIndex]);
 
   return (
-    <Box
-      flexDirection="column"
-      flexGrow={1}
+    <TableViewFrame
       width={rootWidth}
       height={rootHeight}
       backgroundColor={rootBackgroundColor}
-      overflow="hidden"
+      before={rootBefore}
+      after={rootAfter}
     >
-      {rootBefore}
       <TickerListTable
         {...tableProps}
         headerScrollRef={effectiveHeaderScrollRef}
@@ -242,7 +213,6 @@ export function TickerListTableView({
         hoveredIdx={effectiveHoveredIdx}
         setHoveredIdx={effectiveSetHoveredIdx}
       />
-      {rootAfter}
-    </Box>
+    </TableViewFrame>
   );
 }

package/src/components/ui/confirm-dialog.tsx

@@ -0,0 +1,66 @@
+import { useCallback, type ReactNode } from "react";
+import { Box, Text } from "../../ui";
+import { colors } from "../../theme/colors";
+import { type PromptContext, useDialogKeyboard } from "../../ui/dialog";
+import { Button, type ButtonVariant } from "./button";
+import { DialogFrame } from "./frame";
+
+export interface ConfirmDialogProps extends PromptContext<boolean> {
+  title: string;
+  body: ReactNode | string | string[];
+  confirmLabel: string;
+  cancelLabel?: string;
+  confirmVariant?: ButtonVariant;
+  width?: number;
+  footer?: string;
+}
+
+export function ConfirmDialog({
+  resolve,
+  title,
+  body,
+  confirmLabel,
+  cancelLabel = "Cancel",
+  confirmVariant = "danger",
+  width = 52,
+  footer,
+}: ConfirmDialogProps) {
+  const confirm = useCallback(() => resolve(true), [resolve]);
+  const cancel = useCallback(() => resolve(false), [resolve]);
+
+  useDialogKeyboard((event) => {
+    event.stopPropagation();
+    if (event.name === "enter" || event.name === "return") {
+      confirm();
+      return;
+    }
+    if (event.name === "escape") {
+      cancel();
+    }
+  });
+
+  return (
+    <DialogFrame title={title} footer={footer ?? `Enter ${confirmLabel.toLowerCase()} · Esc cancel`}>
+      <Box flexDirection="column" width={width}>
+        {renderBody(body)}
+        <Box height={1} />
+        <Box flexDirection="row" gap={1}>
+          <Button label={confirmLabel} variant={confirmVariant} onPress={confirm} />
+          <Button label={cancelLabel} variant="secondary" onPress={cancel} />
+        </Box>
+      </Box>
+    </DialogFrame>
+  );
+}
+
+function renderBody(body: ReactNode | string | string[]): ReactNode {
+  if (Array.isArray(body)) {
+    return body.map((line, index) => (
+      <Text key={`${line}:${index}`} fg={index === 0 ? colors.text : colors.textDim}>{line}</Text>
+    ));
+  }
+  if (typeof body === "string") {
+    return <Text fg={colors.text}>{body}</Text>;
+  }
+  return body;
+}

package/src/components/ui/data-table.tsx

@@ -13,6 +13,7 @@ import { EmptyState } from "./status";
 import {
   expandTableColumns,
   getTableWidth,
+  hasMeaningfulTableHorizontalOverflow,
   tableContentWidthProps,
   useMeasuredTableContentWidth,
 } from "./table-layout";
@@ -199,10 +200,16 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
     ],
   );
   const tableWidth = useMemo(() => getTableWidth(columns), [columns]);
-  const { contentWidth, measureContentWidth } = useMeasuredTableContentWidth(tableWidth, headerScrollRef, scrollRef);
+  const {
+    contentWidth: measuredContentWidth,
+    viewportWidth: measuredViewportWidth,
+    measureContentWidth,
+  } = useMeasuredTableContentWidth(tableWidth, headerScrollRef, scrollRef);
+  const horizontalScrollbarVisible = showHorizontalScrollbar
+    && hasMeaningfulTableHorizontalOverflow(tableWidth, measuredViewportWidth);
   const displayColumns = useMemo(
-    () => expandTableColumns(columns, contentWidth),
-    [columns, contentWidth],
+    () => expandTableColumns(columns, measuredContentWidth),
+    [columns, measuredContentWidth],
   );
   const handleRowMouseDown =
     useDoubleClickActivation<DataTableRowPointerTarget<T>>({
@@ -269,17 +276,18 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
   useEffect(() => {
     if (headerScrollRef.current) {
       headerScrollRef.current.horizontalScrollBar.visible = false;
-      if (!showHorizontalScrollbar) {
+      if (!horizontalScrollbarVisible) {
         headerScrollRef.current.scrollLeft = 0;
       }
     }
     if (scrollRef.current) {
-      scrollRef.current.horizontalScrollBar.visible = showHorizontalScrollbar;
-      if (!showHorizontalScrollbar) {
+      scrollRef.current.horizontalScrollBar.visible = horizontalScrollbarVisible;
+      scrollRef.current.verticalScrollBar.visible = items.length > scrollRef.current.viewport.height;
+      if (!horizontalScrollbarVisible) {
         scrollRef.current.scrollLeft = 0;
       }
     }
-  }, [columns.length, headerScrollRef, items.length, scrollRef, showHorizontalScrollbar]);
+  }, [columns.length, headerScrollRef, horizontalScrollbarVisible, items.length, measuredViewportHeight, scrollRef]);
 
   useEffect(() => {
     if (applyScrollToIndex()) return;
@@ -318,7 +326,7 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
         <Box
           flexDirection="row"
           height={1}
-          {...tableContentWidthProps(contentWidth)}
+          {...tableContentWidthProps(measuredContentWidth)}
           paddingX={1}
           backgroundColor={colors.panel}
         >
@@ -396,7 +404,7 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
                       key={getItemKey(item, index)}
                       flexDirection="row"
                       height={1}
-                      {...tableContentWidthProps(contentWidth)}
+                      {...tableContentWidthProps(measuredContentWidth)}
                       paddingX={1}
                       backgroundColor={sectionHeader.backgroundColor ?? colors.bg}
                       onMouseDown={(event) => {
@@ -433,7 +441,7 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
                     key={getItemKey(item, index)}
                     flexDirection="row"
                     height={1}
-                    {...tableContentWidthProps(contentWidth)}
+                    {...tableContentWidthProps(measuredContentWidth)}
                     paddingX={1}
                     backgroundColor={rowBg}
                     onMouseMove={() => {

package/src/components/ui/index.ts

@@ -6,7 +6,6 @@ export { DataTable } from "./data-table";
 export type { DataTableCell, DataTableColumn, DataTableProps } from "./data-table";
 
 export { Button } from "./button";
-
 export { ShortcutHint } from "./shortcut-hint";
 
 export { MultiSelectDialogButton, MultiSelectDialogContent } from "./multi-select-dialog";

package/src/components/ui/page-stack-view.tsx

@@ -1,8 +1,11 @@
 import { Box, Text, TextAttributes, useUiHost } from "../../ui";
 import { useShortcut } from "../../react/input";
-import { type ComponentType, type ReactNode } from "react";
+import { useCallback, type ComponentType, type ReactNode } from "react";
 import { colors } from "../../theme/colors";
-import { isDetailBackNavigationKey } from "../../utils/back-navigation";
+import {
+  isDetailBackNavigationKey,
+  isMouseBackNavigationEvent,
+} from "../../utils/back-navigation";
 
 export interface PageStackViewProps {
   focused: boolean;
@@ -41,13 +44,29 @@ export function PageStackView({
     );
   }
 
+  const goBack = useCallback((event?: {
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+  }) => {
+    event?.stopPropagation?.();
+    event?.preventDefault?.();
+    onBack();
+  }, [onBack]);
+
   useShortcut((event) => {
     if (!focused || !detailOpen || !isDetailBackNavigationKey(event)) return;
-    event.stopPropagation?.();
-    event.preventDefault?.();
-    onBack();
+    goBack(event);
   });
 
+  const handleMouseDown = useCallback((event: {
+    button?: unknown;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+  }) => {
+    if (!focused || !detailOpen || !isMouseBackNavigationEvent(event)) return;
+    goBack(event);
+  }, [detailOpen, focused, goBack]);
+
   if (!detailOpen) {
     return (
       <Box flexDirection="column" flexGrow={1} overflow="hidden">
@@ -57,16 +76,26 @@ export function PageStackView({
   }
 
   return (
-    <Box flexDirection="column" flexGrow={1} overflow="hidden">
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      overflow="hidden"
+      onMouseDown={handleMouseDown}
+    >
       <Box height={1} flexDirection="row">
         <Box
           onMouseDown={(event) => {
-            event.preventDefault?.();
-            event.stopPropagation?.();
-            onBack();
+            goBack(event);
           }}
+          backgroundColor={colors.selected}
         >
-          <Text fg={colors.textBright}>{`← ${backLabel}`}</Text>
+          <Text
+            fg={colors.selectedText}
+            bg={colors.selected}
+            attributes={TextAttributes.BOLD}
+          >
+            {`← ${backLabel}`}
+          </Text>
         </Box>
         {detailTitle ? (
           <>

package/src/components/ui/remote-image.tsx

@@ -1,4 +1,4 @@
-import { Box, ImageSurface, Text, useUiHost } from "../../ui";
+import { Box, ImageSurface, Text } from "../../ui";
 import { colors } from "../../theme/colors";
 import { ExternalLinkText } from "./external-link";
 import { normalizedHttpUrl } from "../../utils/url";
@@ -25,51 +25,26 @@ export function RemoteImage({
   height = 12,
   label = "image",
 }: RemoteImageProps) {
-  const ui = useUiHost();
   const resolvedWidth = Math.max(12, width);
   const imageUrl = normalizedHttpUrl(src);
   if (!imageUrl) return null;
 
-  if (ui.kind === "desktop-web") {
-    return (
-      <ImageSurface
-        src={imageUrl}
-        alt={alt}
-        width={resolvedWidth}
-        height={Math.max(4, height)}
-        border
-        borderColor={colors.border}
-        backgroundColor={colors.panel}
-        objectFit="contain"
-      >
-        <Box paddingX={1} paddingY={1} flexDirection="column" gap={1}>
-          <Text fg={colors.textDim}>{label}</Text>
-          <ExternalLinkText
-            url={imageUrl}
-            label={truncate(imageUrl, Math.max(1, resolvedWidth - 2))}
-            color={colors.textBright}
-          />
-        </Box>
-      </ImageSurface>
-    );
-  }
-
   return (
-    <Box
+    <ImageSurface
+      src={imageUrl}
+      alt={alt}
       width={resolvedWidth}
-      minHeight={2}
-      border
-      borderColor={colors.border}
-      backgroundColor={colors.panel}
-      paddingX={1}
-      flexDirection="column"
+      height={Math.max(4, height)}
+      objectFit="contain"
     >
-      <Text fg={colors.textDim}>{label}</Text>
-      <ExternalLinkText
-        url={imageUrl}
-        label={truncate(imageUrl, Math.max(1, resolvedWidth - 2))}
-        color={colors.textBright}
-      />
-    </Box>
+      <Box flexDirection="column" gap={1}>
+        <Text fg={colors.textDim}>{label}</Text>
+        <ExternalLinkText
+          url={imageUrl}
+          label={truncate(imageUrl, resolvedWidth)}
+          color={colors.textBright}
+        />
+      </Box>
+    </ImageSurface>
   );
 }

package/src/components/ui/table-layout.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, test } from "bun:test";
+import { getTableWidth, hasMeaningfulTableHorizontalOverflow } from "./table-layout";
+
+describe("table layout", () => {
+  test("detects only meaningful horizontal table overflow", () => {
+    const tableWidth = getTableWidth([
+      { width: 12 },
+      { width: 8 },
+    ]);
+
+    expect(hasMeaningfulTableHorizontalOverflow(tableWidth, 0)).toBe(false);
+    expect(hasMeaningfulTableHorizontalOverflow(tableWidth, tableWidth)).toBe(false);
+    expect(hasMeaningfulTableHorizontalOverflow(tableWidth, tableWidth - 1)).toBe(false);
+    expect(hasMeaningfulTableHorizontalOverflow(tableWidth, tableWidth - 2)).toBe(true);
+  });
+});

package/src/components/ui/table-layout.ts

@@ -6,10 +6,16 @@ interface TableWidthColumn {
   flexGrow?: number;
 }
 
+const TRAILING_COLUMN_GUTTER_WIDTH = 1;
+
 export function getTableWidth(columns: readonly TableWidthColumn[]): number {
   return columns.reduce((sum, column) => sum + column.width + 1, 2);
 }
 
+export function hasMeaningfulTableHorizontalOverflow(tableWidth: number, viewportWidth: number): boolean {
+  return viewportWidth > 0 && tableWidth - viewportWidth > TRAILING_COLUMN_GUTTER_WIDTH;
+}
+
 export function expandTableColumns<C extends TableWidthColumn>(
   columns: readonly C[],
   targetWidth: number,
@@ -34,9 +40,9 @@ export function useMeasuredTableContentWidth(
   const [viewportWidth, setViewportWidth] = useState(0);
 
   const measureContentWidth = useCallback(() => {
-    const nextWidth = scrollRef?.current?.viewport?.width
-      ?? headerScrollRef?.current?.viewport?.width
-      ?? 0;
+    const bodyWidth = scrollRef?.current?.viewport?.width || scrollRef?.current?.width || 0;
+    const headerWidth = headerScrollRef?.current?.viewport?.width || headerScrollRef?.current?.width || 0;
+    const nextWidth = bodyWidth || headerWidth;
     setViewportWidth((current) => current === nextWidth ? current : nextWidth);
   }, [headerScrollRef, scrollRef]);
   const scheduleContentWidthMeasure = useCallback(() => {
@@ -48,6 +54,7 @@ export function useMeasuredTableContentWidth(
 
   return {
     contentWidth: Math.max(tableWidth, viewportWidth),
+    viewportWidth,
     measureContentWidth: scheduleContentWidthMeasure,
   };
 }