The new session manager beta is confusing and disorienting

### Your use case

It looks slick but it's horrible to use and understand. The essence of some of this stuff makes sense but it's all put in a really confusing format.

Watching the video of me walking through my confusion is probably better than some of the text to understand (unmute for voice-over):

https://user-images.githubusercontent.com/558581/200095973-adf0a557-88d9-4e1a-a791-bfd2ec0cab43.mp4

### 1. Unverified session security recommendations flow is bogus

1. Have the new session manager open on a screen where the dialog/modal all fits without scrolling
1. Under **Sessions** -> **Security recommendations** -> **Unverified sessions**, click the **View all (1)** action
1. Notice how nothing really happens. What am I supposed to do?
- Something very subtle happens but it's so easy to notice because it's trying to get you to do something 2 sections down in the **Other sessions** section which not connected at all to what I just tried to click
- If you have a smaller viewport, it does try to scroll to that section but even that is bad. It takes a click to show the hidden "Verify" action for the session and another click on "Verify" to actually get into the verify process for the unverified device.
1. Clicking **View all (1)** again after this point does nothing different. It just seems like dead broken UI

Session manager dialog open | After clicking the **"Unverified sessions"** -> **"View all (1)"** action
--- | ---
 | 


Notes:

- **Other sessions** should be renamed to **Unverified sessions** to match what it actually is
- There is already a **Unverified sessions** block under the **Other sessions**. No need to duplicate things.
- I'd expect just to start the verification process from the suggestion itself.

## 2. Sections and block UI hierarchy identity crisis

All of these border blocks are confusing.

- I open my verified session and it has a separate block that feels disconnected from what I've just expanded because of the border and because of the duplicated information.
- It seems like we can make these blocks be the collapsed version and expand with the info they have now. Although blocks may be the wrong thing 🤷
- The **Verified session** block we surface by default should just be incorporated into session item itself. It makes it seem disconnected and separate from the session detail above it. It already says I'm verified by being in that section, by having a green shield, and "Verified text in the item.
- Too much block in block nesting
- We surface a **Verified session* block right away then expanding the session shows the same block again.
- We surface a **Unverified sessions** block as a recommendation, then again under the **Other sessions** section, but then again when I expand an unverified device. (same with **Inactive sessions** block)

All of this really seems like it could use this type of Hyperplexed treatment:

- https://www.youtube.com/shorts/Wqe6saEJscA
- https://www.youtube.com/shorts/5TCkjhG1TVU
- https://www.youtube.com/shorts/NuZkHOBv3zA


### 3. **Sign out all other sessions** is under the **Current sessions** section

There is a **Sign out all other sessions** action under the context menu in the **Current sessions** header. But it's hidden away and it's talking about "Other sessions" which has it's own section below. Probably should just have a "Sign me out of everywhere" obvious action somewhere.


### Have you considered any alternatives?

Let's compare to the current session management:

- Simple list with actions I'd want to do surfaced.
- No confusing duplicated blocks and layout
- We lost the nice hints and suggestions
- According to the old session management, I guess that session it's trying to get me to verify in the new session manager doesn't even support verification. Sooo, not sure what I'd do there if I actually wanted to do that. This issue has been split off to https://github.com/vector-im/element-web/issues/23722


### Additional context

_No response_