msglist: Apply subscription color to StreamMessageRecipientHeader

Also bring back contrasting color to text.

Author: sirpengi

lib/widgets/message_list.dart

@@ -548,6 +548,13 @@ class StreamMessageRecipientHeader extends StatelessWidget {
 
     final stream = store.streams[message.streamId];
     final topic = message.subject;
+    final swatch = store.subscriptions[message.streamId]?.colorSwatch()
+      ?? _kFallbackStreamColorSwatch;
+    final contrastingColor =
+      (ThemeData.estimateBrightnessForColor(swatch.barBackground) == Brightness.dark)
+        ? Colors.white
+        : Colors.black;
+    final textStyle = TextStyle(color: contrastingColor);
 
     final streamWidget = (showStream)
       ? GestureDetector(
@@ -557,13 +564,14 @@ class StreamMessageRecipientHeader extends StatelessWidget {
           child: Row(children: [
             const SizedBox(width: 16),
             // TODO globe/lock icons for web-public and private streams
-            Text(stream?.name ?? message.displayRecipient), // TODO(log) if missing
+            Text(stream?.name ?? message.displayRecipient, // TODO(log) if missing
+              style: textStyle),
             Padding(
               // Figma has 5px horizontal padding around an 8px wide icon.
               // Icon is 16px wide here so horizontal padding is 1px.
               padding: const EdgeInsets.symmetric(horizontal: 1),
               child: Icon(size: 16,
-                color: const HSLColor.fromAHSL(0.60, 0, 0, 0).toColor(),
+                color: contrastingColor.withAlpha(154), // 60%
                 ZulipIcons.chevron_right)),
           ]))
       : const SizedBox(width: 16);
@@ -573,7 +581,7 @@ class StreamMessageRecipientHeader extends StatelessWidget {
         MessageListPage.buildRoute(context: context,
           narrow: TopicNarrow.ofMessage(message))),
       child: ColoredBox(
-        color: _kStreamMessageBorderColor,
+        color: swatch.barBackground,
         child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
           // TODO(#282): Long stream name will break layout; find a fix.
           streamWidget,
@@ -584,18 +592,17 @@ class StreamMessageRecipientHeader extends StatelessWidget {
               child: Text(topic,
                 // TODO: Give a way to see the whole topic (maybe a
                 //   long-press interaction?)
-                overflow: TextOverflow.ellipsis))),
+                overflow: TextOverflow.ellipsis,
+                style: textStyle))),
           // TODO topic links?
           // Then web also has edit/resolve/mute buttons. Skip those for mobile.
           RecipientHeaderDate(message: message,
-            color: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toColor()),
+            color: contrastingColor.withAlpha(102)), // 40%
           const SizedBox(width: 16),
         ])));
   }
 }
 
-final _kStreamMessageBorderColor = const HSLColor.fromAHSL(1, 0, 0, 0.88).toColor();
-
 class DmRecipientHeader extends StatelessWidget {
   const DmRecipientHeader({super.key, required this.message});
 

test/flutter_checks.dart

@@ -16,6 +16,10 @@ extension ClipboardDataChecks on Subject<ClipboardData> {
   Subject<String?> get text => has((d) => d.text, 'text');
 }
 
+extension ColoredBoxChecks on Subject<ColoredBox> {
+  Subject<Color?> get color => has((d) => d.color, 'color');
+}
+
 extension GlobalKeyChecks<T extends State<StatefulWidget>> on Subject<GlobalKey<T>> {
   Subject<BuildContext?> get currentContext => has((k) => k.currentContext, 'currentContext');
   Subject<Widget?> get currentWidget => has((k) => k.currentWidget, 'currentWidget');

test/widgets/message_list_test.dart

@@ -41,11 +41,13 @@ void main() {
     int? messageCount,
     List<Message>? messages,
     List<ZulipStream>? streams,
+    List<Subscription>? subscriptions,
     UnreadMessagesSnapshot? unreadMsgs,
   }) async {
     addTearDown(testBinding.reset);
+    streams ??= subscriptions;
     await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot(
-      streams: streams, unreadMsgs: unreadMsgs));
+      streams: streams, subscriptions: subscriptions, unreadMsgs: unreadMsgs));
     store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
     connection = store.connection as FakeApiConnection;
 
@@ -232,6 +234,19 @@ void main() {
         check(findInMessageList('stream name')).length.equals(0);
         check(findInMessageList('topic name')).length.equals(1);
       });
+
+      testWidgets('color of recipient header background', (tester) async {
+        final subscription = eg.subscription(stream, color: Colors.red.value);
+        final swatch = subscription.colorSwatch();
+        await setupMessageListPage(tester,
+          messages: [message], subscriptions: [subscription]);
+        await tester.pump();
+        check(tester.widget<ColoredBox>(
+          find.descendant(
+            of: find.byType(StreamMessageRecipientHeader),
+            matching: find.byType(ColoredBox),
+        ))).color.equals(swatch.barBackground);
+      });
     });
 
     testWidgets('show stream name from message when stream unknown', (tester) async {