Refactor DateSeparator using MVVM and move to shared-components

[rbondesson]

Checklist

• I have read through review guidelines and CONTRIBUTING.md.
• Tests written for new code (and old code if feasible).
• New or updated public/exported symbols have accurate TSDoc documentation.
• Linter and other CI checks pass.
• I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

Refactor and move DateSeparator to shared-components

Summary

• Moved DateSeparator component to @element-hq/web-shared-components package as DateSeparatorView

Changes

New shared component

• Adopted the ViewModel pattern (MVVM) for the component, introducing the DateSeparatorViewSnapshot interface
• Added CSS module for styling, Storybook for visual testing and unit tests with snapshot coverage

Codebase migration

• Added DateSeparatorViewModel.tsx to element-web including unit-test

Codebase migration

• Components in element-web now renders DateSeparatorView instead of the old component.

Test plan

• Verify date separator renders correctly in rooms
• Check Storybook stories render correctly and create new screenshots
• Run new unit tests in shared component
• Run unit tests for affected components in element-web
• Run visual tests for affected components in element-web

Tests

Before & After

• Before Refactoring

• After Refactoring

[MidhunSureshR]

Rendering out the UI is part of the view's job so this code should be moved to DateSeparatorView.
You could add a property to the snapshot, say jumpToDateEnabled and then have the view render out two different sub-views based on that snapshot value:

if(jumpToDateEnabled) {
    return <SimpleDateSeparatorView vm={vm} />;
}
else {
    return <JumpDateSeparatorView vm={vm} />;
}

[rbondesson]

The components rendered in jumpToDateMenu are currently not present in shared components.
ContextMenuTooltipButton, IconizedContextMenu, IconizedContextMenuOptionList, IconizedContextMenuOption add JumpToDatePicker. The JumpToDatePicker component is on the list of components to migrate, but the others are not.

I could create a new component for jumpToDateMenu, but it will be an element-web component, or I can leave as is. Which way do you prefer?