improve UI of member list, sort by power level

lib/controllers/members_grouped_controller.dart

@@ -0,0 +1,49 @@
+import "package:fast_immutable_collections/fast_immutable_collections.dart";
+import "package:flutter_riverpod/flutter_riverpod.dart";
+import "package:nexus/controllers/members_by_status_controller.dart";
+import "package:nexus/controllers/rooms_controller.dart";
+import "package:nexus/models/configs/members_by_status_config.dart";
+import "package:nexus/models/content/content.dart";
+import "package:nexus/models/content/power_levels.dart";
+import "package:nexus/models/event.dart";
+
+class MembersGroupedController extends AsyncNotifier<IMap<int, ISet<Event>>> {
+  final MembersByStatusConfig config;
+  MembersGroupedController(this.config);
+
+  @override
+  Future<IMap<int, ISet<Event>>> build() async {
+    final event = ref.watch(
+      RoomsController.provider.select((value) {
+        final room = value[config.roomId];
+        final eventRowId = room?.state[EventType.powerLevels.type]?[""];
+        return eventRowId == null ? null : room?.events[eventRowId];
+      }),
+    );
+
+    final content = event?.content is PowerLevelsContent
+        ? event!.content as PowerLevelsContent
+        : PowerLevelsContent();
+
+    final members = await ref.watch(
+      MembersByStatusController.provider(config).future,
+    );
+
+    return members.fold<IMap<int, ISet<Event>>>(.new(), (result, event) {
+      final groupKey = content.users[event.stateKey!] ?? content.usersDefault;
+
+      return result.update(
+        groupKey,
+        (value) => value.add(event),
+        ifAbsent: () => .new({event}),
+      );
+    });
+  }
+
+  static final provider =
+      AsyncNotifierProvider.family<
+        MembersGroupedController,
+        IMap<int, ISet<Event>>,
+        MembersByStatusConfig
+      >(MembersGroupedController.new);
+}

lib/widgets/member_list.dart

@@ -1,13 +1,14 @@
 import "package:flutter/material.dart";
 import "package:flutter_hooks/flutter_hooks.dart";
 import "package:hooks_riverpod/hooks_riverpod.dart";
-import "package:nexus/controllers/members_by_status_controller.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";
-import "package:nexus/helpers/extensions/show_user_popover.dart";
 import "package:nexus/helpers/extensions/string_to_color.dart";
 import "package:nexus/models/content/membership.dart";
 import "package:nexus/models/membership_status.dart";
 import "package:nexus/widgets/avatar_or_hash.dart";
+import "package:nexus/widgets/divider_text.dart";
 import "package:nexus/widgets/error_dialog.dart";
 import "package:nexus/widgets/loading.dart";
 
@@ -18,11 +19,6 @@ class MemberList extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final status = useState(MembershipStatus.join);
-    final membersProvider = ref.watch(
-      MembersByStatusController.provider(
-        .new(roomId: roomId, status: status.value),
-      ),
-    );
 
     return Drawer(
       shape: Border(),
@@ -64,50 +60,67 @@ class MemberList extends HookConsumerWidget {
               ),
             ],
           ),
-          switch (membersProvider) {
+          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(
               child: ListView(
-                children: value
+                padding: .all(12),
-                    .map(
+                children: [
-                      (member) => switch (member.content) {
+                  for (final MapEntry(key: powerLevel, value: members)
-                        MembershipContent(
+                      in value.toEntryIList(
-                          :final avatarUrl,
+                        compare: (a, b) => (b?.key ?? double.negativeInfinity)
-                          :final displayName,
+                            .compareTo(a?.key ?? double.negativeInfinity),
-                        ) =>
+                      )) ...[
-                          InkWell(
+                    DividerText("Power Level $powerLevel"),
-                            onTapUp: (details) => context.showUserPopover(
+                    SegmentedListSection(
-                              member.content as MembershipContent,
+                      children: members
-                              member.stateKey!,
+                          .map(
-                              roomId: roomId,
+                            (member) => switch (member.content) {
-                              globalPosition: details.globalPosition,
+                              MembershipContent(
-                            ),
+                                :final avatarUrl,
-                            child: ListTile(
+                                :final displayName,
-                              leading: AvatarOrHash(
+                              ) =>
-                                avatarUrl,
+                                SegmentedListTile(
-                                displayName ?? member.sender.localpart,
+                                  onTap: () {},
-                              ),
+                                  //  context.showUserPopover(
-                              title: Text(
+                                  //   member.content as MembershipContent,
-                                displayName ?? member.stateKey!.localpart,
+                                  //   member.stateKey!,
-                                overflow: .ellipsis,
+                                  //   roomId: roomId,
-                                style: .new(
+                                  //   globalPosition: details.globalPosition,
-                                  color: member.stateKey!.colorHash,
+                                  // ),
-                                  fontWeight: .bold,
+                                  title: Text(
+                                    displayName ?? member.stateKey!.localpart,
+                                    overflow: .ellipsis,
+                                    style: .new(
+                                      color: member.stateKey!.colorHash,
+                                      fontWeight: .bold,
+                                    ),
+                                  ),
+                                  subtitle: Text(
+                                    member.stateKey!,
+                                    overflow: .ellipsis,
+                                  ),
+                                  leading: AvatarOrHash(
+                                    avatarUrl,
+                                    displayName ?? member.sender.localpart,
+                                  ),
                                 ),
+                              _ => throw Exception(
+                                "Member content was not MembershipContent",
                               ),
-                              subtitle: Text(
+                            },
-                                member.stateKey!,
+                          )
-                                overflow: .ellipsis,
+                          .toList(),
-                              ),
+                    ),
-                            ),
+                  ],
-                          ),
+                ],
-                        _ => SizedBox.shrink(),
-                      },
-                    )
-                    .toList(),
               ),
             ),
             AsyncLoading _ => Loading(),

pubspec.lock

@@ -760,6 +760,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.13.0"
+  material_segmented_list:
+    dependency: "direct main"
+    description:
+      name: material_segmented_list
+      sha256: "384bfd41a78e745397ceff1dd39700961e6a5419ad911d1797bcc13ea3824241"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.5"
   measure_size:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -64,6 +64,7 @@ dependencies:
   media_kit_video: 2.0.1
   media_kit_libs_video: 1.0.7
   measure_size: ^5.0.2
+  material_segmented_list: ^1.0.5
   
 dev_dependencies:
   build_runner: 2.15.0