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 {
+
+    testOpacityForStreamAndBadge(String streamName, double opacity) {
+      final streamFinder = find.text(streamName);
+      final streamOpacity = tester.widget<Opacity>(
+        find.ancestor(of: streamFinder, matching: find.byType(Opacity))).opacity;
+      final badgeOpacity = tester.widget<Opacity>(find.ancestor(of: find.descendant(
+        of: find.ancestor(of: streamFinder, matching: find.byType(Row)),
+        matching: find.byType(UnreadCountBadge)), matching: find.byType(Opacity))).opacity;
+      check(streamOpacity).equals(opacity);
+      check(badgeOpacity).equals(opacity);
+    }
+
+    final stream1 = eg.stream(name: 'Stream 1');
+    final stream2 = eg.stream(name: 'Stream 2');
+    final unreadMsgs = eg.unreadMsgs(streams: [
+      UnreadStreamSnapshot(streamId: stream1.streamId, topic: 'a', unreadMessageIds: [1, 2]),
+      UnreadStreamSnapshot(streamId: stream2.streamId, topic: 'b', unreadMessageIds: [3]),
+    ]);
+    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: unreadMsgs);
+
+      testOpacityForStreamAndBadge('Stream 1', 0.55);
+      testOpacityForStreamAndBadge('Stream 2', 1.0);
+  });
 }