List and detail
Screens that pair a list with a reading pane: notifications, a list with detail and a record drawer.
Installation & usage
npx @youj/cli add app-notification-inboxAlso installs app-page, avatar, badge, button, card, empty, field, icon-archive, icon-at-sign, icon-bell, icon-check-check, icon-credit-card, icon-engine, icon-inbox, icon-mail, icon-mail-open, icon-message, icon-rocket, icon-shield-alert, illustrations, notification-center, presence-list, skeleton, switch, tabs, toggle, tooltip, use-announcer, use-now, youj-core, youj-presets, youj-ui-core.
The CLI copies the block to blocks/app/notification-inbox.tsx with every component it uses, so it’s yours to edit.
Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:
'use client'
import { NotificationInbox, type NotificationInboxProps } from '@/blocks/app/notification-inbox'
export function NotificationInboxView({ notifications, incoming, preferences, systemKinds }: Pick<NotificationInboxProps, 'notifications' | 'incoming' | 'preferences' | 'systemKinds'>) {
return (
<NotificationInbox
notifications={notifications}
incoming={incoming}
preferences={preferences}
systemKinds={systemKinds}
copy={{ brand: 'Northwind' }}
onPreferencesChange={(preferences, quiet) => {
// your code
}}
onOpen={(notification) => {
// your code
}}
/>
)
}Description
An inbox for mentions, replies and alerts, with filters, read states and the channels each kind reaches you on.
An inbox for mentions, replies and alerts, with filters, read states and the channels each kind reaches you on.
Read feature requests beside the list they come from: move with the arrow keys, drag rows into priority order, resize the panes, and open a request in a drawer on a phone.
Read feature requests beside the list they come from: move with the arrow keys, drag rows into priority order, resize the panes, and open a request in a drawer on a phone.
Open a deal from the pipeline in a floating drawer over the list: its owner, stage, odds, dates and value, then its meetings, progress, notes and activity.
Open a deal from the pipeline in a floating drawer over the list: its owner, stage, odds, dates and value, then its meetings, progress, notes and activity.
Code
Notification Inbox, the Notifications story: the files youj add writes.
blocks/app
Reference
Props13 props
Props
| Prop | Type | |
|---|---|---|
theme | ThemeInputWraps the page in this theme. Default: the theme around it. | – |
embedded | booleanA page in your app's frame: the shared page header (AppPage) and the frame's gutter, across the whole width, with no top bar of its own. default true | true |
copy | Partial<NotificationsCopy>Any of the page's strings, to rewrite or translate. | – |
notifications | InboxNotification[]The notifications it opens with. Default: a demo workspace's, timed from when the page opens. | – |
incoming | Arrival[]Notifications that arrive while the page is open, default two demo arrivals | two demo arrivals |
preferences | PreferencesWhere each kind reaches you, to start with. default demo | demo |
systemKinds | readonly Kind[]The kinds the System tab lists. default deploy, billing and security | deploy, billing and security |
lockedChannels | Partial<Record<Kind, readonly Channel[]>>Channels a kind always uses, whatever the switches say; those kinds also ignore Do not disturb. default security's email | security's email |
kindIcons | Record<string, ComponentType<IconProps>>The icon for each kind, on its notification and in the bell. default the five built-in kinds'; any other kind gets a bell | the five built-in kinds'; any other kind gets a bell |
onPreferencesChange | (preferences: Preferences, quiet: boolean) => voidFires with every change to the switches. | – |
onOpen | (notification: InboxNotification) => voidOpening a notification (it's marked read too). | – |
illustration | IllustrationSlotThe picture for an empty inbox: a scene by id, or your own node; | – |
locale | stringFormats its times (BCP 47). Default: | – |
Strings45 keys for copy
Strings
copy takes any of these keys; the rest keep their defaults. A key whose text holds a value (a count, a name) takes a function.
brandaccounttitlesubtitleinboxunreadCountloadingfiltersallmentionssystemunreadOnlymarkAllReadmarkReadmarkUnreadarchiveopenunreadPrefixtodayearlierjustNowannounceReadannounceUnreadannounceArchivedannounceAllReademptyTitleemptyDescriptionnoUnreadTitlenoUnreadDescriptionshowAllnoMentionsTitlenoMentionsDescriptionnoSystemTitlenoSystemDescriptionpreferencespreferencesDescriptionkindchannelskindschannelForrequiredquietquietDescriptionsavedHintlocaleBuilt from15 components
Accessibilitylandmarks, listbox, keyboard
Accessibility
Notifications has one h1, tabs for its filters, a live region for new items and a preferences table with a labelled switch per channel. List and detail moves through requests with Arrow Up and Down, Home, End and Enter, reorders with Alt plus the arrow keys, reports loading and errors in status and alert regions, and closes its phone drawer with Escape. Record drawer opens a sheet that traps focus and closes with Escape. Links and buttons are real a and button elements with the kit’s focus ring.