Space and Room list collapse/expand handle

### Your use case

People keep criticizing about the rooms/spaces panel resizing after the fix of #30844 got applied. To prevent further iterative complains and partly solutions, I created a "final" UX-design that should solve the UX-problems people run into entirely, which also reduces the amount of work for contributors (especially reduction of discussions, complains and iterative upcoming issue reports).

Hint: if I say "should" in the upcoming text, it is my way to describe things, but everything is meant as suggestion and is up for discussion. Please understand it as proposal, not as command.

#### What would you like to do?
The panels for spaces-list and room-list should get an ability to expand and collapse in an user friendly, adaptive and useful way, that also fits well in the current Element design language. People want more control about this, see #30844 (especially the last comments).

#### Why would you like to do it?
People are using Element on a wide range of different devices -> from desktop with large screens to laptops with smaller screens and also via tablets and phones. Those on big-enough screens will probably be fine in the state as is. People on smaller screens may want to have more control about the panel-sizes. That can even be true if someone on a large screen requires more space for other applications and want to shrink element to a space saving, but still usable state.

#### How would you like to achieve it?
Currently Element has 2×2 states:
Spaces panel wide (space names readable) and small (only icons visible).
Rooms panel wide (room names readable) and collapsed (nothing visible).

- The spaces have a button on top, right of the user avatar. It is usually invisible. On touch devices it should be visible all the time to be/stay discoverable, especially if no mouse pointer is available. Otherwise this function can stay as is and makes the further design even easier to handle.

- When rooms panel is collapsed, a drag-handle widget appears. This is actually a really great way to drag the panel size with touch pointers. However, on room panels expanded size it disappears and so it becomes a little bit harder to shrink it again. I recommend, similar as before, to detect the touch device and missing mouse pointer to keep the drag-handle visible all the time, even on expanded state. If I see it correctly, it is placed in between the room panel and chatroom widget, so it should not be a lot of work to do this step.

- This is the most important change. Right now the rooms panel can be resized in a clamped range and if people drag the minimum allowed range further, it jumps into the collapsed state. This behavior is mostly fine, but instead of just the collapsed and expanded state, Element should have 4 states.
- Spaces panel wide or small (depending on the state of the button next to the avatar), room panel wide (expanded). Room panel can still be resized just as it is right now. Drag-handle is visible for touch-pointers only. In case the rooms panel is filling the whole screen, the handle should align with the right edge of the screen.
- Spaces panel wide or small, room panel small. That means, room panel is like it was last summer and all the years before. Room pictures/avatars are visible but no room names. This allows for fast room switching while also having more chat space than in previous state. Drag-handle is still visible for touch-pointers only.
- Spaces panel becomes collapsed. This is a new state for this panel. I think a common use case is to switch rooms inside a space or in "all rooms" more often than between spaces. So it makes sense in my opinion the collapse the spaces panel first. If someone switches more from space to spaces than between rooms and disagree with me, please comment. Again, drag-handle is visible for touch-pointers only.
- The fully collapsed state where spaces panel and rooms panel are completely hidden. This provides the maximum amount of chat space, which can be useful if someone just wants to chat with a single person/room at that time. It gives enough space to chat no matter how small the screen space actually is (even if the two previous states should also fit into every screen). The drag-handle is visible on the very left of the screen and is always visible for touch pointer **and** mouse pointer.

The drag-handle switches between these 4 states in exactly the order I wrote above and vise versa. The previous small and wide state of spaces panel is restored after it was collapsed and got expanded again.
This whole proposal makes these panels fully adaptive for every kind of display and also supports touch and mouse pointers. It is very close to the recent changes that got implemented and should solve almost all UX-issues people may have with it.

Related:
- Bug #33265
- Feature request to automatically shrink the panels #17261. That can be integrated very well into my solution. Once space is small enough to automatically collapse the panels, the order should be the same as dragging the handle.

### Have you considered any alternatives?

Instead of the handles, buttons to collapse/expand panels would also work and I don't think people would complain about it. However, in my opinion it will not feel as polished and well integrated into the current design language, so I would **not** suggest this way.

### Additional context

_No response_