Workflow

InboxList

Notifications next to the item they open: unread dots, who did what, a short detail and when. Arrow keys move and open, like a mail list.

import { InboxList } from '@alea/ui';

Examples

Inbox with the open item

The list on the left opens items as you move through it; the open one shows on the right.

Ana Rivas

ENG-142 Focus ring missing on audio players

Can you check it in the Glass theme?

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-accent-solid…
--alea-accent-strong…
--alea-accent-subtle…
--alea-surface-hover…
--alea-text…
--alea-text-muted…

Space

--alea-space-3…

Radius

--alea-radius-md…
--alea-radius-sm…

Type

--alea-font-size-sm…
--alea-font-size-xs…
--alea-font-weight-semibold…

Props

`InboxList` props

Notifications as a list next to the item they open: unread dots, who did what, a short detail and when. Arrow keys move and open, like a mail list.

Prop	Type	Default	Description
`items`required	`InboxItem[]`	-
`aria-label`	`string`	-	Name of the list. Default "Inbox".
`className`	`string`	-	Extra class names for the root element.
`defaultSelectedId`	`string \| null`	-	The item open at first, when uncontrolled.
`onSelectionChange`	`((id: string) => void)`	-	Called with the id of the item people open: click, or the arrow keys (the selection follows focus, like a mail list).
`selectedId`	`string \| null`	-	The open item, when controlled.

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

States: HoverSelected
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-inbox.alea-inbox-item.alea-inbox-dot.alea-inbox-avatar.alea-activity-agent.alea-inbox-text.alea-inbox-title.alea-inbox-summary.alea-inbox-meta
Data attributes: data-unread

The list is a grid list with single selection that follows focus, so moving with the arrows opens each item, like a mail list.
Each row is named with everything it shows: unread, the title, who did what, the detail and when.
Unread is a dot and a bolder title, and the row says the word, never the dot alone.

Keyboard

Key	Does
`Tab`	Moves into the list, to the open item
`Up` or `Down arrow`	Previous or next item, and opens it
`Home` or `End`	First or last item

Do and don't

Show the open item beside the list on wide screens, and on its own screen on phones.
Mark an item read when it is opened, not when it scrolls past.

Don't

Don't put buttons inside rows: actions belong to the open item.
Don't hide who did it when the notification comes from an agent.

In Figma

InboxItem with Unread and Kind.