Save Draft Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the editor: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. Save draft in the header opens the real Dialog, modal, with its focus trap, Escape and focus on the name, and the copy stays closed until a reload. Both show the same DraftFields component and share the block's state, so a name typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Each choice carries its own sentence: "Autosave is off. The draft saves only when you press Save draft", or "Autosaves every 2 minutes", with "Last autosave 10:42" added for the two that run. The time is typed, never the clock, so the preview never ages. The sentence sits in one reserved two-line slot, so changing the choice never moves the buttons. Nothing autosaves here: in your app start a timer from the chosen cadence and show the real time of the last save.

The ghost button swaps, in a row of fixed height, for the question "Discard? This removes the draft." with Yes and No. Focus goes to No, the safe answer, and back to Discard changes if the person says no. Yes discards the draft, closes the dialog and changes the chip to "Draft discarded". A dialog opened from inside a dialog would trap focus twice and, in the in-place copy, couldn't open at all, so the question stays in the row.

It checks that the name isn't empty (a field error appears and focus returns to the field), then puts the name in the toolbar's chip, shows the cadence sentence under it and says in a polite status message that nothing was stored in this demo. In your app save to your API in save, keep the dialog open with a busy state until it answers, and show a failure inside the dialog with a retry.

The real dialog opens with focus on the name field. Enter in it saves, Escape and Cancel close it and return focus to Save draft, and the values typed stay for the next time it opens while the Discard question resets. The first field takes focus by default. The copy shown on load moves no focus.

The copy shown on load docks to the foot of the page as a bottom sheet with Cancel and Save draft pinned and the fields scrolling above them. The autosave choice comes second so it is in reach without scrolling, and the three choices share the full width. The real dialog keeps the Dialog's own phone layout, sticking to the bottom edge.