Notification Inbox

A notification list grouped by day, with unread state. Unread is reported, never assumed — a panel that marks everything read on render clears what the user never saw.

src/components/ui/notification-inbox.tsx

About

From the component's own source, where it was written.

A notification list, grouped by day, with unread state.

Unread is reported, never assumed. Marking things read on render is the classic mistake: a panel that opens behind a click clears everything the user never actually saw. Reading happens when someone acts, which is the caller's call to make.

Grouping by day rather than showing a flat list with timestamps — "when" is the axis people scan a notification list along, exactly as with a commit history.

Install

npx astralyx-ui add notification-inbox

Usage

import { NotificationInbox } from '@/components/ui/notification-inbox'

<NotificationInbox notifications={items} onRead={markRead} onReadAll={markAllRead} />

Composer

Change the props and the source below follows.

Notifications2

Wednesday 2 September

Tuesday 1 September

Props

mark all actionempty state

tsx

<NotificationInbox
  notifications={items}
  onRead={markRead}
  onReadAll={markAllRead}
/>

Examples

Inbox

tsx

<NotificationInbox notifications={items} onRead={markRead} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`NotificationInbox`

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
title	string	'Notifications'	—
notifications	Notification[]	required	`{ id, title, description?, time, read?, actor?, icon?, onSelect? }`.
onRead	(id: string) => void	—	Reading happens when someone acts, which is the caller’s call to make.
onReadAll	() => void	—	Reading happens when someone acts, which is the caller’s call to make.
locale	string	'en-GB'	—
now	Date	—	—
emptyLabel	ReactNode	'Nothing new'	—
markAllLabel	ReactNode	'Mark all'	—
filter	all / unread	—	Local to the component; it never mutates the list.

Types

`Notification`

A notification list, grouped by day, with unread state.

Field	Type	Description
id	string	—
title	ReactNode	—
description?	ReactNode	—
time	Date	—
read?	boolean	—
actor?	string	—
icon?	ReactNode	—
onSelect?	() => void	—

Behaviour

Topic	Detail	Description
grouping	by day	"When" is the axis people scan a notification list along — the same reason CommitList groups.