gloomberb 0.5.1 → 0.6.0

package/src/plugins/prediction-markets/controller.ts

@@ -1,8 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { type InputRenderable, type ScrollBoxRenderable } from "@opentui/core";
-import { useKeyboard } from "@opentui/react";
+import { type InputRenderable, type ScrollBoxRenderable } from "../../ui";
+import { useShortcut, useViewport } from "../../react/input";
 import { usePaneInstance } from "../../state/app-context";
-import { usePluginPaneState, usePluginState } from "../plugin-runtime";
+import {
+  useDebouncedPluginPaneState,
+  usePluginPaneState,
+  usePluginState,
+} from "../plugin-runtime";
 import { getAdjacentPredictionCategoryId } from "./categories";
 import { usePredictionMarketsDataState } from "./controller-data";
 import { resolvePredictionKeyboardCommand } from "./keyboard";
@@ -29,6 +33,7 @@ import type {
 } from "./types";
 
 const KEYBOARD_DETAIL_LOAD_DELAY_MS = 140;
+const SELECTION_PERSIST_DEBOUNCE_MS = 300;
 
 export function usePredictionMarketsController({
   focused,
@@ -71,11 +76,18 @@ export function usePredictionMarketsController({
   );
   const [historyRange, setHistoryRange] =
     usePluginPaneState<PredictionHistoryRange>("historyRange", "1M");
-  const [selectedRowKey, setSelectedRowKey] = usePluginPaneState<
-    string | null
-  >("selectedRowKey", null);
+  const [selectedRowKey, setSelectedRowKey] =
+    useDebouncedPluginPaneState<string | null>(
+      "selectedRowKey",
+      null,
+      SELECTION_PERSIST_DEBOUNCE_MS,
+    );
   const [selectedDetailMarketKey, setSelectedDetailMarketKey] =
-    usePluginPaneState<string | null>("selectedDetailMarketKey", null);
+    useDebouncedPluginPaneState<string | null>(
+      "selectedDetailMarketKey",
+      null,
+      SELECTION_PERSIST_DEBOUNCE_MS,
+    );
   const defaultSortPreference = useMemo(
     () => getDefaultPredictionSort(paneSettings.defaultBrowseTab),
     [paneSettings.defaultBrowseTab],
@@ -91,10 +103,10 @@ export function usePredictionMarketsController({
       null,
     );
 
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const [detailOpen, setDetailOpen] = useState(false);
   const [searchFocused, setSearchFocused] = useState(false);
   const [initialParamsApplied, setInitialParamsApplied] = useState(false);
+  const appViewport = useViewport();
 
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
@@ -131,22 +143,6 @@ export function usePredictionMarketsController({
     watchlistSet,
   });
 
-  const syncHeaderScroll = useCallback(() => {
-    const bodyScrollBox = scrollRef.current;
-    const headerScrollBox = headerScrollRef.current;
-    if (
-      bodyScrollBox &&
-      headerScrollBox &&
-      headerScrollBox.scrollLeft !== bodyScrollBox.scrollLeft
-    ) {
-      headerScrollBox.scrollLeft = bodyScrollBox.scrollLeft;
-    }
-  }, []);
-
-  const onBodyScrollActivity = useCallback(() => {
-    syncHeaderScroll();
-  }, [syncHeaderScroll]);
-
   useEffect(() => {
     if (paneSettings.hideTabs && venueScope !== paneSettings.lockedVenueScope) {
       setVenueScope(paneSettings.lockedVenueScope);
@@ -213,7 +209,6 @@ export function usePredictionMarketsController({
     if (previousFilterResetKey == null) {
       return;
     }
-    setHoveredIdx(null);
     const scrollBox = scrollRef.current;
     if (scrollBox) {
       scrollBox.scrollTop = 0;
@@ -304,18 +299,22 @@ export function usePredictionMarketsController({
     if (data.selectedIndex < 0) return;
     const scrollBox = scrollRef.current;
     if (!scrollBox?.viewport) return;
+    const viewportHeight = Math.max(
+      1,
+      Math.min(scrollBox.viewport.height, Math.ceil(appViewport.height)),
+    );
     if (data.selectedIndex < scrollBox.scrollTop) {
       scrollBox.scrollTop = data.selectedIndex;
     } else if (
       data.selectedIndex >=
-      scrollBox.scrollTop + scrollBox.viewport.height
+      scrollBox.scrollTop + viewportHeight
     ) {
       scrollBox.scrollTop = Math.max(
         0,
-        data.selectedIndex - scrollBox.viewport.height + 1,
+        data.selectedIndex - viewportHeight + 1,
       );
     }
-  }, [data.selectedIndex]);
+  }, [appViewport.height, data.selectedIndex]);
 
   useEffect(() => {
     if (!searchFocused) return;
@@ -352,9 +351,11 @@ export function usePredictionMarketsController({
       data.actions.setNextDetailLoadDelay(
         options?.debounceDetail ? KEYBOARD_DETAIL_LOAD_DELAY_MS : 0,
       );
-      setSelectedRowKey(rowKey);
+      setSelectedRowKey(rowKey, {
+        immediate: !options?.debounceDetail || selectedRowKey == null,
+      });
     },
-    [data.actions, setSelectedRowKey],
+    [data.actions, selectedRowKey, setSelectedRowKey],
   );
 
   const openSelectedRow = useCallback(
@@ -363,8 +364,8 @@ export function usePredictionMarketsController({
       if (!row) return;
       setSearchFocused(false);
       data.actions.setNextDetailLoadDelay(0);
-      setSelectedRowKey(row.key);
-      setSelectedDetailMarketKey(row.focusMarketKey);
+      setSelectedRowKey(row.key, { immediate: true });
+      setSelectedDetailMarketKey(row.focusMarketKey, { immediate: true });
       setDetailOpen(true);
     },
     [data.actions, data.visibleRows, setSelectedDetailMarketKey, setSelectedRowKey],
@@ -383,8 +384,8 @@ export function usePredictionMarketsController({
         setSelectedDetailMarketKey(null);
         return;
       }
-      setSelectedRowKey(row.key);
-      setSelectedDetailMarketKey(marketKey);
+      setSelectedRowKey(row.key, { immediate: true });
+      setSelectedDetailMarketKey(marketKey, { immediate: true });
       setDetailOpen(true);
     },
     [
@@ -396,37 +397,11 @@ export function usePredictionMarketsController({
     ],
   );
 
-  const clearSelection = useCallback(() => {
-    data.actions.setNextDetailLoadDelay(0);
-    setDetailOpen(false);
-    setSelectedRowKey(null);
-    setSelectedDetailMarketKey(null);
-  }, [
-    data.actions,
-    setDetailOpen,
-    setSelectedDetailMarketKey,
-    setSelectedRowKey,
-  ]);
-
   const closeDetail = useCallback(() => {
     setDetailOpen(false);
     setSearchFocused(false);
   }, []);
 
-  const openDetail = useCallback(() => {
-    if (!data.selectedRow) return;
-    if (
-      !selectedDetailMarketKey ||
-      !data.selectedRow.markets.some(
-        (market) => market.key === selectedDetailMarketKey,
-      )
-    ) {
-      setSelectedDetailMarketKey(data.selectedRow.focusMarketKey);
-    }
-    setDetailOpen(true);
-    setSearchFocused(false);
-  }, [data.selectedRow, selectedDetailMarketKey, setSelectedDetailMarketKey]);
-
   const setVenue = useCallback(
     (nextVenueScope: string) => {
       const typed = nextVenueScope as PredictionVenueScope;
@@ -512,8 +487,6 @@ export function usePredictionMarketsController({
     }) => {
       if (!focused) return;
       const command = resolvePredictionKeyboardCommand(event);
-      const key = event.name?.toLowerCase();
-      const isEnter = key === "enter" || key === "return";
 
       if (searchFocused) {
         if (command === "escape") {
@@ -571,39 +544,6 @@ export function usePredictionMarketsController({
         return;
       }
 
-      if (isEnter && data.selectedRow) {
-        event.stopPropagation?.();
-        event.preventDefault?.();
-        openDetail();
-        return;
-      }
-
-      if (command === "move-down") {
-        event.stopPropagation?.();
-        event.preventDefault?.();
-        if (data.visibleRows.length === 0) return;
-        const nextIndex =
-          data.selectedIndex >= 0
-            ? Math.min(data.selectedIndex + 1, data.visibleRows.length - 1)
-            : 0;
-        setBrowseSelection(data.visibleRows[nextIndex]!.key, {
-          debounceDetail: true,
-        });
-        return;
-      }
-
-      if (command === "move-up") {
-        event.stopPropagation?.();
-        event.preventDefault?.();
-        if (data.visibleRows.length === 0) return;
-        const nextIndex =
-          data.selectedIndex >= 0 ? Math.max(data.selectedIndex - 1, 0) : 0;
-        setBrowseSelection(data.visibleRows[nextIndex]!.key, {
-          debounceDetail: true,
-        });
-        return;
-      }
-
       if (!paneSettings.hideTabs && command === "previous-venue-tab") {
         event.stopPropagation?.();
         event.preventDefault?.();
@@ -662,27 +602,23 @@ export function usePredictionMarketsController({
       categoryId,
       cycleDetailOutcome,
       detailOpen,
-      data.selectedIndex,
       data.selectedRow,
       data.sortedOutcomeMarkets.length,
-      data.visibleRows,
       detailTab,
       effectiveVenueScope,
       focusSearch,
       focused,
-      openDetail,
       paneSettings.hideTabs,
       scrollDetailBy,
       searchFocused,
       selectBrowseTab,
       selectCategory,
-      setBrowseSelection,
       setVenue,
       toggleWatchlist,
     ],
   );
 
-  useKeyboard(handleKeyboard);
+  useShortcut(handleKeyboard);
 
   const searchPending = searchQuery.trim() !== data.debouncedSearchQuery.trim();
   const searchLoading =
@@ -703,7 +639,6 @@ export function usePredictionMarketsController({
     effectiveVenueScope,
     headerScrollRef,
     historyRange,
-    hoveredIdx,
     lastRefreshAt: data.lastRefreshAt,
     scrollRef,
     searchFocused,
@@ -711,6 +646,7 @@ export function usePredictionMarketsController({
     searchLoading,
     searchQuery,
     selectedRow: data.selectedRow,
+    selectedIndex: data.selectedIndex,
     selectedSummary: data.selectedSummary,
     sortPreference,
     transportState: data.transportState,
@@ -720,10 +656,8 @@ export function usePredictionMarketsController({
     actions: {
       blurSearch,
       closeDetail,
-      clearSelection,
       focusSearch,
       handleSortHeaderClick,
-      openDetail,
       openSelectedRow,
       previewOrder,
       selectBrowseTab,
@@ -732,14 +666,9 @@ export function usePredictionMarketsController({
       setDetailTab,
       setBrowseSelection,
       setHistoryRange,
-      setHoveredIdx,
       setSearchQuery,
       setVenue,
       toggleWatchlist,
     },
-    layout: {
-      onBodyScrollActivity,
-      syncHeaderScroll,
-    },
   };
 }

package/src/plugins/prediction-markets/detail/book.tsx

@@ -1,4 +1,5 @@
-import { TextAttributes } from "@opentui/core";
+import { Box, Text } from "../../../ui";
+import { TextAttributes } from "../../../ui";
 import { colors } from "../../../theme/colors";
 import { formatNumber, padTo } from "../../../utils/format";
 import { formatPredictionProbability } from "../metrics";
@@ -18,19 +19,19 @@ function BookTable({
   onSelect: (level: PredictionBookLevel) => void;
 }) {
   return (
-    <box flexDirection="column" flexGrow={1}>
-      <box height={1}>
-        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+    <Box flexDirection="column" flexGrow={1}>
+      <Box height={1}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
           {title}
-        </text>
-      </box>
-      <box height={1}>
-        <text fg={colors.textDim}>
+        </Text>
+      </Box>
+      <Box height={1}>
+        <Text fg={colors.textDim}>
           {padTo("PRICE", 8)} {padTo("SIZE", 10)}
-        </text>
-      </box>
+        </Text>
+      </Box>
       {levels.slice(0, 10).map((level) => (
-        <box
+        <Box
           key={`${title}:${level.price}:${level.size}`}
           height={1}
           onMouseDown={(event) => {
@@ -38,13 +39,13 @@ function BookTable({
             onSelect(level);
           }}
         >
-          <text fg={colors.text}>
+          <Text fg={colors.text}>
             {`${padTo(formatPredictionProbability(level.price), 8)} ${padTo(formatNumber(level.size, 0), 10, "right")}`}
-          </text>
-        </box>
+          </Text>
+        </Box>
       ))}
-      {levels.length === 0 && <text fg={colors.textDim}>No levels.</text>}
-    </box>
+      {levels.length === 0 && <Text fg={colors.textDim}>No levels.</Text>}
+    </Box>
   );
 }
 
@@ -56,8 +57,8 @@ export function PredictionMarketBookView({
   onPreviewOrder: (intent: PredictionOrderPreviewIntent) => void;
 }) {
   return (
-    <box flexDirection="column" gap={1}>
-      <box flexDirection="row" gap={2}>
+    <Box flexDirection="column" gap={1}>
+      <Box flexDirection="row" gap={2}>
         <BookTable
           title="YES Bids"
           levels={detail.book.yesBids}
@@ -84,8 +85,8 @@ export function PredictionMarketBookView({
             })
           }
         />
-      </box>
-      <box flexDirection="row" gap={2}>
+      </Box>
+      <Box flexDirection="row" gap={2}>
         <BookTable
           title="NO Bids"
           levels={detail.book.noBids}
@@ -112,7 +113,7 @@ export function PredictionMarketBookView({
             })
           }
         />
-      </box>
-    </box>
+      </Box>
+    </Box>
   );
 }

package/src/plugins/prediction-markets/detail/outcomes.tsx

@@ -1,4 +1,5 @@
-import { TextAttributes } from "@opentui/core";
+import { Box, Text } from "../../../ui";
+import { TextAttributes } from "../../../ui";
 import { colors } from "../../../theme/colors";
 import { padTo } from "../../../utils/format";
 import {
@@ -26,29 +27,29 @@ export function PredictionMarketOutcomesView({
   const labelWidth = Math.max(detailWidth - 22, 12);
 
   return (
-    <box flexDirection="column">
-      <box height={1}>
-        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+    <Box flexDirection="column">
+      <Box height={1}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
           Outcomes
-        </text>
-      </box>
+        </Text>
+      </Box>
 
-      <box flexDirection="row" height={1}>
-        <box width={labelWidth + 1}>
-          <text fg={colors.textDim}>{padTo("TARGET", labelWidth)}</text>
-        </box>
-        <box width={8}>
-          <text fg={colors.textDim}>{padTo("ODDS", 7, "right")}</text>
-        </box>
-        <box width={13}>
-          <text fg={colors.textDim}>{padTo("24H VOL", 12, "right")}</text>
-        </box>
-      </box>
+      <Box flexDirection="row" height={1}>
+        <Box width={labelWidth + 1}>
+          <Text fg={colors.textDim}>{padTo("TARGET", labelWidth)}</Text>
+        </Box>
+        <Box width={8}>
+          <Text fg={colors.textDim}>{padTo("ODDS", 7, "right")}</Text>
+        </Box>
+        <Box width={13}>
+          <Text fg={colors.textDim}>{padTo("24H VOL", 12, "right")}</Text>
+        </Box>
+      </Box>
 
       {sortedOutcomes.map((market, index) => {
         const selected = market.key === selectedMarketKey;
         return (
-          <box
+          <Box
             key={market.key}
             flexDirection="row"
             height={1}
@@ -58,16 +59,16 @@ export function PredictionMarketOutcomesView({
               onSelectMarket(market.key);
             }}
           >
-            <box width={labelWidth + 1}>
-              <text
+            <Box width={labelWidth + 1}>
+              <Text
                 fg={selected ? colors.selectedText : colors.text}
                 attributes={selected ? TextAttributes.BOLD : 0}
               >
                 {padTo(market.marketLabel, labelWidth)}
-              </text>
-            </box>
-            <box width={8}>
-              <text
+              </Text>
+            </Box>
+            <Box width={8}>
+              <Text
                 fg={
                   selected
                     ? colors.selectedText
@@ -76,10 +77,10 @@ export function PredictionMarketOutcomesView({
                 }
               >
                 {padTo(formatPredictionPercent(market.yesPrice), 7, "right")}
-              </text>
-            </box>
-            <box width={13}>
-              <text fg={selected ? colors.selectedText : colors.textDim}>
+              </Text>
+            </Box>
+            <Box width={13}>
+              <Text fg={selected ? colors.selectedText : colors.textDim}>
                 {padTo(
                   formatPredictionMetric(
                     market.volume24h,
@@ -88,11 +89,11 @@ export function PredictionMarketOutcomesView({
                   12,
                   "right",
                 )}
-              </text>
-            </box>
-          </box>
+              </Text>
+            </Box>
+          </Box>
         );
       })}
-    </box>
+    </Box>
   );
 }

package/src/plugins/prediction-markets/detail/overview.tsx

@@ -1,4 +1,5 @@
-import { TextAttributes } from "@opentui/core";
+import { Box, Text } from "../../../ui";
+import { TextAttributes } from "../../../ui";
 import { colors } from "../../../theme/colors";
 import { formatPercentRaw } from "../../../utils/format";
 import { PredictionMarketChart } from "../chart";
@@ -30,8 +31,10 @@ export function PredictionMarketOverviewView({
   selectedRow: PredictionListRow | null;
   summary: PredictionMarketSummary;
 }) {
+  const textWidth = Math.max(detailWidth, 12);
+
   return (
-    <box flexDirection="column" gap={1}>
+    <Box flexDirection="column" gap={1}>
       {selectedRow?.kind === "group" && (
         <PredictionMarketOutcomesView
           detailWidth={detailWidth}
@@ -52,22 +55,24 @@ export function PredictionMarketOverviewView({
         maxLength={Math.max(detailWidth - 8, 12)}
       />
       {summary.description && (
-        <box flexDirection="column">
-          <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+        <Box flexDirection="column" width={textWidth}>
+          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
             Description
-          </text>
-          <text fg={colors.text}>{summary.description}</text>
-        </box>
+          </Text>
+          <Text fg={colors.text} width={textWidth} wrapMode="word" wrapText>
+            {summary.description}
+          </Text>
+        </Box>
       )}
-      <box height={1}>
-        <text fg={colors.textDim}>
+      <Box height={1}>
+        <Text fg={colors.textDim}>
           {detail?.history &&
           detail.history.length > 1 &&
           summary.yesPrice != null
             ? `Range move ${formatPercentRaw((((detail.history[detail.history.length - 1]?.close ?? summary.yesPrice) - (detail.history[0]?.close ?? summary.yesPrice)) / Math.max(detail.history[0]?.close ?? summary.yesPrice, 0.0001)) * 100)}`
             : "No extended move data."}
-        </text>
-      </box>
-    </box>
+        </Text>
+      </Box>
+    </Box>
   );
 }