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/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";