Add room topic to right panel room info (#12503)

* Add room topic to right panel room info Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak styles Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot 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> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add snapshot tests 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-05-10 11:00:43 +01:00 · 2024-05-10 11:00:43 +01:00 · eee0b2a9c3
parent 38893928cb
commit eee0b2a9c3
18 changed files with 1055 additions and 33 deletions
--- 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/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png
+++ b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png
--- a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png
+++ b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png
--- a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png
+++ b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png
--- a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png
+++ b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png
--- a/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png
+++ b/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-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/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
+++ b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-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/views/right_panel/_BaseCard.pcss
+++ b/res/css/views/right_panel/_BaseCard.pcss
@ -90,6 +90,7 @@ limitations under the License.
        min-height: 0;
        width: 100%;
        height: 100%;
+        scrollbar-gutter: stable;
    }

    .mx_BaseCard_Group {
--- a/res/css/views/right_panel/_RoomSummaryCard.pcss
+++ b/res/css/views/right_panel/_RoomSummaryCard.pcss
@ -51,6 +51,52 @@ limitations under the License.
        }
    }

+    .mx_RoomSummaryCard_topic {
+        padding: 0 12px;
+
+        .mx_Box {
+            width: 100%;
+        }
+
+        .mx_RoomSummaryCard_topic_container {
+            display: flex;
+        }
+
+        .mx_RoomSummaryCard_topic_edit {
+            width: max-content;
+        }
+
+        p {
+            white-space: pre-wrap;
+            width: 100%;
+            min-width: 0;
+            margin: 0;
+        }
+
+        a {
+            cursor: pointer;
+        }
+
+        .mx_RoomSummaryCard_topic_chevron {
+            transition: transform 0.3s;
+        }
+
+        &.mx_RoomSummaryCard_topic_collapsed {
+            p {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: normal;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+            }
+
+            .mx_RoomSummaryCard_topic_chevron {
+                transform: rotate(-90deg);
+            }
+        }
+    }
+
    .mx_RoomSummaryCard_appsGroup {
        .mx_RoomSummaryCard_Button {
            /* this button is special so we have to override some of the original styling */
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@ -461,9 +461,13 @@ export function topicToHtml(
        emojiBodyElements = formatEmojis(topic, false);
    }

-    return isFormattedTopic ? (
-        <span ref={ref} dangerouslySetInnerHTML={{ __html: safeTopic }} dir="auto" />
-    ) : (
+    if (isFormattedTopic) {
+        if (!safeTopic) return null;
+        return <span ref={ref} dangerouslySetInnerHTML={{ __html: safeTopic }} dir="auto" />;
+    }
+
+    if (!emojiBodyElements && !topic) return null;
+    return (
        <span ref={ref} dir="auto">
            {emojiBodyElements || topic}
        </span>
--- a/src/components/views/elements/RoomTopic.tsx
+++ b/src/components/views/elements/RoomTopic.tsx
@ -36,6 +36,17 @@ interface IProps extends React.HTMLProps<HTMLDivElement> {
    room: Room;
 }

+export function onRoomTopicLinkClick(e: React.MouseEvent): void {
+    const anchor = e.target as HTMLLinkElement;
+    const localHref = tryTransformPermalinkToLocalHref(anchor.href);
+
+    if (localHref !== anchor.href) {
+        // it could be converted to a localHref -> therefore handle locally
+        e.preventDefault();
+        window.location.hash = localHref;
+    }
+}
+
 export default function RoomTopic({ room, className, ...props }: IProps): JSX.Element {
    const client = useContext(MatrixClientContext);
    const ref = useRef<HTMLDivElement>(null);
@ -54,14 +65,7 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
                return;
            }

-            const anchor = e.target as HTMLLinkElement;
-            const localHref = tryTransformPermalinkToLocalHref(anchor.href);
-
-            if (localHref !== anchor.href) {
-                // it could be converted to a localHref -> therefore handle locally
-                e.preventDefault();
-                window.location.hash = localHref;
-            }
+            onRoomTopicLinkClick(e);
        },
        [props],
    );
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@ -14,9 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import React, { SyntheticEvent, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
-import { MenuItem, Tooltip, Separator, ToggleMenuItem, Text, Badge, Heading } from "@vector-im/compound-web";
+import {
+    MenuItem,
+    Tooltip,
+    Separator,
+    ToggleMenuItem,
+    Text,
+    Badge,
+    Heading,
+    IconButton,
+    Link,
+} from "@vector-im/compound-web";
 import { Icon as SearchIcon } from "@vector-im/compound-design-tokens/icons/search.svg";
 import { Icon as FavouriteIcon } from "@vector-im/compound-design-tokens/icons/favourite.svg";
 import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
@ -32,6 +42,7 @@ import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-s
 import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
 import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
 import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
+import { Icon as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
 import { EventType, JoinRule, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";

 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@ -74,6 +85,10 @@ import { canInviteTo } from "../../../utils/room/canInviteTo";
 import { inviteToRoom } from "../../../utils/room/inviteToRoom";
 import { useAccountData } from "../../../hooks/useAccountData";
 import { useRoomState } from "../../../hooks/useRoomState";
+import { useTopic } from "../../../hooks/room/useTopic";
+import { Linkify, topicToHtml } from "../../../HtmlUtils";
+import { Box } from "../../utils/Box";
+import { onRoomTopicLinkClick } from "../elements/RoomTopic";

 interface IProps {
    room: Room;
@ -271,6 +286,84 @@ const onRoomSettingsClick = (ev: Event): void => {
    PosthogTrackers.trackInteraction("WebRightPanelRoomInfoSettingsButton", ev);
 };

+const RoomTopic: React.FC<Pick<IProps, "room">> = ({ room }): JSX.Element | null => {
+    const [expanded, setExpanded] = useState(false);
+
+    const topic = useTopic(room);
+    const body = topicToHtml(topic?.text, topic?.html);
+
+    const onEditClick = (e: SyntheticEvent): void => {
+        e.preventDefault();
+        e.stopPropagation();
+        defaultDispatcher.dispatch({ action: "open_room_settings" });
+    };
+
+    if (!body) {
+        return (
+            <Flex
+                as="section"
+                direction="column"
+                justify="center"
+                gap="var(--cpd-space-2x)"
+                className="mx_RoomSummaryCard_topic"
+            >
+                <Box flex="1">
+                    <Link kind="primary" onClick={onEditClick}>
+                        <Text size="sm" weight="regular">
+                            {_t("right_panel|add_topic")}
+                        </Text>
+                    </Link>
+                </Box>
+            </Flex>
+        );
+    }
+
+    const content = expanded ? <Linkify>{body}</Linkify> : body;
+    return (
+        <Flex
+            as="section"
+            direction="column"
+            justify="center"
+            gap="var(--cpd-space-2x)"
+            className={classNames("mx_RoomSummaryCard_topic", {
+                mx_RoomSummaryCard_topic_collapsed: !expanded,
+            })}
+        >
+            <Box flex="1" className="mx_RoomSummaryCard_topic_container">
+                <Text
+                    size="sm"
+                    weight="regular"
+                    onClick={(ev: React.MouseEvent): void => {
+                        if (ev.target instanceof HTMLAnchorElement) {
+                            onRoomTopicLinkClick(ev);
+                            return;
+                        }
+                        setExpanded(!expanded);
+                    }}
+                >
+                    {content}
+                </Text>
+                <IconButton
+                    className="mx_RoomSummaryCard_topic_chevron"
+                    size="24px"
+                    onClick={() => setExpanded(!expanded)}
+                >
+                    <ChevronDownIcon />
+                </IconButton>
+            </Box>
+            {expanded && (
+                <Box flex="1" className="mx_RoomSummaryCard_topic_edit">
+                    <Link kind="primary" onClick={onEditClick}>
+                        <Text size="sm" weight="regular">
+                            {_t("action|edit")}
+                        </Text>
+                    </Link>
+                </Box>
+            )}
+        </Flex>
+    );
+};
+
 const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, onSearchClick }) => {
    const cli = useContext(MatrixClientContext);

@ -382,6 +475,8 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
                    </Badge>
                )}
            </Flex>
+
+            <RoomTopic room={room} />
        </header>
    );

--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@ -1821,6 +1821,7 @@
    },
    "right_panel": {
        "add_integrations": "Add widgets, bridges & bots",
+        "add_topic": "Add topic",
        "edit_integrations": "Edit widgets, bridges & bots",
        "export_chat_button": "Export chat",
        "files_button": "Files",
--- a/test/components/structures/snapshots/RoomView-test.tsx.snap
+++ b/test/components/structures/snapshots/RoomView-test.tsx.snap
@ -47,11 +47,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
          class="mx_LegacyRoomHeader_topic mx_RoomTopic"
          dir="auto"
          tabindex="0"
-        >
-          <span
-            dir="auto"
-          />
-        </div>
+        />
      </div>
    </header>
    <div
@ -129,11 +125,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
          class="mx_LegacyRoomHeader_topic mx_RoomTopic"
          dir="auto"
          tabindex="0"
-        >
-          <span
-            dir="auto"
-          />
-        </div>
+        />
      </div>
    </header>
    <main
@ -296,11 +288,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
          class="mx_LegacyRoomHeader_topic mx_RoomTopic"
          dir="auto"
          tabindex="0"
-        >
-          <span
-            dir="auto"
-          />
-        </div>
+        />
      </div>
    </header>
    <main
@ -547,11 +535,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
          class="mx_LegacyRoomHeader_topic mx_RoomTopic"
          dir="auto"
          tabindex="0"
-        >
-          <span
-            dir="auto"
-          />
-        </div>
+        />
      </div>
    </header>
    <main
--- a/test/components/views/right_panel/RoomSummaryCard-test.tsx
+++ b/test/components/views/right_panel/RoomSummaryCard-test.tsx
@ -107,6 +107,40 @@ describe("<RoomSummaryCard />", () => {
        expect(container).toMatchSnapshot();
    });

+    it("renders the room topic in the summary", () => {
+        room.currentState.setStateEvents([
+            new MatrixEvent({
+                type: "m.room.topic",
+                room_id: roomId,
+                sender: userId,
+                content: {
+                    topic: "This is the room's topic.",
+                },
+                state_key: "",
+            }),
+        ]);
+        const { container } = getComponent();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("has button to edit topic when expanded", () => {
+        room.currentState.setStateEvents([
+            new MatrixEvent({
+                type: "m.room.topic",
+                room_id: roomId,
+                sender: userId,
+                content: {
+                    topic: "This is the room's topic.",
+                },
+                state_key: "",
+            }),
+        ]);
+        const { container, getByText } = getComponent();
+        fireEvent.click(screen.getByText("This is the room's topic."));
+        expect(getByText("Edit")).toBeInTheDocument();
+        expect(container).toMatchSnapshot();
+    });
+
    it("opens the search", async () => {
        const onSearchClick = jest.fn();
        const { getByLabelText } = getComponent({
--- a/test/components/views/right_panel/snapshots/RoomSummaryCard-test.tsx.snap
+++ b/test/components/views/right_panel/snapshots/RoomSummaryCard-test.tsx.snap
@ -1,5 +1,429 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
+<div>
+  <div
+    class="mx_BaseCard mx_RoomSummaryCard"
+  >
+    <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);"
+      >
+        <button
+          aria-label="Search"
+          class="mx_RoomSummaryCard_searchBtn"
+          data-testid="summary-search"
+        >
+          <div
+            height="100%"
+            width="100%"
+          />
+        </button>
+        <div
+          aria-label="Close"
+          class="mx_AccessibleButton mx_BaseCard_close"
+          data-testid="base-card-close-button"
+          role="button"
+          tabindex="0"
+        />
+      </header>
+      <header
+        class="mx_RoomSummaryCard_container"
+      >
+        <span
+          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+          data-color="1"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 80px;"
+        >
+          !
+        </span>
+        <h1
+          class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121 mx_RoomSummaryCard_roomName text-primary"
+          title="!room:domain.org"
+        >
+          !room:domain.org
+        </h1>
+        <div
+          class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 mx_RoomSummaryCard_alias text-secondary"
+          title=""
+        />
+        <section
+          class="mx_Flex mx_RoomSummaryCard_badges"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
+        >
+          <span
+            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
+            data-kind="default"
+          >
+            <div
+              width="1em"
+            />
+            Not encrypted
+          </span>
+        </section>
+        <section
+          class="mx_Flex mx_RoomSummaryCard_topic"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
+        >
+          <div
+            class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
+            style="--mx-box-flex: 1;"
+          >
+            <p
+              class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+            >
+              <span
+                dir="auto"
+              >
+                This is the room's topic.
+              </span>
+            </p>
+            <button
+              class="_icon-button_16nk7_17 mx_RoomSummaryCard_topic_chevron"
+              role="button"
+              style="--cpd-icon-button-size: 24px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%;"
+              >
+                <div />
+              </div>
+            </button>
+          </div>
+          <div
+            class="mx_Box mx_RoomSummaryCard_topic_edit mx_Box--flex"
+            style="--mx-box-flex: 1;"
+          >
+            <a
+              class="_link_1mzip_17"
+              data-kind="primary"
+              rel="noreferrer noopener"
+            >
+              <p
+                class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+              >
+                Edit
+              </p>
+            </a>
+          </div>
+        </section>
+      </header>
+      <div
+        class="_separator_144s5_17"
+        data-kind="primary"
+        data-orientation="horizontal"
+        role="separator"
+      />
+      <label
+        class="_item_1gwvj_17 _interactive_1gwvj_36"
+        data-kind="primary"
+        for=":r3:"
+        role="menuitemcheckbox"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Favourite
+        </span>
+        <div
+          class="_container_ik1u1_18"
+        >
+          <input
+            class="_input_ik1u1_32"
+            id=":r3:"
+            type="checkbox"
+          />
+          <div
+            class="_ui_ik1u1_42"
+          />
+        </div>
+      </label>
+      <button
+        class="_item_1gwvj_17 _interactive_1gwvj_36"
+        data-kind="primary"
+        role="menuitem"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Invite
+        </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.876.876 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"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Copy link
+        </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.876.876 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"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Settings
+        </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.876.876 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"
+        data-orientation="horizontal"
+        role="separator"
+      />
+      <button
+        class="_item_1gwvj_17 _interactive_1gwvj_36"
+        data-kind="primary"
+        role="menuitem"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <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.876.876 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"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Files
+        </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.876.876 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"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Poll history
+        </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.876.876 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"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Export Chat
+        </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.876.876 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"
+        data-orientation="horizontal"
+        role="separator"
+      />
+      <button
+        class="_item_1gwvj_17 _interactive_1gwvj_36"
+        data-kind="critical"
+        role="menuitem"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Leave room
+        </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.876.876 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="mx_BaseCard_Group mx_RoomSummaryCard_appsGroup"
+      >
+        <h2>
+          Widgets
+        </h2>
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+          role="button"
+          tabindex="0"
+        >
+          Add widgets, bridges & bots
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<RoomSummaryCard /> renders the room summary 1`] = `
 <div>
  <div
@ -68,6 +492,27 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
            Not encrypted
          </span>
        </section>
+        <section
+          class="mx_Flex mx_RoomSummaryCard_topic"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
+        >
+          <div
+            class="mx_Box mx_Box--flex"
+            style="--mx-box-flex: 1;"
+          >
+            <a
+              class="_link_1mzip_17"
+              data-kind="primary"
+              rel="noreferrer noopener"
+            >
+              <p
+                class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+              >
+                Add topic
+              </p>
+            </a>
+          </div>
+        </section>
      </header>
      <div
        class="_separator_144s5_17"
@ -375,3 +820,411 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
  </div>
 </div>
 `;
+
+exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
+<div>
+  <div
+    class="mx_BaseCard mx_RoomSummaryCard"
+  >
+    <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);"
+      >
+        <button
+          aria-label="Search"
+          class="mx_RoomSummaryCard_searchBtn"
+          data-testid="summary-search"
+        >
+          <div
+            height="100%"
+            width="100%"
+          />
+        </button>
+        <div
+          aria-label="Close"
+          class="mx_AccessibleButton mx_BaseCard_close"
+          data-testid="base-card-close-button"
+          role="button"
+          tabindex="0"
+        />
+      </header>
+      <header
+        class="mx_RoomSummaryCard_container"
+      >
+        <span
+          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+          data-color="1"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 80px;"
+        >
+          !
+        </span>
+        <h1
+          class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121 mx_RoomSummaryCard_roomName text-primary"
+          title="!room:domain.org"
+        >
+          !room:domain.org
+        </h1>
+        <div
+          class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 mx_RoomSummaryCard_alias text-secondary"
+          title=""
+        />
+        <section
+          class="mx_Flex mx_RoomSummaryCard_badges"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
+        >
+          <span
+            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
+            data-kind="default"
+          >
+            <div
+              width="1em"
+            />
+            Not encrypted
+          </span>
+        </section>
+        <section
+          class="mx_Flex mx_RoomSummaryCard_topic mx_RoomSummaryCard_topic_collapsed"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
+        >
+          <div
+            class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
+            style="--mx-box-flex: 1;"
+          >
+            <p
+              class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+            >
+              <span
+                dir="auto"
+              >
+                This is the room's topic.
+              </span>
+            </p>
+            <button
+              class="_icon-button_16nk7_17 mx_RoomSummaryCard_topic_chevron"
+              role="button"
+              style="--cpd-icon-button-size: 24px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%;"
+              >
+                <div />
+              </div>
+            </button>
+          </div>
+        </section>
+      </header>
+      <div
+        class="_separator_144s5_17"
+        data-kind="primary"
+        data-orientation="horizontal"
+        role="separator"
+      />
+      <label
+        class="_item_1gwvj_17 _interactive_1gwvj_36"
+        data-kind="primary"
+        for=":r2:"
+        role="menuitemcheckbox"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Favourite
+        </span>
+        <div
+          class="_container_ik1u1_18"
+        >
+          <input
+            class="_input_ik1u1_32"
+            id=":r2:"
+            type="checkbox"
+          />
+          <div
+            class="_ui_ik1u1_42"
+          />
+        </div>
+      </label>
+      <button
+        class="_item_1gwvj_17 _interactive_1gwvj_36"
+        data-kind="primary"
+        role="menuitem"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Invite
+        </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.876.876 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"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Copy link
+        </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.876.876 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"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Settings
+        </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.876.876 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"
+        data-orientation="horizontal"
+        role="separator"
+      />
+      <button
+        class="_item_1gwvj_17 _interactive_1gwvj_36"
+        data-kind="primary"
+        role="menuitem"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <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.876.876 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"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Files
+        </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.876.876 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"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Poll history
+        </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.876.876 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"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Export Chat
+        </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.876.876 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"
+        data-orientation="horizontal"
+        role="separator"
+      />
+      <button
+        class="_item_1gwvj_17 _interactive_1gwvj_36"
+        data-kind="critical"
+        role="menuitem"
+      >
+        <div
+          aria-hidden="true"
+          class="_icon_1gwvj_44"
+          height="24"
+          width="24"
+        />
+        <span
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+        >
+          Leave room
+        </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.876.876 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="mx_BaseCard_Group mx_RoomSummaryCard_appsGroup"
+      >
+        <h2>
+          Widgets
+        </h2>
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+          role="button"
+          tabindex="0"
+        >
+          Add widgets, bridges & bots
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;