Usage
NotificationsInbox from @prepared911/ui/blocks/notifications-inbox is the design-system inbox pattern. The shell passes notification rows, the unread tally, load status, and every handler. The block composes NotificationItem rows inside a non-modal Drawer, filters them, and reports actions back. It does not fetch, store, or route.
Compose three parts under one root:
NotificationsInboxTrigger in the app bar and NotificationsInboxPanel elsewhere in the shell tree. Both must stay under the same NotificationsInbox root.
| Input | Required | Notes |
|---|---|---|
entries | yes | Up to 200 rows after the block sorts newest-first. Fold detections upstream. An entry's optional group ({ id, label }) adds a heading before each run of consecutive entries that share the id. |
unreadCount | yes | Counter on the trigger, including entries not loaded yet. Not derived from entries. Its color is the urgency ladder row of the most severe unread loaded entry: S1 neutral, S2 informative, S3 success, S4 warning, S5 destructive. |
status | yes | Ready, Loading, or Error. |
open / onOpenChange | yes | Controlled panel state. |
onRetry | yes | Load failure retry. |
onGoTo | yes | Navigation, called when the person activates a row; the block closes the panel afterward. |
onMarkRead, onAction | yes | Forwarded to each row. Mark as read appears on unread rows only. The feed stores only per-person read state, so there is no Mark as unread or Dismiss. |
hasMore, loadingMore, onLoadMore | no | Paging. When hasMore is true and the person scrolls to the end, the block calls onLoadMore once; set loadingMore while the page loads. It stops at 200 entries and never fetches. |
filter / onFilterChange | no | Controlled filter; omit for uncontrolled All with reset on open. |
now | no | ISO 8601 reference instant for the "today" check on every row. Omit to use the clock. |
| Copy props | yes | Every visible string, including NotificationItem row copy. |
group to have the panel render a small subtle heading before each run of consecutive entries that share group.id, for example Today and Earlier. The host or router decides the groups; the block does not derive them from time. Entries without a group get no heading. While the Unread filter is on, only groups that still have a row keep their heading. The panel draws no dividers between rows or groups.