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

Browse Source

* 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 19:03:32 +05:30

committed by GitHub

parent 89261bbe00

commit 99e6ede9f1

197 changed files with 1592 additions and 40 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-default-linux.png

BIN

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 57 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-fully-collapsed-linux.png

BIN

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 31 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 8.9 KiB After Width:  |  Height:  |  Size: 9.3 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Invites-empty-room-list-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 6.9 KiB After Width:  |  Height:  |  Size: 6.6 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Mentions-empty-room-list-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 6.9 KiB After Width:  |  Height:  |  Size: 6.4 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/People-empty-room-list-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 10 KiB After Width:  |  Height:  |  Size: 10 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Rooms-empty-room-list-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 7.5 KiB After Width:  |  Height:  |  Size: 7.6 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Unreads-empty-room-list-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 7.9 KiB After Width:  |  Height:  |  Size: 8.0 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/collapsed-primary-filters-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.4 KiB After Width:  |  Height:  |  Size: 4.1 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/default-empty-room-list-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 12 KiB After Width:  |  Height:  |  Size: 12 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/expanded-primary-filters-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 8.5 KiB After Width:  |  Height:  |  Size: 7.5 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 23 KiB After Width:  |  Height:  |  Size: 24 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.8 KiB After Width:  |  Height:  |  Size: 2.8 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 4.1 KiB After Width:  |  Height:  |  Size: 4.9 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.4 KiB After Width:  |  Height:  |  Size: 4.1 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 1.8 KiB After Width:  |  Height:  |  Size: 1.8 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.2 KiB After Width:  |  Height:  |  Size: 3.2 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 28 KiB After Width:  |  Height:  |  Size: 29 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 22 KiB After Width:  |  Height:  |  Size: 13 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-search.spec.ts/search-section-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.9 KiB After Width:  |  Height:  |  Size: 3.9 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.4 KiB After Width:  |  Height:  |  Size: 2.4 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.7 KiB After Width:  |  Height:  |  Size: 2.7 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.9 KiB After Width:  |  Height:  |  Size: 2.9 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.5 KiB After Width:  |  Height:  |  Size: 2.6 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.7 KiB After Width:  |  Height:  |  Size: 2.7 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.2 KiB After Width:  |  Height:  |  Size: 3.2 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.3 KiB After Width:  |  Height:  |  Size: 3.3 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-message-preview-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 5.2 KiB After Width:  |  Height:  |  Size: 5.2 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.5 KiB After Width:  |  Height:  |  Size: 3.5 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 75 KiB After Width:  |  Height:  |  Size: 76 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 70 KiB After Width:  |  Height:  |  Size: 71 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 90 KiB After Width:  |  Height:  |  Size: 91 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.7 KiB After Width:  |  Height:  |  Size: 2.8 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.8 KiB After Width:  |  Height:  |  Size: 2.8 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.0 KiB After Width:  |  Height:  |  Size: 3.0 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 20 KiB After Width:  |  Height:  |  Size: 20 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 18 KiB After Width:  |  Height:  |  Size: 18 KiB