message_feed: Improve edited/moved tooltip.

This commit improves the edited/moved tippy tooltip to now include a
second italic line: "Click to view history" This line is visible
only when 'realm_allow_edit_history' is true for any organization
settings. Additionally, the first line is changed to display
"Last edited today at 00:00 AM" The date is in lowercase if it
doesn't contain a number for example 'today' unless the first
alphabet is uppercase.

'tippy-zulip-delayed-tooltip' was used as a common class to
implement tippy tooltips in addition to other elements in the
'edited_notice.hbs' file. However, now we need to make some
changes in tippyjs inside the onShow function to decide whether
to show the second line of a tooltip or not. Therefore, we need
to use a unique class for the edited_notice tooltips. Hence, removed
the 'tippy-zulip-delayed-tooltip' class from the edited_notice.hbs
file and used the 'message_edit_notice' class instead.

Fixes: #23075

web/src/message_list_tooltips.js

@@ -1,11 +1,13 @@
 import $ from "jquery";
 import {delegate} from "tippy.js";
 
+import render_message_edit_notice_tooltip from "../templates/message_edit_notice_tooltip.hbs";
 import render_message_inline_image_tooltip from "../templates/message_inline_image_tooltip.hbs";
 import render_narrow_tooltip from "../templates/narrow_tooltip.hbs";
 
 import {$t} from "./i18n";
 import * as message_lists from "./message_lists";
+import {page_params} from "./page_params";
 import * as reactions from "./reactions";
 import * as rows from "./rows";
 import * as timerender from "./timerender";
@@ -234,4 +236,34 @@ export function initialize() {
             instance.destroy();
         },
     });
+
+    message_list_tooltip(".message_edit_notice", {
+        trigger: "mouseenter",
+        delay: LONG_HOVER_DELAY,
+        popperOptions: {
+            modifiers: [
+                {
+                    name: "flip",
+                    options: {
+                        fallbackPlacements: "bottom",
+                    },
+                },
+            ],
+        },
+        onShow(instance) {
+            const $elem = $(instance.reference);
+            const edited_notice_str = $elem.attr("data-tippy-content");
+            instance.setContent(
+                parse_html(
+                    render_message_edit_notice_tooltip({
+                        edited_notice_str,
+                        realm_allow_edit_history: page_params.realm_allow_edit_history,
+                    }),
+                ),
+            );
+        },
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
 }

web/src/message_list_view.js

@@ -287,10 +287,17 @@ export class MessageListView {
         if (last_edit_timestamp !== undefined) {
             const last_edit_time = new Date(last_edit_timestamp * 1000);
             const today = new Date();
+            let date = timerender.render_date(last_edit_time, today)[0].textContent;
+            // If the date is today or yesterday, we don't want to show the date as capitalized.
+            // Thus, we need to check if the date string contains a digit or not using regex,
+            // since any other date except today/yesterday will contain a digit.
+            if (date && !/\d/.test(date)) {
+                date = date.toLowerCase();
+            }
             return $t(
                 {defaultMessage: "{date} at {time}"},
                 {
-                    date: timerender.render_date(last_edit_time, today)[0].textContent,
+                    date,
                     time: timerender.stringify_time(last_edit_time),
                 },
             );

web/templates/edited_notice.hbs

@@ -1,13 +1,13 @@
 {{#if msg/local_edit_timestamp}}
-<div class="message_edit_notice auto-select tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Edited ({last_edit_timestr})' }}">
+<div class="message_edit_notice auto-select" data-tippy-content="{{t 'Last edited {last_edit_timestr}' }}">
     {{t "SAVING" }}
 </div>
 {{else if moved}}
-<div class="message_edit_notice auto-select tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Moved ({last_edit_timestr})' }}">
+<div class="message_edit_notice auto-select" data-tippy-content="{{t 'Last moved {last_edit_timestr}' }}">
     {{t "MOVED" }}
 </div>
 {{else}}
-<div class="message_edit_notice auto-select tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Edited ({last_edit_timestr})' }}">
+<div class="message_edit_notice auto-select" data-tippy-content="{{t 'Last edited {last_edit_timestr}' }}">
     {{t "EDITED" }}
 </div>
 {{/if}}

web/templates/message_edit_notice_tooltip.hbs

@@ -0,0 +1,6 @@
+<div>
+    <div>{{edited_notice_str}}</div>
+    {{#if realm_allow_edit_history}}
+        <i>{{t 'Click to view edit history.' }}</i>
+    {{/if}}
+</div>