Refactor MessageTimestamp using MVVM and move to shared-components (#31988)

* Create a MessageTimestampView in shared components

* Switching to use shared component and view model in element-web

* Add .mx_MessageTimestamp tp _common.pcss since it is used extensively in element-web

* Added comments to view model

* Updating after Add options for consistent screenshots

* Moved rendering of late icon to EventTile

* Update shared component snaps

* Added I18nContext.Provider to Modal.tsx and HtmlExport.tsx to make them work with shared components

* Avoid circular dependencies for ModuleApi

* Adjust role and wire handlers in view model

* Change to role="link"

* Revert I18nContext.Provider changes

* Updated snapshot

* Provide I18nContext for shared-components used inside dialogs and html-export rendered in a separate root.

* Add patch for react-sdk-module-api to shared components

* Add setProps to MessageTimeViewModel and useEffect on wrappers

* Added more tests to improve coverage

* Changes after PR review

* Use specific setters in the viewmodel more relating to the business logic.

* Remove unused CSS properties

* New snapshot after merge

* Removed aria-hidden logic and display tooltips in stories

* Remove await for toolitp in HasInhibitTooltip story

* Add screenshots with visible tooltips

* Fixes after merge and review comments

* Updated snapshots for unit tests

* Removed one test since tooltips are not rendered to snapshots

res/css/_common.pcss

@@ -23,6 +23,7 @@ Please see LICENSE files in the repository root for full details.
     --buttons-dialog-gap-column: $spacing-8;
     --MBody-border-radius: 8px;
     --EventTileBubble_margin-block: 10px;
+    --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
 
     /* Expected z-indexes for dialogs:
         4000 - Default wrapper index
@@ -908,3 +909,17 @@ legend {
     -webkit-line-clamp: var(--mx-line-clamp, 1);
     overflow: hidden;
 }
+
+/* This class is used extensively in element-web and are included here for compatibility with the existing timeline and layout.
+/* TODO: Review mx_MessageTimestamp usage after finishing migration of timeline tiles to shared components. */
+/* https://github.com/element-hq/element-web/issues/31651 */
+.mx_MessageTimestamp {
+    color: var(--cpd-color-text-secondary) !important; /* override anchor color */
+    font-size: $font-10px;
+    font-variant-numeric: tabular-nums;
+    display: block; /* enable the width setting below */
+    width: var(--MessageTimestamp-width);
+    white-space: nowrap;
+    user-select: none;
+    text-decoration: none;
+}

res/css/_components.pcss

@@ -238,7 +238,6 @@
 @import "./views/messages/_MVideoBody.pcss";
 @import "./views/messages/_MediaBody.pcss";
 @import "./views/messages/_MessageActionBar.pcss";
-@import "./views/messages/_MessageTimestamp.pcss";
 @import "./views/messages/_MjolnirBody.pcss";
 @import "./views/messages/_PinnedMessageBadge.pcss";
 @import "./views/messages/_ReactionsRow.pcss";

res/css/views/messages/_MessageTimestamp.pcss

@@ -1,32 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2015, 2016 OpenMarket 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.
-*/
-
-:root {
-    --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
-    --MessageTimestamp-max-width: 80px;
-    --MessageTimestamp-color: $event-timestamp-color;
-}
-
-.mx_MessageTimestamp {
-    color: var(--MessageTimestamp-color) !important; /* override anchor color */
-    font-size: $font-10px;
-    font-variant-numeric: tabular-nums;
-    display: block; /* enable the width setting below */
-    width: var(--MessageTimestamp-width);
-    white-space: nowrap;
-    user-select: none;
-    text-decoration: none;
-}
-
-.mx_MessageTimestamp_lateIcon {
-    position: absolute;
-    right: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    color: inherit;
-}

res/css/views/rooms/_EventBubbleTile.pcss

@@ -38,7 +38,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_MessageTimestamp {
         width: unset; /* Cancel the default width */
-        max-width: var(--MessageTimestamp-max-width);
+        max-width: 80px;
     }
 
     .mx_ThreadSummary {

res/css/views/rooms/_EventTile.pcss

@@ -66,6 +66,13 @@ $left-gutter: 64px;
         }
     }
 
+    .mx_MessageTimestamp_lateIcon {
+        position: absolute;
+        right: 100%;
+        top: var(--cpd-space-1x);
+        color: var(--cpd-color-text-secondary);
+    }
+
     .mx_EventTileBubble {
         margin-block: var(--EventTileBubble_margin-block);
         min-width: 100px;