Skip to content

feat(ui): add EmptyState component and apply consistently across lists#231

Merged
RUKAYAT-CODER merged 1 commit into
rinafcode:mainfrom
marvelousufelix:feat/empty-state-component
Apr 27, 2026
Merged

feat(ui): add EmptyState component and apply consistently across lists#231
RUKAYAT-CODER merged 1 commit into
rinafcode:mainfrom
marvelousufelix:feat/empty-state-component

Conversation

@marvelousufelix
Copy link
Copy Markdown
Contributor

closes #228

  • Create reusable EmptyState component (src/components/ui/EmptyState.tsx) with icon, title, description, action, and className props
  • Export EmptyState from the components barrel (src/components/index.ts)
  • Replace inconsistent inline empty state patterns in:
    • SearchResults: plain text → EmptyState with SearchX icon
    • VirtualizedSearchResults: CSS-class div → EmptyState with SearchX icon
    • NotificationCenter (providers): emoji div → EmptyState with BellOff icon
    • NotificationCenter (app): custom markup → EmptyState with action support
    • ConversationList: gradient icon div → EmptyState with dynamic messaging
    • DashboardGrid: heading/paragraph/button → EmptyState with action prop
    • SortableList: dashed border div → EmptyState with className override
    • SharedResourceLibrary: two inline divs → two EmptyState instances

Closes #

Summary

Related Issue

Closes #

Type of change

  • Feature
  • Bug fix
  • Chore / Refactor
  • Docs

Screenshots / Recording (if UI)

Testing

  • npm run type-check
  • npm run lint
  • npm run test
  • npm run build

Quality gate checklist

  • CI checks pass (Frontend CI)
  • At least 1–2 approvals (per branch protection rules)
  • Branch is up-to-date with the base branch
  • All conversations resolved
  • PR description includes Closes #<issue-number>

- Create reusable EmptyState component (src/components/ui/EmptyState.tsx)
  with icon, title, description, action, and className props
- Export EmptyState from the components barrel (src/components/index.ts)
- Replace inconsistent inline empty state patterns in:
  - SearchResults: plain text → EmptyState with SearchX icon
  - VirtualizedSearchResults: CSS-class div → EmptyState with SearchX icon
  - NotificationCenter (providers): emoji div → EmptyState with BellOff icon
  - NotificationCenter (app): custom markup → EmptyState with action support
  - ConversationList: gradient icon div → EmptyState with dynamic messaging
  - DashboardGrid: heading/paragraph/button → EmptyState with action prop
  - SortableList: dashed border div → EmptyState with className override
  - SharedResourceLibrary: two inline divs → two EmptyState instances

Closes #<issue-number>
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Apr 27, 2026

@marvelousufelix 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

@RUKAYAT-CODER RUKAYAT-CODER merged commit de2a80f into rinafcode:main Apr 27, 2026
1 of 4 checks passed
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.

Inconsistent Empty States

2 participants