Refactor DateSeparator using MVVM and move to shared-components (#32482)

* Refactor DateSeparator using MVVM and move to shared-components

* Add a few more stories, tests and screenshots

* Use the shared component and viewmodel in element-web

* Renaming custom content property an updating snapshots

* Fix lint errors and update snapshot after merge

* Change lifecycle handling for DateSeparatoreViewModel in components where manual handling is preferrable over wrapper component.

* Move context menu from viewmodel to shared components - step 1

* Create a jump to date picker component in shared components

* Add tests for coverage and fix layout issues and roving indexes

* Make element-web use the new component

* Simplify context menu and adjusting tests

* The HTMLExport now render shared components and need a I18nContext.Provider

* Updating unit tests for context menu

* Changed to {translate: _t} to let scripts pick up translations

* Fix lint issue and updating screenshots after merge

* Update snaps for element web components

* Renaming MVVM view components with suffix View.

* Fixing problem with input date calendar icon and system dark theme

* Changed the rendering of the menu and added a separate button component

* Handle input control with useRef in onKeyDown

* Updating DateSeparator snapshots on unit tests

* Updating layout after compound Menu got a className property

* Move files to new subfolder after merge

* Updated snapshot after merge

* Updating lock file

* Updates to styling from PR review

* Updates to focus/blur functionality

* Fixed tabbing and export documentation to stories

* Updated snapshots

---------

Co-authored-by: Zack <zazi21@student.bth.se>

apps/web/res/css/_components.pcss

@@ -219,11 +219,9 @@
 @import "./views/location/_LocationPicker.pcss";
 @import "./views/messages/_CallEvent.pcss";
 @import "./views/messages/_CreateEvent.pcss";
-@import "./views/messages/_DateSeparator.pcss";
 @import "./views/messages/_DisambiguatedProfile.pcss";
 @import "./views/messages/_HiddenBody.pcss";
 @import "./views/messages/_HiddenMediaPlaceholder.pcss";
-@import "./views/messages/_JumpToDatePicker.pcss";
 @import "./views/messages/_LegacyCallEvent.pcss";
 @import "./views/messages/_MEmoteBody.pcss";
 @import "./views/messages/_MFileBody.pcss";

apps/web/res/css/views/messages/_DateSeparator.pcss

@@ -1,31 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2017 Vector 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.
-*/
-
-.mx_DateSeparator_dateContent {
-    padding: 0 25px;
-}
-
-.mx_DateSeparator_dateHeading {
-    flex: 0 0 auto;
-    margin: 0;
-    font-size: inherit;
-    font-weight: inherit;
-    color: inherit;
-    text-transform: capitalize;
-}
-
-.mx_DateSeparator_jumpToDateMenu {
-    display: flex;
-}
-
-.mx_DateSeparator_chevron {
-    align-self: center;
-    width: 16px;
-    height: 16px;
-    color: var(--cpd-color-icon-secondary);
-}

apps/web/res/css/views/messages/_JumpToDatePicker.pcss

@@ -1,34 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-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.
-*/
-
-.mx_JumpToDatePicker_form {
-    display: flex;
-    /* This matches the default padding of IconizedContextMenuOption */
-    /* (see context_menus/_IconizedContextMenu.pcss) */
-    padding-top: 12px;
-    padding-bottom: 12px;
-}
-
-.mx_JumpToDatePicker_label {
-    align-self: center;
-    font-size: $font-15px;
-}
-
-.mx_JumpToDatePicker_datePicker {
-    margin: 0;
-    margin-left: 8px;
-
-    &,
-    & > input {
-        border-radius: 8px;
-    }
-}
-
-.mx_JumpToDatePicker_submitButton {
-    margin-left: 8px;
-}