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 19:03:32 +05:30
committed by GitHub
parent 89261bbe00
commit 99e6ede9f1
197 changed files with 1592 additions and 40 deletions
+18 -10
View File
@@ -11,6 +11,16 @@ import { test, expect } from "../../element-web-test";
import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElement, logIntoElementAndVerify } from "./utils";
import { type Bot } from "../../pages/bot";
// Mask the background of the screenshot to avoid failing the test just because some
// other component has changed its rendering.
const screenshotOptions = {
css: `
.mx_ToastContainer {
background-color: magenta !important;
}
`,
};
test.describe("Key storage out of sync toast", () => {
let recoveryKey: GeneratedSecretStorageKey;
@@ -37,15 +47,10 @@ test.describe("Key storage out of sync toast", () => {
// playwright only evaluates the 'first()' call initially, not subsequent times it checks, so
// it would always be checking the same toast, even if another one is now the first.
await expect(page.getByRole("alert")).toHaveCount(2);
// Mask the background of the screenshot to avoid failing the test just because some
// other component have changed its rendering.
await expect(page.getByRole("alert").first()).toMatchScreenshot("key-storage-out-of-sync-toast.png", {
css: `
.mx_ToastContainer {
background-color: magenta !important;
}
`,
});
await expect(page.getByRole("alert").first()).toMatchScreenshot(
"key-storage-out-of-sync-toast.png",
screenshotOptions,
);
await page.getByRole("button", { name: "Enter recovery key" }).click();
@@ -209,7 +214,10 @@ test.describe("Verify this device toast", () => {
await expect(page.getByRole("heading", { name: "Verify this device" })).toBeVisible();
await expect(page.locator(".mx_ToastContainer")).toMatchScreenshot("verify-this-device.png");
await expect(page.locator(".mx_ToastContainer")).toMatchScreenshot(
"verify-this-device.png",
screenshotOptions,
);
},
);
});