gloomberb 0.5.1 → 0.6.0

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

@@ -1,13 +1,19 @@
-import { memo, useRef, type RefObject } from "react";
-import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { Box, ScrollBox, Text, tickerContextMenuItems, useContextMenu, useRendererHost, useUiCapabilities } from "../ui";
+import { memo, useCallback, useMemo, useRef, useState, type RefObject } from "react";
+import { TextAttributes, type ScrollBoxRenderable } from "../ui";
 import { EmptyState } from "./ui";
 import { colors, hoverBg } from "../theme/colors";
+import { getSharedRegistry } from "../plugins/registry";
 import type { ColumnConfig } from "../types/config";
 import type { TickerFinancials, PricePoint } from "../types/financials";
 import type { TickerRecord } from "../types/ticker";
 import { padTo } from "../utils/format";
 import { renderChart, resolveChartPalette, type StyledContent } from "./chart/chart-renderer";
 import type { ProjectedChartPoint } from "./chart/chart-data";
+import { tableContentWidthProps, useMeasuredTableContentWidth } from "./ui/table-layout";
+import { useViewport } from "../react/input";
+import { useRafCallback } from "../react/use-raf-callback";
+import { measurePerf } from "../utils/perf-marks";
 
 export interface TickerTableCell {
   text: string;
@@ -20,6 +26,12 @@ type ResolveTickerTableCell = (
   ticker: TickerRecord,
   financials: TickerFinancials | undefined,
 ) => TickerTableCell;
+type TableMouseEvent = {
+  button?: number;
+  detail?: number;
+  preventDefault?: () => void;
+  stopPropagation?: () => void;
+};
 
 const FLASHABLE_QUOTE_COLUMN_IDS = new Set([
   "price",
@@ -46,7 +58,7 @@ function resolveQuoteFlashColor(direction: QuoteFlashDirection, fallbackColor: s
   }
 }
 
-interface TickerListTableProps {
+export interface TickerListTableProps {
   columns: ColumnConfig[];
   tickers: TickerRecord[];
   cursorSymbol: string | null;
@@ -67,32 +79,43 @@ interface TickerListTableProps {
   emptyTitle?: string;
   emptyHint?: string;
   showSparklines?: boolean;
+  virtualize?: boolean;
+  overscan?: number;
 }
 
+const EMPTY_FLASH_SYMBOLS = new Map<string, QuoteFlashDirection>();
+
 const TickerListHeader = memo(function TickerListHeader({
   columns,
+  contentWidth,
   headerScrollRef,
   sortColumnId,
   sortDirection,
   onHeaderClick,
+  onSizeChange,
 }: {
   columns: ColumnConfig[];
+  contentWidth: number;
   headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
   sortColumnId?: string | null;
   sortDirection?: "asc" | "desc";
   onHeaderClick?: (columnId: string) => void;
+  onSizeChange?: () => void;
 }) {
   return (
-    <scrollbox
+    <ScrollBox
       ref={headerScrollRef}
+      width="100%"
       height={1}
+      backgroundColor={colors.panel}
       scrollX
       focusable={false}
+      onSizeChange={onSizeChange}
     >
-      <box
+      <Box
         flexDirection="row"
         height={1}
-        width="100%"
+        {...tableContentWidthProps(contentWidth)}
         paddingX={1}
         backgroundColor={colors.panel}
       >
@@ -101,23 +124,23 @@ const TickerListHeader = memo(function TickerListHeader({
           const indicator = isSorted ? (sortDirection === "asc" ? " \u25B2" : " \u25BC") : "";
           const labelText = column.label + indicator;
           return (
-            <box
+            <Box
               key={column.id}
               width={column.width + 1}
               backgroundColor={colors.panel}
-              onMouseDown={onHeaderClick ? (event) => {
-                event.preventDefault();
+              onMouseDown={onHeaderClick ? (event: TableMouseEvent) => {
+                event.preventDefault?.();
                 onHeaderClick(column.id);
               } : undefined}
             >
-              <text attributes={TextAttributes.BOLD} fg={isSorted ? colors.text : colors.textDim}>
+              <Text attributes={TextAttributes.BOLD} fg={isSorted ? colors.text : colors.textDim}>
                 {padTo(labelText, column.width, column.align)}
-              </text>
-            </box>
+              </Text>
+            </Box>
           );
         })}
-      </box>
-    </scrollbox>
+      </Box>
+    </ScrollBox>
   );
 });
 
@@ -165,8 +188,11 @@ const TickerListRow = memo(function TickerListRow({
   setCursorSymbol,
   resolveCell,
   onRowActivate,
+  onRowContextMenu,
+  openContextMenuOnMouseDown,
   showSparklines,
   priceHistory,
+  contentWidth,
 }: {
   columns: ColumnConfig[];
   ticker: TickerRecord;
@@ -179,8 +205,11 @@ const TickerListRow = memo(function TickerListRow({
   setCursorSymbol: (symbol: string) => void;
   resolveCell: ResolveTickerTableCell;
   onRowActivate?: (ticker: TickerRecord) => void;
+  onRowContextMenu: (ticker: TickerRecord, financials: TickerFinancials | undefined, event: unknown) => void;
+  openContextMenuOnMouseDown: boolean;
   showSparklines?: boolean;
   priceHistory?: PricePoint[];
+  contentWidth: number;
 }) {
   const lastActivatedAtRef = useRef<number | null>(null);
   const rowBg = isSelected ? colors.selected : isHovered ? hoverBg() : colors.bg;
@@ -190,16 +219,29 @@ const TickerListRow = memo(function TickerListRow({
     : null;
 
   return (
-    <box
+    <Box
       flexDirection="row"
       height={1}
+      {...tableContentWidthProps(contentWidth)}
       paddingX={1}
       backgroundColor={rowBg}
+      data-gloom-context-menu-surface="true"
       onMouseMove={() => setHoveredIdx(index)}
-      onMouseDown={(event) => {
-        event.preventDefault();
+      onMouseDown={(event: TableMouseEvent) => {
         setCursorSymbol(ticker.metadata.ticker);
+        if (event.button === 2) {
+          if (openContextMenuOnMouseDown) {
+            onRowContextMenu(ticker, financials, event);
+          }
+          return;
+        }
+        event.preventDefault?.();
         if (!onRowActivate) return;
+        if (typeof event.detail === "number" && event.detail >= 2) {
+          lastActivatedAtRef.current = null;
+          onRowActivate(ticker);
+          return;
+        }
         const now = Date.now();
         if (lastActivatedAtRef.current != null && now - lastActivatedAtRef.current <= 350) {
           lastActivatedAtRef.current = null;
@@ -208,6 +250,10 @@ const TickerListRow = memo(function TickerListRow({
         }
         lastActivatedAtRef.current = now;
       }}
+      onContextMenu={(event: unknown) => {
+        setCursorSymbol(ticker.metadata.ticker);
+        onRowContextMenu(ticker, financials, event);
+      }}
     >
       {columns.map((column) => {
         const { text, color } = resolveCell(column, ticker, financials);
@@ -218,19 +264,19 @@ const TickerListRow = memo(function TickerListRow({
           : baseFg;
 
         return (
-          <box key={column.id} width={column.width + 1}>
-            <text fg={cellFg}>
+          <Box key={column.id} width={column.width + 1}>
+            <Text fg={cellFg}>
               {padTo(text, column.width, column.align)}
-            </text>
-          </box>
+            </Text>
+          </Box>
         );
       })}
       {sparkline && (
-        <box width={12}>
-          <text content={sparkline} />
-        </box>
+        <Box width={12}>
+          <Text content={sparkline} />
+        </Box>
       )}
-    </box>
+    </Box>
   );
 }, (previous, next) => (
   previous.columns === next.columns
@@ -244,8 +290,11 @@ const TickerListRow = memo(function TickerListRow({
   && previous.setCursorSymbol === next.setCursorSymbol
   && previous.resolveCell === next.resolveCell
   && previous.onRowActivate === next.onRowActivate
+  && previous.onRowContextMenu === next.onRowContextMenu
+  && previous.openContextMenuOnMouseDown === next.openContextMenuOnMouseDown
   && previous.showSparklines === next.showSparklines
   && previous.priceHistory === next.priceHistory
+  && previous.contentWidth === next.contentWidth
 ));
 
 export function TickerListTable({
@@ -269,36 +318,151 @@ export function TickerListTable({
   emptyTitle = "No tickers.",
   emptyHint = "Press Ctrl+P to add one.",
   showSparklines,
+  virtualize = true,
+  overscan = 4,
 }: TickerListTableProps) {
-  const safeFlashSymbols = flashSymbols ?? new Map<string, QuoteFlashDirection>();
+  const internalHeaderScrollRef = useRef<ScrollBoxRenderable>(null);
+  const internalScrollRef = useRef<ScrollBoxRenderable>(null);
+  const effectiveHeaderScrollRef = headerScrollRef ?? internalHeaderScrollRef;
+  const effectiveScrollRef = scrollRef ?? internalScrollRef;
+  const hoveredIdxRef = useRef(hoveredIdx);
+  const appViewport = useViewport();
+  const renderer = useRendererHost();
+  const { showContextMenu } = useContextMenu();
+  const { nativeContextMenu } = useUiCapabilities();
+  const [scrollVersion, setScrollVersion] = useState(0);
+  hoveredIdxRef.current = hoveredIdx;
+  const safeFlashSymbols = flashSymbols ?? EMPTY_FLASH_SYMBOLS;
+  const tableWidth = useMemo(
+    () => columns.reduce((sum, column) => sum + column.width + 1, 2) + (showSparklines ? 12 : 0),
+    [columns, showSparklines],
+  );
+  const { contentWidth, measureContentWidth } = useMeasuredTableContentWidth(
+    tableWidth,
+    effectiveHeaderScrollRef,
+    effectiveScrollRef,
+  );
+  const scrollTop = virtualize ? (effectiveScrollRef.current?.scrollTop ?? 0) : 0;
+  const measuredViewportHeight = effectiveScrollRef.current?.viewport?.height;
+  const viewportHeight = virtualize
+    ? Math.max(
+        1,
+        Math.min(
+          measuredViewportHeight ?? Math.min(tickers.length, 16),
+          Math.max(1, Math.ceil(appViewport.height)),
+        ),
+      )
+    : tickers.length;
+  const startIndex = virtualize ? Math.max(scrollTop - overscan, 0) : 0;
+  const endIndex = virtualize
+    ? Math.min(startIndex + viewportHeight + overscan * 2, tickers.length)
+    : tickers.length;
+  const visibleTickers = useMemo(
+    () => measurePerf(
+      "ticker-list-table.visible-rows",
+      () => tickers.slice(startIndex, endIndex),
+      {
+        itemCount: tickers.length,
+        measuredViewportHeight,
+        startIndex,
+        endIndex,
+        viewportHeight,
+        virtualize,
+      },
+    ),
+    [
+      appViewport.height,
+      endIndex,
+      measuredViewportHeight,
+      scrollVersion,
+      startIndex,
+      tickers,
+      tickers.length,
+      viewportHeight,
+      virtualize,
+    ],
+  );
+  const handleBodyScrollActivity = useCallback(() => {
+    if (virtualize) {
+      setScrollVersion((current) => current + 1);
+    }
+    onBodyScrollActivity?.();
+  }, [onBodyScrollActivity, virtualize]);
+  const syncHeader = useCallback(() => {
+    syncHeaderScroll?.();
+  }, [syncHeaderScroll]);
+  const scheduleBodyScrollActivity = useRafCallback(handleBodyScrollActivity);
+  const scheduleHeaderScrollSync = useRafCallback(syncHeader);
+  const setHoveredIdxIfChanged = useCallback((index: number | null) => {
+    if (hoveredIdxRef.current === index) return;
+    setHoveredIdx(index);
+  }, [setHoveredIdx]);
+  const handleRowContextMenu = useCallback((
+    ticker: TickerRecord,
+    financials: TickerFinancials | undefined,
+    event: unknown,
+  ) => {
+    const registry = getSharedRegistry() ?? null;
+    void showContextMenu(
+      {
+        kind: "ticker",
+        symbol: ticker.metadata.ticker,
+        ticker,
+        financials: financials ?? null,
+      },
+      tickerContextMenuItems({
+        ticker,
+        financials: financials ?? null,
+        registry,
+        copyText: renderer.copyText.bind(renderer),
+      }),
+      event as { preventDefault?: () => void; stopPropagation?: () => void },
+    );
+  }, [renderer, showContextMenu]);
 
   return (
-    <>
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      flexBasis={0}
+      width="100%"
+      backgroundColor={colors.bg}
+      overflow="hidden"
+    >
       <TickerListHeader
         columns={columns}
-        headerScrollRef={headerScrollRef}
+        contentWidth={contentWidth}
+        headerScrollRef={effectiveHeaderScrollRef}
         sortColumnId={sortColumnId}
         sortDirection={sortDirection}
         onHeaderClick={onHeaderClick}
+        onSizeChange={measureContentWidth}
       />
 
-      <scrollbox
-        ref={scrollRef}
+      <ScrollBox
+        ref={effectiveScrollRef}
+        width="100%"
         flexGrow={1}
+        flexBasis={0}
+        backgroundColor={colors.bg}
         scrollX
         scrollY
         focusable={false}
-        onMouseDown={syncHeaderScroll ? () => queueMicrotask(syncHeaderScroll) : undefined}
-        onMouseUp={onBodyScrollActivity ? () => queueMicrotask(onBodyScrollActivity) : undefined}
-        onMouseDrag={onBodyScrollActivity ? () => queueMicrotask(onBodyScrollActivity) : undefined}
-        onMouseScroll={onBodyScrollActivity ? () => queueMicrotask(onBodyScrollActivity) : undefined}
+        onMouseDown={scheduleHeaderScrollSync}
+        onMouseUp={scheduleBodyScrollActivity}
+        onMouseDrag={scheduleBodyScrollActivity}
+        onMouseScroll={scheduleBodyScrollActivity}
+        onSizeChange={measureContentWidth}
       >
         {tickers.length === 0 ? (
-          <box paddingX={1} paddingY={1}>
+          <Box width="100%" paddingX={1} paddingY={1}>
             <EmptyState title={emptyTitle} hint={emptyHint} />
-          </box>
+          </Box>
         ) : (
-          tickers.map((ticker, index) => {
+          <>
+            {virtualize && startIndex > 0 && <Box height={startIndex} />}
+            {visibleTickers.map((ticker, visibleIndex) => {
+              const index = startIndex + visibleIndex;
             return (
               <TickerListRow
                 key={ticker.metadata.ticker}
@@ -309,17 +473,24 @@ export function TickerListTable({
                 isHovered={index === hoveredIdx && ticker.metadata.ticker !== cursorSymbol}
                 financials={financialsMap.get(ticker.metadata.ticker)}
                 flashDirection={safeFlashSymbols.get(ticker.metadata.ticker)}
-                setHoveredIdx={setHoveredIdx}
+                setHoveredIdx={setHoveredIdxIfChanged}
                 setCursorSymbol={setCursorSymbol}
                 resolveCell={resolveCell}
                 onRowActivate={onRowActivate}
+                onRowContextMenu={handleRowContextMenu}
+                openContextMenuOnMouseDown={nativeContextMenu !== true}
                 showSparklines={showSparklines}
                 priceHistory={financialsMap.get(ticker.metadata.ticker)?.priceHistory}
+                contentWidth={contentWidth}
               />
             );
-          })
+            })}
+            {virtualize && endIndex < tickers.length && (
+              <Box height={Math.max(tickers.length - endIndex, 0)} />
+            )}
+          </>
         )}
-      </scrollbox>
-    </>
+      </ScrollBox>
+    </Box>
   );
 }

package/src/components/toggle-list.tsx

@@ -1,12 +1,14 @@
-import { TextAttributes } from "@opentui/core";
+import { Box, Text, useUiHost } from "../ui";
+import { TextAttributes } from "../ui";
 import { colors } from "../theme/colors";
-import { ListView, type ListViewItem } from "./ui/list-view";
+import { ListView, type ListRowState, type ListViewItem } from "./ui/list-view";
 
 export interface ToggleListItem {
   id: string;
   label: string;
   enabled: boolean;
   description?: string;
+  disabled?: boolean;
 }
 
 export interface ToggleListProps {
@@ -21,6 +23,91 @@ export interface ToggleListProps {
   scrollable?: boolean;
   showSelectedDescription?: boolean;
   rowIdPrefix?: string;
+  rowGap?: number;
+  rowHeight?: number;
+  surface?: "framed" | "plain";
+}
+
+function DesktopToggleRow({
+  item,
+  state,
+  rowIdPrefix,
+  enabled,
+}: {
+  item: ListViewItem;
+  state: ListRowState;
+  rowIdPrefix?: string;
+  enabled: boolean;
+}) {
+  const checkboxBorder = enabled
+    ? colors.borderFocused
+    : state.selected
+    ? colors.textMuted
+    : colors.border;
+  const textColor = state.disabled
+    ? colors.textMuted
+    : state.selected
+    ? colors.text
+    : colors.textDim;
+
+  return (
+    <Box
+      id={rowIdPrefix ? `${rowIdPrefix}:${item.id}` : undefined}
+      flexDirection="row"
+      alignItems="center"
+      width="100%"
+      minWidth={0}
+      style={{
+        height: "100%",
+        gap: 10,
+        paddingInline: 10,
+        opacity: state.disabled ? 0.55 : 1,
+      }}
+    >
+      <Box
+        alignItems="center"
+        justifyContent="center"
+        backgroundColor={enabled ? colors.borderFocused : "transparent"}
+        style={{
+          width: 16,
+          height: 16,
+          minWidth: 16,
+          alignSelf: "center",
+          border: `1px solid ${checkboxBorder}`,
+          borderRadius: 4,
+          boxShadow: enabled
+            ? "inset 0 1px 0 rgba(255,255,255,0.28)"
+            : "inset 0 1px 0 rgba(255,255,255,0.05)",
+        }}
+      >
+        {enabled && (
+          <Text
+            fg={colors.bg}
+            attributes={TextAttributes.BOLD}
+            style={{ fontSize: 12, lineHeight: "14px", fontWeight: 800 }}
+          >
+            {"✓"}
+          </Text>
+        )}
+      </Box>
+      <Box minWidth={0} flexShrink={1}>
+        <Text
+          fg={textColor}
+          attributes={state.selected ? TextAttributes.BOLD : 0}
+          style={{
+            display: "block",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            fontWeight: state.selected ? 700 : 500,
+            lineHeight: "16px",
+          }}
+        >
+          {item.label}
+        </Text>
+      </Box>
+    </Box>
+  );
 }
 
 export function ToggleList({
@@ -34,11 +121,16 @@ export function ToggleList({
   scrollable,
   showSelectedDescription = true,
   rowIdPrefix,
+  rowGap,
+  rowHeight,
+  surface,
 }: ToggleListProps) {
+  const isDesktopWeb = useUiHost().kind === "desktop-web";
   const listItems: ListViewItem[] = items.map((item) => ({
     id: item.id,
     label: item.label,
     description: item.description,
+    disabled: item.disabled,
   }));
 
   return (
@@ -50,12 +142,26 @@ export function ToggleList({
       height={height}
       flexGrow={flexGrow}
       scrollable={scrollable}
+      rowGap={rowGap ?? (isDesktopWeb ? 0 : undefined)}
+      rowHeight={rowHeight}
+      surface={surface}
       onSelect={onSelect}
       onActivate={(item) => {
         onToggle?.(item.id);
       }}
       renderRow={(item, state, index) => {
         const toggleItem = items.find((entry) => entry.id === item.id);
+        if (isDesktopWeb) {
+          return (
+            <DesktopToggleRow
+              item={item}
+              state={state}
+              rowIdPrefix={rowIdPrefix}
+              enabled={toggleItem?.enabled === true}
+            />
+          );
+        }
+
         const checked = toggleItem?.enabled ? "\u2713" : " ";
         const activate = (event: any) => {
           event.stopPropagation?.();
@@ -64,22 +170,22 @@ export function ToggleList({
           onToggle?.(item.id);
         };
         return (
-          <box
+          <Box
             id={rowIdPrefix ? `${rowIdPrefix}:${item.id}` : undefined}
             flexDirection="row"
             onMouseDown={activate}
           >
-            <text fg={state.selected ? colors.selectedText : colors.textDim}>
+            <Text fg={state.selected ? colors.selectedText : colors.textDim}>
               {state.selected ? "\u25b8 " : "  "}
-            </text>
-            <text
+            </Text>
+            <Text
               fg={state.selected ? colors.text : colors.textDim}
               attributes={state.selected ? TextAttributes.BOLD : 0}
               onMouseDown={activate}
             >
               {`[${checked}] ${item.label}`}
-            </text>
-          </box>
+            </Text>
+          </Box>
         );
       }}
     />

package/src/components/ui/button.tsx

@@ -1,4 +1,6 @@
-import { TextAttributes } from "@opentui/core";
+import { Box, Text, useUiHost } from "../../ui";
+import { TextAttributes } from "../../ui";
+import { type ComponentType } from "react";
 import { colors } from "../../theme/colors";
 
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
@@ -43,10 +45,25 @@ export function Button({
   shortcut,
   width,
 }: ButtonProps) {
+  const HostButton = useUiHost().Button as ComponentType<ButtonProps> | undefined;
+  if (HostButton) {
+    return (
+      <HostButton
+        label={label}
+        onPress={onPress}
+        variant={variant}
+        disabled={disabled}
+        active={active}
+        shortcut={shortcut}
+        width={width}
+      />
+    );
+  }
+
   const palette = resolveButtonColors(variant, active, disabled);
 
   return (
-    <box
+    <Box
       width={width}
       height={1}
       flexDirection="row"
@@ -55,23 +72,14 @@ export function Button({
         if (!disabled) onPress?.();
       }}
     >
-      <text fg={palette.fg} attributes={active ? TextAttributes.BOLD : 0}>
+      <Text fg={palette.fg} attributes={active ? TextAttributes.BOLD : 0}>
         {` ${label} `}
-      </text>
+      </Text>
       {shortcut && (
-        <text fg={disabled ? colors.textMuted : colors.textDim}>
+        <Text fg={disabled ? colors.textMuted : colors.textDim}>
           {` ${shortcut}`}
-        </text>
+        </Text>
       )}
-    </box>
+    </Box>
   );
 }
-
-export interface IconButtonProps extends Omit<ButtonProps, "label"> {
-  icon: string;
-  label?: string;
-}
-
-export function IconButton({ icon, label, ...props }: IconButtonProps) {
-  return <Button label={label ? `${icon} ${label}` : icon} {...props} />;
-}