sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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 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
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/structures/_LeftPanel.pcss
+19
View File
@@ -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;
}