gloomberb 0.5.1 → 0.6.0

package/src/components/layout/pane-sizing.ts

@@ -1,16 +1,15 @@
-const RESERVED_PANE_CHROME_ROWS = 2;
-const FOCUSED_PANE_BODY_INSET = 1;
-const RESERVED_FOCUSED_PANE_CHROME_COLUMNS = FOCUSED_PANE_BODY_INSET * 2;
 
-export function getPaneBodyHeight(height: number): number {
-  // Reserve the header row plus the bottom border/resize row.
-  return Math.max(1, height - RESERVED_PANE_CHROME_ROWS);
+const PANE_HEADER_ROWS = 1;
+const PANE_FOOTER_ROWS = 1;
+
+export function shouldReservePaneFooter(nativePaneChrome: boolean | undefined, showFooter: boolean): boolean {
+  return !nativePaneChrome || showFooter;
 }
 
-export function getPaneBodyHorizontalInset(focused: boolean): number {
-  return focused ? FOCUSED_PANE_BODY_INSET : 0;
+export function getPaneBodyHeight(height: number, reserveFooter = true): number {
+  return Math.max(1, height - PANE_HEADER_ROWS - (reserveFooter ? PANE_FOOTER_ROWS : 0));
 }
 
-export function getPaneBodyWidth(width: number, focused: boolean): number {
-  return Math.max(1, width - (focused ? RESERVED_FOCUSED_PANE_CHROME_COLUMNS : 0));
+export function getPaneBodyWidth(width: number): number {
+  return Math.max(1, width);
 }

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

@@ -0,0 +1,35 @@
+import { resolveCollectionForPane, resolveTickerForPane, type AppState } from "../../state/app-context";
+import type { PaneInstanceConfig } from "../../types/config";
+import type { PaneDef } from "../../types/plugin";
+
+export function getPaneDisplayTitle(
+  state: Pick<AppState, "config" | "paneState">,
+  instance: PaneInstanceConfig,
+  paneDef: PaneDef,
+): string {
+  if (instance.paneId === "chat") {
+    return instance.title ?? "#everyone";
+  }
+
+  if (instance.paneId === "ticker-detail") {
+    const ticker = resolveTickerForPane(state as AppState, instance.instanceId);
+    if (ticker) return ticker;
+    const collectionId = resolveCollectionForPane(state as AppState, instance.instanceId);
+    return state.config.portfolios.find((portfolio) => portfolio.id === collectionId)?.name
+      ?? state.config.watchlists.find((watchlist) => watchlist.id === collectionId)?.name
+      ?? instance.title
+      ?? paneDef.name;
+  }
+
+  if (instance.title) return instance.title;
+
+  if (instance.paneId === "portfolio-list") {
+    const collectionId = resolveCollectionForPane(state as AppState, instance.instanceId);
+    return state.config.portfolios.find((portfolio) => portfolio.id === collectionId)?.name
+      ?? state.config.watchlists.find((watchlist) => watchlist.id === collectionId)?.name
+      ?? paneDef.name;
+  }
+
+  const ticker = resolveTickerForPane(state as AppState, instance.instanceId);
+  return ticker ? `${paneDef.name}: ${ticker}` : paneDef.name;
+}

package/src/components/layout/pane.tsx

@@ -1,9 +1,12 @@
+import { Box, useUiCapabilities } from "../../ui";
 import type { ReactNode } from "react";
-import { paneBg } from "../../theme/colors";
+import { colors, paneBg } from "../../theme/colors";
 import { PaneHeader } from "./pane-header";
-import { getPaneBodyHeight, getPaneBodyHorizontalInset } from "./pane-sizing";
+import { hasPaneFooterContent, PaneFooterBar, type CombinedPaneFooter } from "./pane-footer";
+import { getPaneBodyHeight, shouldReservePaneFooter } from "./pane-sizing";
 
 interface PaneWrapperProps {
+  paneId?: string;
   title?: string;
   focused: boolean;
   width?: number;
@@ -12,10 +15,17 @@ interface PaneWrapperProps {
   showActions?: boolean;
   onMouseDown?: (event: any) => void;
   onMouseMove?: (event: any) => void;
+  onHeaderMouseDown?: (event: any) => void;
+  onHeaderMouseDrag?: (event: any) => void;
+  onHeaderMouseDragEnd?: (event: any) => void;
+  onHeaderContextMenu?: (event: any) => void;
+  onActionMouseDown?: (event: any) => void;
+  footer?: CombinedPaneFooter | null;
   children: ReactNode;
 }
 
 export function PaneWrapper({
+  paneId,
   title,
   focused,
   width = 0,
@@ -24,37 +34,68 @@ export function PaneWrapper({
   showActions = false,
   onMouseDown,
   onMouseMove,
+  onHeaderMouseDown,
+  onHeaderMouseDrag,
+  onHeaderMouseDragEnd,
+  onHeaderContextMenu,
+  onActionMouseDown,
+  footer,
   children,
 }: PaneWrapperProps) {
+  const { nativePaneChrome } = useUiCapabilities();
   const bg = paneBg(focused);
+  const showFooter = hasPaneFooterContent(footer);
+  const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
   const bodyHeight = typeof height === "number"
-    ? title ? getPaneBodyHeight(height) : height
+    ? title ? getPaneBodyHeight(height, reserveFooter) : height
     : undefined;
-  const bodyInset = getPaneBodyHorizontalInset(focused);
 
   return (
-    <box
+    <Box
       flexDirection="column"
       width={width}
       height={height}
       flexGrow={flexGrow}
       backgroundColor={bg}
       overflow="hidden"
+      {...(nativePaneChrome ? {
+        "data-gloom-role": "pane-window",
+        "data-gloom-pane-id": paneId,
+        "data-floating": "false",
+        "data-focused": focused ? "true" : "false",
+        style: { "--pane-border-color": focused ? colors.borderFocused : colors.border },
+      } : {})}
       onMouseDown={onMouseDown}
       onMouseMove={onMouseMove}
     >
       {title && (
-        <PaneHeader title={title} width={width} focused={focused} showActions={showActions} />
+        <PaneHeader
+          title={title}
+          width={width}
+          focused={focused}
+          showActions={showActions}
+          onHeaderMouseDown={onHeaderMouseDown}
+          onHeaderMouseDrag={onHeaderMouseDrag}
+          onHeaderMouseDragEnd={onHeaderMouseDragEnd}
+          onHeaderContextMenu={onHeaderContextMenu}
+          onActionMouseDown={onActionMouseDown}
+        />
       )}
-      <box
+      <Box
         height={bodyHeight}
         flexGrow={bodyHeight == null ? 1 : 0}
+        flexBasis={bodyHeight == null ? 0 : undefined}
         overflow="hidden"
-        paddingLeft={bodyInset}
-        paddingRight={bodyInset}
       >
         {children}
-      </box>
-    </box>
+      </Box>
+      {title && reserveFooter && (
+        <PaneFooterBar
+          footer={footer}
+          focused={focused}
+          width={typeof width === "number" ? width : undefined}
+        />
+      )}
+    </Box>
   );
 }