Refactor room avatar event to MVVM (#33473)

* Refactor room avatar event to MVVM

* Cover room avatar event factory wrapper

* Fix prettier

* added screenshots

apps/web/src/events/EventTileFactory.tsx

@@ -22,6 +22,7 @@ import {
     EncryptionEventView,
     HiddenBodyView,
     MKeyVerificationRequestView,
+    RoomAvatarEventView,
     TextualEventView,
     useCreateAutoDisposedViewModel,
 } from "@element-hq/web-shared-components";
@@ -34,7 +35,7 @@ import MessageEvent from "../components/views/messages/MessageEvent";
 import LegacyCallEvent from "../components/views/messages/LegacyCallEvent";
 import { CallEvent } from "../components/views/messages/CallEvent";
 import { RoomPredecessorTile } from "../components/views/messages/RoomPredecessorTile";
-import RoomAvatarEvent from "../components/views/messages/RoomAvatarEvent";
+import RoomAvatar from "../components/views/avatars/RoomAvatar";
 import { WIDGET_LAYOUT_EVENT_TYPE } from "../stores/widgets/WidgetLayoutStore";
 import { ALL_RULE_TYPES } from "../mjolnir/BanList";
 import { MatrixClientPeg } from "../MatrixClientPeg";
@@ -49,6 +50,7 @@ import { type IBodyProps } from "../components/views/messages/IBodyProps";
 import { ModuleApi } from "../modules/Api";
 import { EncryptionEventViewModel } from "../viewmodels/room/timeline/event-tile/EncryptionEventViewModel";
 import { MKeyVerificationRequestViewModel } from "../viewmodels/room/timeline/event-tile/MKeyVerificationRequestViewModel";
+import { RoomAvatarEventViewModel } from "../viewmodels/room/timeline/event-tile/RoomAvatarEventViewModel";
 import { TextualEventViewModel } from "../viewmodels/room/timeline/event-tile/TextualEventViewModel";
 import { HiddenBodyViewModel } from "../viewmodels/room/timeline/event-tile/body/HiddenBodyViewModel";
 import { ElementCallEventType } from "../call-types";
@@ -124,6 +126,36 @@ function HiddenBodyWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
 }
 const HiddenEventFactory: Factory = (ref, props) => <HiddenBodyWrappedView ref={ref} {...props} />;
 
+function RoomAvatarEventWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
+    const cli = useMatrixClientContext() ?? MatrixClientPeg.safeGet();
+    const vm = useCreateAutoDisposedViewModel(() => new RoomAvatarEventViewModel({ mxEvent, cli }));
+
+    useEffect(() => {
+        vm.setEvent(mxEvent);
+    }, [mxEvent, vm]);
+
+    const roomId = mxEvent.getRoomId();
+    const room = roomId ? cli.getRoom(roomId) : null;
+
+    return (
+        <RoomAvatarEventView
+            vm={vm}
+            ref={ref}
+            renderAvatar={(snapshot) => (
+                <RoomAvatar
+                    room={room ?? undefined}
+                    size="14px"
+                    oobData={{
+                        avatarUrl: snapshot.avatarUrl,
+                        name: snapshot.roomName,
+                    }}
+                />
+            )}
+        />
+    );
+}
+const RoomAvatarEventFactory: Factory = (ref, props) => <RoomAvatarEventWrappedView ref={ref} {...props} />;
+
 function CallStartedTileViewWrapped({ mxEvent }: IBodyProps): JSX.Element {
     const vm = useCreateAutoDisposedViewModel(() => new CallStartedTileViewModel({ mxEvent }));
     return <CallStartedTileView vm={vm} />;
@@ -155,7 +187,7 @@ const STATE_EVENT_TILE_TYPES = new Map<string, Factory>([
     [EventType.RoomCreate, RoomCreateEventFactory],
     [EventType.RoomMember, TextualEventFactory],
     [EventType.RoomName, TextualEventFactory],
-    [EventType.RoomAvatar, (ref, props) => <RoomAvatarEvent ref={ref} {...props} />],
+    [EventType.RoomAvatar, RoomAvatarEventFactory],
     [EventType.RoomThirdPartyInvite, TextualEventFactory],
     [EventType.RoomHistoryVisibility, TextualEventFactory],
     [EventType.RoomTopic, TextualEventFactory],