gloomberb 0.7.5 → 0.8.0

package/src/components/command-bar/list/model.ts

@@ -0,0 +1,81 @@
+import { buildSections, type CommandBarSectionOrder } from "../view-model";
+
+export interface ResultItem {
+  id: string;
+  label: string;
+  detail: string;
+  category: string;
+  kind: "command" | "ticker" | "search" | "plugin" | "action" | "info";
+  right?: string;
+  shortcutQuery?: string;
+  searchText?: string;
+  pluginToggle?: () => void | Promise<void>;
+  secondaryAction?: () => void | Promise<void>;
+  checked?: boolean;
+  current?: boolean;
+  disabled?: boolean;
+  action: () => void | Promise<void>;
+}
+
+type ListScreenKind = "root" | "mode" | "picker" | "pane-settings";
+
+export interface ListScreenState {
+  kind: ListScreenKind;
+  title: string;
+  subtitle?: string;
+  query: string;
+  selectedIdx: number;
+  hoveredIdx: number | null;
+  results: ResultItem[];
+  searching: boolean;
+  emptyLabel: string;
+  emptyDetail: string;
+  footerLeft: string;
+  footerRight: string;
+  sectionOrder?: CommandBarSectionOrder;
+}
+
+export type CommandBarListRow =
+  | { kind: "spacer"; id: string }
+  | { kind: "heading"; id: string; label: string }
+  | { kind: "item"; item: ResultItem; globalIdx: number }
+  | { kind: "message"; id: string; label: string; dim?: boolean }
+  | { kind: "spinner"; id: string; label: string }
+  | { kind: "filler"; id: string };
+
+export function orderListResults(
+  results: ResultItem[],
+  options?: { sectionOrder?: CommandBarSectionOrder },
+): ResultItem[] {
+  return buildSections(results, options).flatMap((section) => section.items);
+}
+
+export function buildListRows(listState: ListScreenState): CommandBarListRow[] {
+  const rows: CommandBarListRow[] = [];
+  const sections = buildSections(listState.results, { sectionOrder: listState.sectionOrder });
+  let globalIdx = 0;
+  sections.forEach((section, sectionIndex) => {
+    if (sectionIndex > 0) {
+      rows.push({ kind: "spacer", id: `spacer:${sectionIndex}:${section.category}` });
+    }
+    rows.push({ kind: "heading", id: `heading:${sectionIndex}:${section.category}`, label: section.category });
+    for (const item of section.items) {
+      rows.push({ kind: "item", item, globalIdx });
+      globalIdx += 1;
+    }
+  });
+  return rows;
+}
+
+export function buildNativeListRows(listState: ListScreenState, rows: CommandBarListRow[]): CommandBarListRow[] {
+  if (listState.searching && rows.length === 0) {
+    return [{ kind: "spinner", id: "searching", label: "Searching…" }];
+  }
+  if (rows.length === 0) {
+    return [{ kind: "message", id: "empty", label: listState.emptyLabel }];
+  }
+  if (listState.searching) {
+    return [...rows, { kind: "spinner", id: "searching", label: "Searching…" }];
+  }
+  return rows;
+}

package/src/components/command-bar/list/navigation.ts

@@ -0,0 +1,125 @@
+import { useCallback, type Dispatch, type RefObject, type SetStateAction } from "react";
+import type { CommandBarRoute } from "../workflow/types";
+import type { ListScreenState, ResultItem } from "./model";
+import type { CommandBarListScrollEvent } from "./view";
+
+interface CommandBarListNavigationOptions {
+  activateListSelectionRef: RefObject<(options?: { secondary?: boolean; item?: ResultItem }) => void>;
+  currentRouteRef: RefObject<CommandBarRoute | null>;
+  setRootHoveredIdx: Dispatch<SetStateAction<number | null>>;
+  setRootSelectedIdx: Dispatch<SetStateAction<number>>;
+  setRouteStack: Dispatch<SetStateAction<CommandBarRoute[]>>;
+  visibleListStateRef: RefObject<ListScreenState | null>;
+}
+
+function clampListIndex(index: number, length: number): number {
+  return Math.max(0, Math.min(index, Math.max(0, length - 1)));
+}
+
+export function useCommandBarListNavigation({
+  activateListSelectionRef,
+  currentRouteRef,
+  setRootHoveredIdx,
+  setRootSelectedIdx,
+  setRouteStack,
+  visibleListStateRef,
+}: CommandBarListNavigationOptions) {
+  const moveListSelection = useCallback((delta: number) => {
+    const listState = visibleListStateRef.current;
+    if (!listState || listState.results.length === 0 || delta === 0) return;
+    const nextIndex = clampListIndex(listState.selectedIdx + delta, listState.results.length);
+    const selectionChanged = nextIndex !== listState.selectedIdx;
+    const hoverChanged = listState.hoveredIdx !== null;
+    if (!selectionChanged && !hoverChanged) return;
+    const nextListState = { ...listState, selectedIdx: nextIndex, hoveredIdx: null };
+    visibleListStateRef.current = nextListState;
+
+    if (!currentRouteRef.current) {
+      setRootSelectedIdx((current) => (current === nextIndex ? current : nextIndex));
+      setRootHoveredIdx((current) => (current === null ? current : null));
+      return;
+    }
+    setRouteStack((current) => {
+      if (current.length === 0) return current;
+      const next = [...current];
+      const top = next[next.length - 1];
+      if (!top || (top.kind !== "mode" && top.kind !== "picker" && top.kind !== "pane-settings")) {
+        return current;
+      }
+      if (top.selectedIdx === nextIndex && top.hoveredIdx === null) return current;
+      next[next.length - 1] = { ...top, selectedIdx: nextIndex, hoveredIdx: null };
+      return next;
+    });
+  }, [
+    currentRouteRef,
+    setRootHoveredIdx,
+    setRootSelectedIdx,
+    setRouteStack,
+    visibleListStateRef,
+  ]);
+
+  const setHoveredIndex = useCallback((index: number | null) => {
+    if (!currentRouteRef.current) {
+      setRootHoveredIdx((current) => (current === index ? current : index));
+      return;
+    }
+    setRouteStack((current) => {
+      if (current.length === 0) return current;
+      const next = [...current];
+      const route = next[next.length - 1];
+      if (!route) return current;
+      if (route.kind === "mode" || route.kind === "picker" || route.kind === "pane-settings") {
+        if (route.hoveredIdx === index) return current;
+        next[next.length - 1] = { ...route, hoveredIdx: index };
+        return next;
+      }
+      return current;
+    });
+  }, [currentRouteRef, setRootHoveredIdx, setRouteStack]);
+
+  const handleListScroll = useCallback((event: CommandBarListScrollEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+    const direction = event.scroll?.direction;
+    const delta = Math.max(1, Math.round(event.scroll?.delta ?? 1));
+    setHoveredIndex(null);
+    if (direction === "down" || direction === "right") {
+      moveListSelection(delta);
+    } else if (direction === "up" || direction === "left") {
+      moveListSelection(-delta);
+    }
+  }, [moveListSelection, setHoveredIndex]);
+
+  const handleListRowMouseDown = useCallback((event: any, item: ResultItem, globalIdx: number) => {
+    event.stopPropagation?.();
+    event.preventDefault?.();
+    if (!currentRouteRef.current) {
+      setRootSelectedIdx((current) => (current === globalIdx ? current : globalIdx));
+    } else {
+      setRouteStack((current) => {
+        if (current.length === 0) return current;
+        const next = [...current];
+        const route = next[next.length - 1];
+        if (!route || (route.kind !== "mode" && route.kind !== "picker" && route.kind !== "pane-settings")) {
+          return current;
+        }
+        if (route.selectedIdx === globalIdx && route.hoveredIdx === globalIdx) return current;
+        next[next.length - 1] = { ...route, selectedIdx: globalIdx, hoveredIdx: globalIdx };
+        return next;
+      });
+    }
+    activateListSelectionRef.current?.({ item });
+  }, [
+    activateListSelectionRef,
+    currentRouteRef,
+    setRootSelectedIdx,
+    setRouteStack,
+  ]);
+
+  return {
+    handleListRowMouseDown,
+    handleListScroll,
+    moveListSelection,
+    setHoveredIndex,
+  };
+}

package/src/components/command-bar/list/view.tsx

@@ -0,0 +1,316 @@
+import { memo, useMemo, type RefObject } from "react";
+import {
+  Box,
+  Input,
+  ScrollBox,
+  Text,
+  TextAttributes,
+  type ScrollBoxRenderable,
+} from "../../../ui";
+import { Spinner } from "../../ui";
+import type { CommandBarListRow, ListScreenState, ResultItem } from "./model";
+import { getRowPresentation, truncateText } from "../view-model";
+
+export type CommandBarListScrollEvent = {
+  stopPropagation: () => void;
+  preventDefault: () => void;
+  scroll?: { direction?: string; delta?: number };
+};
+
+interface CommandBarListHeaderProps {
+  kind: ListScreenState["kind"];
+  query: string;
+  queryDisplayWidth: number;
+  nativePaneChrome: boolean;
+  inputBg: string;
+  paletteBg: string;
+  paletteText: string;
+  paletteSubtleText: string;
+  cursorColor: string;
+  contentPadding: number;
+  rootGhostSuffix: string | null;
+  rootQueryLength: number;
+  rootShortcutFeedback: string | null;
+  onQueryChange: (query: string) => void;
+}
+
+export const CommandBarListHeader = memo(function CommandBarListHeader({
+  kind,
+  query,
+  queryDisplayWidth,
+  nativePaneChrome,
+  inputBg,
+  paletteBg,
+  paletteText,
+  paletteSubtleText,
+  cursorColor,
+  contentPadding,
+  rootGhostSuffix,
+  rootQueryLength,
+  rootShortcutFeedback,
+  onQueryChange,
+}: CommandBarListHeaderProps) {
+  return (
+    <>
+      <Box height={1} paddingX={contentPadding}>
+        <Box
+          width={queryDisplayWidth}
+          height={1}
+          position="relative"
+          backgroundColor={nativePaneChrome ? undefined : inputBg}
+          style={nativePaneChrome ? undefined : {
+            overflow: "hidden",
+          }}
+        >
+          <Input
+            value={query}
+            onInput={onQueryChange}
+            onChange={onQueryChange}
+            placeholder={kind === "root" ? "Search" : "Filter"}
+            focused
+            width={nativePaneChrome ? "100%" : queryDisplayWidth}
+            backgroundColor={nativePaneChrome ? "transparent" : paletteBg}
+            focusedBackgroundColor={nativePaneChrome ? "transparent" : paletteBg}
+            textColor={paletteText}
+            focusedTextColor={paletteText}
+            placeholderColor={paletteSubtleText}
+            cursorColor={cursorColor}
+          />
+          {kind === "root" && rootGhostSuffix && (
+            <Box
+              position="absolute"
+              top={0}
+              left={Math.max(0, Math.min(rootQueryLength, queryDisplayWidth - 1))}
+              width={Math.max(0, queryDisplayWidth - Math.min(rootQueryLength, queryDisplayWidth - 1))}
+              height={1}
+            >
+              <Text fg={paletteSubtleText}>
+                {truncateText(
+                  rootGhostSuffix,
+                  Math.max(0, queryDisplayWidth - Math.min(rootQueryLength, queryDisplayWidth - 1)),
+                )}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+      <Box height={1} paddingX={contentPadding}>
+        {kind === "root" && rootShortcutFeedback
+          ? (
+            <Text fg={paletteSubtleText}>
+              {truncateText(rootShortcutFeedback, queryDisplayWidth)}
+            </Text>
+          )
+          : null}
+      </Box>
+    </>
+  );
+});
+
+interface CommandBarListItemRowProps {
+  item: ResultItem;
+  globalIdx: number;
+  isSelected: boolean;
+  isHovered: boolean;
+  contentPadding: number;
+  labelWidth: number;
+  trailingWidth: number;
+  nativePaneChrome: boolean;
+  paletteBg: string;
+  paletteHoverBg: string;
+  paletteSelectedBg: string;
+  paletteSelectedText: string;
+  paletteSubtleText: string;
+  paletteText: string;
+  panelBg: string;
+  onHoverIndex: (index: number | null) => void;
+  onListScroll: (event: CommandBarListScrollEvent) => void;
+  onRowMouseDown: (event: any, item: ResultItem, globalIdx: number) => void;
+}
+
+const CommandBarListItemRow = memo(function CommandBarListItemRow({
+  item,
+  globalIdx,
+  isSelected,
+  isHovered,
+  contentPadding,
+  labelWidth,
+  trailingWidth,
+  nativePaneChrome,
+  paletteBg,
+  paletteHoverBg,
+  paletteSelectedBg,
+  paletteSelectedText,
+  paletteSubtleText,
+  paletteText,
+  panelBg,
+  onHoverIndex,
+  onListScroll,
+  onRowMouseDown,
+}: CommandBarListItemRowProps) {
+  const presentation = getRowPresentation(item, isSelected, trailingWidth > 0);
+  const label = truncateText(presentation.label, labelWidth);
+  const trailing = truncateText(presentation.trailing, trailingWidth);
+
+  return (
+    <Box
+      key={item.id}
+      flexDirection="row"
+      height={1}
+      paddingX={contentPadding}
+      backgroundColor={isSelected
+        ? paletteSelectedBg
+        : isHovered
+          ? paletteHoverBg
+          : (nativePaneChrome ? panelBg : paletteBg)}
+      onMouseMove={() => onHoverIndex(globalIdx)}
+      onMouseOut={() => onHoverIndex(null)}
+      {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}
+      onMouseDown={(event: any) => onRowMouseDown(event, item, globalIdx)}
+      data-command-bar-row-selected={nativePaneChrome && isSelected ? "true" : undefined}
+      style={nativePaneChrome ? { borderRadius: 6 } : undefined}
+    >
+      <Box width={labelWidth}>
+        <Text fg={isSelected ? paletteSelectedText : presentation.primaryMuted ? paletteSubtleText : paletteText}>
+          {label}
+        </Text>
+      </Box>
+      <Box width={trailingWidth}>
+        <Text fg={isSelected ? paletteSelectedText : paletteSubtleText}>{trailing}</Text>
+      </Box>
+    </Box>
+  );
+});
+
+interface CommandBarListBodyProps {
+  visibleListState: ListScreenState;
+  nativeListRows: CommandBarListRow[];
+  listBodyHeight: number;
+  contentPadding: number;
+  labelWidth: number;
+  nativePaneChrome: boolean;
+  nativeListScrollRef: RefObject<ScrollBoxRenderable | null>;
+  paletteBg: string;
+  paletteHeadingText: string;
+  paletteHoverBg: string;
+  paletteSelectedBg: string;
+  paletteSelectedText: string;
+  paletteSubtleText: string;
+  paletteText: string;
+  panelBg: string;
+  queryDisplayWidth: number;
+  trailingWidth: number;
+  onHoverIndex: (index: number | null) => void;
+  onListScroll: (event: CommandBarListScrollEvent) => void;
+  onRowMouseDown: (event: any, item: ResultItem, globalIdx: number) => void;
+}
+
+export const CommandBarListBody = memo(function CommandBarListBody({
+  visibleListState,
+  nativeListRows,
+  listBodyHeight,
+  contentPadding,
+  labelWidth,
+  nativePaneChrome,
+  nativeListScrollRef,
+  paletteBg,
+  paletteHeadingText,
+  paletteHoverBg,
+  paletteSelectedBg,
+  paletteSelectedText,
+  paletteSubtleText,
+  paletteText,
+  panelBg,
+  queryDisplayWidth,
+  trailingWidth,
+  onHoverIndex,
+  onListScroll,
+  onRowMouseDown,
+}: CommandBarListBodyProps) {
+  const visibleRows = useMemo(() => {
+    const rows = nativeListRows;
+    if (nativePaneChrome) return rows;
+    const paddedRows = [...rows];
+    while (paddedRows.length < listBodyHeight) {
+      paddedRows.push({ kind: "filler", id: `filler:${paddedRows.length}` });
+    }
+    return paddedRows;
+  }, [
+    listBodyHeight,
+    nativeListRows,
+    nativePaneChrome,
+  ]);
+
+  const renderedRows = (
+    <>
+      {visibleRows.map((row) => {
+        if (row.kind === "filler" || row.kind === "spacer") {
+          return <Box key={row.id} height={1} />;
+        }
+        if (row.kind === "spinner") {
+          return (
+            <Box key={row.id} height={1} paddingX={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}>
+              <Spinner label={row.label} />
+            </Box>
+          );
+        }
+        if (row.kind === "message") {
+          return (
+            <Box key={row.id} height={1} paddingX={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}>
+              <Text fg={paletteText}>{truncateText(row.label, queryDisplayWidth)}</Text>
+            </Box>
+          );
+        }
+        if (row.kind === "heading") {
+          return (
+            <Box key={row.id} height={1} paddingX={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}>
+              <Text attributes={TextAttributes.BOLD} fg={paletteHeadingText}>
+                {truncateText(row.label, queryDisplayWidth)}
+              </Text>
+            </Box>
+          );
+        }
+
+        const isSelected = row.globalIdx === visibleListState.selectedIdx;
+        const isHovered = row.globalIdx === visibleListState.hoveredIdx && !isSelected;
+        const itemRowKey = `item:${row.globalIdx}:${row.item.id}:${row.item.category}:${row.item.label}:${row.item.right || ""}`;
+        return (
+          <CommandBarListItemRow
+            key={itemRowKey}
+            item={row.item}
+            globalIdx={row.globalIdx}
+            isSelected={isSelected}
+            isHovered={isHovered}
+            contentPadding={contentPadding}
+            labelWidth={labelWidth}
+            trailingWidth={trailingWidth}
+            nativePaneChrome={nativePaneChrome}
+            paletteBg={paletteBg}
+            paletteHoverBg={paletteHoverBg}
+            paletteSelectedBg={paletteSelectedBg}
+            paletteSelectedText={paletteSelectedText}
+            paletteSubtleText={paletteSubtleText}
+            paletteText={paletteText}
+            panelBg={panelBg}
+            onHoverIndex={onHoverIndex}
+            onListScroll={onListScroll}
+            onRowMouseDown={onRowMouseDown}
+          />
+        );
+      })}
+    </>
+  );
+
+  return (
+    <ScrollBox
+      ref={nativeListScrollRef}
+      flexDirection="column"
+      height={listBodyHeight}
+      scrollY
+      focusable={false}
+      {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}
+    >
+      {renderedRows}
+    </ScrollBox>
+  );
+});