gloomberb 0.8.1 → 0.9.0

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

@@ -24,6 +24,41 @@ import {
 
 export type DataTableKeyEvent = TableViewKeyEvent;
 
+const DATA_TABLE_SELECTION_COMMIT_DELAY_MS = 150;
+
+export type DataTableSelectionChangeReason =
+  | "keyboard"
+  | "pointer"
+  | "activation";
+
+export type DataTableSelection<T> =
+  | { kind: "none" }
+  | {
+      kind: "index";
+      selectedIndex: number | null;
+      onChange: (
+        index: number,
+        item: T,
+        reason: DataTableSelectionChangeReason,
+      ) => void;
+    }
+  | {
+      kind: "id";
+      selectedId: string | null;
+      getId: (item: T, index: number) => string;
+      onChange: (
+        id: string,
+        item: T,
+        index: number,
+        reason: DataTableSelectionChangeReason,
+      ) => void;
+    };
+
+interface SelectionCommitTarget {
+  index: number;
+  id?: string;
+}
+
 export interface DataTableViewProps<
   T,
   C extends DataTableColumn = DataTableColumn,
@@ -35,11 +70,18 @@ export interface DataTableViewProps<
     | "onBodyScrollActivity"
     | "hoveredIdx"
     | "setHoveredIdx"
+    | "isSelected"
+    | "onSelect"
+    | "onActivate"
   > {
   focused?: boolean;
-  selectedIndex?: number | null;
-  onSelectIndex?: (index: number, item: T) => void;
-  onActivateIndex?: (index: number, item: T) => void;
+  selection: DataTableSelection<T>;
+  onActivate?: (item: T, index: number) => void;
+  onCursorChange?: (
+    item: T,
+    index: number,
+    reason: DataTableSelectionChangeReason,
+  ) => void;
   isNavigable?: (item: T, index: number) => boolean;
   rootBefore?: ReactNode;
   rootAfter?: ReactNode;
@@ -62,9 +104,9 @@ export function DataTableView<
   C extends DataTableColumn = DataTableColumn,
 >({
   focused = false,
-  selectedIndex,
-  onSelectIndex,
-  onActivateIndex,
+  selection,
+  onActivate,
+  onCursorChange,
   isNavigable,
   rootBefore,
   rootAfter,
@@ -97,29 +139,32 @@ export function DataTableView<
     hoveredIdx,
     setHoveredIdx,
   });
-  const [fallbackSelectedIndex, setFallbackSelectedIndex] = useState<
-    number | null
-  >(null);
-  const selectedIndexFromPredicate = useMemo(
-    () => selectedIndex == null
-      ? tableProps.items.findIndex(tableProps.isSelected)
-      : -1,
-    [selectedIndex, tableProps.items, tableProps.isSelected],
-  );
-  const usesFallbackSelection =
-    selectedIndex == null && selectedIndexFromPredicate < 0;
-  const effectiveSelectedIndex = selectedIndex
-    ?? (selectedIndexFromPredicate >= 0
-      ? selectedIndexFromPredicate
-      : fallbackSelectedIndex ?? -1);
-  const effectiveSelectedIndexRef = useRef(effectiveSelectedIndex);
-  effectiveSelectedIndexRef.current = effectiveSelectedIndex;
-  const effectiveScrollToIndex = scrollToIndex ?? (
-    effectiveSelectedIndex >= 0 ? effectiveSelectedIndex : null
+  const [cursorIndex, setCursorIndex] = useState<number | null>(null);
+  const pendingCommitRef = useRef(false);
+  const pendingCommitTargetRef = useRef<SelectionCommitTarget | null>(null);
+  const pendingCommitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
   );
-  const [selectionScrollVersion, setSelectionScrollVersion] = useState(0);
-  const lastSelectionScrollIndexRef = useRef<number | null>(null);
-
+  const selectionKey = selection.kind === "id"
+    ? selection.selectedId
+    : selection.kind === "index"
+      ? selection.selectedIndex
+      : null;
+  const selectedIndexFromSelection = useMemo(() => {
+    if (selection.kind === "none") return -1;
+    if (selection.kind === "index") {
+      const index = selection.selectedIndex;
+      return typeof index === "number"
+        && index >= 0
+        && index < tableProps.items.length
+        ? index
+        : -1;
+    }
+    if (selection.selectedId == null) return -1;
+    return tableProps.items.findIndex(
+      (item, index) => selection.getId(item, index) === selection.selectedId,
+    );
+  }, [selection, selectionKey, tableProps.items]);
   const navigableIndices = useMemo(() => {
     if (!isNavigable) return null;
     return tableProps.items.reduce<number[]>((indices, item, index) => {
@@ -128,39 +173,82 @@ export function DataTableView<
     }, []);
   }, [isNavigable, tableProps.items]);
 
-  useEffect(() => {
-    if (!usesFallbackSelection) {
-      if (fallbackSelectedIndex !== null) setFallbackSelectedIndex(null);
-      return;
+  const isValidCursorIndex = useCallback((index: number | null) => {
+    if (index == null || index < 0 || index >= tableProps.items.length) {
+      return false;
     }
-    if (fallbackSelectedIndex == null) return;
-    if (!navigableIndices) {
-      if (
-        fallbackSelectedIndex >= 0
-        && fallbackSelectedIndex < tableProps.items.length
-      ) {
-        return;
-      }
-      setFallbackSelectedIndex(tableProps.items.length > 0
-        ? Math.min(fallbackSelectedIndex, tableProps.items.length - 1)
-        : null);
+    if (!isNavigable) return true;
+    const item = tableProps.items[index];
+    return item !== undefined && isNavigable(item, index);
+  }, [isNavigable, tableProps.items]);
+
+  const defaultCursorIndex = selection.kind === "none"
+    ? -1
+    : isValidCursorIndex(selectedIndexFromSelection)
+      ? selectedIndexFromSelection
+      : navigableIndices
+        ? navigableIndices[0] ?? -1
+        : tableProps.items.length > 0
+          ? 0
+          : -1;
+  const effectiveSelectedIndex = selection.kind === "none"
+    ? -1
+    : isValidCursorIndex(cursorIndex)
+      ? cursorIndex!
+      : defaultCursorIndex;
+  const effectiveSelectedIndexRef = useRef(effectiveSelectedIndex);
+  effectiveSelectedIndexRef.current = effectiveSelectedIndex;
+  const [selectionScrollVersion, setSelectionScrollVersion] = useState(0);
+  const [selectionScrollTarget, setSelectionScrollTarget] = useState<number | null>(null);
+  const lastExternalSelectionScrollRef = useRef<{
+    kind: DataTableSelection<T>["kind"];
+    key: string | number | null;
+    resolved: boolean;
+  } | null>(null);
+  const effectiveScrollToIndex = scrollToIndex !== undefined
+    ? scrollToIndex
+    : selectionScrollTarget;
+
+  const requestSelectionScroll = useCallback((index: number) => {
+    if (scrollToIndex !== undefined || index < 0) return;
+    setSelectionScrollTarget(index);
+    setSelectionScrollVersion((current) => current + 1);
+  }, [scrollToIndex]);
+
+  const clearPendingCommit = useCallback(() => {
+    if (pendingCommitTimerRef.current) {
+      clearTimeout(pendingCommitTimerRef.current);
+      pendingCommitTimerRef.current = null;
+    }
+    pendingCommitRef.current = false;
+    pendingCommitTargetRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    if (selection.kind === "none") {
+      clearPendingCommit();
+      setCursorIndex(null);
       return;
     }
-    if (navigableIndices.includes(fallbackSelectedIndex)) return;
-
-    const nextIndex = navigableIndices.find(
-      (index) => index >= fallbackSelectedIndex,
-    )
-      ?? navigableIndices.at(-1)
-      ?? null;
-    setFallbackSelectedIndex(nextIndex);
+    if (pendingCommitRef.current) return;
+    setCursorIndex(defaultCursorIndex >= 0 ? defaultCursorIndex : null);
   }, [
-    fallbackSelectedIndex,
+    clearPendingCommit,
+    defaultCursorIndex,
     navigableIndices,
+    selectedIndexFromSelection,
+    selection.kind,
+    selectionKey,
     tableProps.items.length,
-    usesFallbackSelection,
   ]);
 
+  useEffect(() => () => {
+    if (pendingCommitTimerRef.current) {
+      clearTimeout(pendingCommitTimerRef.current);
+      pendingCommitTimerRef.current = null;
+    }
+  }, []);
+
   const handleBodyScrollActivity = useTableBodyScrollActivity({
     onBodyScrollActivity,
     syncHeaderScroll: effectiveSyncHeaderScroll,
@@ -173,40 +261,156 @@ export function DataTableView<
   });
 
   useEffect(() => {
-    if (effectiveScrollToIndex == null) {
-      lastSelectionScrollIndexRef.current = null;
+    const current = {
+      kind: selection.kind,
+      key: selectionKey,
+      resolved: selectedIndexFromSelection >= 0,
+    };
+    const previous = lastExternalSelectionScrollRef.current;
+    lastExternalSelectionScrollRef.current = current;
+
+    if (selection.kind === "none") {
+      if (scrollToIndex === undefined) setSelectionScrollTarget(null);
       return;
     }
-    if (lastSelectionScrollIndexRef.current === effectiveScrollToIndex) return;
-    lastSelectionScrollIndexRef.current = effectiveScrollToIndex;
-    setSelectionScrollVersion((current) => current + 1);
-  }, [effectiveScrollToIndex]);
+    if (effectiveSelectedIndex < 0) return;
 
-  const selectIndex = useCallback((index: number) => {
+    const selectionChanged = !previous
+      || previous.kind !== current.kind
+      || previous.key !== current.key;
+    const selectedRowAppeared = !previous?.resolved && current.resolved;
+    if (selectionChanged || selectedRowAppeared) {
+      requestSelectionScroll(effectiveSelectedIndex);
+    }
+  }, [
+    effectiveSelectedIndex,
+    requestSelectionScroll,
+    scrollToIndex,
+    selectedIndexFromSelection,
+    selection.kind,
+    selectionKey,
+  ]);
+
+  const commitIndex = useCallback((
+    index: number,
+    reason: DataTableSelectionChangeReason,
+  ) => {
+    if (selection.kind === "none") return;
     if (index < 0 || index >= tableProps.items.length) return;
     const item = tableProps.items[index]!;
     if (isNavigable && !isNavigable(item, index)) return;
-    effectiveSelectedIndexRef.current = index;
-    if (usesFallbackSelection) {
-      setFallbackSelectedIndex(index);
+
+    if (selection.kind === "index") {
+      selection.onChange(index, item, reason);
+      return;
     }
-    if (onSelectIndex) {
-      onSelectIndex(index, item);
+
+    selection.onChange(selection.getId(item, index), item, index, reason);
+  }, [isNavigable, selection, tableProps.items]);
+  const commitIndexRef = useRef(commitIndex);
+
+  useEffect(() => {
+    commitIndexRef.current = commitIndex;
+  }, [commitIndex]);
+
+  const getCommitTarget = useCallback((index: number): SelectionCommitTarget | null => {
+    if (selection.kind === "none") return null;
+    if (index < 0 || index >= tableProps.items.length) return null;
+    const item = tableProps.items[index]!;
+    if (isNavigable && !isNavigable(item, index)) return null;
+    return selection.kind === "id"
+      ? { index, id: selection.getId(item, index) }
+      : { index };
+  }, [isNavigable, selection, tableProps.items]);
+
+  const commitTarget = useCallback((
+    target: SelectionCommitTarget | null,
+    reason: DataTableSelectionChangeReason,
+  ) => {
+    if (!target) return;
+    if (selection.kind !== "id" || target.id == null) {
+      commitIndexRef.current(target.index, reason);
       return;
     }
-    tableProps.onSelect(item, index);
-  }, [isNavigable, onSelectIndex, tableProps, usesFallbackSelection]);
+    const currentIndex = tableProps.items.findIndex(
+      (item, index) => selection.getId(item, index) === target.id,
+    );
+    if (currentIndex < 0) return;
+    commitIndexRef.current(currentIndex, reason);
+  }, [selection, tableProps.items]);
 
-  const activateIndex = useCallback((index: number) => {
+  const commitIndexImmediately = useCallback((
+    index: number,
+    reason: DataTableSelectionChangeReason,
+  ) => {
+    const target = getCommitTarget(index);
+    clearPendingCommit();
+    commitTarget(target, reason);
+  }, [clearPendingCommit, commitTarget, getCommitTarget]);
+
+  const scheduleCommitIndex = useCallback((index: number) => {
+    if (selection.kind === "none") return;
+    const target = getCommitTarget(index);
+    if (!target) return;
+    if (pendingCommitTimerRef.current) {
+      clearTimeout(pendingCommitTimerRef.current);
+    }
+    pendingCommitRef.current = true;
+    pendingCommitTargetRef.current = target;
+    pendingCommitTimerRef.current = setTimeout(() => {
+      pendingCommitTimerRef.current = null;
+      pendingCommitRef.current = false;
+      const pendingTarget = pendingCommitTargetRef.current;
+      pendingCommitTargetRef.current = null;
+      commitTarget(pendingTarget, "keyboard");
+    }, DATA_TABLE_SELECTION_COMMIT_DELAY_MS);
+  }, [commitTarget, getCommitTarget, selection.kind]);
+
+  const updateCursorIndex = useCallback((
+    index: number,
+    options: {
+      commit: "deferred" | "immediate" | "none";
+      reason?: DataTableSelectionChangeReason;
+    },
+  ) => {
+    if (selection.kind === "none") return;
     if (index < 0 || index >= tableProps.items.length) return;
     const item = tableProps.items[index]!;
     if (isNavigable && !isNavigable(item, index)) return;
-    if (onActivateIndex) {
-      onActivateIndex(index, item);
-      return;
+    effectiveSelectedIndexRef.current = index;
+    setCursorIndex(index);
+    const reason = options.reason ?? (options.commit === "deferred"
+      ? "keyboard"
+      : options.commit === "immediate"
+        ? "pointer"
+        : "keyboard");
+    onCursorChange?.(item, index, reason);
+    if (options.commit === "deferred") {
+      requestSelectionScroll(index);
     }
-    tableProps.onActivate?.(item, index);
-  }, [isNavigable, onActivateIndex, tableProps]);
+    if (options.commit === "immediate") {
+      commitIndexImmediately(index, reason);
+    } else if (options.commit === "deferred") {
+      scheduleCommitIndex(index);
+    }
+  }, [
+    commitIndexImmediately,
+    isNavigable,
+    onCursorChange,
+    requestSelectionScroll,
+    scheduleCommitIndex,
+    selection.kind,
+    tableProps.items,
+  ]);
+
+  const activateIndex = useCallback((index: number) => {
+    if (index < 0 || index >= tableProps.items.length) return;
+    const item = tableProps.items[index]!;
+    if (isNavigable && !isNavigable(item, index)) return;
+    updateCursorIndex(index, { commit: "none", reason: "activation" });
+    commitIndexImmediately(index, "activation");
+    onActivate?.(item, index);
+  }, [commitIndexImmediately, isNavigable, onActivate, tableProps.items, updateCursorIndex]);
 
   const selectByOffset = useCallback((offset: -1 | 1) => {
     if (!navigableIndices) {
@@ -218,7 +422,7 @@ export function DataTableView<
             Math.min(selectedIndex + offset, tableProps.items.length - 1),
           )
         : 0;
-      selectIndex(nextIndex);
+      updateCursorIndex(nextIndex, { commit: "deferred" });
       return;
     }
     if (navigableIndices.length === 0) return;
@@ -230,8 +434,10 @@ export function DataTableView<
         )
       : 0;
     const nextIndex = navigableIndices[nextPosition];
-    if (nextIndex !== undefined) selectIndex(nextIndex);
-  }, [navigableIndices, selectIndex, tableProps.items.length]);
+    if (nextIndex !== undefined) {
+      updateCursorIndex(nextIndex, { commit: "deferred" });
+    }
+  }, [navigableIndices, tableProps.items.length, updateCursorIndex]);
 
   const activateSelection = useCallback(() => {
     if (!navigableIndices) {
@@ -250,6 +456,32 @@ export function DataTableView<
     activateIndex(selectedIsNavigable ? selectedIndex : navigableIndices[0]!);
   }, [activateIndex, navigableIndices, tableProps.items.length]);
 
+  const isItemSelected = useCallback((item: T, index: number) => (
+    index === effectiveSelectedIndex
+    && (!isNavigable || isNavigable(item, index))
+  ), [effectiveSelectedIndex, isNavigable]);
+
+  const handleTableSelect = useCallback((_item: T, index: number) => {
+    updateCursorIndex(index, { commit: "immediate" });
+  }, [updateCursorIndex]);
+
+  const handleTableActivate = useCallback((_item: T, index: number) => {
+    activateIndex(index);
+  }, [activateIndex]);
+
+  const handleRowMouseDown = useCallback((item: T, index: number, event: any) => {
+    const handled = tableProps.onRowMouseDown?.(item, index, event);
+    if (handled === true) {
+      updateCursorIndex(index, { commit: "immediate" });
+    }
+    return handled;
+  }, [tableProps.onRowMouseDown, updateCursorIndex]);
+
+  const handleRowContextMenu = useCallback((item: T, index: number, event: any) => {
+    updateCursorIndex(index, { commit: "immediate" });
+    tableProps.onRowContextMenu?.(item, index, event);
+  }, [tableProps.onRowContextMenu, updateCursorIndex]);
+
   useShortcut((event) => {
     if (event.defaultPrevented || event.propagationStopped) return;
     if (!focused || !keyboardNavigation) return;
@@ -293,13 +525,11 @@ export function DataTableView<
         setHoveredIdx={effectiveSetHoveredIdx}
         scrollToIndex={effectiveScrollToIndex}
         scrollToIndexVersion={scrollToIndexVersion + selectionScrollVersion}
-        isSelected={(item, index) => (
-          tableProps.isSelected(item, index)
-          || (
-            index === effectiveSelectedIndex
-            && (!isNavigable || isNavigable(item, index))
-          )
-        )}
+        isSelected={isItemSelected}
+        onSelect={handleTableSelect}
+        onActivate={handleTableActivate}
+        onRowMouseDown={handleRowMouseDown}
+        onRowContextMenu={handleRowContextMenu}
       />
     </TableViewFrame>
   );

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

@@ -327,9 +327,12 @@ export function FeedDataTableStackView({
       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)}
+      selection={{
+        kind: "index",
+        selectedIndex: activeRowIndex,
+        onChange: (_index, row) => onSelect(row.itemIndex),
+      }}
+      onActivate={(row) => openRow(row)}
       rootBefore={rootBefore}
       rootAfter={rootAfter}
       rootWidth={width}
@@ -345,11 +348,6 @@ export function FeedDataTableStackView({
           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}

package/src/components/layout/pane/footer/index.test.tsx

@@ -122,6 +122,12 @@ describe("PaneFooterBar", () => {
     const col = line.indexOf("[r]efresh");
     expect(col).toBeGreaterThanOrEqual(0);
 
+    await act(async () => {
+      await testSetup!.mockMouse.release(col + 1, 0);
+      await testSetup!.renderOnce();
+    });
+    expect(refreshCount).toBe(0);
+
     await act(async () => {
       await testSetup!.mockMouse.click(col + 1, 0);
       await testSetup!.renderOnce();

package/src/components/layout/pane/footer/index.tsx

@@ -1,4 +1,5 @@
 import { Box, Span, Text, TextAttributes, useUiCapabilities } from "../../../../ui";
+import { useRef } from "react";
 import { colors, blendHex } from "../../../../theme/colors";
 import { getShortcutHintWidth, ShortcutHint } from "../../../ui/shortcut-hint";
 import {
@@ -50,13 +51,24 @@ function stopMouseEvent(event?: { stopPropagation?: () => void; preventDefault?:
 function SegmentView({ segment }: { segment: PaneFooterSegment }) {
   const interactive = !!segment.onPress && !segment.disabled;
   const attributes = segment.parts.some((part) => part.bold) || interactive ? TextAttributes.BOLD : 0;
+  const triggerMouseDownRef = useRef(false);
+  const startSegmentPress = (event?: { stopPropagation?: () => void; preventDefault?: () => void }) => {
+    triggerMouseDownRef.current = true;
+    stopMouseEvent(event);
+  };
+  const finishSegmentPress = (event?: { stopPropagation?: () => void; preventDefault?: () => void }) => {
+    const startedOnTrigger = triggerMouseDownRef.current;
+    triggerMouseDownRef.current = false;
+    if (startedOnTrigger) segment.onPress?.();
+    else stopMouseEvent(event);
+  };
 
   return (
     <Text
       fg={segment.disabled ? colors.textMuted : colors.textDim}
       attributes={attributes}
-      onMouseDown={interactive ? stopMouseEvent : undefined}
-      onMouseUp={interactive ? segment.onPress : undefined}
+      onMouseDown={interactive ? startSegmentPress : undefined}
+      onMouseUp={interactive ? finishSegmentPress : undefined}
       {...(interactive ? { "data-gloom-interactive": "true" } : {})}
     >
       {segment.parts.map((part, index) => (

package/src/components/layout/pane/title.ts

@@ -11,7 +11,11 @@ export function getPaneDisplayTitle(
     const channelId = typeof instance.settings?.channelId === "string" && instance.settings.channelId.trim()
       ? instance.settings.channelId.trim()
       : "everyone";
-    return instance.title ?? `#${channelId}`;
+    const title = typeof instance.title === "string" ? instance.title.trim() : "";
+    const displayTitle = title && !title.startsWith("dm:") && !title.startsWith("group:") ? title : undefined;
+    if (channelId.startsWith("dm:")) return displayTitle ?? "DM";
+    if (channelId.startsWith("group:")) return displayTitle ?? "Group";
+    return displayTitle ?? `#${channelId}`;
   }
 
   if (instance.paneId === TICKER_RESEARCH_PANE_ID) {