Inbox

Usage

Three-pane inbox

Notification center

A single feed grouped by day, where each notice carries an in-place quick action; suits short, frequent notices that need quick handling.

Overview

The mail and notification center of a Tuff account: hundreds of messages to skim, move through by keyboard, and answer in place, without new mail interrupting the read.

• With focus inside, ↑ / ↓ or J / K move, E archives, S stars, and Enter focuses the reply box; single-letter keys do nothing inside a text field.
• Three new messages arrive once it scrolls into view; if you have scrolled down, they land above the viewport and the list stays put; reduced motion shows them from the start.
• In the reply box Enter adds a line and ⌘ / Ctrl + Enter sends; Archive and Move to apply at once and can be undone.
• Expanded (≥ 960px) a fixed 216px sidebar takes over; below 640px only the list shows, the reader slides in from the right, and Esc returns.
• Notification center: quick actions run in place and can be undone; approve, decline, and it was me / not me only ever come from your own click.
• Notification center: J / K move, E toggles read, X selects and enters select mode, and Esc leaves it; the ⋯ menu snoozes a notice or mutes its source.
• Notification center: during do-not-disturb new notices slip in and are counted, and security notices still alert while break-through is on; expanded, the settings stay open on the right.

Customization

• For bigger mailboxes, keep a fixed row height (item-height) and move search and paging to the server; fill aria-setsize and aria-posinset from the real totals.
• When bodies come from outside, keep TxMarkdownView's default sanitizing and intercept link clicks in the host.
• Rebind the shortcuts as needed, but keep them on the component root and let single-letter keys through in editable elements.
• The host owns attachment upload: TxChatComposer only hands over File objects, and the host creates and revokes the object URLs.
• Notification center: for real push, let one set of quiet-hours and source settings decide whether a notice alerts; take quick-action results from the server, and on failure keep the original buttons.

Related components