Refactor Timeline Seperator (#31937)

* Refactor TimelineSeparator to shared-components package

  • New TimelineSeparator component in packages/shared-components/
  • Updated MessagePanel.tsx to import from shared-components

* Fix copyright text

* Timeline Unit Tests + Timeline Snapshot Tests

* Imported correct timeline seperator

* Update snapshots because of css update

* Apply suggestion from @florianduros

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

* Created className prop

* Removal of element x unused css

* Update snapshot because of Flex

* Update snapshots because of Flex

* Update css to correct values and compund name

* Added letter spacing to timelineseperator

* rremoval of letter spacing

* added align center to flex to apply correct css changes

* Update snapshots to reflect new css changes

* Update snapshots to reflect css changes

* Added letter-spacing to timeline seperator

* Update snapshots after css update

* update snapshots

---------

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

src/components/structures/MessagePanel.tsx

@@ -18,6 +18,7 @@ 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 shouldHideEvent from "../../shouldHideEvent";
 import { formatDate, wantsDateSeparator } from "../../DateUtils";
@@ -37,7 +38,6 @@ import type LegacyCallEventGrouper from "./LegacyCallEventGrouper";
 import WhoIsTypingTile from "../views/rooms/WhoIsTypingTile";
 import ScrollPanel, { type IScrollState } from "./ScrollPanel";
 import DateSeparator from "../views/messages/DateSeparator";
-import TimelineSeparator, { SeparatorKind } from "../views/messages/TimelineSeparator";
 import ErrorBoundary from "../views/elements/ErrorBoundary";
 import Spinner from "../views/elements/Spinner";
 import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
@@ -57,6 +57,18 @@ import { getLateEventInfo } from "./grouper/LateEventGrouper";
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
 
+/**
+ * Indicates which separator (if any) should be rendered between timeline events.
+ */
+export const enum SeparatorKind {
+    /** No separator should be shown between the two events. */
+    None,
+    /** Insert a date separator (oriented by event date boundaries). */
+    Date,
+    /** Insert a late-event separator when events belong to different late groups. */
+    LateEvent,
+}
+
 // check if there is a previous event and it has the same sender as this event
 // and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL
 export function shouldFormContinuation(
@@ -756,7 +768,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                 });
                 ret.push(
                     <li key={ts1}>
-                        <TimelineSeparator key={ts1} label={text}>
+                        <TimelineSeparator key={ts1} label={text} className="mx_TimelineSeparator">
                             {text}
                         </TimelineSeparator>
                     </li>,

src/components/structures/grouper/CreationGrouper.tsx

@@ -11,14 +11,13 @@ import { EventType, M_BEACON_INFO, type MatrixEvent } from "matrix-js-sdk/src/ma
 import { KnownMembership } from "matrix-js-sdk/src/types";
 
 import { BaseGrouper } from "./BaseGrouper";
-import { type WrappedEvent } from "../MessagePanel";
+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 { SeparatorKind } from "../../views/messages/TimelineSeparator";
 
 // 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

src/components/structures/grouper/MainGrouper.tsx

@@ -10,14 +10,13 @@ import React, { type ReactNode } from "react";
 import { EventType, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import type MessagePanel from "../MessagePanel";
-import type { WrappedEvent } 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 { SeparatorKind } from "../../views/messages/TimelineSeparator";
 
 const groupedStateEvents = [
     EventType.RoomMember,

src/components/views/messages/DateSeparator.tsx

@@ -12,6 +12,7 @@ import { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sd
 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";
@@ -32,7 +33,6 @@ import IconizedContextMenu, {
 } from "../context_menus/IconizedContextMenu";
 import JumpToDatePicker from "./JumpToDatePicker";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import TimelineSeparator from "./TimelineSeparator";
 import RoomContext from "../../../contexts/RoomContext";
 
 interface IProps {
@@ -335,6 +335,10 @@ export default class DateSeparator extends React.Component<IProps, IState> {
             );
         }
 
-        return <TimelineSeparator label={label}>{dateHeaderContent}</TimelineSeparator>;
+        return (
+            <TimelineSeparator label={label} className="mx_TimelineSeparator">
+                {dateHeaderContent}
+            </TimelineSeparator>
+        );
     }
 }

src/components/views/messages/TimelineSeparator.tsx

@@ -1,39 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 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, { type ReactNode } from "react";
-
-interface Props {
-    label: string;
-    children?: ReactNode;
-}
-
-export const enum SeparatorKind {
-    None,
-    Date,
-    LateEvent,
-}
-
-/**
- * Generic timeline separator component to render within a MessagePanel
- *
- * @param label the accessible label string describing the separator
- * @param children the children to draw within the timeline separator
- */
-const TimelineSeparator: React.FC<Props> = ({ label, children }) => {
-    // ARIA treats <hr/>s as separators, here we abuse them slightly so manually treat this entire thing as one
-    return (
-        <div className="mx_TimelineSeparator" role="separator" aria-label={label}>
-            <hr role="none" />
-            {children}
-            <hr role="none" />
-        </div>
-    );
-};
-
-export default TimelineSeparator;