Move EventTile to shared components - #3a (#34458)

* Refactor Mjolnir body to use render-only view model actions

* Extracted isMjolnirBodyAllowed from MessageEvent

* Converted the new test file to vitest

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

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import mime from "mime";
-import React, { createRef, type JSX, useEffect } from "react";
+import React, { createRef, type JSX, useCallback, useEffect } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
     EventType,
@@ -32,6 +32,10 @@ import MLocationBody from "./MLocationBody";
 import MBeaconBody from "./MBeaconBody";
 import { type GetRelationsForEvent, type IEventTileOps } from "../rooms/EventTile";
 import { MjolnirBodyViewModel } from "../../../viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel";
+import {
+    allowMjolnirBody,
+    isMjolnirBodyAllowed,
+} from "../../../viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState";
 import {
     DecryptionFailureBodyFactory,
     FileBodyFactory,
@@ -81,15 +85,14 @@ const baseEvTypes = new Map<string, React.ComponentType<IBodyProps>>([
 ]);
 
 function MjolnirBodyWrappedView({ mxEvent, onMessageAllowed, ref }: IBodyProps): JSX.Element {
-    const vm = useCreateAutoDisposedViewModel(() => new MjolnirBodyViewModel({ mxEvent, onMessageAllowed }));
+    const onAllow = useCallback(() => {
+        allowMjolnirBody(mxEvent, onMessageAllowed);
+    }, [mxEvent, onMessageAllowed]);
+    const vm = useCreateAutoDisposedViewModel(() => new MjolnirBodyViewModel({ onAllow }));
 
     useEffect(() => {
-        vm.setEvent(mxEvent);
-    }, [mxEvent, vm]);
-
-    useEffect(() => {
-        vm.setOnMessageAllowed(onMessageAllowed);
-    }, [onMessageAllowed, vm]);
+        vm.setProps({ onAllow });
+    }, [onAllow, vm]);
 
     return <MjolnirBodyView vm={vm} ref={ref} />;
 }
@@ -297,10 +300,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
         }
 
         if (SettingsStore.getValue("feature_mjolnir")) {
-            const key = `mx_mjolnir_render_${this.props.mxEvent.getRoomId()}__${this.props.mxEvent.getId()}`;
-            const allowRender = localStorage.getItem(key) === "true";
-
-            if (!allowRender) {
+            if (!isMjolnirBodyAllowed(this.props.mxEvent)) {
                 const userDomain = this.props.mxEvent.getSender()?.split(":").slice(1).join(":");
                 const userBanned = Mjolnir.sharedInstance().isUserBanned(this.props.mxEvent.getSender()!);
                 const serverBanned = userDomain && Mjolnir.sharedInstance().isServerBanned(userDomain);

apps/web/src/viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState.test.ts

@@ -0,0 +1,53 @@
+/*
+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.
+*/
+
+// @vitest-environment happy-dom
+
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { allowMjolnirBody, getMjolnirBodyStorageKey, isMjolnirBodyAllowed } from "./EventTileMjolnirBodyState";
+
+describe("EventTileMjolnirBodyState", () => {
+    afterEach(() => {
+        localStorage.clear();
+        vi.restoreAllMocks();
+    });
+
+    it("derives the application storage key from an event", () => {
+        const event = new MatrixEvent({
+            room_id: "!room:example.org",
+            event_id: "$event:example.org",
+        });
+
+        expect(getMjolnirBodyStorageKey(event)).toBe("mx_mjolnir_render_!room:example.org__$event:example.org");
+    });
+
+    it("reads whether an event has been allowed", () => {
+        const event = new MatrixEvent({
+            room_id: "!room:example.org",
+            event_id: "$event:example.org",
+        });
+
+        expect(isMjolnirBodyAllowed(event)).toBe(false);
+        allowMjolnirBody(event);
+        expect(isMjolnirBodyAllowed(event)).toBe(true);
+    });
+
+    it("stores the allow decision and notifies the owning tile", () => {
+        const event = new MatrixEvent({
+            room_id: "!room:example.org",
+            event_id: "$event:example.org",
+        });
+        const onMessageAllowed = vi.fn();
+
+        allowMjolnirBody(event, onMessageAllowed);
+
+        expect(localStorage.getItem("mx_mjolnir_render_!room:example.org__$event:example.org")).toBe("true");
+        expect(onMessageAllowed).toHaveBeenCalledTimes(1);
+    });
+});

apps/web/src/viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState.ts

@@ -0,0 +1,24 @@
+/*
+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 MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+/** Gets the application storage key used to remember that an event may be shown. */
+export function getMjolnirBodyStorageKey(mxEvent: MatrixEvent): string {
+    return `mx_mjolnir_render_${mxEvent.getRoomId()}__${mxEvent.getId()}`;
+}
+
+/** Gets whether a Mjolnir-hidden event has been allowed to render. */
+export function isMjolnirBodyAllowed(mxEvent: MatrixEvent): boolean {
+    return localStorage.getItem(getMjolnirBodyStorageKey(mxEvent)) === "true";
+}
+
+/** Allows a Mjolnir-hidden event to be shown and notifies the owning tile. */
+export function allowMjolnirBody(mxEvent: MatrixEvent, onMessageAllowed?: () => void): void {
+    localStorage.setItem(getMjolnirBodyStorageKey(mxEvent), "true");
+    onMessageAllowed?.();
+}

apps/web/src/viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel.ts

@@ -5,8 +5,6 @@
  * 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 {
     BaseViewModel,
     type MjolnirBodyViewModel as MjolnirBodyViewModelInterface,
@@ -14,14 +12,8 @@ import {
 } from "@element-hq/web-shared-components";
 
 export interface MjolnirBodyViewModelProps {
-    /**
-     * The event currently hidden by Mjolnir.
-     */
-    mxEvent: MatrixEvent;
-    /**
-     * Invoked after the event has been allowed so the tile can re-render.
-     */
-    onMessageAllowed?: () => void;
+    /** Invoked when the user chooses to show the hidden event. */
+    onAllow: () => void;
 }
 
 /**
@@ -37,29 +29,11 @@ export class MjolnirBodyViewModel
         super(props, MjolnirBodyViewModel.computeSnapshot());
     }
 
-    public setEvent(mxEvent: MatrixEvent): void {
-        if (this.props.mxEvent === mxEvent) return;
-
-        // The view has no event-derived render state; this only changes action inputs.
-        this.props = { ...this.props, mxEvent };
+    public setProps(props: MjolnirBodyViewModelProps): void {
+        this.props = props;
     }
 
-    public setOnMessageAllowed(onMessageAllowed: (() => void) | undefined): void {
-        if (this.props.onMessageAllowed === onMessageAllowed) return;
-
-        // The view has no callback-derived render state; this only changes action inputs.
-        this.props = { ...this.props, onMessageAllowed };
-    }
-
-    public onAllowClick = (event: MouseEvent<HTMLButtonElement>): void => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        localStorage.setItem(this.localStorageKey, "true");
-        this.props.onMessageAllowed?.();
+    public onAllow = (): void => {
+        this.props.onAllow();
     };
-
-    private get localStorageKey(): string {
-        return `mx_mjolnir_render_${this.props.mxEvent.getRoomId()}__${this.props.mxEvent.getId()}`;
-    }
 }