Two Actions Dialog Block for React

So you can see it without a click, and so a poster or a gallery card never ages. On load the dialog is a copy drawn in place over the mail list: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. In it Undo stands still at "Undo (10)" with its fill full, and a muted line says the clock runs when the dialog is opened from Send. Send in the header opens the real Dialog, modal, with its focus trap and Escape, and there the clock runs. Both wrappers share SentFields and the block's state. In your app keep the Dialog and drop the copy.

The catalog Timer, kept out of sight, counts down from ten seconds and sets the number in the label; the fill is a plain CSS transition of the same length, so it never needs a frame loop and is hidden under reduced motion, where the digits still run. The block speaks twice: once when the clock starts ("Undo is available for 10 seconds") and once at zero. It never reads out every second. Closing the dialog stops the clock and opening it starts a new one.

It would if it were the only way. That is why it isn't: the moment the message is sent, the header's Send turns into Return to drafts, which does the same thing with no clock, and the expired Undo says so in a line under the message. The window is a convenience for the quick case, not a limit on a person's ability to change their mind. In your app keep an equivalent always on the page, such as an Unsend or a Move to drafts action on the message, for as long as your server can honour it.

Nothing is sent. Closing the dialog, with View message, Close or Escape, leaves the drawn message as Sent; View message also tints the row as opened. Undo, while it lasts, takes the message back to Draft and says so. In your app hold the message server-side for the length of the window or send a recall, and make undo call it; if the server can no longer honour it, say so inside the dialog instead of pretending.

The real dialog opens with focus on View message, the one primary, not on Undo, so a stray Enter doesn't take the message back. Escape and Close keep it sent. After any result the header's button has changed (Send to Return to drafts and back), so about 300 ms later focus moves to the button that took its place. View message is the focus target through initialFocus.

The copy shown on load docks to the foot of the page as a bottom sheet with its pair pinned: View message above, Undo under it, both the full width. The real dialog keeps the Dialog's own phone layout, sticking to the bottom edge with the same stacked pair.