subscription_list: Show muted streams as faded in streams list

Fixes: zulip#424

Author: Khader-1

lib/widgets/subscription_list.dart

@@ -209,6 +209,7 @@ class SubscriptionItem extends StatelessWidget {
   Widget build(BuildContext context) {
     final swatch = colorSwatchFor(context, subscription);
     final hasUnreads = (unreadCount > 0);
+    final opacity = subscription.isMuted ? 0.55 : 1.0;
     return Material(
       // TODO(#95) need dark-theme color
       color: Colors.white,
@@ -222,30 +223,42 @@ class SubscriptionItem extends StatelessWidget {
           const SizedBox(width: 16),
           Padding(
             padding: const EdgeInsets.symmetric(vertical: 11),
-            child: Icon(size: 18, color: swatch.iconOnPlainBackground,
-              iconDataForStream(subscription))),
+            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),
               // TODO(design): unclear whether bold text is applied to all subscriptions
               //   or only those with unreads:
               //   https://github.com/zulip/zulip-flutter/pull/397#pullrequestreview-1742524205
-              child: Text(
-                style: const TextStyle(
-                  fontSize: 18,
-                  height: (20 / 18),
-                  // TODO(#95) need dark-theme color
-                  color: Color(0xFF262626),
-                ).merge(weightVariableTextStyle(context,
-                    wght: hasUnreads ? 600 : null)),
-                maxLines: 1,
-                overflow: TextOverflow.ellipsis,
-                subscription.name))),
+              child: Opacity(
+                opacity: opacity,
+                child: Text(
+                  style: const TextStyle(
+                    fontSize: 18,
+                    height: (20 / 18),
+                    // TODO(#95) need dark-theme color
+                    color: Color(0xFF262626),
+                  ).merge(weightVariableTextStyle(context,
+                      wght: hasUnreads ? 600 : null)),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  subscription.name),
+              ))),
           if (unreadCount > 0) ...[
             const SizedBox(width: 12),
             // TODO(#747) show @-mention indicator when it applies
-            UnreadCountBadge(count: unreadCount, backgroundColor: swatch, bold: true),
+            Opacity(
+              opacity: opacity,
+              child: UnreadCountBadge(
+                count: unreadCount,
+                backgroundColor: swatch,
+                bold: true)),
           ],
           const SizedBox(width: 16),
         ])));

test/widgets/subscription_list_test.dart

@@ -202,4 +202,37 @@ void main() {
     check(tester.widget<UnreadCountBadge>(find.byType(UnreadCountBadge)).backgroundColor)
       .equals(swatch);
   });
+
+  testWidgets('muted streams are displayed as faded', (tester) async {
+    void checkOpacityForStreamAndBadge(String streamName, int unreadCount, double opacity) {
+      final streamFinder = find.text(streamName);
+      final streamOpacity = tester.widget<Opacity>(
+        find.ancestor(of: streamFinder, matching: find.byType(Opacity)));
+      final badgeFinder = find.text('$unreadCount');
+      final badgeOpacity = tester.widget<Opacity>(
+        find.ancestor(of: badgeFinder, matching: find.byType(Opacity)));
+      check(streamOpacity.opacity).equals(opacity);
+      check(badgeOpacity.opacity).equals(opacity);
+    }
+
+    final stream1 = eg.stream(name: 'Stream 1');
+    final stream2 = eg.stream(name: 'Stream 2');
+    await setupStreamListPage(tester,
+      subscriptions: [
+        eg.subscription(stream1, isMuted: true),
+        eg.subscription(stream2, isMuted: false)
+      ],
+      userTopics: [
+        eg.userTopicItem(stream1, 'a', UserTopicVisibilityPolicy.unmuted),
+        eg.userTopicItem(stream2, 'b', UserTopicVisibilityPolicy.unmuted),
+      ],
+      unreadMsgs: eg.unreadMsgs(streams: [
+        UnreadStreamSnapshot(streamId: stream1.streamId, topic: 'a', unreadMessageIds: [1, 2]),
+        UnreadStreamSnapshot(streamId: stream2.streamId, topic: 'b', unreadMessageIds: [3])
+      ]),
+    );
+
+    checkOpacityForStreamAndBadge('Stream 1', 2, 0.55);
+    checkOpacityForStreamAndBadge('Stream 2', 1, 1.0);
+  });
 }