Open shifts: mark urgent shifts with the shared amber dot

Merged
BI
1mo ago
+58-19

User description

Summary

Before: Open shifts marked a day with an urgent shift using an amber-bordered pill with a warning triangle, in the calendar and its key. Shift rows showed "Urgent" as plain grey text.

After: urgent shifts carry a small amber dot. It appears in the calendar's day pill (beside the count), in the key, and before "Urgent" on each shift row. In Work mode a triangle now means a date has passed, which an urgent shift has not. The amber dot is the shared shape for "needs attention soon" (Ward Flow review, 12 Oct 2026).

How: a new UrgentDot in src/components/open-shifts/urgent-dot.tsx. It is aria-hidden, because the word "Urgent" or the day's spoken label already says it, and it shows as solid ink in forced colours. The calendar test now checks that an urgent day has the dot and no triangle.

This is the follow-up agreed in #3483.

Verification

  • npx tsc --noEmit -p .: clean.
  • eslint and prettier on the changed files: clean.
  • vitest on tests/open-shifts-*: 12 files, 103 tests passed. The new calendar assertion fails without the change and passes with it.
  • Full browser suite: running on this draft before it is marked ready.

Risk and rollout

  • Risk: low. Visual only, four files.
  • Rollback: revert the PR.
  • Provider or production effects: none. No migration, no service worker change.

🤖 Generated with Claude Code

https://claude.ai/code/session_01CZwGiwt7eXkD4fwyFM83gY

Generated by Claude Code

Summary by cubic

Marks urgent open shifts with the shared amber dot instead of the warning triangle, which now means a date has passed in Work mode. Follows up on #3483. Visual-only change with no effect on shift matching.

  • Adds UrgentDot, shown in the calendar's day pill, in the key, and on each shift row.
  • UrgentDot renders the text it sits beside — the word "Urgent" or the day's count — so it's never colour-only; it's aria-hidden and shows solid ink in forced-colours mode.
  • Updates the calendar and browse-sample tests to assert urgent days and rows carry the dot and no triangle.

CodeAnt-AI Description

Mark urgent open shifts with an amber dot

What Changed

  • Urgent shifts now show an amber dot in calendar counts, the calendar key, and shift rows instead of a warning triangle.
  • The warning triangle is reserved for passed dates in Work mode.

Impact

✅ Urgent shifts are easier to distinguish from passed dates
✅ Urgency is marked consistently across calendar and shift listings

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.