msglist: Show topic visibility on app bar

The design took some inspiration from the legacy mobile app.

This displays a privacy level related icon (e.g.: web public,
invite only).  We will have a different place to show channel
mute/unmute status in #347.

The color for the icon is taken from the web app:
  https://github.com/zulip/zulip/blob/dc58c8450f8524f226115a7b449b05e01ae15d8b/web/styles/message_header.css#L296-L297
  https://github.com/zulip/zulip/blob/dc58c8450f8524f226115a7b449b05e01ae15d8b/web/styles/app_variables.css#L590
  https://github.com/zulip/zulip/blob/dc58c8450f8524f226115a7b449b05e01ae15d8b/web/styles/app_variables.css#L1330

In the web app, these colors are used for the topic visibility icons
on message recipient headers.

To maintain the different conventional title alignment on iOS and
Android, we borrow some checks from AppBar in title centering.

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

@@ -336,9 +336,24 @@ 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 designVariables = DesignVariables.of(context);
+    final icon = (stream == null) ? null
+      : iconDataForTopicVisibilityPolicy(
+          store.topicVisibilityPolicy(stream.streamId, topic));
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Flexible(child: Text(topic, style: const TextStyle(
+          fontSize: 13,
+        ).merge(weightVariableTextStyle(context)))),
+        if (icon != null)
+          Padding(
+            padding: const EdgeInsetsDirectional.only(start: 4),
+            child: Icon(icon,
+              // TODO(design) copies the recipient header in web; is there a better color?
+              color: designVariables.colorMessageHeaderIconInteractive, size: 14)),
+      ]);
   }
 
   // TODO(upstream): provide an API for this

lib/widgets/theme.dart

@@ -136,6 +136,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: const Color(0xff1a1a1a),
       channelColorSwatches: ChannelColorSwatches.light,
       atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
+      colorMessageHeaderIconInteractive: Colors.black.withValues(alpha: 0.2),
       contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15),
       contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20),
       dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
@@ -180,6 +181,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20), // the same as the light mode in Figma
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
       atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
+      colorMessageHeaderIconInteractive: Colors.white.withValues(alpha: 0.2),
       dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
       groupDmConversationIcon: Colors.white.withValues(alpha: 0.5),
@@ -225,6 +227,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.title,
     required this.channelColorSwatches,
     required this.atMentionMarker,
+    required this.colorMessageHeaderIconInteractive,
     required this.contextMenuCancelBg,
     required this.contextMenuCancelPressedBg,
     required this.dmHeaderBg,
@@ -278,6 +281,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
   final Color atMentionMarker;
+  final Color colorMessageHeaderIconInteractive;
   final Color contextMenuCancelBg; // In Figma, but unnamed.
   final Color contextMenuCancelPressedBg; // In Figma, but unnamed.
   final Color dmHeaderBg;
@@ -318,6 +322,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? title,
     ChannelColorSwatches? channelColorSwatches,
     Color? atMentionMarker,
+    Color? colorMessageHeaderIconInteractive,
     Color? contextMenuCancelBg,
     Color? contextMenuCancelPressedBg,
     Color? dmHeaderBg,
@@ -357,6 +362,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: title ?? this.title,
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
       atMentionMarker: atMentionMarker ?? this.atMentionMarker,
+      colorMessageHeaderIconInteractive: colorMessageHeaderIconInteractive ?? this.colorMessageHeaderIconInteractive,
       contextMenuCancelBg: contextMenuCancelBg ?? this.contextMenuCancelBg,
       contextMenuCancelPressedBg: contextMenuCancelPressedBg ?? this.contextMenuCancelPressedBg,
       dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
@@ -403,6 +409,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)!,
+      colorMessageHeaderIconInteractive: Color.lerp(colorMessageHeaderIconInteractive, other.colorMessageHeaderIconInteractive, t)!,
       contextMenuCancelBg: Color.lerp(contextMenuCancelBg, other.contextMenuCancelBg, t)!,
       contextMenuCancelPressedBg: Color.lerp(contextMenuCancelPressedBg, other.contextMenuCancelPressedBg, t)!,
       dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,

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', () {