🎨 Palette: Add delightful empty state to Issues page #756
Conversation
Replaces the generic 'No issues found' message with context-aware empty states. - Displays a positive 'All Clear' state with a CheckCircle2 icon when there are no open issues. - Displays a neutral 'No matches found' state with a Search icon when filters are active. - Adds entrance animations for a smoother user experience.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
timothyfroehlich
left a comment
timothyfroehlich
left a comment
There was a problem hiding this comment.
@jules Great empty state logic! Please fix the Prettier formatting failure in CI to unblock the merge.
There was a problem hiding this comment.
Pull request overview
This PR enhances the Issues page empty state by replacing a generic error-like state with two contextually appropriate states: a celebratory "All Clear!" state when no open issues exist (using a green checkmark), and a neutral "No matches found" state when filters return no results (using a search icon). This improves UX by making "zero issues" feel like a success rather than an error.
Changes:
- Replaced single
AlertTriangleicon withCheckCircle2(success) andSearch(neutral) icons - Added conditional logic to distinguish between "no open issues" and "filtered results empty" scenarios
- Applied subtle fade/zoom animation to the empty state for a more polished feel
| <div className="flex flex-col items-center justify-center py-12 text-center animate-in fade-in zoom-in duration-300"> | ||
| {status !== "closed" && !severity && !priority && !machine ? ( | ||
| <> | ||
| <div className="rounded-full bg-primary/10 p-4 mb-4"> | ||
| <CheckCircle2 className="size-8 text-primary" /> | ||
| </div> | ||
| <h3 className="text-lg font-medium">All Clear!</h3> | ||
| <p className="text-muted-foreground max-w-sm mt-2"> | ||
| There are no open issues. The machines are running perfectly. | ||
| </p> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <div className="rounded-full bg-muted p-4 mb-4"> | ||
| <Search className="size-8 text-muted-foreground" /> | ||
| </div> | ||
| <h3 className="text-lg font-medium">No matches found</h3> | ||
| <p className="text-muted-foreground max-w-sm mt-2"> | ||
| We couldn't find any issues matching your current filters. | ||
| Try adjusting or clearing them. | ||
| </p> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
The CHANGELOG.md file should be updated to document this user-facing improvement. This is a notable UX enhancement that replaces the generic empty state with two distinct, contextually appropriate states. Consider adding an entry under "Changed" or "Improved" in the Unreleased section.
timothyfroehlich
left a comment
timothyfroehlich
left a comment
There was a problem hiding this comment.
@jules UX improvement: Delightful empty states on Issues page. CI passed, approved.
timothyfroehlich
left a comment
timothyfroehlich
left a comment
There was a problem hiding this comment.
@jules UX: Delightful empty states. Retrying merge.
🎨 Palette: Add delightful empty state to Issues page
💡 What: Replaced the generic "No issues found" empty state with two distinct states:
🎯 Why: The previous empty state used an AlertTriangle which felt like an error state even when "zero issues" is actually a success state. This change reinforces that having no open issues is a good thing!
📸 Before/After:
(Verified with screenshots locally)
♿ Accessibility:
PR created automatically by Jules for task 135418996384152811 started by @timothyfroehlich