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;
+}