Display verification status as a badge atop the user profile icon

[kevinaboos]

We should provide a visual indicator to the user whether or not their current session has been verified, which is important because you cannot view E2EE messages without your device session being fully verified.

Design suggestion

The best place to display the user's verification status is as a small badge icon overlaid atop the user's profile picture. Currently the user's profile picture is just a placeholder (the gray "U" circle on the top left of the window), as the user profile/settings page hasn't yet been implemented.

We should place the badge here on the top-right corner of the user profile picture), like so:

Note that we also need to handle the case for the mobile UI, when the tab bar is at the bottom:

Then, when the user hovers over the badge/profile picture, we should display a tooltip that states the verification status, which is either "Verification unknown", "Unverified", or "Verified".

Implementation

Robrix already implements a way to receive a stream of updates about the user's verification state, it just doesn't do anything yet. This is basically a placeholder for this issue. See the code here:

robrix/src/verification.rs

Lines 20 to 30 in 185459f

	pub fn add_verification_event_handlers_and_sync_client(client: Client) {
	let mut verficiation_state_subscriber = client.encryption().verification_state();
	log!("Initial verification state is {:?}", verficiation_state_subscriber.get());
	Handle::current().spawn(async move {
	while let Some(state) = verficiation_state_subscriber.next().await {
	log!("Received a verification state update: {state:?}");
	// TODO: send an update to the main top-level app instance
	// such that we can display the verification state as an icon badge
	// atop the user's profile avatar.
	}
	});

And then for the three possible VerificationStates, use icons like this:

• Unknown: a gray shield with either a question mark icon (or no icon) within it
  • icon suggestion
• Unverified: a red shield with an exclamation mark icon within it
  • icon suggestion
• Verified: a green shield with a checkmark icon within it
  • icon suggestion

Once the state transitions to Verified, we can break out of the loop and allow the async task to exit normally, since there is no reason to continue waiting on updates once we know we're verified.

[kevinaboos]

Closed by #244