From a0f0a6ee331fc41ef79e8af1b62b4f7cd00386ab Mon Sep 17 00:00:00 2001 From: jai2201 Date: Sat, 6 Aug 2022 02:15:20 +0530 Subject: [PATCH] unread: Indicate which streams have unread @-mentions. Fixes part of #21637. Co-authored-by: Tim Abbott --- static/js/stream_list.js | 19 ++++++++++++++----- static/js/ui_util.ts | 15 +++++++++++++++ static/js/unread.js | 22 ++++++++++++++++++++++ static/styles/app_components.css | 5 +++++ static/templates/stream_sidebar_row.hbs | 1 + 5 files changed, 57 insertions(+), 5 deletions(-) diff --git a/static/js/stream_list.js b/static/js/stream_list.js index e5bb182023801a..89a1b5fd814a52 100644 --- a/static/js/stream_list.js +++ b/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,7 +381,7 @@ 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 @@ -382,7 +389,7 @@ function set_stream_unread_count(stream_id, count) { 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); } } diff --git a/static/js/ui_util.ts b/static/js/ui_util.ts index dad8d395309d02..fe2d43f592fca7 100644 --- a/static/js/ui_util.ts +++ b/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. * diff --git a/static/js/unread.js b/static/js/unread.js index fbac66d479b46d..6e9ce0e698dfb0 100644 --- a/static/js/unread.js +++ b/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); } diff --git a/static/styles/app_components.css b/static/styles/app_components.css index af133ab37ce8e2..adc26c02546f23 100644 --- a/static/styles/app_components.css +++ b/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. */ diff --git a/static/templates/stream_sidebar_row.hbs b/static/templates/stream_sidebar_row.hbs index 5565abdbe2de0d..81dd50c0ac3b8d 100644 --- a/static/templates/stream_sidebar_row.hbs +++ b/static/templates/stream_sidebar_row.hbs @@ -10,6 +10,7 @@ {{name}} +