Refactor and redesign user menu (#32812)

* Initial quick settings menu

* Total refactor

* Quick design fixes.

* Refactor to use a view model.

* Remove unused strings

* Apply label

* Refactor naming

* Fixup most tests

* Remove specific theming for old user menu

* prettier

* Lots of cleanup

* Allow overriding the menu classes

* update snap

* Oops translations

* tidy

* Cleanup guest flows.

* Copyrights

* Remove unused classname

* Match guest view to designs

* Add guest screenshots

* Update guests

* snapshot

* Cleanup

* fix import

* Update tests

* More sceenshot fixes

* update collapsed

* move statements to prevent flake

* update snap

* Kick it along

* Click the room list

* Fiddle with the room video list.

* More screenshot adjustments

* fix imports

* fix another import

* Update snaps

* update snaps

* Fix snap flakes

* Refactor to move actions to view component, and callbacks to Actions

* Cleanup

* Cleanup

* Cleanup

* invert auth

* More bits

* fix

* Change md buttons to sm

* Try to assemble the snapshot component of the house of cards

* Consistent newlines between tests

* Update snapshot

Not sure why this was like this, this seems consistet for a logged in user

* Update snapshot

again these seem sensible for a guest

* Remove test

I don't really understand why the thing it asserts matters, so I'm removing
it for now.

* Update snapshot

* screenshot

* Don't show profile picture for guests

I'm not really sure what it meant for this interface to have a
property with a default value, so I've removed it and added the
property to the view model.

* Show avatar in story

* update snapshots for showAvatar

* Update screenshots

& hopefully make hover consistent in one

* Use outline home icon

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>

apps/web/playwright/e2e/crypto/logout.spec.ts

@@ -23,7 +23,9 @@ test.describe("Logout tests", () => {
         await sendMessageInCurrentRoom(page, "Hello secret world");
 
         const locator = await app.settings.openUserMenu();
-        await locator.getByRole("menuitem", { name: "Remove this device", exact: true }).click();
+
+        await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
+        await page.getByRole("button", { name: "Remove this device", exact: true }).click();
 
         const currentDialogLocator = page.locator(".mx_Dialog");
 
@@ -41,7 +43,8 @@ test.describe("Logout tests", () => {
         await sendMessageInCurrentRoom(page, "Hello secret world");
 
         const locator = await app.settings.openUserMenu();
-        await locator.getByRole("menuitem", { name: "Remove this device", exact: true }).click();
+        await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
+        await page.getByRole("button", { name: "Remove this device", exact: true }).click();
 
         const currentDialogLocator = page.locator(".mx_Dialog");
 
@@ -54,7 +57,8 @@ test.describe("Logout tests", () => {
         await sendMessageInCurrentRoom(page, "Hello public world!");
 
         const locator = await app.settings.openUserMenu();
-        await locator.getByRole("menuitem", { name: "Remove this device", exact: true }).click();
+        await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
+        await page.getByRole("button", { name: "Remove this device", exact: true }).click();
 
         // Should have logged out directly
         await expect(page.getByRole("heading", { name: "Be in your element" })).toBeVisible();

apps/web/playwright/e2e/crypto/utils.ts

@@ -252,7 +252,9 @@ export async function logIntoElementAndVerify(page: Page, credentials: Credentia
  */
 export async function logOutOfElement(page: Page, discardKeys: boolean = false) {
     await page.getByRole("button", { name: "User menu" }).click();
-    await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Remove this device" }).click();
+
+    await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
+    await page.getByRole("button", { name: "Remove this device" }).click();
     if (discardKeys) {
         await page.getByRole("button", { name: "I don't want my encrypted messages" }).click();
     } else {