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>
This commit is contained in:
R Midhun Suresh
2026-03-23 13:33:32 +00:00
committed by GitHub
co-authored by Andy Balaam
parent 89261bbe00
commit 99e6ede9f1
197 changed files with 1592 additions and 40 deletions
+9
View File
@@ -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