msglist: Show visibility policy on recipient headers

This mostly matches the legacy mobile app, except that now we also
support topic visibility policies other than "follow", and that we use
the color of the @-mention marker.

Reference legacy mobile app code:
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/streams/TopicItem.js#L47-L51

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/message_list.dart

@@ -991,6 +991,7 @@ class StreamMessageRecipientHeader extends StatelessWidget {
     //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=538%3A20849&mode=dev
     //   https://github.com/zulip/zulip-mobile/issues/5511
     final store = PerAccountStoreWidget.of(context);
+    final designVariables = DesignVariables.of(context);
 
     final topic = message.topic;
 
@@ -1064,11 +1065,23 @@ class StreamMessageRecipientHeader extends StatelessWidget {
             Expanded(
               child: Padding(
                 padding: const EdgeInsets.symmetric(vertical: 11),
-                child: Text(topic,
-                  // TODO: Give a way to see the whole topic (maybe a
-                  //   long-press interaction?)
-                  overflow: TextOverflow.ellipsis,
-                  style: recipientHeaderTextStyle(context)))),
+                child: Row(
+                  children: [
+                    Flexible(
+                      child: Text(topic,
+                        // TODO: Give a way to see the whole topic (maybe a
+                        //   long-press interaction?)
+                        overflow: TextOverflow.ellipsis,
+                        style: recipientHeaderTextStyle(context))),
+                    Container(
+                      width: 20,
+                      padding: const EdgeInsetsDirectional.only(start: 4),
+                      // TODO(design): Choose an color for the icon
+                      child: Icon(size: 14, color: designVariables.atMentionMarker,
+                        // A null [Icon.icon] makes a blank space.
+                        iconDataForTopicVisibilityPolicy(
+                          store.topicVisibilityPolicy(message.streamId, topic)))),
+                  ]))),
             // TODO topic links?
             // Then web also has edit/resolve/mute buttons. Skip those for mobile.
             RecipientHeaderDate(message: message),

test/widgets/message_list_test.dart

@@ -803,6 +803,30 @@ void main() {
         check(findInMessageList('topic name')).length.equals(1);
       });
 
+      testWidgets('show topic visibility icon when followed', (tester) async {
+        await setupMessageListPage(tester,
+          narrow: const CombinedFeedNarrow(),
+          messages: [message], subscriptions: [eg.subscription(stream)]);
+        await store.handleEvent(eg.userTopicEvent(
+          stream.streamId, message.topic, UserTopicVisibilityPolicy.followed));
+        await tester.pump();
+        check(find.descendant(
+          of: find.byType(MessageList),
+          matching: find.byIcon(ZulipIcons.follow))).findsOne();
+      });
+
+      testWidgets('show topic visibility icon when unmuted', (tester) async {
+        await setupMessageListPage(tester,
+          narrow: TopicNarrow.ofMessage(message),
+          messages: [message], subscriptions: [eg.subscription(stream, isMuted: true)]);
+        await store.handleEvent(eg.userTopicEvent(
+          stream.streamId, message.topic, UserTopicVisibilityPolicy.unmuted));
+        await tester.pump();
+        check(find.descendant(
+          of: find.byType(MessageList),
+          matching: find.byIcon(ZulipIcons.unmute))).findsOne();
+      });
+
       testWidgets('color of recipient header background', (tester) async {
         final subscription = eg.subscription(stream, color: Colors.red.argbInt);
         final swatch = ChannelColorSwatch.light(subscription.color);