Default the room header to on (#12803)

* Default the room header to on

* Refactor code into helper method

Add a method to open/close the room info panel and use it everywhere.

* Fix broken tests, update snapshots and screenshots

* Update room header tests to make sense with the new header

playwright/e2e/app-loading/stored-credentials.spec.ts

@@ -48,7 +48,7 @@ test("Shows the last known page on reload", async ({ pageWithCredentials: page }
 
     // Check that the room reloaded
     await expect(page).toHaveURL(/\/#\/room\//);
-    await expect(page.locator(".mx_LegacyRoomHeader")).toContainText("Test Room");
+    await expect(page.locator(".mx_RoomHeader")).toContainText("Test Room");
 });
 
 test("Room link correctly loads a room view", async ({ pageWithCredentials: page }) => {

playwright/e2e/chat-export/html-export.spec.ts

@@ -108,7 +108,7 @@ test.describe("HTML Export", () => {
             page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("Testing 9"),
         ).toBeVisible();
 
-        await page.getByRole("button", { name: "Room info" }).click();
+        await app.toggleRoomInfoPanel();
         await page.getByRole("menuitem", { name: "Export Chat" }).click();
 
         const downloadPromise = page.waitForEvent("download");

playwright/e2e/create-room/create-room.spec.ts

@@ -36,7 +36,7 @@ test.describe("Create Room", () => {
         await dialog.getByRole("button", { name: "Create room" }).click();
 
         await expect(page).toHaveURL(/\/#\/room\/#test-room-1:localhost/);
-        const header = page.locator(".mx_LegacyRoomHeader");
+        const header = page.locator(".mx_RoomHeader");
         await expect(header).toContainText(name);
         await expect(header).toContainText(topic);
     });

playwright/e2e/crypto/crypto.spec.ts

@@ -224,7 +224,7 @@ test.describe("Cryptography", function () {
         await checkDMRoom(page);
         const bobRoomId = await bobJoin(page, bob);
         await testMessages(page, bob, bobRoomId);
-        await verify(page, bob);
+        await verify(app, bob);
 
         // Assert that verified icon is rendered
         await page.getByTestId("base-card-back-button").click();
@@ -246,6 +246,6 @@ test.describe("Cryptography", function () {
 
         // we need to have a room with the other user present, so we can open the verification panel
         await createSharedRoomWithUser(app, bob.credentials.userId);
-        await verify(page, bob);
+        await verify(app, bob);
     });
 });

playwright/e2e/crypto/event-shields.spec.ts

@@ -104,7 +104,7 @@ test.describe("Cryptography", function () {
             await expect(lastTileE2eIcon).not.toBeVisible();
 
             /* Now verify Bob */
-            await verify(page, bob);
+            await verify(app, bob);
 
             /* Existing message should be updated when user is verified. */
             await expect(last).toContainText("test encrypted 1");
@@ -222,7 +222,7 @@ test.describe("Cryptography", function () {
             await bobSecondDevice.prepareClient();
 
             // verify Bob
-            await verify(page, bob);
+            await verify(app, bob);
 
             // bob sends a valid event
             const testEvent = await bob.sendMessage(testRoomId, "Hoo!");

playwright/e2e/crypto/utils.ts

@@ -329,15 +329,6 @@ export async function createRoom(page: Page, roomName: string, isEncrypted: bool
     }
 }
 
-/**
- * Open the room info panel and return the panel element
- * @param page - the page to use
- */
-export const openRoomInfo = async (page: Page) => {
-    await page.getByRole("button", { name: "Room info" }).click();
-    return page.locator(".mx_RightPanel");
-};
-
 /**
  * Configure the given MatrixClient to auto-accept any invites
  * @param client - the client to configure
@@ -357,10 +348,11 @@ export async function autoJoin(client: Client) {
  * @param page - the page to use
  * @param bob - the user to verify
  */
-export const verify = async (page: Page, bob: Bot) => {
+export const verify = async (app: ElementAppPage, bob: Bot) => {
+    const page = app.page;
     const bobsVerificationRequestPromise = waitForVerificationRequest(bob);
 
-    const roomInfo = await openRoomInfo(page);
+    const roomInfo = await app.toggleRoomInfoPanel();
     await page.locator(".mx_RightPanelTabs").getByText("People").click();
     await roomInfo.getByText("Bob").click();
     await roomInfo.getByRole("button", { name: "Verify" }).click();

playwright/e2e/file-upload/image-upload.spec.ts

@@ -38,8 +38,8 @@ test.describe("Image Upload", () => {
             .locator(".mx_MessageComposer_actions input[type='file']")
             .setInputFiles("playwright/sample-files/riot.png");
 
-        expect(page.getByRole("button", { name: "Upload" })).toBeEnabled();
+        await expect(page.getByRole("button", { name: "Upload" })).toBeEnabled();
-        expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled();
+        await expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled();
-        expect(page).toMatchScreenshot("image-upload-preview.png");
+        await expect(page).toMatchScreenshot("image-upload-preview.png");
     });
 });

playwright/e2e/integration-manager/get-openid-token.spec.ts

@@ -118,8 +118,8 @@ test.describe("Integration Manager: Get OpenID Token", () => {
         await app.viewRoomByName(ROOM_NAME);
     });
 
-    test("should successfully obtain an openID token", async ({ page }) => {
+    test("should successfully obtain an openID token", async ({ page, app }) => {
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl);
 
         const iframe = page.frameLocator(`iframe[src*="${integrationManagerUrl}"]`);

playwright/e2e/integration-manager/kick.spec.ts

@@ -167,7 +167,7 @@ test.describe("Integration Manager: Kick", () => {
         await app.client.inviteUser(room.roomId, targetUser.credentials.userId);
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, true);
@@ -185,7 +185,7 @@ test.describe("Integration Manager: Kick", () => {
             },
         });
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
@@ -197,7 +197,7 @@ test.describe("Integration Manager: Kick", () => {
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
         await targetUser.leave(room.roomId);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
@@ -209,7 +209,7 @@ test.describe("Integration Manager: Kick", () => {
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
         await app.client.ban(room.roomId, targetUser.credentials.userId);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
@@ -218,7 +218,7 @@ test.describe("Integration Manager: Kick", () => {
     test("should no-op if the target was never a room member", async ({ page, app, bot: targetUser, room }) => {
         await app.viewRoomByName(ROOM_NAME);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);

playwright/e2e/integration-manager/read_events.spec.ts

@@ -142,7 +142,7 @@ test.describe("Integration Manager: Read Events", () => {
 
         // Send a state event
         const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey);
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);
@@ -162,7 +162,7 @@ test.describe("Integration Manager: Read Events", () => {
 
         // Send a state event
         const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey);
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);
@@ -196,7 +196,7 @@ test.describe("Integration Manager: Read Events", () => {
             app.client.sendStateEvent(room.roomId, eventType, eventContent3, stateKey3),
         ]);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(
@@ -217,11 +217,11 @@ test.describe("Integration Manager: Read Events", () => {
         await expect(iframe.locator("#message-response")).toContainText(`"content":${JSON.stringify(eventContent3)}`);
     });
 
-    test("should fail to read an event type which is not allowed", async ({ page, room }) => {
+    test("should fail to read an event type which is not allowed", async ({ page, app, room }) => {
         const eventType = "com.example.event";
         const stateKey = "";
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);

playwright/e2e/integration-manager/send_event.spec.ts

@@ -137,7 +137,7 @@ test.describe("Integration Manager: Send Event", () => {
         );
 
         await app.viewRoomByName(ROOM_NAME);
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
     });
 
     test("should send a state event", async ({ page, app, room }) => {

playwright/e2e/integration-manager/utils.ts

@@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import type { Page } from "@playwright/test";
+import type { ElementAppPage } from "../../pages/ElementAppPage";
 
-export async function openIntegrationManager(page: Page) {
+export async function openIntegrationManager(app: ElementAppPage) {
-    await page.getByRole("button", { name: "Room info" }).click();
+    const { page } = app;
+    await app.toggleRoomInfoPanel();
     await page
         .locator(".mx_RoomSummaryCard_appsGroup")
         .getByRole("button", { name: "Add widgets, bridges & bots" })

playwright/e2e/invite/invite-dialog.spec.ts

@@ -36,7 +36,7 @@ test.describe("Invite dialog", function () {
         await expect(page.getByText("Hanako created and configured the room.")).toBeVisible();
 
         // Open the room info panel
-        await page.getByRole("button", { name: "Room info" }).click();
+        await app.toggleRoomInfoPanel();
 
         await page.locator(".mx_BaseCard").getByRole("menuitem", { name: "Invite" }).click();
 
@@ -114,12 +114,9 @@ test.describe("Invite dialog", function () {
 
         // Assert that the hovered user name on invitation UI does not have background color
         // TODO: implement the test on room-header.spec.ts
-        const roomHeader = page.locator(".mx_LegacyRoomHeader");
+        const roomHeader = page.locator(".mx_RoomHeader");
-        await roomHeader.locator(".mx_LegacyRoomHeader_name--textonly").hover();
+        await roomHeader.locator(".mx_RoomHeader_heading").hover();
-        await expect(roomHeader.locator(".mx_LegacyRoomHeader_name--textonly")).toHaveCSS(
+        await expect(roomHeader.locator(".mx_RoomHeader_heading")).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
-            "background-color",
-            "rgba(0, 0, 0, 0)",
-        );
 
         // Send a message to invite the bots
         const composer = app.getComposer().locator("[contenteditable]");

playwright/e2e/knock/create-knock-room.spec.ts

@@ -31,7 +31,7 @@ test.describe("Create Knock Room", () => {
         await dialog.getByRole("option", { name: "Ask to join" }).click();
         await dialog.getByRole("button", { name: "Create room" }).click();
 
-        await expect(page.locator(".mx_LegacyRoomHeader").getByText("Cybersecurity")).toBeVisible();
+        await expect(page.locator(".mx_RoomHeader").getByText("Cybersecurity")).toBeVisible();
 
         const urlHash = await page.evaluate(() => window.location.hash);
         const roomId = urlHash.replace("#/room/", "");
@@ -48,7 +48,7 @@ test.describe("Create Knock Room", () => {
         await dialog.getByRole("textbox", { name: "Name" }).fill("Cybersecurity");
         await dialog.getByRole("button", { name: "Create room" }).click();
 
-        await expect(page.locator(".mx_LegacyRoomHeader").getByText("Cybersecurity")).toBeVisible();
+        await expect(page.locator(".mx_RoomHeader").getByText("Cybersecurity")).toBeVisible();
 
         const urlHash = await page.evaluate(() => window.location.hash);
         const roomId = urlHash.replace("#/room/", "");
@@ -74,7 +74,7 @@ test.describe("Create Knock Room", () => {
         await dialog.getByText("Make this room visible in the public room directory.").click();
         await dialog.getByRole("button", { name: "Create room" }).click();
 
-        await expect(page.locator(".mx_LegacyRoomHeader").getByText("Cybersecurity")).toBeVisible();
+        await expect(page.locator(".mx_RoomHeader").getByText("Cybersecurity")).toBeVisible();
 
         const urlHash = await page.evaluate(() => window.location.hash);
         const roomId = urlHash.replace("#/room/", "");

playwright/e2e/lazy-loading/lazy-loading.spec.ts

@@ -78,8 +78,9 @@ test.describe("Lazy Loading", () => {
         }
     }
 
-    async function openMemberlist(page: Page): Promise<void> {
+    async function openMemberlist(app: ElementAppPage): Promise<void> {
-        await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Room info" }).click();
+        await app.toggleRoomInfoPanel();
+        const { page } = app;
         await page.locator(".mx_RightPanelTabs").getByText("People").click();
     }
 
@@ -123,7 +124,7 @@ test.describe("Lazy Loading", () => {
         // Alice should see 2 messages from every charly with the correct display name
         await checkPaginatedDisplayNames(app, charly1to5);
 
-        await openMemberlist(page);
+        await openMemberlist(app);
         await checkMemberList(page, charly1to5);
         await joinCharliesWhileAliceIsOffline(page, app, charly6to10);
         await checkMemberList(page, charly6to10);

playwright/e2e/one-to-one-chat/one-to-one-chat.spec.ts

@@ -35,10 +35,10 @@ test.describe("1:1 chat room", () => {
         await page.goto(`/#/user/${user2.userId}?action=chat`);
     });
 
-    test("should open new 1:1 chat room after leaving the old one", async ({ page, user2 }) => {
+    test("should open new 1:1 chat room after leaving the old one", async ({ page, app, user2 }) => {
         // leave 1:1 chat room
-        await page.locator(".mx_LegacyRoomHeader_nametext").getByText(user2.displayName).click();
+        await app.toggleRoomInfoPanel();
-        await page.getByRole("menuitem", { name: "Leave" }).click();
+        await page.getByRole("menuitem", { name: "Leave room" }).click();
         await page.getByRole("button", { name: "Leave" }).click();
 
         // wait till the room was left
@@ -49,6 +49,6 @@ test.describe("1:1 chat room", () => {
 
         // open new 1:1 chat room
         await page.goto(`/#/user/${user2.userId}?action=chat`);
-        await expect(page.locator(".mx_LegacyRoomHeader_nametext").getByText(user2.displayName)).toBeVisible();
+        await expect(page.locator(".mx_RoomHeader_heading").getByText(user2.displayName)).toBeVisible();
     });
 });

playwright/e2e/polls/pollHistory.spec.ts

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { test, expect } from "../../element-web-test";
-import type { Page } from "@playwright/test";
 import type { Bot } from "../../pages/bot";
 import type { Client } from "../../pages/client";
+import { ElementAppPage } from "../../pages/ElementAppPage";
 
 test.describe("Poll history", () => {
     type CreatePollOptions = {
@@ -66,8 +66,9 @@ test.describe("Poll history", () => {
         });
     };
 
-    async function openPollHistory(page: Page): Promise<void> {
+    async function openPollHistory(app: ElementAppPage): Promise<void> {
-        await page.getByRole("button", { name: "Room info" }).click();
+        const { page } = app;
+        await app.toggleRoomInfoPanel();
         await page.locator(".mx_RoomSummaryCard").getByRole("menuitem", { name: "Poll history" }).click();
     }
 
@@ -116,7 +117,7 @@ test.describe("Poll history", () => {
         await botVoteForOption(bot, roomId, pollId2, pollParams1.options[1].id);
         await endPoll(bot, roomId, pollId2);
 
-        await openPollHistory(page);
+        await openPollHistory(app);
 
         // these polls are also in the timeline
         // focus on the poll history dialog

playwright/e2e/presence/presence.spec.ts

@@ -59,7 +59,7 @@ test.describe("Presence tests", () => {
             );
             await app.client.createRoom({}); // trigger sync
 
-            await page.getByRole("button", { name: "Room info" }).click();
+            await app.toggleRoomInfoPanel();
             await page.locator(".mx_RightPanel").getByText("People").click();
             await expect(page.locator(".mx_EntityTile_unreachable")).toContainText("Bob");
             await expect(page.locator(".mx_EntityTile_unreachable")).toContainText("User's server unreachable");

playwright/e2e/read-receipts/index.ts

@@ -402,7 +402,7 @@ class Helpers {
      * Close the threads panel.
      */
     async closeThreadsPanel() {
-        await this.page.locator(".mx_LegacyRoomHeader").getByLabel("Threads").click();
+        await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
         await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible();
     }
 
@@ -410,7 +410,7 @@ class Helpers {
      * Return to the list of threads, given we are viewing a single thread.
      */
     async backToThreadsList() {
-        await this.page.locator(".mx_LegacyRoomHeader").getByLabel("Threads").click();
+        await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
     }
 
     /**
@@ -530,12 +530,11 @@ class Helpers {
         // whether it's open or not - wait here to give it a chance to settle.
         await this.page.waitForTimeout(200);
 
-        const ariaCurrent = await this.page.getByTestId("threadsButton").getAttribute("aria-current");
-        if (ariaCurrent !== "true") {
-            await this.page.getByTestId("threadsButton").click();
-        }
-
         const threadPanel = this.page.locator(".mx_ThreadPanel");
+        const isThreadPanelOpen = (await threadPanel.count()) !== 0;
+        if (!isThreadPanelOpen) {
+            await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
+        }
         await expect(threadPanel).toBeVisible();
         await threadPanel.evaluate(($panel) => {
             const $button = $panel.querySelector<HTMLElement>('[data-testid="base-card-back-button"]');

playwright/e2e/right-panel/right-panel.spec.ts

@@ -63,9 +63,9 @@ test.describe("RightPanel", () => {
             await app.closeDialog();
 
             // Close and reopen the right panel to render the room address
-            await page.getByRole("button", { name: "Room info" }).click();
+            await app.toggleRoomInfoPanel();
             await expect(page.locator(".mx_RightPanel")).not.toBeVisible();
-            await page.getByRole("button", { name: "Room info" }).click();
+            await app.toggleRoomInfoPanel();
 
             await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("with-name-and-address.png");
         });

playwright/e2e/right-panel/utils.ts

@@ -20,7 +20,7 @@ import { ElementAppPage } from "../../pages/ElementAppPage";
 
 export async function viewRoomSummaryByName(page: Page, app: ElementAppPage, name: string): Promise<void> {
     await app.viewRoomByName(name);
-    await page.getByRole("button", { name: "Room info" }).click();
+    await app.toggleRoomInfoPanel();
     return checkRoomSummaryCard(page, name);
 }
 

playwright/e2e/room/room-header.spec.ts

@@ -18,7 +18,6 @@ import { Page } from "@playwright/test";
 
 import { test, expect } from "../../element-web-test";
 import { ElementAppPage } from "../../pages/ElementAppPage";
-import type { Container } from "../../../src/stores/widgets/types";
 
 test.describe("Room Header", () => {
     test.use({
@@ -33,24 +32,28 @@ test.describe("Room Header", () => {
             await app.client.createRoom({ name: "Test Room" });
             await app.viewRoomByName("Test Room");
 
-            const header = page.locator(".mx_LegacyRoomHeader");
+            const header = page.locator(".mx_RoomHeader");
-            // Names (aria-label) of every button rendered on mx_LegacyRoomHeader by default
-            const expectedButtonNames = [
-                "Room options", // The room name button next to the room avatar, which renders dropdown menu on click
-                "Voice call",
-                "Video call",
-                "Search",
-                "Threads",
-                "Notifications",
-                "Room info",
-            ];
 
-            // Assert they are found and visible
+            // There's two room info button - the header itself and the i button
-            for (const name of expectedButtonNames) {
+            const infoButtons = header.getByRole("button", { name: "Room info" });
-                await expect(header.getByRole("button", { name })).toBeVisible();
+            await expect(infoButtons).toHaveCount(2);
-            }
+            await expect(infoButtons.first()).toBeVisible();
+            await expect(infoButtons.last()).toBeVisible();
 
-            // Assert that just those seven buttons exist on mx_LegacyRoomHeader by default
+            // Memberlist button
+            await expect(header.locator(".mx_FacePile")).toBeVisible();
+
+            // There should be both a voice and a video call button
+            // but they'll be disabled
+            const callButtons = header.getByRole("button", { name: "There's no one here to call" });
+            await expect(callButtons).toHaveCount(2);
+            await expect(callButtons.first()).toBeVisible();
+            await expect(callButtons.last()).toBeVisible();
+
+            await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
+            await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();
+
+            // Assert that there are six buttons in total
             await expect(header.getByRole("button")).toHaveCount(7);
 
             await expect(header).toMatchScreenshot("room-header.png");
@@ -67,14 +70,15 @@ test.describe("Room Header", () => {
             await app.client.createRoom({ name: LONG_ROOM_NAME });
             await app.viewRoomByName(LONG_ROOM_NAME);
 
-            const header = page.locator(".mx_LegacyRoomHeader");
+            const header = page.locator(".mx_RoomHeader");
             // Wait until the room name is set
-            await expect(page.locator(".mx_LegacyRoomHeader_nametext").getByText(LONG_ROOM_NAME)).toBeVisible();
+            await expect(page.locator(".mx_RoomHeader_heading").getByText(LONG_ROOM_NAME)).toBeVisible();
 
             // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed
             // Note these assertions do not check the size of mx_LegacyRoomHeader_name button
-            const buttons = page.locator(".mx_LegacyRoomHeader_button");
+            const buttons = header.locator(".mx_Flex").getByRole("button");
-            await expect(buttons).toHaveCount(6);
+            await expect(buttons).toHaveCount(5);
+
             for (const button of await buttons.all()) {
                 await expect(button).toBeVisible();
                 await expect(button).toHaveCSS("height", "32px");
@@ -83,44 +87,6 @@ test.describe("Room Header", () => {
 
             await expect(header).toMatchScreenshot("room-header-long-name.png");
         });
-
-        test("should have buttons highlighted by being clicked", async ({ page, app, user }) => {
-            await app.client.createRoom({ name: "Test Room" });
-            await app.viewRoomByName("Test Room");
-
-            const header = page.locator(".mx_LegacyRoomHeader");
-            // Check these buttons
-            const buttonsHighlighted = ["Threads", "Notifications", "Room info"];
-
-            for (const name of buttonsHighlighted) {
-                await header.getByRole("button", { name: name }).click(); // Highlight the button
-            }
-
-            await expect(header).toMatchScreenshot("room-header-highlighted.png");
-        });
-    });
-
-    test.describe("with feature_pinning enabled", () => {
-        test.use({ labsFlags: ["feature_pinning"] });
-
-        test("should render the pin button for pinned messages card", async ({ page, app, user }) => {
-            await app.client.createRoom({ name: "Test Room" });
-            await app.viewRoomByName("Test Room");
-
-            const composer = app.getComposer().locator("[contenteditable]");
-            await composer.fill("Test message");
-            await composer.press("Enter");
-
-            const lastTile = page.locator(".mx_EventTile_last");
-            await lastTile.hover();
-            await lastTile.getByRole("button", { name: "Options" }).click();
-
-            await page.getByRole("menuitem", { name: "Pin" }).click();
-
-            await expect(
-                page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Pinned messages" }),
-            ).toBeVisible();
-        });
     });
 
     test.describe("with a video room", () => {
@@ -141,30 +107,27 @@ test.describe("Room Header", () => {
         test.describe("and with feature_notifications enabled", () => {
             test.use({ labsFlags: ["feature_video_rooms", "feature_notifications"] });
 
-            test("should render buttons for room options, beta pill, invite, chat, and room info", async ({
+            test("should render buttons for chat, room info, threads and facepile", async ({ page, app, user }) => {
-                page,
-                app,
-                user,
-            }) => {
                 await createVideoRoom(page, app);
 
-                const header = page.locator(".mx_LegacyRoomHeader");
+                const header = page.locator(".mx_RoomHeader");
-                // Names (aria-label) of the buttons on the video room header
-                const expectedButtonNames = [
-                    "Room options",
-                    "Video rooms are a beta feature Click for more info", // Beta pill
-                    "Invite",
-                    "Chat",
-                    "Room info",
-                ];
 
-                // Assert they are found and visible
+                // There's two room info button - the header itself and the i button
-                for (const name of expectedButtonNames) {
+                const infoButtons = header.getByRole("button", { name: "Room info" });
-                    await expect(header.getByRole("button", { name })).toBeVisible();
+                await expect(infoButtons).toHaveCount(2);
-                }
+                await expect(infoButtons.first()).toBeVisible();
+                await expect(infoButtons.last()).toBeVisible();
+
+                // Facepile
+                await expect(header.locator(".mx_FacePile")).toBeVisible();
+
+                // Chat, Threads and Notification buttons
+                await expect(header.getByRole("button", { name: "Chat" })).toBeVisible();
+                await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
+                await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();
 
                 // Assert that there is not a button except those buttons
-                await expect(header.getByRole("button")).toHaveCount(7);
+                await expect(header.getByRole("button")).toHaveCount(6);
 
                 await expect(header).toMatchScreenshot("room-header-video-room.png");
             });
@@ -177,7 +140,7 @@ test.describe("Room Header", () => {
         }) => {
             await createVideoRoom(page, app);
 
-            await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Chat" }).click();
+            await page.locator(".mx_RoomHeader").getByRole("button", { name: "Chat" }).click();
 
             // Assert that the call view is still visible
             await expect(page.locator(".mx_CallView")).toBeVisible();
@@ -188,114 +151,4 @@ test.describe("Room Header", () => {
             ).toBeVisible();
         });
     });
-
-    test.describe("with a widget", () => {
-        const ROOM_NAME = "Test Room with a widget";
-        const WIDGET_ID = "fake-widget";
-        const WIDGET_HTML = `
-            <html lang="en">
-                <head>
-                    <title>Fake Widget</title>
-                </head>
-                <body>
-                    Hello World
-                </body>
-            </html>
-        `;
-
-        test.beforeEach(async ({ page, app, user, webserver }) => {
-            const widgetUrl = webserver.start(WIDGET_HTML);
-            const roomId = await app.client.createRoom({ name: ROOM_NAME });
-
-            // setup widget via state event
-            await app.client.evaluate(
-                async (matrixClient, { roomId, widgetUrl, id }) => {
-                    await matrixClient.sendStateEvent(
-                        roomId,
-                        "im.vector.modular.widgets",
-                        {
-                            id,
-                            creatorUserId: "somebody",
-                            type: "widget",
-                            name: "widget",
-                            url: widgetUrl,
-                        },
-                        id,
-                    );
-                    await matrixClient.sendStateEvent(
-                        roomId,
-                        "io.element.widgets.layout",
-                        {
-                            widgets: {
-                                [id]: {
-                                    container: "top" as Container,
-                                    index: 1,
-                                    width: 100,
-                                    height: 0,
-                                },
-                            },
-                        },
-                        "",
-                    );
-                },
-                {
-                    roomId,
-                    widgetUrl,
-                    id: WIDGET_ID,
-                },
-            );
-
-            // open the room
-            await app.viewRoomByName(ROOM_NAME);
-        });
-
-        test("should highlight the apps button", async ({ page, app, user }) => {
-            // Assert that AppsDrawer is rendered
-            await expect(page.locator(".mx_AppsDrawer")).toBeVisible();
-
-            const header = page.locator(".mx_LegacyRoomHeader");
-            // Assert that "Hide Widgets" button is rendered and aria-checked is set to true
-            await expect(header.getByRole("button", { name: "Hide Widgets" })).toHaveAttribute("aria-checked", "true");
-
-            await expect(header).toMatchScreenshot("room-header-with-apps-button-highlighted.png");
-        });
-
-        test("should support hiding a widget", async ({ page, app, user }) => {
-            await expect(page.locator(".mx_AppsDrawer")).toBeVisible();
-
-            const header = page.locator(".mx_LegacyRoomHeader");
-            // Click the apps button to hide AppsDrawer
-            await header.getByRole("button", { name: "Hide Widgets" }).click();
-
-            // Assert that "Show widgets" button is rendered and aria-checked is set to false
-            await expect(header.getByRole("button", { name: "Show Widgets" })).toHaveAttribute("aria-checked", "false");
-
-            // Assert that AppsDrawer is not rendered
-            await expect(page.locator(".mx_AppsDrawer")).not.toBeVisible();
-
-            await expect(header).toMatchScreenshot("room-header-with-apps-button-not-highlighted.png");
-        });
-    });
-
-    test.describe("with encryption", () => {
-        test("should render the E2E icon and the buttons", async ({ page, app, user }) => {
-            // Create an encrypted room
-            await app.client.createRoom({
-                name: "Test Encrypted Room",
-                initial_state: [
-                    {
-                        type: "m.room.encryption",
-                        state_key: "",
-                        content: {
-                            algorithm: "m.megolm.v1.aes-sha2",
-                        },
-                    },
-                ],
-            });
-            await app.viewRoomByName("Test Encrypted Room");
-
-            const header = page.locator(".mx_LegacyRoomHeader");
-            await expect(header).toMatchScreenshot("encrypted-room-header.png");
-        });
-    });
 });

playwright/e2e/spotlight/spotlight.spec.ts

@@ -21,7 +21,7 @@ import type { Locator, Page } from "@playwright/test";
 import type { ElementAppPage } from "../../pages/ElementAppPage";
 
 function roomHeaderName(page: Page): Locator {
-    return page.locator(".mx_LegacyRoomHeader_nametext");
+    return page.locator(".mx_RoomHeader_heading");
 }
 
 async function startDM(app: ElementAppPage, page: Page, name: string): Promise<void> {

playwright/e2e/threads/threads.spec.ts

@@ -252,7 +252,8 @@ test.describe("Threads", () => {
         await expect(locator.locator(".mx_ThreadSummary_content").getByText("How are things?")).toBeAttached();
 
         locator = page.getByRole("button", { name: "Threads" });
-        await expect(locator).toHaveClass(/mx_LegacyRoomHeader_button--unread/); // User asserts thread list unread indicator
+        await expect(locator).toHaveAttribute("data-indicator", "default"); // User asserts thread list unread indicator
+        // await expect(locator).toHaveClass(/mx_LegacyRoomHeader_button--unread/);
         await locator.click(); // User opens thread list
 
         // User asserts thread with correct root & latest events & unread dot
@@ -495,14 +496,12 @@ test.describe("Threads", () => {
         await createThread("Hello again Mr. Bot", "Hello again Mr. User in a thread");
 
         // Open thread panel
-        await page.getByTestId("threadsButton").click();
+        await page.locator(".mx_RoomHeader").getByRole("button", { name: "Threads" }).click();
         const threadPanel = page.locator(".mx_ThreadPanel");
         await expect(
             threadPanel.locator(".mx_EventTile_last").getByText("Hello again Mr. User in a thread"),
         ).toBeVisible();
 
-        // Open threads list
-        await page.getByTestId("base-card-back-button").click();
         const rightPanel = page.locator(".mx_RightPanel");
         // Check that the threads are listed
         await expect(rightPanel.locator(".mx_EventTile").getByText("Hello Mr. User in a thread")).toBeVisible();

playwright/e2e/timeline/timeline.spec.ts

@@ -784,7 +784,7 @@ test.describe("Timeline", () => {
                 await sendEvent(app.client, room.roomId, true);
                 await page.goto(`/#/room/${room.roomId}`);
 
-                await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Search" }).click();
+                await app.toggleRoomInfoPanel();
 
                 await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").fill("Message");
                 await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").press("Enter");
@@ -809,7 +809,7 @@ test.describe("Timeline", () => {
                 await page.goto(`/#/room/${room.roomId}`);
 
                 // Open a room setting dialog
-                await page.getByRole("button", { name: "Room options" }).click();
+                await app.toggleRoomInfoPanel();
                 await page.getByRole("menuitem", { name: "Settings" }).click();
 
                 // Set a room topic to render a TextualEvent
@@ -823,9 +823,6 @@ test.describe("Timeline", () => {
                     page.getByText(`${OLD_NAME} changed the topic to "This is a room for ${stringToSearch}.".`),
                 ).toHaveClass(/mx_TextualEvent/);
 
-                // Display the room search bar
-                await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Search" }).click();
-
                 // Search the string to display both the message and TextualEvent on search results panel
                 await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").fill(stringToSearch);
                 await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").press("Enter");

playwright/pages/ElementAppPage.ts

@@ -171,4 +171,13 @@ export class ElementAppPage {
         await spotlight.open();
         return spotlight;
     }
+
+    /**
+     * Opens/closes the room info panel
+     * @returns locator to the right panel
+     */
+    public async toggleRoomInfoPanel(): Promise<Locator> {
+        await this.page.getByRole("button", { name: "Room info" }).first().click();
+        return this.page.locator(".mx_RightPanel");
+    }
 }

playwright/pages/settings.ts

@@ -91,12 +91,17 @@ export class Settings {
     }
 
     /**
-     * Open room settings (via room header menu), returns a locator to the dialog
+     * Open room settings (via room info panel), returns a locator to the dialog
      * @param tab the name of the tab to switch to after opening, optional.
      */
     public async openRoomSettings(tab?: string): Promise<Locator> {
-        await this.page.getByRole("banner").getByRole("button", { name: "Room options", exact: true }).click();
+        // Open right panel if not open
-        await this.page.locator(".mx_RoomTile_contextMenu").getByRole("menuitem", { name: "Settings" }).click();
+        const rightPanel = this.page.locator(".mx_RightPanel");
+        if ((await rightPanel.count()) === 0) {
+            await this.page.getByRole("button", { name: "Room info" }).first().click();
+        }
+        await rightPanel.getByRole("menuitem", { name: "Settings" }).click();
+
         if (tab) await this.switchTab(tab);
         return this.page.locator(".mx_Dialog").filter({ has: this.page.locator(".mx_RoomSettingsDialog") });
     }

src/settings/Settings.tsx

@@ -587,7 +587,7 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         labsGroup: LabGroup.Rooms,
         displayName: _td("labs|new_room_decoration_ui"),
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
-        default: false,
+        default: true,
         controller: new ReloadOnChangeController(),
         betaInfo: {
             title: _td("labs|new_room_decoration_ui_beta_title"),

test/components/structures/RoomView-test.tsx

@@ -524,35 +524,6 @@ describe("RoomView", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
-    describe("Peeking", () => {
-        beforeEach(() => {
-            // Make room peekable
-            room.currentState.setStateEvents([
-                new MatrixEvent({
-                    type: "m.room.history_visibility",
-                    state_key: "",
-                    content: {
-                        history_visibility: "world_readable",
-                    },
-                    room_id: room.roomId,
-                }),
-            ]);
-        });
-
-        it("should show forget room button for non-guests", async () => {
-            mocked(cli.isGuest).mockReturnValue(false);
-            await mountRoomView();
-
-            expect(screen.getByLabelText("Forget room")).toBeInTheDocument();
-        });
-
-        it("should not show forget room button for guests", async () => {
-            mocked(cli.isGuest).mockReturnValue(true);
-            await mountRoomView();
-            expect(screen.queryByLabelText("Forget room")).not.toBeInTheDocument();
-        });
-    });
-
     describe("knock rooms", () => {
         const client = createTestClient();
 

test/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -6,45 +6,140 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
     class="mx_RoomView mx_RoomView--local"
   >
     <header
-      class="mx_LegacyRoomHeader light-panel"
+      class="mx_Flex mx_RoomHeader light-panel"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
     >
-      <div
+      <button
-        class="mx_LegacyRoomHeader_wrapper"
+        aria-label="Room info"
+        class="mx_RoomHeader_infoWrapper"
+        tabindex="0"
       >
+        <span
+          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+          data-color="3"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 40px;"
+        >
+          u
+        </span>
         <div
-          class="mx_LegacyRoomHeader_avatar"
+          class="mx_Box mx_RoomHeader_info mx_Box--flex"
+          style="--mx-box-flex: 1;"
         >
           <div
-            class="mx_DecoratedRoomAvatar"
+            aria-level="1"
+            class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
+            dir="auto"
+            role="heading"
           >
+            <span
+              class="mx_RoomHeader_truncated mx_lineClamp"
+            >
+              @user:example.com
+            </span>
+          </div>
+        </div>
+      </button>
+      <div
+        class="mx_Flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Video call"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-disabled="false"
+          aria-label="Voice call"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-label="Room info"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-label="Threads"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+      </div>
+      <div
+        class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
+      >
+        <div
+          aria-label="2 members"
+          class="mx_AccessibleButton mx_FacePile"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="_stacked-avatars_mcap2_111"
+          >
+            <span
+              class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+              data-color="2"
+              data-testid="avatar-img"
+              data-type="round"
+              role="presentation"
+              style="--cpd-avatar-size: 20px;"
+            >
+              u
+            </span>
             <span
               class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
               role="presentation"
-              style="--cpd-avatar-size: 24px;"
+              style="--cpd-avatar-size: 20px;"
             >
               u
             </span>
           </div>
+          2
         </div>
-        <div
-          class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
-        >
-          <div
-            aria-level="1"
-            class="mx_LegacyRoomHeader_nametext"
-            dir="auto"
-            role="heading"
-            title="@user:example.com"
-          >
-            @user:example.com
-          </div>
-        </div>
-        <div
-          class="mx_LegacyRoomHeader_topic mx_RoomTopic"
-        />
       </div>
     </header>
     <div
@@ -81,45 +176,140 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
     class="mx_RoomView mx_RoomView--local"
   >
     <header
-      class="mx_LegacyRoomHeader light-panel"
+      class="mx_Flex mx_RoomHeader light-panel"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
     >
-      <div
+      <button
-        class="mx_LegacyRoomHeader_wrapper"
+        aria-label="Room info"
+        class="mx_RoomHeader_infoWrapper"
+        tabindex="0"
       >
+        <span
+          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+          data-color="3"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 40px;"
+        >
+          u
+        </span>
         <div
-          class="mx_LegacyRoomHeader_avatar"
+          class="mx_Box mx_RoomHeader_info mx_Box--flex"
+          style="--mx-box-flex: 1;"
         >
           <div
-            class="mx_DecoratedRoomAvatar"
+            aria-level="1"
+            class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
+            dir="auto"
+            role="heading"
           >
+            <span
+              class="mx_RoomHeader_truncated mx_lineClamp"
+            >
+              @user:example.com
+            </span>
+          </div>
+        </div>
+      </button>
+      <div
+        class="mx_Flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Video call"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-disabled="false"
+          aria-label="Voice call"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-label="Room info"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-label="Threads"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+      </div>
+      <div
+        class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
+      >
+        <div
+          aria-label="2 members"
+          class="mx_AccessibleButton mx_FacePile"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="_stacked-avatars_mcap2_111"
+          >
+            <span
+              class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+              data-color="2"
+              data-testid="avatar-img"
+              data-type="round"
+              role="presentation"
+              style="--cpd-avatar-size: 20px;"
+            >
+              u
+            </span>
             <span
               class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
               role="presentation"
-              style="--cpd-avatar-size: 24px;"
+              style="--cpd-avatar-size: 20px;"
             >
               u
             </span>
           </div>
+          2
         </div>
-        <div
-          class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
-        >
-          <div
-            aria-level="1"
-            class="mx_LegacyRoomHeader_nametext"
-            dir="auto"
-            role="heading"
-            title="@user:example.com"
-          >
-            @user:example.com
-          </div>
-        </div>
-        <div
-          class="mx_LegacyRoomHeader_topic mx_RoomTopic"
-        />
       </div>
     </header>
     <main
@@ -241,45 +431,140 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
     class="mx_RoomView mx_RoomView--local"
   >
     <header
-      class="mx_LegacyRoomHeader light-panel"
+      class="mx_Flex mx_RoomHeader light-panel"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
     >
-      <div
+      <button
-        class="mx_LegacyRoomHeader_wrapper"
+        aria-label="Room info"
+        class="mx_RoomHeader_infoWrapper"
+        tabindex="0"
       >
+        <span
+          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+          data-color="3"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 40px;"
+        >
+          u
+        </span>
         <div
-          class="mx_LegacyRoomHeader_avatar"
+          class="mx_Box mx_RoomHeader_info mx_Box--flex"
+          style="--mx-box-flex: 1;"
         >
           <div
-            class="mx_DecoratedRoomAvatar"
+            aria-level="1"
+            class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
+            dir="auto"
+            role="heading"
           >
+            <span
+              class="mx_RoomHeader_truncated mx_lineClamp"
+            >
+              @user:example.com
+            </span>
+          </div>
+        </div>
+      </button>
+      <div
+        class="mx_Flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Video call"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-disabled="false"
+          aria-label="Voice call"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-label="Room info"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-label="Threads"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+      </div>
+      <div
+        class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
+      >
+        <div
+          aria-label="2 members"
+          class="mx_AccessibleButton mx_FacePile"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="_stacked-avatars_mcap2_111"
+          >
+            <span
+              class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+              data-color="2"
+              data-testid="avatar-img"
+              data-type="round"
+              role="presentation"
+              style="--cpd-avatar-size: 20px;"
+            >
+              u
+            </span>
             <span
               class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
               role="presentation"
-              style="--cpd-avatar-size: 24px;"
+              style="--cpd-avatar-size: 20px;"
             >
               u
             </span>
           </div>
+          2
         </div>
-        <div
-          class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
-        >
-          <div
-            aria-level="1"
-            class="mx_LegacyRoomHeader_nametext"
-            dir="auto"
-            role="heading"
-            title="@user:example.com"
-          >
-            @user:example.com
-          </div>
-        </div>
-        <div
-          class="mx_LegacyRoomHeader_topic mx_RoomTopic"
-        />
       </div>
     </header>
     <main
@@ -478,52 +763,140 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
     class="mx_RoomView mx_RoomView--local"
   >
     <header
-      class="mx_LegacyRoomHeader light-panel"
+      class="mx_Flex mx_RoomHeader light-panel"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
     >
-      <div
+      <button
-        class="mx_LegacyRoomHeader_wrapper"
+        aria-label="Room info"
+        class="mx_RoomHeader_infoWrapper"
+        tabindex="0"
       >
+        <span
+          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+          data-color="3"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 40px;"
+        >
+          u
+        </span>
         <div
-          class="mx_LegacyRoomHeader_avatar"
+          class="mx_Box mx_RoomHeader_info mx_Box--flex"
+          style="--mx-box-flex: 1;"
         >
           <div
-            class="mx_DecoratedRoomAvatar"
+            aria-level="1"
+            class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
+            dir="auto"
+            role="heading"
           >
+            <span
+              class="mx_RoomHeader_truncated mx_lineClamp"
+            >
+              @user:example.com
+            </span>
+          </div>
+        </div>
+      </button>
+      <div
+        class="mx_Flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Video call"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-disabled="false"
+          aria-label="Voice call"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-label="Room info"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+        <button
+          aria-label="Threads"
+          class="_icon-button_bh2qc_17"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <div />
+          </div>
+        </button>
+      </div>
+      <div
+        class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
+      >
+        <div
+          aria-label="2 members"
+          class="mx_AccessibleButton mx_FacePile"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="_stacked-avatars_mcap2_111"
+          >
+            <span
+              class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+              data-color="2"
+              data-testid="avatar-img"
+              data-type="round"
+              role="presentation"
+              style="--cpd-avatar-size: 20px;"
+            >
+              u
+            </span>
             <span
               class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
               role="presentation"
-              style="--cpd-avatar-size: 24px;"
+              style="--cpd-avatar-size: 20px;"
             >
               u
             </span>
           </div>
+          2
         </div>
-        <span
-          tabindex="0"
-        >
-          <div
-            class="mx_E2EIcon mx_E2EIcon_normal mx_LegacyRoomHeader_icon"
-          />
-        </span>
-        <div
-          class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
-        >
-          <div
-            aria-level="1"
-            class="mx_LegacyRoomHeader_nametext"
-            dir="auto"
-            role="heading"
-            title="@user:example.com"
-          >
-            @user:example.com
-          </div>
-        </div>
-        <div
-          class="mx_LegacyRoomHeader_topic mx_RoomTopic"
-        />
       </div>
     </header>
     <main
@@ -715,7 +1088,7 @@ exports[`RoomView should show error view if failed to look up room alias 1`] = `
 <DocumentFragment>
   <div
     class="mx_RoomView"
-    data-room-header="legacy"
+    data-room-header="new"
   >
     <div
       class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"