From 11030ae68ddb64cb451bb71ed8446ce20a10d2cb Mon Sep 17 00:00:00 2001
From: rbondesson <rickard.bondesson@cgi.com>
Date: Mon, 2 Mar 2026 13:18:51 +0100
Subject: [PATCH] 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             |   2 -
 .../css/views/messages/_DateSeparator.pcss    |  31 --
 .../css/views/messages/_JumpToDatePicker.pcss |  34 --
 apps/web/src/DateUtils.ts                     |  14 -
 .../components/structures/MessagePanel.tsx    |  21 +-
 .../structures/grouper/CreationGrouper.tsx    |  16 +-
 .../structures/grouper/MainGrouper.tsx        |  16 +-
 .../dialogs/MessageEditHistoryDialog.tsx      |  28 +-
 .../views/messages/DateSeparator.tsx          | 344 -----------------
 .../views/messages/JumpToDatePicker.tsx       |  64 ----
 .../views/rooms/SearchResultTile.tsx          |  18 +-
 apps/web/src/i18n/strings/en_EN.json          |   3 -
 apps/web/src/utils/exportUtils/HtmlExport.tsx |  41 +-
 .../timeline/DateSeparatorViewModel.tsx       | 284 ++++++++++++++
 .../__snapshots__/MessagePanel-test.tsx.snap  |   4 +-
 .../MessageEditHistoryDialog-test.tsx.snap    |   8 +-
 .../views/messages/DateSeparator-test.tsx     | 322 ----------------
 .../views/messages/JumpToDatePicker-test.tsx  |  33 --
 .../__snapshots__/DateSeparator-test.tsx.snap | 103 -----
 .../JumpToDatePicker-test.tsx.snap            |  41 --
 .../test/unit-tests/utils/DateUtils-test.ts   |  10 -
 .../__snapshots__/HTMLExport-test.ts.snap     |   2 +-
 .../timeline/DateSeparatorViewModel-test.tsx  | 351 ++++++++++++++++++
 .../default-auto.png                          | Bin 0 -> 17692 bytes
 .../has-extra-class-names-auto.png            | Bin 0 -> 17692 bytes
 .../long-localized-label-auto.png             | Bin 0 -> 24362 bytes
 .../with-jump-to-date-picker-auto.png         | Bin 0 -> 31913 bytes
 .../with-jump-to-tooltip-auto.png             | Bin 0 -> 19321 bytes
 .../src/i18n/strings/en_EN.json               |   4 +
 packages/shared-components/src/index.ts       |   1 +
 .../TimelineSeparator/TimelineSeparator.tsx   |  12 +-
 .../DateSeparatorView/DateSeparatorButton.tsx |  61 +++
 .../DateSeparatorContextMenuView.module.css   |  20 +
 .../DateSeparatorContextMenuView.test.tsx     | 182 +++++++++
 .../DateSeparatorContextMenuView.tsx          |  95 +++++
 .../DateSeparatorDatePickerView.module.css    |  47 +++
 .../DateSeparatorDatePickerView.tsx           | 132 +++++++
 .../DateSeparatorView.module.css              |  27 ++
 .../DateSeparatorView.stories.tsx             |  91 +++++
 .../DateSeparatorView.test.tsx                |  76 ++++
 .../DateSeparatorView/DateSeparatorView.tsx   | 114 ++++++
 .../DateSeparatorView.test.tsx.snap           | 138 +++++++
 .../src/timeline/DateSeparatorView/index.ts   |   8 +
 .../src/utils/DateUtils.test.ts               |  35 ++
 .../shared-components/src/utils/DateUtils.ts  |  14 +
 .../shared-components/src/utils/humanize.ts   |   4 +
 pnpm-lock.yaml                                |  14 +-
 pnpm-workspace.yaml                           |   2 +-
 48 files changed, 1819 insertions(+), 1048 deletions(-)
 delete mode 100644 apps/web/res/css/views/messages/_DateSeparator.pcss
 delete mode 100644 apps/web/res/css/views/messages/_JumpToDatePicker.pcss
 delete mode 100644 apps/web/src/components/views/messages/DateSeparator.tsx
 delete mode 100644 apps/web/src/components/views/messages/JumpToDatePicker.tsx
 create mode 100644 apps/web/src/viewmodels/timeline/DateSeparatorViewModel.tsx
 delete mode 100644 apps/web/test/unit-tests/components/views/messages/DateSeparator-test.tsx
 delete mode 100644 apps/web/test/unit-tests/components/views/messages/JumpToDatePicker-test.tsx
 delete mode 100644 apps/web/test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap
 delete mode 100644 apps/web/test/unit-tests/components/views/messages/__snapshots__/JumpToDatePicker-test.tsx.snap
 create mode 100644 apps/web/test/viewmodels/timeline/DateSeparatorViewModel-test.tsx
 create mode 100644 packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/default-auto.png
 create mode 100644 packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/has-extra-class-names-auto.png
 create mode 100644 packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/long-localized-label-auto.png
 create mode 100644 packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png
 create mode 100644 packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-tooltip-auto.png
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorButton.tsx
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.module.css
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.test.tsx
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.tsx
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorDatePickerView.module.css
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorDatePickerView.tsx
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.module.css
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.stories.tsx
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.test.tsx
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.tsx
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap
 create mode 100644 packages/shared-components/src/timeline/DateSeparatorView/index.ts
 create mode 100644 packages/shared-components/src/utils/DateUtils.test.ts

diff --git a/apps/web/res/css/_components.pcss b/apps/web/res/css/_components.pcss
index c8ca64d33b..a788baa032 100644
--- a/apps/web/res/css/_components.pcss
+++ b/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";
diff --git a/apps/web/res/css/views/messages/_DateSeparator.pcss b/apps/web/res/css/views/messages/_DateSeparator.pcss
deleted file mode 100644
index 50d56b085a..0000000000
--- a/apps/web/res/css/views/messages/_DateSeparator.pcss
+++ /dev/null
@@ -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);
-}
diff --git a/apps/web/res/css/views/messages/_JumpToDatePicker.pcss b/apps/web/res/css/views/messages/_JumpToDatePicker.pcss
deleted file mode 100644
index b4b0244be5..0000000000
--- a/apps/web/res/css/views/messages/_JumpToDatePicker.pcss
+++ /dev/null
@@ -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;
-}
diff --git a/apps/web/src/DateUtils.ts b/apps/web/src/DateUtils.ts
index cd4a440372..e975fe834f 100644
--- a/apps/web/src/DateUtils.ts
+++ b/apps/web/src/DateUtils.ts
@@ -127,20 +127,6 @@ export function formatFullDate(date: Date, showTwelveHour = false, showSeconds =
     }).format(date);
 }
 
-/**
- * Formats dates to be compatible with attributes of a `<input type="date">`. Dates
- * should be formatted like "2020-06-23" (formatted according to ISO8601).
- *
- * @param date The date to format.
- * @returns The date string in ISO8601 format ready to be used with an `<input>`
- */
-export function formatDateForInput(date: Date): string {
-    const year = `${date.getFullYear()}`.padStart(4, "0");
-    const month = `${date.getMonth() + 1}`.padStart(2, "0");
-    const day = `${date.getDate()}`.padStart(2, "0");
-    return `${year}-${month}-${day}`;
-}
-
 /**
  * Formats a given date to a time string including seconds.
  * Will use the browser's default time zone.
diff --git a/apps/web/src/components/structures/MessagePanel.tsx b/apps/web/src/components/structures/MessagePanel.tsx
index 40b69130a7..207b91b0b6 100644
--- a/apps/web/src/components/structures/MessagePanel.tsx
+++ b/apps/web/src/components/structures/MessagePanel.tsx
@@ -18,7 +18,11 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { isSupportedReceiptType } from "matrix-js-sdk/src/utils";
-import { TimelineSeparator } from "@element-hq/web-shared-components";
+import {
+    DateSeparatorView,
+    TimelineSeparator,
+    useCreateAutoDisposedViewModel,
+} from "@element-hq/web-shared-components";
 
 import shouldHideEvent from "../../shouldHideEvent";
 import { formatDate, wantsDateSeparator } from "../../DateUtils";
@@ -37,7 +41,6 @@ import defaultDispatcher from "../../dispatcher/dispatcher";
 import type LegacyCallEventGrouper from "./LegacyCallEventGrouper";
 import WhoIsTypingTile from "../views/rooms/WhoIsTypingTile";
 import ScrollPanel, { type IScrollState } from "./ScrollPanel";
-import DateSeparator from "../views/messages/DateSeparator";
 import ErrorBoundary from "../views/elements/ErrorBoundary";
 import Spinner from "../views/elements/Spinner";
 import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
@@ -53,10 +56,19 @@ import { MainGrouper } from "./grouper/MainGrouper";
 import { CreationGrouper } from "./grouper/CreationGrouper";
 import { _t } from "../../languageHandler";
 import { getLateEventInfo } from "./grouper/LateEventGrouper";
+import { DateSeparatorViewModel } from "../../viewmodels/timeline/DateSeparatorViewModel";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
 
+/**
+ * Creates and auto-disposes the DateSeparatorViewModel for message panel rendering.
+ */
+function DateSeparatorWrapper({ roomId, ts }: { roomId: string; ts: number }): JSX.Element {
+    const vm = useCreateAutoDisposedViewModel(() => new DateSeparatorViewModel({ roomId, ts }));
+    return <DateSeparatorView vm={vm} />;
+}
+
 /**
  * Indicates which separator (if any) should be rendered between timeline events.
  */
@@ -757,9 +769,10 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         const wantsSeparator = this.wantsSeparator(prevEvent, mxEv);
         if (!isGrouped && this.props.room) {
             if (wantsSeparator === SeparatorKind.Date) {
+                const separatorRoomId = this.props.room.roomId;
                 ret.push(
-                    <li key={ts1}>
-                        <DateSeparator key={ts1} roomId={this.props.room.roomId} ts={ts1} />
+                    <li key={`${separatorRoomId}-${ts1}`}>
+                        <DateSeparatorWrapper key={`${separatorRoomId}-${ts1}`} roomId={separatorRoomId} ts={ts1} />
                     </li>,
                 );
             } else if (wantsSeparator === SeparatorKind.LateEvent) {
diff --git a/apps/web/src/components/structures/grouper/CreationGrouper.tsx b/apps/web/src/components/structures/grouper/CreationGrouper.tsx
index 80c9bfedcd..eafd7ade1d 100644
--- a/apps/web/src/components/structures/grouper/CreationGrouper.tsx
+++ b/apps/web/src/components/structures/grouper/CreationGrouper.tsx
@@ -9,20 +9,29 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ReactNode } from "react";
 import { EventType, M_BEACON_INFO, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { DateSeparatorView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
 import { BaseGrouper } from "./BaseGrouper";
 import { SeparatorKind, type WrappedEvent } from "../MessagePanel";
 import type MessagePanel from "../MessagePanel";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { _t } from "../../../languageHandler";
-import DateSeparator from "../../views/messages/DateSeparator";
 import NewRoomIntro from "../../views/rooms/NewRoomIntro";
 import GenericEventListSummary from "../../views/elements/GenericEventListSummary";
+import { DateSeparatorViewModel } from "../../../viewmodels/timeline/DateSeparatorViewModel";
 
 // Wrap initial room creation events into a GenericEventListSummary
 // Grouping only events sent by the same user that sent the `m.room.create` and only until
 // the first non-state event, beacon_info event or membership event which is not regarding the sender of the `m.room.create` event
 
+/**
+ * Creates and auto-disposes the DateSeparatorViewModel for creation-group rendering.
+ */
+function DateSeparatorWrapper({ roomId, ts }: { roomId: string; ts: number }): ReactNode {
+    const vm = useCreateAutoDisposedViewModel(() => new DateSeparatorViewModel({ roomId, ts }));
+    return <DateSeparatorView vm={vm} />;
+}
+
 export class CreationGrouper extends BaseGrouper {
     public static canStartGroup = function (_panel: MessagePanel, { event }: WrappedEvent): boolean {
         return event.getType() === EventType.RoomCreate;
@@ -86,10 +95,11 @@ export class CreationGrouper extends BaseGrouper {
         const lastShownEvent = this.lastShownEvent;
 
         if (panel.wantsSeparator(this.prevEvent, createEvent.event) === SeparatorKind.Date) {
+            const separatorRoomId = createEvent.event.getRoomId()!;
             const ts = createEvent.event.getTs();
             ret.push(
-                <li key={ts + "~"}>
-                    <DateSeparator roomId={createEvent.event.getRoomId()!} ts={ts} />
+                <li key={`${separatorRoomId}-${ts}~`}>
+                    <DateSeparatorWrapper roomId={separatorRoomId} ts={ts} />
                 </li>,
             );
         }
diff --git a/apps/web/src/components/structures/grouper/MainGrouper.tsx b/apps/web/src/components/structures/grouper/MainGrouper.tsx
index 6766f0e5b7..bf9a178fc8 100644
--- a/apps/web/src/components/structures/grouper/MainGrouper.tsx
+++ b/apps/web/src/components/structures/grouper/MainGrouper.tsx
@@ -8,15 +8,16 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ReactNode } from "react";
 import { EventType, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { DateSeparatorView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
 import type MessagePanel from "../MessagePanel";
 import { SeparatorKind, type WrappedEvent } from "../MessagePanel";
 import { BaseGrouper } from "./BaseGrouper";
 import { hasText } from "../../../TextForEvent";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import DateSeparator from "../../views/messages/DateSeparator";
 import HistoryTile from "../../views/rooms/HistoryTile";
 import EventListSummary from "../../views/elements/EventListSummary";
+import { DateSeparatorViewModel } from "../../../viewmodels/timeline/DateSeparatorViewModel";
 
 const groupedStateEvents = [
     EventType.RoomMember,
@@ -25,6 +26,14 @@ const groupedStateEvents = [
     EventType.RoomPinnedEvents,
 ];
 
+/**
+ * Creates and auto-disposes the DateSeparatorViewModel for grouped timeline rendering.
+ */
+function DateSeparatorWrapper({ roomId, ts }: { roomId: string; ts: number }): ReactNode {
+    const vm = useCreateAutoDisposedViewModel(() => new DateSeparatorViewModel({ roomId, ts }));
+    return <DateSeparatorView vm={vm} />;
+}
+
 // Wrap consecutive grouped events in a ListSummary
 export class MainGrouper extends BaseGrouper {
     public static canStartGroup = function (panel: MessagePanel, { event: ev, shouldShow }: WrappedEvent): boolean {
@@ -113,10 +122,11 @@ export class MainGrouper extends BaseGrouper {
         const ret: ReactNode[] = [];
 
         if (panel.wantsSeparator(this.prevEvent, this.events[0].event) === SeparatorKind.Date) {
+            const separatorRoomId = this.events[0].event.getRoomId()!;
             const ts = this.events[0].event.getTs();
             ret.push(
-                <li key={ts + "~"}>
-                    <DateSeparator roomId={this.events[0].event.getRoomId()!} ts={ts} />
+                <li key={`${separatorRoomId}-${ts}~`}>
+                    <DateSeparatorWrapper roomId={separatorRoomId} ts={ts} />
                 </li>,
             );
         }
diff --git a/apps/web/src/components/views/dialogs/MessageEditHistoryDialog.tsx b/apps/web/src/components/views/dialogs/MessageEditHistoryDialog.tsx
index 72b11bc4e1..599d2c32f0 100644
--- a/apps/web/src/components/views/dialogs/MessageEditHistoryDialog.tsx
+++ b/apps/web/src/components/views/dialogs/MessageEditHistoryDialog.tsx
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import { type MatrixEvent, EventType, RelationType, type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { DateSeparatorView } from "@element-hq/web-shared-components";
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from "../../../languageHandler";
@@ -18,7 +19,7 @@ import BaseDialog from "./BaseDialog";
 import ScrollPanel from "../../structures/ScrollPanel";
 import Spinner from "../elements/Spinner";
 import EditHistoryMessage from "../messages/EditHistoryMessage";
-import DateSeparator from "../messages/DateSeparator";
+import { DateSeparatorViewModel } from "../../../viewmodels/timeline/DateSeparatorViewModel";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -35,6 +36,8 @@ interface IState {
 }
 
 export default class MessageEditHistoryDialog extends React.PureComponent<IProps, IState> {
+    private dateSeparatorVms = new Map<string, DateSeparatorViewModel>();
+
     public constructor(props: IProps) {
         super(props);
         this.state = {
@@ -47,6 +50,16 @@ export default class MessageEditHistoryDialog extends React.PureComponent<IProps
         };
     }
 
+    private getDateSeparatorVm(roomId: string, ts: number): DateSeparatorViewModel {
+        const key = `${roomId}-${ts}`;
+        let vm = this.dateSeparatorVms.get(key);
+        if (!vm) {
+            vm = new DateSeparatorViewModel({ roomId, ts });
+            this.dateSeparatorVms.set(key, vm);
+        }
+        return vm;
+    }
+
     private loadMoreEdits = async (backwards?: boolean): Promise<boolean> => {
         if (backwards || (!this.state.nextBatch && !this.state.isLoading)) {
             // bail out on backwards as we only paginate in one direction
@@ -108,6 +121,13 @@ export default class MessageEditHistoryDialog extends React.PureComponent<IProps
         this.loadMoreEdits();
     }
 
+    public componentWillUnmount(): void {
+        for (const vm of this.dateSeparatorVms.values()) {
+            vm.dispose();
+        }
+        this.dateSeparatorVms.clear();
+    }
+
     private renderEdits(): JSX.Element[] {
         const nodes: JSX.Element[] = [];
         let lastEvent: MatrixEvent;
@@ -119,9 +139,11 @@ export default class MessageEditHistoryDialog extends React.PureComponent<IProps
         const baseEventId = this.props.mxEvent.getId();
         allEvents.forEach((e, i) => {
             if (!lastEvent || wantsDateSeparator(lastEvent.getDate() || undefined, e.getDate() || undefined)) {
+                const separatorRoomId = e.getRoomId()!;
+                const separatorTs = e.getTs();
                 nodes.push(
-                    <li key={e.getTs() + "~"}>
-                        <DateSeparator roomId={e.getRoomId()!} ts={e.getTs()} />
+                    <li key={`${separatorRoomId}-${separatorTs}~`}>
+                        <DateSeparatorView vm={this.getDateSeparatorVm(separatorRoomId, separatorTs)} />
                     </li>,
                 );
             }
diff --git a/apps/web/src/components/views/messages/DateSeparator.tsx b/apps/web/src/components/views/messages/DateSeparator.tsx
deleted file mode 100644
index 061cc76204..0000000000
--- a/apps/web/src/components/views/messages/DateSeparator.tsx
+++ /dev/null
@@ -1,344 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2015-2021 The Matrix.org Foundation C.I.C.
-Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
-
-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 JSX } from "react";
-import { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
-import { capitalize } from "lodash";
-import { ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { TimelineSeparator } from "@element-hq/web-shared-components";
-
-import { _t, getUserLanguage } from "../../../languageHandler";
-import { formatFullDateNoDay, formatFullDateNoTime, getDaysArray } from "../../../DateUtils";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import dispatcher from "../../../dispatcher/dispatcher";
-import { Action } from "../../../dispatcher/actions";
-import SettingsStore from "../../../settings/SettingsStore";
-import { UIFeature } from "../../../settings/UIFeature";
-import Modal from "../../../Modal";
-import ErrorDialog from "../dialogs/ErrorDialog";
-import BugReportDialog from "../dialogs/BugReportDialog";
-import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
-import { contextMenuBelow } from "../rooms/RoomTile";
-import { ContextMenuTooltipButton } from "../../structures/ContextMenu";
-import IconizedContextMenu, {
-    IconizedContextMenuOption,
-    IconizedContextMenuOptionList,
-} from "../context_menus/IconizedContextMenu";
-import JumpToDatePicker from "./JumpToDatePicker";
-import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import RoomContext from "../../../contexts/RoomContext";
-
-interface IProps {
-    roomId: string;
-    ts: number;
-    forExport?: boolean;
-}
-
-interface IState {
-    contextMenuPosition?: DOMRect;
-    jumpToDateEnabled: boolean;
-}
-
-/**
- * Timeline separator component to render within a MessagePanel bearing the date of the ts given
- *
- * Has additional jump to date functionality when labs flag is enabled
- */
-export default class DateSeparator extends React.Component<IProps, IState> {
-    public static contextType = RoomContext;
-    declare public context: React.ContextType<typeof RoomContext>;
-    private settingWatcherRef?: string;
-
-    public constructor(props: IProps) {
-        super(props);
-        this.state = {
-            jumpToDateEnabled: SettingsStore.getValue("feature_jump_to_date"),
-        };
-    }
-
-    public componentDidMount(): void {
-        // We're using a watcher so the date headers in the timeline are updated
-        // when the lab setting is toggled.
-        this.settingWatcherRef = SettingsStore.watchSetting(
-            "feature_jump_to_date",
-            null,
-            (settingName, roomId, level, newValAtLevel, newVal) => {
-                this.setState({ jumpToDateEnabled: newVal });
-            },
-        );
-    }
-
-    public componentWillUnmount(): void {
-        SettingsStore.unwatchSetting(this.settingWatcherRef);
-    }
-
-    private onContextMenuOpenClick = (e: ButtonEvent): void => {
-        e.preventDefault();
-        e.stopPropagation();
-        const target = e.target as HTMLButtonElement;
-        this.setState({ contextMenuPosition: target.getBoundingClientRect() });
-    };
-
-    private onContextMenuCloseClick = (): void => {
-        this.closeMenu();
-    };
-
-    private closeMenu = (): void => {
-        this.setState({
-            contextMenuPosition: undefined,
-        });
-    };
-
-    private get relativeTimeFormat(): Intl.RelativeTimeFormat {
-        return new Intl.RelativeTimeFormat(getUserLanguage(), { style: "long", numeric: "auto" });
-    }
-
-    private getLabel(): string {
-        try {
-            const date = new Date(this.props.ts);
-            const disableRelativeTimestamps = !SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates);
-
-            // During the time the archive is being viewed, a specific day might not make sense, so we return the full date
-            if (this.props.forExport || disableRelativeTimestamps) return formatFullDateNoTime(date);
-
-            const today = new Date();
-            const yesterday = new Date();
-            const days = getDaysArray("long");
-            yesterday.setDate(today.getDate() - 1);
-
-            if (date.toDateString() === today.toDateString()) {
-                return this.relativeTimeFormat.format(0, "day"); // Today
-            } else if (date.toDateString() === yesterday.toDateString()) {
-                return this.relativeTimeFormat.format(-1, "day"); // Yesterday
-            } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
-                return days[date.getDay()]; // Sunday-Saturday
-            } else {
-                return formatFullDateNoTime(date);
-            }
-        } catch {
-            return _t("common|message_timestamp_invalid");
-        }
-    }
-
-    private pickDate = async (inputTimestamp: number | string | Date): Promise<void> => {
-        const unixTimestamp = new Date(inputTimestamp).getTime();
-        const roomIdForJumpRequest = this.props.roomId;
-
-        try {
-            const cli = MatrixClientPeg.safeGet();
-            const { event_id: eventId, origin_server_ts: originServerTs } = await cli.timestampToEvent(
-                roomIdForJumpRequest,
-                unixTimestamp,
-                Direction.Forward,
-            );
-            logger.log(
-                `/timestamp_to_event: ` +
-                    `found ${eventId} (${originServerTs}) for timestamp=${unixTimestamp} (looking forward)`,
-            );
-
-            // Only try to navigate to the room if the user is still viewing the same
-            // room. We don't want to jump someone back to a room after a slow request
-            // if they've already navigated away to another room.
-            const currentRoomId = this.context.roomViewStore.getRoomId();
-            if (currentRoomId === roomIdForJumpRequest) {
-                dispatcher.dispatch<ViewRoomPayload>({
-                    action: Action.ViewRoom,
-                    event_id: eventId,
-                    highlighted: true,
-                    room_id: roomIdForJumpRequest,
-                    metricsTrigger: undefined, // room doesn't change
-                });
-            } else {
-                logger.debug(
-                    `No longer navigating to date in room (jump to date) because the user already switched ` +
-                        `to another room: currentRoomId=${currentRoomId}, roomIdForJumpRequest=${roomIdForJumpRequest}`,
-                );
-            }
-        } catch (err) {
-            logger.error(
-                `Error occured while trying to find event in ${roomIdForJumpRequest} ` +
-                    `at timestamp=${unixTimestamp}:`,
-                err,
-            );
-
-            // Only display an error if the user is still viewing the same room. We
-            // don't want to worry someone about an error in a room they no longer care
-            // about after a slow request if they've already navigated away to another
-            // room.
-            const currentRoomId = this.context.roomViewStore.getRoomId();
-            if (currentRoomId === roomIdForJumpRequest) {
-                let friendlyErrorMessage = "An error occured while trying to find and jump to the given date.";
-                let submitDebugLogsContent: JSX.Element = <></>;
-                if (err instanceof ConnectionError) {
-                    friendlyErrorMessage = _t("room|error_jump_to_date_connection");
-                } else if (err instanceof MatrixError) {
-                    if (err?.errcode === "M_NOT_FOUND") {
-                        friendlyErrorMessage = _t("room|error_jump_to_date_not_found", {
-                            dateString: formatFullDateNoDay(new Date(unixTimestamp)),
-                        });
-                    } else {
-                        friendlyErrorMessage = _t("room|error_jump_to_date", {
-                            statusCode: err?.httpStatus || _t("room|unknown_status_code_for_timeline_jump"),
-                            errorCode: err?.errcode || _t("common|unavailable"),
-                        });
-                    }
-                } else if (err instanceof HTTPError) {
-                    friendlyErrorMessage = err.message;
-                } else {
-                    // We only give the option to submit logs for actual errors, not network problems.
-                    submitDebugLogsContent = (
-                        <p>
-                            {_t(
-                                "room|error_jump_to_date_send_logs_prompt",
-                                {},
-                                {
-                                    debugLogsLink: (sub) => (
-                                        <AccessibleButton
-                                            // This is by default a `<div>` which we
-                                            // can't nest within a `<p>` here so update
-                                            // this to a be a inline anchor element.
-                                            element="a"
-                                            kind="link"
-                                            onClick={() => this.onBugReport(err instanceof Error ? err : undefined)}
-                                            data-testid="jump-to-date-error-submit-debug-logs-button"
-                                        >
-                                            {sub}
-                                        </AccessibleButton>
-                                    ),
-                                },
-                            )}
-                        </p>
-                    );
-                }
-
-                Modal.createDialog(ErrorDialog, {
-                    title: _t("room|error_jump_to_date_title"),
-                    description: (
-                        <div data-testid="jump-to-date-error-content">
-                            <p>{friendlyErrorMessage}</p>
-                            {submitDebugLogsContent}
-                            <details>
-                                <summary>{_t("room|error_jump_to_date_details")}</summary>
-                                <p>{String(err)}</p>
-                            </details>
-                        </div>
-                    ),
-                });
-            }
-        }
-    };
-
-    private onBugReport = (err?: Error): void => {
-        Modal.createDialog(BugReportDialog, {
-            error: err,
-            initialText: "Error occured while using jump to date #jump-to-date",
-        });
-    };
-
-    private onLastWeekClicked = (): void => {
-        const date = new Date();
-        date.setDate(date.getDate() - 7);
-        this.pickDate(date);
-        this.closeMenu();
-    };
-
-    private onLastMonthClicked = (): void => {
-        const date = new Date();
-        // Month numbers are 0 - 11 and `setMonth` handles the negative rollover
-        date.setMonth(date.getMonth() - 1, 1);
-        this.pickDate(date);
-        this.closeMenu();
-    };
-
-    private onTheBeginningClicked = (): void => {
-        const date = new Date(0);
-        this.pickDate(date);
-        this.closeMenu();
-    };
-
-    private onDatePicked = (dateString: string): void => {
-        this.pickDate(dateString);
-        this.closeMenu();
-    };
-
-    private renderJumpToDateMenu(): React.ReactElement {
-        let contextMenu: JSX.Element | undefined;
-        if (this.state.contextMenuPosition) {
-            const relativeTimeFormat = this.relativeTimeFormat;
-            contextMenu = (
-                <IconizedContextMenu
-                    {...contextMenuBelow(this.state.contextMenuPosition)}
-                    onFinished={this.onContextMenuCloseClick}
-                >
-                    <IconizedContextMenuOptionList first>
-                        <IconizedContextMenuOption
-                            label={capitalize(relativeTimeFormat.format(-1, "week"))}
-                            onClick={this.onLastWeekClicked}
-                            data-testid="jump-to-date-last-week"
-                        />
-                        <IconizedContextMenuOption
-                            label={capitalize(relativeTimeFormat.format(-1, "month"))}
-                            onClick={this.onLastMonthClicked}
-                            data-testid="jump-to-date-last-month"
-                        />
-                        <IconizedContextMenuOption
-                            label={_t("room|jump_to_date_beginning")}
-                            onClick={this.onTheBeginningClicked}
-                            data-testid="jump-to-date-beginning"
-                        />
-                    </IconizedContextMenuOptionList>
-
-                    <IconizedContextMenuOptionList>
-                        <JumpToDatePicker ts={this.props.ts} onDatePicked={this.onDatePicked} />
-                    </IconizedContextMenuOptionList>
-                </IconizedContextMenu>
-            );
-        }
-
-        return (
-            <ContextMenuTooltipButton
-                className="mx_DateSeparator_jumpToDateMenu mx_DateSeparator_dateContent"
-                data-testid="jump-to-date-separator-button"
-                onClick={this.onContextMenuOpenClick}
-                isExpanded={!!this.state.contextMenuPosition}
-                title={_t("room|jump_to_date")}
-            >
-                <h2 className="mx_DateSeparator_dateHeading" aria-hidden="true">
-                    {this.getLabel()}
-                </h2>
-                <ChevronDownIcon className="mx_DateSeparator_chevron" />
-                {contextMenu}
-            </ContextMenuTooltipButton>
-        );
-    }
-
-    public render(): React.ReactNode {
-        const label = this.getLabel();
-
-        let dateHeaderContent: JSX.Element;
-        if (this.state.jumpToDateEnabled && !this.props.forExport) {
-            dateHeaderContent = this.renderJumpToDateMenu();
-        } else {
-            dateHeaderContent = (
-                <div className="mx_DateSeparator_dateContent">
-                    <h2 className="mx_DateSeparator_dateHeading" aria-hidden="true">
-                        {label}
-                    </h2>
-                </div>
-            );
-        }
-
-        return (
-            <TimelineSeparator label={label} className="mx_TimelineSeparator">
-                {dateHeaderContent}
-            </TimelineSeparator>
-        );
-    }
-}
diff --git a/apps/web/src/components/views/messages/JumpToDatePicker.tsx b/apps/web/src/components/views/messages/JumpToDatePicker.tsx
deleted file mode 100644
index 23a35dd164..0000000000
--- a/apps/web/src/components/views/messages/JumpToDatePicker.tsx
+++ /dev/null
@@ -1,64 +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.
-*/
-
-import React, { useState, type FormEvent } from "react";
-
-import { _t } from "../../../languageHandler";
-import Field from "../elements/Field";
-import { RovingAccessibleButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
-import { formatDateForInput } from "../../../DateUtils";
-
-interface IProps {
-    ts: number;
-    onDatePicked: (dateString: string) => void;
-}
-
-const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {
-    const date = new Date(ts);
-    const dateInputDefaultValue = formatDateForInput(date);
-
-    const [dateValue, setDateValue] = useState(dateInputDefaultValue);
-    const [onFocus, isActive, refCallback] = useRovingTabIndex<HTMLInputElement>();
-
-    const onDateValueInput = (ev: React.InputEvent<HTMLInputElement>): void => setDateValue(ev.currentTarget.value);
-    const onJumpToDateSubmit = (ev: FormEvent): void => {
-        ev.preventDefault();
-        onDatePicked(dateValue);
-    };
-
-    return (
-        <form className="mx_JumpToDatePicker_form" onSubmit={onJumpToDateSubmit}>
-            <span className="mx_JumpToDatePicker_label">{_t("room|jump_to_date")}</span>
-            <Field
-                element="input"
-                type="date"
-                onInput={onDateValueInput}
-                value={dateValue}
-                // Prevent people from selecting a day in the future (there won't be any
-                // events there anyway).
-                max={formatDateForInput(new Date())}
-                className="mx_JumpToDatePicker_datePicker"
-                label={_t("room|jump_to_date_prompt")}
-                onFocus={onFocus}
-                inputRef={refCallback}
-                tabIndex={isActive ? 0 : -1}
-            />
-            <RovingAccessibleButton
-                element="button"
-                type="submit"
-                kind="primary"
-                className="mx_JumpToDatePicker_submitButton"
-                onClick={onJumpToDateSubmit}
-            >
-                {_t("action|go")}
-            </RovingAccessibleButton>
-        </form>
-    );
-};
-
-export default JumpToDatePicker;
diff --git a/apps/web/src/components/views/rooms/SearchResultTile.tsx b/apps/web/src/components/views/rooms/SearchResultTile.tsx
index e5a77df60e..1b45dbf024 100644
--- a/apps/web/src/components/views/rooms/SearchResultTile.tsx
+++ b/apps/web/src/components/views/rooms/SearchResultTile.tsx
@@ -7,13 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { DateSeparatorView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import SettingsStore from "../../../settings/SettingsStore";
 import { type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
-import DateSeparator from "../messages/DateSeparator";
 import EventTile from "./EventTile";
 import { shouldFormContinuation } from "../../structures/MessagePanel";
 import { wantsDateSeparator } from "../../../DateUtils";
@@ -21,6 +21,7 @@ import type LegacyCallEventGrouper from "../../structures/LegacyCallEventGrouper
 import { buildLegacyCallEventGroupers } from "../../structures/LegacyCallEventGrouper";
 import { haveRendererForEvent } from "../../../events/EventTileFactory";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { DateSeparatorViewModel } from "../../../viewmodels/timeline/DateSeparatorViewModel";
 
 interface IProps {
     // a list of strings to be highlighted in the results
@@ -34,6 +35,14 @@ interface IProps {
     permalinkCreator?: RoomPermalinkCreator;
 }
 
+/**
+ * Creates and auto-disposes the DateSeparatorViewModel for search result rendering.
+ */
+function DateSeparatorWrapper({ roomId, ts }: { roomId: string; ts: number }): JSX.Element {
+    const vm = useCreateAutoDisposedViewModel(() => new DateSeparatorViewModel({ roomId, ts }));
+    return <DateSeparatorView vm={vm} />;
+}
+
 export default class SearchResultTile extends React.Component<IProps> {
     public static contextType = RoomContext;
     declare public context: React.ContextType<typeof RoomContext>;
@@ -57,7 +66,10 @@ export default class SearchResultTile extends React.Component<IProps> {
         const eventId = resultEvent.getId();
 
         const ts1 = resultEvent.getTs();
-        const ret = [<DateSeparator key={ts1 + "-search"} roomId={resultEvent.getRoomId()!} ts={ts1} />];
+        const separatorRoomId = resultEvent.getRoomId()!;
+        const ret = [
+            <DateSeparatorWrapper key={`${separatorRoomId}-${ts1}-search`} roomId={separatorRoomId} ts={ts1} />,
+        ];
         const layout = SettingsStore.getValue("layout");
         const isTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
         const alwaysShowTimestamps = SettingsStore.getValue("alwaysShowTimestamps");
diff --git a/apps/web/src/i18n/strings/en_EN.json b/apps/web/src/i18n/strings/en_EN.json
index 6350993c56..9453131cfa 100644
--- a/apps/web/src/i18n/strings/en_EN.json
+++ b/apps/web/src/i18n/strings/en_EN.json
@@ -2064,9 +2064,6 @@
         "joining_space": "Joining space…",
         "jump_read_marker": "Jump to first unread message.",
         "jump_to_bottom_button": "Scroll to most recent messages",
-        "jump_to_date": "Jump to date",
-        "jump_to_date_beginning": "The beginning of the room",
-        "jump_to_date_prompt": "Pick a date to jump to",
         "kick_reason": "Reason: %(reason)s",
         "kicked_by": "You were removed by %(memberName)s",
         "kicked_from_room_by": "You were removed from %(roomName)s by %(memberName)s",
diff --git a/apps/web/src/utils/exportUtils/HtmlExport.tsx b/apps/web/src/utils/exportUtils/HtmlExport.tsx
index cb5c3629c8..4ae8e231d4 100644
--- a/apps/web/src/utils/exportUtils/HtmlExport.tsx
+++ b/apps/web/src/utils/exportUtils/HtmlExport.tsx
@@ -13,7 +13,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { logger } from "matrix-js-sdk/src/logger";
 import escapeHtml from "escape-html";
 import { TooltipProvider } from "@vector-im/compound-web";
-import { I18nContext } from "@element-hq/web-shared-components";
+import { DateSeparatorView, I18nContext } from "@element-hq/web-shared-components";
 
 import Exporter from "./Exporter";
 import { mediaFromMxc } from "../../customisations/Media";
@@ -24,7 +24,6 @@ import { RoomPermalinkCreator } from "../permalinks/Permalinks";
 import { _t } from "../../languageHandler";
 import * as Avatar from "../../Avatar";
 import EventTile from "../../components/views/rooms/EventTile";
-import DateSeparator from "../../components/views/messages/DateSeparator";
 import BaseAvatar from "../../components/views/avatars/BaseAvatar";
 import { type ExportType, type IExportOptions } from "./exportUtils";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
@@ -32,6 +31,7 @@ import getExportCSS from "./exportCSS";
 import { textForEvent } from "../../TextForEvent";
 import { haveRendererForEvent } from "../../events/EventTileFactory";
 import { SDKContext, SdkContextClass } from "../../contexts/SDKContext.ts";
+import { DateSeparatorViewModel } from "../../viewmodels/timeline/DateSeparatorViewModel";
 
 import exportJS from "!!raw-loader!./exportJS";
 
@@ -56,6 +56,12 @@ export default class HTMLExporter extends Exporter {
             : _t("export_chat|media_omitted_file_size");
     }
 
+    private renderToStaticMarkupWithProviders(element: JSX.Element): string {
+        return renderToStaticMarkup(
+            <I18nContext.Provider value={window.mxModuleApi.i18n}>{element}</I18nContext.Provider>,
+        );
+    }
+
     protected async getRoomAvatar(): Promise<string> {
         let blob: Blob | undefined = undefined;
         const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
@@ -73,7 +79,7 @@ export default class HTMLExporter extends Exporter {
         const avatar = (
             <BaseAvatar size="32px" name={this.room.name} title={this.room.name} url={blob ? avatarPath : ""} />
         );
-        return renderToStaticMarkup(avatar);
+        return this.renderToStaticMarkupWithProviders(avatar);
     }
 
     protected async wrapHTML(content: string, currentPage: number, nbPages: number): Promise<string> {
@@ -93,7 +99,7 @@ export default class HTMLExporter extends Exporter {
         const safeExporter = escapeHtml(exporter);
         const safeRoomName = escapeHtml(this.room.name);
         const safeTopic = escapeHtml(topic);
-        const safeExportedText = renderToStaticMarkup(
+        const safeExportedText = this.renderToStaticMarkupWithProviders(
             <p>
                 {_t(
                     "export_chat|export_info",
@@ -123,7 +129,7 @@ export default class HTMLExporter extends Exporter {
         );
 
         const safeTopicText = topic ? _t("export_chat|topic", { topic: safeTopic }) : "";
-        const previousMessagesLink = renderToStaticMarkup(
+        const previousMessagesLink = this.renderToStaticMarkupWithProviders(
             currentPage !== 0 ? (
                 <div style={{ textAlign: "center" }}>
                     <a href={`./messages${currentPage === 1 ? "" : currentPage}.html`} style={{ fontWeight: "bold" }}>
@@ -135,7 +141,7 @@ export default class HTMLExporter extends Exporter {
             ),
         );
 
-        const nextMessagesLink = renderToStaticMarkup(
+        const nextMessagesLink = this.renderToStaticMarkupWithProviders(
             currentPage < nbPages - 1 ? (
                 <div style={{ textAlign: "center", margin: "10px" }}>
                     <a href={"./messages" + (currentPage + 2) + ".html"} style={{ fontWeight: "bold" }}>
@@ -252,12 +258,21 @@ export default class HTMLExporter extends Exporter {
 
     protected getDateSeparator(event: MatrixEvent): string {
         const ts = event.getTs();
-        const dateSeparator = (
-            <li key={ts}>
-                <DateSeparator forExport={true} key={ts} roomId={event.getRoomId()!} ts={ts} />
-            </li>
-        );
-        return renderToStaticMarkup(dateSeparator);
+        const dateSeparatorViewModel = new DateSeparatorViewModel({
+            roomId: event.getRoomId()!,
+            ts,
+            forExport: true,
+        });
+        try {
+            const dateSeparator = (
+                <li key={ts}>
+                    <DateSeparatorView vm={dateSeparatorViewModel} />
+                </li>
+            );
+            return this.renderToStaticMarkupWithProviders(dateSeparator);
+        } finally {
+            dateSeparatorViewModel.dispose();
+        }
     }
 
     protected needsDateSeparator(event: MatrixEvent, prevEvent: MatrixEvent | null): boolean {
@@ -326,7 +341,7 @@ export default class HTMLExporter extends Exporter {
             eventTileMarkup = tempElement.innerHTML;
             tempRoot.unmount();
         } else {
-            eventTileMarkup = renderToStaticMarkup(EventTile);
+            eventTileMarkup = this.renderToStaticMarkupWithProviders(EventTile);
         }
 
         if (filePath) {
diff --git a/apps/web/src/viewmodels/timeline/DateSeparatorViewModel.tsx b/apps/web/src/viewmodels/timeline/DateSeparatorViewModel.tsx
new file mode 100644
index 0000000000..2221d795a1
--- /dev/null
+++ b/apps/web/src/viewmodels/timeline/DateSeparatorViewModel.tsx
@@ -0,0 +1,284 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+import {
+    formatDateForInput,
+    BaseViewModel,
+    type DateSeparatorViewSnapshot as DateSeparatorViewSnapshotInterface,
+    type DateSeparatorViewModel as DateSeparatorViewModelInterface,
+} from "@element-hq/web-shared-components";
+import React from "react";
+import { Direction, ConnectionError, HTTPError, MatrixError } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { formatFullDateNoDay, formatFullDateNoTime, getDaysArray } from "../../DateUtils";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import dispatcher from "../../dispatcher/dispatcher";
+import { Action } from "../../dispatcher/actions";
+import { type ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
+import { _t, getUserLanguage } from "../../languageHandler";
+import Modal from "../../Modal";
+import SettingsStore from "../../settings/SettingsStore";
+import { UIFeature } from "../../settings/UIFeature";
+import ErrorDialog from "../../components/views/dialogs/ErrorDialog";
+import BugReportDialog from "../../components/views/dialogs/BugReportDialog";
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
+import { SdkContextClass } from "../../contexts/SDKContext";
+
+export interface DateSeparatorViewModelProps {
+    /**
+     * Room ID used for jump-to-date navigation and room-switch guards.
+     */
+    roomId: string;
+    /**
+     * Timestamp used to compute the date separator label and initial picker value.
+     */
+    ts: number;
+    /**
+     * Export mode disables relative date labels and jump-to-date menu UI.
+     */
+    forExport?: boolean;
+}
+
+/**
+ * ViewModel for the date separator, providing the current state of the component.
+ */
+export class DateSeparatorViewModel
+    extends BaseViewModel<DateSeparatorViewSnapshotInterface, DateSeparatorViewModelProps>
+    implements DateSeparatorViewModelInterface
+{
+    /**
+     * Cached setting for UIFeature.TimelineEnableRelativeDates.
+     * Updated via SettingsStore watcher to keep labels in sync at runtime.
+     */
+    private relativeDatesEnabled: boolean;
+    /**
+     * Cached setting for feature_jump_to_date.
+     * Controls whether the jump-to-date menu is exposed in the snapshot.
+     */
+    private jumpToDateEnabled: boolean;
+
+    public constructor(props: DateSeparatorViewModelProps) {
+        const relativeDatesEnabled = SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates);
+        const jumpToDateEnabled = SettingsStore.getValue("feature_jump_to_date");
+
+        super(props, {
+            label: DateSeparatorViewModel.computeLabel(props, relativeDatesEnabled),
+            className: "mx_TimelineSeparator",
+        });
+
+        this.relativeDatesEnabled = relativeDatesEnabled;
+        this.jumpToDateEnabled = jumpToDateEnabled;
+        this.updateSnapshot();
+
+        // Keep label behaviour in sync with runtime setting updates.
+        const jumpToDateWatcherRef = SettingsStore.watchSetting(
+            "feature_jump_to_date",
+            null,
+            (_settingName, _roomId, _level, _newValAtLevel, newVal) => {
+                this.jumpToDateEnabled = newVal;
+                this.updateSnapshot();
+            },
+        );
+        this.disposables.track(() => SettingsStore.unwatchSetting(jumpToDateWatcherRef));
+
+        const relativeDatesWatcherRef = SettingsStore.watchSetting(
+            UIFeature.TimelineEnableRelativeDates,
+            null,
+            (_settingName, _roomId, _level, _newValAtLevel, newVal) => {
+                this.relativeDatesEnabled = newVal;
+                this.updateSnapshot();
+            },
+        );
+        this.disposables.track(() => SettingsStore.unwatchSetting(relativeDatesWatcherRef));
+    }
+
+    private computeSnapshot(): DateSeparatorViewSnapshotInterface {
+        const label = DateSeparatorViewModel.computeLabel(this.props, this.relativeDatesEnabled);
+        return {
+            label,
+            className: "mx_TimelineSeparator",
+            jumpToEnabled: this.jumpToDateEnabled && !this.props.forExport,
+            jumpFromDate: formatDateForInput(new Date(this.props.ts)),
+        };
+    }
+
+    private updateSnapshot(): void {
+        this.snapshot.set(this.computeSnapshot());
+    }
+
+    private static get relativeTimeFormat(): Intl.RelativeTimeFormat {
+        return new Intl.RelativeTimeFormat(getUserLanguage(), { style: "long", numeric: "auto" });
+    }
+
+    private static computeLabel(props: DateSeparatorViewModelProps, relativeDatesEnabled: boolean): string {
+        try {
+            const date = new Date(props.ts);
+
+            // During export, relative dates are ambiguous and should not be used.
+            if (props.forExport || !relativeDatesEnabled) return formatFullDateNoTime(date);
+
+            const today = new Date();
+            const yesterday = new Date();
+            const days = getDaysArray("long");
+            yesterday.setDate(today.getDate() - 1);
+
+            if (date.toDateString() === today.toDateString()) {
+                return this.relativeTimeFormat.format(0, "day");
+            } else if (date.toDateString() === yesterday.toDateString()) {
+                return this.relativeTimeFormat.format(-1, "day");
+            } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
+                return days[date.getDay()];
+            } else {
+                return formatFullDateNoTime(date);
+            }
+        } catch {
+            return _t("common|message_timestamp_invalid");
+        }
+    }
+
+    public pickDate = async (inputTimestamp: number | string | Date): Promise<void> => {
+        const unixTimestamp = new Date(inputTimestamp).getTime();
+        const roomIdForJumpRequest = this.props.roomId;
+
+        try {
+            const cli = MatrixClientPeg.safeGet();
+            const { event_id: eventId, origin_server_ts: originServerTs } = await cli.timestampToEvent(
+                roomIdForJumpRequest,
+                unixTimestamp,
+                Direction.Forward,
+            );
+            logger.log(
+                `/timestamp_to_event: ` +
+                    `found ${eventId} (${originServerTs}) for timestamp=${unixTimestamp} (looking forward)`,
+            );
+
+            // Only try to navigate to the room if the user is still viewing the same
+            // room. We don't want to jump someone back to a room after a slow request
+            // if they've already navigated away to another room.
+            const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
+            if (currentRoomId === roomIdForJumpRequest) {
+                dispatcher.dispatch<ViewRoomPayload>({
+                    action: Action.ViewRoom,
+                    event_id: eventId,
+                    highlighted: true,
+                    room_id: roomIdForJumpRequest,
+                    metricsTrigger: undefined, // room doesn't change
+                });
+            } else {
+                logger.debug(
+                    `No longer navigating to date in room (jump to date) because the user already switched ` +
+                        `to another room: currentRoomId=${currentRoomId}, roomIdForJumpRequest=${roomIdForJumpRequest}`,
+                );
+            }
+        } catch (err) {
+            logger.error(
+                `Error occured while trying to find event in ${roomIdForJumpRequest} ` +
+                    `at timestamp=${unixTimestamp}:`,
+                err,
+            );
+
+            // Only display an error if the user is still viewing the same room. We
+            // don't want to worry someone about an error in a room they no longer care
+            // about after a slow request if they've already navigated away to another
+            // room.
+            const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
+            if (currentRoomId === roomIdForJumpRequest) {
+                let friendlyErrorMessage = "An error occured while trying to find and jump to the given date.";
+                let submitDebugLogsContent: React.ReactElement = <></>;
+
+                if (err instanceof ConnectionError) {
+                    friendlyErrorMessage = _t("room|error_jump_to_date_connection");
+                } else if (err instanceof MatrixError) {
+                    if (err?.errcode === "M_NOT_FOUND") {
+                        friendlyErrorMessage = _t("room|error_jump_to_date_not_found", {
+                            dateString: formatFullDateNoDay(new Date(unixTimestamp)),
+                        });
+                    } else {
+                        friendlyErrorMessage = _t("room|error_jump_to_date", {
+                            statusCode: err?.httpStatus || _t("room|unknown_status_code_for_timeline_jump"),
+                            errorCode: err?.errcode || _t("common|unavailable"),
+                        });
+                    }
+                } else if (err instanceof HTTPError) {
+                    friendlyErrorMessage = err.message;
+                } else {
+                    // We only give the option to submit logs for actual errors, not network problems.
+                    submitDebugLogsContent = (
+                        <p>
+                            {_t(
+                                "room|error_jump_to_date_send_logs_prompt",
+                                {},
+                                {
+                                    debugLogsLink: (sub) => (
+                                        // This is by default a `<div>` which we
+                                        // can't nest within a `<p>` here so update
+                                        // this to a be a inline anchor element.
+                                        <AccessibleButton
+                                            element="a"
+                                            kind="link"
+                                            onClick={() => this.onBugReport(err instanceof Error ? err : undefined)}
+                                            data-testid="jump-to-date-error-submit-debug-logs-button"
+                                        >
+                                            {sub}
+                                        </AccessibleButton>
+                                    ),
+                                },
+                            )}
+                        </p>
+                    );
+                }
+
+                Modal.createDialog(ErrorDialog, {
+                    title: _t("room|error_jump_to_date_title"),
+                    description: (
+                        <div data-testid="jump-to-date-error-content">
+                            <p>{friendlyErrorMessage}</p>
+                            {submitDebugLogsContent}
+                            <details>
+                                <summary>{_t("room|error_jump_to_date_details")}</summary>
+                                <p>{String(err)}</p>
+                            </details>
+                        </div>
+                    ),
+                });
+            }
+        }
+    };
+
+    public onBugReport = (err?: Error): void => {
+        Modal.createDialog(BugReportDialog, {
+            error: err,
+            initialText: "Error occured while using jump to date #jump-to-date",
+        });
+    };
+
+    public onLastWeekPicked = (): Promise<void> => {
+        const date = new Date();
+        date.setDate(date.getDate() - 7);
+        void this.pickDate(date);
+        return Promise.resolve();
+    };
+
+    public onLastMonthPicked = (): Promise<void> => {
+        const date = new Date();
+        // Month numbers are 0-11 and setMonth handles rollover.
+        date.setMonth(date.getMonth() - 1, 1);
+        void this.pickDate(date);
+        return Promise.resolve();
+    };
+
+    public onBeginningPicked = (): Promise<void> => {
+        void this.pickDate(new Date(0));
+        return Promise.resolve();
+    };
+
+    public onDatePicked = (dateString: string): Promise<void> => {
+        void this.pickDate(dateString);
+        return Promise.resolve();
+    };
+}
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
index f31612ae13..af12993f99 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
@@ -47,11 +47,11 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
               role="none"
             />
             <div
-              class="mx_DateSeparator_dateContent"
+              class="_flex_4dswl_9 _content_5dcky_8"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
             >
               <h2
                 aria-hidden="true"
-                class="mx_DateSeparator_dateHeading"
               >
                 Thu, Jan 1, 1970
               </h2>
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
index f41937f2e0..048caf3d52 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
@@ -49,11 +49,11 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
                   role="none"
                 />
                 <div
-                  class="mx_DateSeparator_dateContent"
+                  class="_flex_4dswl_9 _content_5dcky_8"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
                 >
                   <h2
                     aria-hidden="true"
-                    class="mx_DateSeparator_dateHeading"
                   >
                     Thu, Jan 1, 1970
                   </h2>
@@ -180,11 +180,11 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   role="none"
                 />
                 <div
-                  class="mx_DateSeparator_dateContent"
+                  class="_flex_4dswl_9 _content_5dcky_8"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
                 >
                   <h2
                     aria-hidden="true"
-                    class="mx_DateSeparator_dateHeading"
                   >
                     Thu, Jan 1, 1970
                   </h2>
diff --git a/apps/web/test/unit-tests/components/views/messages/DateSeparator-test.tsx b/apps/web/test/unit-tests/components/views/messages/DateSeparator-test.tsx
deleted file mode 100644
index f51b62933c..0000000000
--- a/apps/web/test/unit-tests/components/views/messages/DateSeparator-test.tsx
+++ /dev/null
@@ -1,322 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 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.
-*/
-
-import React from "react";
-import { mocked } from "jest-mock";
-import { fireEvent, render, screen, waitFor } from "jest-matrix-react";
-import { type TimestampToEventResponse, ConnectionError, HTTPError, MatrixError } from "matrix-js-sdk/src/matrix";
-
-import dispatcher from "../../../../../src/dispatcher/dispatcher";
-import { Action } from "../../../../../src/dispatcher/actions";
-import { type ViewRoomPayload } from "../../../../../src/dispatcher/payloads/ViewRoomPayload";
-import { formatFullDateNoTime } from "../../../../../src/DateUtils";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
-import { UIFeature } from "../../../../../src/settings/UIFeature";
-import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import {
-    clearAllModals,
-    flushPromisesWithFakeTimers,
-    getMockClientWithEventEmitter,
-    waitEnoughCyclesForModal,
-} from "../../../../test-utils";
-import DateSeparator from "../../../../../src/components/views/messages/DateSeparator";
-import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext";
-import RoomContext, { type RoomContextType } from "../../../../../src/contexts/RoomContext";
-
-jest.mock("../../../../../src/settings/SettingsStore");
-
-describe("DateSeparator", () => {
-    const HOUR_MS = 3600000;
-    const DAY_MS = HOUR_MS * 24;
-    // Friday Dec 17 2021, 9:09am
-    const nowDate = new Date("2021-12-17T08:09:00.000Z");
-    const roomId = "!unused:example.org";
-    const defaultProps = {
-        ts: nowDate.getTime(),
-        roomId,
-    };
-
-    const mockRoomViewStore = {
-        getRoomId: jest.fn().mockReturnValue(roomId),
-    };
-
-    const defaultRoomContext = {
-        ...RoomContext,
-        roomId,
-        roomViewStore: mockRoomViewStore,
-    } as unknown as RoomContextType;
-
-    const mockClient = getMockClientWithEventEmitter({
-        timestampToEvent: jest.fn(),
-    });
-    const getComponent = (props = {}) =>
-        render(
-            <MatrixClientContext.Provider value={mockClient}>
-                <ScopedRoomContextProvider {...defaultRoomContext}>
-                    <DateSeparator {...defaultProps} {...props} />
-                </ScopedRoomContextProvider>
-            </MatrixClientContext.Provider>,
-        );
-
-    type TestCase = [string, number, string];
-    const testCases: TestCase[] = [
-        ["the exact same moment", nowDate.getTime(), "today"],
-        ["same day as current day", nowDate.getTime() - HOUR_MS, "today"],
-        ["day before the current day", nowDate.getTime() - HOUR_MS * 12, "yesterday"],
-        ["2 days ago", nowDate.getTime() - DAY_MS * 2, "Wednesday"],
-        ["144 hours ago", nowDate.getTime() - HOUR_MS * 144, "Sat, Dec 11, 2021"],
-        [
-            "6 days ago, but less than 144h",
-            new Date("Saturday Dec 11 2021 23:59:00 GMT+0100 (Central European Standard Time)").getTime(),
-            "Saturday",
-        ],
-    ];
-
-    beforeEach(() => {
-        // Set a consistent fake time here so the test is always consistent
-        jest.useFakeTimers();
-        jest.setSystemTime(nowDate.getTime());
-
-        (SettingsStore.getValue as jest.Mock) = jest.fn((arg) => {
-            if (arg === UIFeature.TimelineEnableRelativeDates) {
-                return true;
-            }
-        });
-        mockRoomViewStore.getRoomId.mockReturnValue(roomId);
-    });
-
-    afterAll(() => {
-        jest.useRealTimers();
-    });
-
-    it("renders the date separator correctly", () => {
-        const { asFragment } = getComponent();
-        expect(asFragment()).toMatchSnapshot();
-        expect(SettingsStore.getValue).toHaveBeenCalledWith(UIFeature.TimelineEnableRelativeDates);
-    });
-
-    it.each(testCases)("formats date correctly when current time is %s", (_d, ts, result) => {
-        expect(getComponent({ ts, forExport: false }).container.textContent).toEqual(result);
-    });
-
-    it("renders invalid date separator correctly", () => {
-        const ts = new Date(-8640000000000004).getTime();
-        const { asFragment } = getComponent({ ts });
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    describe("when forExport is true", () => {
-        it.each(testCases)("formats date in full when current time is %s", (_d, ts) => {
-            expect(getComponent({ ts, forExport: true }).container.textContent).toEqual(
-                formatFullDateNoTime(new Date(ts)),
-            );
-        });
-    });
-
-    describe("when Settings.TimelineEnableRelativeDates is falsy", () => {
-        beforeEach(() => {
-            (SettingsStore.getValue as jest.Mock) = jest.fn((arg) => {
-                if (arg === UIFeature.TimelineEnableRelativeDates) {
-                    return false;
-                }
-            });
-        });
-        it.each(testCases)("formats date in full when current time is %s", (_d, ts) => {
-            expect(getComponent({ ts, forExport: false }).container.textContent).toEqual(
-                formatFullDateNoTime(new Date(ts)),
-            );
-        });
-    });
-
-    describe("when feature_jump_to_date is enabled", () => {
-        beforeEach(() => {
-            jest.clearAllMocks();
-            mocked(SettingsStore).getValue.mockImplementation((arg): any => {
-                if (arg === "feature_jump_to_date") {
-                    return true;
-                }
-            });
-            jest.spyOn(dispatcher, "dispatch").mockImplementation(() => {});
-        });
-
-        afterEach(async () => {
-            await clearAllModals();
-        });
-
-        it("renders the date separator correctly", () => {
-            const { asFragment } = getComponent();
-            expect(asFragment()).toMatchSnapshot();
-        });
-
-        [
-            {
-                timeDescriptor: "last week",
-                jumpButtonTestId: "jump-to-date-last-week",
-            },
-            {
-                timeDescriptor: "last month",
-                jumpButtonTestId: "jump-to-date-last-month",
-            },
-            {
-                timeDescriptor: "the beginning",
-                jumpButtonTestId: "jump-to-date-beginning",
-            },
-        ].forEach((testCase) => {
-            it(`can jump to ${testCase.timeDescriptor}`, async () => {
-                // Render the component
-                getComponent();
-
-                // Open the jump to date context menu
-                fireEvent.click(screen.getByTestId("jump-to-date-separator-button"));
-
-                // Jump to "x"
-                const returnedDate = new Date();
-                // Just an arbitrary date before "now"
-                returnedDate.setDate(nowDate.getDate() - 100);
-                const returnedEventId = "$abc";
-                mockClient.timestampToEvent.mockResolvedValue({
-                    event_id: returnedEventId,
-                    origin_server_ts: returnedDate.getTime(),
-                } satisfies TimestampToEventResponse);
-                const jumpToXButton = await screen.findByTestId(testCase.jumpButtonTestId);
-                fireEvent.click(jumpToXButton);
-
-                // Flush out the dispatcher which uses `window.setTimeout(...)` since we're
-                // using `jest.useFakeTimers()` in these tests.
-                await flushPromisesWithFakeTimers();
-
-                // Ensure that we're jumping to the event at the given date
-                expect(dispatcher.dispatch).toHaveBeenCalledWith({
-                    action: Action.ViewRoom,
-                    event_id: returnedEventId,
-                    highlighted: true,
-                    room_id: roomId,
-                    metricsTrigger: undefined,
-                } satisfies ViewRoomPayload);
-            });
-        });
-
-        it("should not jump to date if we already switched to another room", async () => {
-            // Render the component
-            getComponent();
-
-            // Open the jump to date context menu
-            fireEvent.click(screen.getByTestId("jump-to-date-separator-button"));
-
-            // Mimic the outcome of switching rooms while waiting for the jump to date
-            // request to finish. Imagine that we started jumping to "last week", the
-            // network request is taking a while, so we got bored, switched rooms; we
-            // shouldn't jump back to the previous room after the network request
-            // happens to finish later.
-            mockRoomViewStore.getRoomId.mockReturnValue("!some-other-room");
-
-            // Jump to "last week"
-            mockClient.timestampToEvent.mockResolvedValue({
-                event_id: "$abc",
-                origin_server_ts: 0,
-            });
-            const jumpToLastWeekButton = await screen.findByTestId("jump-to-date-last-week");
-            fireEvent.click(jumpToLastWeekButton);
-
-            // Flush out the dispatcher which uses `window.setTimeout(...)` since we're
-            // using `jest.useFakeTimers()` in these tests.
-            await flushPromisesWithFakeTimers();
-
-            // We should not see any room switching going on (`Action.ViewRoom`)
-            expect(dispatcher.dispatch).not.toHaveBeenCalled();
-        });
-
-        it("should not show jump to date error if we already switched to another room", async () => {
-            // Render the component
-            getComponent();
-
-            // Open the jump to date context menu
-            fireEvent.click(screen.getByTestId("jump-to-date-separator-button"));
-
-            // Mimic the outcome of switching rooms while waiting for the jump to date
-            // request to finish. Imagine that we started jumping to "last week", the
-            // network request is taking a while, so we got bored, switched rooms; we
-            // shouldn't jump back to the previous room after the network request
-            // happens to finish later.
-            mockRoomViewStore.getRoomId.mockReturnValue("!some-other-room");
-
-            // Try to jump to "last week" but we want an error to occur and ensure that
-            // we don't show an error dialog for it since we already switched away to
-            // another room and don't care about the outcome here anymore.
-            mockClient.timestampToEvent.mockRejectedValue(new Error("Fake error in test"));
-            const jumpToLastWeekButton = await screen.findByTestId("jump-to-date-last-week");
-            fireEvent.click(jumpToLastWeekButton);
-
-            // Wait the necessary time in order to see if any modal will appear
-            await waitEnoughCyclesForModal({
-                useFakeTimers: true,
-            });
-
-            // We should not see any error modal dialog
-            //
-            // We have to use `queryBy` so that it can return `null` for something that does not exist.
-            expect(screen.queryByTestId("jump-to-date-error-content")).not.toBeInTheDocument();
-        });
-
-        it("should show error dialog with submit debug logs option when non-networking error occurs", async () => {
-            // Render the component
-            getComponent();
-
-            // Open the jump to date context menu
-            fireEvent.click(screen.getByTestId("jump-to-date-separator-button"));
-
-            // Try to jump to "last week" but we want a non-network error to occur so it
-            // shows the "Submit debug logs" UI
-            mockClient.timestampToEvent.mockRejectedValue(new Error("Fake error in test"));
-            const jumpToLastWeekButton = await screen.findByTestId("jump-to-date-last-week");
-            fireEvent.click(jumpToLastWeekButton);
-
-            // Expect error to be shown. We have to wait for the UI to transition.
-            await expect(screen.findByTestId("jump-to-date-error-content")).resolves.toBeInTheDocument();
-
-            // Expect an option to submit debug logs to be shown when a non-network error occurs
-            await expect(
-                screen.findByTestId("jump-to-date-error-submit-debug-logs-button"),
-            ).resolves.toBeInTheDocument();
-        });
-
-        [
-            new ConnectionError("Fake connection error in test"),
-            new HTTPError("Fake http error in test", 418),
-            new MatrixError(
-                { errcode: "M_FAKE_ERROR_CODE", error: "Some fake error occured" },
-                518,
-                "https://fake-url/",
-            ),
-        ].forEach((fakeError) => {
-            it(`should show error dialog without submit debug logs option when networking error (${fakeError.name}) occurs`, async () => {
-                // Try to jump to "last week" but we want a network error to occur
-                mockClient.timestampToEvent.mockRejectedValue(fakeError);
-
-                // Render the component
-                getComponent();
-
-                // Open the jump to date context menu
-                fireEvent.click(screen.getByTestId("jump-to-date-separator-button"));
-
-                const jumpToLastWeekButton = await screen.findByTestId("jump-to-date-last-week");
-                fireEvent.click(jumpToLastWeekButton);
-
-                // Expect error to be shown. We have to wait for the UI to transition.
-                await expect(screen.findByTestId("jump-to-date-error-content")).resolves.toBeInTheDocument();
-
-                // The submit debug logs option should *NOT* be shown for network errors.
-                //
-                // We have to use `queryBy` so that it can return `null` for something that does not exist.
-                await waitFor(() =>
-                    expect(screen.queryByTestId("jump-to-date-error-submit-debug-logs-button")).not.toBeInTheDocument(),
-                );
-            });
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/messages/JumpToDatePicker-test.tsx b/apps/web/test/unit-tests/components/views/messages/JumpToDatePicker-test.tsx
deleted file mode 100644
index 1b5c4dbd21..0000000000
--- a/apps/web/test/unit-tests/components/views/messages/JumpToDatePicker-test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 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.
-*/
-
-import React from "react";
-import { render } from "jest-matrix-react";
-
-import JumpToDatePicker from "../../../../../src/components/views/messages/JumpToDatePicker";
-
-describe("JumpToDatePicker", () => {
-    const nowDate = new Date("2021-12-17T08:09:00.000Z");
-    beforeEach(() => {
-        // Set a stable fake time here so the test is always consistent
-        jest.useFakeTimers();
-        jest.setSystemTime(nowDate.getTime());
-    });
-
-    afterAll(() => {
-        jest.useRealTimers();
-    });
-
-    it("renders the date picker correctly", () => {
-        const { asFragment } = render(
-            <JumpToDatePicker ts={new Date("2020-07-04T05:55:00.000Z").getTime()} onDatePicked={() => {}} />,
-        );
-
-        expect(asFragment()).toMatchSnapshot();
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap
deleted file mode 100644
index 055ce6b337..0000000000
--- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap
+++ /dev/null
@@ -1,103 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`DateSeparator renders invalid date separator correctly 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="Invalid timestamp"
-    class="_flex_4dswl_9 mx_TimelineSeparator _timelineSeparator_yq5ye_8"
-    role="separator"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-  >
-    <hr
-      role="none"
-    />
-    <div
-      class="mx_DateSeparator_dateContent"
-    >
-      <h2
-        aria-hidden="true"
-        class="mx_DateSeparator_dateHeading"
-      >
-        Invalid timestamp
-      </h2>
-    </div>
-    <hr
-      role="none"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateSeparator renders the date separator correctly 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="today"
-    class="_flex_4dswl_9 mx_TimelineSeparator _timelineSeparator_yq5ye_8"
-    role="separator"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-  >
-    <hr
-      role="none"
-    />
-    <div
-      class="mx_DateSeparator_dateContent"
-    >
-      <h2
-        aria-hidden="true"
-        class="mx_DateSeparator_dateHeading"
-      >
-        today
-      </h2>
-    </div>
-    <hr
-      role="none"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateSeparator when feature_jump_to_date is enabled renders the date separator correctly 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="Fri, Dec 17, 2021"
-    class="_flex_4dswl_9 mx_TimelineSeparator _timelineSeparator_yq5ye_8"
-    role="separator"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-  >
-    <hr
-      role="none"
-    />
-    <div
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Jump to date"
-      class="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu mx_DateSeparator_dateContent"
-      data-testid="jump-to-date-separator-button"
-      role="button"
-      tabindex="0"
-    >
-      <h2
-        aria-hidden="true"
-        class="mx_DateSeparator_dateHeading"
-      >
-        Fri, Dec 17, 2021
-      </h2>
-      <svg
-        class="mx_DateSeparator_chevron"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-        />
-      </svg>
-    </div>
-    <hr
-      role="none"
-    />
-  </div>
-</DocumentFragment>
-`;
diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/JumpToDatePicker-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/JumpToDatePicker-test.tsx.snap
deleted file mode 100644
index 3e79a98240..0000000000
--- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/JumpToDatePicker-test.tsx.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`JumpToDatePicker renders the date picker correctly 1`] = `
-<DocumentFragment>
-  <form
-    class="mx_JumpToDatePicker_form"
-  >
-    <span
-      class="mx_JumpToDatePicker_label"
-    >
-      Jump to date
-    </span>
-    <div
-      class="mx_Field mx_Field_input mx_JumpToDatePicker_datePicker"
-    >
-      <input
-        id="mx_Field_1"
-        label="Pick a date to jump to"
-        max="2021-12-17"
-        placeholder="Pick a date to jump to"
-        tabindex="-1"
-        type="date"
-        value="2020-07-04"
-      />
-      <label
-        for="mx_Field_1"
-      >
-        Pick a date to jump to
-      </label>
-    </div>
-    <button
-      class="mx_AccessibleButton mx_JumpToDatePicker_submitButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
-      role="button"
-      tabindex="-1"
-      type="submit"
-    >
-      Go
-    </button>
-  </form>
-</DocumentFragment>
-`;
diff --git a/apps/web/test/unit-tests/utils/DateUtils-test.ts b/apps/web/test/unit-tests/utils/DateUtils-test.ts
index edf7fee481..e61f79fde7 100644
--- a/apps/web/test/unit-tests/utils/DateUtils-test.ts
+++ b/apps/web/test/unit-tests/utils/DateUtils-test.ts
@@ -11,7 +11,6 @@ import {
     formatRelativeTime,
     formatDuration,
     formatFullDateNoDayISO,
-    formatDateForInput,
     formatTimeLeft,
     formatPreciseDuration,
     formatLocalDateShort,
@@ -351,15 +350,6 @@ describe("formatFullDateNoDayNoTime", () => {
     });
 });
 
-describe("formatDateForInput", () => {
-    it.each([["1993-11-01"], ["1066-10-14"], ["0571-04-22"], ["0062-02-05"]])(
-        "should format %s",
-        (dateString: string) => {
-            expect(formatDateForInput(new Date(dateString))).toBe(dateString);
-        },
-    );
-});
-
 describe("formatTimeLeft", () => {
     it.each([
         [0, "0s left"],
diff --git a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
index 84379afbcc..19d065b3a5 100644
--- a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
+++ b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
@@ -57,7 +57,7 @@ exports[`HTMLExport should export 1`] = `
                                             <br/>
                                             <p>  </p>
                                         </div>
-                                    <li><div role="separator" aria-label="Thu, Jan 1, 1970" class="_flex_4dswl_9 mx_TimelineSeparator _timelineSeparator_yq5ye_8" style="--mx-flex-display:flex;--mx-flex-direction:row;--mx-flex-align:center;--mx-flex-justify:start;--mx-flex-gap:0;--mx-flex-wrap:nowrap"><hr role="none"/><div class="mx_DateSeparator_dateContent"><h2 class="mx_DateSeparator_dateHeading" aria-hidden="true">Thu, Jan 1, 1970</h2></div><hr role="none"/></div></li><div class="mx_Export_EventWrapper" id="49"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="49" data-layout="group" data-self="false" data-event-id="49" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user49:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user49:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="1" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/49" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #49</div></div></div></li></div><div class="mx_Export_EventWrapper" id="48"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="48" data-layout="group" data-self="false" data-event-id="48" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user48:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user48:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="2" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/48" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #48</div></div></div></li></div><div class="mx_Export_EventWrapper" id="47"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="47" data-layout="group" data-self="false" data-event-id="47" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user47:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user47:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="3" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/47" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #47</div></div></div></li></div><div class="mx_Export_EventWrapper" id="46"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="46" data-layout="group" data-self="false" data-event-id="46" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user46:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user46:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="4" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/46" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #46</div></div></div></li></div><div class="mx_Export_EventWrapper" id="45"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="45" data-layout="group" data-self="false" data-event-id="45" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user45:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user45:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="5" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/45" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #45</div></div></div></li></div><div class="mx_Export_EventWrapper" id="44"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="44" data-layout="group" data-self="false" data-event-id="44" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user44:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user44:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="6" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/44" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #44</div></div></div></li></div><div class="mx_Export_EventWrapper" id="43"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="43" data-layout="group" data-self="false" data-event-id="43" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user43:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user43:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="7" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/43" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #43</div></div></div></li></div><div class="mx_Export_EventWrapper" id="42"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="42" data-layout="group" data-self="false" data-event-id="42" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user42:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user42:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="8" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/42" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #42</div></div></div></li></div><div class="mx_Export_EventWrapper" id="41"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="41" data-layout="group" data-self="false" data-event-id="41" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user41:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user41:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="9" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/41" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #41</div></div></div></li></div><div class="mx_Export_EventWrapper" id="40"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="40" data-layout="group" data-self="false" data-event-id="40" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user40:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user40:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="10" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/40" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #40</div></div></div></li></div><div class="mx_Export_EventWrapper" id="39"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="39" data-layout="group" data-self="false" data-event-id="39" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user39:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user39:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="11" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/39" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #39</div></div></div></li></div><div class="mx_Export_EventWrapper" id="38"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="38" data-layout="group" data-self="false" data-event-id="38" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user38:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user38:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="12" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/38" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #38</div></div></div></li></div><div class="mx_Export_EventWrapper" id="37"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="37" data-layout="group" data-self="false" data-event-id="37" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user37:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user37:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="13" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/37" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #37</div></div></div></li></div><div class="mx_Export_EventWrapper" id="36"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="36" data-layout="group" data-self="false" data-event-id="36" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user36:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user36:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="14" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/36" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #36</div></div></div></li></div><div class="mx_Export_EventWrapper" id="35"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="35" data-layout="group" data-self="false" data-event-id="35" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user35:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user35:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="15" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/35" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #35</div></div></div></li></div><div class="mx_Export_EventWrapper" id="34"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="34" data-layout="group" data-self="false" data-event-id="34" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user34:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user34:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="16" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/34" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #34</div></div></div></li></div><div class="mx_Export_EventWrapper" id="33"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="33" data-layout="group" data-self="false" data-event-id="33" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user33:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user33:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="17" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/33" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #33</div></div></div></li></div><div class="mx_Export_EventWrapper" id="32"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="32" data-layout="group" data-self="false" data-event-id="32" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user32:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user32:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="18" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/32" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #32</div></div></div></li></div><div class="mx_Export_EventWrapper" id="31"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="31" data-layout="group" data-self="false" data-event-id="31" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user31:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user31:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="19" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/31" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #31</div></div></div></li></div><div class="mx_Export_EventWrapper" id="30"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="30" data-layout="group" data-self="false" data-event-id="30" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user30:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user30:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="20" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/30" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #30</div></div></div></li></div><div class="mx_Export_EventWrapper" id="29"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="29" data-layout="group" data-self="false" data-event-id="29" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user29:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user29:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="21" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/29" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #29</div></div></div></li></div><div class="mx_Export_EventWrapper" id="28"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="28" data-layout="group" data-self="false" data-event-id="28" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user28:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user28:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="22" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/28" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #28</div></div></div></li></div><div class="mx_Export_EventWrapper" id="27"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="27" data-layout="group" data-self="false" data-event-id="27" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user27:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user27:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="23" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/27" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #27</div></div></div></li></div><div class="mx_Export_EventWrapper" id="26"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="26" data-layout="group" data-self="false" data-event-id="26" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user26:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user26:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="24" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/26" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #26</div></div></div></li></div><div class="mx_Export_EventWrapper" id="25"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="25" data-layout="group" data-self="false" data-event-id="25" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user25:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user25:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="25" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/25" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #25</div></div></div></li></div><div class="mx_Export_EventWrapper" id="24"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="24" data-layout="group" data-self="false" data-event-id="24" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user24:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user24:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="26" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/24" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #24</div></div></div></li></div><div class="mx_Export_EventWrapper" id="23"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="23" data-layout="group" data-self="false" data-event-id="23" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user23:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user23:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="27" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/23" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #23</div></div></div></li></div><div class="mx_Export_EventWrapper" id="22"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="22" data-layout="group" data-self="false" data-event-id="22" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user22:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user22:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="28" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/22" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #22</div></div></div></li></div><div class="mx_Export_EventWrapper" id="21"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="21" data-layout="group" data-self="false" data-event-id="21" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user21:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user21:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="29" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/21" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #21</div></div></div></li></div><div class="mx_Export_EventWrapper" id="20"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="20" data-layout="group" data-self="false" data-event-id="20" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user20:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user20:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="30" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/20" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #20</div></div></div></li></div><div class="mx_Export_EventWrapper" id="19"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="19" data-layout="group" data-self="false" data-event-id="19" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user19:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user19:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="31" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/19" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #19</div></div></div></li></div><div class="mx_Export_EventWrapper" id="18"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="18" data-layout="group" data-self="false" data-event-id="18" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user18:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user18:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="32" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/18" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #18</div></div></div></li></div><div class="mx_Export_EventWrapper" id="17"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="17" data-layout="group" data-self="false" data-event-id="17" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user17:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user17:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="33" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/17" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #17</div></div></div></li></div><div class="mx_Export_EventWrapper" id="16"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="16" data-layout="group" data-self="false" data-event-id="16" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user16:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user16:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="34" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/16" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #16</div></div></div></li></div><div class="mx_Export_EventWrapper" id="15"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="15" data-layout="group" data-self="false" data-event-id="15" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user15:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user15:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="35" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/15" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #15</div></div></div></li></div><div class="mx_Export_EventWrapper" id="14"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="14" data-layout="group" data-self="false" data-event-id="14" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user14:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user14:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="36" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/14" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #14</div></div></div></li></div><div class="mx_Export_EventWrapper" id="13"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="13" data-layout="group" data-self="false" data-event-id="13" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user13:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user13:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="37" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/13" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #13</div></div></div></li></div><div class="mx_Export_EventWrapper" id="12"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="12" data-layout="group" data-self="false" data-event-id="12" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user12:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user12:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="38" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/12" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #12</div></div></div></li></div><div class="mx_Export_EventWrapper" id="11"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="11" data-layout="group" data-self="false" data-event-id="11" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user11:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user11:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="39" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/11" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #11</div></div></div></li></div><div class="mx_Export_EventWrapper" id="10"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="10" data-layout="group" data-self="false" data-event-id="10" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user10:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user10:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="40" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/10" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #10</div></div></div></li></div><div class="mx_Export_EventWrapper" id="9"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="9" data-layout="group" data-self="false" data-event-id="9" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user9:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user9:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="41" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/9" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #9</div></div></div></li></div><div class="mx_Export_EventWrapper" id="8"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="8" data-layout="group" data-self="false" data-event-id="8" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user8:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user8:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="42" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/8" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #8</div></div></div></li></div><div class="mx_Export_EventWrapper" id="7"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="7" data-layout="group" data-self="false" data-event-id="7" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user7:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user7:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="43" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/7" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #7</div></div></div></li></div><div class="mx_Export_EventWrapper" id="6"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="6" data-layout="group" data-self="false" data-event-id="6" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user6:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user6:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="44" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/6" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #6</div></div></div></li></div><div class="mx_Export_EventWrapper" id="5"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="5" data-layout="group" data-self="false" data-event-id="5" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user5:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user5:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="45" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/5" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #5</div></div></div></li></div><div class="mx_Export_EventWrapper" id="4"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="4" data-layout="group" data-self="false" data-event-id="4" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user4:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user4:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="46" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/4" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #4</div></div></div></li></div><div class="mx_Export_EventWrapper" id="3"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="3" data-layout="group" data-self="false" data-event-id="3" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user3:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user3:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="47" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/3" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #3</div></div></div></li></div><div class="mx_Export_EventWrapper" id="2"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="2" data-layout="group" data-self="false" data-event-id="2" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user2:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user2:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="48" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/2" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #2</div></div></div></li></div><div class="mx_Export_EventWrapper" id="1"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="1" data-layout="group" data-self="false" data-event-id="1" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user1:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user1:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="49" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/1" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #1</div></div></div></li></div><div class="mx_Export_EventWrapper" id="0"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="0" data-layout="group" data-self="false" data-event-id="0" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user0:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user0:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="50" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/0" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #0</div></div></div><div class="mx_EventTile_footer"><div class="mx_ReactionsRow" role="toolbar" aria-label="Reactions"><button type="button" class="_reactionsRowButton_xia8f_8 _reactionsRowButtonDisabled_xia8f_25" tabindex="0" aria-label="@user0:example.com reacted with 🙃" aria-disabled="true"><span class="_reactionsRowButtonContent_xia8f_29" aria-hidden="true">🙃</span><span class="_reactionsRowButtonCount_xia8f_37" aria-hidden="true">1</span></button></div></div></li></div>
+                                    <li><div role="separator" aria-label="Thu, Jan 1, 1970" class="_flex_4dswl_9 mx_TimelineSeparator _timelineSeparator_yq5ye_8" style="--mx-flex-display:flex;--mx-flex-direction:row;--mx-flex-align:center;--mx-flex-justify:start;--mx-flex-gap:0;--mx-flex-wrap:nowrap"><hr role="none"/><div class="_flex_4dswl_9 _content_5dcky_8" style="--mx-flex-display:flex;--mx-flex-direction:row;--mx-flex-align:start;--mx-flex-justify:start;--mx-flex-gap:0;--mx-flex-wrap:nowrap"><h2 aria-hidden="true">Thu, Jan 1, 1970</h2></div><hr role="none"/></div></li><div class="mx_Export_EventWrapper" id="49"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="49" data-layout="group" data-self="false" data-event-id="49" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user49:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user49:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="1" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/49" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #49</div></div></div></li></div><div class="mx_Export_EventWrapper" id="48"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="48" data-layout="group" data-self="false" data-event-id="48" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user48:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user48:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="2" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/48" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #48</div></div></div></li></div><div class="mx_Export_EventWrapper" id="47"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="47" data-layout="group" data-self="false" data-event-id="47" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user47:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user47:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="3" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/47" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #47</div></div></div></li></div><div class="mx_Export_EventWrapper" id="46"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="46" data-layout="group" data-self="false" data-event-id="46" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user46:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user46:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="4" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/46" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #46</div></div></div></li></div><div class="mx_Export_EventWrapper" id="45"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="45" data-layout="group" data-self="false" data-event-id="45" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user45:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user45:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="5" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/45" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #45</div></div></div></li></div><div class="mx_Export_EventWrapper" id="44"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="44" data-layout="group" data-self="false" data-event-id="44" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user44:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user44:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="6" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/44" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #44</div></div></div></li></div><div class="mx_Export_EventWrapper" id="43"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="43" data-layout="group" data-self="false" data-event-id="43" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user43:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user43:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="7" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/43" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #43</div></div></div></li></div><div class="mx_Export_EventWrapper" id="42"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="42" data-layout="group" data-self="false" data-event-id="42" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user42:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user42:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="8" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/42" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #42</div></div></div></li></div><div class="mx_Export_EventWrapper" id="41"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="41" data-layout="group" data-self="false" data-event-id="41" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user41:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user41:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="9" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/41" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #41</div></div></div></li></div><div class="mx_Export_EventWrapper" id="40"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="40" data-layout="group" data-self="false" data-event-id="40" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user40:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user40:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="10" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/40" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #40</div></div></div></li></div><div class="mx_Export_EventWrapper" id="39"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="39" data-layout="group" data-self="false" data-event-id="39" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user39:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user39:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="11" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/39" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #39</div></div></div></li></div><div class="mx_Export_EventWrapper" id="38"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="38" data-layout="group" data-self="false" data-event-id="38" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user38:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user38:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="12" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/38" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #38</div></div></div></li></div><div class="mx_Export_EventWrapper" id="37"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="37" data-layout="group" data-self="false" data-event-id="37" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user37:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user37:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="13" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/37" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #37</div></div></div></li></div><div class="mx_Export_EventWrapper" id="36"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="36" data-layout="group" data-self="false" data-event-id="36" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user36:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user36:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="14" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/36" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #36</div></div></div></li></div><div class="mx_Export_EventWrapper" id="35"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="35" data-layout="group" data-self="false" data-event-id="35" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user35:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user35:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="15" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/35" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #35</div></div></div></li></div><div class="mx_Export_EventWrapper" id="34"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="34" data-layout="group" data-self="false" data-event-id="34" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user34:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user34:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="16" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/34" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #34</div></div></div></li></div><div class="mx_Export_EventWrapper" id="33"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="33" data-layout="group" data-self="false" data-event-id="33" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user33:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user33:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="17" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/33" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #33</div></div></div></li></div><div class="mx_Export_EventWrapper" id="32"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="32" data-layout="group" data-self="false" data-event-id="32" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user32:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user32:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="18" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/32" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #32</div></div></div></li></div><div class="mx_Export_EventWrapper" id="31"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="31" data-layout="group" data-self="false" data-event-id="31" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user31:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user31:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="19" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/31" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #31</div></div></div></li></div><div class="mx_Export_EventWrapper" id="30"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="30" data-layout="group" data-self="false" data-event-id="30" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user30:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user30:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="20" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/30" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #30</div></div></div></li></div><div class="mx_Export_EventWrapper" id="29"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="29" data-layout="group" data-self="false" data-event-id="29" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user29:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user29:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="21" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/29" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #29</div></div></div></li></div><div class="mx_Export_EventWrapper" id="28"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="28" data-layout="group" data-self="false" data-event-id="28" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user28:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user28:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="22" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/28" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #28</div></div></div></li></div><div class="mx_Export_EventWrapper" id="27"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="27" data-layout="group" data-self="false" data-event-id="27" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user27:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user27:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="23" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/27" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #27</div></div></div></li></div><div class="mx_Export_EventWrapper" id="26"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="26" data-layout="group" data-self="false" data-event-id="26" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user26:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user26:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="24" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/26" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #26</div></div></div></li></div><div class="mx_Export_EventWrapper" id="25"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="25" data-layout="group" data-self="false" data-event-id="25" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user25:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user25:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="25" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/25" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #25</div></div></div></li></div><div class="mx_Export_EventWrapper" id="24"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="24" data-layout="group" data-self="false" data-event-id="24" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user24:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user24:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="26" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/24" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #24</div></div></div></li></div><div class="mx_Export_EventWrapper" id="23"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="23" data-layout="group" data-self="false" data-event-id="23" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user23:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user23:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="27" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/23" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #23</div></div></div></li></div><div class="mx_Export_EventWrapper" id="22"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="22" data-layout="group" data-self="false" data-event-id="22" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user22:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user22:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="28" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/22" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #22</div></div></div></li></div><div class="mx_Export_EventWrapper" id="21"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="21" data-layout="group" data-self="false" data-event-id="21" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user21:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user21:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="29" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/21" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #21</div></div></div></li></div><div class="mx_Export_EventWrapper" id="20"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="20" data-layout="group" data-self="false" data-event-id="20" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user20:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user20:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="30" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/20" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #20</div></div></div></li></div><div class="mx_Export_EventWrapper" id="19"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="19" data-layout="group" data-self="false" data-event-id="19" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user19:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user19:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="31" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/19" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #19</div></div></div></li></div><div class="mx_Export_EventWrapper" id="18"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="18" data-layout="group" data-self="false" data-event-id="18" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user18:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user18:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="32" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/18" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #18</div></div></div></li></div><div class="mx_Export_EventWrapper" id="17"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="17" data-layout="group" data-self="false" data-event-id="17" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user17:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user17:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="33" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/17" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #17</div></div></div></li></div><div class="mx_Export_EventWrapper" id="16"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="16" data-layout="group" data-self="false" data-event-id="16" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user16:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user16:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="34" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/16" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #16</div></div></div></li></div><div class="mx_Export_EventWrapper" id="15"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="15" data-layout="group" data-self="false" data-event-id="15" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user15:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user15:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="35" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/15" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #15</div></div></div></li></div><div class="mx_Export_EventWrapper" id="14"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="14" data-layout="group" data-self="false" data-event-id="14" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user14:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user14:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="36" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/14" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #14</div></div></div></li></div><div class="mx_Export_EventWrapper" id="13"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="13" data-layout="group" data-self="false" data-event-id="13" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user13:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user13:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="37" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/13" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #13</div></div></div></li></div><div class="mx_Export_EventWrapper" id="12"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="12" data-layout="group" data-self="false" data-event-id="12" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user12:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user12:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="38" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/12" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #12</div></div></div></li></div><div class="mx_Export_EventWrapper" id="11"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="11" data-layout="group" data-self="false" data-event-id="11" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user11:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user11:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="39" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/11" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #11</div></div></div></li></div><div class="mx_Export_EventWrapper" id="10"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="10" data-layout="group" data-self="false" data-event-id="10" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user10:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user10:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="40" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/10" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #10</div></div></div></li></div><div class="mx_Export_EventWrapper" id="9"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="9" data-layout="group" data-self="false" data-event-id="9" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user9:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user9:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="41" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/9" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #9</div></div></div></li></div><div class="mx_Export_EventWrapper" id="8"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="8" data-layout="group" data-self="false" data-event-id="8" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user8:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user8:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="42" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/8" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #8</div></div></div></li></div><div class="mx_Export_EventWrapper" id="7"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="7" data-layout="group" data-self="false" data-event-id="7" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user7:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user7:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="43" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/7" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #7</div></div></div></li></div><div class="mx_Export_EventWrapper" id="6"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="6" data-layout="group" data-self="false" data-event-id="6" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user6:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user6:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="44" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/6" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #6</div></div></div></li></div><div class="mx_Export_EventWrapper" id="5"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="5" data-layout="group" data-self="false" data-event-id="5" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user5:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user5:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="45" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/5" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #5</div></div></div></li></div><div class="mx_Export_EventWrapper" id="4"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="4" data-layout="group" data-self="false" data-event-id="4" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user4:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user4:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="46" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/4" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #4</div></div></div></li></div><div class="mx_Export_EventWrapper" id="3"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="3" data-layout="group" data-self="false" data-event-id="3" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user3:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user3:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="47" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/3" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #3</div></div></div></li></div><div class="mx_Export_EventWrapper" id="2"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="2" data-layout="group" data-self="false" data-event-id="2" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user2:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user2:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="48" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/2" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #2</div></div></div></li></div><div class="mx_Export_EventWrapper" id="1"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="1" data-layout="group" data-self="false" data-event-id="1" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user1:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user1:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="49" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/1" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #1</div></div></div></li></div><div class="mx_Export_EventWrapper" id="0"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="0" data-layout="group" data-self="false" data-event-id="0" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user0:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user0:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="50" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/0" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #0</div></div></div><div class="mx_EventTile_footer"><div class="mx_ReactionsRow" role="toolbar" aria-label="Reactions"><button type="button" class="_reactionsRowButton_xia8f_8 _reactionsRowButtonDisabled_xia8f_25" tabindex="0" aria-label="@user0:example.com reacted with 🙃" aria-disabled="true"><span class="_reactionsRowButtonContent_xia8f_29" aria-hidden="true">🙃</span><span class="_reactionsRowButtonCount_xia8f_37" aria-hidden="true">1</span></button></div></div></li></div>
                                     </ol>
                                     </div>
                                 </div>
diff --git a/apps/web/test/viewmodels/timeline/DateSeparatorViewModel-test.tsx b/apps/web/test/viewmodels/timeline/DateSeparatorViewModel-test.tsx
new file mode 100644
index 0000000000..9abfd76e6e
--- /dev/null
+++ b/apps/web/test/viewmodels/timeline/DateSeparatorViewModel-test.tsx
@@ -0,0 +1,351 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+import React from "react";
+import { mocked } from "jest-mock";
+import { ConnectionError, Direction } from "matrix-js-sdk/src/matrix";
+
+import dispatcher from "../../../src/dispatcher/dispatcher";
+import { Action } from "../../../src/dispatcher/actions";
+import { formatFullDateNoTime } from "../../../src/DateUtils";
+import Modal from "../../../src/Modal";
+import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+import SettingsStore from "../../../src/settings/SettingsStore";
+import { UIFeature } from "../../../src/settings/UIFeature";
+import { SdkContextClass } from "../../../src/contexts/SDKContext";
+import { DateSeparatorViewModel } from "../../../src/viewmodels/timeline/DateSeparatorViewModel";
+import { flushPromisesWithFakeTimers } from "../../test-utils";
+
+jest.mock("../../../src/settings/SettingsStore");
+jest.mock("../../../src/contexts/SDKContext", () => ({
+    SdkContextClass: {
+        instance: {
+            roomViewStore: {
+                getRoomId: jest.fn(),
+            },
+        },
+    },
+}));
+
+describe("DateSeparatorViewModel", () => {
+    const HOUR_MS = 3600000;
+    const DAY_MS = HOUR_MS * 24;
+    // Friday Dec 17 2021, 9:09am
+    const nowDate = new Date("2021-12-17T08:09:00.000Z");
+    const roomId = "!room:example.org";
+    const defaultProps = {
+        roomId,
+        ts: nowDate.getTime(),
+    };
+    type TestCase = [string, number, string];
+    const testCases: TestCase[] = [
+        ["the exact same moment", nowDate.getTime(), "today"],
+        ["same day as current day", nowDate.getTime() - HOUR_MS, "today"],
+        ["day before the current day", nowDate.getTime() - HOUR_MS * 12, "yesterday"],
+        ["2 days ago", nowDate.getTime() - DAY_MS * 2, "Wednesday"],
+        ["144 hours ago", nowDate.getTime() - HOUR_MS * 144, "Sat, Dec 11, 2021"],
+        [
+            "6 days ago, but less than 144h",
+            new Date("Saturday Dec 11 2021 23:59:00 GMT+0100 (Central European Standard Time)").getTime(),
+            "Saturday",
+        ],
+    ];
+
+    const watchCallbacks = new Map<string, (...args: any[]) => void>();
+    const mockTimestampToEvent = jest.fn();
+
+    const hasTestId = (node: React.ReactNode, testId: string): boolean => {
+        if (!React.isValidElement<{ children?: React.ReactNode }>(node)) return false;
+        const props = node.props as { "children"?: React.ReactNode; "data-testid"?: string };
+        if (props["data-testid"] === testId) return true;
+
+        const children = React.Children.toArray(props.children);
+        return children.some((child) => hasTestId(child, testId));
+    };
+
+    const createViewModel = (
+        props: Partial<typeof defaultProps> & { forExport?: boolean } = {},
+    ): DateSeparatorViewModel => {
+        return new DateSeparatorViewModel({ ...defaultProps, ...props });
+    };
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+        jest.setSystemTime(nowDate.getTime());
+        watchCallbacks.clear();
+
+        mocked(SettingsStore).getValue.mockImplementation((key): any => {
+            if (String(key) === UIFeature.TimelineEnableRelativeDates) return true;
+            if (key === "feature_jump_to_date") return false;
+            return undefined;
+        });
+        mocked(SettingsStore).watchSetting.mockImplementation((settingName, _roomId, cb): any => {
+            watchCallbacks.set(String(settingName), cb);
+            return `${String(settingName)}-watch-ref`;
+        });
+        mocked(SettingsStore).unwatchSetting.mockImplementation(() => {});
+
+        mockTimestampToEvent.mockReset();
+        jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue({
+            timestampToEvent: mockTimestampToEvent,
+        } as any);
+
+        jest.spyOn(dispatcher, "dispatch").mockImplementation(() => {});
+        jest.spyOn(Modal, "createDialog").mockImplementation(() => ({ close: jest.fn() }) as any);
+
+        mocked(SdkContextClass.instance.roomViewStore.getRoomId).mockReturnValue(roomId);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+        jest.useRealTimers();
+    });
+
+    it("computes relative label for today", () => {
+        const vm = createViewModel();
+
+        expect(vm.getSnapshot().label).toBe("today");
+        expect(vm.getSnapshot().className).toBe("mx_TimelineSeparator");
+    });
+
+    it("uses full date when exporting", () => {
+        const vm = createViewModel({ forExport: true });
+
+        expect(vm.getSnapshot().label).toBe(formatFullDateNoTime(nowDate));
+    });
+
+    it("updates label when relative dates setting changes at runtime", () => {
+        const vm = createViewModel();
+        expect(vm.getSnapshot().label).toBe("today");
+
+        const callback = watchCallbacks.get(UIFeature.TimelineEnableRelativeDates);
+        expect(callback).toBeDefined();
+        callback?.(UIFeature.TimelineEnableRelativeDates, null, null, null, false);
+
+        expect(vm.getSnapshot().label).toBe(formatFullDateNoTime(nowDate));
+    });
+
+    it("exposes jumpToDateMenu when feature is enabled", () => {
+        mocked(SettingsStore).getValue.mockImplementation((key): any => {
+            if (String(key) === UIFeature.TimelineEnableRelativeDates) return true;
+            if (key === "feature_jump_to_date") return true;
+            return undefined;
+        });
+        const vm = createViewModel();
+
+        expect(vm.getSnapshot().jumpToEnabled).toBeTruthy();
+    });
+
+    it("exposes jumpFromDate in snapshot", () => {
+        const vm = createViewModel();
+
+        expect(vm.getSnapshot().jumpFromDate).toBe("2021-12-17");
+    });
+
+    it("does not expose jumpToDateMenu when exporting", () => {
+        mocked(SettingsStore).getValue.mockImplementation((key): any => {
+            if (String(key) === UIFeature.TimelineEnableRelativeDates) return true;
+            if (key === "feature_jump_to_date") return true;
+            return undefined;
+        });
+        const vm = createViewModel({ forExport: true });
+
+        expect(vm.getSnapshot().jumpToEnabled).toBeFalsy();
+    });
+
+    it("updates jumpToEnabled when feature_jump_to_date changes at runtime", () => {
+        const vm = createViewModel();
+        expect(vm.getSnapshot().jumpToEnabled).toBeFalsy();
+
+        const callback = watchCallbacks.get("feature_jump_to_date");
+        expect(callback).toBeDefined();
+        callback?.("feature_jump_to_date", null, null, null, true);
+
+        expect(vm.getSnapshot().jumpToEnabled).toBeTruthy();
+    });
+
+    it("dispatches ViewRoom when pickDate resolves in active room", async () => {
+        const eventId = "$event";
+        const unixTimestamp = nowDate.getTime() - DAY_MS;
+        mockTimestampToEvent.mockResolvedValue({
+            event_id: eventId,
+            origin_server_ts: unixTimestamp,
+        });
+        const vm = createViewModel();
+
+        await vm.pickDate(unixTimestamp);
+
+        expect(mockTimestampToEvent).toHaveBeenCalledWith(roomId, unixTimestamp, Direction.Forward);
+        expect(dispatcher.dispatch).toHaveBeenCalledWith({
+            action: Action.ViewRoom,
+            event_id: eventId,
+            highlighted: true,
+            room_id: roomId,
+            metricsTrigger: undefined,
+        });
+    });
+
+    it("does not dispatch ViewRoom when room changed before pickDate resolves", async () => {
+        mockTimestampToEvent.mockResolvedValue({
+            event_id: "$event",
+            origin_server_ts: nowDate.getTime(),
+        });
+        mocked(SdkContextClass.instance.roomViewStore.getRoomId).mockReturnValue("!other:example.org");
+        const vm = createViewModel();
+
+        await vm.pickDate(nowDate.getTime() - HOUR_MS);
+
+        expect(dispatcher.dispatch).not.toHaveBeenCalled();
+    });
+
+    it("shows submit debug logs option for generic errors", async () => {
+        mockTimestampToEvent.mockRejectedValue(new Error("Boom"));
+        const vm = createViewModel();
+
+        await vm.pickDate(nowDate.getTime() - HOUR_MS);
+
+        expect(Modal.createDialog).toHaveBeenCalled();
+        const [, params] = mocked(Modal.createDialog).mock.calls.at(-1)!;
+        expect(hasTestId((params as any).description, "jump-to-date-error-submit-debug-logs-button")).toBe(true);
+    });
+
+    it("does not show submit debug logs option for connection errors", async () => {
+        mockTimestampToEvent.mockRejectedValue(new ConnectionError("offline"));
+        const vm = createViewModel();
+
+        await vm.pickDate(nowDate.getTime() - HOUR_MS);
+
+        expect(Modal.createDialog).toHaveBeenCalled();
+        const [, params] = mocked(Modal.createDialog).mock.calls.at(-1)!;
+        expect(hasTestId((params as any).description, "jump-to-date-error-submit-debug-logs-button")).toBe(false);
+    });
+
+    describe("snapshot labels", () => {
+        it.each(testCases)("formats date correctly when current time is %s", (_d, ts, result) => {
+            expect(createViewModel({ ts }).getSnapshot().label).toContain(result);
+        });
+
+        describe("when forExport is true", () => {
+            it.each(testCases)("formats date in full when current time is %s", (_d, ts) => {
+                expect(createViewModel({ ts, forExport: true }).getSnapshot().label).toContain(
+                    formatFullDateNoTime(new Date(ts)),
+                );
+            });
+        });
+
+        describe("when TimelineEnableRelativeDates is false", () => {
+            beforeEach(() => {
+                mocked(SettingsStore).getValue.mockImplementation((key): any => {
+                    if (String(key) === UIFeature.TimelineEnableRelativeDates) return false;
+                    if (key === "feature_jump_to_date") return false;
+                    return undefined;
+                });
+            });
+
+            it.each(testCases)("formats date in full when current time is %s", (_d, ts) => {
+                expect(createViewModel({ ts }).getSnapshot().label).toContain(formatFullDateNoTime(new Date(ts)));
+            });
+        });
+    });
+
+    describe("jump actions", () => {
+        beforeEach(() => {
+            mocked(SettingsStore).getValue.mockImplementation((key): any => {
+                if (String(key) === UIFeature.TimelineEnableRelativeDates) return true;
+                if (key === "feature_jump_to_date") return true;
+                return undefined;
+            });
+        });
+
+        [
+            {
+                timeDescriptor: "last week",
+                run: (vm: DateSeparatorViewModel): Promise<void> => vm.onLastWeekPicked(),
+            },
+            {
+                timeDescriptor: "last month",
+                run: (vm: DateSeparatorViewModel): Promise<void> => vm.onLastMonthPicked(),
+            },
+            {
+                timeDescriptor: "the beginning",
+                run: (vm: DateSeparatorViewModel): Promise<void> => vm.onBeginningPicked(),
+            },
+        ].forEach((testCase) => {
+            it(`can jump to ${testCase.timeDescriptor}`, async () => {
+                const returnedDate = new Date();
+                returnedDate.setDate(nowDate.getDate() - 100);
+                const returnedEventId = "$abc";
+                mockTimestampToEvent.mockResolvedValue({
+                    event_id: returnedEventId,
+                    origin_server_ts: returnedDate.getTime(),
+                });
+                const vm = createViewModel();
+
+                await testCase.run(vm);
+                await flushPromisesWithFakeTimers();
+
+                expect(mockTimestampToEvent).toHaveBeenCalledWith(roomId, expect.any(Number), Direction.Forward);
+                expect(dispatcher.dispatch).toHaveBeenCalledWith({
+                    action: Action.ViewRoom,
+                    event_id: returnedEventId,
+                    highlighted: true,
+                    room_id: roomId,
+                    metricsTrigger: undefined,
+                });
+            });
+        });
+
+        it("does not jump when room changed before request resolves", async () => {
+            mocked(SdkContextClass.instance.roomViewStore.getRoomId).mockReturnValue("!some-other-room");
+            mockTimestampToEvent.mockResolvedValue({
+                event_id: "$abc",
+                origin_server_ts: 0,
+            });
+            const vm = createViewModel();
+
+            await vm.onLastWeekPicked();
+            await flushPromisesWithFakeTimers();
+
+            expect(dispatcher.dispatch).not.toHaveBeenCalled();
+        });
+
+        it("does not show jump to date error if user switched room", async () => {
+            mocked(SdkContextClass.instance.roomViewStore.getRoomId).mockReturnValue("!some-other-room");
+            mockTimestampToEvent.mockRejectedValue(new Error("Fake error in test"));
+            const vm = createViewModel();
+
+            await vm.onLastWeekPicked();
+            await flushPromisesWithFakeTimers();
+
+            expect(Modal.createDialog).not.toHaveBeenCalled();
+        });
+
+        it("shows error dialog with submit debug logs option when non-networking error occurs", async () => {
+            mockTimestampToEvent.mockRejectedValue(new Error("Fake error in test"));
+            const vm = createViewModel();
+
+            await vm.onLastWeekPicked();
+            await flushPromisesWithFakeTimers();
+
+            expect(Modal.createDialog).toHaveBeenCalled();
+            const [, params] = mocked(Modal.createDialog).mock.calls.at(-1)!;
+            expect(hasTestId((params as any).description, "jump-to-date-error-submit-debug-logs-button")).toBe(true);
+        });
+
+        it("shows error dialog without submit debug logs option when networking error occurs", async () => {
+            mockTimestampToEvent.mockRejectedValue(new ConnectionError("Fake connection error in test"));
+            const vm = createViewModel();
+
+            await vm.onLastWeekPicked();
+            await flushPromisesWithFakeTimers();
+
+            expect(Modal.createDialog).toHaveBeenCalled();
+            const [, params] = mocked(Modal.createDialog).mock.calls.at(-1)!;
+            expect(hasTestId((params as any).description, "jump-to-date-error-submit-debug-logs-button")).toBe(false);
+        });
+    });
+});
diff --git a/packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bc4cc3de25c1f9b3082c6f69bf35d102f7f5b83
GIT binary patch
literal 17692
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
W!xqs4kJQ6Ah?kq+gv{UN>;DfLOf?z+

literal 0
HcmV?d00001

diff --git a/packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/has-extra-class-names-auto.png b/packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/has-extra-class-names-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bc4cc3de25c1f9b3082c6f69bf35d102f7f5b83
GIT binary patch
literal 17692
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
W!xqs4kJQ6Ah?kq+gv{UN>;DfLOf?z+

literal 0
HcmV?d00001

diff --git a/packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/long-localized-label-auto.png b/packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/long-localized-label-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3e3b3ae151d54d88c45dc3487822722ec82faed
GIT binary patch
literal 24362
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

literal 0
HcmV?d00001

diff --git a/packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png b/packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2df01184374e38b907ca71588027d7c1138b13a
GIT binary patch
literal 31913
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

literal 0
HcmV?d00001

diff --git a/packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-tooltip-auto.png b/packages/shared-components/__vis__/linux/__baselines__/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-tooltip-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..811dbfd0679a8480aee1e4220bd049472d0a324e
GIT binary patch
literal 19321
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

literal 0
HcmV?d00001

diff --git a/packages/shared-components/src/i18n/strings/en_EN.json b/packages/shared-components/src/i18n/strings/en_EN.json
index ff13817fd1..e4187edd63 100644
--- a/packages/shared-components/src/i18n/strings/en_EN.json
+++ b/packages/shared-components/src/i18n/strings/en_EN.json
@@ -7,6 +7,7 @@
         "dismiss": "Dismiss",
         "edit": "Edit",
         "explore_rooms": "Explore rooms",
+        "go": "Go",
         "invite": "Invite",
         "new_conversation": "New conversation",
         "new_room": "New room",
@@ -42,6 +43,9 @@
             "shared": "New members see history",
             "world_readable": "Anyone can see history"
         },
+        "jump_to_date": "Jump to date",
+        "jump_to_date_beginning": "The beginning of the room",
+        "jump_to_date_prompt": "Pick a date to jump to",
         "status_bar": {
             "delete_all": "Delete all",
             "exceeded_resource_limit_description": "Please contact your service administrator to continue using the service.",
diff --git a/packages/shared-components/src/index.ts b/packages/shared-components/src/index.ts
index 865823fb54..fffbce1c75 100644
--- a/packages/shared-components/src/index.ts
+++ b/packages/shared-components/src/index.ts
@@ -35,6 +35,7 @@ export * from "./room-list/RoomListView";
 export * from "./room-list/RoomListItemView";
 export * from "./room-list/RoomListPrimaryFilters";
 export * from "./room-list/VirtualizedRoomListView";
+export * from "./timeline/DateSeparatorView/";
 export * from "./utils/Box";
 export * from "./utils/Flex";
 export * from "./right-panel/WidgetContextMenu";
diff --git a/packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparator.tsx b/packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparator.tsx
index cd3af1c1a7..3097f09afe 100644
--- a/packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparator.tsx
+++ b/packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparator.tsx
@@ -27,6 +27,12 @@ export interface TimelineSeparatorProps {
      * Optional children to render inside the timeline separator
      */
     children?: PropsWithChildren["children"];
+    /**
+     * ARIA role for the separator container.
+     * Use "none" when the separator contains interactive controls.
+     * @default "separator"
+     */
+    role?: "separator" | "none";
 }
 
 /**
@@ -35,13 +41,13 @@ export interface TimelineSeparatorProps {
  * @param label the accessible label string describing the separator
  * @param children the children to draw within the timeline separator
  */
-const TimelineSeparator: React.FC<TimelineSeparatorProps> = ({ label, className, children }) => {
+const TimelineSeparator: React.FC<TimelineSeparatorProps> = ({ label, className, children, role = "separator" }) => {
     // ARIA treats <hr/>s as separators, here we abuse them slightly so manually treat this entire thing as one
     return (
         <Flex
             className={classNames(className, styles.timelineSeparator)}
-            role="separator"
-            aria-label={label}
+            role={role}
+            aria-label={role === "separator" ? label : undefined}
             align="center"
         >
             <hr role="none" />
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorButton.tsx b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorButton.tsx
new file mode 100644
index 0000000000..44fd099b52
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorButton.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+import React from "react";
+import { Tooltip } from "@vector-im/compound-web";
+import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
+
+import { Flex } from "../../utils/Flex";
+import { useI18n } from "../../utils/i18nContext";
+
+/** Props for DateSeparatorButton. */
+export interface DateSeparatorButtonProps {
+    /** Visible date label shown in the separator button. */
+    label: string;
+    /** Controls tooltip visibility when parent manages open state. */
+    tooltipOpen?: boolean;
+    /** Extra CSS classes to apply to the component. */
+    className?: string;
+    /** Optional ref for the button container element. */
+    buttonRef?: React.Ref<HTMLDivElement>;
+    /** Called when the pointer enters the button trigger. */
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    /** Called when the pointer leaves the button trigger. */
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    /** Called when the button trigger receives focus. */
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    /** Called when the button trigger loses focus. */
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+}
+
+/** Interactive date separator button that opens the jump-to-date menu. */
+export function DateSeparatorButton({
+    label,
+    tooltipOpen,
+    className,
+    buttonRef,
+    ...props
+}: DateSeparatorButtonProps): React.ReactNode {
+    const { translate: _t } = useI18n();
+    return (
+        <Tooltip description={_t("room|jump_to_date")} placement="right" open={tooltipOpen}>
+            <Flex
+                ref={buttonRef}
+                data-testid="jump-to-date-separator-button"
+                className={className}
+                aria-live="off"
+                aria-label={_t("room|jump_to_date")}
+                role="button"
+                tabIndex={0}
+                {...props}
+            >
+                <h2 aria-hidden="true">{label}</h2>
+                <ChevronDownIcon />
+            </Flex>
+        </Tooltip>
+    );
+}
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.module.css b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.module.css
new file mode 100644
index 0000000000..fff772c4bd
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.module.css
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+.picker_menu {
+    max-inline-size: none !important;
+    padding: 0 !important;
+    gap: 0 !important;
+}
+
+.picker_menu_item {
+    padding: var(--cpd-space-3x) var(--cpd-space-5x) !important;
+}
+
+.picker_separator {
+    margin-inline: 0 !important;
+}
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.test.tsx b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.test.tsx
new file mode 100644
index 0000000000..90c2c804e9
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.test.tsx
@@ -0,0 +1,182 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+import React from "react";
+import { fireEvent, render, screen } from "@test-utils";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { type DateSeparatorViewModel, type DateSeparatorViewSnapshot } from "./DateSeparatorView";
+import { DateSeparatorContextMenuView } from "./DateSeparatorContextMenuView";
+
+class TestDateSeparatorViewModel implements DateSeparatorViewModel {
+    private listeners = new Set<() => void>();
+
+    public constructor(private snapshot: DateSeparatorViewSnapshot) {}
+
+    public getSnapshot = (): DateSeparatorViewSnapshot => this.snapshot;
+
+    public subscribe = (listener: () => void): (() => void) => {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    };
+
+    public onLastWeekPicked = vi.fn<() => void>();
+    public onLastMonthPicked = vi.fn<() => void>();
+    public onBeginningPicked = vi.fn<() => void>();
+    public onDatePicked = vi.fn<(dateString: string) => void>();
+}
+
+function renderMenu({
+    open = true,
+    jumpToEnabled = true,
+    onOpenChange = vi.fn<(open: boolean) => void>(),
+}: {
+    open?: boolean;
+    jumpToEnabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+} = {}): { vm: TestDateSeparatorViewModel; onOpenChange: (open: boolean) => void } {
+    const vm = new TestDateSeparatorViewModel({
+        label: "Today",
+        jumpToEnabled,
+        jumpFromDate: "2025-01-15",
+    });
+
+    render(
+        <DateSeparatorContextMenuView
+            vm={vm}
+            open={open}
+            onOpenChange={onOpenChange}
+            trigger={
+                <button type="button" data-testid="jump-to-trigger">
+                    Trigger
+                </button>
+            }
+        />,
+    );
+
+    return { vm, onOpenChange };
+}
+
+describe("DateSeparatorContextMenuView", () => {
+    it("renders menu actions and date picker when open", () => {
+        renderMenu({ open: true, jumpToEnabled: true });
+
+        expect(screen.getByTestId("jump-to-date-last-week")).toBeInTheDocument();
+        expect(screen.getByTestId("jump-to-date-last-month")).toBeInTheDocument();
+        expect(screen.getByTestId("jump-to-date-beginning")).toBeInTheDocument();
+        expect(screen.getByTestId("jump-to-date-picker")).toBeInTheDocument();
+    });
+
+    it("calls onOpenChange for opening and closing transitions", async () => {
+        const user = userEvent.setup();
+        const onOpenChange = vi.fn<(open: boolean) => void>();
+
+        renderMenu({ open: false, jumpToEnabled: true, onOpenChange });
+        await user.click(screen.getByTestId("jump-to-trigger"));
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+
+        renderMenu({ open: true, jumpToEnabled: true, onOpenChange });
+        await user.click(screen.getByTestId("jump-to-date-last-week"));
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("wires week/month/beginning menu actions to the correct callbacks", async () => {
+        const user = userEvent.setup();
+        const { vm } = renderMenu({ open: true, jumpToEnabled: true });
+
+        await user.click(screen.getByTestId("jump-to-date-last-week"));
+        await user.click(screen.getByTestId("jump-to-date-last-month"));
+        await user.click(screen.getByTestId("jump-to-date-beginning"));
+
+        expect(vm.onLastWeekPicked).toHaveBeenCalledTimes(1);
+        expect(vm.onLastMonthPicked).toHaveBeenCalledTimes(1);
+        expect(vm.onBeginningPicked).toHaveBeenCalledTimes(1);
+    });
+
+    it("submits date picker and closes the menu", async () => {
+        const user = userEvent.setup();
+        const onOpenChange = vi.fn<(open: boolean) => void>();
+        const { vm } = renderMenu({ open: true, jumpToEnabled: true, onOpenChange });
+
+        const dateInput = screen.getByLabelText("Pick a date to jump to");
+        fireEvent.input(dateInput, { target: { value: "2025-01-10" } });
+        await user.click(screen.getByRole("button", { name: "Go" }));
+
+        expect(vm.onDatePicked).toHaveBeenCalledWith("2025-01-10");
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("moves focus from date input to submit button on Tab", async () => {
+        const user = userEvent.setup();
+        renderMenu({ open: true, jumpToEnabled: true });
+
+        const dateInput = screen.getByLabelText("Pick a date to jump to");
+        const submitButton = screen.getByRole("button", { name: "Go" });
+        dateInput.focus();
+        await user.keyboard("{Tab}");
+
+        expect(submitButton).toHaveFocus();
+    });
+
+    it("moves focus from submit button back to date input on Shift+Tab", async () => {
+        const user = userEvent.setup();
+        renderMenu({ open: true, jumpToEnabled: true });
+
+        const dateInput = screen.getByLabelText("Pick a date to jump to");
+        const submitButton = screen.getByRole("button", { name: "Go" });
+        submitButton.focus();
+        await user.keyboard("{Shift>}{Tab}{/Shift}");
+
+        expect(dateInput).toHaveFocus();
+    });
+
+    it("closes the menu on Tab from the submit button", async () => {
+        const user = userEvent.setup();
+        const onOpenChange = vi.fn<(open: boolean) => void>();
+        const { vm } = renderMenu({ open: true, jumpToEnabled: true, onOpenChange });
+
+        const submitButton = screen.getByRole("button", { name: "Go" });
+        submitButton.focus();
+        await user.keyboard("{Tab}");
+
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+        expect(vm.onDatePicked).not.toHaveBeenCalled();
+    });
+
+    it("submits date picker with Enter on the submit button", async () => {
+        const user = userEvent.setup();
+        const onOpenChange = vi.fn<(open: boolean) => void>();
+        const { vm } = renderMenu({ open: true, jumpToEnabled: true, onOpenChange });
+
+        const dateInput = screen.getByLabelText("Pick a date to jump to");
+        fireEvent.input(dateInput, { target: { value: "2025-01-11" } });
+
+        const submitButton = screen.getByRole("button", { name: "Go" });
+        submitButton.focus();
+        await user.keyboard("{Enter}");
+
+        expect(vm.onDatePicked).toHaveBeenCalledWith("2025-01-11");
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("submits date picker with Space on the submit button", async () => {
+        const user = userEvent.setup();
+        const onOpenChange = vi.fn<(open: boolean) => void>();
+        const { vm } = renderMenu({ open: true, jumpToEnabled: true, onOpenChange });
+
+        const dateInput = screen.getByLabelText("Pick a date to jump to");
+        fireEvent.input(dateInput, { target: { value: "2025-01-12" } });
+
+        const submitButton = screen.getByRole("button", { name: "Go" });
+        submitButton.focus();
+        await user.keyboard(" ");
+
+        expect(vm.onDatePicked).toHaveBeenCalledWith("2025-01-12");
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+});
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.tsx b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.tsx
new file mode 100644
index 0000000000..9cd2086ea1
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorContextMenuView.tsx
@@ -0,0 +1,95 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+import React, { type JSX, type PropsWithChildren, useRef } from "react";
+import { Menu, MenuItem, Separator } from "@vector-im/compound-web";
+import { capitalize } from "lodash";
+
+import { useI18n } from "../../utils/i18nContext";
+import { humanizeRelativeTime } from "../../utils/humanize";
+import { type DateSeparatorViewModel } from "./DateSeparatorView";
+import { DateSeparatorDatePickerView } from "./DateSeparatorDatePickerView";
+import styles from "./DateSeparatorContextMenuView.module.css";
+
+/**
+ * Props for DateSeparatorContextMenuView component.
+ */
+export interface DateSeparatorContextMenuViewProps {
+    /** The date separator view model. */
+    vm: DateSeparatorViewModel;
+    /** Whether the menu is open (controlled by the parent). */
+    open: boolean;
+    /** The element used as the menu trigger. */
+    trigger: React.ReactNode;
+    /** Called when the menu requests an open state change. */
+    onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * Date separator jump-to menu.
+ * Uses the wrapped child as the menu trigger.
+ */
+export const DateSeparatorContextMenuView: React.FC<PropsWithChildren<DateSeparatorContextMenuViewProps>> = ({
+    vm,
+    open,
+    trigger,
+    onOpenChange,
+}): JSX.Element => {
+    const i18n = useI18n();
+    const { translate: _t } = useI18n();
+    const dateInputRef = useRef<HTMLInputElement>(null);
+
+    const onKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {
+        if (event.key !== "ArrowDown") return;
+        event.preventDefault();
+        dateInputRef.current?.focus();
+    };
+
+    return (
+        <Menu
+            open={open}
+            onOpenChange={(newOpen) => {
+                onOpenChange?.(newOpen);
+            }}
+            title={_t("room|jump_to_date")}
+            showTitle={false}
+            trigger={trigger}
+            align="start"
+            className={styles.picker_menu}
+        >
+            <MenuItem
+                label={capitalize(humanizeRelativeTime(i18n).format(-1, "week"))}
+                onSelect={() => vm.onLastWeekPicked?.()}
+                data-testid="jump-to-date-last-week"
+                hideChevron={true}
+                className={styles.picker_menu_item}
+            />
+            <MenuItem
+                label={capitalize(humanizeRelativeTime(i18n).format(-1, "month"))}
+                onSelect={() => vm.onLastMonthPicked?.()}
+                data-testid="jump-to-date-last-month"
+                hideChevron={true}
+                className={styles.picker_menu_item}
+            />
+            <MenuItem
+                label={_t("room|jump_to_date_beginning")}
+                onSelect={() => vm.onBeginningPicked?.()}
+                data-testid="jump-to-date-beginning"
+                hideChevron={true}
+                className={styles.picker_menu_item}
+                onKeyDown={onKeyDown}
+            />
+            <Separator decorative className={styles.picker_separator} />
+            <DateSeparatorDatePickerView
+                vm={vm}
+                inputRef={dateInputRef}
+                onSubmitted={() => onOpenChange?.(false)}
+                onDismissed={() => onOpenChange?.(false)}
+            />
+        </Menu>
+    );
+};
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorDatePickerView.module.css b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorDatePickerView.module.css
new file mode 100644
index 0000000000..e664b1f5eb
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorDatePickerView.module.css
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+.picker_menu_item {
+    padding: var(--cpd-space-3x) var(--cpd-space-5x) !important;
+}
+
+.picker_form {
+    display: flex;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    padding: 0 !important;
+    gap: var(--cpd-space-2x) !important;
+    color: var(--cpd-color-text-primary);
+    font: var(--cpd-font-body-md-medium);
+}
+
+.picker_input {
+    &:focus-within {
+        border-color: var(--cpd-color-border-focused);
+    }
+}
+
+.picker_input_date {
+    font: inherit;
+    color-scheme: light;
+    padding: var(--cpd-space-2x) !important;
+
+    :global(.cpd-theme-dark) &,
+    :global(.cpd-theme-dark-hc) & {
+        color-scheme: dark;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .picker_input_date {
+        color-scheme: dark;
+        :global(.cpd-theme-light) &,
+        :global(.cpd-theme-light-hc) & {
+            color-scheme: light;
+        }
+    }
+}
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorDatePickerView.tsx b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorDatePickerView.tsx
new file mode 100644
index 0000000000..6c6409a8ee
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorDatePickerView.tsx
@@ -0,0 +1,132 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+import React, { type JSX, useId, useRef, useState } from "react";
+import { Root, Submit, Field, TextControl, MenuItem } from "@vector-im/compound-web";
+
+import { formatDateForInput } from "../../utils/DateUtils";
+import { useI18n } from "../../utils/i18nContext";
+import { useViewModel } from "../../viewmodel";
+import { type DateSeparatorViewModel } from "./DateSeparatorView";
+import styles from "./DateSeparatorDatePickerView.module.css";
+
+/**
+ * Props for DateSeparatorDatePickerView component.
+ */
+export interface DateSeparatorDatePickerViewProps {
+    /** The date separator view model. */
+    vm: DateSeparatorViewModel;
+    /** Optional input ref shared with parent for focus management. */
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+    /** Called after a date has been submitted. */
+    onSubmitted?: () => void;
+    /** Called when the picker is dismissed without submitting. */
+    onDismissed?: () => void;
+}
+
+/**
+ * Date picker menu item.
+ */
+export const DateSeparatorDatePickerView: React.FC<DateSeparatorDatePickerViewProps> = ({
+    vm,
+    inputRef,
+    onSubmitted,
+    onDismissed,
+}): JSX.Element => {
+    const snapshot = useViewModel(vm);
+    const date = snapshot.jumpFromDate ? new Date(snapshot.jumpFromDate) : new Date();
+    const dateInputDefaultValue = formatDateForInput(date);
+
+    const { translate: _t } = useI18n();
+    const dateInputId = useId();
+    const [dateValue, setDateValue] = useState(dateInputDefaultValue);
+    const localDateInputRef = useRef<HTMLInputElement>(null);
+    const dateInputRef = inputRef ?? localDateInputRef;
+    const submitButtonRef = useRef<HTMLButtonElement>(null);
+
+    const onDateInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+        if (event.key === "Tab") {
+            if (event.shiftKey) {
+                onDismissed?.();
+            } else {
+                event.preventDefault();
+                submitButtonRef.current?.focus();
+            }
+        }
+    };
+
+    const onDateValueInput = (event: React.InputEvent<HTMLInputElement>): void => {
+        setDateValue(event.currentTarget.value);
+    };
+
+    const submitDate = (): void => {
+        vm.onDatePicked?.(dateValue);
+        onSubmitted?.();
+    };
+
+    const onJumpToDateSubmit = (event: React.SubmitEvent<HTMLFormElement>): void => {
+        event.preventDefault();
+        submitDate();
+    };
+
+    const onSubmitButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {
+        if (event.key === "Tab") {
+            if (event.shiftKey) {
+                event.preventDefault();
+                dateInputRef.current?.focus();
+            } else {
+                onDismissed?.();
+            }
+        }
+
+        if (event.key == "Enter" || event.key == " " || event.key == "Spacebar") {
+            event.preventDefault();
+            submitDate();
+        }
+    };
+
+    const keepMenuOpenOnSelect = (event: Event): void => {
+        event.preventDefault();
+    };
+
+    return (
+        <MenuItem
+            as="div"
+            data-testid="jump-to-date-picker"
+            label={_t("room|jump_to_date")}
+            onSelect={keepMenuOpenOnSelect}
+            hideChevron={true}
+            className={styles.picker_menu_item}
+        >
+            <Root className={styles.picker_form} onSubmit={onJumpToDateSubmit}>
+                <Field name="jump-to-date-field" className={styles.picker_input}>
+                    <TextControl
+                        ref={dateInputRef}
+                        id={dateInputId}
+                        type="date"
+                        aria-label={_t("room|jump_to_date_prompt")}
+                        onInput={onDateValueInput}
+                        onKeyDown={onDateInputKeyDown}
+                        value={dateValue}
+                        max={formatDateForInput(new Date())}
+                        className={styles.picker_input_date}
+                    />
+                </Field>
+                <Submit
+                    ref={submitButtonRef}
+                    className={styles.picker_button}
+                    type="submit"
+                    kind="primary"
+                    size="sm"
+                    onKeyDown={onSubmitButtonKeyDown}
+                >
+                    {_t("action|go")}
+                </Submit>
+            </Root>
+        </MenuItem>
+    );
+};
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.module.css b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.module.css
new file mode 100644
index 0000000000..5c420f3703
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.module.css
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+.content {
+    padding: 0 25px;
+    cursor: pointer;
+
+    h2 {
+        flex: 0 0 auto;
+        margin: 0;
+        font-size: inherit;
+        font-weight: inherit;
+        color: inherit;
+        text-transform: capitalize;
+    }
+
+    svg {
+        align-self: center;
+        width: 16px;
+        height: 16px;
+        color: var(--cpd-color-icon-secondary);
+    }
+}
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.stories.tsx b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.stories.tsx
new file mode 100644
index 0000000000..d09f04d0a6
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.stories.tsx
@@ -0,0 +1,91 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+import React, { type JSX } from "react";
+import { expect, userEvent, within } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DateSeparatorView, type DateSeparatorViewSnapshot, type DateSeparatorViewActions } from "./DateSeparatorView";
+import { useMockedViewModel } from "../../viewmodel/useMockedViewModel";
+import { withViewDocs } from "../../../.storybook/withViewDocs";
+
+type DateSeparatorProps = DateSeparatorViewSnapshot & DateSeparatorViewActions;
+
+const DateSeparatorViewWrapperImpl = ({
+    onLastWeekPicked,
+    onLastMonthPicked,
+    onBeginningPicked,
+    onDatePicked,
+    ...rest
+}: DateSeparatorProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, { onLastWeekPicked, onLastMonthPicked, onBeginningPicked, onDatePicked });
+    return <DateSeparatorView vm={vm} />;
+};
+const DateSeparatorViewWrapper = withViewDocs(DateSeparatorViewWrapperImpl, DateSeparatorView);
+
+const meta = {
+    title: "Timeline/DateSeparatorView",
+    component: DateSeparatorViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        jumpToEnabled: { control: "boolean" },
+        jumpFromDate: { control: "text" },
+        className: { control: "text" },
+    },
+    args: {
+        label: "Today",
+    },
+} satisfies Meta<typeof DateSeparatorViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const HasExtraClassNames: Story = {
+    args: {
+        className: "extra_class_1 extra_class_2",
+    },
+};
+
+export const WithJumpToTooltip: Story = {
+    args: {
+        jumpToEnabled: true,
+        jumpFromDate: "2025-01-15",
+        onLastWeekPicked: () => console.log("onLastWeekPicked"),
+        onLastMonthPicked: () => console.log("onLastMonthPicked"),
+        onBeginningPicked: () => console.log("onBeginningPicked"),
+        onDatePicked: () => console.log("onDatePicked"),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.hover(canvas.getByText("Today"));
+        await expect(within(canvasElement.ownerDocument.body).findByRole("tooltip")).resolves.toBeInTheDocument();
+    },
+};
+
+export const WithJumpToDatePicker: Story = {
+    args: {
+        jumpToEnabled: true,
+        jumpFromDate: "2025-01-15",
+        onLastWeekPicked: () => console.log("onLastWeekPicked"),
+        onLastMonthPicked: () => console.log("onLastMonthPicked"),
+        onBeginningPicked: () => console.log("onBeginningPicked"),
+        onDatePicked: () => console.log("onDatePicked"),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByText("Today"));
+        await expect(within(canvasElement.ownerDocument.body).findByText("Jump to date")).resolves.toBeInTheDocument();
+    },
+};
+
+export const LongLocalizedLabel: Story = {
+    args: {
+        label: "Wednesday, December 17, 2025 at 11:59 PM Coordinated Universal Time",
+    },
+};
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.test.tsx b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.test.tsx
new file mode 100644
index 0000000000..97586f5e61
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.test.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+import { render, screen } from "@test-utils";
+import { composeStories } from "@storybook/react-vite";
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { BaseViewModel } from "../../viewmodel/BaseViewModel";
+import { DateSeparatorView, type DateSeparatorViewModel, type DateSeparatorViewSnapshot } from "./DateSeparatorView";
+import * as stories from "./DateSeparatorView.stories";
+
+const { Default, HasExtraClassNames, WithJumpToDatePicker, LongLocalizedLabel } = composeStories(stories);
+
+class MutableDateSeparatorViewModel
+    extends BaseViewModel<DateSeparatorViewSnapshot, undefined>
+    implements DateSeparatorViewModel
+{
+    public constructor(snapshot: DateSeparatorViewSnapshot) {
+        super(undefined, snapshot);
+    }
+
+    public setSnapshot(snapshot: DateSeparatorViewSnapshot): void {
+        this.snapshot.set(snapshot);
+    }
+
+    public onLastWeekPicked = (): void => undefined;
+    public onLastMonthPicked = (): void => undefined;
+    public onBeginningPicked = (): void => undefined;
+    public onDatePicked = (_dateString: string): void => undefined;
+}
+
+describe("DateSeparatorView", () => {
+    it("renders default story", () => {
+        const { container } = render(<Default />);
+        expect(screen.getByText("Today")).toBeInTheDocument();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders with extra class names", () => {
+        const { container } = render(<HasExtraClassNames />);
+        expect(container.firstElementChild).toHaveClass("extra_class_1");
+        expect(container.firstElementChild).toHaveClass("extra_class_2");
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders with jump to date picker story", async () => {
+        const { container } = render(<WithJumpToDatePicker />);
+        await userEvent.click(screen.getByTestId("jump-to-date-separator-button"));
+        await expect(screen.findByTestId("jump-to-date-last-week")).resolves.toBeInTheDocument();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders long localized label story", () => {
+        const { container } = render(<LongLocalizedLabel />);
+        expect(
+            screen.getByText("Wednesday, December 17, 2025 at 11:59 PM Coordinated Universal Time"),
+        ).toBeInTheDocument();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("updates when view model snapshot changes", async () => {
+        const vm = new MutableDateSeparatorViewModel({ label: "Today" });
+        render(<DateSeparatorView vm={vm} />);
+
+        expect(screen.getByText("Today", { selector: "h2" })).toBeInTheDocument();
+        vm.setSnapshot({ label: "Yesterday" });
+        await waitFor(() => expect(screen.getByText("Yesterday", { selector: "h2" })).toBeInTheDocument());
+    });
+});
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.tsx b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.tsx
new file mode 100644
index 0000000000..a21bed9f82
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/DateSeparatorView.tsx
@@ -0,0 +1,114 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+import classNames from "classnames";
+import React, { type JSX, useState } from "react";
+
+import { type ViewModel } from "../../viewmodel/ViewModel";
+import { useViewModel } from "../../viewmodel/useViewModel";
+import styles from "./DateSeparatorView.module.css";
+import { Flex } from "../../utils/Flex";
+import { TimelineSeparator } from "../../message-body/TimelineSeparator";
+import { DateSeparatorContextMenuView } from "./DateSeparatorContextMenuView";
+import { DateSeparatorButton } from "./DateSeparatorButton";
+
+export interface DateSeparatorViewSnapshot {
+    /**
+     * Visible date label and the separator's accessible label.
+     */
+    label: string;
+    /**
+     * Controls whether the jump-to menu is rendered.
+     */
+    jumpToEnabled?: boolean;
+    /**
+     * Reference date as input format used to prefill the jump-to-date picker value.
+     */
+    jumpFromDate?: string;
+    /**
+     * Extra CSS classes to apply to the component.
+     */
+    className?: string;
+}
+
+export interface DateSeparatorViewActions {
+    /** Optional: Jump to messages from the last week. */
+    onLastWeekPicked?: () => void;
+    /** Optional: Jump to messages from the last month. */
+    onLastMonthPicked?: () => void;
+    /** Optional: Jump to the beginning of the room history. */
+    onBeginningPicked?: () => void;
+    /** Optional: Jump to the picked date of the room history. */
+    onDatePicked?: (date: string) => void;
+}
+
+/**
+ * The view model for the component.
+ */
+export type DateSeparatorViewModel = ViewModel<DateSeparatorViewSnapshot> & DateSeparatorViewActions;
+
+interface DateSeparatorViewProps {
+    /**
+     * The view model for the component.
+     */
+    vm: DateSeparatorViewModel;
+}
+
+/**
+ * Renders a timeline date separator.
+ * When `jumpToEnabled` is true, wraps the separator label with a jump-to menu trigger.
+ * The tooltip is disabled while the menu is open to avoid overlap.
+ *
+ * @example
+ * ```tsx
+ * <DateSeparatorView vm={vm} />
+ * ```
+ */
+export function DateSeparatorView({ vm }: Readonly<DateSeparatorViewProps>): JSX.Element {
+    const { label, className, jumpToEnabled } = useViewModel(vm);
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [isTriggerHovered, setIsTriggerHovered] = useState(false);
+    const [isTriggerFocused, setIsTriggerFocused] = useState(false);
+    const onMenuOpenChange = (newOpen: boolean): void => {
+        setIsMenuOpen(newOpen);
+        if (newOpen) {
+            setIsTriggerHovered(false);
+            setIsTriggerFocused(false);
+        }
+    };
+
+    if (jumpToEnabled) {
+        return (
+            <TimelineSeparator label={label} className={classNames(className)} role="none">
+                <DateSeparatorContextMenuView
+                    vm={vm}
+                    open={isMenuOpen}
+                    onOpenChange={onMenuOpenChange}
+                    trigger={
+                        <DateSeparatorButton
+                            label={label}
+                            tooltipOpen={!isMenuOpen && (isTriggerHovered || isTriggerFocused)}
+                            className={styles.content}
+                            onMouseEnter={() => setIsTriggerHovered(true)}
+                            onMouseLeave={() => setIsTriggerHovered(false)}
+                            onFocus={(event) => setIsTriggerFocused(event.currentTarget.matches(":focus-visible"))}
+                            onBlur={() => setIsTriggerFocused(false)}
+                        />
+                    }
+                />
+            </TimelineSeparator>
+        );
+    }
+
+    return (
+        <TimelineSeparator label={label} className={classNames(className)}>
+            <Flex className={styles.content}>
+                <h2 aria-hidden="true">{label}</h2>
+            </Flex>
+        </TimelineSeparator>
+    );
+}
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap b/packages/shared-components/src/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap
new file mode 100644
index 0000000000..b29aabf86f
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap
@@ -0,0 +1,138 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DateSeparatorView > renders default story 1`] = `
+<div>
+  <div
+    aria-label="Today"
+    class="flex timelineSeparator"
+    role="separator"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <hr
+      role="none"
+    />
+    <div
+      class="flex content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <h2
+        aria-hidden="true"
+      >
+        Today
+      </h2>
+    </div>
+    <hr
+      role="none"
+    />
+  </div>
+</div>
+`;
+
+exports[`DateSeparatorView > renders long localized label story 1`] = `
+<div>
+  <div
+    aria-label="Wednesday, December 17, 2025 at 11:59 PM Coordinated Universal Time"
+    class="flex timelineSeparator"
+    role="separator"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <hr
+      role="none"
+    />
+    <div
+      class="flex content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <h2
+        aria-hidden="true"
+      >
+        Wednesday, December 17, 2025 at 11:59 PM Coordinated Universal Time
+      </h2>
+    </div>
+    <hr
+      role="none"
+    />
+  </div>
+</div>
+`;
+
+exports[`DateSeparatorView > renders with extra class names 1`] = `
+<div>
+  <div
+    aria-label="Today"
+    class="flex extra_class_1 extra_class_2 timelineSeparator"
+    role="separator"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <hr
+      role="none"
+    />
+    <div
+      class="flex content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <h2
+        aria-hidden="true"
+      >
+        Today
+      </h2>
+    </div>
+    <hr
+      role="none"
+    />
+  </div>
+</div>
+`;
+
+exports[`DateSeparatorView > renders with jump to date picker story 1`] = `
+<div>
+  <div
+    class="flex timelineSeparator"
+    role="none"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <hr
+      aria-hidden="true"
+      data-aria-hidden="true"
+      role="none"
+    />
+    <div
+      aria-controls="radix-_r_1_"
+      aria-expanded="true"
+      aria-haspopup="menu"
+      aria-label="Jump to date"
+      aria-live="off"
+      class="flex content"
+      data-state="open"
+      data-testid="jump-to-date-separator-button"
+      id="radix-_r_0_"
+      role="button"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      tabindex="0"
+      type="button"
+    >
+      <h2
+        aria-hidden="true"
+      >
+        Today
+      </h2>
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+        />
+      </svg>
+    </div>
+    <hr
+      aria-hidden="true"
+      data-aria-hidden="true"
+      role="none"
+    />
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/timeline/DateSeparatorView/index.ts b/packages/shared-components/src/timeline/DateSeparatorView/index.ts
new file mode 100644
index 0000000000..6fcfdb9ea6
--- /dev/null
+++ b/packages/shared-components/src/timeline/DateSeparatorView/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+export { DateSeparatorView, type DateSeparatorViewModel, type DateSeparatorViewSnapshot } from "./DateSeparatorView";
diff --git a/packages/shared-components/src/utils/DateUtils.test.ts b/packages/shared-components/src/utils/DateUtils.test.ts
new file mode 100644
index 0000000000..b4438ae2ba
--- /dev/null
+++ b/packages/shared-components/src/utils/DateUtils.test.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2026 Element 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.
+ */
+
+import { describe, it, expect } from "vitest";
+
+import { formatSeconds, formatDateForInput } from "./DateUtils";
+
+describe("formatSeconds", () => {
+    it("correctly formats time with hours", () => {
+        expect(formatSeconds(60 * 60 * 3 + 60 * 31 + 55)).toBe("03:31:55");
+        expect(formatSeconds(60 * 60 * 3 + 60 * 0 + 55)).toBe("03:00:55");
+        expect(formatSeconds(60 * 60 * 3 + 60 * 31 + 0)).toBe("03:31:00");
+        expect(formatSeconds(-(60 * 60 * 3 + 60 * 31 + 0))).toBe("-03:31:00");
+    });
+
+    it("correctly formats time without hours", () => {
+        expect(formatSeconds(60 * 60 * 0 + 60 * 31 + 55)).toBe("31:55");
+        expect(formatSeconds(60 * 60 * 0 + 60 * 0 + 55)).toBe("00:55");
+        expect(formatSeconds(60 * 60 * 0 + 60 * 31 + 0)).toBe("31:00");
+        expect(formatSeconds(-(60 * 60 * 0 + 60 * 31 + 0))).toBe("-31:00");
+    });
+});
+
+describe("formatDateForInput", () => {
+    it.each([["1993-11-01"], ["1066-10-14"], ["0571-04-22"], ["0062-02-05"]])(
+        "should format %s",
+        (dateString: string) => {
+            expect(formatDateForInput(new Date(dateString))).toBe(dateString);
+        },
+    );
+});
diff --git a/packages/shared-components/src/utils/DateUtils.ts b/packages/shared-components/src/utils/DateUtils.ts
index 146aeecbd2..6df2836d20 100644
--- a/packages/shared-components/src/utils/DateUtils.ts
+++ b/packages/shared-components/src/utils/DateUtils.ts
@@ -33,3 +33,17 @@ export function formatSeconds(inSeconds: number): string {
 
     return output;
 }
+
+/**
+ * Formats dates to be compatible with attributes of a `<input type="date">`. Dates
+ * should be formatted like "2020-06-23" (formatted according to ISO8601).
+ *
+ * @param date The date to format.
+ * @returns The date string in ISO8601 format ready to be used with an `<input>`
+ */
+export function formatDateForInput(date: Date): string {
+    const year = `${date.getFullYear()}`.padStart(4, "0");
+    const month = `${date.getMonth() + 1}`.padStart(2, "0");
+    const day = `${date.getDate()}`.padStart(2, "0");
+    return `${year}-${month}-${day}`;
+}
diff --git a/packages/shared-components/src/utils/humanize.ts b/packages/shared-components/src/utils/humanize.ts
index 1e00e69a9d..b5953c9154 100644
--- a/packages/shared-components/src/utils/humanize.ts
+++ b/packages/shared-components/src/utils/humanize.ts
@@ -53,3 +53,7 @@ export function humanizeTime(timeMillis: number, i18nApi?: I18nApi): string {
         return _t("time|in_n_days", { num: days });
     }
 }
+
+export function humanizeRelativeTime(i18nApi?: I18nApi): Intl.RelativeTimeFormat {
+    return new Intl.RelativeTimeFormat(i18nApi?.language, { style: "long", numeric: "auto" });
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a85653cc9..5ddd735652 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,8 +22,8 @@ catalogs:
       specifier: 6.10.0
       version: 6.10.0
     '@vector-im/compound-web':
-      specifier: 8.3.6
-      version: 8.3.6
+      specifier: 8.4.0
+      version: 8.4.0
     matrix-web-i18n:
       specifier: 3.6.0
       version: 3.6.0
@@ -175,7 +175,7 @@ importers:
         version: 6.10.0(@types/react@19.2.10)(react@19.2.4)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 8.3.6(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.10.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 8.4.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.10.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@vector-im/matrix-wysiwyg':
         specifier: 2.40.0
         version: 2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.4)
@@ -852,7 +852,7 @@ importers:
         version: 8.55.0(eslint@8.57.1)(typescript@5.9.3)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 8.3.6(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.10.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 8.4.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.10.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@vitejs/plugin-react':
         specifier: ^5.1.2
         version: 5.1.4(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
@@ -4604,8 +4604,8 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@8.3.6':
-    resolution: {integrity: sha512-w7jjUJ8dXlLE2Ja/2J8Z433mtra3QF0cHDU5BGVLBBJnT/IwU4vazJRaU61dIOm3OnzDnsDreKcrMtWAUIhQkA==}
+  '@vector-im/compound-web@8.4.0':
+    resolution: {integrity: sha512-xScGP2UP04qxXBCI6D7MfzwfT0w+8k5sepXehaHleLZX0pykdPFeFp+P1WJz2NocQgEnqWIYHrp50kMrYzs0fA==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
@@ -14836,7 +14836,7 @@ snapshots:
       '@types/react': 19.2.10
       react: 19.2.4
 
-  '@vector-im/compound-web@8.3.6(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.10.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@vector-im/compound-web@8.4.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.10.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
       '@floating-ui/react': 0.27.17(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@fontsource/inconsolata': 5.2.8
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 6bfe3e5ef0..21402a0fe4 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -19,7 +19,7 @@ catalog:
     "@element-hq/element-web-module-api": 1.9.1
     # Compound
     "@vector-im/compound-design-tokens": 6.10.0
-    "@vector-im/compound-web": 8.3.6
+    "@vector-im/compound-web": 8.4.0
     # i18n
     matrix-web-i18n: 3.6.0
     # fonts