Skip to content

Add round-closing urgency state when under 30 seconds - #485

Merged
josephchimebuka merged 1 commit into
TevaLabs:mainfrom
brodapeethar:feat/414-round-urgency
Aug 26, 2026
Merged

Add round-closing urgency state when under 30 seconds#485
josephchimebuka merged 1 commit into
TevaLabs:mainfrom
brodapeethar:feat/414-round-urgency

Conversation

@brodapeethar

Copy link
Copy Markdown
Contributor

Summary

Closes #414

Adds a non-blocking urgency state to the RoundCard (the predict card in the Dashboard rounds grid) when the round is closing in under 30 seconds, distinct from the existing CLOSING SOON status label.

Changes

  • src/components/RoundCard.tsx
    • Drives urgency from the live ticking countdown (useRoundCountdown), so the state appears/disappears in real time rather than waiting for a server round refresh.
    • Shows a rose urgency pill (UNDER 30S) with a pulsing dot in the card's meta row only when secondsLeft < 30 and the round isn't expired.
    • Announces the transition politely: "Round closing in under 30 seconds" is pushed to the card's existing aria-live="polite" sr-only region, and is cleared when the round resolves/refreshes.
  • src/index.css
    • New .status-dot-urgent (rose, pulsing) + pulse-urgent keyframes, distinct from the yellow CLOSING SOON dot.
    • Added to the prefers-reduced-motion block so the pulse is disabled for reduced-motion users.
  • src/components/__tests__/RoundCard.test.tsx — new tests covering the urgency state:
    • Pill renders when secondsLeft < 30
    • Pill absent at secondsLeft >= 30 and for expired rounds
    • Polite announcement fires when the live countdown crosses the 30-second threshold
  • src/stories/RoundCard.stories.tsx — added an Urgent story for the design-system showcase.

Design notes

  • The pill is inline in the existing meta row (no overlay, no layout shift, doesn't block the Submit Prediction button) — purely non-blocking attention styling.
  • Color (rose) and treatment (pulsing dot) are intentionally distinct from the yellow CLOSING SOON status dot/label.
  • The Dashboard "predict region" (PredictionCard) has no round-time data, so the urgency state lives on RoundCard, which is the predict card rendered in the Dashboard rounds grid.

Acceptance criteria

  • Appears only when secondsLeft < 30
  • Accessible announcement (polite)

Testing

  • pnpm test:unit — 784 tests passing (62 files, +4 new urgency tests)
  • pnpm build — passes (TypeScript + Vite production build)
  • pnpm lint — only pre-existing react-hooks/set-state-in-effect errors in unrelated files; no new issues

No env vars, migrations, or manual QA steps required.

RoundCard now shows a non-blocking rose urgency pill with a pulsing dot
when the live countdown drops below 30 seconds, visually distinct from
the CLOSING SOON status label. The transition is announced politely via
the card's sr-only aria-live region, and the pill respects
prefers-reduced-motion.

Closes TevaLabs#414

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>
@vercel

vercel Bot commented Aug 26, 2026

Copy link
Copy Markdown

@brodapeethar is attempting to deploy a commit to the josephchimebuka's projects Team on Vercel.

A member of the Team first needs to authorize it.

@josephchimebuka
josephchimebuka merged commit f38565f into TevaLabs:main Aug 26, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add round-closing urgency state when under 30 seconds

2 participants