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]>
PIG208 · Dec 10, 2024 · 0c79add · 0c79add
1 parent eb67f92
commit 0c79add
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -1021,6 +1021,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;
 
@@ -1094,11 +1095,21 @@ 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))),
+                    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))),
+                  ]))),
             // TODO topic links?
             // Then web also has edit/resolve/mute buttons. Skip those for mobile.
             RecipientHeaderDate(message: message),

diff --git a/test/widgets/message_list_test.dart b/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);