gloomberb 0.5.1 → 0.6.0

package/src/plugins/builtin/ticker-detail/financials-tab.tsx

@@ -1,7 +1,9 @@
-import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
-import { useKeyboard } from "@opentui/react";
+import { Box, ScrollBox, Text, useUiCapabilities } from "../../../ui";
+import { TextAttributes, type ScrollBoxRenderable } from "../../../ui";
+import { useShortcut } from "../../../react/input";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { usePaneTicker } from "../../../state/app-context";
+import { Tabs, usePaneFooter } from "../../../components";
 import { colors, priceColor } from "../../../theme/colors";
 import type { FinancialStatement } from "../../../types/financials";
 import {
@@ -78,6 +80,12 @@ const FINANCIAL_SUB_TABS: FinancialSubTab[] = [
   },
 ];
 
+const FINANCIAL_SUB_TABS_WIDTH = FINANCIAL_SUB_TABS.reduce(
+  (sum, tab) => sum + tab.name.length + 2,
+  0,
+);
+const FINANCIAL_PERIOD_TABS_WIDTH = "Annual".length + "Quarterly".length + 4;
+
 const FLOW_KEYS = new Set<string>([
   "totalRevenue",
   "costOfRevenue",
@@ -246,6 +254,34 @@ export function ResolvedFinancialsTab({
   const [subTabIdx, setSubTabIdx] = useState(0);
   const bodyScrollRef = useRef<ScrollBoxRenderable>(null);
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
+  const resolvedPeriodForFooter = resolveFinancialPeriod(period, hasAnnualStatements, hasQuarterlyStatements);
+  const { nativePaneChrome } = useUiCapabilities();
+
+  usePaneFooter("financials", () => ({
+    info: financials ? [
+      { id: "section", parts: [{ text: FINANCIAL_SUB_TABS[subTabIdx]?.name ?? "Financials", tone: "value", bold: true }] },
+      { id: "period", parts: [{ text: resolvedPeriodForFooter === "annual" ? "Annual" : "Quarterly", tone: "muted" }] },
+    ] : [],
+    hints: [
+      {
+        id: "section",
+        key: "1-3",
+        label: "section",
+        disabled: !financials,
+        onPress: () => setSubTabIdx((current) => (current + 1) % FINANCIAL_SUB_TABS.length),
+      },
+      {
+        id: "period",
+        key: "a/q",
+        label: "period",
+        disabled: !hasAnnualStatements && !hasQuarterlyStatements,
+        onPress: () => {
+          if (resolvedPeriodForFooter === "annual" && hasQuarterlyStatements) setPeriod("quarterly");
+          else if (hasAnnualStatements) setPeriod("annual");
+        },
+      },
+    ],
+  }), [financials, hasAnnualStatements, hasQuarterlyStatements, resolvedPeriodForFooter, subTabIdx]);
 
   const syncHeaderScroll = useCallback(() => {
     const body = bodyScrollRef.current;
@@ -255,7 +291,7 @@ export function ResolvedFinancialsTab({
     }
   }, []);
 
-  useKeyboard((event) => {
+  useShortcut((event) => {
     if (!focused) return;
     if (event.name === "a" && hasAnnualStatements) setPeriod("annual");
     else if (event.name === "q" && hasQuarterlyStatements) setPeriod("quarterly");
@@ -273,7 +309,7 @@ export function ResolvedFinancialsTab({
   }, [hasAnnualStatements, hasQuarterlyStatements, period]);
 
   if (!financials || (!hasAnnualStatements && !hasQuarterlyStatements)) {
-    return <text fg={colors.textDim}>No financial data available.</text>;
+    return <Text fg={colors.textDim}>No financial data available.</Text>;
   }
 
   const subTab = FINANCIAL_SUB_TABS[subTabIdx]!;
@@ -310,55 +346,69 @@ export function ResolvedFinancialsTab({
   }, [displayStatements.length, isAnnual, subTabIdx, subTab.metrics.length]);
 
   return (
-    <box flexDirection="column" flexGrow={1} paddingX={2} paddingBottom={1}>
-      <box flexDirection="row" height={1}>
-        {FINANCIAL_SUB_TABS.map((tab, index) => (
-          <box key={tab.key} flexDirection="row" onMouseDown={() => setSubTabIdx(index)}>
-            <text
-              fg={index === subTabIdx ? colors.textBright : colors.textDim}
-              attributes={index === subTabIdx ? TextAttributes.BOLD : 0}
-            >
-              {`${index + 1}:${tab.name}`}
-            </text>
-            {index < FINANCIAL_SUB_TABS.length - 1 && <text fg={colors.textMuted}>{" │ "}</text>}
-          </box>
-        ))}
-        <box flexGrow={1} />
-        <box onMouseDown={() => setPeriod("annual")}>
-          <text fg={isAnnual ? colors.textBright : colors.textDim} attributes={isAnnual ? TextAttributes.BOLD : 0}>a</text>
-        </box>
-        <text fg={colors.textMuted}>/</text>
-        <box onMouseDown={() => setPeriod("quarterly")}>
-          <text fg={!isAnnual ? colors.textBright : colors.textDim} attributes={!isAnnual ? TextAttributes.BOLD : 0}>q</text>
-        </box>
-      </box>
-      <box height={1} />
-
-      <scrollbox id={headerScrollId} ref={headerScrollRef} height={1} scrollX focusable={false}>
-        <box flexDirection="row" width={tableWidth} height={1}>
-          <box width={FINANCIAL_LABEL_W}>
-            <text attributes={TextAttributes.BOLD} fg={colors.textDim}>
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      flexBasis={0}
+      paddingX={2}
+      paddingBottom={nativePaneChrome ? 0 : 1}
+      overflow="hidden"
+    >
+      <Box flexDirection="row" height={1}>
+        <Box width={FINANCIAL_SUB_TABS_WIDTH} height={1}>
+          <Tabs
+            tabs={FINANCIAL_SUB_TABS.map((tab, index) => ({
+              label: tab.name,
+              value: String(index),
+            }))}
+            activeValue={String(subTabIdx)}
+            onSelect={(value) => setSubTabIdx(Number(value))}
+            compact
+            variant="bare"
+          />
+        </Box>
+        <Box flexGrow={1} />
+        <Box width={FINANCIAL_PERIOD_TABS_WIDTH} height={1}>
+          <Tabs
+            tabs={[
+              { label: "Annual", value: "annual", disabled: !hasAnnualStatements },
+              { label: "Quarterly", value: "quarterly", disabled: !hasQuarterlyStatements },
+            ]}
+            activeValue={isAnnual ? "annual" : "quarterly"}
+            onSelect={(value) => setPeriod(value as FinancialPeriod)}
+            compact
+            variant="bare"
+          />
+        </Box>
+      </Box>
+      <Box height={1} />
+
+      <ScrollBox id={headerScrollId} ref={headerScrollRef} height={1} scrollX focusable={false}>
+        <Box flexDirection="row" width={tableWidth} height={1}>
+          <Box width={FINANCIAL_LABEL_W}>
+            <Text attributes={TextAttributes.BOLD} fg={colors.textDim}>
               {isAnnual ? "Annual" : "Quarterly"}
-            </text>
-          </box>
+            </Text>
+          </Box>
           {displayStatements.map((statement) => (
-            <box key={statement.date} width={FINANCIAL_COL_W}>
-              <text
+            <Box key={statement.date} width={FINANCIAL_COL_W}>
+              <Text
                 attributes={TextAttributes.BOLD}
                 fg={statement.date === "TTM" ? colors.textBright : colors.textDim}
               >
                 {formatFinancialHeader(statement.date)}
-              </text>
-            </box>
+              </Text>
+            </Box>
           ))}
-        </box>
-      </scrollbox>
-      <box height={1} />
+        </Box>
+      </ScrollBox>
+      <Box height={1} />
 
-      <scrollbox
+      <ScrollBox
         id={bodyScrollId}
         ref={bodyScrollRef}
         flexGrow={1}
+        flexBasis={0}
         scrollX
         scrollY
         focusable={false}
@@ -367,7 +417,7 @@ export function ResolvedFinancialsTab({
         onMouseDrag={() => queueMicrotask(syncHeaderScroll)}
         onMouseScroll={() => queueMicrotask(syncHeaderScroll)}
       >
-        <box flexDirection="column" width={tableWidth} paddingBottom={1}>
+        <Box flexDirection="column" width={tableWidth} paddingBottom={1}>
           {subTab.metrics.map(({ label, key, format }, index) => {
             const isEps = format === "eps";
             const allValues = displayStatements.map((statement) => statement[key] as number | undefined);
@@ -375,12 +425,12 @@ export function ResolvedFinancialsTab({
             const unitLabel = suffix ? `${label} (${suffix})` : label;
 
             return (
-              <box key={key} flexDirection="column" width={tableWidth}>
-                {index > 0 && index % 4 === 0 && <box height={1} width={tableWidth} />}
-                <box flexDirection="row" width={tableWidth} height={1}>
-                  <box width={FINANCIAL_LABEL_W}>
-                    <text fg={colors.textDim}>{unitLabel}</text>
-                  </box>
+              <Box key={key} flexDirection="column" width={tableWidth}>
+                {index > 0 && index % 4 === 0 && <Box height={1} width={tableWidth} />}
+                <Box flexDirection="row" width={tableWidth} height={1}>
+                  <Box width={FINANCIAL_LABEL_W}>
+                    <Text fg={colors.textDim}>{unitLabel}</Text>
+                  </Box>
                   {displayStatements.map((statement) => {
                     const value = statement[key] as number | undefined;
                     const previous = previousStatementMap.get(statement.date);
@@ -394,18 +444,18 @@ export function ResolvedFinancialsTab({
                     const cell = formatFinancialCell(formattedValue, growth);
 
                     return (
-                      <box key={statement.date} width={FINANCIAL_COL_W} flexDirection="row">
-                        <text fg={colors.text}>{cell.valueText}</text>
-                        <text fg={growth != null ? priceColor(growth) : colors.text}>{cell.growthText}</text>
-                      </box>
+                      <Box key={statement.date} width={FINANCIAL_COL_W} flexDirection="row">
+                        <Text fg={colors.text}>{cell.valueText}</Text>
+                        <Text fg={growth != null ? priceColor(growth) : colors.text}>{cell.growthText}</Text>
+                      </Box>
                     );
                   })}
-                </box>
-              </box>
+                </Box>
+              </Box>
             );
           })}
-        </box>
-      </scrollbox>
-    </box>
+        </Box>
+      </ScrollBox>
+    </Box>
   );
 }