{ e.currentTarget.style.borderColor = M_BORDER; e.currentTarget.style.transform = 'translateY(-1px)'; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = M_BORDER_SOFT; e.currentTarget.style.transform = 'translateY(0)'; }}
>
);
}
// ─── Briefing feed — sticky category chips + infinite scroll ────
function TBriefingFeed({ landscape = true }) {
const [activeCat, setActiveCat] = React.useState('top');
const [pages, setPages] = React.useState(() => [generateBriefPage('top', 0)]);
const [loading, setLoading] = React.useState(false);
const [reachedEnd, setReachedEnd] = React.useState(false);
const sentinelRef = React.useRef(null);
// Reset when category changes
React.useEffect(() => {
setPages([generateBriefPage(activeCat, 0)]);
setReachedEnd(false);
}, [activeCat]);
// IntersectionObserver loads the next page when the sentinel scrolls into view
React.useEffect(() => {
if (reachedEnd) return;
const el = sentinelRef.current;
if (!el) return;
let alive = true;
const io = new IntersectionObserver((entries) => {
if (!entries[0].isIntersecting || loading) return;
setLoading(true);
// Simulate network — real client would await the RSS query
setTimeout(() => {
if (!alive) return;
setPages(p => {
const next = generateBriefPage(activeCat, p.length);
if (p.length >= 5) setReachedEnd(true); // cap fake feed
return [...p, next];
});
setLoading(false);
}, 480);
}, { rootMargin: '300px 0px' });
io.observe(el);
return () => { alive = false; io.disconnect(); };
}, [activeCat, pages.length, loading, reachedEnd]);
const flat = pages.flat();
const cols = landscape ? 3 : 2;
return (
{story.src}
{story.time}
{story.title}
{/* Sticky category chip strip */}
{/* Cards grid */}
);
}
// Skeleton row shown while the next page loads
function BriefLoadingRow({ cols = 3 }) {
return (
{BRIEF_CATEGORIES.map(cat => {
const active = cat.id === activeCat;
return (
);
})}
{flat.map(story => )}
{/* Sentinel + state row */}
{loading && }
{!loading && reachedEnd && — END OF FEED —}
{!loading && !reachedEnd && scroll for more…}
{Array.from({ length: cols }).map((_, i) => (
))}
);
}
Object.assign(window, {
TBriefingFeed, BriefCard, BriefImage, BriefImageFallback,
BRIEF_CATEGORIES, briefColor, generateBriefPage,
});