Build NotificationListItemWidget Reusable Card
epic-push-notification-delivery-ui-task-007 — Implement the NotificationListItemWidget as a stateless Flutter widget displaying notification icon, title, body preview, relative timestamp, and a visual read/unread indicator dot. Support swipe-to-dismiss gesture with haptic feedback. Apply accessibility config semantic labels and ensure 48dp minimum touch target. Wire onTap to deep-link navigation callback.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 2 - 518 tasks
Can start after Tier 1 completes
Implementation Notes
Build as a StatelessWidget taking NotificationRecord, VoidCallback onTap, and VoidCallback onDismiss. Use the project's existing design token constants for all visual values — do not introduce new colour literals. Wrap the entire card in a Semantics widget with label built from title + body + ('unread' if !isRead). For the relative timestamp, use a utility function formatRelativeTime(DateTime) that returns localised strings ('Just now', '5m ago', 'Yesterday', date string) — this keeps the widget stateless and testable.
Wrap in Dismissible with a background showing a delete icon. Call HapticFeedback.mediumImpact() in the onDismissed callback before calling the parent onDismiss. Ensure the widget integrates with the NotificationCenterScreen's ListView.builder without requiring a Key (the parent ListView provides keys).
Testing Requirements
Widget tests (flutter_test): render with isRead=true and isRead=false and assert dot presence/absence. Test onTap callback fires on card tap. Test onDismiss callback fires after swipe gesture simulation (tester.drag). Test title/body overflow clamping with very long strings.
Test semantic label includes 'unread' when isRead=false. Golden tests: capture read and unread states at 1.0× and 2.0× text scale for regression. Accessibility audit: verify minimum touch target size programmatically using SemanticsNodeFinder.
The notification badge widget depends on a persistent Supabase Realtime websocket subscription for live unread count updates. On mobile, network transitions (WiFi to cellular, background app state) can silently drop the websocket, resulting in a stale badge count that does not update until the next app foreground — reducing trust in the notification system.
Mitigation & Contingency
Mitigation: Implement connection lifecycle management in the badge widget's BLoC that re-subscribes on app foreground and on network reconnection events. Add a fallback polling query (every 60 seconds when app is foregrounded) to reconcile the badge count if the Realtime subscription is interrupted.
Contingency: If Realtime reliability proves insufficient in production, replace the live subscription with a polling approach using a configurable interval, accepting slightly delayed badge updates in exchange for reliability.
The notification list item widget requires merged semantics combining title, body, timestamp, read state, and role-context icon into a single VoiceOver/TalkBack announcement. Getting the merged semantics structure right for both iOS (VoiceOver) and Android (TalkBack) simultaneously is non-trivial and common to break silently when widgets are refactored.
Mitigation & Contingency
Mitigation: Use the project's existing semantics-wrapper-widget pattern with explicit Semantics widgets and excludeSemantics on decorative children. Write accessibility widget tests using Flutter's SemanticsController to assert the exact announcement string. Test on physical devices with VoiceOver and TalkBack enabled before release.
Contingency: If merged semantics cannot be achieved cleanly on both platforms, implement platform-specific semantic trees using defaultTargetPlatform branching, ensuring each platform receives an optimal announcement even if the implementation differs.