notifications: Hide out-of-view notification once user scrolls to message.

The banner telling the user to scroll down to the message previously
didn't disappear when the user scrolled past it manually, which is
not ideal.

Keep track of which message is associated with this notification,
and clear the banner when the message scrolls above the bottom of
the viewport.

static/js/message_scroll.js

@@ -9,6 +9,7 @@ import * as message_lists from "./message_lists";
 import * as message_viewport from "./message_viewport";
 import * as narrow_banner from "./narrow_banner";
 import * as narrow_state from "./narrow_state";
+import * as notifications from "./notifications";
 import * as recent_topics_util from "./recent_topics_util";
 import * as unread from "./unread";
 import * as unread_ops from "./unread_ops";
@@ -194,6 +195,15 @@ export function scroll_finished() {
         return;
     }
 
+    if (notifications.scroll_to_message_banner_message_id !== null) {
+        const $message_row = message_lists.current.get_row(
+            notifications.scroll_to_message_banner_message_id,
+        );
+        if ($message_row.length > 0 && !message_viewport.is_message_below_viewport($message_row)) {
+            notifications.clear_compose_notifications();
+        }
+    }
+
     if (update_selection_on_next_scroll) {
         message_viewport.keep_pointer_in_view();
     } else {

static/js/message_viewport.js

@@ -373,6 +373,12 @@ export function recenter_view($message, {from_scroll = false, force_center = fal
     }
 }
 
+export function is_message_below_viewport($message_row) {
+    const info = message_viewport_info();
+    const offset = $message_row.offset();
+    return offset.top >= info.visible_bottom;
+}
+
 export function keep_pointer_in_view() {
     // See message_viewport.recenter_view() for related logic to keep the pointer onscreen.
     // This function mostly comes into place for mouse scrollers, and it

static/js/notifications.js

@@ -163,6 +163,8 @@ export function is_window_focused() {
     return window_focused;
 }
 
+export let scroll_to_message_banner_message_id = null;
+
 export function notify_above_composebox(
     note,
     link_class,
@@ -624,6 +626,7 @@ export function notify_local_mixes(messages, need_user_to_scroll) {
                     link_msg_id,
                     link_text,
                 );
+                scroll_to_message_banner_message_id = link_msg_id;
             }
 
             // This is the HAPPY PATH--for most messages we do nothing
@@ -686,6 +689,7 @@ export function clear_compose_notifications() {
     $("#out-of-view-notification").empty();
     $("#out-of-view-notification").stop(true, true);
     $("#out-of-view-notification").hide();
+    scroll_to_message_banner_message_id = null;
 }
 
 export function reify_message_id(opts) {
@@ -700,6 +704,7 @@ export function reify_message_id(opts) {
 
         if (message_id === old_id) {
             $elem.data("message-id", new_id);
+            scroll_to_message_banner_message_id = new_id;
         }
     }
 }
@@ -715,7 +720,7 @@ export function register_click_handlers() {
         const message_id = $(e.currentTarget).data("message-id");
         message_lists.current.select_id(message_id);
         navigate.scroll_to_selected();
-        $("#out-of-view-notification").hide();
+        clear_compose_notifications();
         e.stopPropagation();
         e.preventDefault();
     });