unread_count_badge [nfc]: Encapsulate finding ChannelColorSwatch from ID

Author: chrisbobbe

lib/widgets/inbox.dart

@@ -6,7 +6,6 @@ import '../model/narrow.dart';
 import '../model/recent_dm_conversations.dart';
 import '../model/unreads.dart';
 import 'action_sheet.dart';
-import 'channel_colors.dart';
 import 'icons.dart';
 import 'message_list.dart';
 import 'page.dart';
@@ -250,7 +249,9 @@ abstract class _HeaderItem extends StatelessWidget {
   Color collapsedIconColor(BuildContext context);
   Color uncollapsedIconColor(BuildContext context);
   Color uncollapsedBackgroundColor(BuildContext context);
-  ChannelColorSwatch? unreadCountBadgeBackgroundColor(BuildContext context);
+
+  /// A channel ID, if this represents a channel, else null.
+  int? get channelId;
 
   Future<void> onCollapseButtonTap() async {
     if (!collapsed) {
@@ -308,7 +309,7 @@ abstract class _HeaderItem extends StatelessWidget {
           if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign),
           Padding(padding: const EdgeInsetsDirectional.only(end: 16),
             child: UnreadCountBadge(
-              backgroundColor: unreadCountBadgeBackgroundColor(context),
+              channelIdForBackground: channelId,
               bold: true,
               count: count)),
         ])));
@@ -333,7 +334,7 @@ class _AllDmsHeaderItem extends _HeaderItem {
   @override Color uncollapsedIconColor(context) => DesignVariables.of(context).labelMenuButton;
 
   @override Color uncollapsedBackgroundColor(context) => DesignVariables.of(context).dmHeaderBg;
-  @override ChannelColorSwatch? unreadCountBadgeBackgroundColor(context) => null;
+  @override int? get channelId => null;
 
   @override Future<void> onCollapseButtonTap() async {
     await super.onCollapseButtonTap();
@@ -430,7 +431,7 @@ class _DmItem extends StatelessWidget {
             const SizedBox(width: 12),
             if (hasMention) const  _IconMarker(icon: ZulipIcons.at_sign),
             Padding(padding: const EdgeInsetsDirectional.only(end: 16),
-              child: UnreadCountBadge(backgroundColor: null,
+              child: UnreadCountBadge(channelIdForBackground: null,
                 count: count)),
           ]))));
   }
@@ -463,8 +464,7 @@ class _StreamHeaderItem extends _HeaderItem with _LongPressable {
     colorSwatchFor(context, subscription).iconOnBarBackground;
   @override Color uncollapsedBackgroundColor(context) =>
     colorSwatchFor(context, subscription).barBackground;
-  @override ChannelColorSwatch? unreadCountBadgeBackgroundColor(context) =>
-    colorSwatchFor(context, subscription);
+  @override int? get channelId => subscription.streamId;
 
   @override Future<void> onCollapseButtonTap() async {
     await super.onCollapseButtonTap();
@@ -527,7 +527,6 @@ class _TopicItem extends StatelessWidget {
       :topic, :count, :hasMention, :lastUnreadId) = data;
 
     final store = PerAccountStoreWidget.of(context);
-    final subscription = store.subscriptions[streamId]!;
 
     final designVariables = DesignVariables.of(context);
     final visibilityIcon = iconDataForTopicVisibilityPolicy(
@@ -567,7 +566,7 @@ class _TopicItem extends StatelessWidget {
             if (visibilityIcon != null) _IconMarker(icon: visibilityIcon),
             Padding(padding: const EdgeInsetsDirectional.only(end: 16),
               child: UnreadCountBadge(
-                backgroundColor: colorSwatchFor(context, subscription),
+                channelIdForBackground: streamId,
                 count: count)),
           ]))));
   }

lib/widgets/recent_dm_conversations.dart

@@ -233,7 +233,7 @@ class RecentDmConversationsItem extends StatelessWidget {
             const SizedBox(width: 12),
             unreadCount > 0
               ? Padding(padding: const EdgeInsetsDirectional.only(end: 16),
-                child: UnreadCountBadge(backgroundColor: null,
+                child: UnreadCountBadge(channelIdForBackground: null,
                   count: unreadCount))
             : const SizedBox(),
           ]))));

lib/widgets/subscription_list.dart

@@ -337,7 +337,7 @@ class SubscriptionItem extends StatelessWidget {
               opacity: opacity,
               child: UnreadCountBadge(
                 count: unreadCount,
-                backgroundColor: swatch,
+                channelIdForBackground: subscription.streamId,
                 bold: true)),
           ] else if (showMutedUnreadBadge) ...[
             const SizedBox(width: 12),

lib/widgets/unread_count_badge.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/widgets.dart';
 
-import 'channel_colors.dart';
+import 'store.dart';
 import 'text.dart';
 import 'theme.dart';
 
@@ -12,33 +12,42 @@ class UnreadCountBadge extends StatelessWidget {
   const UnreadCountBadge({
     super.key,
     required this.count,
-    required this.backgroundColor,
+    required this.channelIdForBackground,
     this.bold = false,
   });
 
   final int count;
   final bool bold;
 
-  /// An optional [ChannelColorSwatch], to override the default color scheme
-  /// with a channel-colorized one.
+  /// An optional [Subscription.streamId], for a channel-colorized background.
   ///
-  /// Pass this if the badge represents messages in one specific stream.
-  /// The appropriate color from the swatch will be used.
-  final ChannelColorSwatch? backgroundColor;
+  /// Useful when this badge represents messages in one specific channel.
+  ///
+  /// If null, the default neutral background will be used.
+  final int? channelIdForBackground;
 
   @override
   Widget build(BuildContext context) {
+    final store = PerAccountStoreWidget.of(context);
     final designVariables = DesignVariables.of(context);
 
-    final effectiveBackgroundColor = switch (backgroundColor) {
-      ChannelColorSwatch(unreadCountBadgeBackground: var color) => color,
-      null => designVariables.bgCounterUnread,
-    };
+    final Color textColor;
+    final Color backgroundColor;
+    if (channelIdForBackground != null) {
+      textColor = designVariables.unreadCountBadgeTextForChannel;
+
+      final subscription = store.subscriptions[channelIdForBackground!];
+      final swatch = colorSwatchFor(context, subscription);
+      backgroundColor = swatch.unreadCountBadgeBackground;
+    } else {
+      textColor = designVariables.labelCounterUnread;
+      backgroundColor = designVariables.bgCounterUnread;
+    }
 
     return DecoratedBox(
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(3),
-        color: effectiveBackgroundColor,
+        color: backgroundColor,
       ),
       child: Padding(
         padding: const EdgeInsets.fromLTRB(4, 0, 4, 1),
@@ -47,9 +56,7 @@ class UnreadCountBadge extends StatelessWidget {
             fontSize: 16,
             height: (18 / 16),
             fontFeatures: const [FontFeature.enable('smcp')], // small caps
-            color: backgroundColor is ChannelColorSwatch
-              ? designVariables.unreadCountBadgeTextForChannel
-              : designVariables.labelCounterUnread,
+            color: textColor,
           ).merge(weightVariableTextStyle(context,
               wght: bold ? 600 : null)),
           count.toString())));

test/widgets/checks.dart

@@ -95,7 +95,7 @@ extension PerAccountStoreWidgetChecks on Subject<PerAccountStoreWidget> {
 extension UnreadCountBadgeChecks on Subject<UnreadCountBadge> {
   Subject<int> get count => has((b) => b.count, 'count');
   Subject<bool> get bold => has((b) => b.bold, 'bold');
-  Subject<Color?> get backgroundColor => has((b) => b.backgroundColor, 'backgroundColor');
+  Subject<int?> get channelIdForBackground => has((b) => b.channelIdForBackground, 'channelIdForBackground');
 }
 
 extension UnicodeEmojiWidgetChecks on Subject<UnicodeEmojiWidget> {

test/widgets/subscription_list_test.dart

@@ -2,6 +2,7 @@ import 'package:checks/checks.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_checks/flutter_checks.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:legacy_checks/legacy_checks.dart';
 import 'package:zulip/api/model/initial_snapshot.dart';
 import 'package:zulip/api/model/model.dart';
 import 'package:zulip/widgets/color.dart';
@@ -273,8 +274,12 @@ void main() {
     check(getItemCount()).equals(1);
     check(tester.widget<Icon>(find.byIcon(iconDataForStream(stream))).color)
       .isNotNull().isSameColorAs(swatch.iconOnPlainBackground);
-    check(tester.widget<UnreadCountBadge>(find.byType(UnreadCountBadge)).backgroundColor)
-      .isNotNull().isSameColorAs(swatch);
+
+    final unreadCountBadgeRenderBox = tester.renderObject<RenderBox>(find.byType(UnreadCountBadge));
+    check(unreadCountBadgeRenderBox).legacyMatcher(
+      // `paints` isn't a [Matcher] so we wrap it with `equals`;
+      // awkward but it works
+      equals(paints..rrect(color: swatch.unreadCountBadgeBackground)));
   });
 
   testWidgets('muted streams are displayed as faded', (tester) async {

test/widgets/unread_count_badge_test.dart

@@ -3,10 +3,13 @@ import 'package:flutter_checks/flutter_checks.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter_test/flutter_test.dart';
+import 'package:zulip/api/model/model.dart';
 import 'package:zulip/widgets/channel_colors.dart';
 import 'package:zulip/widgets/unread_count_badge.dart';
 
+import '../example_data.dart' as eg;
 import '../model/binding.dart';
+import '../model/test_store.dart';
 import 'test_app.dart';
 
 void main() {
@@ -15,16 +18,25 @@ void main() {
   group('UnreadCountBadge', () {
     Future<void> prepare(WidgetTester tester, {
       required Widget child,
+      Subscription? subscription,
     }) async {
       addTearDown(testBinding.reset);
+      await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot());
+      final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
+      if (subscription != null) {
+        await store.addStream(ZulipStream.fromSubscription(subscription));
+        await store.addSubscription(subscription);
+      }
       await tester.pumpWidget(TestZulipApp(
+        accountId: eg.selfAccount.id,
         child: child));
       await tester.pump();
+      await tester.pump();
     }
 
     testWidgets('smoke test; no crash', (tester) async {
       await prepare(tester,
-        child: UnreadCountBadge(count: 1, backgroundColor: null));
+        child: const UnreadCountBadge(count: 1, channelIdForBackground: null));
       tester.widget(find.text("1"));
     });
 
@@ -37,15 +49,19 @@ void main() {
 
       testWidgets('default color', (tester) async {
         await prepare(tester,
-          child: UnreadCountBadge(count: 1, backgroundColor: null));
+          child: UnreadCountBadge(count: 1, channelIdForBackground: null));
         check(findBackgroundColor(tester)).isNotNull().isSameColorAs(const Color(0x26666699));
       });
 
       testWidgets('stream color', (tester) async {
-        final swatch = ChannelColorSwatch.light(0xff76ce90);
+        final subscription = eg.subscription(eg.stream(), color: 0xff76ce90);
         await prepare(tester,
-          child: UnreadCountBadge(count: 1, backgroundColor: swatch));
-        check(findBackgroundColor(tester)).isNotNull().isSameColorAs(swatch.unreadCountBadgeBackground);
+          subscription: subscription,
+          child: UnreadCountBadge(
+            count: 1,
+            channelIdForBackground: subscription.streamId));
+        check(findBackgroundColor(tester)).isNotNull()
+          .isSameColorAs(ChannelColorSwatch.light(0xff76ce90).unreadCountBadgeBackground);
       });
     });
   });