From dd95f79ab70ad5241e271dc0993a9ac17514c9b8 Mon Sep 17 00:00:00 2001
From: evykassirer <evy.kassirer@gmail.com>
Date: Wed, 1 Feb 2023 15:44:34 -0800
Subject: [PATCH] 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   | 10 ++++++++++
 static/js/message_viewport.js |  6 ++++++
 static/js/notifications.js    |  7 ++++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/static/js/message_scroll.js b/static/js/message_scroll.js
index 97f426e463..71bbddb40b 100644
--- a/static/js/message_scroll.js
+++ b/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 {
diff --git a/static/js/message_viewport.js b/static/js/message_viewport.js
index 3d243d613b..25d3d00261 100644
--- a/static/js/message_viewport.js
+++ b/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
diff --git a/static/js/notifications.js b/static/js/notifications.js
index cf66b6dfc8..b44755c88a 100644
--- a/static/js/notifications.js
+++ b/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();
     });