msglist: Show visibility policy on recipient headers

This design was inspired by the legacy mobile app.

Reference:
  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

@@ -1020,6 +1020,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;
 
@@ -1081,11 +1082,21 @@ class StreamMessageRecipientHeader extends StatelessWidget {
 
     final topicWidget = 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))),
+          const SizedBox(width: 4),
+          // TODO(design) copies the recipient header in web; is there a better color?
+          Icon(size: 14, color: designVariables.colorMessageHeaderIconInteractive,
+            // A null [Icon.icon] makes a blank space.
+            iconDataForTopicVisibilityPolicy(
+              store.topicVisibilityPolicy(message.streamId, topic))),
+        ]));
 
     return GestureDetector(
       onTap: () => Navigator.push(context,

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);