Tweak new user menu design (#33444)

* Tweak new user menu design

* Update screenshots

* More screenshots

* Add story with no avatar

* add story to test

* Expand the menu so it actually shows what it's supposed to show

* Use the open parameter

which is the param to open the menu

* snapshot

* Add test for normal open menu version

* Move menu to the right of the avatar

and make it appear on top of the display name

* Fix user menu layout

* screenshots

* snapshot

* screenshots

* more screenshots

* Shift toasts to the left slightly

So they completely cover the display name of the user menu when
it's expanded. Also down slightly so they're level with the user menu.

* Tweak toast border radius & position

to match & sit on top of the user menu

* Close toasts in cider tests

* Only close the toast if it's actually there

* Fix some toasts to be dismissed & update screenshots

more to come though

* Make closeKeyStorageToast actually optional

* Fix some more toasts & races

* Screenshots again again (again)

* More screenshots

* Convert to rejectToast

* Fix toast rejectors to not wait and update screenshots

* Apparently 1ms is not long enough

apps/web/playwright/pages/ElementAppPage.ts

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { type Locator, type Page, expect } from "@playwright/test";
 import { readFile } from "node:fs/promises";
 import { basename } from "node:path";
-import { rejectToast } from "@element-hq/element-web-playwright-common";
+import { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
 
 import { Settings } from "./settings";
 import { Client } from "./client";
@@ -96,6 +96,17 @@ export class ElementAppPage {
      * @param name The exact room name to find and click on/open.
      */
     public async viewRoomByName(name: string): Promise<void> {
+        // Make sure the room list is actually present before we try closing toasts,
+        // otherwise we may race with page loading
+        await this.page.getByTestId("room-list").waitFor();
+
+        await rejectToastIfExists(this.page, "Verify this device", { timeout: 50 });
+        const keyStorageToastRejected = await rejectToastIfExists(this.page, "Turn on key storage", { timeout: 50 });
+        if (keyStorageToastRejected) {
+            await this.page.getByRole("button", { name: "Yes, dismiss" }).click();
+        }
+        await rejectToastIfExists(this.page, "Notifications", { timeout: 50 });
+
         // We get the room list by test-id which is a listbox and matching title=name
         return this.page.getByTestId("room-list").locator(`[title="${name}"]`).first().click();
     }
@@ -363,7 +374,7 @@ export class ElementAppPage {
      * Dismiss the "Turn on key storage" toast.
      */
     public async closeKeyStorageToast() {
-        await rejectToast(this.page, "Turn on key storage");
+        await this.closeToast("Turn on key storage", "Dismiss");
         await this.page.getByRole("button", { name: "Yes, dismiss" }).click();
     }