Quick Note Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the wall: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The New note 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 NoteFields 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.

Save note asks for a title first, naming the problem under the field and moving focus to it. Once there is one, the card is added to the block's list and the wall draws it before the five drawn cards: pinned notes come first, then the newest. The card shows its label with its glyph, a pin when it is pinned, the title and up to four lines of the text, and the reminder day when there is one. A polite message says what was saved, and the count in the header follows the cards. Reopening the dialog starts from an empty note.

Nothing rings. The reminder is a day kept on the card. The Reminder button opens a calendar in the same space as the note's fields, and focus moves to its title so a keyboard user starts at the top; choosing a day, Clear or No reminder goes back to the note with focus on the Reminder button, and Back to the note leaves it as it was. Days before AS_OF, the date the demo treats as today, are closed, and the dates are printed from fixed ISO days, never from your clock. In your app schedule the reminder on your server when the note is saved.

The field stops at 280 characters and the count under it, such as 42 of 280, is for the eye: it is hidden from screen readers, so typing is not interrupted. The textarea has a fixed height of about four lines and scrolls inside, so the dialog keeps its size however much you write. The title stops at 60 characters.

Everything. The notes live in this page's state and are gone on a reload; nothing is stored, sent or scheduled. In your app send the note from save, keep the list in your own state or on your server, and load the wall's own cards from your API in place of the five drawn ones.

Yes. The real dialog is named New note, focus starts in the title and stays inside until it closes, and Escape and the close button return focus to the New note button. The labels are a group named Label with arrow-key movement, the Pin to top switch is named by its text, and the calendar is the catalog's own with arrow keys between days. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the button.