Mood Check 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 Log mood 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 MoodFields component and share the block's state, so a face picked 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 face is an icon from the icon set in the current text colour, so it follows the theme, and the name under it (Rough, Low, Okay, Good, Great) is what a screen reader hears. They are native radio buttons in one radio group, so Tab enters the group once and the arrow keys move and choose, in either text direction. The chosen face is solid foreground, never the primary colour, which stays on Log mood. Pressing Log mood before choosing says "Pick how you feel first." in a slot that is always there and puts focus on the faces.

Both are optional and independent of the face. The tags are a multiple-choice group, each a toggle that turns solid when it is on, and they wrap onto a second line on a narrow phone without changing the dialog's height. The note stops at 200 characters (the field refuses more); the visible count is hidden from assistive technology and a polite message says "20 characters left", "10 characters left" or "No characters left." only as each stage is crossed, never on every key.

Today's cell in the drawn week strip: it shows the chosen face and, from the small breakpoint up, the tags, and the card above it says "Logged: Good, Sleep and Work". Monday to Thursday hold typed faces, Friday is today and the weekend is empty, all from one fixed day so the preview never ages. The header button then reads Update mood, and the dialog reopens on what was logged; Cancel and Escape drop anything you changed without logging.

No. The entry lives in this tab and a polite message says "Logged Good for today, in this demo" and "Nothing was saved or sent". In your app send { mood, tags, note } from log, take the saved entry from the response and show it in the strip. Mood data is sensitive: keep it encrypted, let people export and delete it, and don't share it without consent.

Yes. The real dialog is named by its question and described by its sentence, focus starts on the faces and stays inside until it closes, and Escape, Cancel and the close button all return focus to the header button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The tags are a group you move through with the arrow keys, the note has a visible label, and one polite status message reports what changed. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the header button.