NotifRow
Single row in the mobile Inbox / notification list. Tone-colored unread dot
on the left, title + body block in the middle, relative time on the right.
Pair with isFirst / isLast so the row group rounds its outer corners
like an iOS grouped list.
NotifRow is mobile-only — desktop notifications live inside the CommandPalette flyout. There is no desktop sibling.
Default#
Three rows in a single group: an error monitor, an ownership warning, and a successful deploy.
Loading…
Tones#
The unread dot color is driven by tone:
| Tone | Use for |
|---|---|
err | Firing monitors, failed deploys |
warn | Ownership gaps, drift, missing data |
ok | Successful deploys, syncs, completions |
neutral (default) | Mentions, replies, generic activity |
When unread is false the dot fades to border-strong so the read state is
glanceable.
Linkable rows#
Pass href to render the row as an <a> instead of a <div> — the entire
row becomes the tap target. Keyboard focus + a 3px focus ring are wired in.
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| title * | ReactNode | — | Bold first-line summary. |
| body | ReactNode | — | One-line body underneath. Truncates to a single line for now. |
| time | ReactNode | — | Right-aligned relative time string (e.g. `9:32`, `Mon`). |
| dateTime | string | Date | undefined | — | Machine-readable ISO 8601 string or `Date` for the notification's timestamp. When set, the visible `time` is wrapped in `<time dateTime="…">` so the row is crawlable / AI-readable. |
| tone | enum | neutral | Coloring of the unread dot. |
| unread | boolean | undefined | — | When true, render the unread dot. |
| isFirst | boolean | undefined | — | Round the top corners — set when this is the first row in a group. |
| isLast | boolean | undefined | — | Round the bottom corners — set when this is the last row in a group. |
| href | string | undefined | — | Navigate when the row is tapped. Renders the row as an `<a>` and wins over `onClick` for the render shape — but any `onClick` you pass is still forwarded onto the anchor, which is the right place for analytics callbacks (the link still navigates). |