message feed: Notify user when messages are not being marked as read.

Notifies user when messages are not being marked as read through a
banner that lets them mark all messages in the narrow as read. Note
that the banner is only displayed if the user's actions, like
scrolling, would've actually marked the messages as read.

This avoids distracting the user when viewing a thread they've already
read.

tabbott has verified that if new messages come in, the banner will reappear.

Fixes: #18768.

frontend_tests/node_tests/example7.js

@@ -114,6 +114,7 @@ run_test("unread_ops", ({override, override_rewire}) => {
     override(message_lists.home, "show_message_as_read", () => {});
     override(notifications, "close_notification", () => {});
     override(unread_ui, "update_unread_counts", () => {});
+    override(unread_ui, "notify_messages_remain_unread", () => {});
 
     // Set up a way to capture the options passed in to channel.post.
     let channel_post_opts;
@@ -127,6 +128,7 @@ run_test("unread_ops", ({override, override_rewire}) => {
     // toggle it easily from within the test (and avoid complicated
     // data setup).
     override(message_lists.current, "can_mark_messages_read", () => can_mark_messages_read);
+    override(message_lists.current, "has_unread_messages", () => true);
 
     // First, test for a message list that cannot read messages.
     can_mark_messages_read = false;

frontend_tests/node_tests/recent_topics.js

@@ -99,6 +99,7 @@ mock_esm("../../static/js/muted_topics", {
 });
 mock_esm("../../static/js/narrow", {
     set_narrow_title: noop,
+    hide_mark_as_read_turned_off_banner: noop,
 });
 mock_esm("../../static/js/recent_senders", {
     get_topic_recent_senders: () => [1, 2],