// screens-feed.jsx — Reverb's silent-triage surface. Vertical-snap card stream // with Reverb's editorial voice: bold display + the "for you" italic-serif // personal note at the bottom of every card. // // Three screen states: // 1. ScreenFeedNews — default browse (news-bite card) // 2. ScreenFeedAddSheet — tapping a topic chip shows the add-to-interests sheet // 3. ScreenFeedMultiSelect — multi-select mode → build a custom brief // ───────────────────────────────────────────────────────────── // Shared chrome — status bar + right action rail + tab bar // ───────────────────────────────────────────────────────────── function FeedChrome({ dark = false, accent = 'var(--accent)', listenDur, save = false, dim = false }) { return ( <> {/* Right action rail */}
); } function RailBtn({ icon: Icon, label, dark, primary, active, accent = 'var(--accent)' }) { const baseBg = primary ? accent : dark ? 'rgba(255,255,255,0.10)' : 'rgba(24,30,50,0.06)'; const baseStroke = primary ? '#fff' : active ? accent : dark ? '#fff' : 'var(--text)'; return (
{label && ( {label} )}
); } // ───────────────────────────────────────────────────────────── // FeedSourceRow — top-of-card source + interest + time // ───────────────────────────────────────────────────────────── function FeedSourceRow({ src, host, time, interest, interestBg = 'var(--accent)', dark }) { return (
{host} {time}
{interest && ( {interest} )}
); } // ───────────────────────────────────────────────────────────── // ForYouNote — Reverb's italic-serif "what this means to you" callout // Never drop this. It's the editorial voice. // ───────────────────────────────────────────────────────────── function ForYouNote({ children, dark, kicker = 'WHY THIS MATTERS TO YOU', accent }) { return (
{kicker}
{children}
); } // ───────────────────────────────────────────────────────────── // CardNewsBite — the default Feed card. // Shared between all three feed screen states. // ───────────────────────────────────────────────────────────── function CardNewsBite() { return (
↗ HEADLINE

SK Hynix just ate 40% of next year's HBM3E supply — at 2× last quarter's price.

NVIDIA locked a multi-year deal; Micron's allocation just got noticeably tighter. The cost is moving onto someone's bill.

You hold the AMD-via-MI300 thesis. This pricing pressure shows up in their next gross-margin guide — watch the May call.
3 of today's 14 Updated 7:24 3 sources
); } // ───────────────────────────────────────────────────────────── // FeedPeek — bottom-of-card peek showing the next card sliver // ───────────────────────────────────────────────────────────── function FeedPeek({ title, host, dark }) { return (
NEXT {title}
); } // ───────────────────────────────────────────────────────────── // State 1 — Feed (default) // ───────────────────────────────────────────────────────────── function ScreenFeedNews() { return (
); } // ───────────────────────────────────────────────────────────── // State 2 — Feed + Add-to-interest sheet // User tapped the interest tag → sheet to add this topic to interests // ───────────────────────────────────────────────────────────── function ScreenFeedAddSheet() { return (
{/* Dimming scrim */}
{/* Sheet */}
{/* Grabber */}
{/* Header */}
↗ KEEP TRACK OF
HBM & AI accelerator supply
{/* Reverb's read */}
REVERB'S READ
You've thumbed-up 5 cards on this topic in 2 weeks. Want it as a tracked interest?
{/* What you'll get */}
YOU'LL GET
{/* Add to existing? */}
OR ADD TO AN EXISTING ONE
{/* CTAs */}
); } function BenefitRow({ icon, label, sub }) { return (
{label}
{sub}
); } function ExistingInterestChip({ name, tint, suggested }) { return ( {name} {suggested && · BEST MATCH} ); } // ───────────────────────────────────────────────────────────── // State 3 — Feed multi-select → custom brief // User entered selection mode. Cards collapse to a compact list, // each with a checkbox. Floating CTA at bottom builds a custom brief. // ───────────────────────────────────────────────────────────── function ScreenFeedMultiSelect() { return (
{/* Top bar */}
Pick what to brief
3 picked · from today's 14
{/* Group: HBM */} {/* Group: AI coding agents */} {/* Group: India */}
{/* Sticky bottom CTA */}
{/* Stack of 3 favicon thumbnails */}
{['bloomberg','semianalysis','stratechery'].map((s, i) => ( ))}
Build a brief from these 3
Quick brief · ~4 min · NPR style
or paste URLs to add · tap style to change
); } function GroupHeader({ label, tint, count, picked }) { return (
{label} · {picked}/{count}
Pick all
); } function PickRow({ picked, tint, src, host, time, title, dur, quote }) { return (
{/* Checkbox */}
{picked && }
{host} {time}
{dur}
{quote && (
{quote}
)}
); } Object.assign(window, { ScreenFeedNews, ScreenFeedAddSheet, ScreenFeedMultiSelect, FeedSourceRow, ForYouNote, FeedPeek, });