use M3EToggleButtonGroup

lib/widgets/member_list.dart

@@ -1,6 +1,8 @@
+import "package:fast_immutable_collections/fast_immutable_collections.dart";
 import "package:flutter/material.dart";
 import "package:flutter_hooks/flutter_hooks.dart";
 import "package:hooks_riverpod/hooks_riverpod.dart";
+import "package:m3e_buttons/m3e_buttons.dart";
 import "package:material_segmented_list/material_segmented_list.dart";
 import "package:nexus/controllers/members_grouped_controller.dart";
 import "package:nexus/helpers/extensions/get_localpart.dart";
@@ -20,6 +22,18 @@ class MemberList extends HookConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final status = useState(MembershipStatus.join);
 
+    final membersData = ref.watch(
+      MembersGroupedController.provider(
+        .new(roomId: roomId, status: status.value),
+      ),
+    );
+
+    final options = {
+      "Joined": MembershipStatus.join,
+      "Invited": MembershipStatus.invite,
+      "Banned": MembershipStatus.ban,
+    };
+
     return Drawer(
       shape: Border(),
       child: Column(
@@ -38,38 +52,44 @@ class MemberList extends HookConsumerWidget {
                 ),
             ],
           ),
-          Wrap(
+          M3EToggleButtonGroup(
-            alignment: .center,
+            type: M3EButtonGroupType.connected,
-            spacing: 8,
+            selectedIndex: options.values.toIList().indexOf(status.value),
-            runSpacing: 8,
+            onSelectedIndexChanged: (index) =>
-            children: [
+                status.value = options.values.elementAt(index ?? 0),
-              FilterChip(
+            // overflow: M3EButtonGroupOverflow.menu,
-                label: Text("Joined"),
+            actions: options
-                onSelected: (value) => status.value = .join,
+                .mapTo(
-                selected: status.value == .join,
+                  (name, value) => M3EToggleButtonGroupAction(
+                    checkedLabel: Text(
+                      "$name${switch (membersData) {
+                        AsyncData(:final value) || AsyncLoading(:final value?) => " (${value.values.expand((element) => element).length})",
+                        _ => "",
+                      }}",
                     ),
-              FilterChip(
+                    label: Text(name),
-                label: Text("Invited"),
-                onSelected: (value) => status.value = .invite,
-                selected: status.value == .invite,
                   ),
-              FilterChip(
+                )
-                label: Text("Banned"),
+                .toList(),
-                onSelected: (value) => status.value = .ban,
-                selected: status.value == .ban,
           ),
-            ],
+
-          ),
+          switch (membersData) {
-          switch (ref.watch(
-            MembersGroupedController.provider(
-              .new(roomId: roomId, status: status.value),
-            ),
-          )) {
             AsyncError(:final error, :final stackTrace) => ErrorDialog(
               error,
               stackTrace,
             ),
-            AsyncData(:final value) || AsyncLoading(:final value?) => Expanded(
+            AsyncData(:final value) || AsyncLoading(:final value?) =>
+              value.isEmpty
+                  ? Center(
+                      child: Padding(
+                        padding: .symmetric(vertical: 18),
+                        child: Text(
+                          "No ${options.keys.toIList()[options.values.toIList().indexOf(status.value)]} Members",
+                          style: Theme.of(context).textTheme.headlineSmall,
+                        ),
+                      ),
+                    )
+                  : Expanded(
                       child: ListView(
                         padding: .all(12),
                         children: [
@@ -103,7 +123,8 @@ class MemberList extends HookConsumerWidget {
                                           //   globalPosition: details.globalPosition,
                                           // ),
                                           title: Text(
-                                    displayName ?? member.stateKey!.localpart,
+                                            displayName ??
+                                                member.stateKey!.localpart,
                                             overflow: .ellipsis,
                                             style: .new(
                                               color: member.stateKey!.colorHash,
@@ -116,7 +137,8 @@ class MemberList extends HookConsumerWidget {
                                           ),
                                           leading: AvatarOrHash(
                                             avatarUrl,
-                                    displayName ?? member.sender.localpart,
+                                            displayName ??
+                                                member.sender.localpart,
                                           ),
                                         ),
                                       _ => throw Exception(

pubspec.lock

@@ -299,6 +299,14 @@ packages:
       url: "https://github.com/Henry-Hiles/emoji_text_field"
     source: git
     version: "1.0.0"
+  equatable:
+    dependency: transitive
+    description:
+      name: equatable
+      sha256: "3e0141505477fd8ad55d6eb4e7776d3fe8430be8e497ccb1521370c3f21a3e2b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.8"
   fake_async:
     dependency: transitive
     description:
@@ -744,6 +752,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.0"
+  m3e_buttons:
+    dependency: "direct main"
+    description:
+      name: m3e_buttons
+      sha256: "50cdf9ba30fb3ab529afafb0e837484549f8599f1f109ac07da50951febaace1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.3"
   matcher:
     dependency: transitive
     description:
@@ -856,6 +872,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.0"
+  motor:
+    dependency: transitive
+    description:
+      name: motor
+      sha256: cbd49f21b00e568c2b1a55f134ed803614a107782f4fea7769693bca32940c58
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   native_toolchain_c:
     dependency: transitive
     description:

pubspec.yaml

@@ -65,6 +65,7 @@ dependencies:
   media_kit_libs_video: 1.0.7
   measure_size: ^5.0.2
   material_segmented_list: ^1.0.5
+  m3e_buttons: ^0.0.3
   
 dev_dependencies:
   build_runner: 2.15.0