mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-03-06 14:02:24 +01:00
Code Issues Projects Releases Wiki Activity

Add badge for history visibiltity to room info panel (#31927)

Browse Source 
* Add `HistoryVisibilityBadge` shared component

* Add `historyVisibility` to `RoomSummaryCardViewModel`

* Add a history visibility badge to the room info panel

* Allow roominfo panel badges to wrap

Now that we have an extra one, it's quite likely we'll have to spill onto more
lines.

* update screenshots

* Set icons in badges to be 16px

Having discussed this with the design team, the icons in badges should be 16px, not 13px,
at default font size settings.

* Add stories for all history visibility states

* fix incorrect use of useRoomState

* fix snapshots

* more snapshot updates

* Update screenshots
This commit is contained in:
Richard van der Hoff 2026-02-03 12:50:00 +00:00 committed by GitHub
parent 92615272ce
commit af55def428
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 317 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/shared-components/__vis__/linux/__baselines__/room/HistoryVisibilityBadge/HistoryVisibilityBadge.stories.tsx/invited-history-visibility-auto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
packages/shared-components/__vis__/linux/__baselines__/room/HistoryVisibilityBadge/HistoryVisibilityBadge.stories.tsx/joined-history-visibility-auto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
packages/shared-components/__vis__/linux/__baselines__/room/HistoryVisibilityBadge/HistoryVisibilityBadge.stories.tsx/shared-history-visibility-auto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
packages/shared-components/__vis__/linux/__baselines__/room/HistoryVisibilityBadge/HistoryVisibilityBadge.stories.tsx/world-readable-history-visibility-auto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

5
packages/shared-components/src/i18n/strings/en_EN.json
View File

@ -29,6 +29,11 @@
"context_menu": {
"title": "Room options"
},
"history_visibility_badge": {
"private": "New members don't see history",
"shared": "New members see history",
"world_readable": "Anyone can see history"
},
"status_bar": {
"delete_all": "Delete all",
"exceeded_resource_limit_description": "Please contact your service administrator to continue using the service.",

1
packages/shared-components/src/index.ts
View File

@ -20,6 +20,7 @@ export * from "./message-body/ReactionsRowButtonTooltip";
export * from "./pill-input/Pill";
export * from "./pill-input/PillInput";
export * from "./room/RoomStatusBar";
export * from "./room/HistoryVisibilityBadge";
export * from "./rich-list/RichItem";
export * from "./rich-list/RichList";
export * from "./room-list/RoomListHeaderView";

29
packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.stories.tsx Normal file
View File

@ -0,0 +1,29 @@
/*
* Copyright (c) 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import type { Meta, StoryObj } from "@storybook/react-vite";
import { HistoryVisibilityBadge } from "./HistoryVisibilityBadge";
const meta = {
title: "Room/HistoryVisibilityBadge",
component: HistoryVisibilityBadge,
tags: ["autodocs"],
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/design/IXcnmuaIwtm3F3vBuFCPUp/Room-History-Sharing?node-id=39-10758&t=MKC8KCGCpykDbrcX-1",
},
},
} satisfies Meta<typeof HistoryVisibilityBadge>;
export default meta;
type Story = StoryObj<typeof meta>;
export const InvitedHistoryVisibility: Story = { args: { historyVisibility: "invited" } };
export const JoinedHistoryVisibility: Story = { args: { historyVisibility: "joined" } };
export const SharedHistoryVisibility: Story = { args: { historyVisibility: "shared" } };
export const WorldReadableHistoryVisibility: Story = { args: { historyVisibility: "world_readable" } };

21
packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.test.tsx Normal file
View File

@ -0,0 +1,21 @@
/*
* Copyright (c) 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { describe, expect, it } from "vitest";
import { render } from "@testing-library/react";
import { HistoryVisibilityBadge } from "./HistoryVisibilityBadge.tsx";
describe("HistoryVisibilityBadge", () => {
for (const visibility of ["invited", "joined", "shared", "world_readable"]) {
it(`renders the badge for ${visibility}`, () => {
const { container } = render(<HistoryVisibilityBadge historyVisibility={visibility as any} />);
expect(container).toMatchSnapshot();
});
}
});

56
packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.tsx Normal file
View File

@ -0,0 +1,56 @@
/*
* Copyright (c) 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX } from "react";
import { Badge } from "@vector-im/compound-web";
import {
HistoryIcon,
UserProfileSolidIcon,
VisibilityOffIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../../utils/i18n";
interface Props {
/** The history visibility of the room, according to the room state. */
historyVisibility: "invited" | "joined" | "shared" | "world_readable";
}
/** A badge showing the history visibility of a room. */
export function HistoryVisibilityBadge({ historyVisibility }: Props): JSX.Element | null {
const iconProps = {
color: "var(--cpd-color-icon-info-primary)",
width: "1rem", // 16px at the default font size, per the design
height: "1rem",
};
switch (historyVisibility) {
case "invited":
case "joined":
return (
<Badge kind="blue">
<VisibilityOffIcon {...iconProps} />
{_t("room|history_visibility_badge|private")}
</Badge>
);
case "shared":
return (
<Badge kind="blue">
<HistoryIcon {...iconProps} />
{_t("room|history_visibility_badge|shared")}
</Badge>
);
case "world_readable":
return (
<Badge kind="blue">
<UserProfileSolidIcon {...iconProps} />
{_t("room|history_visibility_badge|world_readable")}
</Badge>
);
default:
return null;
}
}

99
packages/shared-components/src/room/HistoryVisibilityBadge/__snapshots__/HistoryVisibilityBadge.test.tsx.snap Normal file
View File

@ -0,0 +1,99 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`HistoryVisibilityBadge > renders the badge for invited 1`] = `
<div>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
data-kind="blue"
>
<svg
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="1rem"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m16.1 13.3-1.45-1.45q.225-1.175-.675-2.2t-2.325-.8L10.2 7.4q.424-.2.863-.3A4.2 4.2 0 0 1 12 7q1.875 0 3.188 1.312Q16.5 9.625 16.5 11.5q0 .5-.1.938t-.3.862m3.2 3.15-1.45-1.4a11 11 0 0 0 1.688-1.588A9 9 0 0 0 20.8 11.5q-1.25-2.524-3.588-4.013Q14.875 6 12 6q-.724 0-1.425.1a10 10 0 0 0-1.375.3L7.65 4.85A11.1 11.1 0 0 1 12 4q3.575 0 6.425 1.887T22.7 10.8a.8.8 0 0 1 .1.313q.025.188.025.387a2 2 0 0 1-.125.7 10.9 10.9 0 0 1-3.4 4.25m-.2 5.45-3.5-3.45q-.874.274-1.762.413Q12.95 19 12 19q-3.575 0-6.425-1.887T1.3 12.2a.8.8 0 0 1-.1-.312 3 3 0 0 1 0-.763.8.8 0 0 1 .1-.3Q1.825 9.7 2.55 8.75A13.3 13.3 0 0 1 4.15 7L2.075 4.9a.93.93 0 0 1-.275-.688q0-.412.3-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275l17 17q.275.275.288.688a.93.93 0 0 1-.288.712.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275M5.55 8.4q-.725.65-1.325 1.425A9 9 0 0 0 3.2 11.5q1.25 2.524 3.588 4.012T12 17q.5 0 .975-.062.475-.063.975-.138l-.9-.95q-.274.075-.525.113A3.5 3.5 0 0 1 12 16q-1.875 0-3.187-1.312Q7.5 13.375 7.5 11.5q0-.274.038-.525.037-.25.112-.525z"
/>
</svg>
New members don't see history
</span>
</div>
`;
exports[`HistoryVisibilityBadge > renders the badge for joined 1`] = `
<div>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
data-kind="blue"
>
<svg
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="1rem"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m16.1 13.3-1.45-1.45q.225-1.175-.675-2.2t-2.325-.8L10.2 7.4q.424-.2.863-.3A4.2 4.2 0 0 1 12 7q1.875 0 3.188 1.312Q16.5 9.625 16.5 11.5q0 .5-.1.938t-.3.862m3.2 3.15-1.45-1.4a11 11 0 0 0 1.688-1.588A9 9 0 0 0 20.8 11.5q-1.25-2.524-3.588-4.013Q14.875 6 12 6q-.724 0-1.425.1a10 10 0 0 0-1.375.3L7.65 4.85A11.1 11.1 0 0 1 12 4q3.575 0 6.425 1.887T22.7 10.8a.8.8 0 0 1 .1.313q.025.188.025.387a2 2 0 0 1-.125.7 10.9 10.9 0 0 1-3.4 4.25m-.2 5.45-3.5-3.45q-.874.274-1.762.413Q12.95 19 12 19q-3.575 0-6.425-1.887T1.3 12.2a.8.8 0 0 1-.1-.312 3 3 0 0 1 0-.763.8.8 0 0 1 .1-.3Q1.825 9.7 2.55 8.75A13.3 13.3 0 0 1 4.15 7L2.075 4.9a.93.93 0 0 1-.275-.688q0-.412.3-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275l17 17q.275.275.288.688a.93.93 0 0 1-.288.712.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275M5.55 8.4q-.725.65-1.325 1.425A9 9 0 0 0 3.2 11.5q1.25 2.524 3.588 4.012T12 17q.5 0 .975-.062.475-.063.975-.138l-.9-.95q-.274.075-.525.113A3.5 3.5 0 0 1 12 16q-1.875 0-3.187-1.312Q7.5 13.375 7.5 11.5q0-.274.038-.525.037-.25.112-.525z"
/>
</svg>
New members don't see history
</span>
</div>
`;
exports[`HistoryVisibilityBadge > renders the badge for shared 1`] = `
<div>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
data-kind="blue"
>
<svg
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="1rem"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a10 10 0 0 0-.832-4A10 10 0 0 0 12 2a9.99 9.99 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.99 7.99 0 0 1 12 4a8 8 0 0 1 6.93 4"
/>
<path
d="M13 8a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.83 2.83a1 1 0 0 0 1.414-1.414L13 11.586z"
/>
</svg>
New members see history
</span>
</div>
`;
exports[`HistoryVisibilityBadge > renders the badge for world_readable 1`] = `
<div>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
data-kind="blue"
>
<svg
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="1rem"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 15q-1.65 0-2.825-1.175T8 11t1.175-2.825T12 7t2.825 1.175T16 11t-1.175 2.825T12 15"
/>
<path
d="M19.528 18.583A9.96 9.96 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 2.52.933 4.824 2.472 6.583A9.98 9.98 0 0 0 12 22a9.98 9.98 0 0 0 7.528-3.417M8.75 16.388q-1.373.332-2.709.95a8 8 0 1 1 11.918 0 14.7 14.7 0 0 0-2.709-.95A13.8 13.8 0 0 0 12 16q-1.65 0-3.25.387"
/>
</svg>
Anyone can see history
</span>
</div>
`;

8
packages/shared-components/src/room/HistoryVisibilityBadge/index.ts Normal file
View File

@ -0,0 +1,8 @@
/*
* Copyright (c) 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
export * from "./HistoryVisibilityBadge";

BIN
playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
playwright/snapshots/right-panel/right-panel.spec.ts/with-leave-room-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 36 KiB

10
src/components/viewmodels/right_panel/RoomSummaryCardViewModel.tsx
View File

@ -5,7 +5,7 @@ Please see LICENSE files in the repository root for full details.
*/
import { useEffect, useRef, useState } from "react";
import { EventType, type JoinRule, type Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { EventType, type HistoryVisibility, type JoinRule, type Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
@ -49,6 +49,10 @@ export interface RoomSummaryCardState {
* The join rule of the room, used to display the correct badge and icon
*/
roomJoinRule: JoinRule;
/**
* The history visibility of the room, used to display the correct badge.
*/
historyVisibility: HistoryVisibility;
/**
* if it is a video room, it should not display export chat, polls, files, extensions
*/
@ -158,8 +162,9 @@ export function useRoomSummaryCardViewModel(
const e2eStatus = roomContext.e2eStatus;
const isVideoRoom = calcIsVideoRoom(room);
const { roomJoinRule } = useRoomState(room, (state) => ({
const { historyVisibility, roomJoinRule } = useRoomState(room, (state) => ({
roomJoinRule: state.getJoinRule(),
historyVisibility: state.getHistoryVisibility(),
}));
const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
const pinCount = usePinnedEvents(room).length;
@ -254,6 +259,7 @@ export function useRoomSummaryCardViewModel(
isRoomEncrypted,
roomJoinRule,
e2eStatus,
historyVisibility,
isVideoRoom,
alias,
isFavorite,

20
src/components/views/right_panel/RoomSummaryCardView.tsx
View File

@ -39,7 +39,7 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"
import ErrorSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
import { JoinRule, type Room } from "matrix-js-sdk/src/matrix";
import { Box, Flex } from "@element-hq/web-shared-components";
import { Box, Flex, HistoryVisibilityBadge } from "@element-hq/web-shared-components";
import BaseCard from "./BaseCard.tsx";
import { _t } from "../../../languageHandler.tsx";
@ -165,34 +165,42 @@ const RoomSummaryCardView: React.FC<IProps> = ({
{vm.alias}
</Text>
<Flex as="section" justify="center" gap="var(--cpd-space-2x)" className="mx_RoomSummaryCard_badges">
<Flex
as="section"
justify="center"
gap="var(--cpd-space-2x)"
wrap="wrap"
className="mx_RoomSummaryCard_badges"
>
{!vm.isDirectMessage && vm.roomJoinRule === JoinRule.Public && (
<Badge kind="blue">
<PublicIcon width="1em" color="var(--cpd-color-icon-info-primary)" />
<PublicIcon width="1rem" color="var(--cpd-color-icon-info-primary)" />
{_t("common|public_room")}
</Badge>
)}
{vm.isRoomEncrypted && vm.e2eStatus !== E2EStatus.Warning && (
<Badge kind="green">
<LockIcon width="1em" />
<LockIcon width="1rem" />
{_t("common|encrypted")}
</Badge>
)}
{!vm.isRoomEncrypted && (
<Badge kind="blue">
<LockOffIcon width="1em" color="var(--cpd-color-icon-info-primary)" />
<LockOffIcon width="1rem" color="var(--cpd-color-icon-info-primary)" />
{_t("common|unencrypted")}
</Badge>
)}
{vm.e2eStatus === E2EStatus.Warning && (
<Badge kind="red">
<ErrorSolidIcon width="1em" />
<ErrorSolidIcon width="1rem" />
{_t("common|not_trusted")}
</Badge>
)}
<HistoryVisibilityBadge historyVisibility={vm.historyVisibility} />
</Flex>
<RoomTopic room={room} />

2
test/test-utils/test-utils.ts
View File

@ -32,6 +32,7 @@ import {
type EventStatus,
type ICreateRoomOpts,
RoomState,
HistoryVisibility,
} from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { normalize } from "matrix-js-sdk/src/utils";
@ -673,6 +674,7 @@ export function mkStubRoom(
maySendRedactionForEvent: jest.fn().mockReturnValue(true),
maySendEvent: jest.fn().mockReturnValue(true),
members: {},
getHistoryVisibility: jest.fn().mockReturnValue(HistoryVisibility.Shared),
getJoinRule: jest.fn().mockReturnValue(JoinRule.Invite),
on: jest.fn(),
off: jest.fn(),

3
test/unit-tests/components/views/right_panel/RoomSummaryCardView-test.tsx
View File

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { render, fireEvent, screen } from "jest-matrix-react";
import { Room, type MatrixClient, JoinRule, MatrixEvent } from "matrix-js-sdk/src/matrix";
import { Room, type MatrixClient, JoinRule, MatrixEvent, HistoryVisibility } from "matrix-js-sdk/src/matrix";
import { mocked, type MockedObject } from "jest-mock";
import userEvent from "@testing-library/user-event";
@ -56,6 +56,7 @@ describe("<RoomSummaryCard />", () => {
e2eStatus: undefined,
isVideoRoom: false,
roomJoinRule: JoinRule.Public,
historyVisibility: HistoryVisibility.Shared,
alias: "",
isFavorite: false,
canInviteToState: true,

81
test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
View File

@ -70,7 +70,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
/>
<section
class="_flex_4dswl_9 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); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
@ -81,7 +81,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@ -99,7 +99,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@ -108,6 +108,27 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</svg>
Not encrypted
</span>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
data-kind="blue"
>
<svg
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="1rem"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a10 10 0 0 0-.832-4A10 10 0 0 0 12 2a9.99 9.99 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.99 7.99 0 0 1 12 4a8 8 0 0 1 6.93 4"
/>
<path
d="M13 8a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.83 2.83a1 1 0 0 0 1.414-1.414L13 11.586z"
/>
</svg>
New members see history
</span>
</section>
<section
class="_flex_4dswl_9 mx_RoomSummaryCard_topic"
@ -784,7 +805,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
/>
<section
class="_flex_4dswl_9 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); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
@ -795,7 +816,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@ -813,7 +834,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@ -822,6 +843,27 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</svg>
Not encrypted
</span>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
data-kind="blue"
>
<svg
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="1rem"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a10 10 0 0 0-.832-4A10 10 0 0 0 12 2a9.99 9.99 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.99 7.99 0 0 1 12 4a8 8 0 0 1 6.93 4"
/>
<path
d="M13 8a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.83 2.83a1 1 0 0 0 1.414-1.414L13 11.586z"
/>
</svg>
New members see history
</span>
</section>
<section
class="_flex_4dswl_9 mx_RoomSummaryCard_topic"
@ -1460,7 +1502,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
/>
<section
class="_flex_4dswl_9 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); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
@ -1471,7 +1513,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@ -1489,7 +1531,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@ -1498,6 +1540,27 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</svg>
Not encrypted
</span>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
data-kind="blue"
>
<svg
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="1rem"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a10 10 0 0 0-.832-4A10 10 0 0 0 12 2a9.99 9.99 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.99 7.99 0 0 1 12 4a8 8 0 0 1 6.93 4"
/>
<path
d="M13 8a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.83 2.83a1 1 0 0 0 1.414-1.414L13 11.586z"
/>
</svg>
New members see history
</span>
</section>
<section
class="_flex_4dswl_9 mx_RoomSummaryCard_topic"