status badge

[Challmejosh]

Commit Type

• feat: A new feature
• fix: A bug fix
• docs: Documentation only changes
• style: Changes that do not affect the meaning of the code (formatting, etc.)
• refactor: A code change that neither fixes a bug nor adds a feature
• perf: A code change that improves performance
• test: Adding missing or correcting existing tests
• build: Changes affecting the build system or external dependencies
• ci: Changes to CI/CD configuration files and scripts
• chore: Other changes that don't modify src or test files
• revert: Reverts a previous commit

Breaking change? (If yes, add BREAKING CHANGE in the commit footer)

• Yes — this contains a breaking change
• No

---

What changed

Added accessible, color-coded stream status badges with non-color icons and actionable tooltips across the Streams Table:

• Created StatusBadge Component (frontend/src/components/StatusBadge.tsx):
  • Distinct color-coded badge themes for all 5 statuses:
    • scheduled: Gray (badge-scheduled)
    • active: Blue (badge-active)
    • completed: Green (badge-completed)
    • canceled: Red (badge-canceled)
    • paused: Yellow (badge-paused)
  • Accessible, non-color visual distinction via semantic inline SVG icons (aria-hidden="true") for each status (Clock, Play, Pause, Check, X).
  • Actionable tooltips (title and aria-label) explaining the current stream state and actionable next steps (e.g. edit start time, pause, resume, cancel).
  • Keyboard accessible with tabIndex={0} and focus outline styling.
• Updated StreamsTable Component (frontend/src/components/StreamsTable.tsx):
  • Integrated StatusBadge into the stream status cell.
• Updated Styles (frontend/src/index.css):
  • Added layout, flex alignment, and custom color palettes for .badge-scheduled, .badge-active, .badge-completed, .badge-canceled, .badge-paused, and .status-badge-icon.
• Added Comprehensive Tests:
  • Added unit tests in frontend/src/components/StatusBadge.test.tsx verifying badge styling, icons, tooltips, and accessibility attributes.
  • Added integration tests in frontend/src/components/StreamsTable.test.tsx verifying status badge rendering across stream rows.

Testing done

• Automated Vitest Tests:
  • Ran npx vitest run src/components/StatusBadge.test.tsx src/components/StreamsTable.test.tsx:
    • StatusBadge.test.tsx: 7 / 7 passed
    • StreamsTable.test.tsx: 15 / 15 passed
    • Total: 22 / 22 tests passing
• Linting:
  • Ran npx eslint src/components/StatusBadge.tsx src/components/StatusBadge.test.tsx src/components/StreamsTable.tsx src/components/StreamsTable.test.tsx: 0 errors.

Related issues

Closes #757

Checklist

• I used the correct commit type (see above) for the squashed commit message.
• I kept the change focused on the related issue.
• I added or updated tests where useful.
• I updated documentation where behavior changed.
• I verified the app still builds or explained why verification was skipped.
• My commits follow Conventional Commits (enforced by commitlint).

[vercel]

@Challmejosh is attempting to deploy a commit to the ritik4ever's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Challmejosh Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 1b40a0a4-7eff-4683-8dbe-e2f7b2556f3b

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}