No Messages Empty State Block for React

The sent messages stay in the page's state and each row says it was not delivered. Nothing goes to a mail service and a reload empties it; Start over empties Sent without one. To wire it for real, hand the recipient, the subject and the message to your mail API where the code says so, add the row from the response, and show a failure under the To field.

Pressing C while focus is anywhere inside the panel, and not in a text field, opens the compose dialog; the key is never listened for on the rest of the page. On a phone the hint is hidden, since there is no keyboard to press. Escape or Cancel closes the dialog and focus goes back to the Compose button.

That To holds an address like name@example.test, otherwise the field says what is missing and takes focus. The subject and the message are optional: an empty subject is listed as "(no subject)". The demo keeps three sent messages, newest first, and says so when a fourth is sent.

Nothing arrives in a demo, and a message you cancel is discarded, so only Sent can fill. Each empty tab has its own sentence, and every tab keeps the same height whether it shows rows or the empty state.

The tabs follow the tabs pattern with the arrow keys, and each tab's name includes its count. The dialog traps focus, names its fields and returns focus to Compose. A polite status line says what happened once the dialog has closed, such as "Sent to ines@example.test in this demo. Nothing was delivered." The drawing is hidden from assistive technology.

The header's buttons sit under the sentence and the key hint goes. The three tabs fit in one row and scroll inside their own band if a label is longer. The dialog fills the width and scrolls inside itself, and nothing scrolls sideways, even at 320 px wide.