gloomberb 0.5.1 → 0.6.0

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

@@ -0,0 +1,89 @@
+import { useEffect, useMemo, useState } from "react";
+import { Box, Text } from "../../ui";
+import { type PromptContext, useDialogKeyboard } from "../../ui/dialog";
+import { colors } from "../../theme/colors";
+import { DialogFrame } from "./frame";
+import { ListView, type ListViewItem } from "./list-view";
+
+export interface ChoiceDialogChoice {
+  id: string;
+  label: string;
+  description?: string;
+  detail?: string;
+  disabled?: boolean;
+}
+
+export interface ChoiceDialogProps extends PromptContext<string> {
+  title: string;
+  choices: ChoiceDialogChoice[];
+  footer?: string;
+  bgColor?: string;
+}
+
+function clampChoiceIndex(index: number, length: number): number {
+  if (length <= 0) return -1;
+  return Math.max(0, Math.min(length - 1, index));
+}
+
+function getChoiceDescription(choice: ChoiceDialogChoice | undefined): string {
+  return choice?.description ?? "";
+}
+
+export function ChoiceDialog({
+  resolve,
+  title,
+  choices,
+  footer = "↑↓ choose · Enter/click select · Esc cancel",
+  bgColor = colors.bg,
+}: ChoiceDialogProps) {
+  const [index, setIndex] = useState(() => clampChoiceIndex(0, choices.length));
+  const selectedIndex = clampChoiceIndex(index, choices.length);
+  const selectedChoice = selectedIndex >= 0 ? choices[selectedIndex] : undefined;
+  const items = useMemo<ListViewItem[]>(() => choices.map((choice) => ({
+    id: choice.id,
+    label: choice.label,
+    description: getChoiceDescription(choice),
+    detail: choice.detail,
+    disabled: choice.disabled,
+  })), [choices]);
+
+  useEffect(() => {
+    setIndex((current) => clampChoiceIndex(current, choices.length));
+  }, [choices.length]);
+
+  const activateChoice = (choice: ChoiceDialogChoice | undefined) => {
+    if (!choice || choice.disabled) return;
+    resolve(choice.id);
+  };
+
+  useDialogKeyboard((event) => {
+    event.stopPropagation();
+    if (event.name === "up" || event.name === "k") {
+      setIndex((current) => clampChoiceIndex(current - 1, choices.length));
+    } else if (event.name === "down" || event.name === "j") {
+      setIndex((current) => clampChoiceIndex(current + 1, choices.length));
+    } else if (event.name === "enter" || event.name === "return") {
+      activateChoice(selectedChoice);
+    } else if (event.name === "escape") {
+      resolve("");
+    }
+  });
+
+  return (
+    <DialogFrame title={title} footer={footer}>
+      <Box flexDirection="column">
+        <ListView
+          items={items}
+          selectedIndex={selectedIndex}
+          bgColor={bgColor}
+          emptyMessage="No choices."
+          selectOnHover
+          onSelect={setIndex}
+          onActivate={(_, nextIndex) => activateChoice(choices[nextIndex])}
+        />
+        <Box height={1} />
+        <Text fg={colors.textDim}>{getChoiceDescription(selectedChoice)}</Text>
+      </Box>
+    </DialogFrame>
+  );
+}

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

@@ -1,20 +1,36 @@
-import { useCallback, useEffect, useMemo, useState, type RefObject } from "react";
-import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { Box, ScrollBox, Text, useUiHost } from "../../ui";
+import { useCallback, useEffect, useMemo, useState, type ComponentType, type ReactNode, type RefObject } from "react";
+import { TextAttributes, type ScrollBoxRenderable } from "../../ui";
 import { colors, hoverBg } from "../../theme/colors";
 import type { ColumnConfig } from "../../types/config";
 import { useAppDispatch, usePaneInstance } from "../../state/app-context";
+import { useViewport } from "../../react/input";
 import { padTo } from "../../utils/format";
+import { useRafCallback } from "../../react/use-raf-callback";
+import { measurePerf } from "../../utils/perf-marks";
 import { useDoubleClickActivation } from "../use-double-click-activation";
 import { EmptyState } from "./status";
+import {
+  expandTableColumns,
+  getTableWidth,
+  tableContentWidthProps,
+  useMeasuredTableContentWidth,
+} from "./table-layout";
 
 export type DataTableColumn = Pick<
   ColumnConfig,
   "id" | "label" | "width" | "align"
->;
+> & {
+  headerColor?: string;
+  headerBackgroundColor?: string;
+  flexGrow?: number;
+};
 
 export interface DataTableCell {
   text: string;
+  content?: ReactNode;
   color?: string;
+  backgroundColor?: string;
   attributes?: number;
   onMouseDown?: (event: any) => void;
 }
@@ -26,6 +42,8 @@ export interface DataTableSectionHeader {
   attributes?: number;
 }
 
+export type DataTableScrollAlign = "nearest" | "center";
+
 export interface DataTableProps<
   T,
   C extends DataTableColumn = DataTableColumn,
@@ -55,11 +73,20 @@ export interface DataTableProps<
     item: T,
     index: number,
   ) => DataTableSectionHeader | null;
+  getRowBackgroundColor?: (
+    item: T,
+    index: number,
+    rowState: { selected: boolean; hovered: boolean },
+  ) => string | undefined;
+  emptyContent?: ReactNode;
   emptyStateTitle: string;
   emptyStateHint?: string;
   virtualize?: boolean;
   overscan?: number;
   showHorizontalScrollbar?: boolean;
+  scrollToIndex?: number | null;
+  scrollToIndexAlign?: DataTableScrollAlign;
+  scrollToIndexVersion?: number;
 }
 
 interface DataTableRowPointerTarget<T> {
@@ -67,7 +94,38 @@ interface DataTableRowPointerTarget<T> {
   index: number;
 }
 
-export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
+function resolveScrollTopForIndex(
+  targetIndex: number,
+  currentTop: number,
+  visibleHeight: number,
+  itemCount: number,
+  align: DataTableScrollAlign,
+): number {
+  const maxTop = Math.max(0, itemCount - visibleHeight);
+  let nextTop = currentTop;
+  if (align === "center") {
+    nextTop = targetIndex - Math.floor(visibleHeight / 2);
+  } else if (targetIndex < currentTop) {
+    nextTop = targetIndex;
+  } else if (targetIndex >= currentTop + visibleHeight) {
+    nextTop = targetIndex - visibleHeight + 1;
+  }
+  return Math.max(0, Math.min(maxTop, nextTop));
+}
+
+export function DataTable<T, C extends DataTableColumn = DataTableColumn>(
+  props: DataTableProps<T, C>,
+) {
+  const HostDataTable = useUiHost().DataTable as
+    | ComponentType<DataTableProps<T, C>>
+    | undefined;
+  if (HostDataTable) {
+    return <HostDataTable {...props} />;
+  }
+  return <OpenTuiDataTable {...props} />;
+}
+
+function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
   columns,
   items,
   sortColumnId,
@@ -85,26 +143,66 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
   onActivate,
   renderCell,
   renderSectionHeader,
+  getRowBackgroundColor,
+  emptyContent,
   emptyStateTitle,
   emptyStateHint,
-  virtualize = false,
+  virtualize = true,
   overscan = 3,
   showHorizontalScrollbar = true,
+  scrollToIndex,
+  scrollToIndexAlign = "nearest",
+  scrollToIndexVersion = 0,
 }: DataTableProps<T, C>) {
   const dispatch = useAppDispatch();
   const paneInstanceId = usePaneInstance()?.instanceId ?? null;
+  const appViewport = useViewport();
   const [scrollVersion, setScrollVersion] = useState(0);
   const scrollTop = virtualize ? (scrollRef.current?.scrollTop ?? 0) : 0;
+  const measuredViewportHeight = scrollRef.current?.viewport?.height;
   const viewportHeight = virtualize
-    ? (scrollRef.current?.viewport?.height ?? Math.min(items.length, 16))
+    ? Math.max(
+        1,
+        Math.min(
+          measuredViewportHeight ?? Math.min(items.length, 16),
+          Math.max(1, Math.ceil(appViewport.height)),
+        ),
+      )
     : items.length;
   const startIndex = virtualize ? Math.max(scrollTop - overscan, 0) : 0;
   const endIndex = virtualize
     ? Math.min(startIndex + viewportHeight + overscan * 2, items.length)
     : items.length;
   const visibleItems = useMemo(
-    () => items.slice(startIndex, endIndex),
-    [endIndex, items, scrollVersion, startIndex],
+    () => measurePerf(
+      "data-table.visible-rows",
+      () => items.slice(startIndex, endIndex),
+      {
+        itemCount: items.length,
+        measuredViewportHeight,
+        startIndex,
+        endIndex,
+        viewportHeight,
+        virtualize,
+      },
+    ),
+    [
+      appViewport.height,
+      endIndex,
+      items,
+      items.length,
+      measuredViewportHeight,
+      scrollVersion,
+      startIndex,
+      viewportHeight,
+      virtualize,
+    ],
+  );
+  const tableWidth = useMemo(() => getTableWidth(columns), [columns]);
+  const { contentWidth, measureContentWidth } = useMeasuredTableContentWidth(tableWidth, headerScrollRef, scrollRef);
+  const displayColumns = useMemo(
+    () => expandTableColumns(columns, contentWidth),
+    [columns, contentWidth],
   );
   const handleRowMouseDown =
     useDoubleClickActivation<DataTableRowPointerTarget<T>>({
@@ -118,17 +216,56 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
         : undefined,
     });
 
-  const handleBodyScrollActivity = () => {
+  const handleBodyScrollActivity = useCallback(() => {
     if (virtualize) {
       setScrollVersion((current) => current + 1);
     }
     onBodyScrollActivity();
-  };
+  }, [onBodyScrollActivity, virtualize]);
+  const scheduleBodyScrollActivity = useRafCallback(handleBodyScrollActivity);
+  const scheduleHeaderScrollSync = useRafCallback(syncHeaderScroll);
   const focusPane = useCallback(() => {
     if (!paneInstanceId) return;
     dispatch({ type: "FOCUS_PANE", paneId: paneInstanceId });
   }, [dispatch, paneInstanceId]);
 
+  const applyScrollToIndex = useCallback(() => {
+    if (scrollToIndex == null || items.length === 0) return true;
+    const scrollBox = scrollRef.current;
+    if (!scrollBox?.viewport) return false;
+
+    const targetIndex = Math.max(0, Math.min(scrollToIndex, items.length - 1));
+    const visibleHeight = Math.max(
+      1,
+      Math.min(scrollBox.viewport.height, Math.ceil(appViewport.height)),
+    );
+    const currentTop = scrollBox.scrollTop;
+    const nextTop = resolveScrollTopForIndex(
+      targetIndex,
+      currentTop,
+      visibleHeight,
+      items.length,
+      scrollToIndexAlign,
+    );
+
+    if (nextTop === currentTop) return true;
+    scrollBox.scrollTo(nextTop);
+    if (scrollBox.scrollTop !== nextTop) return false;
+    if (virtualize) {
+      setScrollVersion((current) => current + 1);
+    }
+    syncHeaderScroll();
+    return true;
+  }, [
+    appViewport.height,
+    items.length,
+    scrollRef,
+    scrollToIndex,
+    scrollToIndexAlign,
+    syncHeaderScroll,
+    virtualize,
+  ]);
+
   useEffect(() => {
     if (headerScrollRef.current) {
       headerScrollRef.current.horizontalScrollBar.visible = false;
@@ -144,17 +281,48 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
     }
   }, [columns.length, headerScrollRef, items.length, scrollRef, showHorizontalScrollbar]);
 
+  useEffect(() => {
+    if (applyScrollToIndex()) return;
+    let cancelled = false;
+    const retry = () => {
+      if (!cancelled) applyScrollToIndex();
+    };
+    process.nextTick(retry);
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    applyScrollToIndex,
+    measuredViewportHeight,
+    scrollToIndexVersion,
+  ]);
+
   return (
-    <>
-      <scrollbox ref={headerScrollRef} height={1} scrollX={showHorizontalScrollbar} focusable={false}>
-        <box
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      flexBasis={0}
+      width="100%"
+      backgroundColor={colors.bg}
+      overflow="hidden"
+    >
+      <ScrollBox
+        ref={headerScrollRef}
+        width="100%"
+        height={1}
+        backgroundColor={colors.panel}
+        scrollX={showHorizontalScrollbar}
+        focusable={false}
+        onSizeChange={measureContentWidth}
+      >
+        <Box
           flexDirection="row"
           height={1}
-          width="100%"
+          {...tableContentWidthProps(contentWidth)}
           paddingX={1}
           backgroundColor={colors.panel}
         >
-          {columns.map((column) => {
+          {displayColumns.map((column) => {
             const isSorted = sortColumnId === column.id;
             const indicator = isSorted
               ? sortDirection === "asc"
@@ -167,146 +335,177 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
               column.align,
             );
             return (
-              <box
+              <Box
                 key={column.id}
                 width={column.width + 1}
-                backgroundColor={colors.panel}
+                backgroundColor={column.headerBackgroundColor ?? colors.panel}
                 onMouseDown={(event) => {
                   focusPane();
                   event.preventDefault();
                   onHeaderClick(column.id);
                 }}
               >
-                <text
+                <Text
                   attributes={TextAttributes.BOLD}
-                  fg={isSorted ? colors.text : colors.textDim}
+                  fg={isSorted ? colors.text : column.headerColor ?? colors.textDim}
                 >
                   {labelText}
-                </text>
-              </box>
+                </Text>
+              </Box>
             );
           })}
-        </box>
-      </scrollbox>
+        </Box>
+      </ScrollBox>
 
-      <scrollbox
+      <ScrollBox
         ref={scrollRef}
+        width="100%"
         flexGrow={1}
+        flexBasis={0}
+        backgroundColor={colors.bg}
         scrollX={showHorizontalScrollbar}
         scrollY
         focusable={false}
         onMouseDown={() => {
           focusPane();
-          queueMicrotask(syncHeaderScroll);
+          scheduleHeaderScrollSync();
         }}
-        onMouseUp={() => queueMicrotask(handleBodyScrollActivity)}
-        onMouseDrag={() => queueMicrotask(handleBodyScrollActivity)}
-        onMouseScroll={() => queueMicrotask(handleBodyScrollActivity)}
+        onMouseUp={scheduleBodyScrollActivity}
+        onMouseDrag={scheduleBodyScrollActivity}
+        onMouseScroll={scheduleBodyScrollActivity}
+        onSizeChange={measureContentWidth}
       >
         {items.length === 0 ? (
-          <box paddingX={1} paddingY={1}>
-            <EmptyState title={emptyStateTitle} hint={emptyStateHint} />
-          </box>
+          emptyContent ?? (
+            <Box width="100%" paddingX={1} paddingY={1}>
+              <EmptyState title={emptyStateTitle} hint={emptyStateHint} />
+            </Box>
+          )
         ) : (
           <>
-            {virtualize && startIndex > 0 && <box height={startIndex} />}
-            {visibleItems.map((item, visibleIndex) => {
-              const index = startIndex + visibleIndex;
-              const sectionHeader = renderSectionHeader?.(item, index) ?? null;
+            {virtualize && startIndex > 0 && <Box height={startIndex} />}
+            {measurePerf(
+              "data-table.render-visible-rows",
+              () => visibleItems.map((item, visibleIndex) => {
+                const index = startIndex + visibleIndex;
+                const sectionHeader = renderSectionHeader?.(item, index) ?? null;
+
+                if (sectionHeader) {
+                  return (
+                    <Box
+                      key={getItemKey(item, index)}
+                      flexDirection="row"
+                      height={1}
+                      {...tableContentWidthProps(contentWidth)}
+                      paddingX={1}
+                      backgroundColor={sectionHeader.backgroundColor ?? colors.bg}
+                      onMouseDown={(event) => {
+                        focusPane();
+                        event.preventDefault();
+                      }}
+                    >
+                      <Text
+                        attributes={sectionHeader.attributes ?? TextAttributes.BOLD}
+                        fg={sectionHeader.color ?? colors.textBright}
+                      >
+                        {sectionHeader.text}
+                      </Text>
+                    </Box>
+                  );
+                }
+
+                const selected = isSelected(item, index);
+                const hovered = hoveredIdx === index && !selected;
+                const rowState = { selected, hovered };
+                const rowBackgroundColor = getRowBackgroundColor?.(
+                  item,
+                  index,
+                  rowState,
+                );
+                const rowBg = selected
+                  ? colors.selected
+                  : hovered
+                    ? hoverBg()
+                    : rowBackgroundColor ?? colors.bg;
 
-              if (sectionHeader) {
                 return (
-                  <box
+                  <Box
                     key={getItemKey(item, index)}
                     flexDirection="row"
                     height={1}
-                    width="100%"
+                    {...tableContentWidthProps(contentWidth)}
                     paddingX={1}
-                    backgroundColor={sectionHeader.backgroundColor ?? colors.bg}
+                    backgroundColor={rowBg}
+                    onMouseMove={() => {
+                      if (hoveredIdx !== index) setHoveredIdx(index);
+                    }}
                     onMouseDown={(event) => {
                       focusPane();
                       event.preventDefault();
+                      handleRowMouseDown(getItemKey(item, index), {
+                        item,
+                        index,
+                      }, event);
                     }}
                   >
-                    <text
-                      attributes={sectionHeader.attributes ?? TextAttributes.BOLD}
-                      fg={sectionHeader.color ?? colors.textBright}
-                    >
-                      {sectionHeader.text}
-                    </text>
-                  </box>
-                );
-              }
-
-              const selected = isSelected(item, index);
-              const hovered = hoveredIdx === index && !selected;
-              const rowBg = selected
-                ? colors.selected
-                : hovered
-                  ? hoverBg()
-                  : colors.bg;
-
-              return (
-                <box
-                  key={getItemKey(item, index)}
-                  flexDirection="row"
-                  height={1}
-                  paddingX={1}
-                  backgroundColor={rowBg}
-                  onMouseMove={() => setHoveredIdx(index)}
-                  onMouseDown={(event) => {
-                    focusPane();
-                    event.preventDefault();
-                    handleRowMouseDown(getItemKey(item, index), {
-                      item,
-                      index,
-                    });
-                  }}
-                >
-                  {columns.map((column) => {
-                    const cell = renderCell(item, column, index, {
-                      selected,
-                      hovered,
-                    });
-                    return (
-                      <box
-                        key={column.id}
-                        width={column.width + 1}
-                        onMouseDown={(event) => {
-                          focusPane();
-                          if (cell.onMouseDown) {
-                            cell.onMouseDown(event);
-                            return;
-                          }
-                          event.preventDefault();
-                          event.stopPropagation?.();
-                          handleRowMouseDown(getItemKey(item, index), {
-                            item,
-                            index,
-                          });
-                        }}
-                      >
-                        <text
-                          attributes={cell.attributes ?? TextAttributes.NONE}
-                          fg={
-                            cell.color ??
-                            (selected ? colors.selectedText : colors.text)
-                          }
+                    {displayColumns.map((column) => {
+                      const cell = renderCell(item, column, index, rowState);
+                      return (
+                        <Box
+                          key={column.id}
+                          width={column.width + 1}
+                          backgroundColor={cell.backgroundColor ?? rowBg}
+                          onMouseDown={(event) => {
+                            focusPane();
+                            if (cell.onMouseDown) {
+                              cell.onMouseDown(event);
+                              return;
+                            }
+                            event.preventDefault();
+                            event.stopPropagation?.();
+                            handleRowMouseDown(getItemKey(item, index), {
+                              item,
+                              index,
+                            }, event);
+                          }}
                         >
-                          {padTo(cell.text, column.width, column.align)}
-                        </text>
-                      </box>
-                    );
-                  })}
-                </box>
-              );
-            })}
+                          {cell.content !== undefined ? (
+                            cell.content
+                          ) : (
+                            <Text
+                              attributes={cell.attributes ?? TextAttributes.NONE}
+                              fg={
+                                cell.color ??
+                                (selected ? colors.selectedText : colors.text)
+                              }
+                            >
+                              {padTo(cell.text, column.width, column.align)}
+                            </Text>
+                          )}
+                        </Box>
+                      );
+                    })}
+                  </Box>
+                );
+              }),
+              {
+                columnCount: displayColumns.length,
+                endIndex,
+                itemCount: items.length,
+                measuredViewportHeight,
+                paneId: paneInstanceId,
+                startIndex,
+                viewportHeight,
+                visibleCount: visibleItems.length,
+                virtualize,
+              },
+            )}
             {virtualize && endIndex < items.length && (
-              <box height={Math.max(items.length - endIndex, 0)} />
+              <Box height={Math.max(items.length - endIndex, 0)} />
             )}
           </>
         )}
-      </scrollbox>
-    </>
+      </ScrollBox>
+    </Box>
   );
 }