gloomberb 0.8.1 → 0.9.0

package/src/plugins/builtin/substack/article-detail.tsx

@@ -0,0 +1,359 @@
+import { useCallback, type RefObject } from "react";
+import { Box, ScrollBox, Text, TextAttributes, useRendererHost, type ScrollBoxRenderable } from "../../../ui";
+import { Spinner } from "../../../components";
+import { RemoteImage } from "../../../components/ui";
+import { TickerBadgeText } from "../../../components/ticker/badge/text";
+import { useInlineTickers } from "../../../state/hooks/inline-tickers";
+import { colors } from "../../../theme/colors";
+import type {
+  SubstackArticleDetail,
+  SubstackArticleSummary,
+  SubstackContentBlock,
+} from "./types";
+
+function articleBlockText(block: SubstackContentBlock): string {
+  switch (block.type) {
+    case "heading":
+    case "paragraph":
+    case "quote":
+    case "listItem":
+      return block.text;
+    case "embed":
+      return [block.text, block.url].filter(Boolean).join("\n");
+    default:
+      return "";
+  }
+}
+
+function wrappedTextProps(width: number) {
+  return {
+    width,
+    wrapText: true,
+    wrapMode: "word",
+    style: {
+      minWidth: 0,
+      whiteSpace: "pre-wrap",
+      overflowWrap: "anywhere",
+    },
+  } as const;
+}
+
+function normalizedTwitterUsername(username: string | null | undefined): string | null {
+  const normalized = username?.trim().replace(/^@/, "") ?? "";
+  return /^[A-Za-z0-9_]{1,15}$/.test(normalized) ? normalized : null;
+}
+
+function TweetEmbedView({
+  block,
+  lineWidth,
+  imageWidth,
+  imageHeight,
+  catalog,
+  openTicker,
+  openLink,
+  openUsername,
+}: {
+  block: Extract<SubstackContentBlock, { type: "embed"; kind: "tweet" }>;
+  lineWidth: number;
+  imageWidth: number;
+  imageHeight: number;
+  catalog: ReturnType<typeof useInlineTickers>["catalog"];
+  openTicker: ReturnType<typeof useInlineTickers>["openTicker"];
+  openLink: (url: string) => void;
+  openUsername: (username: string) => void;
+}) {
+  const username = normalizedTwitterUsername(block.username);
+  const contentWidth = Math.max(1, lineWidth - 3);
+
+  return (
+    <Box flexDirection="column" width={lineWidth} paddingX={1}>
+      <Box flexDirection="row" width={Math.max(1, lineWidth - 2)}>
+        <Text fg={colors.textDim} attributes={TextAttributes.BOLD}>Tweet</Text>
+        {username ? (
+          <Text
+            fg={colors.borderFocused}
+            onMouseDown={() => openUsername(username)}
+          >
+            {` @${username}`}
+          </Text>
+        ) : null}
+        {block.dateLabel ? <Text fg={colors.textDim}>{` | ${block.dateLabel}`}</Text> : null}
+      </Box>
+      <Box flexDirection="row" width={Math.max(1, lineWidth - 2)}>
+        <Text fg={colors.borderFocused}>| </Text>
+        <Box width={contentWidth}>
+          <TickerBadgeText
+            text={block.text}
+            lineWidth={contentWidth}
+            catalog={catalog}
+            textColor={colors.text}
+            openTicker={openTicker}
+            openLink={openLink}
+            openUsername={openUsername}
+          />
+        </Box>
+      </Box>
+      {block.imageUrls.length > 0 ? (
+        <Box flexDirection="column" paddingLeft={2}>
+          {block.imageUrls.slice(0, 2).map((url, index) => (
+            <RemoteImage
+              key={url}
+              src={url}
+              alt={`Tweet image ${index + 1}`}
+              width={Math.max(1, imageWidth - 2)}
+              height={Math.max(4, Math.min(imageHeight, 10))}
+              label={block.imageUrls.length > 1 ? `tweet image ${index + 1}` : "tweet image"}
+            />
+          ))}
+        </Box>
+      ) : null}
+      {block.url ? (
+        <Text
+          fg={colors.borderFocused}
+          onMouseDown={() => openLink(block.url!)}
+        >
+          open tweet
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
+
+function ArticleBlockView({
+  block,
+  lineWidth,
+  imageWidth,
+  imageHeight,
+  catalog,
+  openTicker,
+  openLink,
+  openUsername,
+}: {
+  block: SubstackContentBlock;
+  lineWidth: number;
+  imageWidth: number;
+  imageHeight: number;
+  catalog: ReturnType<typeof useInlineTickers>["catalog"];
+  openTicker: ReturnType<typeof useInlineTickers>["openTicker"];
+  openLink: (url: string) => void;
+  openUsername: (username: string) => void;
+}) {
+  switch (block.type) {
+    case "heading":
+      return (
+        <Text
+          fg={colors.textBright}
+          attributes={TextAttributes.BOLD}
+          {...wrappedTextProps(lineWidth)}
+        >
+          {block.text}
+        </Text>
+      );
+    case "quote":
+      return (
+        <Box flexDirection="row" width={lineWidth}>
+          <Text fg={colors.warning}>| </Text>
+          <Box width={Math.max(1, lineWidth - 2)}>
+            <TickerBadgeText
+              text={block.text}
+              lineWidth={Math.max(1, lineWidth - 2)}
+              catalog={catalog}
+              textColor={colors.textDim}
+              openTicker={openTicker}
+              openLink={openLink}
+              openUsername={openUsername}
+            />
+          </Box>
+        </Box>
+      );
+    case "listItem":
+      return (
+        <Box flexDirection="row" width={lineWidth}>
+          <Text fg={colors.textDim}>- </Text>
+          <Box width={Math.max(1, lineWidth - 2)}>
+            <TickerBadgeText
+              text={block.text}
+              lineWidth={Math.max(1, lineWidth - 2)}
+              catalog={catalog}
+              textColor={colors.text}
+              openTicker={openTicker}
+              openLink={openLink}
+              openUsername={openUsername}
+            />
+          </Box>
+        </Box>
+      );
+    case "image":
+      return (
+        <RemoteImage
+          src={block.url}
+          alt={block.alt ?? "Substack image"}
+          width={imageWidth}
+          height={imageHeight}
+          label={block.alt ?? "image"}
+        />
+      );
+    case "embed":
+      if (block.kind === "tweet") {
+        return (
+          <TweetEmbedView
+            block={block}
+            lineWidth={lineWidth}
+            imageWidth={imageWidth}
+            imageHeight={imageHeight}
+            catalog={catalog}
+            openTicker={openTicker}
+            openLink={openLink}
+            openUsername={openUsername}
+          />
+        );
+      }
+      return (
+        <Box flexDirection="column" width={lineWidth} paddingX={1}>
+          <Text fg={colors.textDim} attributes={TextAttributes.BOLD}>
+            {block.kind === "media" ? "Media" : "Link"}
+          </Text>
+          <TickerBadgeText
+            text={block.text}
+            lineWidth={Math.max(1, lineWidth - 2)}
+            catalog={catalog}
+            textColor={colors.text}
+            openTicker={openTicker}
+            openLink={openLink}
+            openUsername={openUsername}
+          />
+          {block.url ? (
+            <Text
+              fg={colors.borderFocused}
+              onMouseDown={() => openLink(block.url!)}
+              {...wrappedTextProps(Math.max(1, lineWidth - 2))}
+            >
+              {block.url}
+            </Text>
+          ) : null}
+        </Box>
+      );
+    case "divider":
+      return <Text fg={colors.border}>{"-".repeat(Math.max(1, Math.min(lineWidth, 96)))}</Text>;
+    case "paragraph":
+    default:
+      return (
+        <TickerBadgeText
+          text={block.text}
+          lineWidth={lineWidth}
+          catalog={catalog}
+          textColor={colors.text}
+          openTicker={openTicker}
+          openLink={openLink}
+          openUsername={openUsername}
+        />
+      );
+  }
+}
+
+function ArticleRichContent({
+  blocks,
+  fallbackText,
+  fallbackImageUrls,
+  articleTitle,
+  lineWidth,
+  imageWidth,
+  imageHeight,
+}: {
+  blocks: SubstackContentBlock[];
+  fallbackText: string;
+  fallbackImageUrls: string[];
+  articleTitle: string;
+  lineWidth: number;
+  imageWidth: number;
+  imageHeight: number;
+}) {
+  const rendererHost = useRendererHost();
+  const resolvedBlocks = blocks.length > 0
+    ? blocks
+    : [
+      ...(fallbackText ? [{ type: "paragraph" as const, text: fallbackText }] : []),
+      ...fallbackImageUrls.map((url): SubstackContentBlock => ({ type: "image", url, alt: articleTitle })),
+    ];
+  const tickerText = resolvedBlocks.map(articleBlockText).filter(Boolean).join("\n");
+  const { catalog, openTicker } = useInlineTickers([tickerText], { liveQuotes: false });
+  const openLink = useCallback((url: string) => {
+    void rendererHost.openExternal(url);
+  }, [rendererHost]);
+  const openUsername = useCallback((username: string) => {
+    const normalized = normalizedTwitterUsername(username);
+    if (!normalized) return;
+    void rendererHost.openExternal(`https://x.com/${normalized}`);
+  }, [rendererHost]);
+
+  if (resolvedBlocks.length === 0) {
+    return <Text fg={colors.textDim}>No article text returned.</Text>;
+  }
+
+  return (
+    <Box flexDirection="column" width={lineWidth} gap={1}>
+      {resolvedBlocks.map((block, index) => (
+        <ArticleBlockView
+          key={`${block.type}:${index}:${articleBlockText(block).slice(0, 32)}`}
+          block={block}
+          lineWidth={lineWidth}
+          imageWidth={imageWidth}
+          imageHeight={imageHeight}
+          catalog={catalog}
+          openTicker={openTicker}
+          openLink={openLink}
+          openUsername={openUsername}
+        />
+      ))}
+    </Box>
+  );
+}
+
+export function ArticleDetail({
+  article,
+  detail,
+  width,
+  loading,
+  error,
+  scrollRef,
+  onOpenArticle,
+}: {
+  article: SubstackArticleSummary;
+  detail: SubstackArticleDetail | null;
+  width: number;
+  loading: boolean;
+  error: string | null;
+  scrollRef: RefObject<ScrollBoxRenderable | null>;
+  onOpenArticle: () => void;
+}) {
+  const resolved = detail ?? null;
+  const text = resolved?.contentText || article.previewText || article.subtitle || "";
+  const blocks = resolved?.contentBlocks ?? [];
+  const fallbackImageUrls = resolved?.imageUrls.length ? resolved.imageUrls : article.imageUrls;
+  const lineWidth = Math.max(1, width - 2);
+  const imageWidth = Math.min(lineWidth, 86);
+  const imageHeight = Math.max(6, Math.min(14, Math.floor(imageWidth * 0.32)));
+
+  return (
+    <ScrollBox ref={scrollRef} scrollY focusable={false} flexGrow={1} paddingX={1}>
+      <Box flexDirection="column" width={lineWidth} gap={1}>
+        {loading && !resolved ? <Spinner label="Loading article..." /> : null}
+        {error ? <Text fg={colors.negative}>{error}</Text> : null}
+        <ArticleRichContent
+          blocks={blocks}
+          fallbackText={text}
+          fallbackImageUrls={fallbackImageUrls}
+          articleTitle={article.title}
+          lineWidth={lineWidth}
+          imageWidth={imageWidth}
+          imageHeight={imageHeight}
+        />
+        {article.url ? (
+          <Box height={1}>
+            <Text fg={colors.textDim} onMouseDown={onOpenArticle}>Open source: O</Text>
+          </Box>
+        ) : null}
+      </Box>
+    </ScrollBox>
+  );
+}

package/src/plugins/builtin/substack/article-stack.tsx

@@ -0,0 +1,129 @@
+import { useCallback, type ReactNode, type RefObject } from "react";
+import { Box, Text, TextAttributes, type ScrollBoxRenderable } from "../../../ui";
+import {
+  DataTableStackView,
+  type DataTableCell,
+  type DataTableKeyEvent,
+} from "../../../components";
+import { colors } from "../../../theme/colors";
+import {
+  formatPublishedAt,
+  formatReadTime,
+} from "./table";
+import type {
+  SubstackArticleSummary,
+  SubstackColumn,
+  SubstackPublication,
+  SubstackSortColumnId,
+  SubstackSortDirection,
+} from "./types";
+import type { ActiveFeedState } from "./pane-state";
+
+export function SubstackArticleStack({
+  focused,
+  detailOpen,
+  selectedArticle,
+  selectedArticleId,
+  detailContent,
+  activePublication,
+  activeFeedState,
+  sortedRows,
+  sort,
+  columns,
+  tableScrollRef,
+  width,
+  height,
+  onBack,
+  onActivate,
+  onSelectionChange,
+  onRootKeyDown,
+  onDetailKeyDown,
+  onBodyScrollActivity,
+  onHeaderClick,
+}: {
+  focused: boolean;
+  detailOpen: boolean;
+  selectedArticle: SubstackArticleSummary | null;
+  selectedArticleId: string | null;
+  detailContent: ReactNode;
+  activePublication: SubstackPublication | null;
+  activeFeedState: ActiveFeedState;
+  sortedRows: SubstackArticleSummary[];
+  sort: { columnId: SubstackSortColumnId; direction: SubstackSortDirection };
+  columns: SubstackColumn[];
+  tableScrollRef: RefObject<ScrollBoxRenderable | null>;
+  width: number;
+  height: number;
+  onBack: () => void;
+  onActivate: (article: SubstackArticleSummary) => void;
+  onSelectionChange: (id: string) => void;
+  onRootKeyDown: (event: DataTableKeyEvent) => boolean;
+  onDetailKeyDown: (event: DataTableKeyEvent) => boolean;
+  onBodyScrollActivity: () => void;
+  onHeaderClick: (columnId: string) => void;
+}) {
+  const renderCell = useCallback((
+    article: SubstackArticleSummary,
+    column: SubstackColumn,
+    _index: number,
+    rowState: { selected: boolean },
+  ): DataTableCell => {
+    const selectedColor = rowState.selected ? colors.selectedText : undefined;
+    switch (column.id) {
+      case "published":
+        return { text: formatPublishedAt(article.publishedAt), color: selectedColor ?? colors.textDim };
+      case "publication":
+        return { text: article.publicationName ?? "-", color: selectedColor ?? colors.textBright };
+      case "title":
+        return {
+          text: article.title,
+          color: selectedColor ?? colors.text,
+          attributes: TextAttributes.BOLD,
+        };
+      case "read":
+        return {
+          text: formatReadTime(article.readMinutes),
+          color: selectedColor ?? colors.textDim,
+        };
+    }
+  }, []);
+
+  const bodyAfter = activePublication && sortedRows.length > 0 && (activeFeedState.loading || activeFeedState.loadingMore) ? (
+    <Box height={1} paddingX={1}>
+      <Text fg={colors.textDim}>{activeFeedState.loadingMore ? "Loading more..." : "Loading archive..."}</Text>
+    </Box>
+  ) : null;
+
+  return (
+    <DataTableStackView<SubstackArticleSummary, SubstackColumn>
+      focused={focused}
+      detailOpen={detailOpen}
+      onBack={onBack}
+      detailTitle={selectedArticle?.title}
+      detailContent={detailContent}
+      selection={{
+        kind: "id",
+        selectedId: selectedArticleId,
+        getId: (article) => article.id,
+        onChange: onSelectionChange,
+      }}
+      onActivate={onActivate}
+      onRootKeyDown={onRootKeyDown}
+      onDetailKeyDown={onDetailKeyDown}
+      onBodyScrollActivity={onBodyScrollActivity}
+      scrollRef={tableScrollRef}
+      bodyAfter={bodyAfter}
+      rootWidth={width}
+      rootHeight={Math.max(1, height - 1)}
+      columns={columns}
+      items={sortedRows}
+      sortColumnId={sort.columnId}
+      sortDirection={sort.direction}
+      onHeaderClick={onHeaderClick}
+      getItemKey={(article) => article.id}
+      renderCell={renderCell}
+      emptyStateTitle={activeFeedState.loading ? "Loading articles..." : activeFeedState.error ?? "No Substack posts"}
+      emptyStateHint={activePublication ? activePublication.name : "Authenticated reader feed"}
+    />
+  );
+}