chore: make non-joined room members less opaque in room details view

lib/pangea/chat_settings/pages/pangea_chat_details.dart

@@ -544,7 +544,7 @@ class RoomDetailsButtonRowState extends State<RoomDetailsButtonRow> {
                 );
               }
 
-              final button = buttons[index];
+              final button = mainViewButtons[index];
               return Expanded(
                 child: RoomDetailsButton(
                   mini: mini,
@@ -729,66 +729,70 @@ class RoomParticipantsSection extends StatelessWidget {
                     padding: EdgeInsets.all(_padding),
                     child: SizedBox(
                       width: _width,
-                      child: Column(
+                      child: Opacity(
-                        children: [
+                        opacity: user.membership == Membership.join ? 1.0 : 0.5,
-                          Stack(
+                        child: Column(
-                            alignment: Alignment.center,
+                          children: [
-                            children: [
+                            Stack(
-                              if (gradient != null)
+                              alignment: Alignment.center,
-                                CircleAvatar(
+                              children: [
-                                  radius: _width / 2,
+                                if (gradient != null)
-                                  child: Container(
+                                  CircleAvatar(
-                                    decoration: BoxDecoration(
+                                    radius: _width / 2,
-                                      shape: BoxShape.circle,
+                                    child: Container(
-                                      gradient: gradient,
+                                      decoration: BoxDecoration(
+                                        shape: BoxShape.circle,
+                                        gradient: gradient,
+                                      ),
                                     ),
+                                  )
+                                else
+                                  SizedBox(
+                                    height: _width,
+                                    width: _width,
                                   ),
-                                )
+                                Builder(
-                              else
+                                  builder: (context) {
-                                SizedBox(
+                                    return MouseRegion(
-                                  height: _width,
+                                      cursor: SystemMouseCursors.click,
-                                  width: _width,
+                                      child: GestureDetector(
-                                ),
+                                        onTap: () => showMemberActionsPopupMenu(
-                              Builder(
+                                          context: context,
-                                builder: (context) {
+                                          user: user,
-                                  return MouseRegion(
+                                        ),
-                                    cursor: SystemMouseCursors.click,
+                                        child: Center(
-                                    child: GestureDetector(
+                                          child: Avatar(
-                                      onTap: () => showMemberActionsPopupMenu(
+                                            mxContent: user.avatarUrl,
-                                        context: context,
+                                            name: user.calcDisplayname(),
-                                        user: user,
+                                            size: _width - 6.0,
-                                      ),
+                                            presenceUserId: user.id,
-                                      child: Center(
+                                            showPresence: false,
-                                        child: Avatar(
+                                          ),
-                                          mxContent: user.avatarUrl,
-                                          name: user.calcDisplayname(),
-                                          size: _width - 6.0,
-                                          presenceUserId: user.id,
-                                          showPresence: false,
                                         ),
                                       ),
-                                    ),
+                                    );
-                                  );
+                                  },
-                                },
-                              ),
-                            ],
-                          ),
-                          Text(
-                            user.calcDisplayname(),
-                            style: Theme.of(context)
-                                .textTheme
-                                .labelLarge
-                                ?.copyWith(
-                                  color: Theme.of(context).colorScheme.primary,
-                                  fontWeight: FontWeight.bold,
                                 ),
-                            overflow: TextOverflow.ellipsis,
+                              ],
-                          ),
+                            ),
-                          LevelDisplayName(
+                            Text(
-                            userId: user.id,
+                              user.calcDisplayname(),
-                            textStyle: Theme.of(context).textTheme.labelSmall,
+                              style: Theme.of(context)
-                          ),
+                                  .textTheme
-                        ],
+                                  .labelLarge
+                                  ?.copyWith(
+                                    color:
+                                        Theme.of(context).colorScheme.primary,
+                                    fontWeight: FontWeight.bold,
+                                  ),
+                              overflow: TextOverflow.ellipsis,
+                            ),
+                            LevelDisplayName(
+                              userId: user.id,
+                              textStyle: Theme.of(context).textTheme.labelSmall,
+                            ),
+                          ],
+                        ),
                       ),
                     ),
                   );

lib/pangea/spaces/utils/load_participants_util.dart

@@ -89,6 +89,14 @@ class LoadParticipantsUtilState extends State<LoadParticipantsUtil> {
         return -1;
       }
 
+      if (a.membership != Membership.join && b.membership != Membership.join) {
+        return a.displayName?.compareTo(b.displayName ?? '') ?? 0;
+      } else if (a.membership != Membership.join) {
+        return 1;
+      } else if (b.membership != Membership.join) {
+        return -1;
+      }
+
       final PublicProfileModel? aProfile = _levelsCache[a.id];
       final PublicProfileModel? bProfile = _levelsCache[b.id];
 
@@ -100,7 +108,7 @@ class LoadParticipantsUtilState extends State<LoadParticipantsUtil> {
 
   Future<void> _cacheLevels() async {
     for (final user in participants) {
-      if (_levelsCache[user.id] == null) {
+      if (_levelsCache[user.id] == null && user.membership == Membership.join) {
         _levelsCache[user.id] = await MatrixState
             .pangeaController.userController
             .getPublicProfile(user.id);