Repository navigation
fix(artists): readable active-tab badge + visible suggestions errors - #713
Conversation
- Active tab's count badge now uses bg-white/20 + text-white so the number stays readable on the brand-colored button. - loadSuggestions now stores the error message and renders it with a Try again button; previously every failure (503, 500, network) was silently masked as the generic "No suggestions available" empty state.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughEnhanced error handling for suggestions fetching in PreferredArtists page by introducing error state management, displaying error messages with retry functionality, and updating tab badge styling with conditional active/inactive states. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/frontend/src/pages/PreferredArtists.tsx`:
- Around line 560-576: The async suggestions error block should be announced to
assistive tech; wrap the error UI (the div that renders when !searching &&
!query.trim() && suggestionsError && !suggestionsLoading) in an accessible live
region by adding role="alert" and aria-atomic="true" to that container (or
alternatively add aria-live="assertive" and aria-atomic="true" to the paragraph
showing suggestionsError) so screen readers announce the message when
suggestionsError appears; keep the existing retry button (loadSuggestions)
as-is.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6b80ff84-f6ca-4391-9db5-eba0f6e43878
📒 Files selected for processing (2)
packages/frontend/src/pages/PreferredArtists.test.tsxpackages/frontend/src/pages/PreferredArtists.tsx
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Quality Gates
- GitHub Check: SonarCloud Scan
🔇 Additional comments (5)
packages/frontend/src/pages/PreferredArtists.test.tsx (2)
752-775: Badge contrast regression coverage looks good.This directly covers the active/inactive badge text-color behavior that motivated the visual fix.
777-801: Retry flow coverage looks good.The test verifies the failure state, retry affordance, recovered suggestions rendering, and that the suggestions API is called again.
packages/frontend/src/pages/PreferredArtists.tsx (3)
14-14: Suggestions error state plumbing looks good.The fetch path now clears stale errors before loading, empties stale suggestions on failure, and surfaces
ApiError.messagewhen available with a safe fallback.Also applies to: 181-181, 214-230
447-454: Active badge styling fixes the contrast issue.Using
bg-white/20 text-whitefor the active tab badge avoids the previous brand-on-brand readability problem while preserving the inactive brand styling.
578-581: Empty state no longer masks fetch failures.The additional
!suggestionsErrorguard correctly keeps the generic empty state from replacing the actionable error + retry UI.
|
…713) - Active tab's count badge now uses bg-white/20 + text-white so the number stays readable on the brand-colored button. - loadSuggestions now stores the error message and renders it with a Try again button; previously every failure (503, 500, network) was silently masked as the generic "No suggestions available" empty state.
This branch was successfully deployed
1 participant
Summary
loadSuggestionsnow stores the error and surfaces it with a Try again button; failures (503, 500, network) used to be silently shown as the generic "No suggestions available" empty state, leaving users with no path forward and ops with no signal.Test plan
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Tests