✨ Better account page

lib/router.dart

@@ -15,7 +15,7 @@ abstract class AppRouter {
     routes: [
       ShellRoute(
         builder: (context, state, child) =>
-            NavShell(state: state, child: child),
+            NavShell(state: state, child: child, showAppBar: false),
         routes: [
           GoRoute(
             path: '/',

lib/screens/account.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:solian/providers/auth.dart';
 import 'package:solian/router.dart';
+import 'package:solian/services.dart';
 import 'package:solian/theme.dart';
 import 'package:solian/widgets/account/account_avatar.dart';
 
@@ -100,25 +101,67 @@ class AccountNameCard extends StatelessWidget {
       future: provider.getProfile(),
       builder: (context, snapshot) {
         if (!snapshot.hasData) {
-          return const Center(
-            child: CircularProgressIndicator(),
-          );
+          return Container();
         }
 
+        final prof = snapshot.data!;
         return Material(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              AspectRatio(
+                aspectRatio: 16 / 7,
+                child: Stack(
+                  clipBehavior: Clip.none,
+                  fit: StackFit.expand,
+                  children: [
+                    if (prof.body['banner'] != null)
+                      Image.network(
+                        '${ServiceFinder.services['paperclip']}/api/attachments/${prof.body['banner']}',
+                        fit: BoxFit.cover,
+                      ),
+                    Positioned(
+                      bottom: -30,
+                      left: 18,
+                      child: AccountAvatar(
+                        content: prof.body['avatar'],
+                        radius: 48,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              Row(
+                crossAxisAlignment: CrossAxisAlignment.baseline,
+                textBaseline: TextBaseline.alphabetic,
+                children: [
+                  Text(
+                    prof.body['nick'],
+                    style: const TextStyle(
+                      fontSize: 17,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ).paddingOnly(right: 4),
+                  Text(
+                    '@${prof.body['name']}',
+                    style: const TextStyle(
+                      fontSize: 15,
+                    ),
+                  ),
+                ],
+              ).paddingOnly(left: 120, top: 8),
+              SizedBox(
+                width: double.infinity,
                 child: Card(
                   child: ListTile(
-              contentPadding:
-                  const EdgeInsets.only(left: 22, right: 34, top: 4, bottom: 4),
-              leading: AccountAvatar(
-                  content: snapshot.data!.body?['avatar'], radius: 24),
-              title: Text(snapshot.data!.body?['nick']),
-              subtitle: Text(snapshot.data!.body?['email']),
+                    title: Text('description'.tr),
+                    subtitle: Text(prof.body['description']?.isNotEmpty
+                        ? prof.body['description']
+                        : 'No description yet.'),
                   ),
-          ).paddingOnly(
-            left: 16,
-            right: 16,
-            top: SolianTheme.isLargeScreen(context) ? 8 : 0,
+                ),
+              ).paddingOnly(left: 24, right: 24, top: 8),
+            ],
           ),
         );
       },

lib/shells/nav_shell.dart

@@ -8,24 +8,32 @@ import 'package:solian/widgets/navigation/app_navigation_bottom_bar.dart';
 import 'package:solian/widgets/navigation/app_navigation_rail.dart';
 
 class NavShell extends StatelessWidget {
+  final bool showAppBar;
   final GoRouterState state;
   final Widget child;
 
-  const NavShell({super.key, required this.child, required this.state});
+  const NavShell({
+    super.key,
+    required this.child,
+    required this.state,
+    this.showAppBar = true,
+  });
 
   @override
   Widget build(BuildContext context) {
     final canPop = AppRouter.instance.canPop();
 
     return Scaffold(
-      appBar: AppBar(
+      appBar: showAppBar
+          ? AppBar(
               title: Text(state.topRoute?.name?.tr ?? 'page'.tr),
               centerTitle: false,
               titleSpacing: canPop ? null : 24,
               elevation: SolianTheme.isLargeScreen(context) ? 1 : 0,
               leading: canPop ? const PrevPageButton() : null,
               automaticallyImplyLeading: false,
-      ),
+            )
+          : null,
       bottomNavigationBar: SolianTheme.isLargeScreen(context)
           ? null
           : const AppNavigationBottomBar(),