Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/react18/update

# Conflicts:
#	src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
#	test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

playwright/e2e/polls/pollHistory.spec.ts

@@ -69,7 +69,7 @@ test.describe("Poll history", () => {
     async function openPollHistory(app: ElementAppPage): Promise<void> {
         const { page } = app;
         await app.toggleRoomInfoPanel();
-        await page.locator(".mx_RoomSummaryCard").getByRole("menuitem", { name: "Poll history" }).click();
+        await page.locator(".mx_RoomSummaryCard").getByRole("menuitem", { name: "Polls" }).click();
     }
 
     test.use({

res/css/views/right_panel/_RoomSummaryCard.pcss

@@ -15,6 +15,9 @@ limitations under the License.
 */
 
 .mx_RoomSummaryCard {
+    --cpd-separator-inset: var(--cpd-space-4x);
+    --cpd-separator-spacing: var(--cpd-space-4x);
+
     .mx_RoomSummaryCard_container {
         text-align: center;
         margin: $spacing-20 var(--cpd-space-4x) 0;

res/css/views/rooms/_RoomPreviewBar.pcss

@@ -163,6 +163,10 @@ a.mx_RoomPreviewBar_inviter {
     cursor: pointer;
 }
 
+.mx_RoomPreviewBar_inviter_mxid {
+    color: var(--cpd-color-text-secondary);
+}
+
 .mx_RoomPreviewBar_icon {
     margin-right: 8px;
     vertical-align: text-top;

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -385,18 +385,11 @@ const RoomSummaryCard: React.FC<IProps> = ({
                     disabled={!canInviteToState}
                     onSelect={() => inviteToRoom(room)}
                 />
-                <MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onSelect={onShareRoomClick} />
-                <MenuItem Icon={SettingsIcon} label={_t("common|settings")} onSelect={onRoomSettingsClick} />
 
                 <Separator />
+
                 {!isVideoRoom && (
                     <>
-                        <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
-                        <MenuItem
-                            Icon={PollsIcon}
-                            label={_t("right_panel|polls_button")}
-                            onSelect={onRoomPollHistoryClick}
-                        />
                         {pinningEnabled && (
                             <MenuItem
                                 Icon={PinIcon}
@@ -408,6 +401,21 @@ const RoomSummaryCard: React.FC<IProps> = ({
                                 </Text>
                             </MenuItem>
                         )}
+                        <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
+                    </>
+                )}
+
+                <Separator />
+
+                <MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onSelect={onShareRoomClick} />
+
+                {!isVideoRoom && (
+                    <>
+                        <MenuItem
+                            Icon={PollsIcon}
+                            label={_t("right_panel|polls_button")}
+                            onSelect={onRoomPollHistoryClick}
+                        />
                         <MenuItem
                             Icon={ExportArchiveIcon}
                             label={_t("export_chat|title")}
@@ -416,6 +424,8 @@ const RoomSummaryCard: React.FC<IProps> = ({
                     </>
                 )}
 
+                <MenuItem Icon={SettingsIcon} label={_t("common|settings")} onSelect={onRoomSettingsClick} />
+
                 <Separator />
 
                 <MenuItem

src/components/views/rooms/RoomPreviewBar.tsx

@@ -506,33 +506,39 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                 break;
             }
             case MessageCase.Invite: {
+                const isDM = this.isDMInvite();
                 const avatar = <RoomAvatar room={this.props.room} oobData={this.props.oobData} />;
 
                 const inviteMember = this.getInviteMember();
-                let inviterElement: JSX.Element;
+                const userName = (
-                if (inviteMember) {
+                    <span className="mx_RoomPreviewBar_inviter">
-                    inviterElement = (
+                        {inviteMember?.rawDisplayName ?? this.props.inviterName}
-                        <span>
+                    </span>
-                            <span className="mx_RoomPreviewBar_inviter">{inviteMember.rawDisplayName}</span> (
+                );
-                            {inviteMember.userId})
+                const inviterElement = (
-                        </span>
+                    <>
-                    );
+                        {isDM
-                } else {
+                            ? _t("room|dm_invite_subtitle", {}, { userName })
-                    inviterElement = <span className="mx_RoomPreviewBar_inviter">{this.props.inviterName}</span>;
+                            : _t("room|invite_subtitle", {}, { userName })}
-                }
+                        {inviteMember && (
+                            <>
+                                <br />
+                                <span className="mx_RoomPreviewBar_inviter_mxid">{inviteMember.userId}</span>
+                            </>
+                        )}
+                    </>
+                );
 
-                const isDM = this.isDMInvite();
                 if (isDM) {
                     title = _t("room|dm_invite_title", {
                         user: inviteMember?.name ?? this.props.inviterName,
                     });
-                    subTitle = [avatar, _t("room|dm_invite_subtitle", {}, { userName: () => inviterElement })];
                     primaryActionLabel = _t("room|dm_invite_action");
                 } else {
                     title = _t("room|invite_title", { roomName });
-                    subTitle = [avatar, _t("room|invite_subtitle", {}, { userName: () => inviterElement })];
                     primaryActionLabel = _t("action|accept");
                 }
+                subTitle = [avatar, inviterElement];
 
                 const myUserId = MatrixClientPeg.safeGet().getSafeUserId();
                 const member = this.props.room?.currentState.getMember(myUserId);

src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx

@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { useCallback, useContext, useEffect } from "react";
 import { HTTPError } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -34,69 +34,106 @@ import { SettingsSection } from "../../shared/SettingsSection";
 import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
 import { SDKContext } from "../../../../../contexts/SDKContext";
 import UserPersonalInfoSettings from "../../UserPersonalInfoSettings";
+import { useMatrixClientContext } from "../../../../../contexts/MatrixClientContext";
 
 interface IProps {
     closeSettingsFn: () => void;
 }
 
-interface IState {
+interface AccountSectionProps {
     canChangePassword: boolean;
-    idServerName?: string;
+    onPasswordChangeError: (e: Error) => void;
-    externalAccountManagementUrl?: string;
+    onPasswordChanged: () => void;
-    canMake3pidChanges: boolean;
-    canSetDisplayName: boolean;
-    canSetAvatar: boolean;
 }
 
-export default class GeneralUserSettingsTab extends React.Component<IProps, IState> {
+const AccountSection: React.FC<AccountSectionProps> = ({
-    public static contextType = SDKContext;
+    canChangePassword,
-    public declare context: React.ContextType<typeof SDKContext>;
+    onPasswordChangeError,
+    onPasswordChanged,
+}) => {
+    if (!canChangePassword) return <></>;
 
-    public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
+    return (
-        super(props, context);
+        <>
+            <SettingsSubsection
+                heading={_t("settings|general|account_section")}
+                stretchContent
+                data-testid="accountSection"
+            >
+                <SettingsSubsectionText>{_t("settings|general|password_change_section")}</SettingsSubsectionText>
+                <ChangePassword
+                    className="mx_GeneralUserSettingsTab_section--account_changePassword"
+                    rowClassName=""
+                    buttonKind="primary"
+                    onError={onPasswordChangeError}
+                    onFinished={onPasswordChanged}
+                />
+            </SettingsSubsection>
+        </>
+    );
+};
 
-        this.state = {
+interface ManagementSectionProps {
-            canChangePassword: false,
+    onDeactivateClicked: () => void;
-            canMake3pidChanges: false,
+}
-            canSetDisplayName: false,
-            canSetAvatar: false,
-        };
 
-        this.getCapabilities();
+const ManagementSection: React.FC<ManagementSectionProps> = ({ onDeactivateClicked }) => {
-    }
+    return (
+        <SettingsSection heading={_t("settings|general|deactivate_section")}>
+            <SettingsSubsection
+                heading={_t("settings|general|account_management_section")}
+                data-testid="account-management-section"
+                description={_t("settings|general|deactivate_warning")}
+            >
+                <AccessibleButton onClick={onDeactivateClicked} kind="danger">
+                    {_t("settings|general|deactivate_section")}
+                </AccessibleButton>
+            </SettingsSubsection>
+        </SettingsSection>
+    );
+};
 
-    private async getCapabilities(): Promise<void> {
+const GeneralUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
-        const cli = this.context.client!;
+    const [externalAccountManagementUrl, setExternalAccountManagementUrl] = React.useState<string | undefined>();
+    const [canMake3pidChanges, setCanMake3pidChanges] = React.useState<boolean>(false);
+    const [canSetDisplayName, setCanSetDisplayName] = React.useState<boolean>(false);
+    const [canSetAvatar, setCanSetAvatar] = React.useState<boolean>(false);
+    const [canChangePassword, setCanChangePassword] = React.useState<boolean>(false);
 
-        const capabilities = (await cli.getCapabilities()) ?? {};
+    const cli = useMatrixClientContext();
-        const changePasswordCap = capabilities["m.change_password"];
+    const sdkContext = useContext(SDKContext);
 
-        // You can change your password so long as the capability isn't explicitly disabled. The implicit
+    useEffect(() => {
-        // behaviour is you can change your password when the capability is missing or has not-false as
+        (async () => {
-        // the enabled flag value.
+            const capabilities = (await cli.getCapabilities()) ?? {};
-        const canChangePassword = !changePasswordCap || changePasswordCap["enabled"] !== false;
+            const changePasswordCap = capabilities["m.change_password"];
 
-        await this.context.oidcClientStore.readyPromise; // wait for the store to be ready
+            // You can change your password so long as the capability isn't explicitly disabled. The implicit
-        const externalAccountManagementUrl = this.context.oidcClientStore.accountManagementEndpoint;
+            // behaviour is you can change your password when the capability is missing or has not-false as
-        // https://spec.matrix.org/v1.7/client-server-api/#m3pid_changes-capability
+            // the enabled flag value.
-        // We support as far back as v1.1 which doesn't have m.3pid_changes
+            const canChangePassword = !changePasswordCap || changePasswordCap["enabled"] !== false;
-        // so the behaviour for when it is missing has to be assume true
-        const canMake3pidChanges = !capabilities["m.3pid_changes"] || capabilities["m.3pid_changes"].enabled === true;
 
-        const canSetDisplayName =
+            await sdkContext.oidcClientStore.readyPromise; // wait for the store to be ready
-            !capabilities["m.set_displayname"] || capabilities["m.set_displayname"].enabled === true;
+            const externalAccountManagementUrl = sdkContext.oidcClientStore.accountManagementEndpoint;
-        const canSetAvatar = !capabilities["m.set_avatar_url"] || capabilities["m.set_avatar_url"].enabled === true;
+            // https://spec.matrix.org/v1.7/client-server-api/#m3pid_changes-capability
+            // We support as far back as v1.1 which doesn't have m.3pid_changes
+            // so the behaviour for when it is missing has to be assume true
+            const canMake3pidChanges =
+                !capabilities["m.3pid_changes"] || capabilities["m.3pid_changes"].enabled === true;
 
-        this.setState({
+            const canSetDisplayName =
-            canChangePassword,
+                !capabilities["m.set_displayname"] || capabilities["m.set_displayname"].enabled === true;
-            externalAccountManagementUrl,
+            const canSetAvatar = !capabilities["m.set_avatar_url"] || capabilities["m.set_avatar_url"].enabled === true;
-            canMake3pidChanges,
-            canSetDisplayName,
-            canSetAvatar,
-        });
-    }
 
-    private onPasswordChangeError = (err: Error): void => {
+            setCanMake3pidChanges(canMake3pidChanges);
+            setCanSetDisplayName(canSetDisplayName);
+            setCanSetAvatar(canSetAvatar);
+            setExternalAccountManagementUrl(externalAccountManagementUrl);
+            setCanChangePassword(canChangePassword);
+        })();
+    }, [cli, sdkContext.oidcClientStore]);
+
+    const onPasswordChangeError = useCallback((err: Error): void => {
         logger.error("Failed to change password: " + err);
 
         let underlyingError = err;
@@ -126,85 +163,49 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             title: _t("settings|general|error_password_change_title"),
             description: errorMessageToDisplay,
         });
-    };
+    }, []);
 
-    private onPasswordChanged = (): void => {
+    const onPasswordChanged = useCallback((): void => {
         const description = _t("settings|general|password_change_success");
         // TODO: Figure out a design that doesn't involve replacing the current dialog
         Modal.createDialog(ErrorDialog, {
             title: _t("common|success"),
             description,
         });
-    };
+    }, []);
 
-    private onDeactivateClicked = (): void => {
+    const onDeactivateClicked = useCallback((): void => {
         Modal.createDialog(DeactivateAccountDialog, {
             onFinished: (success) => {
-                if (success) this.props.closeSettingsFn();
+                if (success) closeSettingsFn();
             },
         });
-    };
+    }, [closeSettingsFn]);
 
-    private renderAccountSection(): JSX.Element | undefined {
+    let accountManagementSection: JSX.Element | undefined;
-        if (!this.state.canChangePassword) return undefined;
+    const isAccountManagedExternally = Boolean(externalAccountManagementUrl);
-
+    if (SettingsStore.getValue(UIFeature.Deactivate) && !isAccountManagedExternally) {
-        return (
+        accountManagementSection = <ManagementSection onDeactivateClicked={onDeactivateClicked} />;
-            <>
-                <SettingsSubsection
-                    heading={_t("settings|general|account_section")}
-                    stretchContent
-                    data-testid="accountSection"
-                >
-                    <SettingsSubsectionText>{_t("settings|general|password_change_section")}</SettingsSubsectionText>
-                    <ChangePassword
-                        className="mx_GeneralUserSettingsTab_section--account_changePassword"
-                        rowClassName=""
-                        buttonKind="primary"
-                        onError={this.onPasswordChangeError}
-                        onFinished={this.onPasswordChanged}
-                    />
-                </SettingsSubsection>
-            </>
-        );
     }
 
-    private renderManagementSection(): JSX.Element {
+    return (
-        // TODO: Improve warning text for account deactivation
+        <SettingsTab data-testid="mx_GeneralUserSettingsTab">
-        return (
+            <SettingsSection>
-            <SettingsSection heading={_t("settings|general|deactivate_section")}>
+                <UserProfileSettings
-                <SettingsSubsection
+                    externalAccountManagementUrl={externalAccountManagementUrl}
-                    heading={_t("settings|general|account_management_section")}
+                    canSetDisplayName={canSetDisplayName}
-                    data-testid="account-management-section"
+                    canSetAvatar={canSetAvatar}
-                    description={_t("settings|general|deactivate_warning")}
+                />
-                >
+                <UserPersonalInfoSettings canMake3pidChanges={canMake3pidChanges} />
-                    <AccessibleButton onClick={this.onDeactivateClicked} kind="danger">
+                <AccountSection
-                        {_t("settings|general|deactivate_section")}
+                    canChangePassword={canChangePassword}
-                    </AccessibleButton>
+                    onPasswordChanged={onPasswordChanged}
-                </SettingsSubsection>
+                    onPasswordChangeError={onPasswordChangeError}
+                />
             </SettingsSection>
-        );
+            {accountManagementSection}
-    }
+        </SettingsTab>
+    );
+};
 
-    public render(): React.ReactNode {
+export default GeneralUserSettingsTab;
-        let accountManagementSection: JSX.Element | undefined;
-        const isAccountManagedExternally = !!this.state.externalAccountManagementUrl;
-        if (SettingsStore.getValue(UIFeature.Deactivate) && !isAccountManagedExternally) {
-            accountManagementSection = this.renderManagementSection();
-        }
-
-        return (
-            <SettingsTab data-testid="mx_GeneralUserSettingsTab">
-                <SettingsSection>
-                    <UserProfileSettings
-                        externalAccountManagementUrl={this.state.externalAccountManagementUrl}
-                        canSetDisplayName={this.state.canSetDisplayName}
-                        canSetAvatar={this.state.canSetAvatar}
-                    />
-                    <UserPersonalInfoSettings canMake3pidChanges={this.state.canMake3pidChanges} />
-                    {this.renderAccountSection()}
-                </SettingsSection>
-                {accountManagementSection}
-            </SettingsTab>
-        );
-    }
-}

src/i18n/strings/en_EN.json

@@ -1846,7 +1846,7 @@
             },
             "title": "Pinned messages"
         },
-        "pinned_messages_button": "Pinned",
+        "pinned_messages_button": "Pinned messages",
         "poll": {
             "active_heading": "Active polls",
             "empty_active": "There are no active polls in this room",
@@ -1871,7 +1871,7 @@
             "view_in_timeline": "View poll in timeline",
             "view_poll": "View poll"
         },
-        "polls_button": "Poll history",
+        "polls_button": "Polls",
         "room_summary_card": {
             "title": "Room info"
         },
@@ -1991,7 +1991,7 @@
         "invite_reject_ignore": "Reject & Ignore user",
         "invite_sent_to_email": "This invite was sent to %(email)s",
         "invite_sent_to_email_room": "This invite to %(roomName)s was sent to %(email)s",
-        "invite_subtitle": "<userName/> invited you",
+        "invite_subtitle": "Invited by <userName/>",
         "invite_this_room": "Invite to this room",
         "invite_title": "Do you want to join %(roomName)s?",
         "inviter_unknown": "Unknown",

test/components/views/dialogs/RoomSettingsDialog-test.tsx

@@ -183,7 +183,7 @@ describe("<RoomSettingsDialog />", () => {
         it("displays poll history when tab clicked", () => {
             const { container } = getComponent();
 
-            fireEvent.click(screen.getByText("Poll history"));
+            fireEvent.click(screen.getByText("Polls"));
 
             expect(container.querySelector(".mx_SettingsTab")).toMatchSnapshot();
         });

test/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap

@@ -89,7 +89,7 @@ NodeList [
       class="mx_TabbedView_tabLabel_text"
       id="mx_tabpanel_ROOM_POLL_HISTORY_TAB_label"
     >
-      Poll history
+      Polls
     </span>
   </li>,
 ]
@@ -105,7 +105,7 @@ exports[`<RoomSettingsDialog /> poll history displays poll history when tab clic
     <h2
       class="mx_Heading_h2 mx_PollHistory_header"
     >
-      Poll history
+      Polls
     </h2>
     <div
       class="mx_PollHistoryList"

test/components/views/polls/pollHistory/PollHistory-test.tsx

@@ -321,7 +321,7 @@ describe("<PollHistory />", () => {
 
             fireEvent.click(getByText("Question?"));
 
-            expect(queryByText("Poll history")).not.toBeInTheDocument();
+            expect(queryByText("Polls")).not.toBeInTheDocument();
             // elements from MPollBody
             expect(getByText("Question?")).toMatchSnapshot();
             expect(getByText("Socks")).toBeInTheDocument();
@@ -397,13 +397,13 @@ describe("<PollHistory />", () => {
             expect(getByText("Question?")).toBeInTheDocument();
 
             // header not shown
-            expect(queryByText("Poll history")).not.toBeInTheDocument();
+            expect(queryByText("Polls")).not.toBeInTheDocument();
 
             expect(getByText("Active polls")).toMatchSnapshot();
             fireEvent.click(getByText("Active polls"));
 
             // main list header displayed again
-            expect(getByText("Poll history")).toBeInTheDocument();
+            expect(getByText("Polls")).toBeInTheDocument();
             // active filter still active
             expect(getByTestId("filter-tab-PollHistory_filter-ACTIVE").firstElementChild).toBeChecked();
             // list displayed

test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap

@@ -37,7 +37,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
     <h2
       class="mx_Heading_h2 mx_PollHistory_header"
     >
-      Poll history
+      Polls
     </h2>
     <div
       class="mx_PollHistoryList"

test/components/views/right_panel/RoomSummaryCard-test.tsx

@@ -271,7 +271,7 @@ describe("<RoomSummaryCard />", () => {
             mocked(settingsHooks.useFeatureEnabled).mockImplementation((feature) => feature === "feature_pinning");
             const { getByText } = getComponent();
 
-            expect(getByText("Pinned")).toBeInTheDocument();
+            expect(getByText("Pinned messages")).toBeInTheDocument();
         });
     });
 
@@ -279,14 +279,14 @@ describe("<RoomSummaryCard />", () => {
         it("renders poll history option", () => {
             const { getByText } = getComponent();
 
-            expect(getByText("Poll history")).toBeInTheDocument();
+            expect(getByText("Polls")).toBeInTheDocument();
         });
 
         it("opens poll history dialog on button click", () => {
             const permalinkCreator = new RoomPermalinkCreator(room);
             const { getByText } = getComponent({ permalinkCreator });
 
-            fireEvent.click(getByText("Poll history"));
+            fireEvent.click(getByText("Polls"));
 
             expect(Modal.createDialog).toHaveBeenCalledWith(PollHistoryDialog, {
                 room,

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

@@ -180,6 +180,55 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </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"
+        >
+          <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="M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
+            />
+          </svg>
+          <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>
+        <div
+          class="_separator_144s5_17"
+          data-kind="primary"
+          data-orientation="horizontal"
+          role="separator"
+        />
         <button
           class="_item_1gwvj_17 _interactive_1gwvj_36"
           data-kind="primary"
@@ -217,89 +266,6 @@ 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="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
-            />
-            <path
-              d="M11.312 2h1.376A2.312 2.312 0 0 1 15 4.312v.247l.002.003c.01.014.031.033.064.047.03.013.056.013.07.01h.002l.177-.177a2.312 2.312 0 0 1 3.27 0l.973.974a2.312 2.312 0 0 1 0 3.269l-.177.177v.003a.134.134 0 0 0 .01.07.153.153 0 0 0 .047.063l.003.002h.247A2.312 2.312 0 0 1 22 11.312v1.376A2.312 2.312 0 0 1 19.688 15h-.247l-.003.002a.152.152 0 0 0-.047.064.134.134 0 0 0-.01.07v.002l.177.177a2.312 2.312 0 0 1 0 3.27l-.974.973a2.312 2.312 0 0 1-3.269 0l-.177-.177h-.003a.134.134 0 0 0-.07.01.152.152 0 0 0-.063.047l-.002.003v.247A2.312 2.312 0 0 1 12.688 22h-1.376A2.312 2.312 0 0 1 9 19.688v-.247l-.002-.003a.153.153 0 0 0-.064-.047.134.134 0 0 0-.07-.01h-.002l-.177.177a2.312 2.312 0 0 1-3.27 0l-.973-.974a2.312 2.312 0 0 1 0-3.269l.177-.177v-.003a.135.135 0 0 0-.01-.07.152.152 0 0 0-.047-.063L4.559 15h-.247A2.312 2.312 0 0 1 2 12.688v-1.376A2.312 2.312 0 0 1 4.312 9h.247l.003-.002a.153.153 0 0 0 .047-.064.135.135 0 0 0 .01-.07v-.002l-.177-.177a2.312 2.312 0 0 1 0-3.27l.974-.973a2.312 2.312 0 0 1 3.269 0l.177.177h.003a.135.135 0 0 0 .07-.01.153.153 0 0 0 .063-.047L9 4.559v-.247A2.312 2.312 0 0 1 11.312 2ZM11 4.312v.257c0 .893-.59 1.593-1.299 1.887-.716.297-1.622.21-2.248-.418l-.182-.182a.312.312 0 0 0-.441 0l-.974.974a.312.312 0 0 0 0 .44l.182.183c.627.626.715 1.531.418 2.248C6.162 10.41 5.462 11 4.569 11h-.257a.312.312 0 0 0-.312.312v1.376c0 .172.14.312.312.312h.257c.893 0 1.593.59 1.887 1.299.297.716.21 1.622-.418 2.248l-.182.182a.312.312 0 0 0 0 .441l.974.973a.31.31 0 0 0 .44 0l.183-.181c.626-.627 1.532-.715 2.248-.418.709.294 1.299.994 1.299 1.887v.257c0 .172.14.312.312.312h1.376c.172 0 .312-.14.312-.312v-.257c0-.893.59-1.593 1.299-1.887.716-.297 1.622-.21 2.248.418l.182.181c.122.122.32.122.441 0l.973-.973a.312.312 0 0 0 0-.44l-.181-.183c-.627-.627-.715-1.532-.418-2.248.294-.709.994-1.299 1.887-1.299h.257c.172 0 .312-.14.312-.312v-1.376a.312.312 0 0 0-.312-.312h-.257c-.893 0-1.593-.59-1.887-1.299-.297-.717-.21-1.622.418-2.248l.181-.182a.312.312 0 0 0 0-.441l-.973-.974a.312.312 0 0 0-.44 0l-.183.182c-.627.627-1.532.715-2.248.418C13.59 6.162 13 5.462 13 4.569v-.257A.312.312 0 0 0 12.688 4h-1.376a.312.312 0 0 0-.312.312Z"
-            />
-          </svg>
-          <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"
-        >
-          <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="M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
-            />
-          </svg>
-          <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"
@@ -321,7 +287,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           <span
             class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
           >
-            Poll history
+            Polls
           </span>
           <svg
             aria-hidden="true"
@@ -367,6 +333,46 @@ 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="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
+            />
+            <path
+              d="M11.312 2h1.376A2.312 2.312 0 0 1 15 4.312v.247l.002.003c.01.014.031.033.064.047.03.013.056.013.07.01h.002l.177-.177a2.312 2.312 0 0 1 3.27 0l.973.974a2.312 2.312 0 0 1 0 3.269l-.177.177v.003a.134.134 0 0 0 .01.07.153.153 0 0 0 .047.063l.003.002h.247A2.312 2.312 0 0 1 22 11.312v1.376A2.312 2.312 0 0 1 19.688 15h-.247l-.003.002a.152.152 0 0 0-.047.064.134.134 0 0 0-.01.07v.002l.177.177a2.312 2.312 0 0 1 0 3.27l-.974.973a2.312 2.312 0 0 1-3.269 0l-.177-.177h-.003a.134.134 0 0 0-.07.01.152.152 0 0 0-.063.047l-.002.003v.247A2.312 2.312 0 0 1 12.688 22h-1.376A2.312 2.312 0 0 1 9 19.688v-.247l-.002-.003a.153.153 0 0 0-.064-.047.134.134 0 0 0-.07-.01h-.002l-.177.177a2.312 2.312 0 0 1-3.27 0l-.973-.974a2.312 2.312 0 0 1 0-3.269l.177-.177v-.003a.135.135 0 0 0-.01-.07.152.152 0 0 0-.047-.063L4.559 15h-.247A2.312 2.312 0 0 1 2 12.688v-1.376A2.312 2.312 0 0 1 4.312 9h.247l.003-.002a.153.153 0 0 0 .047-.064.135.135 0 0 0 .01-.07v-.002l-.177-.177a2.312 2.312 0 0 1 0-3.27l.974-.973a2.312 2.312 0 0 1 3.269 0l.177.177h.003a.135.135 0 0 0 .07-.01.153.153 0 0 0 .063-.047L9 4.559v-.247A2.312 2.312 0 0 1 11.312 2ZM11 4.312v.257c0 .893-.59 1.593-1.299 1.887-.716.297-1.622.21-2.248-.418l-.182-.182a.312.312 0 0 0-.441 0l-.974.974a.312.312 0 0 0 0 .44l.182.183c.627.626.715 1.531.418 2.248C6.162 10.41 5.462 11 4.569 11h-.257a.312.312 0 0 0-.312.312v1.376c0 .172.14.312.312.312h.257c.893 0 1.593.59 1.887 1.299.297.716.21 1.622-.418 2.248l-.182.182a.312.312 0 0 0 0 .441l.974.973a.31.31 0 0 0 .44 0l.183-.181c.626-.627 1.532-.715 2.248-.418.709.294 1.299.994 1.299 1.887v.257c0 .172.14.312.312.312h1.376c.172 0 .312-.14.312-.312v-.257c0-.893.59-1.593 1.299-1.887.716-.297 1.622-.21 2.248.418l.182.181c.122.122.32.122.441 0l.973-.973a.312.312 0 0 0 0-.44l-.181-.183c-.627-.627-.715-1.532-.418-2.248.294-.709.994-1.299 1.887-1.299h.257c.172 0 .312-.14.312-.312v-1.376a.312.312 0 0 0-.312-.312h-.257c-.893 0-1.593-.59-1.887-1.299-.297-.717-.21-1.622.418-2.248l.181-.182a.312.312 0 0 0 0-.441l-.973-.974a.312.312 0 0 0-.44 0l-.183.182c-.627.627-1.532.715-2.248.418C13.59 6.162 13 5.462 13 4.569v-.257A.312.312 0 0 0 12.688 4h-1.376a.312.312 0 0 0-.312.312Z"
+            />
+          </svg>
+          <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"
@@ -572,6 +578,55 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </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"
+        >
+          <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="M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
+            />
+          </svg>
+          <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>
+        <div
+          class="_separator_144s5_17"
+          data-kind="primary"
+          data-orientation="horizontal"
+          role="separator"
+        />
         <button
           class="_item_1gwvj_17 _interactive_1gwvj_36"
           data-kind="primary"
@@ -609,89 +664,6 @@ 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="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
-            />
-            <path
-              d="M11.312 2h1.376A2.312 2.312 0 0 1 15 4.312v.247l.002.003c.01.014.031.033.064.047.03.013.056.013.07.01h.002l.177-.177a2.312 2.312 0 0 1 3.27 0l.973.974a2.312 2.312 0 0 1 0 3.269l-.177.177v.003a.134.134 0 0 0 .01.07.153.153 0 0 0 .047.063l.003.002h.247A2.312 2.312 0 0 1 22 11.312v1.376A2.312 2.312 0 0 1 19.688 15h-.247l-.003.002a.152.152 0 0 0-.047.064.134.134 0 0 0-.01.07v.002l.177.177a2.312 2.312 0 0 1 0 3.27l-.974.973a2.312 2.312 0 0 1-3.269 0l-.177-.177h-.003a.134.134 0 0 0-.07.01.152.152 0 0 0-.063.047l-.002.003v.247A2.312 2.312 0 0 1 12.688 22h-1.376A2.312 2.312 0 0 1 9 19.688v-.247l-.002-.003a.153.153 0 0 0-.064-.047.134.134 0 0 0-.07-.01h-.002l-.177.177a2.312 2.312 0 0 1-3.27 0l-.973-.974a2.312 2.312 0 0 1 0-3.269l.177-.177v-.003a.135.135 0 0 0-.01-.07.152.152 0 0 0-.047-.063L4.559 15h-.247A2.312 2.312 0 0 1 2 12.688v-1.376A2.312 2.312 0 0 1 4.312 9h.247l.003-.002a.153.153 0 0 0 .047-.064.135.135 0 0 0 .01-.07v-.002l-.177-.177a2.312 2.312 0 0 1 0-3.27l.974-.973a2.312 2.312 0 0 1 3.269 0l.177.177h.003a.135.135 0 0 0 .07-.01.153.153 0 0 0 .063-.047L9 4.559v-.247A2.312 2.312 0 0 1 11.312 2ZM11 4.312v.257c0 .893-.59 1.593-1.299 1.887-.716.297-1.622.21-2.248-.418l-.182-.182a.312.312 0 0 0-.441 0l-.974.974a.312.312 0 0 0 0 .44l.182.183c.627.626.715 1.531.418 2.248C6.162 10.41 5.462 11 4.569 11h-.257a.312.312 0 0 0-.312.312v1.376c0 .172.14.312.312.312h.257c.893 0 1.593.59 1.887 1.299.297.716.21 1.622-.418 2.248l-.182.182a.312.312 0 0 0 0 .441l.974.973a.31.31 0 0 0 .44 0l.183-.181c.626-.627 1.532-.715 2.248-.418.709.294 1.299.994 1.299 1.887v.257c0 .172.14.312.312.312h1.376c.172 0 .312-.14.312-.312v-.257c0-.893.59-1.593 1.299-1.887.716-.297 1.622-.21 2.248.418l.182.181c.122.122.32.122.441 0l.973-.973a.312.312 0 0 0 0-.44l-.181-.183c-.627-.627-.715-1.532-.418-2.248.294-.709.994-1.299 1.887-1.299h.257c.172 0 .312-.14.312-.312v-1.376a.312.312 0 0 0-.312-.312h-.257c-.893 0-1.593-.59-1.887-1.299-.297-.717-.21-1.622.418-2.248l.181-.182a.312.312 0 0 0 0-.441l-.973-.974a.312.312 0 0 0-.44 0l-.183.182c-.627.627-1.532.715-2.248.418C13.59 6.162 13 5.462 13 4.569v-.257A.312.312 0 0 0 12.688 4h-1.376a.312.312 0 0 0-.312.312Z"
-            />
-          </svg>
-          <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"
-        >
-          <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="M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
-            />
-          </svg>
-          <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"
@@ -713,7 +685,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           <span
             class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
           >
-            Poll history
+            Polls
           </span>
           <svg
             aria-hidden="true"
@@ -759,6 +731,46 @@ 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="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
+            />
+            <path
+              d="M11.312 2h1.376A2.312 2.312 0 0 1 15 4.312v.247l.002.003c.01.014.031.033.064.047.03.013.056.013.07.01h.002l.177-.177a2.312 2.312 0 0 1 3.27 0l.973.974a2.312 2.312 0 0 1 0 3.269l-.177.177v.003a.134.134 0 0 0 .01.07.153.153 0 0 0 .047.063l.003.002h.247A2.312 2.312 0 0 1 22 11.312v1.376A2.312 2.312 0 0 1 19.688 15h-.247l-.003.002a.152.152 0 0 0-.047.064.134.134 0 0 0-.01.07v.002l.177.177a2.312 2.312 0 0 1 0 3.27l-.974.973a2.312 2.312 0 0 1-3.269 0l-.177-.177h-.003a.134.134 0 0 0-.07.01.152.152 0 0 0-.063.047l-.002.003v.247A2.312 2.312 0 0 1 12.688 22h-1.376A2.312 2.312 0 0 1 9 19.688v-.247l-.002-.003a.153.153 0 0 0-.064-.047.134.134 0 0 0-.07-.01h-.002l-.177.177a2.312 2.312 0 0 1-3.27 0l-.973-.974a2.312 2.312 0 0 1 0-3.269l.177-.177v-.003a.135.135 0 0 0-.01-.07.152.152 0 0 0-.047-.063L4.559 15h-.247A2.312 2.312 0 0 1 2 12.688v-1.376A2.312 2.312 0 0 1 4.312 9h.247l.003-.002a.153.153 0 0 0 .047-.064.135.135 0 0 0 .01-.07v-.002l-.177-.177a2.312 2.312 0 0 1 0-3.27l.974-.973a2.312 2.312 0 0 1 3.269 0l.177.177h.003a.135.135 0 0 0 .07-.01.153.153 0 0 0 .063-.047L9 4.559v-.247A2.312 2.312 0 0 1 11.312 2ZM11 4.312v.257c0 .893-.59 1.593-1.299 1.887-.716.297-1.622.21-2.248-.418l-.182-.182a.312.312 0 0 0-.441 0l-.974.974a.312.312 0 0 0 0 .44l.182.183c.627.626.715 1.531.418 2.248C6.162 10.41 5.462 11 4.569 11h-.257a.312.312 0 0 0-.312.312v1.376c0 .172.14.312.312.312h.257c.893 0 1.593.59 1.887 1.299.297.716.21 1.622-.418 2.248l-.182.182a.312.312 0 0 0 0 .441l.974.973a.31.31 0 0 0 .44 0l.183-.181c.626-.627 1.532-.715 2.248-.418.709.294 1.299.994 1.299 1.887v.257c0 .172.14.312.312.312h1.376c.172 0 .312-.14.312-.312v-.257c0-.893.59-1.593 1.299-1.887.716-.297 1.622-.21 2.248.418l.182.181c.122.122.32.122.441 0l.973-.973a.312.312 0 0 0 0-.44l-.181-.183c-.627-.627-.715-1.532-.418-2.248.294-.709.994-1.299 1.887-1.299h.257c.172 0 .312-.14.312-.312v-1.376a.312.312 0 0 0-.312-.312h-.257c-.893 0-1.593-.59-1.887-1.299-.297-.717-.21-1.622.418-2.248l.181-.182a.312.312 0 0 0 0-.441l-.973-.974a.312.312 0 0 0-.44 0l-.183.182c-.627.627-1.532.715-2.248.418C13.59 6.162 13 5.462 13 4.569v-.257A.312.312 0 0 0 12.688 4h-1.376a.312.312 0 0 0-.312.312Z"
+            />
+          </svg>
+          <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"
@@ -991,6 +1003,55 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </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"
+        >
+          <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="M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
+            />
+          </svg>
+          <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>
+        <div
+          class="_separator_144s5_17"
+          data-kind="primary"
+          data-orientation="horizontal"
+          role="separator"
+        />
         <button
           class="_item_1gwvj_17 _interactive_1gwvj_36"
           data-kind="primary"
@@ -1028,89 +1089,6 @@ 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="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
-            />
-            <path
-              d="M11.312 2h1.376A2.312 2.312 0 0 1 15 4.312v.247l.002.003c.01.014.031.033.064.047.03.013.056.013.07.01h.002l.177-.177a2.312 2.312 0 0 1 3.27 0l.973.974a2.312 2.312 0 0 1 0 3.269l-.177.177v.003a.134.134 0 0 0 .01.07.153.153 0 0 0 .047.063l.003.002h.247A2.312 2.312 0 0 1 22 11.312v1.376A2.312 2.312 0 0 1 19.688 15h-.247l-.003.002a.152.152 0 0 0-.047.064.134.134 0 0 0-.01.07v.002l.177.177a2.312 2.312 0 0 1 0 3.27l-.974.973a2.312 2.312 0 0 1-3.269 0l-.177-.177h-.003a.134.134 0 0 0-.07.01.152.152 0 0 0-.063.047l-.002.003v.247A2.312 2.312 0 0 1 12.688 22h-1.376A2.312 2.312 0 0 1 9 19.688v-.247l-.002-.003a.153.153 0 0 0-.064-.047.134.134 0 0 0-.07-.01h-.002l-.177.177a2.312 2.312 0 0 1-3.27 0l-.973-.974a2.312 2.312 0 0 1 0-3.269l.177-.177v-.003a.135.135 0 0 0-.01-.07.152.152 0 0 0-.047-.063L4.559 15h-.247A2.312 2.312 0 0 1 2 12.688v-1.376A2.312 2.312 0 0 1 4.312 9h.247l.003-.002a.153.153 0 0 0 .047-.064.135.135 0 0 0 .01-.07v-.002l-.177-.177a2.312 2.312 0 0 1 0-3.27l.974-.973a2.312 2.312 0 0 1 3.269 0l.177.177h.003a.135.135 0 0 0 .07-.01.153.153 0 0 0 .063-.047L9 4.559v-.247A2.312 2.312 0 0 1 11.312 2ZM11 4.312v.257c0 .893-.59 1.593-1.299 1.887-.716.297-1.622.21-2.248-.418l-.182-.182a.312.312 0 0 0-.441 0l-.974.974a.312.312 0 0 0 0 .44l.182.183c.627.626.715 1.531.418 2.248C6.162 10.41 5.462 11 4.569 11h-.257a.312.312 0 0 0-.312.312v1.376c0 .172.14.312.312.312h.257c.893 0 1.593.59 1.887 1.299.297.716.21 1.622-.418 2.248l-.182.182a.312.312 0 0 0 0 .441l.974.973a.31.31 0 0 0 .44 0l.183-.181c.626-.627 1.532-.715 2.248-.418.709.294 1.299.994 1.299 1.887v.257c0 .172.14.312.312.312h1.376c.172 0 .312-.14.312-.312v-.257c0-.893.59-1.593 1.299-1.887.716-.297 1.622-.21 2.248.418l.182.181c.122.122.32.122.441 0l.973-.973a.312.312 0 0 0 0-.44l-.181-.183c-.627-.627-.715-1.532-.418-2.248.294-.709.994-1.299 1.887-1.299h.257c.172 0 .312-.14.312-.312v-1.376a.312.312 0 0 0-.312-.312h-.257c-.893 0-1.593-.59-1.887-1.299-.297-.717-.21-1.622.418-2.248l.181-.182a.312.312 0 0 0 0-.441l-.973-.974a.312.312 0 0 0-.44 0l-.183.182c-.627.627-1.532.715-2.248.418C13.59 6.162 13 5.462 13 4.569v-.257A.312.312 0 0 0 12.688 4h-1.376a.312.312 0 0 0-.312.312Z"
-            />
-          </svg>
-          <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"
-        >
-          <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="M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
-            />
-          </svg>
-          <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"
@@ -1132,7 +1110,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           <span
             class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
           >
-            Poll history
+            Polls
           </span>
           <svg
             aria-hidden="true"
@@ -1178,6 +1156,46 @@ 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="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
+            />
+            <path
+              d="M11.312 2h1.376A2.312 2.312 0 0 1 15 4.312v.247l.002.003c.01.014.031.033.064.047.03.013.056.013.07.01h.002l.177-.177a2.312 2.312 0 0 1 3.27 0l.973.974a2.312 2.312 0 0 1 0 3.269l-.177.177v.003a.134.134 0 0 0 .01.07.153.153 0 0 0 .047.063l.003.002h.247A2.312 2.312 0 0 1 22 11.312v1.376A2.312 2.312 0 0 1 19.688 15h-.247l-.003.002a.152.152 0 0 0-.047.064.134.134 0 0 0-.01.07v.002l.177.177a2.312 2.312 0 0 1 0 3.27l-.974.973a2.312 2.312 0 0 1-3.269 0l-.177-.177h-.003a.134.134 0 0 0-.07.01.152.152 0 0 0-.063.047l-.002.003v.247A2.312 2.312 0 0 1 12.688 22h-1.376A2.312 2.312 0 0 1 9 19.688v-.247l-.002-.003a.153.153 0 0 0-.064-.047.134.134 0 0 0-.07-.01h-.002l-.177.177a2.312 2.312 0 0 1-3.27 0l-.973-.974a2.312 2.312 0 0 1 0-3.269l.177-.177v-.003a.135.135 0 0 0-.01-.07.152.152 0 0 0-.047-.063L4.559 15h-.247A2.312 2.312 0 0 1 2 12.688v-1.376A2.312 2.312 0 0 1 4.312 9h.247l.003-.002a.153.153 0 0 0 .047-.064.135.135 0 0 0 .01-.07v-.002l-.177-.177a2.312 2.312 0 0 1 0-3.27l.974-.973a2.312 2.312 0 0 1 3.269 0l.177.177h.003a.135.135 0 0 0 .07-.01.153.153 0 0 0 .063-.047L9 4.559v-.247A2.312 2.312 0 0 1 11.312 2ZM11 4.312v.257c0 .893-.59 1.593-1.299 1.887-.716.297-1.622.21-2.248-.418l-.182-.182a.312.312 0 0 0-.441 0l-.974.974a.312.312 0 0 0 0 .44l.182.183c.627.626.715 1.531.418 2.248C6.162 10.41 5.462 11 4.569 11h-.257a.312.312 0 0 0-.312.312v1.376c0 .172.14.312.312.312h.257c.893 0 1.593.59 1.887 1.299.297.716.21 1.622-.418 2.248l-.182.182a.312.312 0 0 0 0 .441l.974.973a.31.31 0 0 0 .44 0l.183-.181c.626-.627 1.532-.715 2.248-.418.709.294 1.299.994 1.299 1.887v.257c0 .172.14.312.312.312h1.376c.172 0 .312-.14.312-.312v-.257c0-.893.59-1.593 1.299-1.887.716-.297 1.622-.21 2.248.418l.182.181c.122.122.32.122.441 0l.973-.973a.312.312 0 0 0 0-.44l-.181-.183c-.627-.627-.715-1.532-.418-2.248.294-.709.994-1.299 1.887-1.299h.257c.172 0 .312-.14.312-.312v-1.376a.312.312 0 0 0-.312-.312h-.257c-.893 0-1.593-.59-1.887-1.299-.297-.717-.21-1.622.418-2.248l.181-.182a.312.312 0 0 0 0-.441l-.973-.974a.312.312 0 0 0-.44 0l-.183.182c-.627.627-1.532.715-2.248.418C13.59 6.162 13 5.462 13 4.569v-.257A.312.312 0 0 0 12.688 4h-1.376a.312.312 0 0 0-.312.312Z"
+            />
+          </svg>
+          <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"

test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap

@@ -264,12 +264,12 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
   </p>
   <p>
     <span>
+      Invited by 
       <span
         class="mx_RoomPreviewBar_inviter"
       >
         @inviter:test.com
       </span>
-       invited you
     </span>
   </p>
 </div>
@@ -322,18 +322,19 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
   </p>
   <p>
     <span>
-      <span>
+      <span
-        <span
+        class="mx_RoomPreviewBar_inviter"
-          class="mx_RoomPreviewBar_inviter"
+      >
-        >
+        @inviter:test.com name
-          @inviter:test.com name
-        </span>
-         (
-        @inviter:test.com
-        )
       </span>
        wants to chat
     </span>
+    <br />
+    <span
+      class="mx_RoomPreviewBar_inviter_mxid"
+    >
+      @inviter:test.com
+    </span>
   </p>
 </div>
 `;
@@ -387,17 +388,18 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
   </p>
   <p>
     <span>
-      <span>
+      Invited by 
-        <span
+      <span
-          class="mx_RoomPreviewBar_inviter"
+        class="mx_RoomPreviewBar_inviter"
-        >
+      >
-          @inviter:test.com name
+        @inviter:test.com name
-        </span>
-         (
-        @inviter:test.com
-        )
       </span>
-       invited you
+    </span>
+    <br />
+    <span
+      class="mx_RoomPreviewBar_inviter_mxid"
+    >
+      @inviter:test.com
     </span>
   </p>
 </div>