message_feed_ui: Remove group date dividers.

This commit removes the group date dividers from the message feed UI,
leaving only the dividers between individual messages. These are
considered unecessary as the recipient bar displays the date.

The change concerns message_list_view.js along with the templates
message_group.hbs and recipient_row.hbs.

Fixes #22966.

frontend_tests/node_tests/message_list_view.js

@@ -514,7 +514,7 @@ test("merge_message_groups", () => {
         const list = build_list([message_group1]);
         const result = list.merge_message_groups([message_group2], "bottom");
 
-        assert.ok(!message_group2.group_date_divider_html);
+        assert.ok(!message_group2.group_date_html);
         assert_message_groups_list_equal(list._message_groups, [message_group1, message_group2]);
         assert_message_groups_list_equal(result.append_groups, [message_group2]);
         assert.deepEqual(result.prepend_groups, []);
@@ -537,7 +537,7 @@ test("merge_message_groups", () => {
         assert.deepEqual(result.prepend_groups, []);
         assert.deepEqual(result.rerender_groups, []);
         assert.deepEqual(result.append_messages, []);
-        assert.equal(message_group2.group_date_divider_html, "900000000");
+        assert.equal(message_group2.group_date_html, "900000000");
     })();
 
     (function test_append_message_different_day() {
@@ -644,8 +644,7 @@ test("merge_message_groups", () => {
         const list = build_list([message_group1]);
         const result = list.merge_message_groups([message_group2], "top");
 
-        // We should have a group date divider between the recipient blocks.
-        assert.equal(message_group1.group_date_divider_html, "900000000");
+        assert.equal(message_group1.group_date_html, "900000000");
         assert_message_groups_list_equal(list._message_groups, [message_group2, message_group1]);
         assert.deepEqual(result.append_groups, []);
         assert_message_groups_list_equal(result.prepend_groups, [message_group2]);
@@ -663,7 +662,6 @@ test("merge_message_groups", () => {
         const list = build_list([message_group1]);
         const result = list.merge_message_groups([message_group2], "top");
 
-        // We should have a group date divider within the single recipient block.
         assert.equal(message_group2.message_containers[1].date_divider_html, "900000000");
         assert_message_groups_list_equal(list._message_groups, [message_group2]);
         assert.deepEqual(result.append_groups, []);

static/js/message_list_view.js

@@ -111,28 +111,18 @@ function render_group_display_date(group, message_container) {
     group.date = date_element.outerHTML;
 }
 
-function update_group_date_divider(group, message_container, prev) {
+function update_group_date(group, message_container, prev) {
     const time = new Date(message_container.msg.timestamp * 1000);
     const today = new Date();
 
-    // TODO: investigate
-    if (prev !== undefined) {
-        const prev_time = new Date(prev.msg.timestamp * 1000);
-        if (!isSameDay(time, prev_time)) {
-            // NB: group_date_divider_html is HTML, inserted into the document without escaping.
-            group.group_date_divider_html = timerender.render_date(time, today)[0].outerHTML;
-            group.show_group_date_divider = true;
-        }
-    } else {
-        // Show the date in the recipient bar, but not a date separator bar.
-        group.show_group_date_divider = false;
-        group.group_date_divider_html = timerender.render_date(time, today)[0].outerHTML;
-    }
+    // Show the date in the recipient bar if the previous message was from a different day.
+    group.show_recipient_bar_date = !same_day(message_container, prev);
+    group.group_date_html = timerender.render_date(time, today)[0].outerHTML;
 }
 
-function clear_group_date_divider(group) {
-    group.show_group_date_divider = false;
-    group.group_date_divider_html = undefined;
+function clear_group_date(group) {
+    group.show_recipient_bar_date = true;
+    group.group_date_html = undefined;
 }
 
 function clear_message_date_divider(msg) {
@@ -483,7 +473,7 @@ export class MessageListView {
                 current_group = start_group();
                 add_message_container_to_group(message_container);
 
-                update_group_date_divider(current_group, message_container, prev);
+                update_group_date(current_group, message_container, prev);
                 clear_message_date_divider(message_container);
 
                 message_container.include_recipient = true;
@@ -631,7 +621,7 @@ export class MessageListView {
                 !same_day(second_group.message_containers[0], first_group.message_containers[0])
             ) {
                 // The groups did not merge, so we need up update the date row for the old group
-                update_group_date_divider(second_group, curr_msg_container, prev_msg_container);
+                update_group_date(second_group, curr_msg_container, prev_msg_container);
                 // We could add an action to update the date row, but for now rerender the group.
                 message_actions.rerender_groups.push(second_group);
             }
@@ -644,11 +634,11 @@ export class MessageListView {
                 new_message_groups = new_message_groups.slice(1);
             } else if (first_group !== undefined && second_group !== undefined) {
                 if (same_day(prev_msg_container, curr_msg_container)) {
-                    clear_group_date_divider(second_group);
+                    clear_group_date(second_group);
                 } else {
                     // If we just sent the first message on a new day
-                    // in a narrow, make sure we render a date separator.
-                    update_group_date_divider(second_group, curr_msg_container, prev_msg_container);
+                    // in a narrow, make sure we render a date.
+                    update_group_date(second_group, curr_msg_container, prev_msg_container);
                 }
             }
             message_actions.append_groups = new_message_groups;

static/templates/message_group.hbs

@@ -2,10 +2,6 @@
 
 {{#each message_groups}}
     {{#with this}}
-        {{#if show_group_date_divider}}
-        <div class="date_row no-select">{{{group_date_divider_html}}}</div>
-        {{/if}}
-
         {{#if bookend_top}}
         {{> bookend}}
         {{/if}}

static/templates/recipient_row.hbs

@@ -77,7 +77,7 @@
                     </template>
                 {{/if}}
             </span>
-            <span class="recipient_row_date {{#if group_date_divider_html}}{{else}}hide-date{{/if}}">{{{date}}}</span>
+            <span class="recipient_row_date {{#if show_recipient_bar_date}}{{else}}hide-date{{/if}}">{{{date}}}</span>
         </div>
     </div>
 </div>
@@ -91,7 +91,7 @@
                 {{#tr}}You and {display_reply_to}{{/tr}}
             </a>
 
-            <span class="recipient_row_date {{#if group_date_divider_html}}{{else}}hide-date{{/if}}">{{{date}}}</span>
+            <span class="recipient_row_date {{#if show_recipient_bar_date}}{{else}}hide-date{{/if}}">{{{date}}}</span>
         </div>
     </div>
 </div>