Email Triage Inbox Features Block for React

Edit CONVERSATIONS at the top of the file: each entry has a sender, initials, subject, preview, label, time and whether it is unread. Unread rows are set in a heavier weight. START lists the rows that are ticked on load; make it empty to start with the plain toolbar.

The plain toolbar and the bulk bar sit in one grid cell, so the toolbar always has the height of the taller of the two. The idle one is invisible and inert, which also keeps it out of the tab order and the accessibility tree. Only a visible layer takes focus.

With a conversation ticked, E archives and Z snoozes, whenever focus is inside the list or toolbar. The handler is keys in the component, which reads event.key and ignores Ctrl, Alt and Command combinations, so it never fights a browser shortcut. Add a branch for a new key and a matching button; every action goes through act, which also writes the line a screen reader hears.

Each row's checkbox is named by its sender and subject, the list is named "Inbox", and every action is announced in a polite status line ("2 conversations archived"). After an action the buttons that had focus disappear, so focus moves to the count in the toolbar rather than dropping to the page. Row buttons are real buttons: they show on hover and when anything in the row has focus, so keyboard users can reach them. The + marks are decoration.

Yes. The window is bg-card, selected rows take a tint of bg-muted, and the checkboxes are filled with the foreground colour instead of your primary colour, so the section has no primary surface at all. Each checkbox reports its state with onCheckedChange as a boolean.

The avatar column and the per-row buttons are hidden below sm, and the shortcut hints leave the toolbar. The rows keep their checkbox, sender, label and time, truncating the subject, and the bulk bar stays in the toolbar, so every action is still one tap away. Nothing scrolls sideways at 320 pixels.