shadcn.io is not affiliated with official shadcn/ui
Email Triage Inbox Features Block for Svelte
A working triage list for an email app: seven conversations with checkboxes, where ticking rows swaps the toolbar for a bulk bar in the same space, with E and Z shortcuts and per-row buttons on hover.
Installation
Overview
An email triage feature section for Svelte with Ark UI, written for Triagebox, a fictional email triage app. The section is the feature itself: a list of seven conversations in a hairline frame with + marks on its corners, each row with a checkbox, a sender, a subject with a preview, a label and a time. Tick one or more rows and the toolbar swaps to a bulk bar (how many are selected, Archive, Snooze and Clear) in exactly the same space, so the list below never moves; archived and snoozed rows keep their place and show their new state in the label. The E and Z keys do the same from the keyboard, and a row's own Archive and Snooze buttons appear on hover and on focus. Two rows are ticked when the page loads so the bulk bar is the first thing you see. It has no folders and no reading pane: it shows one idea, acting on many messages at once. It's built from Checkbox, Button, Badge, Kbd and Guides, with CSS transitions only and your theme's tokens; there is no call to action and nothing in your primary colour. For email, helpdesk and any inbox product whose pitch is speed.
FAQ
How do I change the conversations?
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.
Why doesn't the list move when the bulk bar appears?
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.
Which keys work, and how do I add more?
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.
How do screen readers and keyboards handle it?
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.
Does it follow my theme?
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.
How does it fit on a phone?
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.