Ditch right panel tabs and re-add close button (#99)

* Add extra buttons to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * i18n Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix base card title colours Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-11-22 16:18:14 +08:00 · 2024-10-03 09:59:41 +01:00 · 2024-10-03 09:59:41 +01:00 · 2dbaf00e71
commit 2dbaf00e71
parent 67cb8b7590
44 changed files with 865 additions and 500 deletions
--- a/playwright/e2e/crypto/crypto.spec.ts
+++ b/playwright/e2e/crypto/crypto.spec.ts
@ -220,7 +220,7 @@ test.describe("Cryptography", function () {

        // Assert that verified icon is rendered
        await page.getByTestId("base-card-back-button").click();
-        await page.locator(".mx_RightPanelTabs").getByText("Info").click();
+        await page.getByLabel("Room info").nth(1).click();
        await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="success"]')).toContainText("Encrypted");

        // Take a snapshot of RoomSummaryCard with a verified E2EE icon
--- a/playwright/e2e/crypto/dehydration.spec.ts
+++ b/playwright/e2e/crypto/dehydration.spec.ts
@ -94,7 +94,7 @@ test.describe("Dehydration", () => {

        await viewRoomSummaryByName(page, app, ROOM_NAME);

-        await page.locator(".mx_RightPanelTabs").getByText("People").click();
+        await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
        await expect(page.locator(".mx_MemberList")).toBeVisible();

        await getMemberTileByName(page, NAME).click();
--- a/playwright/e2e/crypto/utils.ts
+++ b/playwright/e2e/crypto/utils.ts
@ -345,7 +345,7 @@ export const verify = async (app: ElementAppPage, bob: Bot) => {
    const bobsVerificationRequestPromise = waitForVerificationRequest(bob);

    const roomInfo = await app.toggleRoomInfoPanel();
-    await page.locator(".mx_RightPanelTabs").getByText("People").click();
+    await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
    await roomInfo.getByText("Bob").click();
    await roomInfo.getByRole("button", { name: "Verify" }).click();
    await roomInfo.getByRole("button", { name: "Start Verification" }).click();
--- a/playwright/e2e/integration-manager/utils.ts
+++ b/playwright/e2e/integration-manager/utils.ts
@ -11,6 +11,6 @@ import type { ElementAppPage } from "../../pages/ElementAppPage";
 export async function openIntegrationManager(app: ElementAppPage) {
    const { page } = app;
    await app.toggleRoomInfoPanel();
-    await page.getByRole("tab", { name: "Extensions" }).click();
+    await page.getByRole("menuitem", { name: "Extensions" }).click();
    await page.getByRole("button", { name: "Add extensions" }).click();
 }
--- a/playwright/e2e/lazy-loading/lazy-loading.spec.ts
+++ b/playwright/e2e/lazy-loading/lazy-loading.spec.ts
@ -73,7 +73,7 @@ test.describe("Lazy Loading", () => {
    async function openMemberlist(app: ElementAppPage): Promise<void> {
        await app.toggleRoomInfoPanel();
        const { page } = app;
-        await page.locator(".mx_RightPanelTabs").getByText("People").click();
+        await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
    }

    function getMemberInMemberlist(page: Page, name: string): Locator {
--- a/playwright/e2e/read-receipts/index.ts
+++ b/playwright/e2e/read-receipts/index.ts
@ -394,10 +394,7 @@ class Helpers {
     * Close the threads panel.
     */
    async closeThreadsPanel() {
-        await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
-        if (await this.page.locator("#thread-panel").isVisible()) {
-            await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
-        }
+        await this.page.locator(".mx_RightPanel").getByTestId("base-card-close-button").click();
        await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible();
    }

--- a/playwright/e2e/right-panel/right-panel.spec.ts
+++ b/playwright/e2e/right-panel/right-panel.spec.ts
@ -65,7 +65,7 @@ test.describe("RightPanel", () => {
        test("should handle clicking add widgets", async ({ page, app }) => {
            await viewRoomSummaryByName(page, app, ROOM_NAME);

-            await page.getByRole("tab", { name: "Extensions" }).click();
+            await page.getByRole("menuitem", { name: "Extensions" }).click();
            await page.getByRole("button", { name: "Add extensions" }).click();
            await expect(page.locator(".mx_IntegrationManager")).toBeVisible();
        });
@ -106,7 +106,7 @@ test.describe("RightPanel", () => {
        test("should handle viewing room member", async ({ page, app }) => {
            await viewRoomSummaryByName(page, app, ROOM_NAME);

-            await page.locator(".mx_RightPanelTabs").getByText("People").click();
+            await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
            await expect(page.locator(".mx_MemberList")).toBeVisible();

            await getMemberTileByName(page, NAME).click();
@ -116,7 +116,7 @@ test.describe("RightPanel", () => {
            await page.getByTestId("base-card-back-button").click();
            await expect(page.locator(".mx_MemberList")).toBeVisible();

-            await page.locator(".mx_RightPanelTabs").getByText("Info").click();
+            await page.getByLabel("Room info").nth(1).click();
            await checkRoomSummaryCard(page, ROOM_NAME);
        });
    });
--- a/playwright/e2e/spaces/threads-activity-centre/index.ts
+++ b/playwright/e2e/spaces/threads-activity-centre/index.ts
@ -328,13 +328,6 @@ export class Helpers {
        return expect(this.page.locator(".mx_ThreadPanel")).toBeVisible();
    }

-    /**
-     * Assert that the thread tab is focused
-     */
-    assertThreadTabFocused() {
-        return expect(this.page.locator("#thread-panel-tab")).toBeFocused();
-    }
-
    /**
     * Populate the rooms with messages and threads
     * @param room1
--- a/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts
+++ b/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts
@ -157,6 +157,6 @@ test.describe("Threads Activity Centre", () => {
        await util.openTac();
        await util.clickRoomInTac(room1.name);

-        await util.assertThreadTabFocused();
+        await util.assertThreadPanelIsOpened();
    });
 });
--- a/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png
+++ b/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png
--- a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-empty-linux.png
+++ b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-empty-linux.png
--- a/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png
+++ b/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png
--- a/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png
+++ b/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png
--- a/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png
+++ b/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png
--- a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png
+++ b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@ -265,7 +265,6 @@
@import "./views/right_panel/_EncryptionInfo.pcss";
@import "./views/right_panel/_ExtensionsCard.pcss";
@import "./views/right_panel/_PinnedMessagesCard.pcss";
-@import "./views/right_panel/_RightPanelTabs.pcss";
@import "./views/right_panel/_RoomSummaryCard.pcss";
@import "./views/right_panel/_ThreadPanel.pcss";
@import "./views/right_panel/_TimelineCard.pcss";
--- a/res/css/views/right_panel/_ExtensionsCard.pcss
+++ b/res/css/views/right_panel/_ExtensionsCard.pcss
@ -10,19 +10,15 @@ Please see LICENSE files in the repository root for full details.
    --cpd-separator-inset: var(--cpd-space-4x);
    --cpd-separator-spacing: var(--cpd-space-4x);

-    .mx_BaseCard_header {
-        /* Hide the line between the header and the body of the card */
-        border-block-end: none;
-
-        /* Styling for the "Add extensions" button */
-        button {
-            width: 100%;
-        }
-    }
-
    .mx_AutoHideScrollbar {
        padding: 0 var(--cpd-space-4x);
+        margin-top: var(--cpd-space-3x);
        box-sizing: border-box;
+
+        /* Styling for the "Add extensions" button */
+        & > button {
+            width: 100%;
+        }
    }

    .mx_ExtensionsCard_container {
--- a/res/css/views/right_panel/_RightPanelTabs.pcss
+++ b/res/css/views/right_panel/_RightPanelTabs.pcss
@ -1,17 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2024 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_RightPanelTabs {
-    margin: 0;
-    height: 64px;
-    box-sizing: border-box;
-
-    ul {
-        margin-left: 16px;
-    }
-}
--- a/res/css/views/right_panel/_RoomSummaryCard.pcss
+++ b/res/css/views/right_panel/_RoomSummaryCard.pcss
@ -88,10 +88,6 @@ Please see LICENSE files in the repository root for full details.
    margin: var(--cpd-space-4x) 0;
 }

-.mx_RoomSummaryCard_header {
-    padding: 24px 12px 15px;
-}
-
 .mx_RoomSummaryCard_search {
    flex-grow: 1;
    min-width: 0;
--- a/res/css/views/rooms/_MemberList.pcss
+++ b/res/css/views/rooms/_MemberList.pcss
@ -11,7 +11,6 @@ Please see LICENSE files in the repository root for full details.
    display: flex;
    flex-direction: column;
    min-height: 0;
-    margin-top: 24px;

    .mx_Spinner {
        flex: 1 0 auto;
@ -34,6 +33,7 @@ Please see LICENSE files in the repository root for full details.

    .mx_AutoHideScrollbar {
        flex: 1 1 0;
+        margin-top: var(--cpd-space-3x);
    }
 }

--- a/src/components/structures/FilePanel.tsx
+++ b/src/components/structures/FilePanel.tsx
@ -223,7 +223,11 @@ class FilePanel extends React.Component<IProps, IState> {
    public render(): React.ReactNode {
        if (MatrixClientPeg.safeGet().isGuest()) {
            return (
-                <BaseCard className="mx_FilePanel mx_RoomView_messageListWrapper" onClose={this.props.onClose}>
+                <BaseCard
+                    className="mx_FilePanel mx_RoomView_messageListWrapper"
+                    onClose={this.props.onClose}
+                    header={_t("right_panel|files_button")}
+                >
                    <div className="mx_RoomView_empty">
                        {_t(
                            "file_panel|guest_note",
@ -241,7 +245,11 @@ class FilePanel extends React.Component<IProps, IState> {
            );
        } else if (this.noRoom) {
            return (
-                <BaseCard className="mx_FilePanel mx_RoomView_messageListWrapper" onClose={this.props.onClose}>
+                <BaseCard
+                    className="mx_FilePanel mx_RoomView_messageListWrapper"
+                    onClose={this.props.onClose}
+                    header={_t("right_panel|files_button")}
+                >
                    <div className="mx_RoomView_empty">{_t("file_panel|peek_note")}</div>
                </BaseCard>
            );
@ -273,6 +281,7 @@ class FilePanel extends React.Component<IProps, IState> {
                        onClose={this.props.onClose}
                        withoutScrollContainer
                        ref={this.card}
+                        header={_t("right_panel|files_button")}
                    >
                        {this.card.current && (
                            <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />
@ -299,7 +308,11 @@ class FilePanel extends React.Component<IProps, IState> {
                        timelineRenderingType: TimelineRenderingType.File,
                    }}
                >
-                    <BaseCard className="mx_FilePanel" onClose={this.props.onClose}>
+                    <BaseCard
+                        className="mx_FilePanel"
+                        onClose={this.props.onClose}
+                        header={_t("right_panel|files_button")}
+                    >
                        <Spinner />
                    </BaseCard>
                </RoomContext.Provider>
--- a/src/components/structures/NotificationPanel.tsx
+++ b/src/components/structures/NotificationPanel.tsx
@ -18,7 +18,6 @@ import Spinner from "../views/elements/Spinner";
 import { Layout } from "../../settings/enums/Layout";
 import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import Measured from "../views/elements/Measured";
-import Heading from "../views/typography/Heading";
 import EmptyState from "../views/right_panel/EmptyState";

 interface IProps {
@ -88,13 +87,7 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
                }}
            >
                <BaseCard
-                    header={
-                        <div className="mx_BaseCard_header_title">
-                            <Heading size="4" className="mx_BaseCard_header_title_heading">
-                                {_t("notifications|enable_prompt_toast_title")}
-                            </Heading>
-                        </div>
-                    }
+                    header={_t("notifications|enable_prompt_toast_title")}
                    /**
                     * Need to rename this CSS class to something more generic
                     * Will be done once all the panels are using a similar layout
--- a/src/components/structures/RightPanel.tsx
+++ b/src/components/structures/RightPanel.tsx
@ -33,7 +33,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import { IRightPanelCard, IRightPanelCardState } from "../../stores/right-panel/RightPanelStoreIPanelState";
 import { Action } from "../../dispatcher/actions";
 import { XOR } from "../../@types/common";
-import { RightPanelTabs } from "../views/right_panel/RightPanelTabs";
 import ExtensionsCard from "../views/right_panel/ExtensionsCard";

 interface BaseProps {
@ -164,7 +163,6 @@ export default class RightPanel extends React.Component<Props, IState> {
                        <MemberList
                            roomId={roomId}
                            key={roomId}
-                            hideHeaderButtons
                            onClose={this.onClose}
                            searchQuery={this.state.searchQuery}
                            onSearchQueryChanged={this.onSearchQueryChanged}
@ -313,7 +311,6 @@ export default class RightPanel extends React.Component<Props, IState> {

        return (
            <aside className="mx_RightPanel" id="mx_RightPanel">
-                {phase && <RightPanelTabs room={this.props.room} phase={phase} />}
                {card}
            </aside>
        );
--- a/src/components/structures/ThreadPanel.tsx
+++ b/src/components/structures/ThreadPanel.tsx
@ -193,7 +193,6 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
            }}
        >
            <BaseCard
-                hideHeaderButtons
                header={
                    hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />
                }
--- a/src/components/views/right_panel/BaseCard.tsx
+++ b/src/components/views/right_panel/BaseCard.tsx
@ -38,6 +38,12 @@ interface IProps {
    children: ReactNode;
 }

+function closeRightPanel(ev: MouseEvent<HTMLButtonElement>): void {
+    ev.preventDefault();
+    ev.stopPropagation();
+    RightPanelStore.instance.popCard();
+}
+
 const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
    (
        {
@ -81,12 +87,12 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
        }

        let closeButton;
-        if (onClose && !hideHeaderButtons) {
+        if (!hideHeaderButtons) {
            closeButton = (
                <IconButton
                    size="28px"
                    data-testid="base-card-close-button"
-                    onClick={onClose}
+                    onClick={onClose ?? closeRightPanel}
                    ref={closeButtonRef}
                    tooltip={closeLabel ?? _t("action|close")}
                    subtleBackground
@ -116,9 +122,16 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
                        <div className="mx_BaseCard_header">
                            {backButton}
                            {typeof header === "string" ? (
-                                <Text size="md" weight="medium" className="mx_BaseCard_header_title">
+                                <div className="mx_BaseCard_header_title">
+                                    <Text
+                                        size="md"
+                                        weight="medium"
+                                        className="mx_BaseCard_header_title_heading"
+                                        role="heading"
+                                    >
                                        {header}
                                    </Text>
+                                </div>
                            ) : (
                                (header ?? <div className="mx_BaseCard_header_spacer" />)
                            )}
--- a/src/components/views/right_panel/ExtensionsCard.tsx
+++ b/src/components/views/right_panel/ExtensionsCard.tsx
@ -157,13 +157,6 @@ const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
        }
    };

-    // The button is in the header to keep it outside the scrollable region
-    const header = (
-        <Button size="sm" onClick={onManageIntegrations} kind="secondary" Icon={PlusIcon}>
-            {_t("right_panel|add_integrations")}
-        </Button>
-    );
-
    let body: JSX.Element;
    if (realApps.length < 1) {
        body = (
@ -197,7 +190,10 @@ const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
    }

    return (
-        <BaseCard header={header} className="mx_ExtensionsCard" onClose={onClose} hideHeaderButtons>
+        <BaseCard header={_t("right_panel|extensions_button")} className="mx_ExtensionsCard" onClose={onClose}>
+            <Button size="sm" onClick={onManageIntegrations} kind="secondary" Icon={PlusIcon}>
+                {_t("right_panel|add_integrations")}
+            </Button>
            {body}
        </BaseCard>
    );
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@ -20,7 +20,6 @@ import { PinnedEventTile } from "../rooms/PinnedEventTile";
 import { useRoomState } from "../../../hooks/useRoomState";
 import RoomContext, { TimelineRenderingType, useRoomContext } from "../../../contexts/RoomContext";
 import { ReadPinsEventId } from "./types";
-import Heading from "../typography/Heading";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { filterBoolean } from "../../../utils/arrays";
 import Modal from "../../../Modal";
@ -86,13 +85,7 @@ export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMe

    return (
        <BaseCard
-            header={
-                <div className="mx_BaseCard_header_title">
-                    <Heading size="4" className="mx_BaseCard_header_title_heading">
-                        {_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })}
-                    </Heading>
-                </div>
-            }
+            header={_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })}
            className="mx_PinnedMessagesCard"
            onClose={onClose}
        >
--- a/src/components/views/right_panel/RightPanelTabs.tsx
+++ b/src/components/views/right_panel/RightPanelTabs.tsx
@ -1,105 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2024 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { useRef } from "react";
-import { NavBar, NavItem } from "@vector-im/compound-web";
-import { Room } from "matrix-js-sdk/src/matrix";
-
-import { _t } from "../../../languageHandler";
-import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
-import PosthogTrackers from "../../../PosthogTrackers";
-import { useDispatcher } from "../../../hooks/useDispatcher";
-import dispatcher from "../../../dispatcher/dispatcher";
-import { Action } from "../../../dispatcher/actions";
-import SettingsStore from "../../../settings/SettingsStore";
-import { UIComponent, UIFeature } from "../../../settings/UIFeature";
-import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
-import { isVideoRoom as calcIsVideoRoom } from "../../../utils/video-rooms";
-
-function shouldShowTabsForPhase(phase?: RightPanelPhases): boolean {
-    const tabs = [
-        RightPanelPhases.RoomSummary,
-        RightPanelPhases.RoomMemberList,
-        RightPanelPhases.ThreadPanel,
-        RightPanelPhases.Extensions,
-    ];
-    return !!phase && tabs.includes(phase);
-}
-
-type Props = {
-    room?: Room;
-    phase: RightPanelPhases;
-};
-
-export const RightPanelTabs: React.FC<Props> = ({ phase, room }): JSX.Element | null => {
-    const threadsTabRef = useRef<HTMLButtonElement | null>(null);
-
-    useDispatcher(dispatcher, (payload) => {
-        // This actually focuses the threads tab, as its the only interactive element,
-        // but at least it puts the user in the right area of the app.
-        if (payload.action === Action.FocusThreadsPanel) {
-            threadsTabRef.current?.focus();
-        }
-    });
-
-    const isVideoRoom = room !== undefined && calcIsVideoRoom(room);
-
-    if (!shouldShowTabsForPhase(phase)) return null;
-
-    return (
-        <NavBar className="mx_RightPanelTabs" aria-label="right panel" role="tablist">
-            <NavItem
-                aria-controls="room-summary-panel"
-                id="room-summary-panel-tab"
-                onClick={() => {
-                    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomSummary }, true);
-                }}
-                active={phase === RightPanelPhases.RoomSummary}
-            >
-                {_t("right_panel|info")}
-            </NavItem>
-            <NavItem
-                aria-controls="memberlist-panel"
-                id="memberlist-panel-tab"
-                onClick={(ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true);
-                    PosthogTrackers.trackInteraction("WebRightPanelRoomInfoPeopleButton", ev);
-                }}
-                active={phase === RightPanelPhases.RoomMemberList}
-            >
-                {_t("common|people")}
-            </NavItem>
-            <NavItem
-                aria-controls="thread-panel"
-                id="thread-panel-tab"
-                onClick={() => {
-                    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.ThreadPanel }, true);
-                }}
-                active={phase === RightPanelPhases.ThreadPanel}
-                ref={threadsTabRef}
-            >
-                {_t("common|threads")}
-            </NavItem>
-            {SettingsStore.getValue(UIFeature.Widgets) &&
-                !isVideoRoom &&
-                shouldShowComponent(UIComponent.AddIntegrations) && (
-                    <NavItem
-                        aria-controls="thread-panel"
-                        id="extensions-panel-tab"
-                        onClick={() => {
-                            RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Extensions }, true);
-                        }}
-                        active={phase === RightPanelPhases.Extensions}
-                    >
-                        {_t("common|extensions")}
-                    </NavItem>
-                )}
-        </NavBar>
-    );
-};
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@ -27,6 +27,9 @@ import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/set
 import { Icon as ExportArchiveIcon } from "@vector-im/compound-design-tokens/icons/export-archive.svg";
 import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
 import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files";
+import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
+import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
+import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
 import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls";
 import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
 import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg";
@ -82,10 +85,22 @@ interface IProps {
    focusRoomSearch?: boolean;
 }

+const onRoomMembersClick = (): void => {
+    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true);
+};
+
+const onRoomThreadsClick = (): void => {
+    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.ThreadPanel }, true);
+};
+
 const onRoomFilesClick = (): void => {
    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, true);
 };

+const onRoomExtensionsClick = (): void => {
+    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Extensions }, true);
+};
+
 const onRoomPinsClick = (): void => {
    PosthogTrackers.trackInteraction("PinnedMessageRoomInfoButton");
    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.PinnedMessages }, true);
@ -254,7 +269,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
    );

    const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
-    const header = (
+    const roomInfo = (
        <header className="mx_RoomSummaryCard_container">
            <RoomAvatar room={room} size="80px" viewAvatarOnClick />
            <RoomName room={room}>
@ -322,22 +337,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
    const canInviteToState = useEventEmitterState(room, RoomStateEvent.Update, () => canInviteTo(room));
    const isFavorite = roomTags.includes(DefaultTagID.Favourite);

-    return (
-        <BaseCard
-            hideHeaderButtons
-            id="room-summary-panel"
-            className="mx_RoomSummaryCard"
-            ariaLabelledBy="room-summary-panel-tab"
-            role="tabpanel"
-        >
-            <Flex
-                as="header"
-                className="mx_RoomSummaryCard_header"
-                gap="var(--cpd-space-3x)"
-                align="center"
-                justify="space-between"
-            >
-                {onSearchChange && (
+    const header = onSearchChange && (
        <Form.Root className="mx_RoomSummaryCard_search" onSubmit={(e) => e.preventDefault()}>
            <Search
                placeholder={_t("room|search|placeholder")}
@ -354,10 +354,17 @@ const RoomSummaryCard: React.FC<IProps> = ({
                }}
            />
        </Form.Root>
-                )}
-            </Flex>
+    );

-            {header}
+    return (
+        <BaseCard
+            id="room-summary-panel"
+            className="mx_RoomSummaryCard"
+            ariaLabelledBy="room-summary-panel-tab"
+            role="tabpanel"
+            header={header}
+        >
+            {roomInfo}

            <Separator />

@ -379,6 +386,8 @@ const RoomSummaryCard: React.FC<IProps> = ({

                <Separator />

+                <MenuItem Icon={UserProfileIcon} label={_t("common|people")} onSelect={onRoomMembersClick} />
+                <MenuItem Icon={ThreadsIcon} label={_t("common|threads")} onSelect={onRoomThreadsClick} />
                {!isVideoRoom && (
                    <>
                        <ReleaseAnnouncement
@ -401,6 +410,11 @@ const RoomSummaryCard: React.FC<IProps> = ({
                            </div>
                        </ReleaseAnnouncement>
                        <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
+                        <MenuItem
+                            Icon={ExtensionsIcon}
+                            label={_t("right_panel|extensions_button")}
+                            onSelect={onRoomExtensionsClick}
+                        />
                    </>
                )}

--- a/src/components/views/right_panel/TimelineCard.tsx
+++ b/src/components/views/right_panel/TimelineCard.tsx
@ -36,7 +36,6 @@ import SettingsStore from "../../../settings/SettingsStore";
 import JumpToBottomButton from "../rooms/JumpToBottomButton";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import Measured from "../elements/Measured";
-import Heading from "../typography/Heading";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { SdkContextClass } from "../../../contexts/SDKContext";

@ -185,16 +184,6 @@ export default class TimelineCard extends React.Component<IProps, IState> {
        }
    };

-    private renderTimelineCardHeader = (): JSX.Element => {
-        return (
-            <div className="mx_BaseCard_header_title">
-                <Heading size="4" className="mx_BaseCard_header_title_heading">
-                    {_t("right_panel|video_room_chat|title")}
-                </Heading>
-            </div>
-        );
-    };
-
    public render(): React.ReactNode {
        const highlightedEventId = this.state.isInitialEventHighlighted ? this.state.initialEventId : undefined;

@ -226,7 +215,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                    className={this.props.classNames}
                    onClose={this.props.onClose}
                    withoutScrollContainer={true}
-                    header={this.renderTimelineCardHeader()}
+                    header={_t("right_panel|video_room_chat|title")}
                    ref={this.card}
                >
                    {this.card.current && <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />}
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@ -55,7 +55,6 @@ const SHOW_MORE_INCREMENT = 100;
 interface IProps {
    roomId: string;
    searchQuery: string;
-    hideHeaderButtons?: boolean;
    onClose(): void;
    onSearchQueryChanged: (query: string) => void;
 }
@ -355,7 +354,7 @@ export default class MemberList extends React.Component<IProps, IState> {
                    className="mx_MemberList"
                    ariaLabelledBy="memberlist-panel-tab"
                    role="tabpanel"
-                    hideHeaderButtons={this.props.hideHeaderButtons}
+                    header={_t("common|people")}
                    onClose={this.props.onClose}
                >
                    <Spinner />
@ -420,7 +419,7 @@ export default class MemberList extends React.Component<IProps, IState> {
                className="mx_MemberList"
                ariaLabelledBy="memberlist-panel-tab"
                role="tabpanel"
-                hideHeaderButtons={this.props.hideHeaderButtons}
+                header={_t("common|people")}
                footer={footer}
                onClose={this.props.onClose}
            >
--- a/src/components/views/rooms/ThirdPartyMemberInfo.tsx
+++ b/src/components/views/rooms/ThirdPartyMemberInfo.tsx
@ -125,7 +125,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
        }

        return (
-            <BaseCard onClose={this.props.onClose}>
+            <BaseCard onClose={this.props.onClose} header={_t("common|profile")}>
                <Flex className="mx_ThirdPartyMemberInfo" direction="column" gap="var(--cpd-space-4x)">
                    <Flex direction="column" as="section" justify="start" gap="var(--cpd-space-2x)">
                        {/* same as userinfo name style */}
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@ -477,7 +477,6 @@
        "encrypted": "Encrypted",
        "encryption_enabled": "Encryption enabled",
        "error": "Error",
-        "extensions": "Extensions",
        "faq": "FAQ",
        "favourites": "Favourites",
        "feedback": "Feedback",
@ -1832,17 +1831,17 @@
    "right_panel": {
        "add_integrations": "Add extensions",
        "add_topic": "Add topic",
+        "extensions_button": "Extensions",
        "extensions_empty_description": "Select “%(addIntegrations)s” to browse and add extensions to this room",
        "extensions_empty_title": "Boost productivity with more tools, widgets and bots",
        "files_button": "Files",
-        "info": "Info",
        "pinned_messages": {
            "empty_description": "Select a message and choose “%(pinAction)s” to it include here.",
            "empty_title": "Pin important messages so that they can be easily discovered",
            "header": {
                "one": "1 Pinned message",
                "other": "%(count)s Pinned messages",
-                "zero": "Pinned message"
+                "zero": "Pinned messages"
            },
            "limits": {
                "other": "You can only pin up to %(count)s widgets"
--- a/test/components/structures/snapshots/FilePanel-test.tsx.snap
+++ b/test/components/structures/snapshots/FilePanel-test.tsx.snap
@ -9,8 +9,15 @@ exports[`FilePanel renders empty state 1`] = `
      class="mx_BaseCard_header"
    >
      <div
-        class="mx_BaseCard_header_spacer"
-      />
+        class="mx_BaseCard_header_title"
+      >
+        <p
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
+        >
+          Files
+        </p>
+      </div>
      <button
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
--- a/test/components/views/right_panel/BaseCard-test.tsx
+++ b/test/components/views/right_panel/BaseCard-test.tsx
@ -0,0 +1,35 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import BaseCard from "../../../../src/components/views/right_panel/BaseCard.tsx";
+import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore.ts";
+
+jest.mock("../../../../src/stores/right-panel/RightPanelStore", () => ({
+    instance: {
+        popCard: jest.fn(),
+        roomPhaseHistory: [],
+    },
+}));
+
+describe("<BaseCard />", () => {
+    it("should close when clicking X button", async () => {
+        const { asFragment } = render(
+            <BaseCard header="Heading text">
+                <div>Content</div>
+            </BaseCard>,
+        );
+
+        expect(screen.getByRole("heading")).toHaveTextContent("Heading text");
+        expect(asFragment()).toMatchSnapshot();
+
+        fireEvent.click(screen.getByTestId("base-card-close-button"));
+        expect(RightPanelStore.instance.popCard).toHaveBeenCalled();
+    });
+});
--- a/test/components/views/right_panel/RightPanelTabs-test.tsx
+++ b/test/components/views/right_panel/RightPanelTabs-test.tsx
@ -1,64 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2024 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-
-import dis from "../../../../src/dispatcher/dispatcher";
-import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore";
-import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
-import { RightPanelTabs } from "../../../../src/components/views/right_panel/RightPanelTabs";
-import { Action } from "../../../../src/dispatcher/actions";
-
-describe("<RightPanelTabs />", () => {
-    it("Component renders the correct tabs", () => {
-        const { container, getByRole } = render(<RightPanelTabs phase={RightPanelPhases.RoomSummary} />);
-        expect(container).toMatchSnapshot();
-
-        // We expect Info, People and Threads as tabs
-        expect(getByRole("tab", { name: "Info" })).toBeDefined();
-        expect(getByRole("tab", { name: "People" })).toBeDefined();
-        expect(getByRole("tab", { name: "Threads" })).toBeDefined();
-    });
-
-    it("Correct tab is active", () => {
-        const { container } = render(<RightPanelTabs phase={RightPanelPhases.RoomMemberList} />);
-        expect(container).toMatchSnapshot();
-        // Assert that the active tab is Info
-        expect(container.querySelectorAll("[aria-selected='true']").length).toEqual(1);
-        expect(container.querySelector("[aria-selected='true']")).toHaveAccessibleName("People");
-    });
-
-    it("Renders nothing for some phases, eg: FilePanel", () => {
-        const { container } = render(<RightPanelTabs phase={RightPanelPhases.FilePanel} />);
-        expect(container).toBeEmptyDOMElement();
-    });
-
-    it("onClick behaviors work as expected", () => {
-        const spy = jest.spyOn(RightPanelStore.instance, "pushCard");
-        const { getByRole } = render(<RightPanelTabs phase={RightPanelPhases.RoomSummary} />);
-
-        // Info -> People
-        fireEvent.click(getByRole("tab", { name: "People" }));
-        expect(spy).toHaveBeenLastCalledWith({ phase: RightPanelPhases.RoomMemberList }, true);
-
-        // People -> Threads
-        fireEvent.click(getByRole("tab", { name: "Threads" }));
-        expect(spy).toHaveBeenLastCalledWith({ phase: RightPanelPhases.ThreadPanel }, true);
-
-        // Threads -> Info
-        fireEvent.click(getByRole("tab", { name: "Info" }));
-        expect(spy).toHaveBeenLastCalledWith({ phase: RightPanelPhases.RoomSummary }, true);
-    });
-
-    it("Threads tab is focused on action", () => {
-        const { getByRole } = render(<RightPanelTabs phase={RightPanelPhases.ThreadPanel} />);
-        dis.dispatch({ action: Action.FocusThreadsPanel }, true);
-        expect(getByRole("tab", { name: "Threads" })).toHaveFocus();
-    });
-});
--- a/test/components/views/right_panel/RoomSummaryCard-test.tsx
+++ b/test/components/views/right_panel/RoomSummaryCard-test.tsx
@ -258,6 +258,36 @@ describe("<RoomSummaryCard />", () => {
        expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: "open_room_settings" });
    });

+    it("opens room member list on button click", () => {
+        const { getByText } = getComponent();
+
+        fireEvent.click(getByText("People"));
+
+        expect(RightPanelStore.instance.pushCard).toHaveBeenCalledWith(
+            { phase: RightPanelPhases.RoomMemberList },
+            true,
+        );
+    });
+
+    it("opens room threads list on button click", () => {
+        const { getByText } = getComponent();
+
+        fireEvent.click(getByText("Threads"));
+
+        expect(RightPanelStore.instance.pushCard).toHaveBeenCalledWith({ phase: RightPanelPhases.ThreadPanel }, true);
+    });
+
+    it("opens room pinned messages on button click", () => {
+        const { getByText } = getComponent();
+
+        fireEvent.click(getByText("Pinned messages"));
+
+        expect(RightPanelStore.instance.pushCard).toHaveBeenCalledWith(
+            { phase: RightPanelPhases.PinnedMessages },
+            true,
+        );
+    });
+
    describe("pinning", () => {
        it("renders pins options", () => {
            const { getByText } = getComponent();
--- a/test/components/views/right_panel/snapshots/BaseCard-test.tsx.snap
+++ b/test/components/views/right_panel/snapshots/BaseCard-test.tsx.snap
@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BaseCard /> should close when clicking X button 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_BaseCard"
+  >
+    <div
+      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_BaseCard_header_title"
+      >
+        <p
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
+        >
+          Heading text
+        </p>
+      </div>
+      <button
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        data-testid="base-card-close-button"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <div
+      class="mx_AutoHideScrollbar"
+      tabindex="-1"
+    >
+      <div>
+        Content
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
--- a/test/components/views/right_panel/snapshots/ExtensionsCard-test.tsx.snap
+++ b/test/components/views/right_panel/snapshots/ExtensionsCard-test.tsx.snap
@ -7,6 +7,45 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
  >
    <div
      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_BaseCard_header_title"
+      >
+        <p
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
+        >
+          Extensions
+        </p>
+      </div>
+      <button
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        data-testid="base-card-close-button"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <div
+      class="mx_AutoHideScrollbar"
+      tabindex="-1"
    >
      <button
        class="_button_zt6rp_17 _has-icon_zt6rp_61"
@ -22,11 +61,6 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
        />
        Add extensions
      </button>
-    </div>
-    <div
-      class="mx_AutoHideScrollbar"
-      tabindex="-1"
-    >
      <div
        class="mx_Flex mx_EmptyState"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
@ -58,6 +92,45 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
  >
    <div
      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_BaseCard_header_title"
+      >
+        <p
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
+        >
+          Extensions
+        </p>
+      </div>
+      <button
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        data-testid="base-card-close-button"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <div
+      class="mx_AutoHideScrollbar"
+      tabindex="-1"
    >
      <button
        class="_button_zt6rp_17 _has-icon_zt6rp_61"
@ -73,11 +146,6 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
        />
        Add extensions
      </button>
-    </div>
-    <div
-      class="mx_AutoHideScrollbar"
-      tabindex="-1"
-    >
      <div
        class="_separator_144s5_17"
        data-kind="primary"
--- a/test/components/views/right_panel/snapshots/PinnedMessagesCard-test.tsx.snap
+++ b/test/components/views/right_panel/snapshots/PinnedMessagesCard-test.tsx.snap
@ -11,11 +11,12 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
      <div
        class="mx_BaseCard_header_title"
      >
-        <h4
-          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+        <p
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
        >
-          Pinned message
-        </h4>
+          Pinned messages
+        </p>
      </div>
      <button
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
@ -90,11 +91,12 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
      <div
        class="mx_BaseCard_header_title"
      >
-        <h4
-          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+        <p
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
        >
          2 Pinned messages
-        </h4>
+        </p>
      </div>
      <button
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
@ -285,11 +287,12 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
      <div
        class="mx_BaseCard_header_title"
      >
-        <h4
-          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+        <p
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
        >
          2 Pinned messages
-        </h4>
+        </p>
      </div>
      <button
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
--- a/test/components/views/right_panel/snapshots/RightPanelTabs-test.tsx.snap
+++ b/test/components/views/right_panel/snapshots/RightPanelTabs-test.tsx.snap
@ -1,147 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<RightPanelTabs /> Component renders the correct tabs 1`] = `
-<div>
-  <nav
-    class="mx_RightPanelTabs _nav-bar_135dy_16"
-    role="presentation"
-  >
-    <ul
-      aria-label="right panel"
-      class="_nav-bar-items_135dy_22"
-      role="tablist"
-    >
-      <li
-        class="_nav-tab_135dy_33"
-        data-current="true"
-        role="presentation"
-      >
-        <button
-          aria-controls="room-summary-panel"
-          aria-selected="true"
-          class="_nav-item_135dy_55"
-          id="room-summary-panel-tab"
-          role="tab"
-        >
-          Info
-        </button>
-      </li>
-      <li
-        class="_nav-tab_135dy_33"
-        role="presentation"
-      >
-        <button
-          aria-controls="memberlist-panel"
-          aria-selected="false"
-          class="_nav-item_135dy_55"
-          id="memberlist-panel-tab"
-          role="tab"
-        >
-          People
-        </button>
-      </li>
-      <li
-        class="_nav-tab_135dy_33"
-        role="presentation"
-      >
-        <button
-          aria-controls="thread-panel"
-          aria-selected="false"
-          class="_nav-item_135dy_55"
-          id="thread-panel-tab"
-          role="tab"
-        >
-          Threads
-        </button>
-      </li>
-      <li
-        class="_nav-tab_135dy_33"
-        role="presentation"
-      >
-        <button
-          aria-controls="thread-panel"
-          aria-selected="false"
-          class="_nav-item_135dy_55"
-          id="extensions-panel-tab"
-          role="tab"
-        >
-          Extensions
-        </button>
-      </li>
-    </ul>
-  </nav>
-</div>
-`;
-
-exports[`<RightPanelTabs /> Correct tab is active 1`] = `
-<div>
-  <nav
-    class="mx_RightPanelTabs _nav-bar_135dy_16"
-    role="presentation"
-  >
-    <ul
-      aria-label="right panel"
-      class="_nav-bar-items_135dy_22"
-      role="tablist"
-    >
-      <li
-        class="_nav-tab_135dy_33"
-        role="presentation"
-      >
-        <button
-          aria-controls="room-summary-panel"
-          aria-selected="false"
-          class="_nav-item_135dy_55"
-          id="room-summary-panel-tab"
-          role="tab"
-        >
-          Info
-        </button>
-      </li>
-      <li
-        class="_nav-tab_135dy_33"
-        data-current="true"
-        role="presentation"
-      >
-        <button
-          aria-controls="memberlist-panel"
-          aria-selected="true"
-          class="_nav-item_135dy_55"
-          id="memberlist-panel-tab"
-          role="tab"
-        >
-          People
-        </button>
-      </li>
-      <li
-        class="_nav-tab_135dy_33"
-        role="presentation"
-      >
-        <button
-          aria-controls="thread-panel"
-          aria-selected="false"
-          class="_nav-item_135dy_55"
-          id="thread-panel-tab"
-          role="tab"
-        >
-          Threads
-        </button>
-      </li>
-      <li
-        class="_nav-tab_135dy_33"
-        role="presentation"
-      >
-        <button
-          aria-controls="thread-panel"
-          aria-selected="false"
-          class="_nav-item_135dy_55"
-          id="extensions-panel-tab"
-          role="tab"
-        >
-          Extensions
-        </button>
-      </li>
-    </ul>
-  </nav>
-</div>
-`;
--- a/test/components/views/right_panel/snapshots/RoomSummaryCard-test.tsx.snap
+++ b/test/components/views/right_panel/snapshots/RoomSummaryCard-test.tsx.snap
@ -8,14 +8,41 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
    id="room-summary-panel"
    role="tabpanel"
  >
+    <div
+      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_BaseCard_header_spacer"
+      />
+      <button
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        data-testid="base-card-close-button"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
-      <header
-        class="mx_Flex mx_RoomSummaryCard_header"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
-      />
      <header
        class="mx_RoomSummaryCard_container"
      >
@ -186,6 +213,89 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
          data-orientation="horizontal"
          role="separator"
        />
+        <button
+          class="_item_1gwvj_17 _interactive_1gwvj_36"
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1gwvj_44"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.175 13.825C9.958 14.608 10.9 15 12 15s2.042-.392 2.825-1.175C15.608 13.042 16 12.1 16 11s-.392-2.042-1.175-2.825C14.042 7.392 13.1 7 12 7s-2.042.392-2.825 1.175C8.392 8.958 8 9.9 8 11s.392 2.042 1.175 2.825Zm4.237-1.412A1.926 1.926 0 0 1 12 13c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 11c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 9c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412Z"
+            />
+            <path
+              d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+            />
+            <path
+              d="M16.23 18.792a12.47 12.47 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0c-.487.12-.972.271-1.455.455a8.04 8.04 0 0 1-1.729-1.454c.89-.412 1.794-.729 2.709-.95A13.76 13.76 0 0 1 12 16c1.1 0 2.183.13 3.25.387a14.78 14.78 0 0 1 2.709.95 8.042 8.042 0 0 1-1.73 1.455Z"
+            />
+          </svg>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          >
+            People
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_1gwvj_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+            />
+          </svg>
+        </button>
+        <button
+          class="_item_1gwvj_17 _interactive_1gwvj_36"
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1gwvj_44"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
+            />
+            <path
+              d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293ZM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17Z"
+            />
+          </svg>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          >
+            Threads
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_1gwvj_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+            />
+          </svg>
+        </button>
        <div
          aria-expanded="false"
          aria-haspopup="dialog"
@ -272,6 +382,43 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
            />
          </svg>
        </button>
+        <button
+          class="_item_1gwvj_17 _interactive_1gwvj_36"
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1gwvj_44"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
+            />
+          </svg>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          >
+            Extensions
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_1gwvj_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+            />
+          </svg>
+        </button>
        <div
          class="_separator_144s5_17"
          data-kind="primary"
@ -482,14 +629,41 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
    id="room-summary-panel"
    role="tabpanel"
  >
+    <div
+      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_BaseCard_header_spacer"
+      />
+      <button
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        data-testid="base-card-close-button"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
-      <header
-        class="mx_Flex mx_RoomSummaryCard_header"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
-      />
      <header
        class="mx_RoomSummaryCard_container"
      >
@ -633,6 +807,89 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
          data-orientation="horizontal"
          role="separator"
        />
+        <button
+          class="_item_1gwvj_17 _interactive_1gwvj_36"
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1gwvj_44"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.175 13.825C9.958 14.608 10.9 15 12 15s2.042-.392 2.825-1.175C15.608 13.042 16 12.1 16 11s-.392-2.042-1.175-2.825C14.042 7.392 13.1 7 12 7s-2.042.392-2.825 1.175C8.392 8.958 8 9.9 8 11s.392 2.042 1.175 2.825Zm4.237-1.412A1.926 1.926 0 0 1 12 13c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 11c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 9c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412Z"
+            />
+            <path
+              d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+            />
+            <path
+              d="M16.23 18.792a12.47 12.47 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0c-.487.12-.972.271-1.455.455a8.04 8.04 0 0 1-1.729-1.454c.89-.412 1.794-.729 2.709-.95A13.76 13.76 0 0 1 12 16c1.1 0 2.183.13 3.25.387a14.78 14.78 0 0 1 2.709.95 8.042 8.042 0 0 1-1.73 1.455Z"
+            />
+          </svg>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          >
+            People
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_1gwvj_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+            />
+          </svg>
+        </button>
+        <button
+          class="_item_1gwvj_17 _interactive_1gwvj_36"
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1gwvj_44"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
+            />
+            <path
+              d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293ZM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17Z"
+            />
+          </svg>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          >
+            Threads
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_1gwvj_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+            />
+          </svg>
+        </button>
        <div
          aria-expanded="false"
          aria-haspopup="dialog"
@ -719,6 +976,43 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
            />
          </svg>
        </button>
+        <button
+          class="_item_1gwvj_17 _interactive_1gwvj_36"
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1gwvj_44"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
+            />
+          </svg>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          >
+            Extensions
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_1gwvj_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+            />
+          </svg>
+        </button>
        <div
          class="_separator_144s5_17"
          data-kind="primary"
@ -929,14 +1223,41 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
    id="room-summary-panel"
    role="tabpanel"
  >
+    <div
+      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_BaseCard_header_spacer"
+      />
+      <button
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        data-testid="base-card-close-button"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
-      <header
-        class="mx_Flex mx_RoomSummaryCard_header"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
-      />
      <header
        class="mx_RoomSummaryCard_container"
      >
@ -1107,6 +1428,89 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
          data-orientation="horizontal"
          role="separator"
        />
+        <button
+          class="_item_1gwvj_17 _interactive_1gwvj_36"
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1gwvj_44"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.175 13.825C9.958 14.608 10.9 15 12 15s2.042-.392 2.825-1.175C15.608 13.042 16 12.1 16 11s-.392-2.042-1.175-2.825C14.042 7.392 13.1 7 12 7s-2.042.392-2.825 1.175C8.392 8.958 8 9.9 8 11s.392 2.042 1.175 2.825Zm4.237-1.412A1.926 1.926 0 0 1 12 13c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 11c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 9c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412Z"
+            />
+            <path
+              d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+            />
+            <path
+              d="M16.23 18.792a12.47 12.47 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0c-.487.12-.972.271-1.455.455a8.04 8.04 0 0 1-1.729-1.454c.89-.412 1.794-.729 2.709-.95A13.76 13.76 0 0 1 12 16c1.1 0 2.183.13 3.25.387a14.78 14.78 0 0 1 2.709.95 8.042 8.042 0 0 1-1.73 1.455Z"
+            />
+          </svg>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          >
+            People
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_1gwvj_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+            />
+          </svg>
+        </button>
+        <button
+          class="_item_1gwvj_17 _interactive_1gwvj_36"
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1gwvj_44"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
+            />
+            <path
+              d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293ZM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17Z"
+            />
+          </svg>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          >
+            Threads
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_1gwvj_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+            />
+          </svg>
+        </button>
        <div
          aria-expanded="false"
          aria-haspopup="dialog"
@ -1193,6 +1597,43 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
            />
          </svg>
        </button>
+        <button
+          class="_item_1gwvj_17 _interactive_1gwvj_36"
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1gwvj_44"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
+            />
+          </svg>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          >
+            Extensions
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_1gwvj_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+            />
+          </svg>
+        </button>
        <div
          class="_separator_144s5_17"
          data-kind="primary"
--- a/test/components/views/right_panel/snapshots/UserInfo-test.tsx.snap
+++ b/test/components/views/right_panel/snapshots/UserInfo-test.tsx.snap
@ -76,12 +76,17 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
  >
    <div
      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_BaseCard_header_title"
      >
        <p
-        class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
        >
          Profile
        </p>
+      </div>
      <button
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
@ -384,12 +389,17 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
  >
    <div
      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_BaseCard_header_title"
      >
        <p
-        class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
        >
          Profile
        </p>
+      </div>
      <button
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
--- a/test/components/views/rooms/snapshots/ThirdPartyMemberInfo-test.tsx.snap
+++ b/test/components/views/rooms/snapshots/ThirdPartyMemberInfo-test.tsx.snap
@ -9,8 +9,39 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
      class="mx_BaseCard_header"
    >
      <div
-        class="mx_BaseCard_header_spacer"
+        class="mx_BaseCard_header_title"
+      >
+        <p
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
+        >
+          Profile
+        </p>
+      </div>
+      <button
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        data-testid="base-card-close-button"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
            />
+          </svg>
+        </div>
+      </button>
    </div>
    <div
      class="mx_AutoHideScrollbar"
@ -51,8 +82,39 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
      class="mx_BaseCard_header"
    >
      <div
-        class="mx_BaseCard_header_spacer"
+        class="mx_BaseCard_header_title"
+      >
+        <p
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
+        >
+          Profile
+        </p>
+      </div>
+      <button
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        data-testid="base-card-close-button"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
            />
+          </svg>
+        </div>
+      </button>
    </div>
    <div
      class="mx_AutoHideScrollbar"