Email Reader

About this block

Email Reader is the full reading surface for a single message, opened on Priya Nair's Q2 roadmap review sent to Avery Stone at 9:41 AM. The sender row pairs the avatar with full name, address, and to-line. The body runs six paragraphs including a flagged note about the retention chart and headcount scenarios. An attachment chip shows Acme_Q2_Roadmap_v4.pdf at 2.1 MB with a download button, and a collapsed quoted-reply drawer keeps the prior message accessible without cluttering the view. Reply and Forward buttons anchor the bottom bar alongside the replying-as identity.

The email is a single typed const object so the sender, to, body, attachment, and quoted reply all travel together. The quoted collapse uses aria-expanded false on a static button, which is the right static state since only the expanded thread view needs to render both sides open.

When to use

Reach for this block as the reading pane in a split mail layout, wired to the selected message from the email list. Swap the Reply and Forward actions for your route handlers and point the download button at your attachment endpoint.

A natural flow around it on an Application Pro page:

Before

• Email list

After

• Compose blueprint
• Thread collapsed

What you can display

One strong use is the primary message reading pane. Other reader configurations:

• No attachment. Remove the chip row; the body and quoted section stand on their own.
• Multiple recipients. Expand the to-line into a to/cc/bcc summary using the same muted-foreground xs type.
• HTML-rich body. Replace the paragraph array with sanitized markup rendered inside a prose container.

Tip: the replying-as identity in the action bar stops multi-account confusion before the user hits send.