sessions

Summary

Every login session for the account, each with a Revoke button.

Raw wireframe

• .context/designs/web/settings/sessions.html
• .context/designs/web/settings/sessions-empty.html

Why it is drawn this way

Device type is a string test. A user agent containing "mobile" is "Mobile Device" with a phone icon; anything else is "Desktop". The raw user agent is printed under the IP.

The current session is not marked. Nothing tells this device from the others, and its Revoke button works the same.

Revoked and expired sessions stay listed. They get a red Expired or Revoked badge; Revoke is disabled only when revoked. The drawing shows two live sessions.

Revoke opens a destructive dialog. "Revoke Session?" on confirm-dialogs. So the button is not a link.

There is no info card. Unlike accounts, the page ends at the list.

Some colours have no dark: variant. The device icons (text-blue-600) and the empty text (text-gray-600) stay as they are in dark mode. The drawing uses tokens.

Not drawn. Loading is a LoadingSpinner; error is an ErrorCard titled "Error loading sessions".

Related

• user-menu
• accounts
• confirm-dialogs
• toasts

Sources

• apps/website/src/app/settings/sessions/page.tsx
• packages/ui/src/utils/format.utils.ts