mark as read: Fix banner not closing when x is clicked.

Previously, the X in the mark-as-read banner did nothing.

frontend_tests/node_tests/narrow_activate.js

@@ -4,6 +4,7 @@ const {strict: assert} = require("assert");
 
 const {mock_esm, set_global, zrequire} = require("../zjsunit/namespace");
 const {run_test} = require("../zjsunit/test");
+const $ = require("../zjsunit/zjquery");
 
 mock_esm("../../static/js/resize", {
     resize_stream_filters_container: () => {},
@@ -93,6 +94,8 @@ function test_helper() {
     stub(unread_ops, "process_visible");
     stub(compose_closed_ui, "update_buttons_for_stream");
     stub(compose_closed_ui, "update_buttons_for_private");
+    // We don't test the css calls; we just skip over them.
+    $("#mark_as_read_turned_off_banner").toggleClass = () => {};
 
     return {
         clear: () => {

frontend_tests/node_tests/recent_topics.js

@@ -351,6 +351,8 @@ test("test_recent_topics_show", ({mock_template, override}) => {
     mock_template("recent_topic_row.hbs", false, () => {});
 
     stub_out_filter_buttons();
+    // We don't test the css calls; we just skip over them.
+    $("#mark_as_read_turned_off_banner").toggleClass = () => {};
 
     rt.clear_for_tests();
     rt.process_messages(messages);

static/js/narrow.js

@@ -162,7 +162,7 @@ export function reset_ui_state() {
     narrow_banner.hide_empty_narrow_message();
     message_scroll.hide_top_of_narrow_notices();
     message_scroll.hide_indicators();
-    unread_ui.hide_mark_as_read_turned_off_banner();
+    unread_ui.reset_mark_as_read_turned_off_banner();
 }
 
 export function handle_middle_pane_transition() {

static/js/unread_ui.js

@@ -14,9 +14,22 @@ import * as unread from "./unread";
 import {notify_server_messages_read} from "./unread_ops";
 
 let last_mention_count = 0;
-
+let user_closed_mark_as_read_turned_off_banner = false;
 export function hide_mark_as_read_turned_off_banner() {
-    $("#mark_as_read_turned_off_banner").hide();
+    // Use visibility instead of hide() to prevent messages on the screen from
+    // shifting vertically.
+    $("#mark_as_read_turned_off_banner").toggleClass("invisible", true);
+}
+
+export function reset_mark_as_read_turned_off_banner() {
+    hide_mark_as_read_turned_off_banner();
+    user_closed_mark_as_read_turned_off_banner = false;
+}
+
+export function notify_messages_remain_unread() {
+    if (!user_closed_mark_as_read_turned_off_banner) {
+        $("#mark_as_read_turned_off_banner").toggleClass("invisible", false);
+    }
 }
 
 function do_new_messages_animation($li) {
@@ -97,15 +110,11 @@ export function should_display_bankruptcy_banner() {
     return false;
 }
 
-export function notify_messages_remain_unread() {
-    $("#mark_as_read_turned_off_banner").show();
-}
-
 export function initialize() {
     update_unread_counts();
 
     $("#mark_as_read_turned_off_banner").html(render_mark_as_read_turned_off_banner());
-    $("#mark_as_read_turned_off_banner").hide();
+    hide_mark_as_read_turned_off_banner();
     $("#mark_view_read").on("click", () => {
         // Mark all messages in the current view as read.
         //
@@ -117,6 +126,10 @@ export function initialize() {
             .filter((message) => unread.message_unread(message));
         notify_server_messages_read(unread_messages);
 
-        $("#mark_as_read_turned_off_banner").hide();
+        hide_mark_as_read_turned_off_banner();
+    });
+    $("#mark_as_read_close").on("click", () => {
+        hide_mark_as_read_turned_off_banner();
+        user_closed_mark_as_read_turned_off_banner = true;
     });
 }