♻️ Updated nav & account page two column design

lib/providers/navigation.dart

@@ -60,11 +60,6 @@ class NavigationProvider extends ChangeNotifier {
       screen: 'chat',
       label: 'screenChat',
     ),
-    AppNavDestination(
-      icon: Icon(Symbols.account_circle, weight: 400, opticalSize: 20),
-      screen: 'account',
-      label: 'screenAccount',
-    ),
     AppNavDestination(
       icon: Icon(Symbols.group, weight: 400, opticalSize: 20),
       screen: 'realm',

lib/router.dart

@@ -127,102 +127,111 @@ final _appRoutes = [
       ),
     ],
   ),
-  GoRoute(
-    path: '/account',
-    name: 'account',
-    builder: (context, state) => const AccountScreen(),
+  ShellRoute(
+    builder: (context, state, child) => ResponsiveScaffold(
+      aside: const AccountScreen(),
+      child: child,
+    ),
     routes: [
       GoRoute(
-        path: '/punishments',
-        name: 'accountPunishments',
-        builder: (context, state) => const PunishmentsScreen(),
-      ),
-      GoRoute(
-        path: '/programs',
-        name: 'accountProgram',
-        builder: (context, state) => const AccountProgramScreen(),
-      ),
-      GoRoute(
-        path: '/contacts',
-        name: 'accountContactMethods',
-        builder: (context, state) => const AccountContactMethod(),
-      ),
-      GoRoute(
-        path: '/events',
-        name: 'accountActionEvents',
-        builder: (context, state) => const ActionEventScreen(),
-      ),
-      GoRoute(
-        path: '/tickets',
-        name: 'accountAuthTickets',
-        builder: (context, state) => const AccountAuthTicket(),
-      ),
-      GoRoute(
-        path: '/badges',
-        name: 'accountBadges',
-        builder: (context, state) => const AccountBadgesScreen(),
-      ),
-      GoRoute(
-        path: '/wallet',
-        name: 'accountWallet',
-        builder: (context, state) => const WalletScreen(),
-      ),
-      GoRoute(
-        path: '/keypairs',
-        name: 'accountKeyPairs',
-        builder: (context, state) => const KeyPairScreen(),
-      ),
-      GoRoute(
-        path: '/settings',
-        name: 'accountSettings',
-        builder: (context, state) => AccountSettingsScreen(),
-        routes: [
-          GoRoute(
-            path: '/notify',
-            name: 'accountSettingsNotify',
-            builder: (context, state) => const AccountNotifyPrefsScreen(),
-          ),
-          GoRoute(
-            path: '/auth',
-            name: 'accountSettingsSecurity',
-            builder: (context, state) => const AccountSecurityPrefsScreen(),
-          ),
-        ],
-      ),
-      GoRoute(
-        path: '/settings/factors',
-        name: 'factorSettings',
-        builder: (context, state) => FactorSettingsScreen(),
-      ),
-      GoRoute(
-        path: '/profile/edit',
-        name: 'accountProfileEdit',
-        builder: (context, state) => ProfileEditScreen(),
-      ),
-      GoRoute(
-        path: '/publishers',
-        name: 'accountPublishers',
-        builder: (context, state) => PublisherScreen(),
-      ),
-      GoRoute(
-        path: '/publishers/new',
-        name: 'accountPublisherNew',
-        builder: (context, state) => AccountPublisherNewScreen(),
-      ),
-      GoRoute(
-        path: '/publishers/edit/:name',
-        name: 'accountPublisherEdit',
-        builder: (context, state) => AccountPublisherEditScreen(
-          name: state.pathParameters['name']!,
-        ),
-      ),
-      GoRoute(
-        path: '/profile/:name',
-        name: 'accountProfilePage',
-        pageBuilder: (context, state) => NoTransitionPage(
-          child: UserScreen(name: state.pathParameters['name']!),
-        ),
-      ),
+          path: '/account',
+          name: 'account',
+          builder: (context, state) =>
+              const ResponsiveScaffoldLanding(child: AccountScreen()),
+          routes: [
+            GoRoute(
+              path: '/punishments',
+              name: 'accountPunishments',
+              builder: (context, state) => const PunishmentsScreen(),
+            ),
+            GoRoute(
+              path: '/programs',
+              name: 'accountProgram',
+              builder: (context, state) => const AccountProgramScreen(),
+            ),
+            GoRoute(
+              path: '/contacts',
+              name: 'accountContactMethods',
+              builder: (context, state) => const AccountContactMethod(),
+            ),
+            GoRoute(
+              path: '/events',
+              name: 'accountActionEvents',
+              builder: (context, state) => const ActionEventScreen(),
+            ),
+            GoRoute(
+              path: '/tickets',
+              name: 'accountAuthTickets',
+              builder: (context, state) => const AccountAuthTicket(),
+            ),
+            GoRoute(
+              path: '/badges',
+              name: 'accountBadges',
+              builder: (context, state) => const AccountBadgesScreen(),
+            ),
+            GoRoute(
+              path: '/wallet',
+              name: 'accountWallet',
+              builder: (context, state) => const WalletScreen(),
+            ),
+            GoRoute(
+              path: '/keypairs',
+              name: 'accountKeyPairs',
+              builder: (context, state) => const KeyPairScreen(),
+            ),
+            GoRoute(
+              path: '/settings',
+              name: 'accountSettings',
+              builder: (context, state) => AccountSettingsScreen(),
+              routes: [
+                GoRoute(
+                  path: '/notify',
+                  name: 'accountSettingsNotify',
+                  builder: (context, state) => const AccountNotifyPrefsScreen(),
+                ),
+                GoRoute(
+                  path: '/auth',
+                  name: 'accountSettingsSecurity',
+                  builder: (context, state) =>
+                      const AccountSecurityPrefsScreen(),
+                ),
+              ],
+            ),
+            GoRoute(
+              path: '/settings/factors',
+              name: 'factorSettings',
+              builder: (context, state) => FactorSettingsScreen(),
+            ),
+            GoRoute(
+              path: '/profile/edit',
+              name: 'accountProfileEdit',
+              builder: (context, state) => ProfileEditScreen(),
+            ),
+            GoRoute(
+              path: '/publishers',
+              name: 'accountPublishers',
+              builder: (context, state) => PublisherScreen(),
+            ),
+            GoRoute(
+              path: '/publishers/new',
+              name: 'accountPublisherNew',
+              builder: (context, state) => AccountPublisherNewScreen(),
+            ),
+            GoRoute(
+              path: '/publishers/edit/:name',
+              name: 'accountPublisherEdit',
+              builder: (context, state) => AccountPublisherEditScreen(
+                name: state.pathParameters['name']!,
+              ),
+            ),
+            GoRoute(
+              path: '/profile/:name',
+              name: 'accountProfilePage',
+              pageBuilder: (context, state) => NoTransitionPage(
+                child: UserScreen(name: state.pathParameters['name']!),
+              ),
+            ),
+          ]),
     ],
   ),
   GoRoute(

lib/screens/account.dart

@@ -141,15 +141,6 @@ class AccountScreen extends StatelessWidget {
                 ],
               )
             : null,
-        actions: [
-          IconButton(
-            icon: const Icon(Symbols.settings, fill: 1),
-            onPressed: () {
-              GoRouter.of(context).pushNamed('settings');
-            },
-          ),
-          const Gap(8),
-        ],
       ),
       body: SingleChildScrollView(
         child: ua.isAuthorized

lib/widgets/navigation/app_rail_navigation.dart

@@ -1,10 +1,12 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
 import 'package:go_router/go_router.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
-import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/navigation.dart';
+import 'package:surface/providers/userinfo.dart';
+import 'package:surface/widgets/account/account_image.dart';
 
 class AppRailNavigation extends StatefulWidget {
   const AppRailNavigation({super.key});
@@ -18,43 +20,59 @@ class _AppRailNavigationState extends State<AppRailNavigation> {
   void initState() {
     super.initState();
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      context.read<NavigationProvider>().autoDetectIndex(GoRouter.maybeOf(context));
+      context
+          .read<NavigationProvider>()
+          .autoDetectIndex(GoRouter.maybeOf(context));
     });
   }
 
   @override
   Widget build(BuildContext context) {
+    final ua = context.watch<UserProvider>();
     final nav = context.watch<NavigationProvider>();
 
     return ListenableBuilder(
       listenable: nav,
       builder: (context, _) {
-        final destinations = nav.destinations.where((ele) => ele.isPinned).toList();
+        final destinations = nav.destinations.toList();
 
         return SizedBox(
           width: 80,
           child: NavigationRail(
-            selectedIndex:
-                nav.currentIndex != null && nav.currentIndex! < nav.pinnedDestinationCount ? nav.currentIndex : null,
+            labelType: NavigationRailLabelType.selected,
+            backgroundColor: Theme.of(context)
+                .colorScheme
+                .surfaceContainerLow
+                .withOpacity(0.5),
+            selectedIndex: nav.currentIndex != null &&
+                    nav.currentIndex! < nav.destinations.length
+                ? nav.currentIndex
+                : null,
             destinations: [
-              ...destinations.where((ele) => ele.isPinned).map((ele) {
+              ...destinations.map((ele) {
                 return NavigationRailDestination(
                   icon: ele.icon,
                   label: Text(ele.label).tr(),
                 );
               }),
             ],
+            leading: const Gap(4),
             trailing: Expanded(
               child: Align(
                 alignment: Alignment.bottomCenter,
-                child: StyledWidget(
-                  IconButton(
-                    icon: const Icon(Symbols.menu),
-                    onPressed: () {
-                      Scaffold.of(context).openDrawer();
+                child: Padding(
+                  padding: EdgeInsets.only(bottom: 24),
+                  child: GestureDetector(
+                    child: AccountImage(
+                      content: ua.user?.avatar,
+                      fallbackWidget:
+                          ua.isAuthorized ? null : const Icon(Symbols.login),
+                    ),
+                    onTap: () {
+                      GoRouter.of(context).goNamed('account');
                     },
                   ),
-                ).padding(bottom: 16),
+                ),
               ),
             ),
             onDestinationSelected: (idx) {

lib/widgets/navigation/app_scaffold.dart

@@ -13,7 +13,6 @@ import 'package:surface/providers/navigation.dart';
 import 'package:surface/widgets/connection_indicator.dart';
 import 'package:surface/widgets/navigation/app_background.dart';
 import 'package:surface/widgets/navigation/app_bottom_navigation.dart';
-import 'package:surface/widgets/navigation/app_drawer_navigation.dart';
 import 'package:surface/widgets/navigation/app_rail_navigation.dart';
 import 'package:surface/widgets/notify_indicator.dart';
 
@@ -111,7 +110,6 @@ class AppRootScaffold extends StatelessWidget {
     final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
 
     final isCollapseDrawer = cfg.drawerIsCollapsed;
-    final isExpandedDrawer = cfg.drawerIsExpanded;
 
     final routeName = GoRouter.of(context)
         .routerDelegate
@@ -132,19 +130,7 @@ class AppRootScaffold extends StatelessWidget {
         ? body
         : Row(
             children: [
-              Container(
-                decoration: BoxDecoration(
-                  border: Border(
-                    right: BorderSide(
-                      color: Theme.of(context).dividerColor,
-                      width: 1 / devicePixelRatio,
-                    ),
-                  ),
-                ),
-                child: isExpandedDrawer
-                    ? AppNavigationDrawer(elevation: 0)
-                    : AppRailNavigation(),
-              ),
+              AppRailNavigation(),
               Expanded(child: body),
             ],
           );
@@ -232,10 +218,57 @@ class AppRootScaffold extends StatelessWidget {
             ),
         ],
       ),
-      drawer: !isExpandedDrawer ? AppNavigationDrawer() : null,
       drawerEdgeDragWidth: isPopable ? 0 : null,
       bottomNavigationBar:
           isShowBottomNavigation ? AppBottomNavigationBar() : null,
     );
   }
 }
+
+class ResponsiveScaffold extends StatelessWidget {
+  final Widget aside;
+  final Widget? child;
+  const ResponsiveScaffold(
+      {super.key, required this.aside, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    if (ResponsiveBreakpoints.of(context).largerOrEqualTo(TABLET)) {
+      return Row(
+        children: [
+          Flexible(
+            flex: 1,
+            child: aside,
+          ),
+          VerticalDivider(width: 1),
+          if (child != null && child != aside)
+            Flexible(flex: 2, child: child!)
+          else
+            const Flexible(
+              flex: 2,
+              child: ResponsiveScaffoldLanding(child: null),
+            ),
+        ],
+      );
+    }
+
+    return child ?? aside;
+  }
+}
+
+class ResponsiveScaffoldLanding extends StatelessWidget {
+  final Widget? child;
+  const ResponsiveScaffoldLanding({super.key, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    if (ResponsiveBreakpoints.of(context).largerOrEqualTo(TABLET) ||
+        child == null) {
+      return AppScaffold(
+        appBar: AppBar(),
+        body: const SizedBox.shrink(),
+      );
+    }
+    return child!;
+  }
+}