Device Management 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 Manage devices 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 DeviceList and DeviceFoot components and share the block's state, so a device signed out in the copy is gone from 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.

A dialog over a sheet is two layers of focus trap and two ways to lose your place. Here the row changes in place: its second line asks "Sign out this device?", its button is replaced by Cancel and Sign out, and focus moves to Cancel so a stray Enter backs out. Cancel returns focus to that row's Sign out. Rows keep one height in both states, so nothing below them moves, and on a phone the two buttons are icons that keep their names. This device has no Sign out: ending the session you are using would close the sheet under you.

Here it takes the device out of local state, counts the drawn card down, and says in a polite message that nothing was signed out for real. After a row goes, focus moves to the next row's Sign out, or to the note at the foot of the list when none is left. Sign out of all other devices asks, then keeps only this device. In your app call your server in signOut and signOutAll, revoke the sessions there, keep the row's buttons busy until it answers, and put a failure in the row's second line. Show the last seen time your server records, and sort the newest first.

The real sheet is named by its title and described by its sentence, and focus stays inside until it closes. Escape, the close button and a press outside return focus to Manage devices. 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 and its close button close it and put focus on the button.

Edit DEVICES. Each has an id, a kind of laptop, phone or tablet, a name, a place, a current flag for the device in use and a seen day in ISO form, written in UTC so it reads the same on the server and in every visitor's time zone. Keep the current device first. Places are invented here: use the coarse location your server resolves, and say "approximate" if it is a guess from an address.