Edit Profile Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Edit profile button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ProfileFields component and share the block's state, so what you 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.

Against TAKEN, a typed list, as you type: three to twenty letters, numbers, dots and underscores, in lower case, with spaces and a leading at sign removed. Your own name is "your username today", a name on the list is taken and offers the first free variant (@ember_, then _1, _2), and anything else is available. The line under the field changes at once; what a screen reader hears is said 600 ms after the typing stops, and only when it changes. In your app ask your server in verdictOf, and treat its answer on save as the last word, since a name can be taken between the check and the save.

What differs from the saved profile, derived from the draft: "2 unsaved changes:" and one chip for each of Display name, Username, Main craft and Bio. Reset puts the saved values back and moves focus to the name. Save changes is quiet and pressable while nothing has changed, and answers "No changes to save." instead of closing. With a problem it stays open, says what is wrong under that field and puts focus in it.

It is a Combobox over a typed list of fourteen crafts: type to narrow the list, pick one, or clear it with the button in the field. A word that matches nothing shows "No craft with that name here." Picking a craft changes the draft and the strip; the saved profile changes when you save, and then the drawn profile's craft chip changes too.

All of it. The saved profile and the taken names are typed constants, and Save changes only updates the drawn profile and says in a polite message that nothing was stored. In your app send the changed fields from save, replace the drawn profile with the response, and show your server's reason in the field it names.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the display name and stays inside until it closes, and Escape, Cancel and the close button return focus to Edit profile. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The bio's count is said at 20 and 10 characters to go, at none and when over, never on every key.