live-updating activity heatmap — artlu.ai

What is the activity card?
The live stats + heatmap panel on the artlu.ai homepage. Shows day X/100, shipped count, remaining, active days, current/best streak, and a 14-week heatmap where each cell is a day colored by how many projects shipped.

What it does
- stats column: day, shipped, to go, active — same row height, mono weight 400 labels + weight 600 values
- streaks header: current / best, both green
- 14-week heatmap: l1–l4 intensity based on 1–4+ projects per day
- hover any cell → tooltip with the date and a bulleted list of project names that shipped that day
- updates live — new projects land on the heatmap without a page reload
- day counter rolls over at local midnight without touching the page
- today's week is always the rightmost column of the grid

How it works
subscribeToPublicProjects in db.js wraps firestore's onSnapshot instead of getDocs — the public view swapped a one-shot fetch for a live subscription, so a new project write re-paints the grid. a setTimeout inside a useEffect fires 1s after local midnight and bumps a state counter to force a re-render — no polling, no interval. the grid anchors its end on the saturday of today's week and walks back 14 weeks to land on a sunday, which fixed an earlier bug where the window ended on a prior saturday and hid today.

Built with
React, Firebase Firestore (onSnapshot), inline styles with CSS variables for theme tokens, native title tooltips on the real card + a custom div tooltip in the artifact mockup.