Skip to content

Implement collapsible panels for the new room list - #32742

Merged
MidhunSureshR merged 41 commits into
developfrom
midhun/roomlist-2/collapsible-panel
Mar 23, 2026
Merged

Implement collapsible panels for the new room list#32742
MidhunSureshR merged 41 commits into
developfrom
midhun/roomlist-2/collapsible-panel

Conversation

@MidhunSureshR

@MidhunSureshR MidhunSureshR commented Mar 6, 2026

Copy link
Copy Markdown
Member

For https://github.com/element-hq/wat-internal/issues/292

This PR implements collapsible left panel using react-resizable-panels:

  • Three views are introduced (GroupView, LeftResizablePanelView and SeparatorView) along with a ResizerViewModel to implement the custom behaviour we need.
  • The old room-list and its separator are unaffected.

I've spent a considerable amount of time trying to match the new implementation with the existing one so that we wouldn't need to update all the playwright screenshots. But this just isn't possible due to the library setting fractional widths (like 370.4px) and differences between headed and headless mode in playwright.

@daniellekirkwood

Copy link
Copy Markdown
Contributor

i think you can tab through the contents of the left-panel when it's closed before it gives you the option to open the left panel which doesn't feel right? @MidhunSureshR happy to screensrecord/shreenshare :)

@daniellekirkwood

Copy link
Copy Markdown
Contributor

when on a call, i can't click and drag to open the left panel -- i can only click to snap open

@daniellekirkwood

Copy link
Copy Markdown
Contributor

it appears the drag function is not easy to use in a call ...

@gaelledel gaelledel left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Observations

  1. The separator line seems thicker as soon as you hover/interact with it. When clicking away on the UI, the line returns to its original thickness. We should not see any thickness difference and we should just preserve the default thickness at all times.
Image
  1. When you enter focus mode, there is an extra line on top of existing ones
Image Image
  1. When reaching S size, it "feels blocked". As a user you really have to push hard in order to access the full collapsed view. This will be detrimental as the collapsed view will be harder for user to discover. It just also simply feels hard to get the collapsed view.

  2. When reducing from S size to full collapsed, it seems there is a "bounce" like animation. Ideally, we'd need to remove this bounce to ensure the closing feel to be natural and smooth.

  3. When fully collapsed, the OnClick interaction should expand to full view. Currently, it expands to S view. This happens if user has stayed on S view prior to reaching collapsed view

  4. When in a call, ideal behaviour would be for the room list to "auto collapse" and when you exit, the RL should return to the size set previous to the call.

  5. During calls, it seems impossible to reach the full collapsed view

@daniellekirkwood

Copy link
Copy Markdown
Contributor

i also can't appear to make the left panel wider when i'm in a call

@MidhunSureshR
MidhunSureshR added this pull request to the merge queue Mar 19, 2026
@github-merge-queue
github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Mar 19, 2026

@andybalaam andybalaam left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks ok from a crypto point of view.

Comment thread apps/web/playwright/e2e/crypto/toasts.spec.ts Outdated
Comment thread apps/web/playwright/e2e/crypto/toasts.spec.ts Outdated
MidhunSureshR and others added 2 commits March 23, 2026 18:42
Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
@kaylendog
kaylendog removed their request for review March 23, 2026 13:21
@MidhunSureshR
MidhunSureshR added this pull request to the merge queue Mar 23, 2026
Merged via the queue into develop with commit 99e6ede Mar 23, 2026
51 of 53 checks passed
@MidhunSureshR
MidhunSureshR deleted the midhun/roomlist-2/collapsible-panel branch March 23, 2026 13:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants