gloomberb 0.3.7 → 0.4.0

package/src/components/detail-feed-view.tsx

@@ -1,7 +1,10 @@
-import { TextAttributes } from "@opentui/core";
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { useKeyboard } from "@opentui/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { colors, hoverBg } from "../theme/colors";
+import { isBackNavigationKey } from "../utils/back-navigation";
 import { formatTimeAgo } from "../utils/format";
-import { ExternalLink } from "./ui";
+import { ExternalLink, PageStackView } from "./ui";
 
 export interface DetailFeedItem {
   id: string;
@@ -18,6 +21,7 @@ export interface DetailFeedItem {
 interface DetailFeedViewProps {
   width: number;
   height: number;
+  focused: boolean;
   items: DetailFeedItem[];
   selectedIdx: number;
   hoveredIdx: number | null;
@@ -25,7 +29,6 @@ interface DetailFeedViewProps {
   onHover: (index: number) => void;
   helpText?: string;
   listVariant?: "comfortable" | "compact" | "single-line";
-  splitListWidthRatio?: number;
 }
 
 function truncateWithEllipsis(text: string, width: number): string {
@@ -35,7 +38,11 @@ function truncateWithEllipsis(text: string, width: number): string {
   return `${text.slice(0, width - 3)}...`;
 }
 
-function wrapTextLines(text: string, width: number, maxLines = Number.MAX_SAFE_INTEGER): string[] {
+function wrapTextLines(
+  text: string,
+  width: number,
+  maxLines = Number.MAX_SAFE_INTEGER,
+): string[] {
   if (width <= 0) return [];
 
   const paragraphs = text
@@ -48,7 +55,11 @@ function wrapTextLines(text: string, width: number, maxLines = Number.MAX_SAFE_I
     lines.push(line);
   };
 
-  for (let paragraphIndex = 0; paragraphIndex < paragraphs.length; paragraphIndex += 1) {
+  for (
+    let paragraphIndex = 0;
+    paragraphIndex < paragraphs.length;
+    paragraphIndex += 1
+  ) {
     const paragraph = paragraphs[paragraphIndex]!;
     if (!paragraph) {
       pushLine("");
@@ -77,7 +88,7 @@ function wrapTextLines(text: string, width: number, maxLines = Number.MAX_SAFE_I
         continue;
       }
 
-      if ((current.length + 1 + word.length) <= width) {
+      if (current.length + 1 + word.length <= width) {
         current = `${current} ${word}`;
       } else {
         pushLine(current);
@@ -86,15 +97,21 @@ function wrapTextLines(text: string, width: number, maxLines = Number.MAX_SAFE_I
     }
 
     if (current) pushLine(current);
-    if (paragraphIndex < (paragraphs.length - 1)) pushLine("");
+    if (paragraphIndex < paragraphs.length - 1) pushLine("");
     if (lines.length >= maxLines) break;
   }
 
   if (lines.length > maxLines) {
     lines.length = maxLines;
   }
-  if (lines.length === maxLines && paragraphs.join(" ").length > lines.join(" ").length) {
-    lines[maxLines - 1] = truncateWithEllipsis(lines[maxLines - 1] ?? "", width);
+  if (
+    lines.length === maxLines
+    && paragraphs.join(" ").length > lines.join(" ").length
+  ) {
+    lines[maxLines - 1] = truncateWithEllipsis(
+      lines[maxLines - 1] ?? "",
+      width,
+    );
   }
 
   return lines;
@@ -111,185 +128,404 @@ function lineOrBlank(lines: string[], index: number): string {
 export function DetailFeedView({
   width,
   height,
+  focused,
   items,
   selectedIdx,
   hoveredIdx,
   onSelect,
   onHover,
-  helpText = "j/k navigate",
+  helpText = "j/k move  enter or click selected row",
   listVariant = "comfortable",
-  splitListWidthRatio = 0.38,
 }: DetailFeedViewProps) {
-  const selected = items[Math.max(0, Math.min(selectedIdx, items.length - 1))];
-  const split = width >= 92 && height >= 14;
+  const [openItemId, setOpenItemId] = useState<string | null>(null);
+  const listScrollRef = useRef<ScrollBoxRenderable>(null);
+  const detailScrollRef = useRef<ScrollBoxRenderable>(null);
+  const selected =
+    items[Math.max(0, Math.min(selectedIdx, items.length - 1))] ?? null;
+  const openItem = useMemo(
+    () =>
+      openItemId
+        ? items.find((item) => item.id === openItemId) ?? null
+        : null,
+    [items, openItemId],
+  );
   const footerHeight = helpText ? 1 : 0;
-  const availableHeight = Math.max(height - footerHeight, 6);
+  const listHeight = Math.max(height - footerHeight, 6);
+  const detailHeight = Math.max(height - 1, 4);
   const compactList = listVariant === "compact";
   const singleLineList = listVariant === "single-line";
-  const listWidth = split ? Math.max(28, Math.min(Math.floor(width * splitListWidthRatio), 44)) : Math.max(width - 2, 20);
-  const detailWidth = split ? Math.max(width - listWidth - 4, 28) : Math.max(width - 2, 20);
-  const listHeight = split ? availableHeight : Math.max(5, Math.floor((availableHeight - 1) * 0.45));
-  const detailHeight = split ? availableHeight : Math.max(3, availableHeight - listHeight - 1);
-  const listTextWidth = contentWidth(listWidth);
-  const detailTextWidth = contentWidth(detailWidth);
-  const showPreviewLine = !singleLineList && listTextWidth >= (compactList ? 18 : 28);
+  const listTextWidth = contentWidth(width);
+  const detailTextWidth = contentWidth(width);
+  const showPreviewLine =
+    !singleLineList && listTextWidth >= (compactList ? 18 : 28);
   const cardHeight = compactList
-    ? (showPreviewLine ? 2 : 1)
+    ? showPreviewLine
+      ? 2
+      : 1
     : singleLineList
       ? 1
-    : (showPreviewLine ? 4 : 3);
+      : showPreviewLine
+        ? 4
+        : 3;
 
-  return (
+  useEffect(() => {
+    if (openItemId && !items.some((item) => item.id === openItemId)) {
+      setOpenItemId(null);
+    }
+  }, [items, openItemId]);
+
+  useEffect(() => {
+    const scrollBox = listScrollRef.current;
+    if (!scrollBox?.viewport || items.length === 0 || selectedIdx < 0) return;
+
+    if (selectedIdx < scrollBox.scrollTop) {
+      scrollBox.scrollTop = selectedIdx;
+      return;
+    }
+
+    if (selectedIdx >= scrollBox.scrollTop + scrollBox.viewport.height) {
+      scrollBox.scrollTop = Math.max(
+        0,
+        selectedIdx - scrollBox.viewport.height + 1,
+      );
+    }
+  }, [items.length, selectedIdx]);
+
+  useEffect(() => {
+    if (!openItemId) return;
+    const scrollBox = detailScrollRef.current;
+    if (scrollBox) {
+      scrollBox.scrollTop = 0;
+    }
+  }, [openItemId]);
+
+  const openSelectedItem = () => {
+    if (!selected) return;
+    setOpenItemId(selected.id);
+  };
+  const handleItemMouseDown = useCallback((itemId: string, index: number) => {
+    if (selectedIdx === index) {
+      setOpenItemId(itemId);
+      return;
+    }
+    onSelect(index);
+  }, [onSelect, selectedIdx]);
+
+  const scrollDetailBy = (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),
+    );
+  };
+
+  useKeyboard((event) => {
+    if (!focused || items.length === 0) return;
+
+    if (openItem) {
+      if (isBackNavigationKey(event)) {
+        event.stopPropagation?.();
+        event.preventDefault?.();
+        setOpenItemId(null);
+      } else if (event.name === "j" || event.name === "down") {
+        event.stopPropagation?.();
+        event.preventDefault?.();
+        scrollDetailBy(1);
+      } else if (event.name === "k" || event.name === "up") {
+        event.stopPropagation?.();
+        event.preventDefault?.();
+        scrollDetailBy(-1);
+      }
+      return;
+    }
+
+    if (event.name === "j" || event.name === "down") {
+      event.stopPropagation?.();
+      event.preventDefault?.();
+      onSelect(Math.min(selectedIdx + 1, items.length - 1));
+      return;
+    }
+
+    if (event.name === "k" || event.name === "up") {
+      event.stopPropagation?.();
+      event.preventDefault?.();
+      onSelect(Math.max(selectedIdx - 1, 0));
+      return;
+    }
+
+    if (event.name === "enter" || event.name === "return") {
+      event.stopPropagation?.();
+      event.preventDefault?.();
+      openSelectedItem();
+    }
+  });
+
+  const rootContent = (
     <box flexDirection="column" flexGrow={1} paddingX={1}>
-      <box flexDirection={split ? "row" : "column"} gap={1}>
-        <box width={split ? listWidth : undefined}>
-          <scrollbox height={listHeight} scrollY>
-            <box flexDirection="column">
-              {items.map((item, index) => {
-                const isSelected = index === selectedIdx;
-                const isHovered = index === hoveredIdx && !isSelected;
-                const titleLines = wrapTextLines(item.title, listTextWidth, compactList ? 1 : 2);
-                const previewLine = item.preview ? truncateWithEllipsis(item.preview, listTextWidth) : "";
-                const timestampText = item.timestamp ? formatTimeAgo(item.timestamp) : "";
-                const inlineEyebrow = item.eyebrow ? `${item.eyebrow} | ` : "";
-                const compactTitleWidth = Math.max(listTextWidth - (timestampText ? timestampText.length + 1 : 0), 8);
-                const compactTitle = truncateWithEllipsis(`${inlineEyebrow}${item.title}`, compactTitleWidth);
-                const singleLineTitle = truncateWithEllipsis(item.title, compactTitleWidth);
-                return (
+      <scrollbox
+        ref={listScrollRef}
+        height={listHeight}
+        scrollY
+        selectable={false}
+      >
+        <box flexDirection="column">
+          {items.map((item, index) => {
+            const isSelected = index === selectedIdx;
+            const isHovered = index === hoveredIdx && !isSelected;
+            const handleRowMouseDown = (event: any) => {
+              event.preventDefault?.();
+              event.stopPropagation?.();
+              handleItemMouseDown(item.id, index);
+            };
+            const titleLines = wrapTextLines(
+              item.title,
+              listTextWidth,
+              compactList ? 1 : 2,
+            );
+            const previewLine = item.preview
+              ? truncateWithEllipsis(item.preview, listTextWidth)
+              : "";
+            const timestampText = item.timestamp
+              ? formatTimeAgo(item.timestamp)
+              : "";
+            const inlineEyebrow = item.eyebrow ? `${item.eyebrow} | ` : "";
+            const compactTitleWidth = Math.max(
+              listTextWidth - (timestampText ? timestampText.length + 1 : 0),
+              8,
+            );
+            const compactTitle = truncateWithEllipsis(
+              `${inlineEyebrow}${item.title}`,
+              compactTitleWidth,
+            );
+            const singleLineTitle = truncateWithEllipsis(
+              item.title,
+              compactTitleWidth,
+            );
+
+            return (
+              <box
+                key={item.id}
+                flexDirection="column"
+                height={cardHeight}
+                paddingX={1}
+                selectable={false}
+                backgroundColor={
+                  isSelected
+                    ? colors.selected
+                    : isHovered
+                      ? hoverBg()
+                      : colors.bg
+                }
+                onMouseMove={() => onHover(index)}
+                onMouseDown={handleRowMouseDown}
+              >
+                {singleLineList ? (
                   <box
-                    key={item.id}
-                    flexDirection="column"
-                    height={cardHeight}
-                    paddingX={1}
-                    backgroundColor={isSelected ? colors.selected : isHovered ? hoverBg() : colors.bg}
-                    onMouseMove={() => onHover(index)}
-                    onMouseDown={() => onSelect(index)}
+                    flexDirection="row"
+                    height={1}
+                    selectable={false}
+                    onMouseDown={handleRowMouseDown}
                   >
-                    {singleLineList ? (
-                      <box flexDirection="row" height={1}>
-                        <box flexGrow={1}>
-                          <text
-                            attributes={isSelected ? TextAttributes.BOLD : 0}
-                            fg={isSelected ? colors.selectedText : colors.textBright}
-                          >
-                            {singleLineTitle}
-                          </text>
-                        </box>
-                        {timestampText && (
-                          <text fg={colors.textDim}>{timestampText}</text>
-                        )}
+                    <box flexGrow={1}>
+                      <text
+                        selectable={false}
+                        attributes={isSelected ? TextAttributes.BOLD : 0}
+                        fg={
+                          isSelected
+                            ? colors.selectedText
+                            : colors.textBright
+                        }
+                      >
+                        {singleLineTitle}
+                      </text>
+                    </box>
+                    {timestampText ? (
+                      <text selectable={false} fg={colors.textDim}>{timestampText}</text>
+                    ) : null}
+                  </box>
+                ) : compactList ? (
+                  <>
+                    <box
+                      flexDirection="row"
+                      height={1}
+                      selectable={false}
+                      onMouseDown={handleRowMouseDown}
+                    >
+                      <box flexGrow={1}>
+                        <text
+                          selectable={false}
+                          attributes={isSelected ? TextAttributes.BOLD : 0}
+                          fg={
+                            isSelected
+                              ? colors.selectedText
+                              : colors.textBright
+                          }
+                        >
+                          {compactTitle}
+                        </text>
                       </box>
-                    ) : compactList ? (
-                      <>
-                        <box flexDirection="row" height={1}>
-                          <box flexGrow={1}>
-                            <text
-                              attributes={isSelected ? TextAttributes.BOLD : 0}
-                              fg={isSelected ? colors.selectedText : colors.textBright}
-                            >
-                              {compactTitle}
-                            </text>
-                          </box>
-                          {timestampText && (
-                            <text fg={colors.textDim}>{timestampText}</text>
-                          )}
-                        </box>
-                        {showPreviewLine && (
-                          <box height={1}>
-                            <text fg={colors.textMuted}>
-                              {previewLine || truncateWithEllipsis(item.eyebrow ?? "", listTextWidth)}
-                            </text>
-                          </box>
-                        )}
-                      </>
-                    ) : (
-                      <>
-                        <box flexDirection="row" height={1}>
-                          <box flexGrow={1}>
-                            <text fg={colors.textMuted}>{truncateWithEllipsis(item.eyebrow ?? "", listTextWidth)}</text>
-                          </box>
-                          {timestampText && (
-                            <text fg={colors.textDim}>{timestampText}</text>
+                      {timestampText ? (
+                        <text selectable={false} fg={colors.textDim}>{timestampText}</text>
+                      ) : null}
+                    </box>
+                    {showPreviewLine ? (
+                      <box
+                        height={1}
+                        selectable={false}
+                        onMouseDown={handleRowMouseDown}
+                      >
+                        <text selectable={false} fg={colors.textMuted}>
+                          {previewLine
+                            || truncateWithEllipsis(
+                              item.eyebrow ?? "",
+                              listTextWidth,
+                            )}
+                        </text>
+                      </box>
+                    ) : null}
+                  </>
+                ) : (
+                  <>
+                    <box
+                      flexDirection="row"
+                      height={1}
+                      selectable={false}
+                      onMouseDown={handleRowMouseDown}
+                    >
+                      <box flexGrow={1}>
+                        <text selectable={false} fg={colors.textMuted}>
+                          {truncateWithEllipsis(
+                            item.eyebrow ?? "",
+                            listTextWidth,
                           )}
-                        </box>
-                        <box height={1}>
-                          <text
-                            attributes={isSelected ? TextAttributes.BOLD : 0}
-                            fg={isSelected ? colors.selectedText : colors.textBright}
-                          >
-                            {lineOrBlank(titleLines, 0)}
-                          </text>
-                        </box>
-                        <box height={1}>
-                          <text fg={isSelected ? colors.selectedText : colors.text}>
-                            {lineOrBlank(titleLines, 1)}
-                          </text>
-                        </box>
-                        {showPreviewLine && (
-                          <box height={1}>
-                            <text fg={colors.textMuted}>{previewLine}</text>
-                          </box>
-                        )}
-                      </>
-                    )}
-                  </box>
-                );
-              })}
-            </box>
-          </scrollbox>
+                        </text>
+                      </box>
+                      {timestampText ? (
+                        <text selectable={false} fg={colors.textDim}>{timestampText}</text>
+                      ) : null}
+                    </box>
+                    <box
+                      height={1}
+                      selectable={false}
+                      onMouseDown={handleRowMouseDown}
+                    >
+                      <text
+                        selectable={false}
+                        attributes={isSelected ? TextAttributes.BOLD : 0}
+                        fg={
+                          isSelected
+                            ? colors.selectedText
+                            : colors.textBright
+                        }
+                      >
+                        {lineOrBlank(titleLines, 0)}
+                      </text>
+                    </box>
+                    <box
+                      height={1}
+                      selectable={false}
+                      onMouseDown={handleRowMouseDown}
+                    >
+                      <text
+                        selectable={false}
+                        fg={isSelected ? colors.selectedText : colors.text}
+                      >
+                        {lineOrBlank(titleLines, 1)}
+                      </text>
+                    </box>
+                    {showPreviewLine ? (
+                      <box
+                        height={1}
+                        selectable={false}
+                        onMouseDown={handleRowMouseDown}
+                      >
+                        <text selectable={false} fg={colors.textMuted}>{previewLine}</text>
+                      </box>
+                    ) : null}
+                  </>
+                )}
+              </box>
+            );
+          })}
         </box>
+      </scrollbox>
 
-        <box width={split ? detailWidth : undefined} flexGrow={1}>
-          <scrollbox height={detailHeight} scrollY>
-            {selected ? (
-              <box flexDirection="column">
-                {wrapTextLines(selected.detailTitle ?? selected.title, detailTextWidth, 4).map((line, index) => (
-                  <box key={`title-${index}`} height={1}>
-                    <text attributes={TextAttributes.BOLD} fg={colors.textBright}>{line}</text>
-                  </box>
-                ))}
+      {helpText ? (
+        <box height={1}>
+          <text selectable={false} fg={colors.textMuted}>{helpText}</text>
+        </box>
+      ) : null}
+    </box>
+  );
 
-                {(selected.detailMeta ?? []).flatMap((entry) => wrapTextLines(entry, detailTextWidth, 2)).map((line, index) => (
-                  <box key={`meta-${index}`} height={1}>
-                    <text fg={colors.textMuted}>{line}</text>
-                  </box>
-                ))}
+  const detailContent = openItem ? (
+    <box flexDirection="column" flexGrow={1} paddingX={1}>
+      <scrollbox ref={detailScrollRef} height={detailHeight} scrollY>
+        <box flexDirection="column">
+          {wrapTextLines(
+            openItem.detailTitle ?? openItem.title,
+            detailTextWidth,
+            4,
+          ).map((line, index) => (
+            <box key={`title-${index}`} height={1}>
+              <text attributes={TextAttributes.BOLD} fg={colors.textBright}>
+                {line}
+              </text>
+            </box>
+          ))}
 
-                <box height={1} />
+          {(openItem.detailMeta ?? [])
+            .flatMap((entry) => wrapTextLines(entry, detailTextWidth, 2))
+            .map((line, index) => (
+              <box key={`meta-${index}`} height={1}>
+                <text fg={colors.textMuted}>{line}</text>
+              </box>
+            ))}
 
-                {wrapTextLines(selected.detailBody ?? "", detailTextWidth).map((line, index) => (
-                  <box key={`body-${index}`} height={1}>
-                    <text fg={colors.text}>{line}</text>
-                  </box>
-                ))}
+          <box height={1} />
 
-                {selected.detailNote && (
-                  <>
-                    <box height={1} />
-                    {wrapTextLines(selected.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>
-                      )
-                    )}
-                  </>
-                )}
+          {wrapTextLines(openItem.detailBody ?? "", detailTextWidth).map(
+            (line, index) => (
+              <box key={`body-${index}`} height={1}>
+                <text fg={colors.text}>{line}</text>
               </box>
-            ) : (
-              <text fg={colors.textDim}>Nothing selected.</text>
-            )}
-          </scrollbox>
-        </box>
-      </box>
+            ),
+          )}
 
-      {helpText && (
-        <box height={1}>
-          <text fg={colors.textMuted}>{helpText}</text>
+          {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 (
+    <PageStackView
+      focused={focused}
+      detailOpen={!!openItem}
+      onBack={() => setOpenItemId(null)}
+      rootContent={rootContent}
+      detailContent={detailContent}
+    />
   );
 }

package/src/components/layout/floating-pane.tsx

@@ -42,7 +42,7 @@ export function FloatingPaneWrapper({
 
       {/* Resize handle at bottom-right corner */}
       <box position="absolute" bottom={0} right={0} width={2} height={1}>
-        <text fg={colors.textDim} selectable={false}> ◢</text>
+        <text fg={focused ? colors.borderFocused : colors.textDim} selectable={false}>{focused ? "─◢" : " ◢"}</text>
       </box>
     </box>
   );