chore: Improved UX for creating groups and spaces

lib/config/routes.dart

@@ -20,7 +20,6 @@ import 'package:fluffychat/pages/invitation_selection/invitation_selection.dart'
 import 'package:fluffychat/pages/login/login.dart';
 import 'package:fluffychat/pages/new_group/new_group.dart';
 import 'package:fluffychat/pages/new_private_chat/new_private_chat.dart';
-import 'package:fluffychat/pages/new_space/new_space.dart';
 import 'package:fluffychat/pages/settings/settings.dart';
 import 'package:fluffychat/pages/settings_3pid/settings_3pid.dart';
 import 'package:fluffychat/pages/settings_chat/settings_chat.dart';
@@ -163,7 +162,7 @@ abstract class AppRoutes {
               pageBuilder: (context, state) => defaultPageBuilder(
                 context,
                 state,
-                const NewSpace(),
+                const NewGroup(createGroupType: CreateGroupType.space),
               ),
               redirect: loggedOutRedirect,
             ),

lib/pages/chat_list/chat_list.dart

@@ -98,10 +98,6 @@ class ChatListController extends State<ChatList>
 
   StreamSubscription? _intentUriStreamSubscription;
 
-  void createNewSpace() {
-    context.push<String?>('/rooms/newspace');
-  }
-
   ActiveFilter activeFilter = AppConfig.separateChatTypes
       ? ActiveFilter.messages
       : ActiveFilter.allChats;

lib/pages/chat_list/chat_list_item.dart

@@ -157,7 +157,12 @@ class ChatListItem extends StatelessWidget {
                             right: 0,
                             child: Avatar(
                               border: space == null
-                                  ? null
+                                  ? room.isSpace
+                                      ? BorderSide(
+                                          width: 1,
+                                          color: theme.dividerColor,
+                                        )
+                                      : null
                                   : BorderSide(
                                       width: 2,
                                       color: backgroundColor ??
@@ -251,11 +256,6 @@ class ChatListItem extends StatelessWidget {
                           ),
                         ),
                       ),
-                    if (room.isSpace)
-                      const Icon(
-                        Icons.arrow_circle_right_outlined,
-                        size: 18,
-                      ),
                   ],
                 ),
                 subtitle: Row(

lib/pages/chat_list/client_chooser_button.dart

@@ -38,16 +38,6 @@ class ClientChooserButton extends StatelessWidget {
           ],
         ),
       ),
-      PopupMenuItem(
-        value: SettingsAction.newSpace,
-        child: Row(
-          children: [
-            const Icon(Icons.workspaces_outlined),
-            const SizedBox(width: 18),
-            Text(L10n.of(context).createNewSpace),
-          ],
-        ),
-      ),
       PopupMenuItem(
         value: SettingsAction.setStatus,
         child: Row(
@@ -260,9 +250,6 @@ class ClientChooserButton extends StatelessWidget {
         case SettingsAction.newGroup:
           context.go('/rooms/newgroup');
           break;
-        case SettingsAction.newSpace:
-          controller.createNewSpace();
-          break;
         case SettingsAction.invite:
           FluffyShare.shareInviteLink(context);
           break;
@@ -352,7 +339,6 @@ class ClientChooserButton extends StatelessWidget {
 enum SettingsAction {
   addAccount,
   newGroup,
-  newSpace,
   setStatus,
   invite,
   settings,

lib/pages/new_group/new_group.dart

@@ -4,13 +4,18 @@ import 'package:flutter/material.dart';
 
 import 'package:go_router/go_router.dart';
 import 'package:matrix/matrix.dart' as sdk;
+import 'package:matrix/matrix.dart';
 
 import 'package:fluffychat/pages/new_group/new_group_view.dart';
 import 'package:fluffychat/utils/file_selector.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 
 class NewGroup extends StatefulWidget {
-  const NewGroup({super.key});
+  final CreateGroupType createGroupType;
+  const NewGroup({
+    this.createGroupType = CreateGroupType.group,
+    super.key,
+  });
 
   @override
   NewGroupController createState() => NewGroupController();
@@ -30,6 +35,14 @@ class NewGroupController extends State<NewGroup> {
 
   bool loading = false;
 
+  CreateGroupType get createGroupType =>
+      _createGroupType ?? widget.createGroupType;
+
+  CreateGroupType? _createGroupType;
+
+  void setCreateGroupType(Set<CreateGroupType> b) =>
+      setState(() => _createGroupType = b.single);
+
   void setPublicGroup(bool b) => setState(() => publicGroup = b);
 
   void setGroupCanBeFound(bool b) => setState(() => groupCanBeFound = b);
@@ -48,6 +61,52 @@ class NewGroupController extends State<NewGroup> {
     });
   }
 
+  Future<void> _createGroup() async {
+    if (!mounted) return;
+    final roomId = await Matrix.of(context).client.createGroupChat(
+      visibility:
+          groupCanBeFound ? sdk.Visibility.public : sdk.Visibility.private,
+      preset: publicGroup
+          ? sdk.CreateRoomPreset.publicChat
+          : sdk.CreateRoomPreset.privateChat,
+      groupName: nameController.text.isNotEmpty ? nameController.text : null,
+      initialState: [
+        if (avatar != null)
+          sdk.StateEvent(
+            type: sdk.EventTypes.RoomAvatar,
+            content: {'url': avatarUrl.toString()},
+          ),
+      ],
+    );
+    if (!mounted) return;
+    context.go('/rooms/$roomId/invite');
+  }
+
+  Future<void> _createSpace() async {
+    if (!mounted) return;
+    final spaceId = await Matrix.of(context).client.createRoom(
+          preset: publicGroup
+              ? sdk.CreateRoomPreset.publicChat
+              : sdk.CreateRoomPreset.privateChat,
+          creationContent: {'type': RoomCreationTypes.mSpace},
+          visibility: publicGroup ? sdk.Visibility.public : null,
+          roomAliasName: publicGroup
+              ? nameController.text.trim().toLowerCase().replaceAll(' ', '_')
+              : null,
+          name: nameController.text.trim(),
+          powerLevelContentOverride: {'events_default': 100},
+          initialState: [
+            if (avatar != null)
+              sdk.StateEvent(
+                type: sdk.EventTypes.RoomAvatar,
+                content: {'url': avatarUrl.toString()},
+              ),
+          ],
+        );
+    if (!mounted) return;
+    context.pop<String>(spaceId);
+  }
+
   void submitAction([_]) async {
     final client = Matrix.of(context).client;
 
@@ -62,23 +121,12 @@ class NewGroupController extends State<NewGroup> {
 
       if (!mounted) return;
 
-      final roomId = await client.createGroupChat(
+      switch (createGroupType) {
-        visibility:
+        case CreateGroupType.group:
-            groupCanBeFound ? sdk.Visibility.public : sdk.Visibility.private,
+          await _createGroup();
-        preset: publicGroup
+        case CreateGroupType.space:
-            ? sdk.CreateRoomPreset.publicChat
+          await _createSpace();
-            : sdk.CreateRoomPreset.privateChat,
+      }
-        groupName: nameController.text.isNotEmpty ? nameController.text : null,
-        initialState: [
-          if (avatar != null)
-            sdk.StateEvent(
-              type: sdk.EventTypes.RoomAvatar,
-              content: {'url': avatarUrl.toString()},
-            ),
-        ],
-      );
-      if (!mounted) return;
-      context.go('/rooms/$roomId/invite');
     } catch (e, s) {
       sdk.Logs().d('Unable to create group', e, s);
       setState(() {
@@ -91,3 +139,5 @@ class NewGroupController extends State<NewGroup> {
   @override
   Widget build(BuildContext context) => NewGroupView(this);
 }
+
+enum CreateGroupType { group, space }

lib/pages/new_group/new_group_view.dart

@@ -26,12 +26,33 @@ class NewGroupView extends StatelessWidget {
             onPressed: controller.loading ? null : Navigator.of(context).pop,
           ),
         ),
-        title: Text(L10n.of(context).createGroup),
+        title: Text(
+          controller.createGroupType == CreateGroupType.space
+              ? L10n.of(context).newSpace
+              : L10n.of(context).createGroup,
+        ),
       ),
       body: MaxWidthBody(
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
+            Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: SegmentedButton<CreateGroupType>(
+                selected: {controller.createGroupType},
+                onSelectionChanged: controller.setCreateGroupType,
+                segments: [
+                  ButtonSegment(
+                    value: CreateGroupType.group,
+                    label: Text(L10n.of(context).group),
+                  ),
+                  ButtonSegment(
+                    value: CreateGroupType.space,
+                    label: Text(L10n.of(context).space),
+                  ),
+                ],
+              ),
+            ),
             const SizedBox(height: 16),
             InkWell(
               borderRadius: BorderRadius.circular(90),
@@ -44,8 +65,8 @@ class NewGroupView extends StatelessWidget {
                         borderRadius: BorderRadius.circular(90),
                         child: Image.memory(
                           avatar,
-                          width: Avatar.defaultSize,
+                          width: Avatar.defaultSize * 2,
-                          height: Avatar.defaultSize,
+                          height: Avatar.defaultSize * 2,
                           fit: BoxFit.cover,
                         ),
                       ),
@@ -53,7 +74,7 @@ class NewGroupView extends StatelessWidget {
             ),
             const SizedBox(height: 32),
             Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16.0),
+              padding: const EdgeInsets.symmetric(horizontal: 24.0),
               child: TextField(
                 autofocus: true,
                 controller: controller.nameController,
@@ -61,7 +82,9 @@ class NewGroupView extends StatelessWidget {
                 readOnly: controller.loading,
                 decoration: InputDecoration(
                   prefixIcon: const Icon(Icons.people_outlined),
-                  labelText: L10n.of(context).groupName,
+                  labelText: controller.createGroupType == CreateGroupType.space
+                      ? L10n.of(context).spaceName
+                      : L10n.of(context).groupName,
                 ),
               ),
             ),
@@ -69,12 +92,17 @@ class NewGroupView extends StatelessWidget {
             SwitchListTile.adaptive(
               contentPadding: const EdgeInsets.symmetric(horizontal: 32),
               secondary: const Icon(Icons.public_outlined),
-              title: Text(L10n.of(context).groupIsPublic),
+              title: Text(
+                controller.createGroupType == CreateGroupType.space
+                    ? L10n.of(context).spaceIsPublic
+                    : L10n.of(context).groupIsPublic,
+              ),
               value: controller.publicGroup,
               onChanged: controller.loading ? null : controller.setPublicGroup,
             ),
             AnimatedSize(
               duration: FluffyThemes.animationDuration,
+              curve: FluffyThemes.animationCurve,
               child: controller.publicGroup
                   ? SwitchListTile.adaptive(
                       contentPadding:
@@ -88,20 +116,42 @@ class NewGroupView extends StatelessWidget {
                     )
                   : const SizedBox.shrink(),
             ),
-            SwitchListTile.adaptive(
+            AnimatedSize(
-              contentPadding: const EdgeInsets.symmetric(horizontal: 32),
+              duration: FluffyThemes.animationDuration,
-              secondary: Icon(
+              curve: FluffyThemes.animationCurve,
-                Icons.lock_outlined,
+              child: controller.createGroupType == CreateGroupType.space
-                color: theme.colorScheme.onSurface,
+                  ? const SizedBox.shrink()
-              ),
+                  : SwitchListTile.adaptive(
-              title: Text(
+                      contentPadding:
-                L10n.of(context).enableEncryption,
+                          const EdgeInsets.symmetric(horizontal: 32),
-                style: TextStyle(
+                      secondary: Icon(
-                  color: theme.colorScheme.onSurface,
+                        Icons.lock_outlined,
-                ),
+                        color: theme.colorScheme.onSurface,
-              ),
+                      ),
-              value: !controller.publicGroup,
+                      title: Text(
-              onChanged: null,
+                        L10n.of(context).enableEncryption,
+                        style: TextStyle(
+                          color: theme.colorScheme.onSurface,
+                        ),
+                      ),
+                      value: !controller.publicGroup,
+                      onChanged: null,
+                    ),
+            ),
+            AnimatedSize(
+              duration: FluffyThemes.animationDuration,
+              curve: FluffyThemes.animationCurve,
+              child: controller.createGroupType == CreateGroupType.space
+                  ? ListTile(
+                      contentPadding:
+                          const EdgeInsets.symmetric(horizontal: 32),
+                      trailing: const Padding(
+                        padding: EdgeInsets.symmetric(horizontal: 16.0),
+                        child: Icon(Icons.info_outlined),
+                      ),
+                      subtitle: Text(L10n.of(context).newSpaceDescription),
+                    )
+                  : const SizedBox.shrink(),
             ),
             Padding(
               padding: const EdgeInsets.all(16.0),
@@ -112,12 +162,17 @@ class NewGroupView extends StatelessWidget {
                       controller.loading ? null : controller.submitAction,
                   child: controller.loading
                       ? const LinearProgressIndicator()
-                      : Text(L10n.of(context).createGroupAndInviteUsers),
+                      : Text(
+                          controller.createGroupType == CreateGroupType.space
+                              ? L10n.of(context).createNewSpace
+                              : L10n.of(context).createGroupAndInviteUsers,
+                        ),
                 ),
               ),
             ),
             AnimatedSize(
               duration: FluffyThemes.animationDuration,
+              curve: FluffyThemes.animationCurve,
               child: error == null
                   ? const SizedBox.shrink()
                   : ListTile(

lib/pages/new_space/new_space.dart

@@ -1,102 +0,0 @@
-import 'dart:typed_data';
-
-import 'package:flutter/material.dart';
-
-import 'package:flutter_gen/gen_l10n/l10n.dart';
-import 'package:go_router/go_router.dart';
-import 'package:matrix/matrix.dart' as sdk;
-import 'package:matrix/matrix.dart';
-
-import 'package:fluffychat/pages/new_space/new_space_view.dart';
-import 'package:fluffychat/utils/file_selector.dart';
-import 'package:fluffychat/utils/localized_exception_extension.dart';
-import 'package:fluffychat/widgets/matrix.dart';
-
-class NewSpace extends StatefulWidget {
-  const NewSpace({super.key});
-
-  @override
-  NewSpaceController createState() => NewSpaceController();
-}
-
-class NewSpaceController extends State<NewSpace> {
-  TextEditingController nameController = TextEditingController();
-  TextEditingController topicController = TextEditingController();
-  bool publicGroup = false;
-  bool loading = false;
-  String? nameError;
-  String? topicError;
-
-  Uint8List? avatar;
-
-  Uri? avatarUrl;
-
-  void selectPhoto() async {
-    final photo = await selectFiles(
-      context,
-      type: FileSelectorType.images,
-    );
-    final bytes = await photo.firstOrNull?.readAsBytes();
-    setState(() {
-      avatarUrl = null;
-      avatar = bytes;
-    });
-  }
-
-  void setPublicGroup(bool b) => setState(() => publicGroup = b);
-
-  void submitAction([_]) async {
-    final client = Matrix.of(context).client;
-    setState(() {
-      nameError = topicError = null;
-    });
-    if (nameController.text.isEmpty) {
-      setState(() {
-        nameError = L10n.of(context).pleaseChoose;
-      });
-      return;
-    }
-    setState(() {
-      loading = true;
-    });
-    try {
-      final avatar = this.avatar;
-      avatarUrl ??= avatar == null ? null : await client.uploadContent(avatar);
-
-      final spaceId = await client.createRoom(
-        preset: publicGroup
-            ? sdk.CreateRoomPreset.publicChat
-            : sdk.CreateRoomPreset.privateChat,
-        creationContent: {'type': RoomCreationTypes.mSpace},
-        visibility: publicGroup ? sdk.Visibility.public : null,
-        roomAliasName: publicGroup
-            ? nameController.text.trim().toLowerCase().replaceAll(' ', '_')
-            : null,
-        name: nameController.text.trim(),
-        topic: topicController.text.isEmpty ? null : topicController.text,
-        powerLevelContentOverride: {'events_default': 100},
-        initialState: [
-          if (avatar != null)
-            sdk.StateEvent(
-              type: sdk.EventTypes.RoomAvatar,
-              content: {'url': avatarUrl.toString()},
-            ),
-        ],
-      );
-      if (!mounted) return;
-      context.pop<String>(spaceId);
-    } catch (e) {
-      setState(() {
-        topicError = e.toLocalizedString(context);
-      });
-    } finally {
-      setState(() {
-        loading = false;
-      });
-    }
-    // TODO: Go to spaces
-  }
-
-  @override
-  Widget build(BuildContext context) => NewSpaceView(this);
-}

lib/pages/new_space/new_space_view.dart

@@ -1,92 +0,0 @@
-import 'package:flutter/material.dart';
-
-import 'package:flutter_gen/gen_l10n/l10n.dart';
-
-import 'package:fluffychat/widgets/avatar.dart';
-import 'package:fluffychat/widgets/layouts/max_width_body.dart';
-import 'new_space.dart';
-
-class NewSpaceView extends StatelessWidget {
-  final NewSpaceController controller;
-
-  const NewSpaceView(this.controller, {super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    final avatar = controller.avatar;
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(L10n.of(context).createNewSpace),
-      ),
-      body: MaxWidthBody(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: <Widget>[
-            const SizedBox(height: 16),
-            InkWell(
-              borderRadius: BorderRadius.circular(90),
-              onTap: controller.loading ? null : controller.selectPhoto,
-              child: CircleAvatar(
-                radius: Avatar.defaultSize,
-                child: avatar == null
-                    ? const Icon(Icons.add_a_photo_outlined)
-                    : ClipRRect(
-                        borderRadius: BorderRadius.circular(90),
-                        child: Image.memory(
-                          avatar,
-                          width: Avatar.defaultSize,
-                          height: Avatar.defaultSize,
-                          fit: BoxFit.cover,
-                        ),
-                      ),
-              ),
-            ),
-            const SizedBox(height: 32),
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16.0),
-              child: TextField(
-                autofocus: true,
-                controller: controller.nameController,
-                autocorrect: false,
-                readOnly: controller.loading,
-                decoration: InputDecoration(
-                  prefixIcon: const Icon(Icons.people_outlined),
-                  labelText: L10n.of(context).spaceName,
-                  errorText: controller.nameError,
-                ),
-              ),
-            ),
-            const SizedBox(height: 16),
-            SwitchListTile.adaptive(
-              contentPadding: const EdgeInsets.symmetric(horizontal: 32),
-              title: Text(L10n.of(context).spaceIsPublic),
-              value: controller.publicGroup,
-              onChanged: controller.setPublicGroup,
-            ),
-            ListTile(
-              contentPadding: const EdgeInsets.symmetric(horizontal: 32),
-              trailing: const Padding(
-                padding: EdgeInsets.symmetric(horizontal: 16.0),
-                child: Icon(Icons.info_outlined),
-              ),
-              subtitle: Text(L10n.of(context).newSpaceDescription),
-            ),
-            Padding(
-              padding: const EdgeInsets.all(16.0),
-              child: SizedBox(
-                width: double.infinity,
-                child: ElevatedButton(
-                  onPressed:
-                      controller.loading ? null : controller.submitAction,
-                  child: controller.loading
-                      ? const LinearProgressIndicator()
-                      : Text(L10n.of(context).createNewSpace),
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}