msglist: Colorize channel icon in the app bar, following Figma

The Figma:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6089-28394&m=dev

And while we're adding a test for it, also check that the chosen
channel icon is the intended one.

Author: chrisbobbe

lib/widgets/message_list.dart

@@ -297,17 +297,26 @@ class MessageListAppBarTitle extends StatelessWidget {
   Widget _buildStreamRow(BuildContext context, {
     ZulipStream? stream,
   }) {
+    final store = PerAccountStoreWidget.of(context);
     final zulipLocalizations = ZulipLocalizations.of(context);
+
     // A null [Icon.icon] makes a blank space.
-    final icon = stream != null ? iconDataForStream(stream) : null;
+    IconData? icon;
+    Color? iconColor;
+    if (stream != null) {
+      icon = iconDataForStream(stream);
+      iconColor = colorSwatchFor(context, store.subscriptions[stream.streamId])
+        .iconOnBarBackground;
+    }
+
     return Row(
       mainAxisSize: MainAxisSize.min,
       // TODO(design): The vertical alignment of the stream privacy icon is a bit ad hoc.
       //   For screenshots of some experiments, see:
       //     https://github.com/zulip/zulip-flutter/pull/219#discussion_r1281024746
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        Icon(size: 16, icon),
+        Icon(size: 16, color: iconColor, icon),
         const SizedBox(width: 4),
         Flexible(child: Text(
           stream?.name ?? zulipLocalizations.unknownChannelName)),

test/widgets/message_list_test.dart

@@ -18,6 +18,7 @@ import 'package:zulip/model/message_list.dart';
 import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/model/typing_status.dart';
+import 'package:zulip/widgets/app_bar.dart';
 import 'package:zulip/widgets/autocomplete.dart';
 import 'package:zulip/widgets/color.dart';
 import 'package:zulip/widgets/compose_box.dart';
@@ -208,6 +209,36 @@ void main() {
         channel.name, eg.defaultRealmEmptyTopicDisplayName);
     });
 
+    void testChannelIconInChannelRow(IconData expectedIcon, {
+      required bool isWebPublic,
+      required bool inviteOnly,
+    }) {
+      final description = 'channel icon in channel row; '
+        'web-public: $isWebPublic, invite-only: $inviteOnly';
+      testWidgets(description, (tester) async {
+        final color = 0xff95a5fd;
+
+        final channel = eg.stream(isWebPublic: isWebPublic, inviteOnly: inviteOnly);
+        final subscription = eg.subscription(channel, color: color);
+
+        await setupMessageListPage(tester,
+          narrow: ChannelNarrow(channel.streamId),
+          streams: [channel],
+          subscriptions: [subscription],
+          messages: [eg.streamMessage(stream: channel)]);
+
+        final iconElement = tester.element(find.descendant(
+          of: find.byType(ZulipAppBar),
+          matching: find.byIcon(expectedIcon)));
+
+        check(Theme.brightnessOf(iconElement)).equals(Brightness.light);
+        check(iconElement.widget as Icon).color.equals(Color(0xff5972fc));
+      });
+    }
+    testChannelIconInChannelRow(ZulipIcons.globe, isWebPublic: true, inviteOnly: false);
+    testChannelIconInChannelRow(ZulipIcons.lock, isWebPublic: false, inviteOnly: true);
+    testChannelIconInChannelRow(ZulipIcons.hash_sign, isWebPublic: false, inviteOnly: false);
+
     testWidgets('has channel-feed action for topic narrows', (tester) async {
       final pushedRoutes = <Route<void>>[];
       final navObserver = TestNavigatorObserver()