Refactor Mjolnir body to shared view (#33407)

* Refactor Mjolnir body to shared view

* Update compund css + add snapshot

* Remove from app, and add in shared components

* update css to fix axe fail issue

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

@@ -237,6 +237,9 @@
         },
         "message_timestamp_received_at": "Received at: %(dateTime)s",
         "message_timestamp_sent_at": "Sent at: %(dateTime)s",
+        "mjolnir": {
+            "message_hidden": "You have ignored this user, so their message is hidden.<a> Show anyways.</a>"
+        },
         "pending_moderation": "Message pending moderation",
         "pending_moderation_reason": "Message pending moderation: %(reason)s",
         "url_preview": {

packages/shared-components/src/index.ts

@@ -23,6 +23,7 @@ export * from "./room/timeline/event-tile/body/HiddenMediaPlaceholder";
 export * from "./room/timeline/event-tile/body/RedactedBodyView";
 export * from "./room/timeline/event-tile/body/MFileBodyView";
 export * from "./room/timeline/event-tile/body/MImageBodyView";
+export * from "./room/timeline/event-tile/body/MjolnirBodyView";
 export * from "./room/timeline/event-tile/body/MVideoBodyView";
 export * from "./room/timeline/event-tile/body/TextualBodyView";
 export * from "./room/timeline/event-tile/body/UnknownBodyView";

packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.module.css

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+.content {
+    /* Avoid reducing opacity here: it lowers the effective contrast of both text and inline controls, failing axe tests. */
+    color: var(--cpd-color-text-secondary);
+}
+
+.allowButton {
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--cpd-color-text-action-accent);
+    cursor: pointer;
+    font: inherit;
+    text-decoration: underline;
+}
+
+.allowButton:hover,
+.allowButton:focus-visible {
+    text-decoration-thickness: var(--cpd-space-0-5x);
+}

packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.stories.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 JSX } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { MjolnirBodyView, type MjolnirBodyViewActions, type MjolnirBodyViewSnapshot } from "./MjolnirBodyView";
+
+type MjolnirBodyViewProps = MjolnirBodyViewSnapshot &
+    MjolnirBodyViewActions & {
+        className?: string;
+    };
+
+const MjolnirBodyViewWrapperImpl = ({ onAllowClick, className, ...snapshot }: MjolnirBodyViewProps): JSX.Element => {
+    const vm = useMockedViewModel(snapshot, { onAllowClick });
+
+    return <MjolnirBodyView vm={vm} className={className} />;
+};
+
+const MjolnirBodyViewWrapper = withViewDocs(MjolnirBodyViewWrapperImpl, MjolnirBodyView);
+
+const meta = {
+    title: "Timeline/Timeline Body/MjolnirBodyView",
+    component: MjolnirBodyViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        onAllowClick: fn(),
+        className: "",
+    },
+} satisfies Meta<typeof MjolnirBodyViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.test.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 { composeStories } from "@storybook/react-vite";
+import { render, screen } from "@test-utils";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { MockViewModel } from "../../../../../core/viewmodel";
+import {
+    MjolnirBodyView,
+    type MjolnirBodyViewActions,
+    type MjolnirBodyViewModel,
+    type MjolnirBodyViewSnapshot,
+} from "./MjolnirBodyView";
+import * as stories from "./MjolnirBodyView.stories";
+
+const { Default } = composeStories(stories);
+
+class TestMjolnirBodyViewModel extends MockViewModel<MjolnirBodyViewSnapshot> implements MjolnirBodyViewActions {
+    public constructor(
+        snapshot: MjolnirBodyViewSnapshot,
+        public onAllowClick: MjolnirBodyViewActions["onAllowClick"],
+    ) {
+        super(snapshot);
+    }
+}
+
+describe("MjolnirBodyView", () => {
+    it("renders the default story", () => {
+        const { container } = render(<Default />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText(/You have ignored this user, so their message is hidden\./)).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Show anyways." })).toBeInTheDocument();
+    });
+
+    it("invokes the allow action", async () => {
+        const user = userEvent.setup();
+        const onAllowClick = vi.fn();
+        const vm = new TestMjolnirBodyViewModel({}, onAllowClick) as MjolnirBodyViewModel;
+
+        render(<MjolnirBodyView vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "Show anyways." }));
+
+        expect(onAllowClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("applies a custom className to the root element", () => {
+        const vm = new TestMjolnirBodyViewModel({}, vi.fn()) as MjolnirBodyViewModel;
+
+        const { container } = render(<MjolnirBodyView vm={vm} className="custom-mjolnir" />);
+
+        expect(container.firstChild).toHaveClass("custom-mjolnir");
+    });
+
+    it("forwards the provided ref to the root element", () => {
+        const ref = React.createRef<HTMLDivElement>();
+        const vm = new TestMjolnirBodyViewModel({}, vi.fn()) as MjolnirBodyViewModel;
+
+        render(<MjolnirBodyView vm={vm} ref={ref} />);
+
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+});

packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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 classNames from "classnames";
+import React, { type JSX, type MouseEventHandler, type Ref } from "react";
+
+import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import { useI18n } from "../../../../../core/i18n/i18nContext";
+import styles from "./MjolnirBodyView.module.css";
+
+export type MjolnirBodyViewSnapshot = Record<never, never>;
+
+export interface MjolnirBodyViewActions {
+    /**
+     * Invoked when the user chooses to show the hidden message.
+     */
+    onAllowClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+export type MjolnirBodyViewModel = ViewModel<MjolnirBodyViewSnapshot, MjolnirBodyViewActions>;
+
+interface MjolnirBodyViewProps {
+    /**
+     * ViewModel providing the action handler.
+     */
+    vm: MjolnirBodyViewModel;
+    /**
+     * Optional CSS class names applied to the root element.
+     */
+    className?: string;
+    /**
+     * Optional ref forwarded to the root element.
+     */
+    ref?: Ref<HTMLDivElement>;
+}
+
+/**
+ * Renders the placeholder shown when a message is hidden because its sender is ignored.
+ */
+export function MjolnirBodyView({ vm, className, ref }: Readonly<MjolnirBodyViewProps>): JSX.Element {
+    useViewModel(vm);
+    const _t = useI18n().translate;
+
+    return (
+        <div className={classNames(styles.content, className)} ref={ref}>
+            <i>
+                {_t(
+                    "timeline|mjolnir|message_hidden",
+                    {},
+                    {
+                        a: (sub) => (
+                            <button type="button" className={styles.allowButton} onClick={vm.onAllowClick}>
+                                {sub}
+                            </button>
+                        ),
+                    },
+                )}
+            </i>
+        </div>
+    );
+}

packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/__snapshots__/MjolnirBodyView.test.tsx.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MjolnirBodyView > renders the default story 1`] = `
+<div>
+  <div
+    class="MjolnirBodyView-module_content"
+  >
+    <i>
+      <span>
+        You have ignored this user, so their message is hidden.
+        <button
+          class="MjolnirBodyView-module_allowButton"
+          type="button"
+        >
+           Show anyways.
+        </button>
+      </span>
+    </i>
+  </div>
+</div>
+`;

packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/index.tsx

@@ -0,0 +1,13 @@
+/*
+ * 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 {
+    MjolnirBodyView,
+    type MjolnirBodyViewActions,
+    type MjolnirBodyViewModel,
+    type MjolnirBodyViewSnapshot,
+} from "./MjolnirBodyView";