msglist: Show topic visibility on app bar

The referenced design from the legacy mobile app displays
the 'mute' icon when the channel is muted, replacing a privacy
level related icon (e.g.: web public, invite only):
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/streams/StreamIcon.js#L20-L29
We diverge from that in the Flutter app.  We will have a different
place to show channel mute/unmute status in zulip#347.

This implementation also shows the corresponding icons for 'muted' and
'unmuted' topics; previously, only the icon for 'follow' was displayed.
And we continue using the existing icons in the Flutter app, without
trying to match the exact ones in the old design.

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

Author: PIG208

lib/widgets/icons.dart

@@ -139,3 +139,21 @@ IconData iconDataForStream(ZulipStream stream) {
     ZulipStream() => ZulipIcons.hash_sign,
   };
 }
+
+IconData? iconDataForTopicVisibilityPolicy(UserTopicVisibilityPolicy policy) {
+  switch (policy) {
+    case UserTopicVisibilityPolicy.muted:
+      return ZulipIcons.mute;
+    case UserTopicVisibilityPolicy.unmuted:
+      return ZulipIcons.unmute;
+    case UserTopicVisibilityPolicy.followed:
+      return ZulipIcons.follow;
+    case UserTopicVisibilityPolicy.none:
+      return null;
+    case UserTopicVisibilityPolicy.unknown:
+      // This case is unreachable (or should be) because we keep `unknown` out
+      // of our data structures. We plan to remove the `unknown` case in #1074.
+      assert(false);
+      return null;
+  }
+}

lib/widgets/message_list.dart

@@ -337,9 +337,20 @@ class MessageListAppBarTitle extends StatelessWidget {
     required ZulipStream? stream,
     required String topic,
   }) {
-    return Text(topic, style: const TextStyle(
-      fontSize: 13,
-    ).merge(weightVariableTextStyle(context)));
+    final store = PerAccountStoreWidget.of(context);
+    final icon = (stream == null) ? null
+      : iconDataForTopicVisibilityPolicy(
+          store.topicVisibilityPolicy(stream.streamId, topic));
+    return Row(
+      children: [
+        Flexible(child: Text(topic, style: const TextStyle(
+          fontSize: 13,
+        ).merge(weightVariableTextStyle(context)))),
+        if (icon != null)
+          Padding(
+            padding: const EdgeInsetsDirectional.only(start: 4),
+            child: Opacity(opacity: 0.4, child: Icon(icon, size: 14))),
+      ]);
   }
 
   @override

test/widgets/message_list_test.dart

@@ -152,6 +152,22 @@ void main() {
         .page.isA<MessageListPage>().initNarrow
           .equals(ChannelNarrow(channel.streamId));
     });
+
+    testWidgets('show topic visibility policy for topic narrows', (tester) async {
+      final channel = eg.stream();
+      const topic = 'topic';
+      await setupMessageListPage(tester,
+        narrow: TopicNarrow(channel.streamId, topic),
+        streams: [channel], subscriptions: [eg.subscription(channel)],
+        messageCount: 1);
+      await store.handleEvent(eg.userTopicEvent(
+        channel.streamId, topic, UserTopicVisibilityPolicy.muted));
+      await tester.pump();
+
+      check(find.descendant(
+        of: find.byType(MessageListAppBarTitle),
+        matching: find.byIcon(ZulipIcons.mute))).findsOne();
+    });
   });
 
   group('presents message content appropriately', () {