Split Panel Inbox Zero CTA Block for React

Edit MESSAGES at the top of the file: each has initials, a sender, a subject, a snippet and a relative time such as "2m". Rows are a fixed height and their text shortens with an ellipsis instead of wrapping, which is what lets the panel reserve room for exactly five. If you add a sixth, raise the list's min-h-80 by one row (4rem) and the "five" in the paragraph and the status text.

The list and the Inbox zero state share one grid cell that is as tall as five rows. Rows fold away inside it and the empty state fades in over the space they leave, so the card keeps its height from the first message to the last. Under reduced motion the rows disappear at once and the empty state is there at once.

Each archive button is named for its message, "Archive “Design review notes”", and the list is named "Messages". After you archive a row, focus moves to the next message's button, or to "Restore the messages" when it was the last, so you can keep going from the keyboard. A polite status line says what was archived and how many are left. Archived rows are inert and hidden from screen readers as well as from view.

Replace archive with a call to your API and update archived when it succeeds, keeping the status line as the confirmation. This demo only stores which messages are folded away, so "Restore the messages" brings them back; you will likely remove that button, and restore, from a real page.

Yes: archived is a plain list of message numbers, so an undo is one more entry in the status line that removes the last one from it. Move focus back to that message's button when you do, the way restore does for the first.

Below the lg breakpoint the copy sits above the inbox, which takes the full width, still flush to the end rail. Names, subjects and snippets truncate with an ellipsis and the archive button stays at the end of each row, so it reads at 320 pixels without scrolling sideways.