Implement collapsible panels for the new room list (#32742)

* Add `react-resizable-panels` library

* Implement a custom SeparatorView

* Add a `LeftResizablePanelView`

* Add a custom `GroupView`

* Export everything from shared-components

* Make it possible to track width/collapse state through settings

* Add a view model to drive the views

* Render views without disrupting the old room list

* Fix lint error

* Disable user interaction on collapsed panel

* Prevent widgets fron hijacking pointer events

* Expand to full width on separator click

* Separator should be shown when focused via keyboard

* Update tests

* Use data-attribute for hover

* Write stories for SeperatorView

* Write vite tests for SeparatorView

* Write tests for LeftResizablePanelView

* More tests

* Fix lint errors

* Fix flakey border on the roomlst

* Fix storybook axe violation

* Update snapshots

* Fix playwright tests

* Fix sonarcloud issues

* Use translated string

* Add better js-doc comments

* Rename `ResizerSnapshot` to `ResizerViewSnapshot`

* Externalize react-resizable-panels

* Link figma designs to stories

* Write playwright tests

* Update screenshots

* Fix lint errors

* Update more screenshots

* Update more screenshots

* Fix flaky toast test

* Update apps/web/playwright/e2e/crypto/toasts.spec.ts

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

* Fix indentation

---------

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

apps/web/res/css/_common.pcss

@@ -54,6 +54,15 @@ Please see LICENSE files in the repository root for full details.
     isolation: isolate;
 }
 
+/**
+ * Disable pointer events inside the persistentElement container when the room-list is being resized.
+ * This is necessary to avoid the pointer events from being hijacked by the content rendered inside
+ * that div.
+ */
+:root:has(.mx_Separator[data-separator="active"]) #mx_PersistedElement_container {
+    pointer-events: none;
+}
+
 /**
  * We need to increase the specificity of the selector to override the
  * custom property set by the design tokens package

apps/web/res/css/structures/_LeftPanel.pcss

@@ -25,6 +25,17 @@ Please see LICENSE files in the repository root for full details.
     --collapsedWidth: 68px;
 }
 
+.mx_LeftPanel_panel {
+    .mx_LeftPanel_outerWrapper {
+        height: 100%;
+        max-width: none;
+    }
+
+    .mx_LeftPanel_wrapper--user {
+        width: 100%;
+    }
+}
+
 .mx_LeftPanel_wrapper {
     display: flex;
     flex-direction: row;
@@ -211,3 +222,11 @@ Please see LICENSE files in the repository root for full details.
     /* Important to force the color on ED titlebar until we remove the old room list */
     background-color: var(--cpd-color-bg-canvas-default) !important;
 }
+
+#left-panel .mx_LeftPanel_wrapper--user {
+    /*
+     * Disable background when using the new room list.
+     * This background sometimes shows when the panel is resized and it looks like a thicker border.
+     */
+    background: none;
+}

apps/web/res/css/structures/_RoomView.pcss

@@ -10,6 +10,12 @@ Please see LICENSE files in the repository root for full details.
     --RoomView_MessageList-padding: 18px;
 }
 
+.mx_LeftPanel_panel {
+    .mx_RoomView_wrapper {
+        height: 100%;
+    }
+}
+
 .mx_RoomView_wrapper {
     display: flex;
     flex-direction: column;