subscription_list: Show muted streams as faded in streams list

Fixes: zulip#424

Author: Khader-1

lib/widgets/subscription_list.dart

@@ -220,32 +220,42 @@ class SubscriptionItem extends StatelessWidget {
         },
         child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
           const SizedBox(width: 16),
-          Padding(
-            padding: const EdgeInsets.symmetric(vertical: 11),
-            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: subscription.isMuted ? 0.55 : 1,
+              child: Row(children: [
+                Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 11),
+                  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))),
+              ]))),
           if (unreadCount > 0) ...[
             const SizedBox(width: 12),
             // TODO(#747) show @-mention indicator when it applies
-            UnreadCountBadge(count: unreadCount, backgroundColor: swatch, bold: true),
+            Opacity(
+              opacity: subscription.isMuted ? 0.55 : 1,
+              child: UnreadCountBadge(
+                count: unreadCount,
+                backgroundColor: swatch,
+                bold: true)),
           ],
           const SizedBox(width: 16),
         ])));

test/widgets/subscription_list_test.dart

@@ -202,4 +202,47 @@ 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: [
+        UserTopicItem(
+          streamId: stream1.streamId,
+          topicName: 'a',
+          lastUpdated: 1234567890,
+          visibilityPolicy: UserTopicVisibilityPolicy.unmuted,
+        ),
+        UserTopicItem(
+          streamId: stream2.streamId,
+          topicName: 'b',
+          lastUpdated: 1234567890,
+          visibilityPolicy: 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);
+  });
 }