Add badge for history visibiltity to room info panel

packages/shared-components/src/i18n/strings/en_EN.json

@@ -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.",

packages/shared-components/src/index.ts

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

packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.stories.tsx

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

packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.test.tsx

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

packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.tsx

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

packages/shared-components/src/room/HistoryVisibilityBadge/__snapshots__/HistoryVisibilityBadge.test.tsx.snap

@@ -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="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      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="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      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="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      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="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      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>
+`;

packages/shared-components/src/room/HistoryVisibilityBadge/index.ts

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

src/components/viewmodels/right_panel/RoomSummaryCardViewModel.tsx

@@ -5,7 +5,7 @@
 */
 
 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 @@
      * 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
      */
@@ -254,6 +258,7 @@
         isRoomEncrypted,
         roomJoinRule,
         e2eStatus,
+        historyVisibility: roomState.getHistoryVisibility(),
         isVideoRoom,
         alias,
         isFavorite,

src/components/views/right_panel/RoomSummaryCardView.tsx

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

test/test-utils/test-utils.ts

@@ -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(),

test/unit-tests/components/views/right_panel/RoomSummaryCardView-test.tsx

@@ -8,7 +8,7 @@
 
 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 @@
         e2eStatus: undefined,
         isVideoRoom: false,
         roomJoinRule: JoinRule.Public,
+        historyVisibility: HistoryVisibility.Shared,
         alias: "",
         isFavorite: false,
         canInviteToState: true,
@@ -92,7 +93,7 @@
 
     it("renders the room summary", () => {
         const { container } = getComponent();
         expect(container).toMatchSnapshot();
     });
 
     it("renders the room topic in the summary", () => {
@@ -108,7 +109,7 @@
             }),
         ]);
         const { container } = getComponent();
         expect(container).toMatchSnapshot();
     });
 
     it("has button to edit topic", () => {
@@ -125,7 +126,7 @@
         ]);
         const { container, getByText } = getComponent();
         expect(getByText("Edit")).toBeInTheDocument();
         expect(container).toMatchSnapshot();
     });
 
     describe("search", () => {