Auto Collapse Behaviour - Collapse left panel on window resize (#32964)

* Add functionality to UIStore

- Make it possible to query if the window is currently being resized
- Emit WidthIncreased/WidthDecreased events

* Change resize behaviour of panel

So that the panel does not become smaller when the window is resized.
This is consistent with the old room-list design.

* Introduce a `CollapseHandler` object

This should be used by the collapse behaviours to collapse/expand the
panel. There's a good reason to not have the behaviours depend directly
on the react-resizable-panels API methods: We dont want the collapse/expand
calls to conflict with each other. See the comments in the code for more
information.

* Introduce a base class for collapse behaviour logic

Behaviours should extend this class to describe when the panel should
automatically collapse and expand.

* Add the window resize collapse behaviour

* Create a central file from which to export all behaviours

* Add a class to orchestrate the collapse behaviours

ResizerViewModel will only have a dependency on this class.

* Collapse panel on app start if necessary

For eg, if the app is started with a small window width, the panel should be
collapsed.

* Wire auto collapse code into the viewmodel

* Write jest tests

* Fix e2e tests

* Fix lint error

* Fix e2e test failures

* Expand the panel before taking screenshot

Fixes incorrect narrow screenshots in RTE.spec.ts and CIDER.spec.ts

* Make comments consistent

* Move tests from jest to vitest

* Fix lint errors

* Improve comment

* Remove variable

* Remove mock

* Fix comment formatting

apps/web/playwright/e2e/composer/CIDER.spec.ts

@@ -85,6 +85,9 @@ test.describe("Composer", () => {
         test("renders in narrow viewports", { tag: "@screenshot" }, async ({ page, bot, app }) => {
             // Shrink the viewport
             await page.setViewportSize({ width: 500, height: 1080 });
+            // Shrinking the viewport will collapse the left-panel, so manually expand it.
+            await app.resizeLeftPanel(150);
+            // Now take the screenshot
             await expect(app.getComposer()).toMatchScreenshot("narrow.png");
         });
 

apps/web/playwright/e2e/composer/RTE.spec.ts

@@ -224,6 +224,9 @@ test.describe("Composer", () => {
             test("renders in narrow viewports", { tag: "@screenshot" }, async ({ page, bot, app }) => {
                 // Shrink the viewport
                 await page.setViewportSize({ width: 750, height: 1080 });
+                // Shrinking the viewport will collapse the left-panel, so manually expand it.
+                await app.resizeLeftPanel(150);
+                // Now take the screenshot
                 await expect(page.locator(".mx_MessageComposer_wrapper")).toMatchScreenshot("narrow.png");
             });
         });

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts

@@ -11,6 +11,10 @@ import { test, expect } from "../../../element-web-test";
 import { getRoomListView } from "./utils";
 
 test.describe("Room list panel", () => {
+    test.use({
+        displayName: "Eve",
+    });
+
     test.beforeEach(async ({ page, app, user }) => {
         // The toasts are displayed above the search section
         await rejectToast(page, "Verify this device");
@@ -36,8 +40,7 @@ test.describe("Room list panel", () => {
         test.use({ lockLeftPanelWidth: false });
         test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
             await page.setViewportSize({ width: 575, height: 600 });
-            const roomListPanel = getRoomListView(page);
-            await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png");
+            await expect(page).toMatchScreenshot("room-list-panel-smallscreen.png");
         });
     });
 });