Room decoration: shields

[manuroe]

From riot-web created by dbkr: element-hq/element-web#11225

Legend in figma around: https://www.figma.com/file/wwqBo5oAFfk8XKmtd2YaIs/Cross-signing?node-id=2363%3A11

Decorate rooms with black/green/red shields as appropriate.
This decoration should only appear when the cross-signing labs flag is enabled.

(The following describes rooms in terms of users, but updating the shields on users in the UI is left to a separate issue #2905.)

• Users
  • None: e2e off in the room
  • Black: Encryption is enabled (I don’t care about their devices)
  • Red: I’ve verified them and an unverified device exists or they were previously verified and their cross-signing identity has changed
  • Green: I’ve verified them and all of their devices are verified
• Rooms
  • None: e2e off in the room
  • Black: Encryption is enabled
  • Red: A red user exists in the room
  • Green: All users are green
  • (The state of all users, including yourself, is considered when decorating a room)

For some additional detail, the shields are meant to layer onto the room icon in both the room list and room header:

[manuroe]

Kamino cloned this issue to vector-im/riot-ios

[manuroe]

Because of room members lazy loading, we may not have enough data to compute the right shield to display for a room. In this case, use the black shield.
In future, we will load members in background and refresh the black shield with the right one.