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

* 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
2026-02-03 12:50:00 +00:00
parent 92615272ce
commit af55def428
19 changed files with 317 additions and 18 deletions
--- a/packages/shared-components/src/i18n/strings/en_EN.json
+++ b/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.",
--- a/packages/shared-components/src/index.ts
+++ b/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";
--- a/packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.stories.tsx
+++ b/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" } };
--- a/packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.test.tsx
+++ b/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();
+        });
+    }
+});
--- a/packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.tsx
+++ b/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;
+    }
+}
--- a/packages/shared-components/src/room/HistoryVisibilityBadge/snapshots/HistoryVisibilityBadge.test.tsx.snap
+++ b/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="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>
+`;
--- a/packages/shared-components/src/room/HistoryVisibilityBadge/index.ts
+++ b/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";