subscription_list: Show @-mention indicator when that applies

lib/model/store.dart

@@ -407,7 +407,7 @@ class PerAccountStore extends ChangeNotifier with EmojiStore, ChannelStore, Mess
   @override
   void reconcileMessages(List<Message> messages) {
     _messages.reconcileMessages(messages);
-    // TODO(#649) notify [unreads] of the just-fetched messages
+    unreads.reconcileMessages(messages);
     // TODO(#650) notify [recentDmConversationsView] of the just-fetched messages
   }
 

lib/model/unreads.dart

@@ -32,22 +32,24 @@ import 'channel.dart';
 /// unsubscribed streams and messages sent by muted users.
 // TODO When [oldUnreadsMissing], if you load a message list with very old unreads,
 //   sync to those unreads, because the user has shown an interest in them.
-// TODO When loading a message list with stream messages, check all the stream
-//   messages and refresh [mentions] (see [mentions] dartdoc).
 class Unreads extends ChangeNotifier {
   factory Unreads({
     required UnreadMessagesSnapshot initial,
     required int selfUserId,
     required ChannelStore channelStore,
   }) {
     final streams = <int, Map<String, QueueList<int>>>{};
+    final streamIdsAndTopicsByMessageId = <int, ({int streamId, String topic})>{};
     final dms = <DmNarrow, QueueList<int>>{};
     final mentions = Set.of(initial.mentions);
 
     for (final unreadChannelSnapshot in initial.channels) {
       final streamId = unreadChannelSnapshot.streamId;
       final topic = unreadChannelSnapshot.topic;
       (streams[streamId] ??= {})[topic] = QueueList.from(unreadChannelSnapshot.unreadMessageIds);
+      final messageInfo = (streamId: streamId, topic: topic);
+      streamIdsAndTopicsByMessageId.addEntries(
+        unreadChannelSnapshot.unreadMessageIds.map((messageId) => MapEntry(messageId, messageInfo)));
     }
 
     for (final unreadDmSnapshot in initial.dms) {
@@ -64,6 +66,7 @@ class Unreads extends ChangeNotifier {
     return Unreads._(
       channelStore: channelStore,
       streams: streams,
+      streamIdsAndTopicsByMessageId: streamIdsAndTopicsByMessageId,
       dms: dms,
       mentions: mentions,
       oldUnreadsMissing: initial.oldUnreadsMissing,
@@ -74,11 +77,12 @@ class Unreads extends ChangeNotifier {
   Unreads._({
     required this.channelStore,
     required this.streams,
+    required Map<int, ({int streamId, String topic})> streamIdsAndTopicsByMessageId,
     required this.dms,
     required this.mentions,
     required this.oldUnreadsMissing,
     required this.selfUserId,
-  });
+  }) : _streamIdsAndTopicsByMessageId = streamIdsAndTopicsByMessageId;
 
   final ChannelStore channelStore;
 
@@ -88,6 +92,11 @@ class Unreads extends ChangeNotifier {
   /// Unread stream messages, as: stream ID → topic → message IDs (sorted).
   final Map<int, Map<String, QueueList<int>>> streams;
 
+  /// Stream IDs and topics for unread stream messages, as: message ID → (stream ID, topic).
+  ///
+  /// This is the same data as [streams], but in this message ID-keyed form.
+  final Map<int, ({int streamId, String topic})> _streamIdsAndTopicsByMessageId;
+
   /// Unread DM messages, as: DM narrow → message IDs (sorted).
   final Map<DmNarrow, QueueList<int>> dms;
 
@@ -103,7 +112,7 @@ class Unreads extends ChangeNotifier {
   ///   a) the message is edited at all ([UpdateMessageEvent]),
   ///      assuming it still has a direct or wildcard mention after the edit, or
   ///   b) the message gains a direct @-mention ([UpdateMessageFlagsEvent]), or
-  ///   c) TODO unimplemented: the user loads the message in the message list
+  ///   c) the user loads the message in the message list
   /// But otherwise, assume its unread state remains unknown to [mentions].
   ///
   /// [1] This item applies verbatim at Server 8.0+. For older servers, the
@@ -185,6 +194,25 @@ class Unreads extends ChangeNotifier {
     return c;
   }
 
+  /// The "broadest" unread count for this channel,
+  /// without doing any checking on visibility policy.
+  ///
+  /// This includes all topics that have regardless visibility policy,
+  /// even if the channel is muted.
+  ///
+  /// This is needed for one specific case, which is when the channel has
+  /// only muted unreads including a mention or more, in that case we show
+  /// total unread count including muted unreads.
+  int countAll(int streamId) {
+    final topics = streams[streamId];
+    if (topics == null) return 0;
+    int c = 0;
+    for (final entry in topics.entries) {
+      c = c + entry.value.length;
+    }
+    return c;
+  }
+
   int countInTopicNarrow(int streamId, String topic) {
     final topics = streams[streamId];
     return topics?[topic]?.length ?? 0;
@@ -214,6 +242,38 @@ class Unreads extends ChangeNotifier {
     }
   }
 
+  Set<int> get channelsWithUnreadMentions {
+    final channels = <int>{};
+    for (var messageId in mentions) {
+      final streamId = _streamIdsAndTopicsByMessageId[messageId]?.streamId;
+      if (streamId != null) {
+        channels.add(streamId);
+      }
+    }
+    return channels;
+  }
+
+  Set<int> get channelsWithUnmutedMentions {
+    final channels = <int>{};
+    for (var messageId in mentions) {
+      final (:streamId, :topic) = _streamIdsAndTopicsByMessageId[messageId]!;
+      if (channelStore.isTopicVisible(streamId, topic)) {
+        channels.add(streamId);
+      }
+    }
+    return channels;
+  }
+
+  void reconcileMessages(List<Message> messages) {
+    for (final message in messages) {
+      if (message.flags.contains(MessageFlag.read)) continue;
+      if (message.flags.contains(MessageFlag.mentioned)
+        || message.flags.contains(MessageFlag.wildcardMentioned)) {
+        mentions.add(message.id);
+      }
+    }
+  }
+
   void handleMessageEvent(MessageEvent event) {
     final message = event.message;
     if (message.flags.contains(MessageFlag.read)) {
@@ -342,6 +402,7 @@ class Unreads extends ChangeNotifier {
           case UpdateMessageFlagsAddEvent():
             if (event.all) {
               streams.clear();
+              _streamIdsAndTopicsByMessageId.clear();
               dms.clear();
               mentions.clear();
               oldUnreadsMissing = false;
@@ -438,6 +499,7 @@ class Unreads extends ChangeNotifier {
 
   void _addLastInStreamTopic(int messageId, int streamId, String topic) {
     ((streams[streamId] ??= {})[topic] ??= QueueList()).addLast(messageId);
+    _streamIdsAndTopicsByMessageId[messageId] = (streamId: streamId, topic: topic);
   }
 
   // [messageIds] must be sorted ascending and without duplicates.
@@ -450,6 +512,9 @@ class Unreads extends ChangeNotifier {
       // TODO(server-6) remove 6.0 comment
       (existing) => setUnion(existing, messageIds),
     );
+    final messageInfo = (streamId: streamId, topic: topic);
+    _streamIdsAndTopicsByMessageId.addEntries(
+      messageIds.map((messageId) => MapEntry(messageId, messageInfo)));
   }
 
   // TODO use efficient model lookups
@@ -473,6 +538,9 @@ class Unreads extends ChangeNotifier {
     for (final streamId in newlyEmptyStreams) {
       streams.remove(streamId);
     }
+    for (final messageId in idsToRemove) {
+      _streamIdsAndTopicsByMessageId.remove(messageId);
+    }
   }
 
   void _removeAllInStreamTopic(Set<int> incomingMessageIds, int streamId, String topic) {
@@ -489,6 +557,9 @@ class Unreads extends ChangeNotifier {
         streams.remove(streamId);
       }
     }
+    for (final messageId in incomingMessageIds) {
+      _streamIdsAndTopicsByMessageId.remove(messageId);
+    }
   }
 
   // TODO use efficient model lookups

lib/widgets/inbox.dart

@@ -282,7 +282,7 @@ abstract class _HeaderItem extends StatelessWidget {
               overflow: TextOverflow.ellipsis,
               title))),
           const SizedBox(width: 12),
-          if (hasMention) const _AtMentionMarker(),
+          if (hasMention) const AtMentionMarker(muted: false),
           Padding(padding: const EdgeInsetsDirectional.only(end: 16),
             child: UnreadCountBadge(
               backgroundColor: unreadCountBadgeBackgroundColor(context),
@@ -405,7 +405,7 @@ class _DmItem extends StatelessWidget {
                 overflow: TextOverflow.ellipsis,
                 title))),
             const SizedBox(width: 12),
-            if (hasMention) const  _AtMentionMarker(),
+            if (hasMention) const AtMentionMarker(muted: false),
             Padding(padding: const EdgeInsetsDirectional.only(end: 16),
               child: UnreadCountBadge(backgroundColor: null,
                 count: count)),
@@ -530,25 +530,11 @@ class _TopicItem extends StatelessWidget {
                 overflow: TextOverflow.ellipsis,
                 topic))),
             const SizedBox(width: 12),
-            if (hasMention) const _AtMentionMarker(),
+            if (hasMention) const AtMentionMarker(muted: false),
             Padding(padding: const EdgeInsetsDirectional.only(end: 16),
               child: UnreadCountBadge(
                 backgroundColor: colorSwatchFor(context, subscription),
                 count: count)),
           ]))));
   }
 }
-
-class _AtMentionMarker extends StatelessWidget {
-  const _AtMentionMarker();
-
-  @override
-  Widget build(BuildContext context) {
-    final designVariables = DesignVariables.of(context);
-    // Design for at-mention marker based on Figma screen:
-    //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?type=design&node-id=224-16386&mode=design&t=JsNndFQ8fKFH0SjS-0
-    return Padding(
-      padding: const EdgeInsetsDirectional.only(end: 4),
-      child: Icon(ZulipIcons.at_sign, size: 14, color: designVariables.atMentionMarker));
-  }
-}

lib/widgets/subscription_list.dart

@@ -185,16 +185,26 @@ class _SubscriptionList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final channelsWithMentions = unreadsModel!.channelsWithUnreadMentions;
+    final channelsWithUnmutedMentions = unreadsModel!.channelsWithUnmutedMentions;
     return SliverList.builder(
       itemCount: subscriptions.length,
       itemBuilder: (BuildContext context, int index) {
         final subscription = subscriptions[index];
         final unreadCount = unreadsModel!.countInChannel(subscription.streamId);
         final showMutedUnreadBadge = unreadCount == 0
           && unreadsModel!.countInChannelNarrow(subscription.streamId) > 0;
+        final hasMentions = channelsWithMentions.contains(subscription.streamId);
+        final hasOnlyMutedMentions = !subscription.isMuted && hasMentions
+          && !channelsWithUnmutedMentions.contains(subscription.streamId);
+        final mutedUnreadCount = hasOnlyMutedMentions && unreadCount == 0 ?
+          unreadsModel!.countAll(subscription.streamId) : 0;
         return SubscriptionItem(subscription: subscription,
           unreadCount: unreadCount,
-          showMutedUnreadBadge: showMutedUnreadBadge);
+          mutedUnreadCount: mutedUnreadCount,
+          showMutedUnreadBadge: showMutedUnreadBadge,
+          hasMentions: hasMentions,
+          hasOnlyMutedMentions: hasOnlyMutedMentions);
     });
   }
 }
@@ -205,20 +215,27 @@ class SubscriptionItem extends StatelessWidget {
     super.key,
     required this.subscription,
     required this.unreadCount,
+    required this.mutedUnreadCount,
     required this.showMutedUnreadBadge,
+    required this.hasMentions,
+    required this.hasOnlyMutedMentions,
   });
 
   final Subscription subscription;
   final int unreadCount;
+  final int mutedUnreadCount;
   final bool showMutedUnreadBadge;
+  final bool hasMentions;
+  final bool hasOnlyMutedMentions;
 
   @override
   Widget build(BuildContext context) {
     final designVariables = DesignVariables.of(context);
 
     final swatch = colorSwatchFor(context, subscription);
     final hasUnreads = (unreadCount > 0);
-    final opacity = subscription.isMuted ? 0.55 : 1.0;
+    const mutedOpacity = 0.55;
+    final opacity = subscription.isMuted ? mutedOpacity : 1.0;
     return Material(
       // TODO(design) check if this is the right variable
       color: designVariables.background,
@@ -258,16 +275,25 @@ class SubscriptionItem extends StatelessWidget {
                   subscription.name)))),
           if (hasUnreads) ...[
             const SizedBox(width: 12),
-            // TODO(#747) show @-mention indicator when it applies
+            if (hasMentions) AtMentionMarker(muted: !subscription.isMuted && hasOnlyMutedMentions),
             Opacity(
               opacity: opacity,
               child: UnreadCountBadge(
                 count: unreadCount,
                 backgroundColor: swatch,
                 bold: true)),
+          ] else if (hasOnlyMutedMentions && !subscription.isMuted) ...[
+            const SizedBox(width: 12),
+            const AtMentionMarker(muted: true),
+            Opacity(
+              opacity: mutedOpacity,
+              child: UnreadCountBadge(
+                count: mutedUnreadCount,
+                backgroundColor: swatch,
+                bold: true)),
           ] else if (showMutedUnreadBadge) ...[
             const SizedBox(width: 12),
-            // TODO(#747) show @-mention indicator when it applies
+            if (hasMentions) const AtMentionMarker(muted: true),
             const MutedUnreadBadge(),
           ],
           const SizedBox(width: 16),

lib/widgets/theme.dart

@@ -117,7 +117,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       mainBackground: const Color(0xfff0f0f0),
       title: const Color(0xff1a1a1a),
       channelColorSwatches: ChannelColorSwatches.light,
-      atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
+      atMentionMarker: const HSLColor.fromAHSL(0.7, 0, 0, 0.2).toColor(),
+      mutedAtMentionMarker: const HSLColor.fromAHSL(0.35, 0, 0, 0.2).toColor(),
       dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
       errorBannerBackground: const HSLColor.fromAHSL(1, 4, 0.33, 0.90).toColor(),
       errorBannerBorder: const HSLColor.fromAHSL(0.4, 3, 0.57, 0.33).toColor(),
@@ -147,7 +148,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: const Color(0xffffffff),
       channelColorSwatches: ChannelColorSwatches.dark,
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
-      atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
+      atMentionMarker: const HSLColor.fromAHSL(0.7, 0, 0, 1).toColor(),
+      mutedAtMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
       dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
       errorBannerBackground: const HSLColor.fromAHSL(1, 0, 0.61, 0.19).toColor(),
       errorBannerBorder: const HSLColor.fromAHSL(0.4, 3, 0.73, 0.74).toColor(),
@@ -182,6 +184,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.title,
     required this.channelColorSwatches,
     required this.atMentionMarker,
+    required this.mutedAtMentionMarker,
     required this.dmHeaderBg,
     required this.errorBannerBackground,
     required this.errorBannerBorder,
@@ -223,6 +226,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
   final Color atMentionMarker;
+  final Color mutedAtMentionMarker;
   final Color dmHeaderBg;
   final Color errorBannerBackground;
   final Color errorBannerBorder;
@@ -251,6 +255,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? title,
     ChannelColorSwatches? channelColorSwatches,
     Color? atMentionMarker,
+    Color? mutedAtMentionMarker,
     Color? dmHeaderBg,
     Color? errorBannerBackground,
     Color? errorBannerBorder,
@@ -278,6 +283,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: title ?? this.title,
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
       atMentionMarker: atMentionMarker ?? this.atMentionMarker,
+      mutedAtMentionMarker: mutedAtMentionMarker ?? this.mutedAtMentionMarker,
       dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
       errorBannerBackground: errorBannerBackground ?? this.errorBannerBackground,
       errorBannerBorder: errorBannerBorder ?? this.errorBannerBorder,
@@ -312,6 +318,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: Color.lerp(title, other.title, t)!,
       channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
       atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,
+      mutedAtMentionMarker: Color.lerp(mutedAtMentionMarker, other.mutedAtMentionMarker, t)!,
       dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,
       errorBannerBackground: Color.lerp(errorBannerBackground, other.errorBannerBackground, t)!,
       errorBannerBorder: Color.lerp(errorBannerBorder, other.errorBannerBorder, t)!,