skill-level: medior
status: done
Task: Enhance Inbox UI
End Goal
A functional inbox view that displays notifications with read/unread indicators, unread count badge, and proper empty states.
Currently
InboxView exists but displays empty list
InboxViewModel has no data loading
- No visual distinction between read/unread
- No unread count badge
Should
- Inbox displays notifications from NotificationService
- Unread notifications are visually distinct (bold, indicator)
- Unread count badge shown on inbox navigation
- Empty state when no notifications exist
- Notifications are tappable and navigate to source
Constraints
- [ ] Follow existing widget patterns (TCard, ShadButton)
- [ ] Use existing theme extensions for colors/typography
- [ ] Maintain accessibility standards
- [ ] Handle loading and error states
Acceptance Criteria
- [ ] Inbox displays real notifications from Firestore
- [ ] Unread notifications have visual indicator
- [ ] Unread count badge appears on inbox navigation
- [ ] Tapping notification marks as read and navigates
- [ ] Empty state shown when no notifications
- [ ] Loading state shown while fetching
Implementation Checklist
- [ ] 7.1 Update InboxViewModel to inject NotificationService
- [ ] 7.2 Implement notification list display in InboxView
- [ ] 7.3 Create notification list item widget with read/unread styling
- [ ] 7.4 Implement notification tap handler (mark read + navigate)
- [ ] 7.5 Add unread indicator to list items
- [ ] 7.6 Add unread count badge to inbox navigation item
- [ ] 7.7 Create empty state widget for no notifications
- [ ] 7.8 Add loading state during initial fetch
- [ ] 7.9 Update MessageType enum with shopping notification types
- [ ] 7.10 Add ARB strings for notification messages
Notes
- Existing MessageDto has
isUnread getter based on readAt == null
- Badge service pattern can be referenced from WhatsNew feature
- Navigation item is in home view bottom navigation
Reacties