🏠 Overview › 🧩 Components ›🧩 NotificationInboxScreen

NotificationInboxScreen

Component Detail

User Interface medium complexity mobile
0
Dependencies
0
Dependents
0
Entities
0
Integrations

Description

Mobile screen displaying the user's notification inbox as a scrollable list of received push messages. Users can view, acknowledge, and act on notifications directly from the bottom navigation tab. All interactive elements meet WCAG 2.2 AA contrast and touch target requirements.

Feature: Push Notifications

notification-inbox-screen

Sources & reasoning

Notifications is a named bottom-nav tab (line 290), establishing it as a first-class MVP surface. HLF follow-up dissatisfaction data (line 116) confirms urgency. Blueprint marks push-notifications [MVP]. First phase ordinal = MVP.

  • Bottom nav with 5 tabs: Home, Contacts, Add (modal launcher for Activity and Event wizards), Work, Notifications
  • Oppfølging av likepersoner: 40 % var ikke fornøyd med oppfølgingen i spørreundersøkelse. Scenariobaserte push-meldinger og kalendersynkronisering.

Responsibilities

  • Render paginated list of notifications with read/unread state indicators
  • Handle notification tap actions to navigate to relevant content
  • Provide accessible mark-as-read and dismiss controls with semantic labels
  • Display empty state when no notifications are present
  • Reflect real-time badge count updates from PushNotificationService

Interfaces

renderInbox(notifications: Notification[]): void
markAsRead(notificationId: string): void
dismissNotification(notificationId: string): void
onNotificationTap(notificationId: string): void