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

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

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, type RenderResult } from "jest-matrix-react";
+import { fireEvent, render, type RenderResult } from "jest-matrix-react";
 import { type MatrixClient, type MatrixEvent, EventType, type Room, MsgType } from "matrix-js-sdk/src/matrix";
 import fetchMock from "@fetch-mock/jest";
 import fs from "fs";
@@ -18,6 +18,7 @@ import { mkEvent, mkRoom, stubClient } from "../../../../test-utils";
 import MessageEvent from "../../../../../src/components/views/messages/MessageEvent";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
+import { Mjolnir } from "../../../../../src/mjolnir/Mjolnir";
 
 jest.mock("../../../../../src/components/views/messages/MImageBody", () => ({
     __esModule: true,
@@ -78,6 +79,7 @@ describe("MessageEvent", () => {
     };
 
     beforeEach(() => {
+        localStorage.clear();
         client = stubClient();
         room = mkRoom(client, "!room:example.com");
         jest.spyOn(client, "getRoom").mockReturnValue(room);
@@ -86,6 +88,11 @@ describe("MessageEvent", () => {
         jest.spyOn(SettingsStore, "unwatchSetting").mockImplementation(jest.fn());
     });
 
+    afterEach(() => {
+        localStorage.clear();
+        jest.restoreAllMocks();
+    });
+
     it("renders the shared redacted body for redacted events", () => {
         jest.spyOn(room, "getMember").mockReturnValue({ name: "Moderator" } as any);
         event = mkEvent({
@@ -113,6 +120,34 @@ describe("MessageEvent", () => {
         expect(result.queryByTestId("textual-body")).toBeNull();
     });
 
+    it("renders the shared Mjolnir body for banned senders", () => {
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName) => settingName === "feature_mjolnir");
+        jest.spyOn(Mjolnir, "sharedInstance").mockReturnValue({
+            isUserBanned: jest.fn().mockReturnValue(true),
+            isServerBanned: jest.fn().mockReturnValue(false),
+        } as unknown as Mjolnir);
+        event = mkEvent({
+            event: true,
+            type: EventType.RoomMessage,
+            id: "$hidden:example.com",
+            user: "@alice:example.com",
+            room: room.roomId,
+            content: {
+                msgtype: MsgType.Text,
+                body: "Hidden",
+            },
+        });
+
+        const result = renderMessageEvent();
+
+        expect(result.getByText(/You have ignored this user, so their message is hidden\./)).toBeInTheDocument();
+        const allowButton = result.getByRole("button", { name: "Show anyways." });
+
+        fireEvent.click(allowButton);
+
+        expect(localStorage.getItem(`mx_mjolnir_render_${room.roomId}__$hidden:example.com`)).toBe("true");
+    });
+
     it("renders the shared unknown body for unsupported message types", () => {
         event = mkEvent({
             event: true,

apps/web/test/viewmodels/message-body/MjolnirBodyViewModel-test.ts

@@ -0,0 +1,84 @@
+/*
+ * 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 MouseEvent } from "react";
+import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { MjolnirBodyViewModel } from "../../../src/viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel";
+
+describe("MjolnirBodyViewModel", () => {
+    const createEvent = (roomId = "!room:example.com", eventId = "$event:example.com"): MatrixEvent =>
+        ({
+            getRoomId: jest.fn().mockReturnValue(roomId),
+            getId: jest.fn().mockReturnValue(eventId),
+        }) as unknown as MatrixEvent;
+
+    const createClickEvent = (): MouseEvent<HTMLButtonElement> =>
+        ({
+            preventDefault: jest.fn(),
+            stopPropagation: jest.fn(),
+        }) as unknown as MouseEvent<HTMLButtonElement>;
+
+    afterEach(() => {
+        localStorage.clear();
+        jest.restoreAllMocks();
+    });
+
+    it("has an empty snapshot", () => {
+        const vm = new MjolnirBodyViewModel({ mxEvent: createEvent() });
+
+        expect(vm.getSnapshot()).toEqual({});
+    });
+
+    it("allows rendering the hidden event and notifies the parent", () => {
+        const onMessageAllowed = jest.fn();
+        const vm = new MjolnirBodyViewModel({
+            mxEvent: createEvent("!room:example.com", "$hidden:example.com"),
+            onMessageAllowed,
+        });
+        const event = createClickEvent();
+
+        vm.onAllowClick(event);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+        expect(localStorage.getItem("mx_mjolnir_render_!room:example.com__$hidden:example.com")).toBe("true");
+        expect(onMessageAllowed).toHaveBeenCalledTimes(1);
+    });
+
+    it("uses the updated event and callback", () => {
+        const oldCallback = jest.fn();
+        const newCallback = jest.fn();
+        const vm = new MjolnirBodyViewModel({
+            mxEvent: createEvent("!old:example.com", "$old:example.com"),
+            onMessageAllowed: oldCallback,
+        });
+
+        vm.setEvent(createEvent("!new:example.com", "$new:example.com"));
+        vm.setOnMessageAllowed(newCallback);
+        vm.onAllowClick(createClickEvent());
+
+        expect(localStorage.getItem("mx_mjolnir_render_!old:example.com__$old:example.com")).toBeNull();
+        expect(localStorage.getItem("mx_mjolnir_render_!new:example.com__$new:example.com")).toBe("true");
+        expect(oldCallback).not.toHaveBeenCalled();
+        expect(newCallback).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not emit snapshot updates for unchanged action inputs", () => {
+        const mxEvent = createEvent();
+        const onMessageAllowed = jest.fn();
+        const listener = jest.fn();
+        const vm = new MjolnirBodyViewModel({ mxEvent, onMessageAllowed });
+
+        vm.subscribe(listener);
+
+        vm.setEvent(mxEvent);
+        vm.setOnMessageAllowed(onMessageAllowed);
+
+        expect(listener).not.toHaveBeenCalled();
+    });
+});