unread: Indicate which streams have unread @-mentions.

Fixes part of #21637.

Co-authored-by: Tim Abbott <tabbott@zulip.com>

static/js/stream_list.js

@@ -32,13 +32,17 @@ export let stream_cursor;
 
 let has_scrolled = false;
 
-export function update_count_in_dom($stream_li, count) {
+export function update_count_in_dom($stream_li, count, stream_has_any_unread_mention_messages) {
     // The subscription_block properly excludes the topic list,
     // and it also has sensitive margins related to whether the
     // count is there or not.
     const $subscription_block = $stream_li.find(".subscription_block");
 
     ui_util.update_unread_count_in_dom($subscription_block, count);
+    ui_util.update_unread_mention_info_in_dom(
+        $subscription_block,
+        stream_has_any_unread_mention_messages,
+    );
 
     if (count === 0) {
         $subscription_block.removeClass("stream-with-count");
@@ -335,7 +339,10 @@ class StreamSidebarRow {
 
     update_unread_count() {
         const count = unread.num_unread_for_stream(this.sub.stream_id);
-        update_count_in_dom(this.$list_item, count);
+        const stream_has_any_unread_mention_messages = unread.stream_has_any_unread_mention(
+            this.sub.stream_id,
+        );
+        update_count_in_dom(this.$list_item, count, stream_has_any_unread_mention_messages);
     }
 }
 
@@ -374,15 +381,15 @@ export function redraw_stream_privacy(sub) {
     $div.html(html);
 }
 
-function set_stream_unread_count(stream_id, count) {
+function set_stream_unread_count(stream_id, count, stream_has_any_unread_mention_messages) {
     const $stream_li = get_stream_li(stream_id);
     if (!$stream_li) {
         // This can happen for legitimate reasons, but we warn
         // just in case.
         blueslip.warn("stream id no longer in sidebar: " + stream_id);
         return;
     }
-    update_count_in_dom($stream_li, count);
+    update_count_in_dom($stream_li, count, stream_has_any_unread_mention_messages);
 }
 
 export function update_streams_sidebar(force_rerender) {
@@ -402,7 +409,9 @@ export function update_streams_sidebar(force_rerender) {
 export function update_dom_with_unread_counts(counts) {
     // counts.stream_count maps streams to counts
     for (const [stream_id, count] of counts.stream_count) {
-        set_stream_unread_count(stream_id, count);
+        const stream_has_any_unread_mention_messages =
+            counts.streams_with_mentions.includes(stream_id);
+        set_stream_unread_count(stream_id, count, stream_has_any_unread_mention_messages);
     }
 }
 

static/js/ui_util.ts

@@ -49,6 +49,21 @@ export function update_unread_count_in_dom($unread_count_elem: JQuery, count: nu
     $unread_count_span.text(count);
 }
 
+export function update_unread_mention_info_in_dom(
+    $unread_mention_info_elem: JQuery,
+    stream_has_any_unread_mention_messages: Boolean,
+): void {
+    const $unread_mention_info_span = $unread_mention_info_elem.find(".unread_mention_info");
+    if (!stream_has_any_unread_mention_messages) {
+        $unread_mention_info_span.hide();
+        $unread_mention_info_span.text("");
+        return;
+    }
+
+    $unread_mention_info_span.show();
+    $unread_mention_info_span.text("@");
+}
+
 /**
  * Parse HTML and return a DocumentFragment.
  *

static/js/unread.js

@@ -375,6 +375,21 @@ class UnreadTopicCounter {
         return util.sorted_ids(ids);
     }
 
+    get_streams_with_unread_mentions() {
+        const streams_with_mentions = new Set();
+        // Collect the set of streams containing at least one mention.
+        // We can do this efficiently, since unread_mentions_counter
+        // contains all unread message IDs, and we use stream_ids as
+        // bucket keys in our outer bucketer.
+
+        for (const message_id of unread_mentions_counter) {
+            const stream_id = this.bucketer.reverse_lookup.get(message_id);
+            streams_with_mentions.add(stream_id);
+        }
+
+        return streams_with_mentions;
+    }
+
     topic_has_any_unread(stream_id, topic) {
         const per_stream_bucketer = this.bucketer.get_bucket(stream_id);
 
@@ -528,8 +543,10 @@ export function get_counts() {
 
     // This sets stream_count, topic_count, and home_unread_messages
     const topic_res = unread_topic_counter.get_counts();
+    const streams_with_mentions = unread_topic_counter.get_streams_with_unread_mentions();
     res.home_unread_messages = topic_res.stream_unread_messages;
     res.stream_count = topic_res.stream_count;
+    res.streams_with_mentions = Array.from(streams_with_mentions);
 
     const pm_res = unread_pm_counter.get_counts();
     res.pm_count = pm_res.pm_dict;
@@ -575,6 +592,11 @@ export function num_unread_for_topic(stream_id, topic_name) {
     return unread_topic_counter.get(stream_id, topic_name);
 }
 
+export function stream_has_any_unread_mention(stream_id) {
+    const streams_with_mentions = unread_topic_counter.get_streams_with_unread_mentions();
+    return streams_with_mentions.has(stream_id);
+}
+
 export function topic_has_any_unread(stream_id, topic) {
     return unread_topic_counter.topic_has_any_unread(stream_id, topic);
 }

static/styles/app_components.css

@@ -563,6 +563,11 @@ div.overlay {
     color: hsl(0, 0%, 100%);
 }
 
+.unread_mention_info:not(:empty) {
+    margin-right: 5px;
+    opacity: 0.5;
+}
+
 /* Implement the web app's default-hidden convention for alert
    elements.  Portico pages lack this CSS and thus show them by
    default. */

static/templates/stream_sidebar_row.hbs

@@ -10,6 +10,7 @@
 
             <a href="{{uri}}" title="{{name}}" class="stream-name">{{name}}</a>
 
+            <span class="unread_mention_info"></span>
             <span class="unread_count"></span>
         </div>
         <span class="stream-sidebar-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>