Invitation Status Sheet Success Block for React

So you can see it without a click. On load the sheet 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. View invitations opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same SheetInvites component and share the block's state, so a Resend pressed in place is there in the real sheet. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Nothing was sent. The twelve people, their statuses and their times are typed in INVITEES, and Resend and Resend all pending only change this page: the row says "resent 10:05 UTC", its button reads Resent and a polite status line says "Resent to Eero Salo in this demo. Nothing was sent." To wire it, build INVITEES from your invitation records and call your resend endpoint from resend and resendPending.

It's a single-choice Toggle Group, so one chip is always pressed, and each chip names its count ("Opened, 5") from the same list the rows come from. Choosing a chip lists only the people with that status and a line says "Showing 5 of 12"; the sheet is a fixed height with a scrolling list, so nothing around it moves. Arrow keys move between the chips and Space or Enter presses one.

From the end of the layout. The catalog's sheet sides are physical, so the block reads the page's direction when you open it and passes left in a right-to-left layout and right otherwise. The trigger is passed to SheetTrigger through render, and the sheet is controlled with open and onOpenChange.

Yes. The real sheet is named by its title and described by its sentence, and focus stays inside until it closes; Escape, Done and the close button return focus to View invitations. The copy shown on load moves no focus; Escape inside it, Done and its close button close it and put focus on View invitations. A status is a word and a glyph (a check, an open envelope, a clock), never only a color, and each Resend button is named for its person.

The copy shown on load docks to the foot of the page as a bottom sheet with Done and Resend all pending pinned under the list, and its sentence is read out but not shown to leave room for the people. The real sheet keeps the Sheet's own phone layout. The chips wrap to two rows.