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>

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

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();

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();

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

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 {

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();
+        await this.page.locator(".mx_RightPanel").getByTestId("base-card-close-button").click();
-        if (await this.page.locator("#thread-panel").isVisible()) {
-            await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
-        }
         await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible();
     }
 

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

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

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

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

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 {

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

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;

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

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>

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={
+                    header={_t("notifications|enable_prompt_toast_title")}
-                        <div className="mx_BaseCard_header_title">
-                            <Heading size="4" className="mx_BaseCard_header_title_heading">
-                                {_t("notifications|enable_prompt_toast_title")}
-                            </Heading>
-                        </div>
-                    }
                     /**
                      * Need to rename this CSS class to something more generic
                      * Will be done once all the panels are using a similar layout

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

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} />
                 }

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">
-                                    {header}
+                                    <Text
-                                </Text>
+                                        size="md"
+                                        weight="medium"
+                                        className="mx_BaseCard_header_title_heading"
+                                        role="heading"
+                                    >
+                                        {header}
+                                    </Text>
+                                </div>
                             ) : (
                                 (header ?? <div className="mx_BaseCard_header_spacer" />)
                             )}

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

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={
+            header={_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })}
-                <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>
-            }
             className="mx_PinnedMessagesCard"
             onClose={onClose}
         >

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

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,42 +337,34 @@ const RoomSummaryCard: React.FC<IProps> = ({
     const canInviteToState = useEventEmitterState(room, RoomStateEvent.Update, () => canInviteTo(room));
     const isFavorite = roomTags.includes(DefaultTagID.Favourite);
 
+    const header = onSearchChange && (
+        <Form.Root className="mx_RoomSummaryCard_search" onSubmit={(e) => e.preventDefault()}>
+            <Search
+                placeholder={_t("room|search|placeholder")}
+                name="room_message_search"
+                onChange={onSearchChange}
+                className="mx_no_textinput"
+                ref={searchInputRef}
+                autoFocus={focusRoomSearch}
+                onKeyDown={(e) => {
+                    if (searchInputRef.current && e.key === Key.ESCAPE) {
+                        searchInputRef.current.value = "";
+                        onSearchCancel?.();
+                    }
+                }}
+            />
+        </Form.Root>
+    );
+
     return (
         <BaseCard
-            hideHeaderButtons
             id="room-summary-panel"
             className="mx_RoomSummaryCard"
             ariaLabelledBy="room-summary-panel-tab"
             role="tabpanel"
+            header={header}
         >
-            <Flex
+            {roomInfo}
-                as="header"
-                className="mx_RoomSummaryCard_header"
-                gap="var(--cpd-space-3x)"
-                align="center"
-                justify="space-between"
-            >
-                {onSearchChange && (
-                    <Form.Root className="mx_RoomSummaryCard_search" onSubmit={(e) => e.preventDefault()}>
-                        <Search
-                            placeholder={_t("room|search|placeholder")}
-                            name="room_message_search"
-                            onChange={onSearchChange}
-                            className="mx_no_textinput"
-                            ref={searchInputRef}
-                            autoFocus={focusRoomSearch}
-                            onKeyDown={(e) => {
-                                if (searchInputRef.current && e.key === Key.ESCAPE) {
-                                    searchInputRef.current.value = "";
-                                    onSearchCancel?.();
-                                }
-                            }}
-                        />
-                    </Form.Root>
-                )}
-            </Flex>
-
-            {header}
 
             <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}
+                        />
                     </>
                 )}
 

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} />}

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}
             >

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 */}

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"

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"

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();
+    });
+});

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

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();

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>
+`;

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"

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
+        <p
-          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          role="heading"
         >
-          Pinned message
+          Pinned messages
-        </h4>
+        </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
+        <p
-          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+          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
+        <p
-          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+          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"

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>
-`;

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"

test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -77,11 +77,16 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
     <div
       class="mx_BaseCard_header"
     >
-      <p
+      <div
-        class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title"
+        class="mx_BaseCard_header_title"
       >
-        Profile
+        <p
-      </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"
@@ -385,11 +390,16 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
     <div
       class="mx_BaseCard_header"
     >
-      <p
+      <div
-        class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title"
+        class="mx_BaseCard_header_title"
       >
-        Profile
+        <p
-      </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"

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"