feat: New spaces and chat list design

assets/l10n/intl_en.arb

@@ -196,6 +196,19 @@
       "supportedVersions": {}
     }
   },
+  "countChatsAndCountParticipants": "{chats} chats and {participants} participants",
+  "@countChatsAndCountParticipants": {
+    "type": "text",
+    "placeholders": {
+      "chats": {},
+      "participants": {}
+    }
+  },
+  "noMoreChatsFound": "No more chats found...",
+  "joinedChats": "Joined chats",
+  "unread": "Unread",
+  "space": "Space",
+  "spaces": "Spaces",
   "banFromChat": "Ban from chat",
   "@banFromChat": {
     "type": "text",

lib/config/app_config.dart

@@ -44,7 +44,6 @@ abstract class AppConfig {
   static bool hideRedactedEvents = false;
   static bool hideUnknownEvents = true;
   static bool hideUnimportantStateEvents = true;
-  static bool separateChatTypes = false;
   static bool autoplayImages = true;
   static bool sendTypingNotifications = true;
   static bool sendPublicReadReceipts = true;

lib/config/routes.dart

@@ -92,12 +92,8 @@ abstract class AppRoutes {
         FluffyThemes.isColumnMode(context) &&
                 state.fullPath?.startsWith('/rooms/settings') == false
             ? TwoColumnLayout(
-                displayNavigationRail:
-                    state.path?.startsWith('/rooms/settings') != true,
                 mainView: ChatList(
                   activeChat: state.pathParameters['roomid'],
-                  displayNavigationRail:
-                      state.path?.startsWith('/rooms/settings') != true,
                 ),
                 sideView: child,
               )
@@ -175,7 +171,6 @@ abstract class AppRoutes {
                     ? TwoColumnLayout(
                         mainView: const Settings(),
                         sideView: child,
-                        displayNavigationRail: false,
                       )
                     : child,
               ),

lib/config/setting_keys.dart

@@ -4,7 +4,6 @@ abstract class SettingKeys {
   static const String hideUnknownEvents = 'chat.fluffy.hideUnknownEvents';
   static const String hideUnimportantStateEvents =
       'chat.fluffy.hideUnimportantStateEvents';
-  static const String separateChatTypes = 'chat.fluffy.separateChatTypes';
   static const String sentry = 'sentry';
   static const String theme = 'theme';
   static const String amoledEnabled = 'amoled_enabled';

lib/pages/chat_list/chat_list.dart

@@ -10,12 +10,13 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:flutter_shortcuts/flutter_shortcuts.dart';
 import 'package:future_loading_dialog/future_loading_dialog.dart';
 import 'package:go_router/go_router.dart';
+import 'package:matrix/matrix.dart' as sdk;
 import 'package:matrix/matrix.dart';
 import 'package:receive_sharing_intent/receive_sharing_intent.dart';
 import 'package:uni_links/uni_links.dart';
 
 import 'package:fluffychat/config/app_config.dart';
-import 'package:fluffychat/config/themes.dart';
+import 'package:fluffychat/pages/chat/send_file_dialog.dart';
 import 'package:fluffychat/pages/chat_list/chat_list_view.dart';
 import 'package:fluffychat/utils/localized_exception_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
@@ -35,7 +36,6 @@ import 'package:fluffychat/utils/tor_stub.dart'
 enum SelectMode {
   normal,
   share,
-  select,
 }
 
 enum PopupMenuAction {
@@ -49,19 +49,32 @@ enum PopupMenuAction {
 
 enum ActiveFilter {
   allChats,
+  unread,
   groups,
-  messages,
   spaces,
 }
 
+extension LocalizedActiveFilter on ActiveFilter {
+  String toLocalizedString(BuildContext context) {
+    switch (this) {
+      case ActiveFilter.allChats:
+        return L10n.of(context)!.all;
+      case ActiveFilter.unread:
+        return L10n.of(context)!.unread;
+      case ActiveFilter.groups:
+        return L10n.of(context)!.groups;
+      case ActiveFilter.spaces:
+        return L10n.of(context)!.spaces;
+    }
+  }
+}
+
 class ChatList extends StatefulWidget {
   static BuildContext? contextForVoip;
-  final bool displayNavigationRail;
   final String? activeChat;
 
   const ChatList({
     super.key,
-    this.displayNavigationRail = false,
     required this.activeChat,
   });
 
@@ -77,85 +90,240 @@ class ChatListController extends State<ChatList>
 
   StreamSubscription? _intentUriStreamSubscription;
 
-  bool get displayNavigationBar =>
+  void createNewSpace() {
-      !FluffyThemes.isColumnMode(context) &&
+    context.push<String?>('/rooms/newspace');
-      (spaces.isNotEmpty || AppConfig.separateChatTypes);
+  }
 
-  String? activeSpaceId;
+  ActiveFilter activeFilter = ActiveFilter.allChats;
 
-  void resetActiveSpaceId() {
+  String? _activeSpaceId;
-    setState(() {
+  String? get activeSpaceId => _activeSpaceId;
-      selectedRoomIds.clear();
+
-      activeSpaceId = null;
+  void setActiveSpace(String spaceId) => setState(() {
+        _activeSpaceId = spaceId;
+      });
+  void clearActiveSpace() => setState(() {
+        _activeSpaceId = null;
       });
+
+  void addChatAction() async {
+    if (activeSpaceId == null) {
+      context.go('/rooms/newprivatechat');
+      return;
     }
 
-  void setActiveSpace(String? spaceId) {
+    final roomType = await showConfirmationDialog(
-    setState(() {
+      context: context,
-      selectedRoomIds.clear();
+      title: L10n.of(context)!.addChatOrSubSpace,
-      activeSpaceId = spaceId;
+      actions: [
-      activeFilter = ActiveFilter.spaces;
+        AlertDialogAction(
-    });
+          key: AddRoomType.subspace,
+          label: L10n.of(context)!.createNewSpace,
+        ),
+        AlertDialogAction(
+          key: AddRoomType.chat,
+          label: L10n.of(context)!.createGroup,
+        ),
+      ],
+    );
+    if (roomType == null) return;
+
+    final names = await showTextInputDialog(
+      context: context,
+      title: roomType == AddRoomType.subspace
+          ? L10n.of(context)!.createNewSpace
+          : L10n.of(context)!.createGroup,
+      textFields: [
+        DialogTextField(
+          hintText: roomType == AddRoomType.subspace
+              ? L10n.of(context)!.spaceName
+              : L10n.of(context)!.groupName,
+          minLines: 1,
+          maxLines: 1,
+          maxLength: 64,
+          validator: (text) {
+            if (text == null || text.isEmpty) {
+              return L10n.of(context)!.pleaseChoose;
+            }
+            return null;
+          },
+        ),
+        DialogTextField(
+          hintText: L10n.of(context)!.chatDescription,
+          minLines: 4,
+          maxLines: 8,
+          maxLength: 255,
+        ),
+      ],
+      okLabel: L10n.of(context)!.create,
+      cancelLabel: L10n.of(context)!.cancel,
+    );
+    if (names == null) return;
+    final client = Matrix.of(context).client;
+    final result = await showFutureLoadingDialog(
+      context: context,
+      future: () async {
+        late final String roomId;
+        final activeSpace = client.getRoomById(activeSpaceId!)!;
+        await activeSpace.postLoad();
+
+        if (roomType == AddRoomType.subspace) {
+          roomId = await client.createSpace(
+            name: names.first,
+            topic: names.last.isEmpty ? null : names.last,
+            visibility: activeSpace.joinRules == JoinRules.public
+                ? sdk.Visibility.public
+                : sdk.Visibility.private,
+          );
+        } else {
+          roomId = await client.createGroupChat(
+            groupName: names.first,
+            preset: activeSpace.joinRules == JoinRules.public
+                ? CreateRoomPreset.publicChat
+                : CreateRoomPreset.privateChat,
+            visibility: activeSpace.joinRules == JoinRules.public
+                ? sdk.Visibility.public
+                : sdk.Visibility.private,
+            initialState: names.length > 1 && names.last.isNotEmpty
+                ? [
+                    sdk.StateEvent(
+                      type: sdk.EventTypes.RoomTopic,
+                      content: {'topic': names.last},
+                    ),
+                  ]
+                : null,
+          );
+        }
+        await activeSpace.setSpaceChild(roomId);
+      },
+    );
+    if (result.error != null) return;
   }
 
-  void createNewSpace() async {
+  void onChatTap(Room room, BuildContext context) async {
-    final spaceId = await context.push<String?>('/rooms/newspace');
+    if (room.isSpace) {
-    if (spaceId != null) {
+      setActiveSpace(room.id);
-      setActiveSpace(spaceId);
+      return;
+    }
+    if (room.membership == Membership.invite) {
+      final inviterId =
+          room.getState(EventTypes.RoomMember, room.client.userID!)?.senderId;
+      final inviteAction = await showModalActionSheet<InviteActions>(
+        context: context,
+        message: room.isDirectChat
+            ? L10n.of(context)!.invitePrivateChat
+            : L10n.of(context)!.inviteGroupChat,
+        title: room.getLocalizedDisplayname(MatrixLocals(L10n.of(context)!)),
+        actions: [
+          SheetAction(
+            key: InviteActions.accept,
+            label: L10n.of(context)!.accept,
+            icon: Icons.check_outlined,
+            isDefaultAction: true,
+          ),
+          SheetAction(
+            key: InviteActions.decline,
+            label: L10n.of(context)!.decline,
+            icon: Icons.close_outlined,
+            isDestructiveAction: true,
+          ),
+          SheetAction(
+            key: InviteActions.block,
+            label: L10n.of(context)!.block,
+            icon: Icons.block_outlined,
+            isDestructiveAction: true,
+          ),
+        ],
+      );
+      if (inviteAction == null) return;
+      if (inviteAction == InviteActions.block) {
+        context.go('/rooms/settings/security/ignorelist', extra: inviterId);
+        return;
       }
+      if (inviteAction == InviteActions.decline) {
+        await showFutureLoadingDialog(
+          context: context,
+          future: room.leave,
+        );
+        return;
+      }
+      final joinResult = await showFutureLoadingDialog(
+        context: context,
+        future: () async {
+          final waitForRoom = room.client.waitForRoomInSync(
+            room.id,
+            join: true,
+          );
+          await room.join();
+          await waitForRoom;
+        },
+      );
+      if (joinResult.error != null) return;
     }
 
-  int get selectedIndex {
+    if (room.membership == Membership.ban) {
-    switch (activeFilter) {
+      ScaffoldMessenger.of(context).showSnackBar(
-      case ActiveFilter.allChats:
+        SnackBar(
-      case ActiveFilter.messages:
+          content: Text(L10n.of(context)!.youHaveBeenBannedFromThisChat),
-        return 0;
+        ),
-      case ActiveFilter.groups:
+      );
-        return 1;
+      return;
-      case ActiveFilter.spaces:
-        return AppConfig.separateChatTypes ? 2 : 1;
     }
+
+    if (room.membership == Membership.leave) {
+      context.go('/rooms/archive/${room.id}');
+      return;
     }
 
-  ActiveFilter getActiveFilterByDestination(int? i) {
+    // Share content into this room
-    switch (i) {
+    final shareContent = Matrix.of(context).shareContent;
-      case 1:
+    if (shareContent != null) {
-        if (AppConfig.separateChatTypes) {
+      final shareFile = shareContent.tryGet<MatrixFile>('file');
-          return ActiveFilter.groups;
+      if (shareContent.tryGet<String>('msgtype') == 'chat.fluffy.shared_file' &&
+          shareFile != null) {
+        await showDialog(
+          context: context,
+          useRootNavigator: false,
+          builder: (c) => SendFileDialog(
+            files: [shareFile],
+            room: room,
+          ),
+        );
+        Matrix.of(context).shareContent = null;
+      } else {
+        final consent = await showOkCancelAlertDialog(
+          context: context,
+          title: L10n.of(context)!.forward,
+          message: L10n.of(context)!.forwardMessageTo(
+            room.getLocalizedDisplayname(MatrixLocals(L10n.of(context)!)),
+          ),
+          okLabel: L10n.of(context)!.forward,
+          cancelLabel: L10n.of(context)!.cancel,
+        );
+        if (consent == OkCancelResult.cancel) {
+          Matrix.of(context).shareContent = null;
+          return;
         }
-        return ActiveFilter.spaces;
+        if (consent == OkCancelResult.ok) {
-      case 2:
+          room.sendEvent(shareContent);
-        return ActiveFilter.spaces;
+          Matrix.of(context).shareContent = null;
-      case 0:
-      default:
-        if (AppConfig.separateChatTypes) {
-          return ActiveFilter.messages;
         }
-        return ActiveFilter.allChats;
       }
     }
 
-  void onDestinationSelected(int? i) {
+    context.go('/rooms/${room.id}');
-    setState(() {
-      selectedRoomIds.clear();
-      activeFilter = getActiveFilterByDestination(i);
-    });
   }
 
-  ActiveFilter activeFilter = AppConfig.separateChatTypes
-      ? ActiveFilter.messages
-      : ActiveFilter.allChats;
-
   bool Function(Room) getRoomFilterByActiveFilter(ActiveFilter activeFilter) {
     switch (activeFilter) {
       case ActiveFilter.allChats:
-        return (room) => !room.isSpace;
+        return (room) => true;
       case ActiveFilter.groups:
         return (room) => !room.isSpace && !room.isDirectChat;
-      case ActiveFilter.messages:
+      case ActiveFilter.unread:
-        return (room) => !room.isSpace && room.isDirectChat;
+        return (room) => room.isUnreadOrInvited;
       case ActiveFilter.spaces:
-        return (r) => r.isSpace;
+        return (room) => room.isSpace;
     }
   }
 
@@ -331,15 +499,11 @@ class ChatListController extends State<ChatList>
   List<Room> get spaces =>
       Matrix.of(context).client.rooms.where((r) => r.isSpace).toList();
 
-  final selectedRoomIds = <String>{};
-
   String? get activeChat => widget.activeChat;
 
   SelectMode get selectMode => Matrix.of(context).shareContent != null
       ? SelectMode.share
-      : selectedRoomIds.isEmpty
+      : SelectMode.normal;
-          ? SelectMode.normal
-          : SelectMode.select;
 
   void _processIncomingSharedFiles(List<SharedMediaFile> files) {
     if (files.isEmpty) return;
@@ -448,80 +612,67 @@ class ChatListController extends State<ChatList>
     super.dispose();
   }
 
-  void toggleSelection(String roomId) {
+  void chatContextAction(Room room) async {
-    setState(
+    final action = await showModalActionSheet<ChatContextAction>(
-      () => selectedRoomIds.contains(roomId)
-          ? selectedRoomIds.remove(roomId)
-          : selectedRoomIds.add(roomId),
-    );
-  }
-
-  Future<void> toggleUnread() async {
-    await showFutureLoadingDialog(
       context: context,
-      future: () async {
+      title: room.getLocalizedDisplayname(MatrixLocals(L10n.of(context)!)),
-        final markUnread = anySelectedRoomNotMarkedUnread;
+      actions: [
-        final client = Matrix.of(context).client;
+        SheetAction(
-        for (final roomId in selectedRoomIds) {
+          key: ChatContextAction.markUnread,
-          final room = client.getRoomById(roomId)!;
+          icon: room.markedUnread
-          if (room.markedUnread == markUnread) continue;
+              ? Icons.mark_as_unread
-          await client.getRoomById(roomId)!.markUnread(markUnread);
+              : Icons.mark_as_unread_outlined,
-        }
+          label: room.markedUnread
-      },
+              ? L10n.of(context)!.markAsRead
+              : L10n.of(context)!.unread,
+        ),
+        SheetAction(
+          key: ChatContextAction.favorite,
+          icon: room.isFavourite ? Icons.pin : Icons.pin_outlined,
+          label: room.isFavourite
+              ? L10n.of(context)!.unpin
+              : L10n.of(context)!.pin,
+        ),
+        SheetAction(
+          key: ChatContextAction.mute,
+          icon: room.pushRuleState == PushRuleState.notify
+              ? Icons.notifications_off_outlined
+              : Icons.notifications,
+          label: room.pushRuleState == PushRuleState.notify
+              ? L10n.of(context)!.muteChat
+              : L10n.of(context)!.unmuteChat,
+        ),
+        SheetAction(
+          isDestructiveAction: true,
+          key: ChatContextAction.leave,
+          icon: Icons.delete_outlined,
+          label: L10n.of(context)!.leave,
+        ),
+      ],
     );
-    cancelAction();
-  }
 
-  Future<void> toggleFavouriteRoom() async {
+    if (action == null) return;
-    await showFutureLoadingDialog(
+    if (!mounted) return;
-      context: context,
-      future: () async {
-        final makeFavorite = anySelectedRoomNotFavorite;
-        final client = Matrix.of(context).client;
-        for (final roomId in selectedRoomIds) {
-          final room = client.getRoomById(roomId)!;
-          if (room.isFavourite == makeFavorite) continue;
-          await client.getRoomById(roomId)!.setFavourite(makeFavorite);
-        }
-      },
-    );
-    cancelAction();
-  }
 
-  Future<void> toggleMuted() async {
     await showFutureLoadingDialog(
       context: context,
-      future: () async {
+      future: () {
-        final newState = anySelectedRoomNotMuted
+        switch (action) {
+          case ChatContextAction.favorite:
+            return room.setFavourite(!room.isFavourite);
+          case ChatContextAction.markUnread:
+            return room.markUnread(!room.markedUnread);
+          case ChatContextAction.mute:
+            return room.setPushRuleState(
+              room.pushRuleState == PushRuleState.notify
                   ? PushRuleState.mentionsOnly
-            : PushRuleState.notify;
+                  : PushRuleState.notify,
-        final client = Matrix.of(context).client;
-        for (final roomId in selectedRoomIds) {
-          final room = client.getRoomById(roomId)!;
-          if (room.pushRuleState == newState) continue;
-          await client.getRoomById(roomId)!.setPushRuleState(newState);
-        }
-      },
             );
-    cancelAction();
+          case ChatContextAction.leave:
+            return room.leave();
         }
-
+      },
-  Future<void> archiveAction() async {
-    final confirmed = await showOkCancelAlertDialog(
-          useRootNavigator: false,
-          context: context,
-          title: L10n.of(context)!.areYouSure,
-          okLabel: L10n.of(context)!.yes,
-          cancelLabel: L10n.of(context)!.cancel,
-          message: L10n.of(context)!.archiveRoomDescription,
-        ) ==
-        OkCancelResult.ok;
-    if (!confirmed) return;
-    await showFutureLoadingDialog(
-      context: context,
-      future: () => _archiveSelectedRooms(),
     );
-    setState(() {});
   }
 
   void dismissStatusList() async {
@@ -568,76 +719,6 @@ class ChatListController extends State<ChatList>
     );
   }
 
-  Future<void> _archiveSelectedRooms() async {
-    final client = Matrix.of(context).client;
-    while (selectedRoomIds.isNotEmpty) {
-      final roomId = selectedRoomIds.first;
-      try {
-        await client.getRoomById(roomId)!.leave();
-      } finally {
-        toggleSelection(roomId);
-      }
-    }
-  }
-
-  Future<void> addToSpace() async {
-    final selectedSpace = await showConfirmationDialog<String>(
-      context: context,
-      title: L10n.of(context)!.addToSpace,
-      message: L10n.of(context)!.addToSpaceDescription,
-      fullyCapitalizedForMaterial: false,
-      actions: Matrix.of(context)
-          .client
-          .rooms
-          .where((r) => r.isSpace)
-          .map(
-            (space) => AlertDialogAction(
-              key: space.id,
-              label: space
-                  .getLocalizedDisplayname(MatrixLocals(L10n.of(context)!)),
-            ),
-          )
-          .toList(),
-    );
-    if (selectedSpace == null) return;
-    final result = await showFutureLoadingDialog(
-      context: context,
-      future: () async {
-        final space = Matrix.of(context).client.getRoomById(selectedSpace)!;
-        if (space.canSendDefaultStates) {
-          for (final roomId in selectedRoomIds) {
-            await space.setSpaceChild(roomId);
-          }
-        }
-      },
-    );
-    if (result.error == null) {
-      if (!mounted) return;
-      ScaffoldMessenger.of(context).showSnackBar(
-        SnackBar(
-          content: Text(L10n.of(context)!.chatHasBeenAddedToThisSpace),
-        ),
-      );
-    }
-
-    setState(() => selectedRoomIds.clear());
-  }
-
-  bool get anySelectedRoomNotMarkedUnread => selectedRoomIds.any(
-        (roomId) =>
-            !Matrix.of(context).client.getRoomById(roomId)!.markedUnread,
-      );
-
-  bool get anySelectedRoomNotFavorite => selectedRoomIds.any(
-        (roomId) => !Matrix.of(context).client.getRoomById(roomId)!.isFavourite,
-      );
-
-  bool get anySelectedRoomNotMuted => selectedRoomIds.any(
-        (roomId) =>
-            Matrix.of(context).client.getRoomById(roomId)!.pushRuleState ==
-            PushRuleState.notify,
-      );
-
   bool waitForFirstSync = false;
 
   Future<void> _waitForFirstSync() async {
@@ -666,19 +747,20 @@ class ChatListController extends State<ChatList>
   void cancelAction() {
     if (selectMode == SelectMode.share) {
       setState(() => Matrix.of(context).shareContent = null);
-    } else {
-      setState(() => selectedRoomIds.clear());
     }
   }
 
+  void setActiveFilter(ActiveFilter filter) {
+    setState(() {
+      activeFilter = filter;
+    });
+  }
+
   void setActiveClient(Client client) {
     context.go('/rooms');
     setState(() {
-      activeFilter = AppConfig.separateChatTypes
+      activeFilter = ActiveFilter.allChats;
-          ? ActiveFilter.messages
+      _activeSpaceId = null;
-          : ActiveFilter.allChats;
-      activeSpaceId = null;
-      selectedRoomIds.clear();
       Matrix.of(context).setActiveClient(client);
     });
     _clientStream.add(client);
@@ -687,7 +769,7 @@ class ChatListController extends State<ChatList>
   void setActiveBundle(String bundle) {
     context.go('/rooms');
     setState(() {
-      selectedRoomIds.clear();
+      _activeSpaceId = null;
       Matrix.of(context).activeBundle = bundle;
       if (!Matrix.of(context)
           .currentBundle!
@@ -780,3 +862,18 @@ class ChatListController extends State<ChatList>
 }
 
 enum EditBundleAction { addToBundle, removeFromBundle }
+
+enum InviteActions {
+  accept,
+  decline,
+  block,
+}
+
+enum AddRoomType { chat, subspace }
+
+enum ChatContextAction {
+  favorite,
+  markUnread,
+  mute,
+  leave,
+}

lib/pages/chat_list/chat_list_body.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
-import 'package:animations/animations.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:matrix/matrix.dart';
 
@@ -11,7 +10,6 @@ import 'package:fluffychat/pages/chat_list/chat_list_item.dart';
 import 'package:fluffychat/pages/chat_list/search_title.dart';
 import 'package:fluffychat/pages/chat_list/space_view.dart';
 import 'package:fluffychat/pages/chat_list/status_msg_list.dart';
-import 'package:fluffychat/pages/chat_list/utils/on_chat_tap.dart';
 import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart';
 import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
 import 'package:fluffychat/utils/stream_extension.dart';
@@ -29,6 +27,17 @@ class ChatListViewBody extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final activeSpace = controller.activeSpaceId;
+    if (activeSpace != null) {
+      return SpaceView(
+        spaceId: activeSpace,
+        onBack: controller.clearActiveSpace,
+        onChatTab: (room) => controller.onChatTap(room, context),
+        onChatContext: (room) => controller.chatContextAction(room),
+        activeChat: controller.activeChat,
+        toParentSpace: controller.setActiveSpace,
+      );
+    }
     final publicRooms = controller.roomSearchResult?.chunk
         .where((room) => room.roomType != 'm.space')
         .toList();
@@ -43,38 +52,28 @@ class ChatListViewBody extends StatelessWidget {
     final subtitleColor =
         Theme.of(context).textTheme.bodyLarge!.color!.withAlpha(50);
     final filter = controller.searchController.text.toLowerCase();
-    return PageTransitionSwitcher(
+    return StreamBuilder(
-      transitionBuilder: (
-        Widget child,
-        Animation<double> primaryAnimation,
-        Animation<double> secondaryAnimation,
-      ) {
-        return SharedAxisTransition(
-          animation: primaryAnimation,
-          secondaryAnimation: secondaryAnimation,
-          transitionType: SharedAxisTransitionType.vertical,
-          fillColor: Theme.of(context).scaffoldBackgroundColor,
-          child: child,
-        );
-      },
-      child: StreamBuilder(
       key: ValueKey(
-          client.userID.toString() +
+        client.userID.toString(),
-              controller.activeFilter.toString() +
-              controller.activeSpaceId.toString(),
       ),
       stream: client.onSync.stream
           .where((s) => s.hasRoomUpdate)
           .rateLimit(const Duration(seconds: 1)),
       builder: (context, _) {
-          if (controller.activeFilter == ActiveFilter.spaces) {
-            return SpaceView(
-              controller,
-              scrollController: controller.scrollController,
-              key: Key(controller.activeSpaceId ?? 'Spaces'),
-            );
-          }
         final rooms = controller.filteredRooms;
+
+        final spaces = rooms.where((r) => r.isSpace);
+        final spaceDelegateCandidates = <String, Room>{};
+        for (final space in spaces) {
+          spaceDelegateCandidates[space.id] = space;
+          for (final spaceChild in space.spaceChildren) {
+            final roomId = spaceChild.roomId;
+            if (roomId == null) continue;
+            spaceDelegateCandidates[roomId] = space;
+          }
+        }
+        final spaceDelegates = <String>{};
+
         return SafeArea(
           child: CustomScrollView(
             controller: controller.scrollController,
@@ -113,13 +112,12 @@ class ChatListViewBody extends StatelessWidget {
                                 scrollDirection: Axis.horizontal,
                                 itemCount: userSearchResult.results.length,
                                 itemBuilder: (context, i) => _SearchItem(
-                                    title: userSearchResult
+                                  title:
-                                            .results[i].displayName ??
+                                      userSearchResult.results[i].displayName ??
                                           userSearchResult
                                               .results[i].userId.localpart ??
                                           L10n.of(context)!.unknownDevice,
-                                    avatar:
+                                  avatar: userSearchResult.results[i].avatarUrl,
-                                        userSearchResult.results[i].avatarUrl,
                                   onPressed: () => showAdaptiveBottomSheet(
                                     context: context,
                                     builder: (c) => UserBottomSheet(
@@ -131,9 +129,7 @@ class ChatListViewBody extends StatelessWidget {
                               ),
                       ),
                     ],
-                      if (!controller.isSearchMode &&
+                    if (!controller.isSearchMode && AppConfig.showPresences)
-                          controller.activeFilter != ActiveFilter.groups &&
-                          AppConfig.showPresences)
                       GestureDetector(
                         onLongPress: () => controller.dismissStatusList(),
                         child: StatusMessageList(
@@ -158,6 +154,69 @@ class ChatListViewBody extends StatelessWidget {
                         ),
                       ),
                     ),
+                    if (client.rooms.isNotEmpty && !controller.isSearchMode)
+                      SizedBox(
+                        height: 44,
+                        child: ListView(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 12.0,
+                            vertical: 6,
+                          ),
+                          shrinkWrap: true,
+                          scrollDirection: Axis.horizontal,
+                          children: ActiveFilter.values
+                              .map(
+                                (filter) => Padding(
+                                  padding:
+                                      const EdgeInsets.symmetric(horizontal: 4),
+                                  child: InkWell(
+                                    borderRadius: BorderRadius.circular(
+                                      AppConfig.borderRadius,
+                                    ),
+                                    onTap: () =>
+                                        controller.setActiveFilter(filter),
+                                    child: Container(
+                                      padding: const EdgeInsets.symmetric(
+                                        horizontal: 12,
+                                        vertical: 6,
+                                      ),
+                                      decoration: BoxDecoration(
+                                        color: filter == controller.activeFilter
+                                            ? Theme.of(context)
+                                                .colorScheme
+                                                .primary
+                                            : Theme.of(context)
+                                                .colorScheme
+                                                .secondaryContainer,
+                                        borderRadius: BorderRadius.circular(
+                                          AppConfig.borderRadius,
+                                        ),
+                                      ),
+                                      alignment: Alignment.center,
+                                      child: Text(
+                                        filter.toLocalizedString(context),
+                                        style: TextStyle(
+                                          fontWeight:
+                                              filter == controller.activeFilter
+                                                  ? FontWeight.bold
+                                                  : FontWeight.normal,
+                                          color:
+                                              filter == controller.activeFilter
+                                                  ? Theme.of(context)
+                                                      .colorScheme
+                                                      .onPrimary
+                                                  : Theme.of(context)
+                                                      .colorScheme
+                                                      .onSecondaryContainer,
+                                        ),
+                                      ),
+                                    ),
+                                  ),
+                                ),
+                              )
+                              .toList(),
+                        ),
+                      ),
                     if (controller.isSearchMode)
                       SearchTitle(
                         title: L10n.of(context)!.chats,
@@ -171,8 +230,7 @@ class ChatListViewBody extends StatelessWidget {
                         child: Icon(
                           CupertinoIcons.chat_bubble_2,
                           size: 128,
-                            color:
+                          color: Theme.of(context).colorScheme.secondary,
-                                Theme.of(context).colorScheme.onInverseSurface,
                         ),
                       ),
                     ],
@@ -189,8 +247,7 @@ class ChatListViewBody extends StatelessWidget {
                           backgroundColor: titleColor,
                           child: CircularProgressIndicator(
                             strokeWidth: 1,
-                              color:
+                            color: Theme.of(context).textTheme.bodyLarge!.color,
-                                  Theme.of(context).textTheme.bodyLarge!.color,
                           ),
                         ),
                         title: Row(
@@ -241,18 +298,28 @@ class ChatListViewBody extends StatelessWidget {
                 SliverList.builder(
                   itemCount: rooms.length,
                   itemBuilder: (BuildContext context, int i) {
+                    var room = rooms[i];
+                    if (controller.activeFilter != ActiveFilter.groups) {
+                      final parent = room.isSpace
+                          ? room
+                          : spaceDelegateCandidates[room.id];
+                      if (parent != null) {
+                        if (spaceDelegates.contains(parent.id)) {
+                          return const SizedBox.shrink();
+                        }
+                        spaceDelegates.add(parent.id);
+                        room = parent;
+                      }
+                    }
+
                     return ChatListItem(
-                        rooms[i],
+                      room,
-                        key: Key('chat_list_item_${rooms[i].id}'),
+                      lastEventRoom: rooms[i],
+                      key: Key('chat_list_item_${room.id}'),
                       filter: filter,
-                        selected:
+                      onTap: () => controller.onChatTap(room, context),
-                            controller.selectedRoomIds.contains(rooms[i].id),
+                      onLongPress: () => controller.chatContextAction(room),
-                        onTap: controller.selectMode == SelectMode.select
+                      activeChat: controller.activeChat == room.id,
-                            ? () => controller.toggleSelection(rooms[i].id)
-                            : () => onChatTap(rooms[i], context),
-                        onLongPress: () =>
-                            controller.toggleSelection(rooms[i].id),
-                        activeChat: controller.activeChat == rooms[i].id,
                     );
                   },
                 ),
@@ -260,7 +327,6 @@ class ChatListViewBody extends StatelessWidget {
           ),
         );
       },
-      ),
     );
   }
 }

lib/pages/chat_list/chat_list_header.dart

@@ -43,11 +43,6 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget {
               L10n.of(context)!.share,
               key: const ValueKey(SelectMode.share),
             )
-          : selectMode == SelectMode.select
-              ? Text(
-                  controller.selectedRoomIds.length.toString(),
-                  key: const ValueKey(SelectMode.select),
-                )
           : TextField(
               controller: controller.searchController,
               focusNode: controller.searchFocusNode,
@@ -74,17 +69,14 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget {
                         tooltip: L10n.of(context)!.cancel,
                         icon: const Icon(Icons.close_outlined),
                         onPressed: controller.cancelSearch,
-                            color: Theme.of(context)
+                        color: Theme.of(context).colorScheme.onPrimaryContainer,
-                                .colorScheme
-                                .onPrimaryContainer,
                       )
                     : IconButton(
                         onPressed: controller.startSearch,
                         icon: Icon(
                           Icons.search_outlined,
-                              color: Theme.of(context)
+                          color:
-                                  .colorScheme
+                              Theme.of(context).colorScheme.onPrimaryContainer,
-                                  .onPrimaryContainer,
                         ),
                       ),
                 suffixIcon: controller.isSearchMode && globalSearch
@@ -112,10 +104,7 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget {
                             icon: const Icon(Icons.edit_outlined, size: 16),
                             label: Text(
                               controller.searchServer ??
-                                      Matrix.of(context)
+                                  Matrix.of(context).client.homeserver!.host,
-                                          .client
-                                          .homeserver!
-                                          .host,
                               maxLines: 2,
                             ),
                           )
@@ -135,47 +124,6 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget {
                 child: ClientChooserButton(controller),
               ),
             ]
-          : selectMode == SelectMode.select
-              ? [
-                  if (controller.spaces.isNotEmpty)
-                    IconButton(
-                      tooltip: L10n.of(context)!.addToSpace,
-                      icon: const Icon(Icons.workspaces_outlined),
-                      onPressed: controller.addToSpace,
-                    ),
-                  IconButton(
-                    tooltip: L10n.of(context)!.toggleUnread,
-                    icon: Icon(
-                      controller.anySelectedRoomNotMarkedUnread
-                          ? Icons.mark_chat_unread_outlined
-                          : Icons.mark_chat_read_outlined,
-                    ),
-                    onPressed: controller.toggleUnread,
-                  ),
-                  IconButton(
-                    tooltip: L10n.of(context)!.toggleFavorite,
-                    icon: Icon(
-                      controller.anySelectedRoomNotFavorite
-                          ? Icons.push_pin
-                          : Icons.push_pin_outlined,
-                    ),
-                    onPressed: controller.toggleFavouriteRoom,
-                  ),
-                  IconButton(
-                    icon: Icon(
-                      controller.anySelectedRoomNotMuted
-                          ? Icons.notifications_off_outlined
-                          : Icons.notifications_outlined,
-                    ),
-                    tooltip: L10n.of(context)!.toggleMuted,
-                    onPressed: controller.toggleMuted,
-                  ),
-                  IconButton(
-                    icon: const Icon(Icons.delete_outlined),
-                    tooltip: L10n.of(context)!.archive,
-                    onPressed: controller.archiveAction,
-                  ),
-                ]
           : null,
     );
   }

lib/pages/chat_list/chat_list_item.dart

@@ -17,8 +17,8 @@ enum ArchivedRoomAction { delete, rejoin }
 
 class ChatListItem extends StatelessWidget {
   final Room room;
+  final Room? lastEventRoom;
   final bool activeChat;
-  final bool selected;
   final void Function()? onLongPress;
   final void Function()? onForget;
   final void Function() onTap;
@@ -27,11 +27,11 @@ class ChatListItem extends StatelessWidget {
   const ChatListItem(
     this.room, {
     this.activeChat = false,
-    this.selected = false,
     required this.onTap,
     this.onLongPress,
     this.onForget,
     this.filter,
+    this.lastEventRoom,
     super.key,
   });
 
@@ -64,24 +64,23 @@ class ChatListItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final isMuted = room.pushRuleState != PushRuleState.notify;
-    final typingText = room.getLocalizedTypingText(context);
+    final lastEventRoom = this.lastEventRoom ?? room;
-    final lastEvent = room.lastEvent;
+    final typingText = lastEventRoom.getLocalizedTypingText(context);
+    final lastEvent = lastEventRoom.lastEvent;
     final ownMessage = lastEvent?.senderId == room.client.userID;
-    final unread = room.isUnread || room.membership == Membership.invite;
+    final unread =
+        lastEventRoom.isUnread || lastEventRoom.membership == Membership.invite;
     final theme = Theme.of(context);
     final directChatMatrixId = room.directChatMatrixID;
     final isDirectChat = directChatMatrixId != null;
-    final unreadBubbleSize = unread || room.hasNewMessages
+    final unreadBubbleSize = unread || lastEventRoom.hasNewMessages
-        ? room.notificationCount > 0
+        ? lastEventRoom.notificationCount > 0
             ? 20.0
             : 14.0
         : 0.0;
-    final hasNotifications = room.notificationCount > 0;
+    final hasNotifications = lastEventRoom.notificationCount > 0;
-    final backgroundColor = selected
+    final backgroundColor =
-        ? theme.colorScheme.primaryContainer
+        activeChat ? theme.colorScheme.secondaryContainer : null;
-        : activeChat
-            ? theme.colorScheme.secondaryContainer
-            : null;
     final displayname = room.getLocalizedDisplayname(
       MatrixLocals(L10n.of(context)!),
     );
@@ -119,6 +118,9 @@ class ChatListItem extends StatelessWidget {
                       curve: FluffyThemes.animationCurve,
                       scale: hovered ? 1.1 : 1.0,
                       child: Avatar(
+                        borderRadius: room.isSpace
+                            ? BorderRadius.circular(AppConfig.borderRadius / 3)
+                            : null,
                         mxContent: room.avatar,
                         name: displayname,
                         presenceUserId: directChatMatrixId,
@@ -133,14 +135,12 @@ class ChatListItem extends StatelessWidget {
                     child: AnimatedScale(
                       duration: FluffyThemes.animationDuration,
                       curve: FluffyThemes.animationCurve,
-                      scale: (hovered || selected) ? 1.0 : 0.0,
+                      scale: (hovered) ? 1.0 : 0.0,
                       child: Material(
                         color: backgroundColor,
                         borderRadius: BorderRadius.circular(16),
-                        child: Icon(
+                        child: const Icon(
-                          selected
+                          Icons.check_circle_outlined,
-                              ? Icons.check_circle
-                              : Icons.check_circle_outlined,
                           size: 18,
                         ),
                       ),
@@ -180,7 +180,9 @@ class ChatListItem extends StatelessWidget {
                         color: theme.colorScheme.primary,
                       ),
                     ),
-                  if (lastEvent != null && room.membership != Membership.invite)
+                  if (!room.isSpace &&
+                      lastEvent != null &&
+                      room.membership != Membership.invite)
                     Padding(
                       padding: const EdgeInsets.only(left: 4.0),
                       child: Text(
@@ -193,11 +195,30 @@ class ChatListItem extends StatelessWidget {
                         ),
                       ),
                     ),
+                  if (room.isSpace)
+                    const Icon(
+                      Icons.arrow_circle_right_outlined,
+                      size: 18,
+                    ),
                 ],
               ),
               subtitle: Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
+                  if (room.isSpace) ...[
+                    room.id != lastEventRoom.id &&
+                            lastEventRoom.isUnreadOrInvited
+                        ? Avatar(
+                            mxContent: lastEventRoom.avatar,
+                            name: lastEventRoom.name,
+                            size: 18,
+                          )
+                        : const Icon(
+                            Icons.workspaces_outlined,
+                            size: 18,
+                          ),
+                    const SizedBox(width: 4),
+                  ],
                   if (typingText.isEmpty &&
                       ownMessage &&
                       room.lastEvent!.status.isSending) ...[
@@ -222,7 +243,14 @@ class ChatListItem extends StatelessWidget {
                     ),
                   ),
                   Expanded(
-                    child: typingText.isNotEmpty
+                    child: room.isSpace && !lastEventRoom.isUnreadOrInvited
+                        ? Text(
+                            L10n.of(context)!.countChatsAndCountParticipants(
+                              room.spaceChildren.length.toString(),
+                              (room.summary.mJoinedMemberCount ?? 1).toString(),
+                            ),
+                          )
+                        : typingText.isNotEmpty
                             ? Text(
                                 typingText,
                                 style: TextStyle(
@@ -242,20 +270,21 @@ class ChatListItem extends StatelessWidget {
                                         hideEdit: true,
                                         plaintextBody: true,
                                         removeMarkdown: true,
-                                    withSenderNamePrefix: !isDirectChat ||
+                                        withSenderNamePrefix: (!isDirectChat ||
                                             directChatMatrixId !=
-                                            room.lastEvent?.senderId,
+                                                room.lastEvent?.senderId),
                                       )
                                     : null,
-                            initialData: lastEvent?.calcLocalizedBodyFallback(
+                                initialData:
+                                    lastEvent?.calcLocalizedBodyFallback(
                                   MatrixLocals(L10n.of(context)!),
                                   hideReply: true,
                                   hideEdit: true,
                                   plaintextBody: true,
                                   removeMarkdown: true,
-                              withSenderNamePrefix: !isDirectChat ||
+                                  withSenderNamePrefix: (!isDirectChat ||
                                       directChatMatrixId !=
-                                      room.lastEvent?.senderId,
+                                          room.lastEvent?.senderId),
                                 ),
                                 builder: (context, snapshot) => Text(
                                   room.membership == Membership.invite
@@ -268,7 +297,8 @@ class ChatListItem extends StatelessWidget {
                                   maxLines: 1,
                                   overflow: TextOverflow.ellipsis,
                                   style: TextStyle(
-                                fontWeight: unread || room.hasNewMessages
+                                    fontWeight:
+                                        unread || lastEventRoom.hasNewMessages
                                             ? FontWeight.bold
                                             : null,
                                     color: theme.colorScheme.onSurfaceVariant,
@@ -288,7 +318,9 @@ class ChatListItem extends StatelessWidget {
                     width: !hasNotifications && !unread && !room.hasNewMessages
                         ? 0
                         : (unreadBubbleSize - 9) *
-                                room.notificationCount.toString().length +
+                                lastEventRoom.notificationCount
+                                    .toString()
+                                    .length +
                             9,
                     decoration: BoxDecoration(
                       color: room.highlightCount > 0 ||
@@ -303,7 +335,7 @@ class ChatListItem extends StatelessWidget {
                     child: Center(
                       child: hasNotifications
                           ? Text(
-                              room.notificationCount.toString(),
+                              lastEventRoom.notificationCount.toString(),
                               style: TextStyle(
                                 color: room.highlightCount > 0
                                     ? Colors.white

lib/pages/chat_list/chat_list_view.dart

@@ -1,87 +1,21 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
-import 'package:badges/badges.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:go_router/go_router.dart';
 import 'package:keyboard_shortcuts/keyboard_shortcuts.dart';
 
-import 'package:fluffychat/config/app_config.dart';
-import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pages/chat_list/chat_list.dart';
-import 'package:fluffychat/pages/chat_list/navi_rail_item.dart';
-import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
-import 'package:fluffychat/widgets/avatar.dart';
-import 'package:fluffychat/widgets/unread_rooms_badge.dart';
 import '../../widgets/matrix.dart';
 import 'chat_list_body.dart';
-import 'start_chat_fab.dart';
 
 class ChatListView extends StatelessWidget {
   final ChatListController controller;
 
   const ChatListView(this.controller, {super.key});
 
-  List<NavigationDestination> getNavigationDestinations(BuildContext context) {
-    final badgePosition = BadgePosition.topEnd(top: -12, end: -8);
-    return [
-      if (AppConfig.separateChatTypes) ...[
-        NavigationDestination(
-          icon: UnreadRoomsBadge(
-            badgePosition: badgePosition,
-            filter:
-                controller.getRoomFilterByActiveFilter(ActiveFilter.messages),
-            child: const Icon(Icons.chat_outlined),
-          ),
-          selectedIcon: UnreadRoomsBadge(
-            badgePosition: badgePosition,
-            filter:
-                controller.getRoomFilterByActiveFilter(ActiveFilter.messages),
-            child: const Icon(Icons.chat),
-          ),
-          label: L10n.of(context)!.messages,
-        ),
-        NavigationDestination(
-          icon: UnreadRoomsBadge(
-            badgePosition: badgePosition,
-            filter: controller.getRoomFilterByActiveFilter(ActiveFilter.groups),
-            child: const Icon(Icons.group_outlined),
-          ),
-          selectedIcon: UnreadRoomsBadge(
-            badgePosition: badgePosition,
-            filter: controller.getRoomFilterByActiveFilter(ActiveFilter.groups),
-            child: const Icon(Icons.group),
-          ),
-          label: L10n.of(context)!.groups,
-        ),
-      ] else
-        NavigationDestination(
-          icon: UnreadRoomsBadge(
-            badgePosition: badgePosition,
-            filter:
-                controller.getRoomFilterByActiveFilter(ActiveFilter.allChats),
-            child: const Icon(Icons.chat_outlined),
-          ),
-          selectedIcon: UnreadRoomsBadge(
-            badgePosition: badgePosition,
-            filter:
-                controller.getRoomFilterByActiveFilter(ActiveFilter.allChats),
-            child: const Icon(Icons.chat),
-          ),
-          label: L10n.of(context)!.chats,
-        ),
-      if (controller.spaces.isNotEmpty)
-        const NavigationDestination(
-          icon: Icon(Icons.workspaces_outlined),
-          selectedIcon: Icon(Icons.workspaces),
-          label: 'Spaces',
-        ),
-    ];
-  }
-
   @override
   Widget build(BuildContext context) {
-    final client = Matrix.of(context).client;
     return StreamBuilder<Object?>(
       stream: Matrix.of(context).onShareContentChanged.stream,
       builder: (_, __) {
@@ -89,10 +23,7 @@ class ChatListView extends StatelessWidget {
         return PopScope(
           canPop: controller.selectMode == SelectMode.normal &&
               !controller.isSearchMode &&
-              controller.activeFilter ==
+              controller.activeFilter == ActiveFilter.allChats,
-                  (AppConfig.separateChatTypes
-                      ? ActiveFilter.messages
-                      : ActiveFilter.allChats),
           onPopInvoked: (pop) async {
             if (pop) return;
             final selMode = controller.selectMode;
@@ -104,101 +35,13 @@ class ChatListView extends StatelessWidget {
               controller.cancelAction();
               return;
             }
-            if (controller.activeFilter !=
-                (AppConfig.separateChatTypes
-                    ? ActiveFilter.messages
-                    : ActiveFilter.allChats)) {
-              controller
-                  .onDestinationSelected(AppConfig.separateChatTypes ? 1 : 0);
-              return;
-            }
           },
-          child: Row(
-            children: [
-              if (FluffyThemes.isColumnMode(context) &&
-                  controller.widget.displayNavigationRail) ...[
-                Builder(
-                  builder: (context) {
-                    final allSpaces =
-                        client.rooms.where((room) => room.isSpace);
-                    final rootSpaces = allSpaces
-                        .where(
-                          (space) => !allSpaces.any(
-                            (parentSpace) => parentSpace.spaceChildren
-                                .any((child) => child.roomId == space.id),
-                          ),
-                        )
-                        .toList();
-                    final destinations = getNavigationDestinations(context);
-
-                    return SizedBox(
-                      width: FluffyThemes.navRailWidth,
-                      child: ListView.builder(
-                        scrollDirection: Axis.vertical,
-                        itemCount: rootSpaces.length + destinations.length,
-                        itemBuilder: (context, i) {
-                          if (i < destinations.length) {
-                            return NaviRailItem(
-                              isSelected: i == controller.selectedIndex,
-                              onTap: () => controller.onDestinationSelected(i),
-                              icon: destinations[i].icon,
-                              selectedIcon: destinations[i].selectedIcon,
-                              toolTip: destinations[i].label,
-                            );
-                          }
-                          i -= destinations.length;
-                          final isSelected =
-                              controller.activeFilter == ActiveFilter.spaces &&
-                                  rootSpaces[i].id == controller.activeSpaceId;
-                          return NaviRailItem(
-                            toolTip: rootSpaces[i].getLocalizedDisplayname(
-                              MatrixLocals(L10n.of(context)!),
-                            ),
-                            isSelected: isSelected,
-                            onTap: () =>
-                                controller.setActiveSpace(rootSpaces[i].id),
-                            icon: Avatar(
-                              mxContent: rootSpaces[i].avatar,
-                              name: rootSpaces[i].getLocalizedDisplayname(
-                                MatrixLocals(L10n.of(context)!),
-                              ),
-                              size: 32,
-                            ),
-                          );
-                        },
-                      ),
-                    );
-                  },
-                ),
-                Container(
-                  color: Theme.of(context).dividerColor,
-                  width: 1,
-                ),
-              ],
-              Expanded(
           child: GestureDetector(
             onTap: FocusManager.instance.primaryFocus?.unfocus,
             excludeFromSemantics: true,
             behavior: HitTestBehavior.translucent,
             child: Scaffold(
               body: ChatListViewBody(controller),
-                    bottomNavigationBar: controller.displayNavigationBar
-                        ? NavigationBar(
-                            elevation: 4,
-                            labelBehavior:
-                                NavigationDestinationLabelBehavior.alwaysShow,
-                            shadowColor:
-                                Theme.of(context).colorScheme.onSurface,
-                            backgroundColor:
-                                Theme.of(context).colorScheme.surface,
-                            surfaceTintColor:
-                                Theme.of(context).colorScheme.surface,
-                            selectedIndex: controller.selectedIndex,
-                            onDestinationSelected:
-                                controller.onDestinationSelected,
-                            destinations: getNavigationDestinations(context),
-                          )
-                        : null,
               floatingActionButton: KeyBoardShortcuts(
                 keysToPress: {
                   LogicalKeyboardKey.controlLeft,
@@ -206,21 +49,20 @@ class ChatListView extends StatelessWidget {
                 },
                 onKeysPressed: () => context.go('/rooms/newprivatechat'),
                 helpLabel: L10n.of(context)!.newChat,
-                      child: selectMode == SelectMode.normal &&
+                child:
-                              !controller.isSearchMode
+                    selectMode == SelectMode.normal && !controller.isSearchMode
-                          ? StartChatFloatingActionButton(
+                        ? FloatingActionButton.extended(
-                              activeFilter: controller.activeFilter,
+                            onPressed: controller.addChatAction,
-                              roomsIsEmpty: false,
+                            icon: const Icon(Icons.add_outlined),
-                              scrolledToTop: controller.scrolledToTop,
+                            label: Text(
-                              createNewSpace: controller.createNewSpace,
+                              L10n.of(context)!.chat,
+                              overflow: TextOverflow.fade,
+                            ),
                           )
                         : const SizedBox.shrink(),
               ),
             ),
           ),
-              ),
-            ],
-          ),
         );
       },
     );

lib/pages/chat_list/space_view.dart

@@ -5,26 +5,32 @@ import 'package:collection/collection.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:future_loading_dialog/future_loading_dialog.dart';
 import 'package:go_router/go_router.dart';
-import 'package:matrix/matrix.dart' as sdk;
 import 'package:matrix/matrix.dart';
 
-import 'package:fluffychat/pages/chat_list/chat_list.dart';
+import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/pages/chat_list/chat_list_item.dart';
 import 'package:fluffychat/pages/chat_list/search_title.dart';
-import 'package:fluffychat/pages/chat_list/utils/on_chat_tap.dart';
+import 'package:fluffychat/utils/localized_exception_extension.dart';
-import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
+import 'package:fluffychat/utils/stream_extension.dart';
 import 'package:fluffychat/widgets/avatar.dart';
-import '../../utils/localized_exception_extension.dart';
+import 'package:fluffychat/widgets/matrix.dart';
-import '../../widgets/matrix.dart';
-import 'chat_list_header.dart';
 
 class SpaceView extends StatefulWidget {
-  final ChatListController controller;
+  final String spaceId;
-  final ScrollController scrollController;
+  final void Function() onBack;
-  const SpaceView(
+  final void Function(String spaceId) toParentSpace;
-    this.controller, {
+  final void Function(Room room) onChatTab;
+  final void Function(Room room) onChatContext;
+  final String? activeChat;
+
+  const SpaceView({
+    required this.spaceId,
+    required this.onBack,
+    required this.onChatTab,
+    required this.activeChat,
+    required this.toParentSpace,
+    required this.onChatContext,
     super.key,
-    required this.scrollController,
   });
 
   @override
@@ -32,543 +38,449 @@ class SpaceView extends StatefulWidget {
 }
 
 class _SpaceViewState extends State<SpaceView> {
-  static final Map<String, GetSpaceHierarchyResponse> _lastResponse = {};
+  final List<SpaceRoomsChunk> _discoveredChildren = [];
-
+  final TextEditingController _filterController = TextEditingController();
-  String? prevBatch;
+  String? _nextBatch;
-  Object? error;
+  bool _noMoreRooms = false;
-  bool loading = false;
+  bool _isLoading = false;
 
   @override
   void initState() {
-    loadHierarchy();
+    _loadHierarchy();
     super.initState();
   }
 
-  void _refresh() {
+  void _loadHierarchy() async {
-    _lastResponse.remove(widget.controller.activeSpaceId);
+    final room = Matrix.of(context).client.getRoomById(widget.spaceId);
-    loadHierarchy();
+    if (room == null) return;
-  }
-
-  Future<GetSpaceHierarchyResponse?> loadHierarchy([String? prevBatch]) async {
-    final activeSpaceId = widget.controller.activeSpaceId;
-    if (activeSpaceId == null) return null;
-    final client = Matrix.of(context).client;
-
-    final activeSpace = client.getRoomById(activeSpaceId);
-    await activeSpace?.postLoad();
 
     setState(() {
-      error = null;
+      _isLoading = true;
-      loading = true;
     });
 
     try {
-      final response = await client.getSpaceHierarchy(
+      final hierarchy = await room.client.getSpaceHierarchy(
-        activeSpaceId,
+        widget.spaceId,
-        maxDepth: 1,
+        suggestedOnly: false,
-        from: prevBatch,
+        maxDepth: 2,
+        from: _nextBatch,
       );
-
+      if (!mounted) return;
-      if (prevBatch != null) {
-        response.rooms.insertAll(0, _lastResponse[activeSpaceId]?.rooms ?? []);
-      }
       setState(() {
-        _lastResponse[activeSpaceId] = response;
+        _nextBatch = hierarchy.nextBatch;
-      });
+        if (hierarchy.nextBatch == null) {
-      return _lastResponse[activeSpaceId]!;
+          _noMoreRooms = true;
-    } catch (e) {
+        }
-      setState(() {
+        _discoveredChildren.addAll(
-        error = e;
+          hierarchy.rooms
+              .where((c) => room.client.getRoomById(c.roomId) == null),
+        );
+        _isLoading = false;
       });
-      rethrow;
+    } catch (e, s) {
-    } finally {
+      Logs().w('Unable to load hierarchy', e, s);
+      if (!mounted) return;
+      ScaffoldMessenger.of(context)
+          .showSnackBar(SnackBar(content: Text(e.toLocalizedString(context))));
       setState(() {
-        loading = false;
+        _isLoading = false;
       });
     }
   }
 
-  void _onJoinSpaceChild(SpaceRoomsChunk spaceChild) async {
+  void _joinChildRoom(SpaceRoomsChunk item) async {
     final client = Matrix.of(context).client;
-    final space = client.getRoomById(widget.controller.activeSpaceId!);
+    final space = client.getRoomById(widget.spaceId);
-    if (client.getRoomById(spaceChild.roomId) == null) {
+
-      final result = await showFutureLoadingDialog(
+    final consent = await showOkCancelAlertDialog(
+      context: context,
+      title: item.name ?? item.canonicalAlias ?? L10n.of(context)!.emptyChat,
+      message: item.topic,
+      okLabel: L10n.of(context)!.joinRoom,
+      cancelLabel: L10n.of(context)!.cancel,
+    );
+    if (consent != OkCancelResult.ok) return;
+    if (!mounted) return;
+
+    await showFutureLoadingDialog(
       context: context,
       future: () async {
         await client.joinRoom(
-            spaceChild.roomId,
+          item.roomId,
           serverName: space?.spaceChildren
               .firstWhereOrNull(
-                  (child) => child.roomId == spaceChild.roomId,
+                (child) => child.roomId == item.roomId,
               )
               ?.via,
         );
-          if (client.getRoomById(spaceChild.roomId) == null) {
+        if (client.getRoomById(item.roomId) == null) {
           // Wait for room actually appears in sync
-            await client.waitForRoomInSync(spaceChild.roomId, join: true);
+          await client.waitForRoomInSync(item.roomId, join: true);
         }
       },
     );
-      if (result.error != null) return;
+    if (!mounted) return;
-      _refresh();
+
-    }
+    setState(() {
-    if (spaceChild.roomType == 'm.space') {
+      _discoveredChildren.remove(item);
-      if (spaceChild.roomId == widget.controller.activeSpaceId) {
+    });
-        context.go('/rooms/${spaceChild.roomId}');
-      } else {
-        widget.controller.setActiveSpace(spaceChild.roomId);
-      }
-      return;
-    }
-    context.go('/rooms/${spaceChild.roomId}');
   }
 
-  void _onSpaceChildContextMenu([
+  void _onSpaceAction(SpaceActions action) async {
-    SpaceRoomsChunk? spaceChild,
+    final space = Matrix.of(context).client.getRoomById(widget.spaceId);
-    Room? room,
-  ]) async {
-    final client = Matrix.of(context).client;
-    final activeSpaceId = widget.controller.activeSpaceId;
-    final activeSpace =
-        activeSpaceId == null ? null : client.getRoomById(activeSpaceId);
-    final action = await showModalActionSheet<SpaceChildContextAction>(
-      context: context,
-      title: spaceChild?.name ??
-          room?.getLocalizedDisplayname(
-            MatrixLocals(L10n.of(context)!),
-          ),
-      message: spaceChild?.topic ?? room?.topic,
-      actions: [
-        if (room == null)
-          SheetAction(
-            key: SpaceChildContextAction.join,
-            label: L10n.of(context)!.joinRoom,
-            icon: Icons.send_outlined,
-          ),
-        if (spaceChild != null &&
-            (activeSpace?.canChangeStateEvent(EventTypes.SpaceChild) ?? false))
-          SheetAction(
-            key: SpaceChildContextAction.removeFromSpace,
-            label: L10n.of(context)!.removeFromSpace,
-            icon: Icons.delete_sweep_outlined,
-          ),
-        if (room != null)
-          SheetAction(
-            key: SpaceChildContextAction.leave,
-            label: L10n.of(context)!.leave,
-            icon: Icons.delete_outlined,
-            isDestructiveAction: true,
-          ),
-      ],
-    );
-    if (action == null) return;
 
     switch (action) {
-      case SpaceChildContextAction.join:
+      case SpaceActions.settings:
-        _onJoinSpaceChild(spaceChild!);
+        await space?.postLoad();
+        context.push('/rooms/${widget.spaceId}/details');
         break;
-      case SpaceChildContextAction.leave:
+      case SpaceActions.invite:
-        await showFutureLoadingDialog(
+        await space?.postLoad();
-          context: context,
+        context.push('/rooms/${widget.spaceId}/invite');
-          future: room!.leave,
-        );
-        break;
-      case SpaceChildContextAction.removeFromSpace:
-        await showFutureLoadingDialog(
-          context: context,
-          future: () => activeSpace!.removeSpaceChild(spaceChild!.roomId),
-        );
         break;
-    }
+      case SpaceActions.leave:
-  }
+        final confirmed = await showOkCancelAlertDialog(
-
+          useRootNavigator: false,
-  void _addChatOrSubSpace() async {
-    final roomType = await showConfirmationDialog(
-      context: context,
-      title: L10n.of(context)!.addChatOrSubSpace,
-      actions: [
-        AlertDialogAction(
-          key: AddRoomType.subspace,
-          label: L10n.of(context)!.createNewSpace,
-        ),
-        AlertDialogAction(
-          key: AddRoomType.chat,
-          label: L10n.of(context)!.createGroup,
-        ),
-      ],
-    );
-    if (roomType == null) return;
-
-    final names = await showTextInputDialog(
           context: context,
-      title: roomType == AddRoomType.subspace
+          title: L10n.of(context)!.areYouSure,
-          ? L10n.of(context)!.createNewSpace
+          okLabel: L10n.of(context)!.ok,
-          : L10n.of(context)!.createGroup,
-      textFields: [
-        DialogTextField(
-          hintText: roomType == AddRoomType.subspace
-              ? L10n.of(context)!.spaceName
-              : L10n.of(context)!.groupName,
-          minLines: 1,
-          maxLines: 1,
-          maxLength: 64,
-          validator: (text) {
-            if (text == null || text.isEmpty) {
-              return L10n.of(context)!.pleaseChoose;
-            }
-            return null;
-          },
-        ),
-        DialogTextField(
-          hintText: L10n.of(context)!.chatDescription,
-          minLines: 4,
-          maxLines: 8,
-          maxLength: 255,
-        ),
-      ],
-      okLabel: L10n.of(context)!.create,
           cancelLabel: L10n.of(context)!.cancel,
+          message: L10n.of(context)!.archiveRoomDescription,
         );
-    if (names == null) return;
+        if (!mounted) return;
-    final client = Matrix.of(context).client;
+        if (confirmed != OkCancelResult.ok) return;
-    final result = await showFutureLoadingDialog(
-      context: context,
-      future: () async {
-        late final String roomId;
-        final activeSpace = client.getRoomById(
-          widget.controller.activeSpaceId!,
-        )!;
 
-        if (roomType == AddRoomType.subspace) {
+        final success = await showFutureLoadingDialog(
-          roomId = await client.createSpace(
+          context: context,
-            name: names.first,
+          future: () async => await space?.leave(),
-            topic: names.last.isEmpty ? null : names.last,
-            visibility: activeSpace.joinRules == JoinRules.public
-                ? sdk.Visibility.public
-                : sdk.Visibility.private,
-          );
-        } else {
-          roomId = await client.createGroupChat(
-            groupName: names.first,
-            initialState: names.length > 1 && names.last.isNotEmpty
-                ? [
-                    sdk.StateEvent(
-                      type: sdk.EventTypes.RoomTopic,
-                      content: {'topic': names.last},
-                    ),
-                  ]
-                : null,
         );
+        if (!mounted) return;
+        if (success.error != null) return;
+        widget.onBack();
     }
-        await activeSpace.setSpaceChild(roomId);
-      },
-    );
-    if (result.error != null) return;
-    _refresh();
   }
 
   @override
   Widget build(BuildContext context) {
-    final client = Matrix.of(context).client;
+    final room = Matrix.of(context).client.getRoomById(widget.spaceId);
-    final activeSpaceId = widget.controller.activeSpaceId;
+    final displayname =
-    final activeSpace = activeSpaceId == null
+        room?.getLocalizedDisplayname() ?? L10n.of(context)!.nothingFound;
-        ? null
+    return Scaffold(
-        : client.getRoomById(
+      appBar: AppBar(
-            activeSpaceId,
+        leading: Center(
-          );
+          child: CloseButton(
-    final allSpaces = client.rooms.where((room) => room.isSpace);
+            onPressed: widget.onBack,
-    if (activeSpaceId == null) {
-      final rootSpaces = allSpaces
-          .where(
-            (space) =>
-                !allSpaces.any(
-                  (parentSpace) => parentSpace.spaceChildren
-                      .any((child) => child.roomId == space.id),
-                ) &&
-                space
-                    .getLocalizedDisplayname(MatrixLocals(L10n.of(context)!))
-                    .toLowerCase()
-                    .contains(
-                      widget.controller.searchController.text.toLowerCase(),
           ),
-          )
+        ),
-          .toList();
+        titleSpacing: 0,
-
+        title: ListTile(
-      return SafeArea(
+          contentPadding: EdgeInsets.zero,
-        child: CustomScrollView(
-          controller: widget.scrollController,
-          slivers: [
-            ChatListHeader(controller: widget.controller),
-            SliverList(
-              delegate: SliverChildBuilderDelegate(
-                (context, i) {
-                  final rootSpace = rootSpaces[i];
-                  final displayname = rootSpace.getLocalizedDisplayname(
-                    MatrixLocals(L10n.of(context)!),
-                  );
-                  return Material(
-                    color: Theme.of(context).colorScheme.surface,
-                    child: ListTile(
           leading: Avatar(
-                        mxContent: rootSpace.avatar,
+            mxContent: room?.avatar,
             name: displayname,
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
           ),
           title: Text(
             displayname,
             maxLines: 1,
             overflow: TextOverflow.ellipsis,
           ),
-                      subtitle: Text(
+          subtitle: room == null
-                        L10n.of(context)!.numChats(
+              ? null
-                          rootSpace.spaceChildren.length.toString(),
+              : Text(
+                  L10n.of(context)!.countChatsAndCountParticipants(
+                    room.spaceChildren.length,
+                    room.summary.mJoinedMemberCount ?? 1,
                   ),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
                 ),
-                      onTap: () =>
-                          widget.controller.setActiveSpace(rootSpace.id),
-                      onLongPress: () =>
-                          _onSpaceChildContextMenu(null, rootSpace),
-                      trailing: const Icon(Icons.chevron_right_outlined),
         ),
-                  );
+        actions: [
-                },
+          PopupMenuButton<SpaceActions>(
-                childCount: rootSpaces.length,
+            onSelected: _onSpaceAction,
+            itemBuilder: (context) => [
+              PopupMenuItem(
+                value: SpaceActions.settings,
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    const Icon(Icons.settings_outlined),
+                    const SizedBox(width: 12),
+                    Text(L10n.of(context)!.settings),
+                  ],
+                ),
               ),
+              PopupMenuItem(
+                value: SpaceActions.invite,
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    const Icon(Icons.person_add_outlined),
+                    const SizedBox(width: 12),
+                    Text(L10n.of(context)!.invite),
+                  ],
                 ),
+              ),
+              PopupMenuItem(
+                value: SpaceActions.leave,
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    const Icon(Icons.delete_outlined),
+                    const SizedBox(width: 12),
+                    Text(L10n.of(context)!.leave),
                   ],
                 ),
-      );
+              ),
-    }
+            ],
+          ),
+        ],
+      ),
+      body: room == null
+          ? const Center(
+              child: Icon(
+                Icons.search_outlined,
+                size: 80,
+              ),
+            )
+          : StreamBuilder(
+              stream: room.client.onSync.stream
+                  .where((s) => s.hasRoomUpdate)
+                  .rateLimit(const Duration(seconds: 1)),
+              builder: (context, snapshot) {
+                final joinedRooms = room.spaceChildren
+                    .map((child) {
+                      final roomId = child.roomId;
+                      if (roomId == null) return null;
+                      return room.client.getRoomById(roomId);
+                    })
+                    .whereType<Room>()
+                    .where((room) => room.membership != Membership.leave)
+                    .toList();
 
-    final parentSpace = allSpaces.firstWhereOrNull(
+                // Sort rooms by last activity
-      (space) =>
+                joinedRooms.sort(
-          space.spaceChildren.any((child) => child.roomId == activeSpaceId),
+                  (b, a) => (a.lastEvent?.originServerTs ??
+                          DateTime.fromMillisecondsSinceEpoch(0))
+                      .compareTo(
+                    b.lastEvent?.originServerTs ??
+                        DateTime.fromMillisecondsSinceEpoch(0),
+                  ),
                 );
-    return PopScope(
+
-      canPop: parentSpace == null,
+                final joinedParents = room.spaceParents
-      onPopInvoked: (pop) async {
+                    .map((parent) {
-        if (pop) return;
+                      final roomId = parent.roomId;
-        if (parentSpace != null) {
+                      if (roomId == null) return null;
-          widget.controller.setActiveSpace(parentSpace.id);
+                      return room.client.getRoomById(roomId);
-        }
+                    })
-      },
+                    .whereType<Room>()
-      child: SafeArea(
+                    .toList();
-        child: CustomScrollView(
+                final filter = _filterController.text.trim().toLowerCase();
-          controller: widget.scrollController,
+                return CustomScrollView(
                   slivers: [
-            ChatListHeader(controller: widget.controller, globalSearch: false),
                     SliverAppBar(
+                      floating: true,
+                      toolbarHeight: 72,
+                      scrolledUnderElevation: 0,
+                      backgroundColor: Colors.transparent,
                       automaticallyImplyLeading: false,
-              primary: false,
+                      title: TextField(
-              titleSpacing: 0,
+                        controller: _filterController,
-              title: ListTile(
+                        onChanged: (_) => setState(() {}),
-                leading: BackButton(
+                        textInputAction: TextInputAction.search,
-                  onPressed: () =>
+                        decoration: InputDecoration(
-                      widget.controller.setActiveSpace(parentSpace?.id),
+                          fillColor:
+                              Theme.of(context).colorScheme.secondaryContainer,
+                          border: OutlineInputBorder(
+                            borderSide: BorderSide.none,
+                            borderRadius: BorderRadius.circular(99),
+                          ),
+                          contentPadding: EdgeInsets.zero,
+                          hintText: L10n.of(context)!.search,
+                          hintStyle: TextStyle(
+                            color: Theme.of(context)
+                                .colorScheme
+                                .onPrimaryContainer,
+                            fontWeight: FontWeight.normal,
+                          ),
+                          floatingLabelBehavior: FloatingLabelBehavior.never,
+                          prefixIcon: IconButton(
+                            onPressed: () {},
+                            icon: Icon(
+                              Icons.search_outlined,
+                              color: Theme.of(context)
+                                  .colorScheme
+                                  .onPrimaryContainer,
                             ),
-                title: Text(
-                  parentSpace == null
-                      ? L10n.of(context)!.allSpaces
-                      : parentSpace.getLocalizedDisplayname(
-                          MatrixLocals(L10n.of(context)!),
                           ),
                         ),
-                trailing: IconButton(
-                  icon: loading
-                      ? const CircularProgressIndicator.adaptive(strokeWidth: 2)
-                      : const Icon(Icons.refresh_outlined),
-                  onPressed: loading ? null : _refresh,
                       ),
                     ),
+                    SliverList.builder(
+                      itemCount: joinedParents.length,
+                      itemBuilder: (context, i) {
+                        final displayname =
+                            joinedParents[i].getLocalizedDisplayname();
+                        return Padding(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 8,
+                            vertical: 1,
+                          ),
+                          child: Material(
+                            borderRadius:
+                                BorderRadius.circular(AppConfig.borderRadius),
+                            clipBehavior: Clip.hardEdge,
+                            child: ListTile(
+                              minVerticalPadding: 0,
+                              leading: Icon(
+                                Icons.adaptive.arrow_back_outlined,
+                                size: 16,
                               ),
-            Builder(
+                              title: Row(
-              builder: (context) {
-                final response = _lastResponse[activeSpaceId];
-                final error = this.error;
-                if (error != null) {
-                  return SliverFillRemaining(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.center,
-                      mainAxisAlignment: MainAxisAlignment.center,
                                 children: [
-                        Padding(
+                                  Avatar(
-                          padding: const EdgeInsets.all(16.0),
+                                    mxContent: joinedParents[i].avatar,
-                          child: Text(error.toLocalizedString(context)),
+                                    name: displayname,
+                                    size: Avatar.defaultSize / 2,
+                                    borderRadius: BorderRadius.circular(
+                                      AppConfig.borderRadius / 4,
                                     ),
-                        IconButton(
-                          onPressed: _refresh,
-                          icon: const Icon(Icons.refresh_outlined),
                                   ),
+                                  const SizedBox(width: 8),
+                                  Expanded(child: Text(displayname)),
                                 ],
                               ),
-                  );
+                              onTap: () =>
-                }
+                                  widget.toParentSpace(joinedParents[i].id),
-                if (response == null) {
+                            ),
-                  return SliverFillRemaining(
-                    child: Center(
-                      child: Text(L10n.of(context)!.loadingPleaseWait),
                           ),
                         );
-                }
-                final spaceChildren = response.rooms;
-                final canLoadMore = response.nextBatch != null;
-                return SliverList(
-                  delegate: SliverChildBuilderDelegate(
-                    (context, i) {
-                      if (canLoadMore && i == spaceChildren.length) {
-                        return Padding(
-                          padding: const EdgeInsets.all(16.0),
-                          child: OutlinedButton.icon(
-                            label: loading
-                                ? const LinearProgressIndicator()
-                                : Text(L10n.of(context)!.loadMore),
-                            icon: const Icon(Icons.chevron_right_outlined),
-                            onPressed: loading
-                                ? null
-                                : () {
-                                    loadHierarchy(response.nextBatch);
                       },
                     ),
+                    SliverList.builder(
+                      itemCount: joinedRooms.length + 1,
+                      itemBuilder: (context, i) {
+                        if (i == 0) {
+                          return SearchTitle(
+                            title: L10n.of(context)!.joinedChats,
+                            icon: const Icon(Icons.chat_outlined),
                           );
                         }
-                      final spaceChild = spaceChildren[i];
+                        i--;
-                      final room = client.getRoomById(spaceChild.roomId);
+                        final room = joinedRooms[i];
-                      if (room != null && !room.isSpace) {
                         return ChatListItem(
                           room,
-                          onLongPress: () =>
+                          filter: filter,
-                              _onSpaceChildContextMenu(spaceChild, room),
+                          onTap: () => widget.onChatTab(room),
-                          activeChat: widget.controller.activeChat == room.id,
+                          onLongPress: () => widget.onChatContext(room),
-                          onTap: () => onChatTap(room, context),
+                          activeChat: widget.activeChat == room.id,
                         );
-                      }
+                      },
-                      final isSpace = spaceChild.roomType == 'm.space';
-                      final topic = spaceChild.topic?.isEmpty ?? true
-                          ? null
-                          : spaceChild.topic;
-                      if (spaceChild.roomId == activeSpaceId) {
-                        return Column(
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            SearchTitle(
-                              title: spaceChild.name ??
-                                  spaceChild.canonicalAlias ??
-                                  'Space',
-                              icon: Padding(
-                                padding: const EdgeInsets.symmetric(
-                                  horizontal: 10.0,
                     ),
-                                child: Avatar(
+                    SliverList.builder(
-                                  size: 24,
+                      itemCount: _discoveredChildren.length + 2,
-                                  mxContent: spaceChild.avatarUrl,
+                      itemBuilder: (context, i) {
-                                  name: spaceChild.name,
+                        if (i == 0) {
+                          return SearchTitle(
+                            title: L10n.of(context)!.discover,
+                            icon: const Icon(Icons.explore_outlined),
+                          );
+                        }
+                        i--;
+                        if (i == _discoveredChildren.length) {
+                          if (_noMoreRooms) {
+                            return Padding(
+                              padding: const EdgeInsets.all(12.0),
+                              child: Center(
+                                child: Text(
+                                  L10n.of(context)!.noMoreChatsFound,
+                                  style: const TextStyle(fontSize: 13),
                                 ),
                               ),
-                              color: Theme.of(context)
+                            );
-                                  .colorScheme
+                          }
-                                  .secondaryContainer
+                          return Padding(
-                                  .withAlpha(128),
+                            padding: const EdgeInsets.symmetric(
-                              trailing: const Padding(
+                              horizontal: 12.0,
-                                padding: EdgeInsets.symmetric(horizontal: 16.0),
+                              vertical: 2.0,
-                                child: Icon(Icons.edit_outlined),
-                              ),
-                              onTap: () => _onJoinSpaceChild(spaceChild),
-                            ),
-                            if (activeSpace?.canChangeStateEvent(
-                                  EventTypes.SpaceChild,
-                                ) ==
-                                true)
-                              Material(
-                                child: ListTile(
-                                  leading: const CircleAvatar(
-                                    child: Icon(Icons.group_add_outlined),
                             ),
-                                  title:
+                            child: TextButton(
-                                      Text(L10n.of(context)!.addChatOrSubSpace),
+                              onPressed: _isLoading ? null : _loadHierarchy,
-                                  trailing:
+                              child: _isLoading
-                                      const Icon(Icons.chevron_right_outlined),
+                                  ? LinearProgressIndicator(
-                                  onTap: _addChatOrSubSpace,
+                                      borderRadius: BorderRadius.circular(
+                                        AppConfig.borderRadius,
                                       ),
+                                    )
+                                  : Text(L10n.of(context)!.loadMore),
                             ),
-                          ],
                           );
                         }
-                      final name = spaceChild.name ??
+                        final item = _discoveredChildren[i];
-                          spaceChild.canonicalAlias ??
+                        final displayname = item.name ??
-                          L10n.of(context)!.chat;
+                            item.canonicalAlias ??
-                      if (widget.controller.isSearchMode &&
+                            L10n.of(context)!.emptyChat;
-                          !name.toLowerCase().contains(
+                        if (!displayname.toLowerCase().contains(filter)) {
-                                widget.controller.searchController.text
-                                    .toLowerCase(),
-                              )) {
                           return const SizedBox.shrink();
                         }
-                      return Material(
+                        return Padding(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 8,
+                            vertical: 1,
+                          ),
+                          child: Material(
+                            borderRadius:
+                                BorderRadius.circular(AppConfig.borderRadius),
+                            clipBehavior: Clip.hardEdge,
                             child: ListTile(
+                              onTap: () => _joinChildRoom(item),
                               leading: Avatar(
-                            mxContent: spaceChild.avatarUrl,
+                                mxContent: item.avatarUrl,
-                            name: spaceChild.name,
+                                name: displayname,
+                                borderRadius: item.roomType == 'm.space'
+                                    ? BorderRadius.circular(
+                                        AppConfig.borderRadius / 2,
+                                      )
+                                    : null,
                               ),
                               title: Row(
                                 children: [
                                   Expanded(
                                     child: Text(
-                                  name,
+                                      displayname,
                                       maxLines: 1,
-                                  style: const TextStyle(
+                                      overflow: TextOverflow.ellipsis,
-                                    fontWeight: FontWeight.bold,
-                                  ),
-                                ),
-                              ),
-                              if (!isSpace) ...[
-                                const Icon(
-                                  Icons.people_outline,
-                                  size: 16,
                                     ),
-                                const SizedBox(width: 4),
-                                Text(
-                                  spaceChild.numJoinedMembers.toString(),
-                                  style: const TextStyle(fontSize: 14),
                                   ),
-                              ],
+                                  const SizedBox(width: 8),
+                                  const Icon(Icons.add_circle_outline_outlined),
                                 ],
                               ),
-                          onTap: () => room?.isSpace == true
-                              ? widget.controller.setActiveSpace(room!.id)
-                              : _onSpaceChildContextMenu(spaceChild, room),
-                          onLongPress: () =>
-                              _onSpaceChildContextMenu(spaceChild, room),
                               subtitle: Text(
-                            topic ??
+                                item.topic ??
-                                (isSpace
+                                    L10n.of(context)!.countParticipants(
-                                    ? L10n.of(context)!.enterSpace
+                                      item.numJoinedMembers,
-                                    : L10n.of(context)!.enterRoom),
+                                    ),
                                 maxLines: 1,
-                            style: TextStyle(
+                                overflow: TextOverflow.ellipsis,
-                              color: Theme.of(context).colorScheme.onSurface,
                               ),
                             ),
-                          trailing: isSpace
-                              ? const Icon(Icons.chevron_right_outlined)
-                              : null,
                           ),
                         );
                       },
-                    childCount: spaceChildren.length + (canLoadMore ? 1 : 0),
                     ),
+                  ],
                 );
               },
             ),
-          ],
-        ),
-      ),
     );
   }
 }
 
-enum SpaceChildContextAction {
+enum SpaceActions {
-  join,
+  settings,
+  invite,
   leave,
-  removeFromSpace,
 }
-
-enum AddRoomType { chat, subspace }

lib/pages/chat_list/start_chat_fab.dart

@@ -1,88 +0,0 @@
-import 'package:flutter/material.dart';
-
-import 'package:flutter_gen/gen_l10n/l10n.dart';
-import 'package:go_router/go_router.dart';
-
-import '../../config/themes.dart';
-import 'chat_list.dart';
-
-class StartChatFloatingActionButton extends StatelessWidget {
-  final ActiveFilter activeFilter;
-  final ValueNotifier<bool> scrolledToTop;
-  final bool roomsIsEmpty;
-  final void Function() createNewSpace;
-
-  const StartChatFloatingActionButton({
-    super.key,
-    required this.activeFilter,
-    required this.scrolledToTop,
-    required this.roomsIsEmpty,
-    required this.createNewSpace,
-  });
-
-  void _onPressed(BuildContext context) async {
-    switch (activeFilter) {
-      case ActiveFilter.allChats:
-      case ActiveFilter.messages:
-        context.go('/rooms/newprivatechat');
-        break;
-      case ActiveFilter.groups:
-        context.go('/rooms/newgroup');
-        break;
-      case ActiveFilter.spaces:
-        createNewSpace();
-        break;
-    }
-  }
-
-  IconData get icon {
-    switch (activeFilter) {
-      case ActiveFilter.allChats:
-      case ActiveFilter.messages:
-        return Icons.add_outlined;
-      case ActiveFilter.groups:
-        return Icons.group_add_outlined;
-      case ActiveFilter.spaces:
-        return Icons.workspaces_outlined;
-    }
-  }
-
-  String getLabel(BuildContext context) {
-    switch (activeFilter) {
-      case ActiveFilter.allChats:
-      case ActiveFilter.messages:
-        return roomsIsEmpty
-            ? L10n.of(context)!.startFirstChat
-            : L10n.of(context)!.newChat;
-      case ActiveFilter.groups:
-        return L10n.of(context)!.newGroup;
-      case ActiveFilter.spaces:
-        return L10n.of(context)!.newSpace;
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return ValueListenableBuilder<bool>(
-      valueListenable: scrolledToTop,
-      builder: (context, scrolledToTop, _) => AnimatedSize(
-        duration: FluffyThemes.animationDuration,
-        curve: FluffyThemes.animationCurve,
-        clipBehavior: Clip.none,
-        child: scrolledToTop
-            ? FloatingActionButton.extended(
-                onPressed: () => _onPressed(context),
-                icon: Icon(icon),
-                label: Text(
-                  getLabel(context),
-                  overflow: TextOverflow.fade,
-                ),
-              )
-            : FloatingActionButton(
-                onPressed: () => _onPressed(context),
-                child: Icon(icon),
-              ),
-      ),
-    );
-  }
-}

lib/pages/chat_list/utils/on_chat_tap.dart

@@ -1,127 +0,0 @@
-import 'package:flutter/material.dart';
-
-import 'package:adaptive_dialog/adaptive_dialog.dart';
-import 'package:flutter_gen/gen_l10n/l10n.dart';
-import 'package:future_loading_dialog/future_loading_dialog.dart';
-import 'package:go_router/go_router.dart';
-import 'package:matrix/matrix.dart';
-
-import 'package:fluffychat/pages/chat/send_file_dialog.dart';
-import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
-import 'package:fluffychat/widgets/matrix.dart';
-
-void onChatTap(Room room, BuildContext context) async {
-  if (room.membership == Membership.invite) {
-    final inviterId =
-        room.getState(EventTypes.RoomMember, room.client.userID!)?.senderId;
-    final inviteAction = await showModalActionSheet<InviteActions>(
-      context: context,
-      message: room.isDirectChat
-          ? L10n.of(context)!.invitePrivateChat
-          : L10n.of(context)!.inviteGroupChat,
-      title: room.getLocalizedDisplayname(MatrixLocals(L10n.of(context)!)),
-      actions: [
-        SheetAction(
-          key: InviteActions.accept,
-          label: L10n.of(context)!.accept,
-          icon: Icons.check_outlined,
-          isDefaultAction: true,
-        ),
-        SheetAction(
-          key: InviteActions.decline,
-          label: L10n.of(context)!.decline,
-          icon: Icons.close_outlined,
-          isDestructiveAction: true,
-        ),
-        SheetAction(
-          key: InviteActions.block,
-          label: L10n.of(context)!.block,
-          icon: Icons.block_outlined,
-          isDestructiveAction: true,
-        ),
-      ],
-    );
-    if (inviteAction == null) return;
-    if (inviteAction == InviteActions.block) {
-      context.go('/rooms/settings/security/ignorelist', extra: inviterId);
-      return;
-    }
-    if (inviteAction == InviteActions.decline) {
-      await showFutureLoadingDialog(
-        context: context,
-        future: room.leave,
-      );
-      return;
-    }
-    final joinResult = await showFutureLoadingDialog(
-      context: context,
-      future: () async {
-        final waitForRoom = room.client.waitForRoomInSync(
-          room.id,
-          join: true,
-        );
-        await room.join();
-        await waitForRoom;
-      },
-    );
-    if (joinResult.error != null) return;
-  }
-
-  if (room.membership == Membership.ban) {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content: Text(L10n.of(context)!.youHaveBeenBannedFromThisChat),
-      ),
-    );
-    return;
-  }
-
-  if (room.membership == Membership.leave) {
-    context.go('/rooms/archive/${room.id}');
-    return;
-  }
-
-  // Share content into this room
-  final shareContent = Matrix.of(context).shareContent;
-  if (shareContent != null) {
-    final shareFile = shareContent.tryGet<MatrixFile>('file');
-    if (shareContent.tryGet<String>('msgtype') == 'chat.fluffy.shared_file' &&
-        shareFile != null) {
-      await showDialog(
-        context: context,
-        useRootNavigator: false,
-        builder: (c) => SendFileDialog(
-          files: [shareFile],
-          room: room,
-        ),
-      );
-      Matrix.of(context).shareContent = null;
-    } else {
-      final consent = await showOkCancelAlertDialog(
-        context: context,
-        title: L10n.of(context)!.forward,
-        message: L10n.of(context)!.forwardMessageTo(
-          room.getLocalizedDisplayname(MatrixLocals(L10n.of(context)!)),
-        ),
-        okLabel: L10n.of(context)!.forward,
-        cancelLabel: L10n.of(context)!.cancel,
-      );
-      if (consent == OkCancelResult.cancel) {
-        Matrix.of(context).shareContent = null;
-        return;
-      }
-      if (consent == OkCancelResult.ok) {
-        room.sendEvent(shareContent);
-        Matrix.of(context).shareContent = null;
-      }
-    }
-  }
-
-  context.go('/rooms/${room.id}');
-}
-
-enum InviteActions {
-  accept,
-  decline,
-  block,
-}

lib/pages/settings_style/settings_style_view.dart

@@ -185,12 +185,6 @@ class SettingsStyleView extends StatelessWidget {
               storeKey: SettingKeys.showPresences,
               defaultValue: AppConfig.showPresences,
             ),
-            SettingsSwitchListTile.adaptive(
-              title: L10n.of(context)!.separateChatTypes,
-              onChanged: (b) => AppConfig.separateChatTypes = b,
-              storeKey: SettingKeys.separateChatTypes,
-              defaultValue: AppConfig.separateChatTypes,
-            ),
             Divider(
               height: 1,
               color: Theme.of(context).dividerColor,

lib/widgets/avatar.dart

@@ -15,6 +15,8 @@ class Avatar extends StatelessWidget {
   final Client? client;
   final String? presenceUserId;
   final Color? presenceBackgroundColor;
+  final BorderRadius? borderRadius;
+  final IconData? icon;
 
   const Avatar({
     this.mxContent,
@@ -24,6 +26,8 @@ class Avatar extends StatelessWidget {
     this.client,
     this.presenceUserId,
     this.presenceBackgroundColor,
+    this.borderRadius,
+    this.icon,
     super.key,
   });
 
@@ -50,18 +54,25 @@ class Avatar extends StatelessWidget {
         ),
       ),
     );
-    final borderRadius = BorderRadius.circular(size / 2);
+    final borderRadius = this.borderRadius ?? BorderRadius.circular(size / 2);
     final presenceUserId = this.presenceUserId;
     final color =
         noPic ? name?.lightColorAvatar : Theme.of(context).secondaryHeaderColor;
     final container = Stack(
       children: [
-        ClipRRect(
+        SizedBox(
-          borderRadius: borderRadius,
-          child: Container(
           width: size,
           height: size,
+          child: Material(
             color: color,
+            shape: RoundedRectangleBorder(
+              borderRadius: borderRadius,
+              side: BorderSide(
+                width: 0,
+                color: Theme.of(context).dividerColor,
+              ),
+            ),
+            clipBehavior: Clip.hardEdge,
             child: noPic
                 ? textWidget
                 : MxcImage(
@@ -75,6 +86,7 @@ class Avatar extends StatelessWidget {
                   ),
           ),
         ),
+        if (presenceUserId != null)
           PresenceBuilder(
             client: client,
             userId: presenceUserId,

lib/widgets/layouts/two_column_layout.dart

@@ -3,13 +3,11 @@ import 'package:flutter/material.dart';
 class TwoColumnLayout extends StatelessWidget {
   final Widget mainView;
   final Widget sideView;
-  final bool displayNavigationRail;
 
   const TwoColumnLayout({
     super.key,
     required this.mainView,
     required this.sideView,
-    required this.displayNavigationRail,
   });
   @override
   Widget build(BuildContext context) {
@@ -20,7 +18,7 @@ class TwoColumnLayout extends StatelessWidget {
             Container(
               clipBehavior: Clip.antiAlias,
               decoration: const BoxDecoration(),
-              width: 360.0 + (displayNavigationRail ? 64 : 0),
+              width: 384.0,
               child: mainView,
             ),
             Container(

lib/widgets/matrix.dart

@@ -433,10 +433,6 @@ class MatrixState extends State<Matrix> with WidgetsBindingObserver {
         store.getBool(SettingKeys.hideUnimportantStateEvents) ??
             AppConfig.hideUnimportantStateEvents;
 
-    AppConfig.separateChatTypes =
-        store.getBool(SettingKeys.separateChatTypes) ??
-            AppConfig.separateChatTypes;
-
     AppConfig.autoplayImages =
         store.getBool(SettingKeys.autoplayImages) ?? AppConfig.autoplayImages;
 

linux/my_application.cc

@@ -60,7 +60,7 @@ static void my_application_activate(GApplication* application) {
     gtk_window_set_title(window, "FluffyChat");
   }
 
-  gtk_window_set_default_size(window, 864, 680);
+  gtk_window_set_default_size(window, 800, 600);
   gtk_widget_show(GTK_WIDGET(window));
 
   g_autoptr(FlDartProject) project = fl_dart_project_new();