Devices Account Block for React

Edit DEVICES. Each has an id, a name, a kind that picks the icon (laptop, desktop, phone, tablet or display), a group (computer, mobile or other), the browsers on it, how many sessions it holds, a city, a documentation ip, the ISO day it was seen and a current flag for the one in use. The group counts, the "Seen yesterday" wording (worked out from the typed AS_OF day, never the clock), the sessions in the dialog and the filler cells that finish each grid's last row are all derived, so nothing is typed twice. Add a group to GROUPS and it appears.

Everything: removing takes the tile out of this page's state and the status line says "removed in this demo"; renaming changes the shown name only; Undo brings a device back, which a real server can't do. To make it real, call your endpoint from confirm (revoke the device's sessions and its remembered state), remove the tile only when it answers, and show a failure in the same status line. Send the new name from saveName the same way.

It is an alert dialog, so clicking outside doesn't close it, focus starts on Cancel and Escape closes it. It says how many sessions end ("This ends its 2 sessions") and that the device will ask for a code the next time it signs in; the all-devices version lists the devices and counts every session. The confirm button is the destructive one, so there is no second colored button. After you confirm, focus moves to the next tile's menu; after Cancel it returns to the menu you opened.

Choosing Rename in a tile's menu turns its name into a text field with focus in it, with a Save and a Cancel button where the menu was. Enter saves, Escape cancels, and an empty name is refused with a line that says so, keeping the field open. Saving or cancelling returns focus to the tile's menu button. The tile keeps its height all the while.

The tiles are one across, each with its menu button at the end of the first line, so the whole panel is a single column of cards under their group labels. The foot with the status line and Undo stays pinned to the bottom of the screen while you scroll, so the result of a removal is always in view; from the medium breakpoint it is simply the last band. The panel's height doesn't change as devices go.

Each group is a labelled list and each tile a list item; the menu button is named for its device ("Actions for Phone"), the badge says "This device" in words, and the status line is a polite live region present from the start. The menu opens with Enter, Space or the arrow keys and Escape closes it. Addresses read start to end in any language, and the names, places and counts keep their order in a right-to-left page.