Refactor TimelineSeparator to shared-components #31797

ZacksBot · 2026-01-20T08:33:49Z

Checklist

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

Refactor TimelineSeparator to shared-components

Summary

Moved TimelineSeparator component to @element-hq/web-shared-components package as TimelineSeparatorView
Adopted the ViewModel pattern (MVVM) for the component, introducing TimelineSeparatorViewSnapshot interface
Moved SeperatorKind from TimelineSeparator to MessagePanel.tsx

Changes

New shared component

Added TimelineSeparatorView under packages/shared-components/src/message-body/TimelineSeparator/ with:

View component using useViewModel hook
CSS module for styling
Storybook stories for visual testing
Unit tests with snapshot coverage

Codebase migration

MessagePanel.tsx: Updated late event separator to use TimelineSeparatorView
DateSeparator.tsx: Now renders TimelineSeparatorView instead of the old component
CreationGrouper.tsx / MainGrouper.tsx: Updated SeparatorKind imports to use MessagePanel.tsx

Test plan

Verify timeline separators render correctly in rooms
Verify date separators display proper labels (Today, Yesterday, dates)
Verify late event separators appear when expected
Run existing unit tests: npm test -- --testPathPatterns="TimelineSeparatorView" -u
Check Storybook stories render correctly

Tests

Before & After

Before Refactoring

After Refactoring

…up imports

…remove unused type export

CLAassistant · 2026-01-20T08:33:56Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

src/components/views/messages/DateSeparator.tsx

florianduros

Good first PR!

The PR is missing the view model. MockedViewModel is only for testing. We should create new view model class for TimelineSeparator

src/components/views/messages/DateSeparator.tsx

src/components/structures/MessagePanel.tsx

packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparatorView.tsx

packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparatorView.stories.tsx

packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparatorView.test.tsx

packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparatorView.tsx

packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparatorView.module.css

packages/shared-components/src/message-body/TimelineSeparator/index.ts

…index.ts Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

…TimelineSeparatorView.module.css Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

…TimelineSeparatorView.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

…TimelineSeparatorView.test.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

…TimelineSeparatorView.stories.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

…TimelineSeparatorView.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

…t separators

…odel class

…props, and enhance type definitions

ZacksBot · 2026-01-21T07:37:42Z

packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparatorView.tsx

+ * TimelineSeparatorView component renders a visual separator inside the message timeline.
+ * It draws horizontal rules with an accessible label and optional children rendered between them.
+ *
+ * @param label the accessible label string describing the separator (used for `aria-label`)
+ * @param children optional React nodes to render between the separators
+ * 
+ */


@florianduros Does this look better? If not, what do you suggest?

ZacksBot · 2026-01-21T07:39:40Z

packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparatorView.module.css

+
+.timelineSeparator {
+    clear: both;
+    margin: var(--cpdSpace1X, var(--cpdSpace0X));


packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparatorView.tsx

… type definition of children

ZacksBot · 2026-01-21T07:42:24Z

packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparatorView.tsx

+    /**
+     * Optional children to render inside the timeline separator
+     */
+    children?: PropsWithChildren["children"];


Would it be fine using ["children"];

ZacksBot · 2026-01-21T07:43:11Z

packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparatorView.tsx

+
+    // Keep mx_TimelineSeparator to support the compatibility with existing timeline and the all the layout
+    return (
+        <div className={classNames("mx_TimelineSeparator", styles.timelineSeparator)} role="separator" aria-label={label}>


{classNames("mx_TimelineSeparator", styles.timelineSeparator)}

I would like to hear your opinion regarding this, this is like to comment says, to "Keep mx_TimelineSeparator to support the compatibility with existing timeline and the all the layout"

…Children for improved type safety of children

ZacksBot · 2026-01-21T08:01:24Z

src/components/views/messages/DateSeparator.tsx

+interface TimeLineSeperatorBodyWrapper {
+    label: string;
+    children?: ReactNode;
+}
+
+function TimeLineSeperatorBodyWrapper({ label, children }: TimeLineSeperatorBodyWrapper): JSX.Element {
+    const dateSeperatorVM = useCreateAutoDisposedViewModel(() => new TimelineSeparatorViewModel({ label, children }));
+    return <TimelineSeparatorView vm={dateSeperatorVM} />;
+}


Can these be placed at the bottom? I found a similar file where these were located at the bottom, which is why I placed them there. I suggest moving them up and adding a comment.

ZacksBot added 10 commits January 20, 2026 09:31

Refactoring of timeline stamp, move it to shared components

a9b0abf

Fix position of the import based on lint recommendations.

026a027

Use TimelineSeparatorView from shared-components across codebase

51a2480

Restore snapshots to correct starting values in classname

fb786f5

Remove unnecessary export type

8ac830f

updated copyright date to fit current year

cf8741f

Add stories and tests for TimelineSeparatorView variants

1340a62

Refactor TimelineSeparatorView: remove SeparatorKind usage and clean …

1149289

…up imports

Refactor TimelineSeparator: simplify children prop documentation and …

790ae5f

…remove unused type export

Update of jest snapshot (auto generated after running test)

0b8b5e8

ZacksBot requested a review from a team as a code owner January 20, 2026 08:33

ZacksBot requested review from florianduros and t3chguy January 20, 2026 08:33

github-actions bot added the Z-Community-PR Issue is solved by a community member's PR label Jan 20, 2026

ZacksBot commented Jan 20, 2026

View reviewed changes

src/components/views/messages/DateSeparator.tsx Outdated Show resolved Hide resolved

florianduros requested changes Jan 20, 2026

View reviewed changes

florianduros added the T-Task Tasks for the team like planning label Jan 20, 2026

github-actions bot deployed to Netlify January 20, 2026 09:48 View deployment

github-actions bot deployed to EndToEndTests January 20, 2026 10:00 View deployment

ZacksBot and others added 10 commits January 20, 2026 12:35

Update packages/shared-components/src/message-body/TimelineSeparator/…

5f34279

…index.ts Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

Update packages/shared-components/src/message-body/TimelineSeparator/…

021c699

…TimelineSeparatorView.module.css Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

Update packages/shared-components/src/message-body/TimelineSeparator/…

5597f78

…TimelineSeparatorView.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

Update packages/shared-components/src/message-body/TimelineSeparator/…

3b9a304

…TimelineSeparatorView.test.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

Update packages/shared-components/src/message-body/TimelineSeparator/…

ea77d3b

…TimelineSeparatorView.stories.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

Update packages/shared-components/src/message-body/TimelineSeparator/…

bb0a19e

…TimelineSeparatorView.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

Enhance SeparatorKind enum documentation for clarity on timeline even…

3b7868e

…t separators

Merge branch 'develop' into refactor/timeline-separator

2d3908a

Refactor TimelineSeparator integration and add TimelineSeparatorViewM…

9274256

…odel class

ZacksBot added 2 commits January 20, 2026 16:20

Refactor TimelineSeparator styles and update class names for css

a06a41d

Refactor TimelineSeparator component: update margin styles, simplify …

8b55a91

…props, and enhance type definitions

ZacksBot commented Jan 21, 2026

View reviewed changes

packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparatorView.tsx Outdated Show resolved Hide resolved

Refactor TimelineSeparatorView: import PropsWithChildren for improved…

b4563c6

… type definition of children

ZacksBot commented Jan 21, 2026

View reviewed changes

Refactor TimelineSeparatorViewModel: replace ReactNode with PropsWith…

43f7f27

…Children for improved type safety of children

ZacksBot commented Jan 21, 2026

View reviewed changes

ZacksBot requested a review from florianduros January 21, 2026 08:33

github-actions bot deployed to Netlify January 26, 2026 10:29 View deployment

github-actions bot deployed to EndToEndTests January 26, 2026 10:41 View deployment

Uh oh!

Refactor TimelineSeparator to shared-components #31797

Are you sure you want to change the base?

Refactor TimelineSeparator to shared-components #31797

Conversation

ZacksBot commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Refactor TimelineSeparator to shared-components

Summary

Changes

New shared component

Codebase migration

Test plan

Tests

Before & After

Uh oh!

CLAassistant commented Jan 20, 2026

Uh oh!

Uh oh!

florianduros left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ZacksBot Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

ZacksBot Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ZacksBot Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

ZacksBot Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

ZacksBot Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ZacksBot commented Jan 20, 2026 •

edited

Loading