Streak Tracker 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 Daily check-in 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 StreakBody component and share the block's state, so a check-in made 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.

From a typed log of the days that are done, never a counter: the streak is the run of consecutive days that ends today, or yesterday while today isn't done yet, found by streakOf. Every date comes from one fixed day, AS_OF, so nothing ticks and the preview never ages; 28 September to 8 October is 11 days, and a miss on 27 September ends the run before it. Checking in adds today to the log, so the number can only change when you press the button, and the milestones and the "days to" line are worked out from it.

Thirty-five days in a list, Monday first, ending on the Sunday of the current week: the first four weeks are slim cells and the fifth, this week, is the large row with the weekday letter in each cell. State is a shape and a word, never a colour: done is filled, a missed day is an empty outline, today is ringed, and a day to come is dashed. Each cell carries its name for assistive technology, like "Thu 8 Oct, done" or "Fri 9 Oct, today, not yet", and the list reads left to right in both text directions.

Today's cell fills with a check, the number rolls from 11 to 12 (with reduced motion it changes in place), the milestone line says "2 days to 14", a polite message says "Checked in. 12 days in a row" and the button reads Checked in, quiet but still pressable: pressing it again says you already checked in. The dialog stays open to show the result; Later and Escape close it, and the drawn habit row behind it carries the new number.

No. The log lives in this tab and a polite message says "in this demo" and "Nothing was tracked". In your app read the log from your server, send the check-in from checkIn, and take the new streak from the response: let the server decide what a day is, in the person's own time zone, and whether a streak can be frozen. Replace AS_OF with today's date and keep streakOf.

Yes. The real dialog is named by its title and described by its sentence, focus starts inside it, and Escape, Later 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 number is read as text ("11 days") and one polite status message reports what changed. The copy shown on load moves no focus; Escape inside it, Later and its close button close it and put focus on the header button.