subscription_list: Show muted streams as faded in streams list

Fixes: zulip#424

Author: Khader-1

lib/widgets/subscription_list.dart

@@ -175,10 +175,17 @@ class _SubscriptionList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final unmutedSubs = subscriptions.where((element) => !element.isMuted);
+    final mutedSubs = subscriptions.where((element) => element.isMuted);
     return SliverList.builder(
       itemCount: subscriptions.length,
       itemBuilder: (BuildContext context, int index) {
-        final subscription = subscriptions[index];
+        Subscription? subscription;
+        if (index < unmutedSubs.length) {
+          subscription = unmutedSubs.elementAt(index);
+        } else {
+          subscription = mutedSubs.elementAt(index - unmutedSubs.length);
+        }
         final unreadCount = unreadsModel!.countInStream(subscription.streamId);
         // TODO(#712): if stream muted, show a dot for unreads
         return SubscriptionItem(subscription: subscription, unreadCount: unreadCount);
@@ -212,28 +219,34 @@ 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(#384) show @-mention indicator when it applies

test/widgets/subscription_list_test.dart

@@ -132,6 +132,18 @@ void main() {
       ]);
       check(listedStreamIds(tester)).deepEquals([1, 2, 3, 4, 5, 6]);
     });
+
+    testWidgets('muted subscriptions come at last', (tester) async {
+      await setupStreamListPage(tester, subscriptions: [
+        eg.subscription(eg.stream(streamId: 1, name: 'a'), isMuted: true, pinToTop: true),
+        eg.subscription(eg.stream(streamId: 2, name: 'b'), isMuted: false, pinToTop: true),
+        eg.subscription(eg.stream(streamId: 3, name: 'c'), isMuted: true, pinToTop: true),
+        eg.subscription(eg.stream(streamId: 4, name: 'd'), isMuted: false, pinToTop: false),
+        eg.subscription(eg.stream(streamId: 5, name: 'e'), isMuted: true, pinToTop: false),
+        eg.subscription(eg.stream(streamId: 6, name: 'f'), isMuted: false, pinToTop: false),
+      ]);
+      check(listedStreamIds(tester)).deepEquals([2, 1, 3, 4, 6, 5]);
+    });
   });
 
   testWidgets('unread badge shows with unreads', (tester) async {
@@ -190,4 +202,43 @@ void main() {
     check(tester.widget<UnreadCountBadge>(find.byType(UnreadCountBadge)).backgroundColor)
       .equals(swatch);
   });
+
+  testWidgets('muted streams are displayed as faded', (tester) async {
+    final stream1 = eg.stream(name: 'Stream 1');
+    final stream2 = eg.stream(streamId: 2, 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);
+
+    final stream1Finder = find.text('Stream 1');
+    final stream1Opacity = tester.widget<Opacity>(
+      find.ancestor(of: stream1Finder, matching: find.byType(Opacity))).opacity;
+    check(stream1Opacity).equals(0.55);
+
+    final stream2Finder = find.text('Stream 2');
+    final stream2Opacity = tester.widget<Opacity>(
+      find.ancestor(of: stream2Finder, matching: find.byType(Opacity))).opacity;
+    check(stream2Opacity).equals(1.0);
+  });
 }