From 3e640768c812c8586da5723e6617027fc36f188b Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Thu, 23 May 2024 22:11:42 +0800
Subject: [PATCH] :sparkles: Better account page

---
 lib/router.dart           |  2 +-
 lib/screens/account.dart  | 75 ++++++++++++++++++++++++++++++---------
 lib/shells/nav_shell.dart | 26 +++++++++-----
 3 files changed, 77 insertions(+), 26 deletions(-)

diff --git a/lib/router.dart b/lib/router.dart
index c97c1ca..6e1dad1 100644
--- a/lib/router.dart
+++ b/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: '/',
diff --git a/lib/screens/account.dart b/lib/screens/account.dart
index cea3591..0bc17a0 100644
--- a/lib/screens/account.dart
+++ b/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: 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']),
-            ),
-          ).paddingOnly(
-            left: 16,
-            right: 16,
-            top: SolianTheme.isLargeScreen(context) ? 8 : 0,
+          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(
+                    title: Text('description'.tr),
+                    subtitle: Text(prof.body['description']?.isNotEmpty
+                        ? prof.body['description']
+                        : 'No description yet.'),
+                  ),
+                ),
+              ).paddingOnly(left: 24, right: 24, top: 8),
+            ],
           ),
         );
       },
diff --git a/lib/shells/nav_shell.dart b/lib/shells/nav_shell.dart
index 9b72e2c..8151e3d 100644
--- a/lib/shells/nav_shell.dart
+++ b/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(
-        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,
-      ),
+      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(),