gloomberb 0.5.0 → 0.6.0

package/src/components/feed-data-table-stack-view.tsx

@@ -0,0 +1,365 @@
+import { Box, ScrollBox, Text } from "../ui";
+import { TextAttributes, type ScrollBoxRenderable } from "../ui";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { colors } from "../theme/colors";
+import { formatTimeAgo } from "../utils/format";
+import { toTimestampMillis } from "../utils/timestamp";
+import { DataTableStackView } from "./data-table-stack-view";
+import { ExternalLink, type DataTableCell, type DataTableColumn } from "./ui";
+import { wrapTextLines } from "../utils/text-wrap";
+
+export interface FeedDataTableItem {
+  id: string;
+  eyebrow?: string;
+  title: string;
+  timestamp?: Date | string | null;
+  preview?: string | null;
+  detailTitle?: string;
+  detailMeta?: string[];
+  detailBody?: string | null;
+  detailNote?: string | null;
+}
+
+type DetailColumnId = "time" | "source" | "title";
+type DetailColumn = DataTableColumn & { id: DetailColumnId };
+
+interface DetailRow {
+  item: FeedDataTableItem;
+  itemIndex: number;
+}
+
+interface SortPreference {
+  columnId: DetailColumnId;
+  direction: "asc" | "desc";
+}
+
+interface FeedDataTableStackViewProps {
+  width: number;
+  height: number;
+  focused: boolean;
+  items: FeedDataTableItem[];
+  selectedIdx: number;
+  onSelect: (index: number) => void;
+  rootBefore?: ReactNode;
+  rootAfter?: ReactNode;
+  onRootKeyDown?: (event: {
+    name?: string;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+  }) => boolean | void;
+  sourceLabel?: string;
+  titleLabel?: string;
+  emptyStateTitle?: string;
+  emptyStateHint?: string;
+  isItemRead?: (item: FeedDataTableItem) => boolean;
+  onOpenItem?: (item: FeedDataTableItem, index: number) => void;
+  onOpenItemIdChange?: (itemId: string | null) => void;
+}
+
+function timestampValue(item: FeedDataTableItem): number {
+  if (!item.timestamp) return 0;
+  const timestamp = toTimestampMillis(item.timestamp);
+  return Number.isFinite(timestamp) ? timestamp : 0;
+}
+
+function compareText(a: string, b: string): number {
+  return a.localeCompare(b, "en-US", { sensitivity: "base" });
+}
+
+function compareRows(a: DetailRow, b: DetailRow, columnId: DetailColumnId) {
+  switch (columnId) {
+    case "time":
+      return timestampValue(a.item) - timestampValue(b.item);
+    case "source":
+      return compareText(a.item.eyebrow ?? "", b.item.eyebrow ?? "");
+    case "title":
+      return compareText(a.item.title, b.item.title);
+  }
+}
+
+function nextSortPreference(
+  current: SortPreference,
+  columnId: DetailColumnId,
+): SortPreference {
+  if (current.columnId === columnId) {
+    return {
+      columnId,
+      direction: current.direction === "asc" ? "desc" : "asc",
+    };
+  }
+
+  return {
+    columnId,
+    direction: columnId === "time" ? "desc" : "asc",
+  };
+}
+
+function buildColumns(
+  width: number,
+  sourceLabel: string,
+  titleLabel: string,
+  items: FeedDataTableItem[],
+): DetailColumn[] {
+  const timeWidth = 8;
+  const sourceWidth = Math.min(
+    Math.max(
+      sourceLabel.length,
+      ...items.map((item) => item.eyebrow?.length ?? 0),
+      6,
+    ),
+    14,
+  );
+  const titleWidth = Math.max(
+    16,
+    width - (timeWidth + 1) - (sourceWidth + 1) - 3,
+  );
+
+  return [
+    { id: "time", label: "Time", width: timeWidth, align: "left" },
+    { id: "source", label: sourceLabel, width: sourceWidth, align: "left" },
+    { id: "title", label: titleLabel, width: titleWidth, align: "left" },
+  ];
+}
+
+export function FeedDataTableStackView({
+  width,
+  height,
+  focused,
+  items,
+  selectedIdx,
+  onSelect,
+  rootBefore,
+  rootAfter,
+  onRootKeyDown,
+  sourceLabel = "Source",
+  titleLabel = "Headline",
+  emptyStateTitle = "No items.",
+  emptyStateHint,
+  isItemRead,
+  onOpenItem,
+  onOpenItemIdChange,
+}: FeedDataTableStackViewProps) {
+  const [sortPreference, setSortPreference] = useState<SortPreference>({
+    columnId: "time",
+    direction: "desc",
+  });
+  const [openItemId, setOpenItemId] = useState<string | null>(null);
+  const detailScrollRef = useRef<ScrollBoxRenderable>(null);
+  const detailTextWidth = Math.max(width - 2, 12);
+  const columns = useMemo(
+    () => buildColumns(width, sourceLabel, titleLabel, items),
+    [items, sourceLabel, titleLabel, width],
+  );
+  const sortedRows = useMemo(() => {
+    const direction = sortPreference.direction === "asc" ? 1 : -1;
+    return items
+      .map((item, itemIndex) => ({ item, itemIndex }))
+      .sort((a, b) => {
+        const primary = compareRows(a, b, sortPreference.columnId) * direction;
+        return primary !== 0 ? primary : a.itemIndex - b.itemIndex;
+      });
+  }, [items, sortPreference]);
+  const selectedRowIndex = sortedRows.findIndex(
+    (row) => row.itemIndex === selectedIdx,
+  );
+  const activeRowIndex =
+    selectedRowIndex >= 0 ? selectedRowIndex : sortedRows.length > 0 ? 0 : -1;
+  const openItem = useMemo(
+    () =>
+      openItemId
+        ? items.find((item) => item.id === openItemId) ?? null
+        : null,
+    [items, openItemId],
+  );
+  const activeOpenItemId = openItem ? openItem.id : null;
+
+  const scrollDetailBy = useCallback((delta: number) => {
+    const scrollBox = detailScrollRef.current;
+    if (!scrollBox?.viewport) return;
+    const maxScrollTop = Math.max(
+      0,
+      scrollBox.scrollHeight - scrollBox.viewport.height,
+    );
+    scrollBox.scrollTop = Math.max(
+      0,
+      Math.min(maxScrollTop, scrollBox.scrollTop + delta),
+    );
+  }, []);
+
+  const openRow = useCallback((row: DetailRow | undefined) => {
+    if (!row) return;
+    onOpenItem?.(row.item, row.itemIndex);
+    setOpenItemId(row.item.id);
+  }, [onOpenItem]);
+
+  useEffect(() => {
+    if (openItemId && !openItem) {
+      setOpenItemId(null);
+    }
+  }, [openItem, openItemId]);
+
+  useEffect(() => {
+    onOpenItemIdChange?.(activeOpenItemId);
+  }, [activeOpenItemId, onOpenItemIdChange]);
+
+  useEffect(() => {
+    if (!openItemId) return;
+    const scrollBox = detailScrollRef.current;
+    if (scrollBox) scrollBox.scrollTop = 0;
+  }, [openItemId]);
+
+  useEffect(() => {
+    if (items.length > 0 && selectedIdx >= items.length) {
+      onSelect(Math.max(0, items.length - 1));
+    }
+  }, [items.length, onSelect, selectedIdx]);
+
+  const renderCell = useCallback((
+    row: DetailRow,
+    column: DetailColumn,
+    _index: number,
+    rowState: { selected: boolean },
+  ): DataTableCell => {
+    const selectedColor = rowState.selected ? colors.selectedText : undefined;
+    switch (column.id) {
+      case "time":
+        return {
+          text: row.item.timestamp ? formatTimeAgo(row.item.timestamp) : "",
+          color: selectedColor ?? colors.textDim,
+        };
+      case "source":
+        return {
+          text: row.item.eyebrow ?? "",
+          color: selectedColor ?? colors.textMuted,
+        };
+      case "title":
+        return {
+          text: row.item.title,
+          color: selectedColor ?? colors.text,
+          attributes: isItemRead
+            ? isItemRead(row.item)
+              ? TextAttributes.NONE
+              : TextAttributes.BOLD
+            : rowState.selected
+              ? TextAttributes.BOLD
+              : TextAttributes.NONE,
+        };
+    }
+  }, [isItemRead]);
+
+  const handleDetailKeyDown = useCallback((event: {
+    name?: string;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+  }) => {
+    if (event.name === "j" || event.name === "down") {
+      event.stopPropagation?.();
+      event.preventDefault?.();
+      scrollDetailBy(1);
+      return true;
+    }
+    if (event.name === "k" || event.name === "up") {
+      event.stopPropagation?.();
+      event.preventDefault?.();
+      scrollDetailBy(-1);
+      return true;
+    }
+    return false;
+  }, [scrollDetailBy]);
+
+  const detailContent = openItem ? (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      flexBasis={0}
+      minHeight={0}
+      overflow="hidden"
+      paddingX={1}
+      paddingY={1}
+    >
+      <ScrollBox
+        ref={detailScrollRef}
+        flexGrow={1}
+        flexBasis={0}
+        minHeight={0}
+        scrollY
+        focusable={false}
+      >
+        <Box flexDirection="column">
+          {(openItem.detailMeta ?? [])
+            .flatMap((entry) => wrapTextLines(entry, detailTextWidth, 2))
+            .map((line, index) => (
+              <Box key={`meta-${index}`} height={1}>
+                <Text fg={colors.textMuted}>{line}</Text>
+              </Box>
+            ))}
+
+          <Box height={1} />
+
+          {wrapTextLines(openItem.detailBody ?? "", detailTextWidth).map(
+            (line, index) => (
+              <Box key={`body-${index}`} height={1}>
+                <Text fg={colors.text}>{line}</Text>
+              </Box>
+            ),
+          )}
+
+          {openItem.detailNote ? (
+            <>
+              <Box height={1} />
+              {wrapTextLines(openItem.detailNote, detailTextWidth).map(
+                (line, index) =>
+                  /^https?:\/\/\S+$/.test(line.trim()) ? (
+                    <ExternalLink key={`note-${index}`} url={line.trim()} />
+                  ) : (
+                    <Box key={`note-${index}`} height={1}>
+                      <Text fg={colors.textDim}>{line}</Text>
+                    </Box>
+                  ),
+              )}
+            </>
+          ) : null}
+        </Box>
+      </ScrollBox>
+    </Box>
+  ) : (
+    <Box flexGrow={1} />
+  );
+
+  return (
+    <DataTableStackView<DetailRow, DetailColumn>
+      focused={focused}
+      detailOpen={!!openItem}
+      onBack={() => setOpenItemId(null)}
+      detailContent={detailContent}
+      detailTitle={openItem ? openItem.detailTitle ?? openItem.title : undefined}
+      selectedIndex={activeRowIndex}
+      onSelectIndex={(_index, row) => onSelect(row.itemIndex)}
+      onActivateIndex={(_index, row) => openRow(row)}
+      rootBefore={rootBefore}
+      rootAfter={rootAfter}
+      rootWidth={width}
+      rootHeight={height}
+      onRootKeyDown={onRootKeyDown}
+      onDetailKeyDown={handleDetailKeyDown}
+      columns={columns}
+      items={sortedRows}
+      sortColumnId={sortPreference.columnId}
+      sortDirection={sortPreference.direction}
+      onHeaderClick={(columnId) =>
+        setSortPreference((current) =>
+          nextSortPreference(current, columnId as DetailColumnId)
+        )}
+      getItemKey={(row) => row.item.id}
+      isSelected={(row, index) =>
+        row.itemIndex === selectedIdx || (selectedIdx < 0 && index === 0)
+      }
+      onSelect={(row) => onSelect(row.itemIndex)}
+      onActivate={openRow}
+      renderCell={renderCell}
+      emptyStateTitle={emptyStateTitle}
+      emptyStateHint={emptyStateHint}
+      showHorizontalScrollbar={false}
+    />
+  );
+}

package/src/components/index.ts

@@ -1,32 +1,27 @@
-// Reusable components for plugins
-export { PriceSelectorDialog } from "./price-selector-dialog";
-export type { PriceSelectorDialogProps } from "./price-selector-dialog";
-export { StockChart } from "./chart/stock-chart";
-export type { ChartViewState, TimeRange, ChartRenderMode, ChartColors } from "./chart/chart-types";
-export * from "./ui";
-export { ToggleList } from "./toggle-list";
-export type { ToggleListItem, ToggleListProps } from "./toggle-list";
-export { TabBar } from "./tab-bar";
-export type { Tab, TabBarProps } from "./tab-bar";
-export { Spinner } from "./spinner";
-export type { SpinnerProps } from "./spinner";
-export { TickerListTable } from "./ticker-list-table";
-export type { QuoteFlashDirection, TickerTableCell } from "./ticker-list-table";
-
-// Theme
-export { colors, priceColor, hoverBg } from "../theme/colors";
 
-// Hooks
-export {
-  useAppState,
-  useFocusedTicker,
-  usePaneSettingValue,
-  usePaneTicker,
-  useSelectedTicker,
-} from "../state/app-context";
-
-// Format utilities
-export {
-  formatCurrency, formatCompact, formatPercent, formatPercentRaw,
-  formatNumber, padTo,
-} from "../utils/format";
+export { PriceSelectorDialog } from "./price-selector-dialog";
+export { StaticChartSurface } from "./chart/static-chart-surface";
+export type { QuoteFlashDirection } from "./ticker-list-table";
+export { TickerListTableView } from "./ticker-list-table-view";
+export type { TickerListVisibleRange } from "./ticker-list-table-view";
+export { TickerBadgeList } from "./ticker-badge-list";
+export { DataTableView } from "./data-table-view";
+export type { DataTableKeyEvent } from "./data-table-view";
+export { DataTableStackView } from "./data-table-stack-view";
+export { FeedDataTableStackView } from "./feed-data-table-stack-view";
+export type { FeedDataTableItem } from "./feed-data-table-stack-view";
+export { usePaneFooter } from "./layout/pane-footer";
+export type { PaneFooterSegment, PaneHint } from "./layout/pane-footer";
+export { useExternalLinkFooter } from "./use-external-link-footer";
+export { Button } from "./ui/button";
+export { ChoiceDialog } from "./ui/choice-dialog";
+export type { ChoiceDialogChoice, ChoiceDialogProps } from "./ui/choice-dialog";
+export type { DataTableCell, DataTableColumn } from "./ui/data-table";
+export { DialogFrame } from "./ui/frame";
+export { EmptyState } from "./ui/status";
+export { getMessageComposerBlockHeight, MessageComposer } from "./ui/message-composer";
+export { NumberField, TextField } from "./ui/fields";
+export { SegmentedControl } from "./ui/toggle";
+export { Spinner } from "./ui/loading";
+export { Tabs } from "./ui/tabs";
+export { usePaneTicker } from "../state/app-context";

package/src/components/layout/detached-pane-shell.tsx

@@ -0,0 +1,185 @@
+import { Box, Text, useRendererHost, useUiCapabilities } from "../../ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useShortcut, useViewport } from "../../react/input";
+import { useAppDispatch, useAppSelector } from "../../state/app-context";
+import type { DesktopWindowBridge } from "../../types/desktop-window";
+import { findPaneInstance } from "../../types/config";
+import type { PluginRegistry } from "../../plugins/registry";
+import { colors, floatingPaneBg, floatingPaneTitleBg, paneTitleText } from "../../theme/colors";
+import { hasPaneFooterContent, PaneFooterBar, PaneFooterProvider } from "./pane-footer";
+import { PaneContent } from "./pane-content";
+import { getPaneBodyWidth } from "./pane-sizing";
+import { getPaneDisplayTitle } from "./pane-title";
+import { TITLEBAR_OVERLAY_HEIGHT_PX, TITLEBAR_TRAFFIC_LIGHT_WIDTH } from "./titlebar-overlay";
+
+interface DetachedPaneShellProps {
+  pluginRegistry: PluginRegistry;
+  desktopWindowBridge: DesktopWindowBridge & { kind: "detached"; paneId: string };
+}
+
+function stopMouse(event?: { stopPropagation?: () => void; preventDefault?: () => void }) {
+  event?.stopPropagation?.();
+  event?.preventDefault?.();
+}
+
+export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: DetachedPaneShellProps) {
+  const dispatch = useAppDispatch();
+  const rendererHost = useRendererHost();
+  const config = useAppSelector((state) => state.config);
+  const paneState = useAppSelector((state) => state.paneState);
+  const focusedPaneId = useAppSelector((state) => state.focusedPaneId);
+  const inputCaptured = useAppSelector((state) => state.inputCaptured);
+  const [windowFocused, setWindowFocused] = useState(() => (
+    typeof document === "undefined" ? true : document.hasFocus()
+  ));
+  const { width, height } = useViewport();
+  const { cellHeightPx = 18, nativePaneChrome, titleBarOverlay } = useUiCapabilities();
+  const instance = useAppSelector((state) => findPaneInstance(state.config.layout, desktopWindowBridge.paneId) ?? null);
+  const paneDef = instance ? pluginRegistry.panes.get(instance.paneId) ?? null : null;
+  const hasPaneSettings = !!instance && pluginRegistry.hasPaneSettings(instance.instanceId);
+  const titleState = useMemo(
+    () => ({ config, paneState }) as Parameters<typeof getPaneDisplayTitle>[0],
+    [config, paneState],
+  );
+  const title = instance && paneDef
+    ? getPaneDisplayTitle(titleState, instance, paneDef)
+    : "Detached Pane";
+  const focused = windowFocused;
+  const bodyWidth = nativePaneChrome ? Math.max(1, Math.floor(width)) : getPaneBodyWidth(width);
+
+  const focusPane = useCallback(() => {
+    setWindowFocused(true);
+    dispatch({ type: "FOCUS_PANE", paneId: desktopWindowBridge.paneId });
+  }, [desktopWindowBridge.paneId, dispatch]);
+
+  useEffect(() => {
+    if (windowFocused && focusedPaneId !== desktopWindowBridge.paneId) {
+      focusPane();
+    }
+  }, [desktopWindowBridge.paneId, focusPane, focusedPaneId, windowFocused]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+
+    const handleFocus = () => {
+      setWindowFocused(true);
+      focusPane();
+    };
+    const handleBlur = () => setWindowFocused(false);
+
+    window.addEventListener("focus", handleFocus);
+    window.addEventListener("blur", handleBlur);
+    if (document.hasFocus()) {
+      handleFocus();
+    } else {
+      handleBlur();
+    }
+
+    return () => {
+      window.removeEventListener("focus", handleFocus);
+      window.removeEventListener("blur", handleBlur);
+    };
+  }, [focusPane]);
+
+  useShortcut((event) => {
+    if (event.name !== "w" || (!event.ctrl && !event.meta && !event.super)) return;
+    if (inputCaptured && event.ctrl && !event.meta && !event.super) return;
+    event.preventDefault();
+    event.stopPropagation();
+    void desktopWindowBridge.closeDetachedPane?.(desktopWindowBridge.paneId);
+  });
+
+  const startWindowDrag = useCallback(() => {
+    focusPane();
+    void rendererHost.startWindowDrag?.();
+  }, [focusPane, rendererHost]);
+
+  const openSettings = useCallback((event?: { stopPropagation?: () => void; preventDefault?: () => void }) => {
+    stopMouse(event);
+    pluginRegistry.openPaneSettingsFn(desktopWindowBridge.paneId);
+  }, [desktopWindowBridge.paneId, pluginRegistry]);
+
+  if (!instance || !paneDef) {
+    return (
+      <Box flexGrow={1} alignItems="center" justifyContent="center" backgroundColor={colors.bg}>
+        <Text fg={colors.textDim}>Pane unavailable.</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <PaneFooterProvider>
+      {(footer) => {
+        const showFooter = hasPaneFooterContent(footer);
+        const headerHeightRows = titleBarOverlay ? TITLEBAR_OVERLAY_HEIGHT_PX / cellHeightPx : 1;
+        const footerHeightRows = showFooter ? 1 : 0;
+        const bodyHeight = Math.max(1, height - headerHeightRows - footerHeightRows);
+        const background = floatingPaneBg(focused);
+        const titleBackground = floatingPaneTitleBg(focused);
+
+        return (
+          <Box
+            flexDirection="column"
+            flexGrow={1}
+            width={width}
+            height={height}
+            backgroundColor={background}
+            data-gloom-role="detached-pane-window"
+            data-gloom-pane-id={desktopWindowBridge.paneId}
+            data-focused={focused ? "true" : "false"}
+            onMouseDown={focusPane}
+          >
+            <Box
+              height={1}
+              width={width}
+              backgroundColor={titleBackground}
+              flexDirection="row"
+              data-gloom-role="pane-header"
+              data-titlebar-overlay={titleBarOverlay ? "true" : undefined}
+              data-floating="true"
+              data-focused={focused ? "true" : "false"}
+              style={{ boxShadow: `0 -1px 0 ${titleBackground}, inset 0 1px 0 ${titleBackground}` }}
+              onMouseDown={startWindowDrag}
+            >
+              <Box
+                flexDirection="row"
+                alignItems="center"
+                flexGrow={1}
+                minWidth={0}
+                paddingLeft={titleBarOverlay ? TITLEBAR_TRAFFIC_LIGHT_WIDTH : 1}
+                paddingRight={1}
+              >
+                <Box flexGrow={1} minWidth={0} overflow="hidden">
+                  <Text fg={paneTitleText(focused, true)} selectable={false} data-gloom-role="pane-title">{title}</Text>
+                </Box>
+                {hasPaneSettings && (
+                  <Text
+                    fg={paneTitleText(focused, true)}
+                    selectable={false}
+                    className="electrobun-webkit-app-region-no-drag"
+                    data-gloom-role="pane-action"
+                    data-gloom-interactive="true"
+                    onMouseDown={openSettings}
+                  >
+                    {" ... "}
+                  </Text>
+                )}
+              </Box>
+            </Box>
+            <Box height={bodyHeight} overflow="hidden" backgroundColor={background}>
+              <PaneContent
+                component={paneDef.component}
+                paneId={instance.instanceId}
+                paneType={instance.paneId}
+                focused={focused}
+                width={bodyWidth}
+                height={bodyHeight}
+              />
+            </Box>
+            {showFooter && <PaneFooterBar footer={footer} focused={focused} width={width} />}
+          </Box>
+        );
+      }}
+    </PaneFooterProvider>
+  );
+}