hn-bits 0.2.1 → 0.4.0

package/dist/ui/App.js

@@ -2,37 +2,94 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useApp, useInput } from 'ink';
 import { loadConfig } from '../lib/config.js';
+import { setConfigValue } from '../lib/configStore.js';
+import { nextTab, previousTab } from '../lib/listNavigation.js';
 import { AskAI } from './AskAI.js';
 import { Comments } from './Comments.js';
 import { HelpOverlay } from './HelpOverlay.js';
-import { COMMENTS_KEYS, LIST_KEYS, SEARCH_RESULTS_KEYS, footerHint } from './keymap.js';
+import { COMMENTS_KEYS, LIST_KEYS, SAVED_KEYS, SEARCH_RESULTS_KEYS, SUB_MATCHES_KEYS, SUBS_KEYS, THEME_PICKER_KEYS, footerHint, } from './keymap.js';
 import { Body, Footer, Header, Screen } from './Layout.js';
+import { SavedList } from './SavedList.js';
 import { SearchInput } from './SearchInput.js';
 import { SearchResults } from './SearchResults.js';
 import { StoryList } from './StoryList.js';
+import { SubscriptionForm } from './SubscriptionForm.js';
+import { SubscriptionMatches } from './SubscriptionMatches.js';
+import { SubscriptionsView } from './SubscriptionsView.js';
 import { TabBar } from './TabBar.js';
-export function App({ initialQuery }) {
+import { ThemePicker } from './ThemePicker.js';
+import { resolvePaletteName, resolveTheme, ThemeContext } from './theme.js';
+export function App({ initialQuery, initialView }) {
     const [feed, setFeed] = useState('top');
-    const [view, setView] = useState(initialQuery ? { name: 'search', query: initialQuery, from: 'cli' } : { name: 'list' });
+    const [view, setView] = useState(initialQuery
+        ? { name: 'search', query: initialQuery, from: 'cli' }
+        : initialView === 'saved'
+            ? { name: 'saved' }
+            : initialView === 'subs'
+                ? { name: 'subs' }
+                : { name: 'list' });
     const [helpOpen, setHelpOpen] = useState(false);
     const [config] = useState(loadConfig);
+    const [paletteName, setPaletteName] = useState(() => resolvePaletteName());
+    const [themePickerOpen, setThemePickerOpen] = useState(false);
+    const activeTheme = resolveTheme(paletteName);
     const { exit } = useApp();
     useInput((input) => {
+        if (themePickerOpen)
+            return;
         if (helpOpen)
             return setHelpOpen(false);
-        if (view.name === 'search-input' || view.name === 'ask')
+        if (view.name === 'search-input' || view.name === 'ask' || view.name === 'sub-form')
             return;
         if (input === 'q')
             return exit();
         if (input === '?')
             return setHelpOpen(true);
+        if (input === 'T')
+            return setThemePickerOpen(true);
     });
-    const ctx = { feed, config, setFeed, setView, exit };
-    return (_jsxs(Screen, { children: [_jsx(Header, { children: _jsx(TabBar, { active: feed }) }), _jsx(Body, { children: helpOpen ? _jsx(HelpOverlay, { ...helpFor(view) }) : renderBody(view, ctx) }), _jsx(Footer, { children: renderFooter(view, ctx) })] }));
+    function handleThemeSelected(name) {
+        setConfigValue('ui.theme', name);
+        setPaletteName(name);
+        setThemePickerOpen(false);
+    }
+    function changeFeed(target) {
+        setFeed(target);
+        setView({ name: 'list' });
+    }
+    function changeTab(direction) {
+        const next = direction === 1 ? nextTab(activeTab) : previousTab(activeTab);
+        if (next === 'saved')
+            return setView({ name: 'saved' });
+        if (next === 'subs')
+            return setView({ name: 'subs' });
+        changeFeed(next);
+    }
+    const activeTab = tabForView(view) ?? feed;
+    const ctx = { feed, config, setFeed: changeFeed, setTab: changeTab, setView, exit };
+    return (_jsx(ThemeContext.Provider, { value: activeTheme, children: _jsxs(Screen, { children: [_jsx(Header, { children: _jsx(TabBar, { active: activeTab }) }), _jsx(Body, { children: themePickerOpen ? (_jsx(ThemePicker, { current: paletteName, onSelect: handleThemeSelected, onCancel: () => setThemePickerOpen(false) })) : helpOpen ? (_jsx(HelpOverlay, { ...helpFor(view) })) : (renderBody(view, ctx)) }), _jsx(Footer, { children: themePickerOpen ? footerHint(THEME_PICKER_KEYS) : renderFooter(view, ctx) })] }) }));
+}
+/** Traces returnTo chains back to the tab a nested view (comments/ask/sub-form) was opened from. */
+function tabForView(view) {
+    if (view.name === 'saved' || view.name === 'subs')
+        return view.name;
+    if (view.name === 'sub-matches')
+        return 'subs';
+    if (view.name === 'comments' || view.name === 'ask' || view.name === 'sub-form')
+        return tabForView(view.returnTo);
+    return null;
 }
 function renderBody(view, ctx) {
     if (view.name === 'list')
         return renderList(ctx);
+    if (view.name === 'saved')
+        return renderSaved(ctx);
+    if (view.name === 'subs')
+        return renderSubs(ctx);
+    if (view.name === 'sub-matches')
+        return renderSubMatches(view, ctx);
+    if (view.name === 'sub-form')
+        return renderSubForm(view, ctx);
     if (view.name === 'search')
         return renderSearch(view, ctx);
     if (view.name === 'search-input')
@@ -45,10 +102,16 @@ function renderFooter(view, ctx) {
     if (view.name === 'search-input') {
         return (_jsx(SearchInput, { onSubmit: (query) => ctx.setView({ name: 'search', query, from: view.from }), onCancel: () => ctx.setView({ name: 'list' }) }));
     }
-    if (view.name === 'ask')
+    if (view.name === 'ask' || view.name === 'sub-form')
         return null;
     if (view.name === 'list')
         return footerHint(LIST_KEYS);
+    if (view.name === 'saved')
+        return footerHint(SAVED_KEYS);
+    if (view.name === 'subs')
+        return footerHint(SUBS_KEYS);
+    if (view.name === 'sub-matches')
+        return footerHint(SUB_MATCHES_KEYS);
     if (view.name === 'comments')
         return footerHint(COMMENTS_KEYS);
     return footerHint(SEARCH_RESULTS_KEYS);
@@ -58,14 +121,33 @@ function helpFor(view) {
         return { title: 'comments', keys: COMMENTS_KEYS };
     if (view.name === 'search')
         return { title: 'search results', keys: SEARCH_RESULTS_KEYS };
+    if (view.name === 'saved')
+        return { title: 'saved', keys: SAVED_KEYS };
+    if (view.name === 'subs')
+        return { title: 'subs', keys: SUBS_KEYS };
+    if (view.name === 'sub-matches')
+        return { title: 'sub matches', keys: SUB_MATCHES_KEYS };
     return { title: 'story list', keys: LIST_KEYS };
 }
-function renderList({ feed, config, setFeed, setView }) {
-    return (_jsx(StoryList, { feed: feed, config: config, onFeedChange: setFeed, onSelectStory: (story) => setView({ name: 'comments', story, returnTo: { name: 'list' } }), onSearchRequested: () => setView({ name: 'search-input', from: 'tui' }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo: { name: 'list' } }) }));
+function renderList({ feed, config, setFeed, setTab, setView }) {
+    return (_jsx(StoryList, { feed: feed, config: config, onFeedChange: setFeed, onTabChange: setTab, onSelectStory: (story) => setView({ name: 'comments', story, returnTo: { name: 'list' } }), onSearchRequested: () => setView({ name: 'search-input', from: 'tui' }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo: { name: 'list' } }) }));
+}
+function renderSaved({ config, setFeed, setTab, setView }) {
+    return (_jsx(SavedList, { config: config, onFeedChange: setFeed, onTabChange: setTab, onSelectStory: (story) => setView({ name: 'comments', story, returnTo: { name: 'saved' } }), onSearchRequested: () => setView({ name: 'search-input', from: 'tui' }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo: { name: 'saved' } }) }));
+}
+function renderSubs({ setFeed, setTab, setView }) {
+    return (_jsx(SubscriptionsView, { onSelectMatches: (subscription) => setView({ name: 'sub-matches', subscription }), onAdd: () => setView({ name: 'sub-form', mode: 'add', returnTo: { name: 'subs' } }), onEdit: (subscription) => setView({ name: 'sub-form', mode: 'edit', subscription, returnTo: { name: 'subs' } }), onFeedChange: setFeed, onTabChange: setTab }));
+}
+function renderSubMatches(view, { config, setView }) {
+    const returnTo = { name: 'sub-matches', subscription: view.subscription };
+    return (_jsx(SubscriptionMatches, { subscription: view.subscription, config: config, onSelectStory: (story) => setView({ name: 'comments', story, returnTo }), onBack: () => setView({ name: 'subs' }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo }) }));
+}
+function renderSubForm(view, { setView }) {
+    return (_jsx(SubscriptionForm, { mode: view.mode, subscription: view.subscription, prefillQuery: view.prefillQuery, onSave: () => setView(view.returnTo), onCancel: () => setView(view.returnTo) }));
 }
 function renderSearch(view, { config, setView, exit }) {
     const returnTo = { name: 'search', query: view.query, from: view.from };
-    return (_jsx(SearchResults, { query: view.query, config: config, onSelectStory: (story) => setView({ name: 'comments', story, returnTo }), onExit: () => (view.from === 'tui' ? setView({ name: 'list' }) : exit()), onSearchAgain: () => setView({ name: 'search-input', from: view.from }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo }) }));
+    return (_jsx(SearchResults, { query: view.query, config: config, onSelectStory: (story) => setView({ name: 'comments', story, returnTo }), onExit: () => (view.from === 'tui' ? setView({ name: 'list' }) : exit()), onSearchAgain: () => setView({ name: 'search-input', from: view.from }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo }), onSubscribe: () => setView({ name: 'sub-form', mode: 'add', prefillQuery: view.query, returnTo }) }));
 }
 function renderComments(view, { config, setView }) {
     return (_jsx(Comments, { story: view.story, config: config, onBack: () => setView(view.returnTo), onAskAI: (comments) => setView({ name: 'ask', story: view.story, comments, returnTo: view }) }));

package/dist/ui/AskAI.js

@@ -10,7 +10,7 @@ import { truncateTitle } from '../lib/format.js';
 import { htmlToText } from '../lib/html.js';
 import { wrapPlainText } from '../lib/viewport.js';
 import { HEADER_ROWS } from './Layout.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 async function resolveArticle(story) {
     if (story.url) {
         try {
@@ -25,6 +25,7 @@ async function resolveArticle(story) {
     return { article: null, reason: 'text post' };
 }
 export function AskAI({ story, comments, config, onBack }) {
+    const theme = useTheme();
     const { columns, rows } = useWindowSize();
     const [status, setStatus] = useState(config ? 'preparing' : 'hint');
     const [unavailableDetail, setUnavailableDetail] = useState('');

package/dist/ui/Comments.js

@@ -5,6 +5,7 @@ import open from 'open';
 import { buildCommentsSummaryPrompt } from '../ai/summaryPrompts.js';
 import { fetchComments } from '../api/algolia.js';
 import { hnItemUrl } from '../api/firebase.js';
+import { toggleBookmark } from '../db/bookmarks.js';
 import { collapseAll, flattenTree, headerOnlyAll, rehideRevealed, revealHeaderOnly, toggleFold, } from '../lib/commentTree.js';
 import { tokenizeContacts } from '../lib/contactHighlight.js';
 import { formatAge } from '../lib/format.js';
@@ -15,7 +16,8 @@ import { COMMENTS_KEYS, footerRows } from './keymap.js';
 import { HEADER_ROWS } from './Layout.js';
 import { LoadingIndicator } from './LoadingIndicator.js';
 import { SummaryPanel } from './SummaryPanel.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
+import { useFlash } from './useFlash.js';
 const HEADER_BORDER_LINES = 2;
 // borderStyle (2 cols) + paddingX (2 cols) eaten from the card's interior width.
 const HEADER_FRAME_WIDTH = 4;
@@ -30,6 +32,7 @@ export function commentsHeaderLines(story, columns) {
     return HEADER_BORDER_LINES + titleLines + 1 + urlLines;
 }
 export function Comments({ story, config, onBack, onAskAI }) {
+    const theme = useTheme();
     const { columns, rows } = useWindowSize();
     const headerLines = commentsHeaderLines(story, columns);
     const viewportLines = Math.max(1, rows - HEADER_ROWS - footerRows(COMMENTS_KEYS, columns) - headerLines);
@@ -43,6 +46,7 @@ export function Comments({ story, config, onBack, onAskAI }) {
     });
     const [selected, setSelected] = useState(0);
     const [summaryOpen, setSummaryOpen] = useState(false);
+    const [flashMessage, flash] = useFlash();
     const pendingTopJump = useRef(false);
     const topLineRef = useRef(0);
     const { folded, headerOnly, revealed } = fold;
@@ -64,7 +68,7 @@ export function Comments({ story, config, onBack, onAskAI }) {
         }
     }
     const flat = useMemo(() => flattenTree(comments, folded, headerOnly), [comments, folded, headerOnly]);
-    const rowsData = useMemo(() => flat.map((entry) => buildRow(entry, columns)), [flat, columns]);
+    const rowsData = useMemo(() => flat.map((entry) => buildRow(entry, columns, theme)), [flat, columns, theme]);
     const clampedSelected = clampSelection(selected, 0, flat.length);
     function openStory() {
         void open(story.url ?? hnItemUrl(story.id));
@@ -119,6 +123,8 @@ export function Comments({ story, config, onBack, onAskAI }) {
             return setSummaryOpen(true);
         if (input === 'a')
             return onAskAI(comments);
+        if (input === 'B')
+            return flash(toggleBookmark(story) ? 'bookmarked ✓' : 'bookmark removed');
     }
     useInput(handleInput, { isActive: !summaryOpen });
     if (status === 'loading')
@@ -126,12 +132,13 @@ export function Comments({ story, config, onBack, onAskAI }) {
     if (status === 'error')
         return _jsxs(Text, { color: theme.colors.error, children: [error, " (r to retry)"] });
     const panelHeight = summaryOpen ? Math.max(6, Math.floor(viewportLines / 2)) : 0;
-    const listViewportLines = Math.max(1, viewportLines - panelHeight);
+    const flashLineHeight = flashMessage ? 1 : 0;
+    const listViewportLines = Math.max(1, viewportLines - panelHeight - flashLineHeight);
     const heights = rowsData.map((row) => row.lines.length);
     const topLine = ensureVisibleLines(heights, clampedSelected, topLineRef.current, listViewportLines);
     topLineRef.current = topLine;
     const { first, last, clipTop, clipBottom } = sliceByLines(heights, topLine, listViewportLines);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(CommentsHeader, { story: story }), flat.length === 0 && _jsx(Text, { dimColor: true, children: "no comments yet" }), rowsData.slice(first, last + 1).map((row, i) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(CommentsHeader, { story: story }), flashMessage && _jsx(Text, { dimColor: true, children: flashMessage }), flat.length === 0 && _jsx(Text, { dimColor: true, children: "no comments yet" }), rowsData.slice(first, last + 1).map((row, i) => {
                 const rowIndex = first + i;
                 const start = rowIndex === first ? clipTop : 0;
                 const end = rowIndex === last ? row.lines.length - clipBottom : row.lines.length;
@@ -139,6 +146,7 @@ export function Comments({ story, config, onBack, onAskAI }) {
             }), summaryOpen && (_jsx(SummaryPanel, { config: config, buildPrompt: () => Promise.resolve(buildCommentsSummaryPrompt(story, comments)), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
 }
 function CommentsHeader({ story }) {
+    const theme = useTheme();
     return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.accent, paddingX: 1, children: [_jsx(Text, { bold: true, color: theme.colors.title, children: story.title }), _jsxs(Text, { dimColor: true, children: [theme.glyphs.upvote, " ", story.score, " points by ", story.by, " ", formatAge(story.time), " | ", story.descendants, ' ', "comments"] }), story.url && _jsx(Text, { color: theme.colors.accent, children: story.url })] }));
 }
 function replyBadge(entry) {
@@ -148,7 +156,7 @@ function replyBadge(entry) {
         return `[${entry.descendantCount} more]`;
     return entry.descendantCount === 1 ? '1 reply' : `${entry.descendantCount} replies`;
 }
-function buildHeaderSpans(entry) {
+function buildHeaderSpans(entry, theme) {
     const glyph = entry.headerOnly ? theme.glyphs.foldClosed : theme.glyphs.foldOpen;
     const badge = replyBadge(entry);
     const spans = [
@@ -160,24 +168,24 @@ function buildHeaderSpans(entry) {
         spans.push({ text: ` | ${badge}`, color: theme.colors.muted });
     return spans;
 }
-function tokenToSpan(token) {
+function tokenToSpan(token, theme) {
     if (token.kind === 'link')
         return { text: token.text, color: theme.colors.link, underline: true };
     if (token.kind === 'email')
         return { text: token.text, color: theme.colors.email, bold: true };
     return { text: token.text };
 }
-function buildRow(entry, columns) {
+function buildRow(entry, columns, theme) {
     // Reserve 2 columns for the selection bar so wrapping doesn't shift when selection moves,
     // plus 1 trailing column: a line that exactly fills the terminal width triggers a VT100
     // delayed-wrap that drops the selection bar/stripe from the following line.
     const width = Math.max(1, columns - 1 - entry.depth * 2 - ROW_BORDER_WIDTH);
-    const header = { kind: 'header', spans: buildHeaderSpans(entry) };
+    const header = { kind: 'header', spans: buildHeaderSpans(entry, theme) };
     const body = entry.headerOnly
         ? []
         : wrapPlainText(htmlToText(entry.node.text), width).map((line) => ({
             kind: 'body',
-            spans: tokenizeContacts(line).map(tokenToSpan),
+            spans: tokenizeContacts(line).map((token) => tokenToSpan(token, theme)),
         }));
     return { id: entry.node.id, depth: entry.depth, width, lines: [header, ...body] };
 }
@@ -185,6 +193,7 @@ function spanLength(spans) {
     return spans.reduce((sum, span) => sum + span.text.length, 0);
 }
 function CommentRowView({ depth, width, lines, isSelected }) {
+    const theme = useTheme();
     const background = isSelected ? theme.colors.selectionBackground : undefined;
     const prefix = isSelected ? `${SELECTION_BAR} ` : '  ';
     const rowWidth = width + ROW_BORDER_WIDTH;

package/dist/ui/HelpOverlay.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { GLOBAL_KEYS } from './keymap.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 export function HelpOverlay({ title, keys }) {
+    const theme = useTheme();
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.colors.title, children: title }), keys.map((binding) => (_jsx(KeyRow, { binding: binding }, binding.key))), _jsx(Text, { children: " " }), _jsx(Text, { color: theme.colors.title, children: "global" }), GLOBAL_KEYS.map((binding) => (_jsx(KeyRow, { binding: binding }, binding.key))), _jsx(Text, { dimColor: true, children: "any key closes" })] }));
 }
 function KeyRow({ binding }) {

package/dist/ui/Layout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text, useWindowSize } from 'ink';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 const MIN_ROWS = 8;
 export const HEADER_ROWS = 3;
 export function Screen({ children }) {
@@ -17,5 +17,6 @@ export function Body({ children }) {
     return (_jsx(Box, { flexGrow: 1, overflowY: "hidden", flexDirection: "column", children: children }));
 }
 export function Footer({ children }) {
+    const theme = useTheme();
     return (_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: theme.colors.muted, children: children }) }));
 }

package/dist/ui/LoadingIndicator.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Text } from 'ink';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 const FRAME_INTERVAL_MS = 80;
 export function LoadingIndicator({ label }) {
+    const theme = useTheme();
     const [frame, setFrame] = useState(0);
     useEffect(() => {
         const id = setInterval(() => setFrame((f) => (f + 1) % FRAMES.length), FRAME_INTERVAL_MS);

package/dist/ui/SavedList.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import open from 'open';
+import { buildListSummaryPrompt } from '../ai/summaryPrompts.js';
+import { hnItemUrl } from '../api/firebase.js';
+import { listBookmarks, toggleBookmark } from '../db/bookmarks.js';
+import { clampSelection, mapFeedKey } from '../lib/listNavigation.js';
+import { ensureVisibleLines } from '../lib/viewport.js';
+import { footerRows, SAVED_KEYS } from './keymap.js';
+import { HEADER_ROWS } from './Layout.js';
+import { STORY_ROW_HEIGHT } from './StoryRow.js';
+import { StoryListView } from './StoryListView.js';
+import { SummaryPanel } from './SummaryPanel.js';
+import { useFlash } from './useFlash.js';
+export function SavedList({ config, onSelectStory, onFeedChange, onTabChange, onSearchRequested, onAskAI, }) {
+    const { columns, rows } = useWindowSize();
+    const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(SAVED_KEYS, columns));
+    const [stories, setStories] = useState(() => listBookmarks());
+    const [selected, setSelected] = useState(0);
+    const [summaryOpen, setSummaryOpen] = useState(false);
+    const [flashMessage, flash] = useFlash();
+    const pendingTopJump = useRef(false);
+    const topLineRef = useRef(0);
+    function reload() {
+        const next = listBookmarks();
+        setStories(next);
+        setSelected((s) => clampSelection(s, 0, next.length));
+    }
+    function openSelectedStory() {
+        const story = stories[selected];
+        if (story)
+            void open(story.url ?? hnItemUrl(story.id));
+    }
+    function removeSelectedBookmark() {
+        const story = stories[selected];
+        if (!story)
+            return;
+        toggleBookmark(story);
+        flash('bookmark removed');
+        reload();
+    }
+    function handleInput(input, key) {
+        const isG = input === 'g';
+        if (isG && pendingTopJump.current) {
+            pendingTopJump.current = false;
+            return setSelected(0);
+        }
+        pendingTopJump.current = isG;
+        const targetFeed = mapFeedKey(input);
+        if (targetFeed)
+            return onFeedChange(targetFeed);
+        if (key.leftArrow)
+            return onTabChange(-1);
+        if (key.rightArrow)
+            return onTabChange(1);
+        if (input === '/')
+            return onSearchRequested();
+        if (input === 'j' || key.downArrow)
+            return setSelected((s) => clampSelection(s, 1, stories.length));
+        if (input === 'k' || key.upArrow)
+            return setSelected((s) => clampSelection(s, -1, stories.length));
+        if (input === 'G')
+            return setSelected(Math.max(0, stories.length - 1));
+        if (input === 'o')
+            return openSelectedStory();
+        if (input === 'r')
+            return reload();
+        if (input === 'B' && stories[selected])
+            return removeSelectedBookmark();
+        if (input === 's' && stories[selected])
+            return setSummaryOpen(true);
+        if (input === 'a' && stories[selected])
+            return onAskAI(stories[selected]);
+        if (key.return && stories[selected])
+            return onSelectStory(stories[selected]);
+    }
+    useInput(handleInput, { isActive: !summaryOpen });
+    const panelHeight = summaryOpen ? Math.max(6, Math.floor(bodyHeight / 2)) : 0;
+    const statusLineHeight = flashMessage ? 1 : 0;
+    const listHeight = Math.max(1, bodyHeight - statusLineHeight - panelHeight);
+    const selectedStory = stories[selected];
+    if (stories.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "no bookmarks yet \u2014 press B on a story" }), flashMessage && _jsx(Text, { dimColor: true, children: flashMessage })] }));
+    }
+    const heights = stories.map(() => STORY_ROW_HEIGHT);
+    const topLine = ensureVisibleLines(heights, selected, topLineRef.current, listHeight);
+    topLineRef.current = topLine;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(StoryListView, { stories: stories, selected: selected, topLine: topLine, height: listHeight, width: columns }), flashMessage && _jsx(Text, { dimColor: true, children: flashMessage }), summaryOpen && selectedStory && (_jsx(SummaryPanel, { config: config, buildPrompt: (signal) => buildListSummaryPrompt(selectedStory, signal), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
+}

package/dist/ui/SearchResults.js

@@ -5,6 +5,7 @@ import open from 'open';
 import { buildListSummaryPrompt } from '../ai/summaryPrompts.js';
 import { searchStories } from '../api/algolia.js';
 import { hnItemUrl } from '../api/firebase.js';
+import { toggleBookmark } from '../db/bookmarks.js';
 import { clampSelection } from '../lib/listNavigation.js';
 import { ensureVisibleLines, shouldFetchMore } from '../lib/viewport.js';
 import { footerRows, SEARCH_RESULTS_KEYS } from './keymap.js';
@@ -13,10 +14,12 @@ import { LoadingIndicator } from './LoadingIndicator.js';
 import { STORY_ROW_HEIGHT } from './StoryRow.js';
 import { StoryListView } from './StoryListView.js';
 import { SummaryPanel } from './SummaryPanel.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
+import { useFlash } from './useFlash.js';
 const FETCH_THRESHOLD = 10;
 const HEADER_LINES = 1;
-export function SearchResults({ query, config, onSelectStory, onExit, onSearchAgain, onAskAI, }) {
+export function SearchResults({ query, config, onSelectStory, onExit, onSearchAgain, onAskAI, onSubscribe, }) {
+    const theme = useTheme();
     const { columns, rows } = useWindowSize();
     const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(SEARCH_RESULTS_KEYS, columns) - HEADER_LINES);
     const [stories, setStories] = useState([]);
@@ -27,6 +30,7 @@ export function SearchResults({ query, config, onSelectStory, onExit, onSearchAg
     const [loadingMore, setLoadingMore] = useState(false);
     const [error, setError] = useState('');
     const [summaryOpen, setSummaryOpen] = useState(false);
+    const [flashMessage, flash] = useFlash();
     const token = useRef(0);
     const nextPage = useRef(0);
     const topLineRef = useRef(0);
@@ -110,6 +114,10 @@ export function SearchResults({ query, config, onSelectStory, onExit, onSearchAg
             return setSummaryOpen(true);
         if (input === 'a' && stories[selected])
             return onAskAI(stories[selected]);
+        if (input === 'B' && stories[selected])
+            return flash(toggleBookmark(stories[selected]) ? 'bookmarked ✓' : 'bookmark removed');
+        if (input === 'S')
+            return onSubscribe();
         if (key.return && stories[selected])
             return onSelectStory(stories[selected]);
     }
@@ -119,10 +127,11 @@ export function SearchResults({ query, config, onSelectStory, onExit, onSearchAg
     if (status === 'error')
         return _jsxs(Text, { color: theme.colors.error, children: [error, " (r to retry)"] });
     const panelHeight = summaryOpen ? Math.max(6, Math.floor(bodyHeight / 2)) : 0;
-    const listHeight = Math.max(1, (loadingMore ? bodyHeight - 1 : bodyHeight) - panelHeight);
+    const statusLineHeight = loadingMore || flashMessage ? 1 : 0;
+    const listHeight = Math.max(1, bodyHeight - statusLineHeight - panelHeight);
     const heights = stories.map(() => STORY_ROW_HEIGHT);
     const topLine = ensureVisibleLines(heights, selected, topLineRef.current, listHeight);
     topLineRef.current = topLine;
     const selectedStory = stories[selected];
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["search: ", query, totalHits !== null ? `    ${totalHits} results` : ''] }), _jsx(StoryListView, { stories: stories, selected: selected, topLine: topLine, height: listHeight, width: columns }), loadingMore && _jsx(Text, { dimColor: true, children: "loading more\u2026" }), summaryOpen && selectedStory && (_jsx(SummaryPanel, { config: config, buildPrompt: (signal) => buildListSummaryPrompt(selectedStory, signal), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["search: ", query, totalHits !== null ? `    ${totalHits} results` : ''] }), _jsx(StoryListView, { stories: stories, selected: selected, topLine: topLine, height: listHeight, width: columns }), flashMessage ? _jsx(Text, { dimColor: true, children: flashMessage }) : loadingMore && _jsx(Text, { dimColor: true, children: "loading more\u2026" }), summaryOpen && selectedStory && (_jsx(SummaryPanel, { config: config, buildPrompt: (signal) => buildListSummaryPrompt(selectedStory, signal), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
 }

package/dist/ui/StoryList.js

@@ -4,7 +4,8 @@ import { Box, Text, useInput, useWindowSize } from 'ink';
 import open from 'open';
 import { buildListSummaryPrompt } from '../ai/summaryPrompts.js';
 import { fetchStories, fetchStoryIds, hnItemUrl } from '../api/firebase.js';
-import { clampSelection, mapFeedKey, nextFeed, previousFeed } from '../lib/listNavigation.js';
+import { toggleBookmark } from '../db/bookmarks.js';
+import { clampSelection, mapFeedKey } from '../lib/listNavigation.js';
 import { ensureVisibleLines, shouldFetchMore } from '../lib/viewport.js';
 import { footerRows, LIST_KEYS } from './keymap.js';
 import { HEADER_ROWS } from './Layout.js';
@@ -12,10 +13,12 @@ import { LoadingIndicator } from './LoadingIndicator.js';
 import { STORY_ROW_HEIGHT } from './StoryRow.js';
 import { StoryListView } from './StoryListView.js';
 import { SummaryPanel } from './SummaryPanel.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
+import { useFlash } from './useFlash.js';
 const BATCH_SIZE = 30;
 const FETCH_THRESHOLD = 10;
-export function StoryList({ feed, config, onFeedChange, onSelectStory, onSearchRequested, onAskAI, }) {
+export function StoryList({ feed, config, onFeedChange, onTabChange, onSelectStory, onSearchRequested, onAskAI, }) {
+    const theme = useTheme();
     const { columns, rows } = useWindowSize();
     const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(LIST_KEYS, columns));
     const [storyIds, setStoryIds] = useState([]);
@@ -25,6 +28,7 @@ export function StoryList({ feed, config, onFeedChange, onSelectStory, onSearchR
     const [loadingMore, setLoadingMore] = useState(false);
     const [error, setError] = useState('');
     const [summaryOpen, setSummaryOpen] = useState(false);
+    const [flashMessage, flash] = useFlash();
     const token = useRef(0);
     const pendingTopJump = useRef(false);
     const topLineRef = useRef(0);
@@ -97,9 +101,9 @@ export function StoryList({ feed, config, onFeedChange, onSelectStory, onSearchR
         if (targetFeed)
             return onFeedChange(targetFeed);
         if (key.leftArrow)
-            return onFeedChange(previousFeed(feed));
+            return onTabChange(-1);
         if (key.rightArrow)
-            return onFeedChange(nextFeed(feed));
+            return onTabChange(1);
         if (input === '/')
             return onSearchRequested();
         if (input === 'j' || key.downArrow)
@@ -116,6 +120,8 @@ export function StoryList({ feed, config, onFeedChange, onSelectStory, onSearchR
             return setSummaryOpen(true);
         if (input === 'a' && stories[selected])
             return onAskAI(stories[selected]);
+        if (input === 'B' && stories[selected])
+            return flash(toggleBookmark(stories[selected]) ? 'bookmarked ✓' : 'bookmark removed');
         if (key.return && stories[selected])
             return onSelectStory(stories[selected]);
     }
@@ -125,10 +131,11 @@ export function StoryList({ feed, config, onFeedChange, onSelectStory, onSearchR
     if (status === 'error')
         return _jsxs(Text, { color: theme.colors.error, children: [error, " (r to retry)"] });
     const panelHeight = summaryOpen ? Math.max(6, Math.floor(bodyHeight / 2)) : 0;
-    const listHeight = Math.max(1, (loadingMore ? bodyHeight - 1 : bodyHeight) - panelHeight);
+    const statusLineHeight = loadingMore || flashMessage ? 1 : 0;
+    const listHeight = Math.max(1, bodyHeight - statusLineHeight - panelHeight);
     const heights = stories.map(() => STORY_ROW_HEIGHT);
     const topLine = ensureVisibleLines(heights, selected, topLineRef.current, listHeight);
     topLineRef.current = topLine;
     const selectedStory = stories[selected];
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(StoryListView, { stories: stories, selected: selected, topLine: topLine, height: listHeight, width: columns }), loadingMore && _jsx(Text, { dimColor: true, children: "loading more\u2026" }), summaryOpen && selectedStory && (_jsx(SummaryPanel, { config: config, buildPrompt: (signal) => buildListSummaryPrompt(selectedStory, signal), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(StoryListView, { stories: stories, selected: selected, topLine: topLine, height: listHeight, width: columns }), flashMessage ? _jsx(Text, { dimColor: true, children: flashMessage }) : loadingMore && _jsx(Text, { dimColor: true, children: "loading more\u2026" }), summaryOpen && selectedStory && (_jsx(SummaryPanel, { config: config, buildPrompt: (signal) => buildListSummaryPrompt(selectedStory, signal), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
 }

package/dist/ui/StoryRow.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { isBookmarked } from '../db/bookmarks.js';
 import { formatAge, truncateTitle } from '../lib/format.js';
 import { getHostname } from '../lib/url.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 export const STORY_ROW_HEIGHT = 3;
 function fillPad(isSelected, safeWidth, usedLength) {
     return isSelected ? ' '.repeat(Math.max(0, safeWidth - usedLength)) : '';
@@ -11,6 +12,7 @@ function metaText(story) {
     return `${story.score} points by ${story.by} ${formatAge(story.time)} ago | ${story.descendants} comments`;
 }
 export function StoryRow({ story, rank, rankWidth, isSelected, width, showMeta = true, showSeparator = true, }) {
+    const theme = useTheme();
     // Never let a line's content reach the literal terminal edge: a line that exactly
     // fills the width triggers a VT100 delayed-wrap that corrupts Ink's cursor position
     // for the row below it.
@@ -22,6 +24,8 @@ export function StoryRow({ story, rank, rankWidth, isSelected, width, showMeta =
     const titleWidth = Math.max(1, safeWidth - prefix.length - hostnameSuffix.length);
     const title = truncateTitle(story.title, titleWidth);
     const background = isSelected ? theme.colors.selectionBackground : undefined;
-    const meta = metaText(story);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { backgroundColor: background, children: [prefix, _jsx(Text, { bold: true, color: theme.colors.title, children: title }), hostname && _jsx(Text, { color: theme.colors.muted, children: hostnameSuffix }), fillPad(isSelected, safeWidth, prefix.length + title.length + hostnameSuffix.length)] }), showMeta && (_jsxs(Text, { backgroundColor: background, children: [' '.repeat(prefix.length), _jsxs(Text, { color: theme.colors.score, children: [story.score, " points"] }), _jsxs(Text, { color: theme.colors.muted, children: [' ', "by ", story.by, " ", formatAge(story.time), " ago | ", story.descendants, " comments"] }), fillPad(isSelected, safeWidth, prefix.length + meta.length)] })), showSeparator && _jsx(Text, { children: " " })] }));
+    const bookmarked = isBookmarked(story.id);
+    const starPrefix = bookmarked ? `${theme.glyphs.bookmark} ` : '';
+    const meta = `${starPrefix}${metaText(story)}`;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { backgroundColor: background, children: [prefix, _jsx(Text, { bold: true, color: theme.colors.title, children: title }), hostname && _jsx(Text, { color: theme.colors.muted, children: hostnameSuffix }), fillPad(isSelected, safeWidth, prefix.length + title.length + hostnameSuffix.length)] }), showMeta && (_jsxs(Text, { backgroundColor: background, children: [' '.repeat(prefix.length), bookmarked && _jsx(Text, { color: theme.colors.accent, children: starPrefix }), _jsxs(Text, { color: theme.colors.score, children: [story.score, " points"] }), _jsxs(Text, { color: theme.colors.muted, children: [' ', "by ", story.by, " ", formatAge(story.time), " ago | ", story.descendants, " comments"] }), fillPad(isSelected, safeWidth, prefix.length + meta.length)] })), showSeparator && _jsx(Text, { children: " " })] }));
 }