Email Compose Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline over a picture of the Inbox, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a draft you started in the copy is the one the dialog opens with. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

It replaces the list inside the same shell, so the menu keeps its size and nothing around it moves. New email starts empty; Reply fills To with the sender and Subject with "Re:" and the original subject; Forward fills Subject with "Fwd:" and quotes the original below the cursor. Enter in a field does nothing, so a stray key never sends; Ctrl or ⌘ Enter and the Send button do. Back, or Escape, returns to the list and keeps the draft until you start another.

Every recipient, split on commas or semicolons, must look like an address (text, an at sign, a domain with a dot), and the subject can't be empty. The problem is written in a line of its own under the message, which keeps its height, and the field it belongs to is marked invalid. A message with a body but no subject is refused rather than sent without a title.

Nothing is delivered. The draft is added to the drawn Sent folder, whose count goes up by one, the folder list behind the menu shows Sent as the current folder, the menu closes and the status line reads "Added to Sent in this demo" with the recipient and the new count. Focus returns to the header's field.

All of it. The folders, their counts and the open message are typed data and the draft is state in the block. In your app load FOLDERS and the open message from your mail store, post the draft from send to your API, and only then raise the Sent count and close the menu.

Yes. Type to search the actions and folders, the arrow keys move through them, Enter chooses, and Escape steps back from the form, then closes the menu with focus on the field. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. In the form, Tab moves To, Subject, message, Send. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.