Assign Task Dialog Block for React

So you can see it without a click. On load the sheet is a copy drawn in place at the end of the frame: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Assign task button 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 AssignFields and AssignFoot components and share the block's state, so what you chose in the copy is there in the real one. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

From the end of the page's reading direction: the right in a left-to-right page and the left in a right-to-left one. The sheet's own sides are physical, so sideOf reads the page's direction when the sheet opens and passes the matching one. The copy shown on load uses logical positions, so it is already on the right side in either direction. On a phone the copy docks to the foot of the frame as a bottom sheet, and the real sheet is full width.

Each person has a typed count of open tasks and the number they can carry. The row says "3 open", or "5 open, full"; the person chosen shows "3 open, 4 with this", and their bar gets a hatched stretch for the task being assigned. Choosing someone who is full is allowed: the row says so and the choice is yours. Once the task is assigned, their count includes it, and choosing another person shows the difference again.

Today is AS_OF, a fixed day, so the chips read the same for everyone. Tomorrow and Next Monday are worked out from it, and each chip shows its date. Pick a date opens the calendar under the chips, which closes every day before today; choosing a day there keeps that chip pressed with its date. The calendar is the last thing in the sheet's body, so opening it moves nothing above it.

All of it. The five people and their load are typed constants, and Assign only updates the drawn card and says in a polite message whether the assignee would be notified: the switch is honest, nothing is sent. In your app post the assignee, priority and due date from assign, notify the person on your server when the switch is on, and recompute each person's open count from the response.

Yes. The real sheet is named by its title and described by its sentence, focus starts on the chosen person and stays inside until it closes, and Escape, Cancel and the close button return focus to Assign task. The people are native radios, so the arrow keys move the choice. The trigger is passed to SheetTrigger through render, and the sheet is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the button.