Render timeline separator for late event groups (#11739)

* Use Compound tooltips on MessageTimestamp to improve UX of date time discovery

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Show io.element.late_event in MessageTimestamp when known

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Avoid needing new Compound changes

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Move groupers into their own directory

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Refactor date separator code to be more generic

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Render timeline separator for late event groups

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix date used in copy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Move groupers into their own directory

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update copy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update copy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* i18n

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add comments

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add comments

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

test/components/structures/__snapshots__/MessagePanel-test.tsx.snap

@@ -40,7 +40,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
         >
           <div
             aria-label="Thu, Jan 1, 1970"
-            class="mx_DateSeparator"
+            class="mx_TimelineSeparator"
             role="separator"
           >
             <hr

test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap

@@ -46,7 +46,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
             <li>
               <div
                 aria-label="Thu, Jan 1, 1970"
-                class="mx_DateSeparator"
+                class="mx_TimelineSeparator"
                 role="separator"
               >
                 <hr
@@ -162,7 +162,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
             <li>
               <div
                 aria-label="Thu, Jan 1, 1970"
-                class="mx_DateSeparator"
+                class="mx_TimelineSeparator"
                 role="separator"
               >
                 <hr

test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap

@@ -4,7 +4,7 @@ exports[`DateSeparator renders the date separator correctly 1`] = `
 <DocumentFragment>
   <div
     aria-label="today"
-    class="mx_DateSeparator"
+    class="mx_TimelineSeparator"
     role="separator"
   >
     <hr
@@ -31,7 +31,7 @@ exports[`DateSeparator when feature_jump_to_date is enabled renders the date sep
 <DocumentFragment>
   <div
     aria-label="Fri, Dec 17, 2021"
-    class="mx_DateSeparator"
+    class="mx_TimelineSeparator"
     role="separator"
   >
     <hr

test/components/views/rooms/SearchResultTile-test.tsx

@@ -98,7 +98,7 @@ describe("SearchResultTile", () => {
             ),
         });
 
-        const separators = container.querySelectorAll(".mx_DateSeparator");
+        const separators = container.querySelectorAll(".mx_TimelineSeparator");
         // One separator is always rendered at the top, we don't want any
         // between messages.
         expect(separators.length).toBe(1);