topic_list: Use UnreadCountBadge, replacing ad hoc private widget

The private widget, following the Figma, made the badge a bit more
compact, with 1px less padding on each side, and a font size smaller
by 1 (but with the same line height).

That was helpful for keeping the rows at uniform height regardless
of unreads (without text scaling anyway)...but I've accomplished
that by adding a minimum row height (40), in the previous commit.

Author: chrisbobbe

lib/widgets/topic_list.dart

@@ -14,6 +14,7 @@ import 'page.dart';
 import 'store.dart';
 import 'text.dart';
 import 'theme.dart';
+import 'unread_count_badge.dart';
 
 class TopicListPage extends StatelessWidget {
   const TopicListPage({super.key, required this.streamId});
@@ -301,7 +302,10 @@ class _TopicItem extends StatelessWidget {
                   children: [
                     if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign),
                     if (visibilityIcon != null) _IconMarker(icon: visibilityIcon),
-                    if (unreadCount > 0) _UnreadCountBadge(count: unreadCount),
+                    if (unreadCount > 0)
+                      UnreadCountBadge(
+                        count: unreadCount,
+                        channelIdForBackground: null),
                   ])),
               ])),
         )));
@@ -324,31 +328,3 @@ class _IconMarker extends StatelessWidget {
       color: designVariables.textMessage.withFadedAlpha(0.4));
   }
 }
-
-// This is adapted from [UnreadCountBadge].
-// TODO(#1406) see if we can reuse this in redesign
-// TODO(#1527) see if we can reuse this in redesign
-class _UnreadCountBadge extends StatelessWidget {
-  const _UnreadCountBadge({required this.count});
-
-  final int count;
-
-  @override
-  Widget build(BuildContext context) {
-    final designVariables = DesignVariables.of(context);
-
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(5),
-        color: designVariables.bgCounterUnread,
-      ),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
-        child: Text(count.toString(),
-          style: TextStyle(
-            fontSize: 15,
-            height: 16 / 15,
-            color: designVariables.labelCounterUnread,
-          ).merge(weightVariableTextStyle(context, wght: 500)))));
-  }
-}

lib/widgets/unread_count_badge.dart

@@ -13,8 +13,11 @@ import 'theme.dart';
 ///
 /// Currently this widget supports only those other contexts (not the main menu)
 /// and only the component's "kind=unread" variant (not "kind=quantity").
-/// For example, the "Channels" page:
+/// For example, the "Channels" page and the topic-list page:
 ///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6205-26001&m=dev
+///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6823-37113&m=dev
+/// (We use this for the topic-list page even though the Figma makes it a bit
+/// more compact there…the inconsistency seems worse and might be accidental.)
 // TODO support the main-menu context, update dartdoc
 // TODO support the "kind=quantity" variant, update dartdoc
 class UnreadCountBadge extends StatelessWidget {