Email Client Sidebar Block for React

From MESSAGES, the 14 typed messages at the top of the file. Each has a folder (inbox, drafts, sent, archive or trash) and its labels. A mailbox counts the messages in its folder, a label counts the labelled messages that aren't in Trash, and the list's line counts the open mailbox and its unread messages. Nothing is typed twice: file a message or start a draft and every count follows from the same list. A mailbox with nothing in it shows no badge. In your app, take the counts from your server and keep the same rule: one source for the list and the badges.

Everything. Opening a message marks it read, the Folder select moves it, Compose adds an untitled draft and the search filters the open mailbox, all in the block's own state; nothing is sent or received, and reloading starts over. Replace those handlers with your API: move the message on the server, then update the list from the result. The mailboxes are links to # whose handler shows the mailbox instead of navigating. They're SidebarMenuButtons with render set to an a element. Point them at your routes and mark the current one with isActive.

Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Escape or choosing a mailbox closes it and focus goes back to the menu button. The list and the open message share one pane: choosing a message opens it and moves focus to its subject, and Back returns to the list with focus on the same message. Filing a message returns to the list too. The window keeps its height, and the status line at its foot says what changed.

The menu button or the rail along the sidebar's edge folds it to its icons. Each icon keeps its link's full name for screen readers, and a tooltip shows the mailbox and its count on hover or focus. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on. For a full-page mail app, remove both to remember the state and get the shortcut, and give the provider your page's height instead of the window's.

The sidebar is a navigation landmark named after the product, with each group of links named by its label and the open mailbox marked as the current page. Each link's name says its count ("Inbox, 7 messages"). The messages are a list of buttons that say who wrote them, whether they're unread and which one is open. The open message is a scrollable region you can reach with Tab. One polite status line reports each change, and the counts, names and subjects are isolated so they read right in a right-to-left layout.

So the whole app fits on one screen, with its frame drawn around it: 576 px tall on phones and 736 px from the medium breakpoint. Only the parts inside scroll (the sidebar, the list and the message), never the window or the page, and nothing you do changes its height: a search that finds nothing or an empty mailbox shows an empty state in the same space.