refactor(settings): improve profile appearance

- move user info to bottom
- don't reset dirty form after pulling the latest info

pages/settings/profile/appearance.vue

@@ -5,8 +5,6 @@ import { parse } from 'ultrahtml'
 
 definePageMeta({
   middleware: 'auth',
-  // Keep alive the form page will reduce raw data timeliness and its status timeliness
-  keepalive: false,
 })
 
 const { t } = useI18n()
@@ -51,13 +49,8 @@ const { form, reset, submitter, dirtyFields, isError } = useForm({
   },
 })
 
-onMastoInit(async () => {
+const isDirty = $computed(() => !isEmptyObject(dirtyFields.value))
-  // Keep the information to be edited up to date
+const isCanSubmit = computed(() => !isError.value && isDirty)
-  await pullMyAccountInfo()
-  reset()
-})
-
-const isCanSubmit = computed(() => !isError.value && !isEmptyObject(dirtyFields.value))
 
 const { submit, submitting } = submitter(async ({ dirtyFields }) => {
   if (!isCanSubmit.value)
@@ -76,6 +69,16 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
   setAccountInfo(account!.id, res.account)
   reset()
 })
+
+const refreshInfo = async () => {
+  // Keep the information to be edited up to date
+  await pullMyAccountInfo()
+  if (!isDirty)
+    reset()
+}
+
+onMastoInit(refreshInfo)
+onReactivated(refreshInfo)
 </script>
 
 <template>
@@ -107,7 +110,10 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
             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>
+        </div>
+        <CommonCropImage v-model="form.avatar" />
+
+        <div px4>
           <AccountDisplayName
             :account="{ ...account, displayName: form.displayName }"
             font-bold sm:text-2xl text-xl
@@ -115,8 +121,6 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
           <AccountHandle :account="account" />
         </div>
       </div>
-        <CommonCropImage v-model="form.avatar" />
-      </div>
 
       <div px4 py3 space-y-5>
         <!-- display name -->