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,21 +27,8 @@ class SettingsView extends StatelessWidget {
       context,
     ).routeInformationProvider.value.uri.path;
 
-    return Row(
+    return Scaffold(
-      children: [
+      appBar: AppBar(
-        if (FluffyThemes.isColumnMode(context)) ...[
-          SpacesNavigationRail(
-            activeSpaceId: null,
-            onGoToChats: () => context.go('/rooms'),
-            onGoToSpaceId: (spaceId) => context.go('/rooms?spaceId=$spaceId'),
-          ),
-          Container(color: Theme.of(context).dividerColor, width: 1),
-        ],
-        Expanded(
-          child: Scaffold(
-            appBar: FluffyThemes.isColumnMode(context)
-                ? null
-                : AppBar(
         title: Text(L10n.of(context).settings),
         leading: Center(
           child: BackButton(onPressed: () => context.go('/rooms')),
@@ -60,8 +45,7 @@ class SettingsView extends StatelessWidget {
                 final profile = snapshot.data;
                 final avatar = profile?.avatarUrl;
                 final mxid =
-                          Matrix.of(context).client.userID ??
+                    Matrix.of(context).client.userID ?? L10n.of(context).user;
-                          L10n.of(context).user;
                 final displayname =
                     profile?.displayName ?? mxid.localpart ?? mxid;
                 return Row(
@@ -77,8 +61,7 @@ class SettingsView extends StatelessWidget {
                             onTap: avatar != null
                                 ? () => showDialog(
                                     context: context,
-                                          builder: (_) =>
+                                    builder: (_) => MxcImageViewer(avatar),
-                                              MxcImageViewer(avatar),
                                   )
                                 : null,
                           ),
@@ -90,9 +73,7 @@ class SettingsView extends StatelessWidget {
                                 elevation: 2,
                                 onPressed: controller.setAvatarAction,
                                 heroTag: null,
-                                      child: const Icon(
+                                child: const Icon(Icons.camera_alt_outlined),
-                                        Icons.camera_alt_outlined,
-                                      ),
                               ),
                             ),
                         ],
@@ -105,13 +86,9 @@ class SettingsView extends StatelessWidget {
                         children: [
                           TextButton.icon(
                             onPressed: controller.setDisplaynameAction,
-                                  icon: const Icon(
+                            icon: const Icon(Icons.edit_outlined, size: 16),
-                                    Icons.edit_outlined,
-                                    size: 16,
-                                  ),
                             style: TextButton.styleFrom(
-                                    foregroundColor:
+                              foregroundColor: theme.colorScheme.onSurface,
-                                        theme.colorScheme.onSurface,
                               iconColor: theme.colorScheme.onSurface,
                             ),
                             label: Text(
@@ -122,15 +99,10 @@ class SettingsView extends StatelessWidget {
                             ),
                           ),
                           TextButton.icon(
-                                  onPressed: () =>
+                            onPressed: () => FluffyShare.share(mxid, context),
-                                      FluffyShare.share(mxid, context),
+                            icon: const Icon(Icons.copy_outlined, size: 14),
-                                  icon: const Icon(
-                                    Icons.copy_outlined,
-                                    size: 14,
-                                  ),
                             style: TextButton.styleFrom(
-                                    foregroundColor:
+                              foregroundColor: theme.colorScheme.secondary,
-                                        theme.colorScheme.secondary,
                               iconColor: theme.colorScheme.secondary,
                             ),
                             label: Text(
@@ -150,9 +122,7 @@ class SettingsView extends StatelessWidget {
             FutureBuilder(
               future: Matrix.of(context).client.getWellknown(),
               builder: (context, snapshot) {
-                      final accountManageUrl = snapshot
+                final accountManageUrl = snapshot.data?.additionalProperties
-                          .data
-                          ?.additionalProperties
                     .tryGetMap<String, Object?>(
                       'org.matrix.msc2965.authentication',
                     )
@@ -198,8 +168,7 @@ class SettingsView extends StatelessWidget {
             ListTile(
               leading: const Icon(Icons.notifications_outlined),
               title: Text(L10n.of(context).notifications),
-                    tileColor:
+              tileColor: activeRoute.startsWith('/rooms/settings/notifications')
-                        activeRoute.startsWith('/rooms/settings/notifications')
                   ? theme.colorScheme.surfaceContainerHigh
                   : null,
               onTap: () => context.go('/rooms/settings/notifications'),
@@ -224,8 +193,7 @@ class SettingsView extends StatelessWidget {
               leading: const Icon(Icons.shield_outlined),
               title: Text(L10n.of(context).security),
               onTap: () => context.go('/rooms/settings/security'),
-                    tileColor:
+              tileColor: activeRoute.startsWith('/rooms/settings/security')
-                        activeRoute.startsWith('/rooms/settings/security')
                   ? theme.colorScheme.surfaceContainerHigh
                   : null,
             ),
@@ -234,13 +202,11 @@ class SettingsView extends StatelessWidget {
               leading: const Icon(Icons.dns_outlined),
               title: Text(
                 L10n.of(context).aboutHomeserver(
-                        Matrix.of(context).client.userID?.domain ??
+                  Matrix.of(context).client.userID?.domain ?? 'homeserver',
-                            'homeserver',
                 ),
               ),
               onTap: () => context.go('/rooms/settings/homeserver'),
-                    tileColor:
+              tileColor: activeRoute.startsWith('/rooms/settings/homeserver')
-                        activeRoute.startsWith('/rooms/settings/homeserver')
                   ? theme.colorScheme.surfaceContainerHigh
                   : null,
             ),
@@ -263,9 +229,6 @@ class SettingsView extends StatelessWidget {
           ],
         ),
       ),
-          ),
-        ),
-      ],
     );
   }
 }

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,
                   ),
                 ],
               ),