chore: Adjust design of navrail

lib/config/routes.dart

@@ -197,6 +197,7 @@ abstract class AppRoutes {
                     ? TwoColumnLayout(
                         mainView: Settings(key: state.pageKey),
                         sideView: child,
+                        hasNavigationRail: false,
                       )
                     : child,
               ),

lib/pages/chat_list/chat_list_view.dart

@@ -1,11 +1,9 @@
 import 'package:flutter/material.dart';
 
-import 'package:go_router/go_router.dart';
-
 import 'package:fluffychat/config/setting_keys.dart';
 import 'package:fluffychat/config/themes.dart';
-import 'package:fluffychat/l10n/l10n.dart';
 import 'package:fluffychat/pages/chat_list/chat_list.dart';
+import 'package:fluffychat/pages/chat_list/start_chat_fab.dart';
 import 'package:fluffychat/widgets/navigation_rail.dart';
 import 'chat_list_body.dart';
 
@@ -48,16 +46,10 @@ class ChatListView extends StatelessWidget {
               child: Scaffold(
                 body: ChatListViewBody(controller),
                 floatingActionButton:
-                    !controller.isSearchMode && controller.activeSpaceId == null
+                    !controller.isSearchMode &&
-                    ? FloatingActionButton(
+                        controller.activeSpaceId == null &&
-                        backgroundColor: Theme.of(context).colorScheme.primary,
+                        !FluffyThemes.isColumnMode(context)
-                        foregroundColor: Theme.of(
+                    ? StartChatFab()
-                          context,
-                        ).colorScheme.onPrimary,
-                        onPressed: () => context.go('/rooms/newprivatechat'),
-                        tooltip: L10n.of(context).newChat,
-                        child: const Icon(Icons.edit_square),
-                      )
                     : const SizedBox.shrink(),
               ),
             ),

lib/pages/chat_list/start_chat_fab.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+import 'package:go_router/go_router.dart';
+
+import 'package:fluffychat/l10n/l10n.dart';
+
+class StartChatFab extends StatelessWidget {
+  const StartChatFab({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return FloatingActionButton(
+      heroTag: 'start_chat_fab',
+      backgroundColor: Theme.of(context).colorScheme.primary,
+      foregroundColor: Theme.of(context).colorScheme.onPrimary,
+      onPressed: () => context.go('/rooms/newprivatechat'),
+      tooltip: L10n.of(context).newChat,
+      child: const Icon(Icons.edit_square),
+    );
+  }
+}

lib/pages/settings/settings_view.dart

@@ -6,13 +6,11 @@ import 'package:url_launcher/url_launcher.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
 import 'package:fluffychat/config/app_config.dart';
-import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/l10n/l10n.dart';
 import 'package:fluffychat/utils/fluffy_share.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/widgets/avatar.dart';
 import 'package:fluffychat/widgets/matrix.dart';
-import 'package:fluffychat/widgets/navigation_rail.dart';
 import '../../widgets/mxc_image_viewer.dart';
 import 'settings.dart';
 
@@ -29,243 +27,208 @@ class SettingsView extends StatelessWidget {
       context,
     ).routeInformationProvider.value.uri.path;
 
-    return Row(
+    return Scaffold(
-      children: [
+      appBar: AppBar(
-        if (FluffyThemes.isColumnMode(context)) ...[
+        title: Text(L10n.of(context).settings),
-          SpacesNavigationRail(
+        leading: Center(
-            activeSpaceId: null,
+          child: BackButton(onPressed: () => context.go('/rooms')),
-            onGoToChats: () => context.go('/rooms'),
+        ),
-            onGoToSpaceId: (spaceId) => context.go('/rooms?spaceId=$spaceId'),
+      ),
-          ),
+      body: ListTileTheme(
-          Container(color: Theme.of(context).dividerColor, width: 1),
+        iconColor: theme.colorScheme.onSurface,
-        ],
+        child: ListView(
-        Expanded(
+          key: const Key('SettingsListViewContent'),
-          child: Scaffold(
+          children: <Widget>[
-            appBar: FluffyThemes.isColumnMode(context)
+            FutureBuilder<Profile>(
-                ? null
+              future: controller.profileFuture,
-                : AppBar(
+              builder: (context, snapshot) {
-                    title: Text(L10n.of(context).settings),
+                final profile = snapshot.data;
-                    leading: Center(
+                final avatar = profile?.avatarUrl;
-                      child: BackButton(onPressed: () => context.go('/rooms')),
+                final mxid =
-                    ),
+                    Matrix.of(context).client.userID ?? L10n.of(context).user;
-                  ),
+                final displayname =
-            body: ListTileTheme(
+                    profile?.displayName ?? mxid.localpart ?? mxid;
-              iconColor: theme.colorScheme.onSurface,
+                return Row(
-              child: ListView(
+                  children: [
-                key: const Key('SettingsListViewContent'),
+                    Padding(
-                children: <Widget>[
+                      padding: const EdgeInsets.all(32.0),
-                  FutureBuilder<Profile>(
+                      child: Stack(
-                    future: controller.profileFuture,
-                    builder: (context, snapshot) {
-                      final profile = snapshot.data;
-                      final avatar = profile?.avatarUrl;
-                      final mxid =
-                          Matrix.of(context).client.userID ??
-                          L10n.of(context).user;
-                      final displayname =
-                          profile?.displayName ?? mxid.localpart ?? mxid;
-                      return Row(
                         children: [
-                          Padding(
+                          Avatar(
-                            padding: const EdgeInsets.all(32.0),
+                            mxContent: avatar,
-                            child: Stack(
+                            name: displayname,
-                              children: [
+                            size: Avatar.defaultSize * 2.5,
-                                Avatar(
+                            onTap: avatar != null
-                                  mxContent: avatar,
+                                ? () => showDialog(
-                                  name: displayname,
+                                    context: context,
-                                  size: Avatar.defaultSize * 2.5,
+                                    builder: (_) => MxcImageViewer(avatar),
-                                  onTap: avatar != null
+                                  )
-                                      ? () => showDialog(
+                                : null,
-                                          context: context,
+                          ),
-                                          builder: (_) =>
+                          if (profile != null)
-                                              MxcImageViewer(avatar),
+                            Positioned(
-                                        )
+                              bottom: 0,
-                                      : null,
+                              right: 0,
-                                ),
+                              child: FloatingActionButton.small(
-                                if (profile != null)
+                                elevation: 2,
-                                  Positioned(
+                                onPressed: controller.setAvatarAction,
-                                    bottom: 0,
+                                heroTag: null,
-                                    right: 0,
+                                child: const Icon(Icons.camera_alt_outlined),
-                                    child: FloatingActionButton.small(
+                              ),
-                                      elevation: 2,
+                            ),
-                                      onPressed: controller.setAvatarAction,
+                        ],
-                                      heroTag: null,
+                      ),
-                                      child: const Icon(
+                    ),
-                                        Icons.camera_alt_outlined,
+                    Expanded(
-                                      ),
+                      child: Column(
-                                    ),
+                        mainAxisAlignment: .center,
-                                  ),
+                        crossAxisAlignment: .start,
-                              ],
+                        children: [
+                          TextButton.icon(
+                            onPressed: controller.setDisplaynameAction,
+                            icon: const Icon(Icons.edit_outlined, size: 16),
+                            style: TextButton.styleFrom(
+                              foregroundColor: theme.colorScheme.onSurface,
+                              iconColor: theme.colorScheme.onSurface,
+                            ),
+                            label: Text(
+                              displayname,
+                              maxLines: 1,
+                              overflow: TextOverflow.ellipsis,
+                              style: const TextStyle(fontSize: 18),
                             ),
                           ),
-                          Expanded(
+                          TextButton.icon(
-                            child: Column(
+                            onPressed: () => FluffyShare.share(mxid, context),
-                              mainAxisAlignment: .center,
+                            icon: const Icon(Icons.copy_outlined, size: 14),
-                              crossAxisAlignment: .start,
+                            style: TextButton.styleFrom(
-                              children: [
+                              foregroundColor: theme.colorScheme.secondary,
-                                TextButton.icon(
+                              iconColor: theme.colorScheme.secondary,
-                                  onPressed: controller.setDisplaynameAction,
+                            ),
-                                  icon: const Icon(
+                            label: Text(
-                                    Icons.edit_outlined,
+                              mxid,
-                                    size: 16,
+                              maxLines: 1,
-                                  ),
+                              overflow: TextOverflow.ellipsis,
-                                  style: TextButton.styleFrom(
+                              //    style: const TextStyle(fontSize: 12),
-                                    foregroundColor:
-                                        theme.colorScheme.onSurface,
-                                    iconColor: theme.colorScheme.onSurface,
-                                  ),
-                                  label: Text(
-                                    displayname,
-                                    maxLines: 1,
-                                    overflow: TextOverflow.ellipsis,
-                                    style: const TextStyle(fontSize: 18),
-                                  ),
-                                ),
-                                TextButton.icon(
-                                  onPressed: () =>
-                                      FluffyShare.share(mxid, context),
-                                  icon: const Icon(
-                                    Icons.copy_outlined,
-                                    size: 14,
-                                  ),
-                                  style: TextButton.styleFrom(
-                                    foregroundColor:
-                                        theme.colorScheme.secondary,
-                                    iconColor: theme.colorScheme.secondary,
-                                  ),
-                                  label: Text(
-                                    mxid,
-                                    maxLines: 1,
-                                    overflow: TextOverflow.ellipsis,
-                                    //    style: const TextStyle(fontSize: 12),
-                                  ),
-                                ),
-                              ],
                             ),
                           ),
                         ],
-                      );
-                    },
-                  ),
-                  FutureBuilder(
-                    future: Matrix.of(context).client.getWellknown(),
-                    builder: (context, snapshot) {
-                      final accountManageUrl = snapshot
-                          .data
-                          ?.additionalProperties
-                          .tryGetMap<String, Object?>(
-                            'org.matrix.msc2965.authentication',
-                          )
-                          ?.tryGet<String>('account');
-                      if (accountManageUrl == null) {
-                        return const SizedBox.shrink();
-                      }
-                      return ListTile(
-                        leading: const Icon(Icons.account_circle_outlined),
-                        title: Text(L10n.of(context).manageAccount),
-                        trailing: const Icon(Icons.open_in_new_outlined),
-                        onTap: () => launchUrlString(
-                          accountManageUrl,
-                          mode: LaunchMode.inAppBrowserView,
-                        ),
-                      );
-                    },
-                  ),
-                  Divider(color: theme.dividerColor),
-                  if (showChatBackupBanner == null)
-                    ListTile(
-                      leading: const Icon(Icons.backup_outlined),
-                      title: Text(L10n.of(context).chatBackup),
-                      trailing: const CircularProgressIndicator.adaptive(),
-                    )
-                  else
-                    SwitchListTile.adaptive(
-                      controlAffinity: ListTileControlAffinity.trailing,
-                      value: controller.showChatBackupBanner == false,
-                      secondary: const Icon(Icons.backup_outlined),
-                      title: Text(L10n.of(context).chatBackup),
-                      onChanged: controller.firstRunBootstrapAction,
-                    ),
-                  Divider(color: theme.dividerColor),
-                  ListTile(
-                    leading: const Icon(Icons.format_paint_outlined),
-                    title: Text(L10n.of(context).changeTheme),
-                    tileColor: activeRoute.startsWith('/rooms/settings/style')
-                        ? theme.colorScheme.surfaceContainerHigh
-                        : null,
-                    onTap: () => context.go('/rooms/settings/style'),
-                  ),
-                  ListTile(
-                    leading: const Icon(Icons.notifications_outlined),
-                    title: Text(L10n.of(context).notifications),
-                    tileColor:
-                        activeRoute.startsWith('/rooms/settings/notifications')
-                        ? theme.colorScheme.surfaceContainerHigh
-                        : null,
-                    onTap: () => context.go('/rooms/settings/notifications'),
-                  ),
-                  ListTile(
-                    leading: const Icon(Icons.devices_outlined),
-                    title: Text(L10n.of(context).devices),
-                    onTap: () => context.go('/rooms/settings/devices'),
-                    tileColor: activeRoute.startsWith('/rooms/settings/devices')
-                        ? theme.colorScheme.surfaceContainerHigh
-                        : null,
-                  ),
-                  ListTile(
-                    leading: const Icon(Icons.forum_outlined),
-                    title: Text(L10n.of(context).chat),
-                    onTap: () => context.go('/rooms/settings/chat'),
-                    tileColor: activeRoute.startsWith('/rooms/settings/chat')
-                        ? theme.colorScheme.surfaceContainerHigh
-                        : null,
-                  ),
-                  ListTile(
-                    leading: const Icon(Icons.shield_outlined),
-                    title: Text(L10n.of(context).security),
-                    onTap: () => context.go('/rooms/settings/security'),
-                    tileColor:
-                        activeRoute.startsWith('/rooms/settings/security')
-                        ? theme.colorScheme.surfaceContainerHigh
-                        : null,
-                  ),
-                  Divider(color: theme.dividerColor),
-                  ListTile(
-                    leading: const Icon(Icons.dns_outlined),
-                    title: Text(
-                      L10n.of(context).aboutHomeserver(
-                        Matrix.of(context).client.userID?.domain ??
-                            'homeserver',
                       ),
                     ),
-                    onTap: () => context.go('/rooms/settings/homeserver'),
+                  ],
-                    tileColor:
+                );
-                        activeRoute.startsWith('/rooms/settings/homeserver')
+              },
-                        ? theme.colorScheme.surfaceContainerHigh
-                        : null,
-                  ),
-                  ListTile(
-                    leading: const Icon(Icons.privacy_tip_outlined),
-                    title: Text(L10n.of(context).privacy),
-                    onTap: () => launchUrl(AppConfig.privacyUrl),
-                  ),
-                  ListTile(
-                    leading: const Icon(Icons.info_outline_rounded),
-                    title: Text(L10n.of(context).about),
-                    onTap: () => PlatformInfos.showDialog(context),
-                  ),
-                  Divider(color: theme.dividerColor),
-                  ListTile(
-                    leading: const Icon(Icons.logout_outlined),
-                    title: Text(L10n.of(context).logout),
-                    onTap: controller.logoutAction,
-                  ),
-                ],
-              ),
             ),
-          ),
+            FutureBuilder(
+              future: Matrix.of(context).client.getWellknown(),
+              builder: (context, snapshot) {
+                final accountManageUrl = snapshot.data?.additionalProperties
+                    .tryGetMap<String, Object?>(
+                      'org.matrix.msc2965.authentication',
+                    )
+                    ?.tryGet<String>('account');
+                if (accountManageUrl == null) {
+                  return const SizedBox.shrink();
+                }
+                return ListTile(
+                  leading: const Icon(Icons.account_circle_outlined),
+                  title: Text(L10n.of(context).manageAccount),
+                  trailing: const Icon(Icons.open_in_new_outlined),
+                  onTap: () => launchUrlString(
+                    accountManageUrl,
+                    mode: LaunchMode.inAppBrowserView,
+                  ),
+                );
+              },
+            ),
+            Divider(color: theme.dividerColor),
+            if (showChatBackupBanner == null)
+              ListTile(
+                leading: const Icon(Icons.backup_outlined),
+                title: Text(L10n.of(context).chatBackup),
+                trailing: const CircularProgressIndicator.adaptive(),
+              )
+            else
+              SwitchListTile.adaptive(
+                controlAffinity: ListTileControlAffinity.trailing,
+                value: controller.showChatBackupBanner == false,
+                secondary: const Icon(Icons.backup_outlined),
+                title: Text(L10n.of(context).chatBackup),
+                onChanged: controller.firstRunBootstrapAction,
+              ),
+            Divider(color: theme.dividerColor),
+            ListTile(
+              leading: const Icon(Icons.format_paint_outlined),
+              title: Text(L10n.of(context).changeTheme),
+              tileColor: activeRoute.startsWith('/rooms/settings/style')
+                  ? theme.colorScheme.surfaceContainerHigh
+                  : null,
+              onTap: () => context.go('/rooms/settings/style'),
+            ),
+            ListTile(
+              leading: const Icon(Icons.notifications_outlined),
+              title: Text(L10n.of(context).notifications),
+              tileColor: activeRoute.startsWith('/rooms/settings/notifications')
+                  ? theme.colorScheme.surfaceContainerHigh
+                  : null,
+              onTap: () => context.go('/rooms/settings/notifications'),
+            ),
+            ListTile(
+              leading: const Icon(Icons.devices_outlined),
+              title: Text(L10n.of(context).devices),
+              onTap: () => context.go('/rooms/settings/devices'),
+              tileColor: activeRoute.startsWith('/rooms/settings/devices')
+                  ? theme.colorScheme.surfaceContainerHigh
+                  : null,
+            ),
+            ListTile(
+              leading: const Icon(Icons.forum_outlined),
+              title: Text(L10n.of(context).chat),
+              onTap: () => context.go('/rooms/settings/chat'),
+              tileColor: activeRoute.startsWith('/rooms/settings/chat')
+                  ? theme.colorScheme.surfaceContainerHigh
+                  : null,
+            ),
+            ListTile(
+              leading: const Icon(Icons.shield_outlined),
+              title: Text(L10n.of(context).security),
+              onTap: () => context.go('/rooms/settings/security'),
+              tileColor: activeRoute.startsWith('/rooms/settings/security')
+                  ? theme.colorScheme.surfaceContainerHigh
+                  : null,
+            ),
+            Divider(color: theme.dividerColor),
+            ListTile(
+              leading: const Icon(Icons.dns_outlined),
+              title: Text(
+                L10n.of(context).aboutHomeserver(
+                  Matrix.of(context).client.userID?.domain ?? 'homeserver',
+                ),
+              ),
+              onTap: () => context.go('/rooms/settings/homeserver'),
+              tileColor: activeRoute.startsWith('/rooms/settings/homeserver')
+                  ? theme.colorScheme.surfaceContainerHigh
+                  : null,
+            ),
+            ListTile(
+              leading: const Icon(Icons.privacy_tip_outlined),
+              title: Text(L10n.of(context).privacy),
+              onTap: () => launchUrl(AppConfig.privacyUrl),
+            ),
+            ListTile(
+              leading: const Icon(Icons.info_outline_rounded),
+              title: Text(L10n.of(context).about),
+              onTap: () => PlatformInfos.showDialog(context),
+            ),
+            Divider(color: theme.dividerColor),
+            ListTile(
+              leading: const Icon(Icons.logout_outlined),
+              title: Text(L10n.of(context).logout),
+              onTap: controller.logoutAction,
+            ),
+          ],
         ),
-      ],
+      ),
     );
   }
 }

lib/widgets/layouts/two_column_layout.dart

@@ -5,11 +5,13 @@ import 'package:fluffychat/config/themes.dart';
 class TwoColumnLayout extends StatelessWidget {
   final Widget mainView;
   final Widget sideView;
+  final bool hasNavigationRail;
 
   const TwoColumnLayout({
     super.key,
     required this.mainView,
     required this.sideView,
+    this.hasNavigationRail = true,
   });
   @override
   Widget build(BuildContext context) {
@@ -22,7 +24,9 @@ class TwoColumnLayout extends StatelessWidget {
             Container(
               clipBehavior: Clip.antiAlias,
               decoration: const BoxDecoration(),
-              width: FluffyThemes.columnWidth + FluffyThemes.navRailWidth,
+              width:
+                  FluffyThemes.columnWidth +
+                  (hasNavigationRail ? FluffyThemes.navRailWidth : 0),
               child: mainView,
             ),
             Container(width: 1.0, color: theme.dividerColor),

lib/widgets/navigation_rail.dart

@@ -7,6 +7,7 @@ import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/l10n/l10n.dart';
 import 'package:fluffychat/pages/chat_list/navi_rail_item.dart';
+import 'package:fluffychat/pages/chat_list/start_chat_fab.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
 import 'package:fluffychat/utils/stream_extension.dart';
 import 'package:fluffychat/widgets/avatar.dart';
@@ -27,9 +28,6 @@ class SpacesNavigationRail extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final client = Matrix.of(context).client;
-    final isSettings = GoRouter.of(
-      context,
-    ).routeInformationProvider.value.uri.path.startsWith('/rooms/settings');
     return Material(
       child: SafeArea(
         child: StreamBuilder(
@@ -55,7 +53,7 @@ class SpacesNavigationRail extends StatelessWidget {
                       itemBuilder: (context, i) {
                         if (i == 0) {
                           return NaviRailItem(
-                            isSelected: activeSpaceId == null && !isSettings,
+                            isSelected: activeSpaceId == null,
                             onTap: onGoToChats,
                             icon: const Padding(
                               padding: EdgeInsets.all(10.0),
@@ -110,18 +108,9 @@ class SpacesNavigationRail extends StatelessWidget {
                       },
                     ),
                   ),
-                  NaviRailItem(
+                  Padding(
-                    isSelected: isSettings,
+                    padding: const EdgeInsets.all(12.0),
-                    onTap: () => context.go('/rooms/settings'),
+                    child: StartChatFab(),
-                    icon: const Padding(
-                      padding: EdgeInsets.all(10.0),
-                      child: Icon(Icons.settings_outlined),
-                    ),
-                    selectedIcon: const Padding(
-                      padding: EdgeInsets.all(10.0),
-                      child: Icon(Icons.settings),
-                    ),
-                    toolTip: L10n.of(context).settings,
                   ),
                 ],
               ),