channel rows: Use channelTopicLabelSpan for consistent alignment.

Author: manthansubhash01

lib/widgets/all_channels.dart

@@ -106,20 +106,21 @@ class AllChannelsListEntry extends StatelessWidget {
       child: ConstrainedBox(constraints: const BoxConstraints(minHeight: 44),
         child: Padding(padding: const EdgeInsetsDirectional.only(start: 8, end: 12),
           child: Row(spacing: 6, children: [
-            Icon(
-              size: 20,
-              color: colorSwatchFor(context, subscription).iconOnPlainBackground,
-              iconDataForStream(channel)),
             Expanded(
-              child: Text(
+              child: Text.rich(
                 maxLines: 1,
                 overflow: TextOverflow.ellipsis,
                 style: TextStyle(
                   color: designVariables.textMessage,
                   fontSize: 17,
                   height: 20 / 17,
                 ).merge(weightVariableTextStyle(context, wght: 600)),
-                channel.name)),
+                channelTopicLabelSpan(
+                  context: context,
+                  channelId: channel.streamId,
+                  fontSize: 16,
+                  color: designVariables.unreadCountBadgeTextForChannel,
+                ))),
             if (hasContentAccess) _SubscribeToggle(channel: channel),
           ]))));
   }

lib/widgets/inbox.dart

@@ -305,7 +305,8 @@ abstract class _HeaderItem extends StatelessWidget {
               ).merge(weightVariableTextStyle(context, wght: 600)),
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
-              title(zulipLocalizations)))),
+              title(zulipLocalizations))
+              )),
           const SizedBox(width: 12),
           if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign),
           Padding(padding: const EdgeInsetsDirectional.only(end: 16),
@@ -480,6 +481,53 @@ class _StreamHeaderItem extends _HeaderItem with _LongPressable {
   Future<void> onLongPress() async {
     showChannelActionSheet(sectionContext, channelId: subscription.streamId);
   }
+  @override
+  Widget build(BuildContext context) {
+    final zulipLocalizations = ZulipLocalizations.of(context);
+    final designVariables = DesignVariables.of(context);
+    return Material(
+      color: collapsed
+        ? designVariables.background // TODO(design) check if this is the right variable
+        : uncollapsedBackgroundColor(context),
+      child: InkWell(
+        // TODO use onRowTap to handle taps that are not on the collapse button.
+        //   Probably we should give the collapse button a 44px or 48px square
+        //   touch target:
+        //     <https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/flutter.3A.20Mark-as-read/near/1680973>
+        //   But that's in tension with the Figma, which gives these header rows
+        //   40px min height.
+        onTap: onCollapseButtonTap,
+        onLongPress: onLongPress,
+        child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
+          Padding(padding: const EdgeInsets.all(10),
+            child: Icon(size: 20, color: designVariables.sectionCollapseIcon,
+              collapsed ? ZulipIcons.arrow_right : ZulipIcons.arrow_down)),
+          const SizedBox(width: 5),
+          Expanded(child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 4),
+            child: Text.rich(
+              style: TextStyle(
+                fontSize: 17,
+                height: (20 / 17),
+                // TODO(design) check if this is the right variable
+                color: designVariables.labelMenuButton,
+              ).merge(weightVariableTextStyle(context, wght: 600)),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              channelTopicLabelSpan(
+                context: context,
+                channelId: subscription.streamId,
+                fontSize: 16,
+                color: designVariables.unreadCountBadgeTextForChannel,
+              )))),
+          const SizedBox(width: 12),
+          if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign),
+          Padding(padding: const EdgeInsetsDirectional.only(end: 16),
+            child: UnreadCountBadge(
+              channelIdForBackground: channelId,
+              count: count)),
+        ])));
+  }
 }
 
 class _StreamSection extends StatelessWidget {

lib/widgets/subscription_list.dart

@@ -305,13 +305,6 @@ class SubscriptionItem extends StatelessWidget {
           showTopicListButton: showTopicListButtonInActionSheet),
         child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
           const SizedBox(width: 16),
-          Padding(
-            padding: const EdgeInsets.symmetric(vertical: 11),
-            child: Opacity(
-              opacity: opacity,
-              child: Icon(size: 18, color: swatch.iconOnPlainBackground,
-                iconDataForStream(subscription)))),
-          const SizedBox(width: 5),
           Expanded(
             child: Padding(
               padding: const EdgeInsets.symmetric(vertical: 10),
@@ -320,7 +313,7 @@ class SubscriptionItem extends StatelessWidget {
               //   https://github.com/zulip/zulip-flutter/pull/397#pullrequestreview-1742524205
               child: Opacity(
                 opacity: opacity,
-                child: Text(
+                child: Text.rich(
                   style: TextStyle(
                     fontSize: 18,
                     height: (20 / 18),
@@ -330,7 +323,12 @@ class SubscriptionItem extends StatelessWidget {
                       wght: hasUnreads && !subscription.isMuted ? 600 : null)),
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
-                  subscription.name)))),
+                  channelTopicLabelSpan(
+                    context: context,
+                    channelId: subscription.streamId,
+                    fontSize: 16,
+                    color: designVariables.unreadCountBadgeTextForChannel,
+                  ))))),
           if (hasUnreads) ...[
             const SizedBox(width: 12),
             // TODO(#747) show @-mention indicator when it applies

test/widgets/all_channels_test.dart

@@ -193,7 +193,7 @@ void main() {
       final colorSwatch = colorSwatchFor(element, maybeSubscription);
       check(icon).color.equals(colorSwatch.iconOnPlainBackground);
 
-      check(findInRow(find.text(channel.name))).findsOne();
+      check(findInRow(find.textContaining(channel.name, findRichText: true))).findsOne();
 
       final maybeToggle = tester.widgetList<Toggle>(
         findInRow(find.byType(Toggle))).singleOrNull;
@@ -230,8 +230,10 @@ void main() {
     await transitionDurationObserver.pumpPastTransition(tester);
 
     check(find.descendant(
-      of: find.byType(MessageListPage),
-      matching: find.text('some-channel')),
+      of: find.descendant(
+        of: find.byType(MessageListPage),
+        matching: find.byType(ZulipAppBar)),
+      matching: find.textContaining('some-channel', findRichText: true)),
     ).findsOne();
   });
 

test/widgets/inbox_test.dart

@@ -122,7 +122,7 @@ void main() {
   /// Find a row with the given label.
   Widget? findRowByLabel(WidgetTester tester, String label) {
     final rowLabel = tester.widgetList(
-      find.text(label),
+      find.textContaining(label, findRichText: true),
     ).firstOrNull;
     if (rowLabel == null) {
       return null;
@@ -550,7 +550,7 @@ void main() {
           check(collapseIcon).icon.equals(ZulipIcons.arrow_down);
           final streamIcon = findStreamHeaderIcon(tester, streamId);
           check(streamIcon).color.isNotNull().isSameColorAs(
-            ChannelColorSwatch.light(subscription.color).iconOnBarBackground);
+            ChannelColorSwatch.light(subscription.color).iconOnPlainBackground);
           check(streamHeaderBackgroundColor(tester, streamId))
             .isNotNull().isSameColorAs(ChannelColorSwatch.light(subscription.color).barBackground);
           check(tester.widgetList(findSectionContent)).isNotEmpty();

test/widgets/subscription_list_test.dart

@@ -283,7 +283,7 @@ void main() {
 
   testWidgets('muted streams are displayed as faded', (tester) async {
     void checkOpacityForStreamAndBadge(String streamName, int unreadCount, double opacity) {
-      final streamFinder = find.text(streamName);
+      final streamFinder = find.textContaining(streamName, findRichText: true);
       final streamOpacity = tester.widget<Opacity>(
         find.ancestor(of: streamFinder, matching: find.byType(Opacity)));
       final badgeFinder = find.text('$unreadCount');
@@ -316,8 +316,10 @@ void main() {
 
   testWidgets('stream name of unmuted streams with unmuted unreads is bold', (tester) async {
     void checkStreamNameWght(String streamName, double? expectedWght) {
-      final streamFinder = find.text(streamName);
-      final wght = wghtFromTextStyle(tester.widget<Text>(streamFinder).style!);
+      final streamFinder = find.textContaining(streamName, findRichText: true);
+      final textWidget = tester.widget(streamFinder);
+      final TextStyle? style = textWidget is Text ? textWidget.style : (textWidget as RichText).text.style;
+      final wght = wghtFromTextStyle(style!);
       check(wght).equals(expectedWght);
     }