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");
             });
         });