// GreenStack UI kit — main feed screen + composition root.
const { NewsCard, CategoryTabs, Button, Icon } = window;
// Day labels computed from real Date so they update with the calendar.
const _fmtDayLabel = (offset, prefix) => {
const d = new Date();
d.setDate(d.getDate() - offset);
const dow = d.toLocaleDateString('en-US', { weekday: 'long' });
const mon = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
return `${prefix} — ${dow}, ${mon}`;
};
const DAY_LABELS = {
today: _fmtDayLabel(0, 'Today'),
yesterday: _fmtDayLabel(1, 'Yesterday'),
older: 'Earlier this week',
};
function FeedToolbar({ view, count }) {
const meta = {
curated: { title: 'Curated', sub: 'AI-selected ESG signal · updated 08:10' },
all: { title: 'All stories', sub: 'Full firehose across every source' },
daily: { title: 'Daily brief', sub: 'Yesterday, packaged into eight sections' },
sources: { title: 'Sources', sub: 'Outlets GreenStack monitors' },
saved: { title: 'Saved', sub: 'Stories you bookmarked' },
}[view] || { title: 'Curated', sub: '' };
return (
);
}
// ── Sources directory view ──────────────────────────────────────────────────
// Auto-generated from window.GS_STORIES — no auth, no static config drift.
// Layout: 2-column grid of source cards, sorted by story count desc.
// Each card shows name, count, top categories covered (max 3), latest story
// title + relative time ago.
function relativeAgo(iso) {
if (!iso) return '';
const ms = Date.now() - new Date(iso).getTime();
const h = Math.floor(ms / 3600000);
if (h < 1) return `${Math.max(1, Math.floor(ms / 60000))}m`;
if (h < 24) return `${h}h`;
return `${Math.floor(h / 24)}d`;
}
function SourceCard({ source, onPick }) {
const cats = source.cats.map((c) => window.getCategory ? window.getCategory(c) : { id: c, label: c, accent: 'electric' });
return (
);
}
function SourcesGrid({ stories, category, onPickSource }) {
const bySource = {};
stories.forEach((s) => {
if (!bySource[s.source]) bySource[s.source] = { name: s.source, count: 0, catSet: {}, latest: null };
const b = bySource[s.source];
b.count++;
b.catSet[s.category] = (b.catSet[s.category] || 0) + 1;
if (!b.latest || (s.publishedAt && (!b.latest.publishedAt || s.publishedAt > b.latest.publishedAt))) b.latest = s;
});
const all = Object.values(bySource).map((b) => ({
...b,
cats: Object.entries(b.catSet).sort((a, b2) => b2[1] - a[1]).map(([k]) => k),
}));
const filtered = category !== 'all' ? all.filter((s) => s.cats.includes(category)) : all;
filtered.sort((a, b) => b.count - a.count);
if (filtered.length === 0) {
return (
No sources yet — wait for the next 7am cron.
);
}
return (
{filtered.map((s) => onPickSource && onPickSource(s.name)} />)}
);
}
function FeedApp() {
const [view, setView] = React.useState('curated');
const [category, setCategory] = React.useState('all');
const [query, setQuery] = React.useState('');
const [selected, setSelected] = React.useState(null);
const compact = view === 'all';
const isDaily = view === 'daily';
const isSources = view === 'sources';
const q = query.trim().toLowerCase();
// DigestRail "Today's Signal" handler — set selected state + smooth-scroll
// the main feed to that card. Wrapper divs around NewsCard carry the id.
const scrollToStory = React.useCallback((id) => {
setSelected(id);
// give React one tick to flush selected-state class onto the card
requestAnimationFrame(() => {
const el = document.getElementById(`gs-card-${id}`);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
});
}, []);
// Source-of-truth filter — search + category narrowing applies to every view.
let stories = window.GS_STORIES.filter((s) => {
if (category !== 'all' && s.category !== category) return false;
if (q && !(s.title.toLowerCase().includes(q) || s.source.toLowerCase().includes(q) || s.summary.toLowerCase().includes(q))) return false;
return true;
});
// Daily brief = yesterday's edition. Excludes today (today still flows on
// Curated). Falls back to "older" if no yesterday items present.
if (isDaily) {
const ydayItems = stories.filter((s) => s.day === 'yesterday');
stories = ydayItems.length ? ydayItems : stories.filter((s) => s.day === 'older' || s.day === 'yesterday');
}
// Curated / All grouping = by day (today / yesterday / older).
// Daily brief grouping = by category (one section per ESG cat in CATEGORIES order),
// within each section sorted by score desc, capped to 5.
const dayBuckets = ['today', 'yesterday', 'older'];
const groupedByDay = dayBuckets
.map((d) => ({ key: d, label: DAY_LABELS[d], items: stories.filter((s) => s.day === d) }))
.filter((g) => g.items.length);
const CATS = window.CATEGORIES || [];
const groupedByCat = CATS
.map((c) => ({
key: c.id,
label: c.label,
icon: c.icon,
accent: c.accent,
items: [...stories.filter((s) => s.category === c.id)]
.sort((a, b) => b.score - a.score)
.slice(0, 5),
}))
.filter((g) => g.items.length);
const grouped = isDaily ? groupedByCat : groupedByDay;
// Lead story = top-scoring in the first day-group, only on Curated view.
// Daily brief intentionally has no lead — every section gets equal weight.
const leadId = (!compact && !isDaily && grouped.length && grouped[0].items.length)
? [...grouped[0].items].sort((a, b) => b.score - a.score)[0].id : null;
return (
{/* Sources directory branch — short-circuits feed rendering */}
{isSources && (
<>
{ setView('all'); setQuery(name); }} />
)}
{/* Daily brief editorial lead — fixed copy until Critic generates one per cron */}
{!isSources && isDaily && grouped.length > 0 && (
Yesterday's signal
{stories.length} ESG stories across {grouped.length} sectors yesterday. Top signal: {stories.length && [...stories].sort((a, b) => b.score - a.score)[0].title}.
)}
{!isSources && (
)}
{!isSources && grouped.length === 0 && (
{q ? `No stories match “${query}”.` : (isDaily ? 'No stories from yesterday yet — check back after the 7am cron.' : 'No stories yet.')}
)}
{!isSources && grouped.map((g) => (
{isDaily && g.accent && (
)}
{isDaily ? (
{g.label}
) : (
{g.label}
)}
{g.items.length} {g.items.length === 1 ? 'story' : 'stories'}
{g.items.map((s) => (
setSelected(s.id)} />
))}
{!isSources && (
s.day === (isDaily ? 'yesterday' : 'today'))}
onPick={scrollToStory} />
)}
);
}
// Wait for news.json to load (via app.data.jsx's GS_DATA_READY promise) before
// first render so the feed doesn't flash empty. If app.data.jsx didn't expose a
// promise (older revisions), render immediately as a graceful fallback.
const _gsRender = () => ReactDOM.createRoot(document.getElementById('root')).render();
if (window.GS_DATA_READY && typeof window.GS_DATA_READY.then === 'function') {
window.GS_DATA_READY.then(_gsRender);
} else {
_gsRender();
}