Blocked and Muted People Account Block for React

Edit START for the two lists and FINDABLE for the accounts the handle field can find. Each person has an id, a handle without the at sign, their initials, a name and an ISO since day. The day is written as "Blocked on 2 Mar" or "Muted on 18 Jun" from that value, and a person added in the demo gets the one AS_OF constant. Nothing reads the clock, so the same page renders on the server and in every time zone. Replace EVERYONE with a lookup against your own accounts.

Every change: unblocking, unmuting, adding and moving only change this page's state, the status line says "in this demo" and nobody is told. To make it real, call your block and mute endpoints in remove and in add, update the lists from what the server answers and show a failure in the same status line. Undo then needs a reverse call of its own, because the server has already acted; if you cannot reverse an action, remove the Undo button and keep the confirmation in words.

The typed text is trimmed, a leading at sign is dropped and the rest is compared without regard to case. An empty field says "Type a handle first." A handle that no account has says so and points at the four chips below; pressing a chip fills the field. A person who is already on the open tab's list says so, and one who is on the other list moves across, with a line that says "Moved … from Muted to Blocked". After a successful add the tab follows, the new row comes first and focus lands on its Unblock or Unmute button.

Each change pushes the lists as they were onto a stack, and Undo pops it, so it walks back one change at a time and says "Undid blocking Linnea Fairweather". It also returns to the tab where the change was made. Undo is never hidden: with nothing to undo it stays in place, marked as unavailable, and answers "Nothing to undo." When a row leaves, focus moves to the next row's button, or to Undo when the list is empty, so keyboard users never land on the page's top.

No. Each list is a scroller four rows tall, so removing the last person, adding a fifth or switching tabs leaves everything below in place; a list with more than four people scrolls inside itself, and the scroller takes focus so the arrow keys work. An empty list fills the same box with a short message. On a phone the three lines of a row (name, handle, date) get a little more height than on a wide screen, and the foot with the status line and Undo stays pinned to the bottom of the screen.

The tabs are a real tab list with their counts in the name, each list is a named region holding a real list, and every button names its person ("Unblock Hollis Verhaeghe"). The result of each action is spoken once through a polite status line that exists from the start. Handles and dates keep their reading order in a right-to-left page.