The card shows a raw date range (e.g. Jun 3 2026 → Jun 10 2026); a relative countdown is far more readable.
What to do
- Add a helper in
src/lib/format.ts, e.g. formatTimeRemaining(endSec: number, nowSec?: number): string returning "Ended" when past end_time, otherwise the largest sensible unit — "2 days left", "5 hours left", "30 minutes left" (singular/plural handled, mirroring formatDuration).
- Use it in
src/components/StreamCard.tsx in place of the raw date line; keep the absolute dates on hover via a title attribute. Reuse the ended boolean the card already derives.
- Accuracy to the minute is fine; no need to tick every second.
Acceptance criteria
The card shows a raw date range (e.g.
Jun 3 2026 → Jun 10 2026); a relative countdown is far more readable.What to do
src/lib/format.ts, e.g.formatTimeRemaining(endSec: number, nowSec?: number): stringreturning"Ended"when pastend_time, otherwise the largest sensible unit —"2 days left","5 hours left","30 minutes left"(singular/plural handled, mirroringformatDuration).src/components/StreamCard.tsxin place of the raw date line; keep the absolute dates on hover via atitleattribute. Reuse theendedboolean the card already derives.Acceptance criteria
end_timeshow"Ended".formatTimeRemaininghas unit tests (pairs with Set up Vitest for frontend unit testing #11).pnpm exec tsc --noEmitpasses.