Move PinnedMessageBadge To Shared Components (#32768)

* refactor: move pinned message badge into shared-components

* Update lint errors

* Fix for Vitest issue with CI on shared components

* Update related to the pr comments and requests

* Prettier Fix

* Update, remove view since it was just moved and not actually MVVMed

* Removed view suffix since it was only moved and not mvvmed

* Update snapshots

* Removal of unused screenshots

* Added Image that we need

apps/web/res/css/_components.pcss

@@ -236,7 +236,6 @@
 @import "./views/messages/_MediaBody.pcss";
 @import "./views/messages/_MessageActionBar.pcss";
 @import "./views/messages/_MjolnirBody.pcss";
-@import "./views/messages/_PinnedMessageBadge.pcss";
 @import "./views/messages/_ReactionsRow.pcss";
 @import "./views/messages/_RedactedBody.pcss";
 @import "./views/messages/_RoomAvatarEvent.pcss";

apps/web/src/components/views/messages/PinnedMessageBadge.tsx

@@ -1,23 +0,0 @@
-/*
- * Copyright 2024 New Vector 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 HTMLProps, type JSX } from "react";
-import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
-
-import { _t } from "../../../languageHandler";
-
-/**
- * A badge to indicate that a message is pinned.
- */
-export function PinnedMessageBadge(props: Readonly<HTMLProps<HTMLDivElement>>): JSX.Element {
-    return (
-        <div {...props} className="mx_PinnedMessageBadge">
-            <PinIcon width="16px" height="16px" />
-            {_t("room|pinned_message_badge")}
-        </div>
-    );
-}

apps/web/src/components/views/rooms/EventTile.tsx

@@ -52,6 +52,7 @@ import {
     useCreateAutoDisposedViewModel,
     DecryptionFailureBodyView,
     MessageTimestampView,
+    PinnedMessageBadge,
     ReactionsRowButtonView,
     ReactionsRowView,
     useViewModel,
@@ -102,7 +103,6 @@ import { EventTileThreadToolbar } from "./EventTile/EventTileThreadToolbar";
 import { getLateEventInfo } from "../../structures/grouper/LateEventGrouper";
 import { Icon as LateIcon } from "../../../../res/img/sensor.svg";
 import PinningUtils from "../../../utils/PinningUtils";
-import { PinnedMessageBadge } from "../messages/PinnedMessageBadge";
 import { EventPreview } from "./EventPreview";
 import { ElementCallEventType } from "../../../call-types";
 import { DecryptionFailureBodyViewModel } from "../../../viewmodels/message-body/DecryptionFailureBodyViewModel";

apps/web/src/i18n/strings/en_EN.json

@@ -2088,7 +2088,6 @@
         "not_found_title": "This room or space does not exist.",
         "not_found_title_name": "%(roomName)s does not exist.",
         "peek_join_prompt": "You're previewing %(roomName)s. Want to join it?",
-        "pinned_message_badge": "Pinned message",
         "pinned_message_banner": {
             "button_close_list": "Close list",
             "button_view_all": "View all",

apps/web/test/unit-tests/components/views/messages/PinnedMessageBadge-test.tsx

@@ -1,18 +0,0 @@
-/*
- * Copyright 2024 New Vector 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 { render } from "jest-matrix-react";
-
-import { PinnedMessageBadge } from "../../../../../src/components/views/messages/PinnedMessageBadge.tsx";
-
-describe("PinnedMessageBadge", () => {
-    it("should render", () => {
-        const { asFragment } = render(<PinnedMessageBadge />);
-        expect(asFragment()).toMatchSnapshot();
-    });
-});

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

@@ -47,6 +47,7 @@
         "jump_to_date": "Jump to date",
         "jump_to_date_beginning": "The beginning of the room",
         "jump_to_date_prompt": "Pick a date to jump to",
+        "pinned_message_badge": "Pinned message",
         "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/EventContentBody";
 export * from "./message-body/MediaBody";
 export * from "./message-body/MessageTimestampView";
 export * from "./message-body/DecryptionFailureBodyView";
+export * from "./message-body/PinnedMessageBadge";
 export * from "./message-body/ReactionsRowButtonTooltip";
 export * from "./message-body/ReactionsRowButton";
 export * from "./message-body/ReactionsRow";

packages/shared-components/src/message-body/PinnedMessageBadge/PinnedMessageBadge.module.css

@@ -1,23 +1,21 @@
 /*
- * Copyright 2024 New Vector Ltd.
+ * Copyright 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.
  */
 
-.mx_PinnedMessageBadge {
+.pinnedMessageBadge {
     position: relative;
     display: flex;
     align-items: center;
     gap: var(--cpd-space-1x);
-
     padding: var(--cpd-space-1x) var(--cpd-space-3x) var(--cpd-space-1x) var(--cpd-space-1x);
     font: var(--cpd-font-body-xs-medium);
     background-color: var(--cpd-color-bg-subtle-secondary);
     color: var(--cpd-color-text-secondary);
-
-    border-radius: 99px;
     border: 1px solid var(--cpd-color-alpha-gray-400);
+    border-radius: 99px;
 
     svg {
         fill: var(--cpd-color-icon-secondary);

packages/shared-components/src/message-body/PinnedMessageBadge/PinnedMessageBadge.stories.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright 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 { PinnedMessageBadge } from "./PinnedMessageBadge";
+
+const meta = {
+    title: "Message body/PinnedMessageBadge",
+    component: PinnedMessageBadge,
+    args: {
+        "aria-describedby": "event-tile-description",
+        "tabIndex": 0,
+    },
+    tags: ["autodocs"],
+} satisfies Meta<typeof PinnedMessageBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

packages/shared-components/src/message-body/PinnedMessageBadge/PinnedMessageBadge.test.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright 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 { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import { render } from "@test-utils";
+
+import * as stories from "./PinnedMessageBadge.stories";
+
+const { Default } = composeStories(stories);
+
+describe("PinnedMessageBadge", () => {
+    it("renders the default badge", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+});

packages/shared-components/src/message-body/PinnedMessageBadge/PinnedMessageBadge.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright 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 HTMLAttributes, type JSX } from "react";
+import classNames from "classnames";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
+
+import styles from "./PinnedMessageBadge.module.css";
+import { _t } from "../../utils/i18n";
+
+export type PinnedMessageBadgeProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * A badge indicating that a message is pinned.
+ */
+export function PinnedMessageBadge({ className, children, ...props }: Readonly<PinnedMessageBadgeProps>): JSX.Element {
+    return (
+        <div {...props} className={classNames(styles.pinnedMessageBadge, className)}>
+            <PinIcon width="16px" height="16px" />
+            {children ?? _t("room|pinned_message_badge")}
+        </div>
+    );
+}

packages/shared-components/src/message-body/PinnedMessageBadge/__snapshots__/PinnedMessageBadge.test.tsx.snap

@@ -1,9 +1,11 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PinnedMessageBadge should render 1`] = `
+exports[`PinnedMessageBadge > renders the default badge 1`] = `
-<DocumentFragment>
+<div>
   <div
-    class="mx_PinnedMessageBadge"
+    aria-describedby="event-tile-description"
+    class="pinnedMessageBadge"
+    tabindex="0"
   >
     <svg
       fill="currentColor"
@@ -18,5 +20,5 @@ exports[`PinnedMessageBadge should render 1`] = `
     </svg>
     Pinned message
   </div>
-</DocumentFragment>
+</div>
 `;

packages/shared-components/src/message-body/PinnedMessageBadge/index.tsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright 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 { PinnedMessageBadge, type PinnedMessageBadgeProps } from "./PinnedMessageBadge";

packages/shared-components/vitest.config.ts

@@ -153,7 +153,11 @@ export default defineConfig({
         ],
     },
     optimizeDeps: {
-        include: ["vite-plugin-node-polyfills/shims/buffer", "vite-plugin-node-polyfills/shims/process"],
+        include: [
+            "vite-plugin-node-polyfills/shims/buffer",
+            "vite-plugin-node-polyfills/shims/process",
+            "react-virtuoso",
+        ],
     },
     resolve: {
         alias: {