From 230c8b68a42e225e9349da1f6e0f0f5b78a5d4c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Sat, 7 Jan 2023 03:14:00 +0800
Subject: [PATCH] feat(settings): preview display name and handle

---
 pages/settings/profile/appearance.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue
index 9e85233f..bd6bec57 100644
--- a/pages/settings/profile/appearance.vue
+++ b/pages/settings/profile/appearance.vue
@@ -87,11 +87,10 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
     </template>
 
     <form space-y-5 @submit.prevent="submit">
-      <div>
+      <div v-if="isHydrated && account">
         <!-- banner -->
         <div of-hidden bg="gray-500/20" aspect="3">
           <CommonInputImage
-            v-if="isHydrated"
             v-model="form.header"
             :original="onlineSrc.header"
             w-full h-full
@@ -100,15 +99,21 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
         <CommonCropImage v-model="form.header" :stencil-aspect-ratio="3 / 1" />
 
         <!-- avatar -->
-        <div px-4>
+        <div px-4 flex="~ gap4">
           <CommonInputImage
-            v-if="isHydrated"
             v-model="form.avatar"
             :original="onlineSrc.avatar"
             mt--10
             rounded-full border="bg-base 4"
             w="sm:30 24" min-w="sm:30 24" h="sm:30 24"
           />
+          <div flex="~ col gap1" self-end>
+            <AccountDisplayName
+              :account="{ ...account, displayName: form.displayName }"
+              font-bold sm:text-2xl text-xl
+            />
+            <AccountHandle :account="account" />
+          </div>
         </div>
         <CommonCropImage v-model="form.avatar" />
       </div>