drafts: Show saved time in UTC format in a tooltip.

web/src/drafts.ts

@@ -663,6 +663,27 @@ export function initialize(): void {
     window.addEventListener("beforeunload", () => {
         update_draft();
     });
+
+    // Show exact time when draft was saved in UTC format.
+    tippy.delegate("body", {
+        target: ".drafts-list .recipient_row_date",
+        appendTo: () => document.body,
+        delay: [750, 20], // LONG_HOVER_DELAY
+        onShow(instance) {
+            const $time_elem = $(instance.reference);
+            const $row = $time_elem.closest(".overlay-message-row");
+            const draft_id = $row.attr("data-draft-id");
+            assert(typeof draft_id === "string");
+            const draft = draft_model.getDraft(draft_id);
+            if (draft) {
+                const time = new Date(draft.updatedAt);
+                instance.setContent(timerender.get_full_datetime_clarification(time));
+            }
+        },
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
 }
 
 export function initialize_ui(): void {

web/templates/draft.hbs

@@ -20,7 +20,7 @@
                     </div>
                 </span>
                 <span class="recipient_bar_controls"></span>
-                <div class="recipient_row_date" title="{{t 'Last modified'}}">{{ time_stamp }}</div>
+                <div class="recipient_row_date">{{ time_stamp }}</div>
             </div>
         </div>
         {{else}}
@@ -30,7 +30,7 @@
                     <span class="private_message_header_icon"><i class="zulip-icon zulip-icon-user"></i></span>
                     <span class="private_message_header_name">{{t "You and {recipients}" }}</span>
                 </div>
-                <div class="recipient_row_date" title="{{t 'Last modified'}}">{{ time_stamp }}</div>
+                <div class="recipient_row_date">{{ time_stamp }}</div>
             </div>
         </div>
         {{/if}}

web/tests/drafts.test.js

@@ -56,6 +56,7 @@ mock_esm("tippy.js", {
             },
         ];
     },
+    delegate: noop,
 });
 user_settings.twenty_four_hour_time = false;