Element-web: New UI for devices section

[dbkr]

Implement new UI for the devices section in settings

• We should base this off the union of what we get from the devices CS endpoint and the devices from e2e (currently settings has the former and you get the latter if you click on yourself in the member list of a room...)
• No UI for this yet, but devices that appear in the CS endpoint but not in e2e (ie. they don't do e2e) should be displayed in some appropriate way.

[t3chguy]

Accessibility is a requirement here, existing solution is not very accessible

[jryans]

Figma

• Update device info in security section of settings to match design above
• Display device trust status

[MurzNN]

Will be good also add button "Verify" for unverified devices. Because now when user press "Later" in cross-signing toast at top-left, later he can't understand where to find interface for verify this device.

[MurzNN]

Also will be good to stay "Last seen" info always visible in list, at least last seen time, and ID + IP on tooltip.

[jryans]

Marking this temporarily as needs-design: while we do have some designs above in Figma, design would like to iterate on it a bit more over the next few days, so please check in with them to ensure latest designs are ready.

[matthijskooijman]

One more suggestion: A "Sign out of all untrusted" button might also be useful to clean up old sessions (especially useful for cleaning up a lot of sessions that predate the new verification mechanisms so were never verified).

And/or maybe "Sign out inactive sessions" for signing out sessions that are no longer active (e.g. browser that has cookies deleted without logout, old mobile devices, etc.). The definition of "inactive" is probably tricky, but something like "not seen for a week" could be sufficient?

Also, the design above no longer allows bulk deleting by clicking checkboxes (and assuming that the delete will show an "are you sure" prompt, deleting a bunch of sessions might then be cumbersome). However, if a mechanism is added to remove untrusted and/or inactive sessions, then that probably covers most of the usecases for bulk deletes.

[matthijskooijman]

The design above no longer shows which session is the current session, which I think is still valuable (see also related #14344 about showing the current session in the profile view).

[matthijskooijman]

Sorry for the spam, just trying to connect together some issues and create a bit of overview :-)

I previously filed #14343 about the "Review where you're logged in" toast, which redirects to your own profile view, and where it is quite unclear what needs to happen there. I think that the profile view might actually be the wrong place to redirect (but I think it's currently the only place where you can start a verification of your own sessions).

If the devices section in the settings is improved per this issue, then it would make more sense for the "Review where you're logged in" toast to actually redirect to the settings rather than the profile list. I'm not authoritative on this, but maybe this can be considered when designing this interface.

One improvement that follows this is that the help text could provide some more guidance about what to actually do to "review where you're logged in". In the design above, there is already some guidance, but maybe some suggestion to remove outdated and/or untrusted sessions might be useful as well.