refactor(account): extract display name component

components/account/AccountBigCard.vue

@@ -32,13 +32,7 @@ defineOptions({
           </a>
         </div>
         <div sm:mt-2>
-          <div>
-            <ContentRich
-              font-bold text-lg line-clamp-1 ws-pre-wrap break-all
-              :content="getDisplayName(account, { rich: true })"
-              :emojis="account.emojis"
-            />
-          </div>
+          <AccountDisplayName :account="account" font-bold text-lg line-clamp-1 ws-pre-wrap break-all />
           <AccountHandle text-sm :account="account" />
         </div>
       </div>

components/account/AccountDisplayName.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <ContentRich
+    :content="getDisplayName(account, { rich: true })"
+    :emojis="account.emojis"
+    :markdown="false"
+  />
+</template>

components/account/AccountHeader.vue

@@ -73,14 +73,9 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
           <button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar">
             <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
           </button>
-          <div flex flex-col>
+          <div flex="~ col gap1">
             <div flex justify-between>
-              <ContentRich
-                font-bold sm:text-2xl text-xl
-                :content="getDisplayName(account, { rich: true })"
-                :emojis="account.emojis"
-                :markdown="false"
-              />
+              <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
               <AccountBotIndicator v-if="account.bot" />
             </div>
             <AccountHandle :account="account" />

components/account/AccountInfo.vue

@@ -22,11 +22,7 @@ defineOptions({
     </AccountHoverWrapper>
     <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none>
       <div flex="~" gap-2>
-        <ContentRich
-          font-bold line-clamp-1 ws-pre-wrap break-all text-lg
-          :content="getDisplayName(account, { rich: true })"
-          :emojis="account.emojis"
-        />
+        <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
         <AccountBotIndicator v-if="account.bot" />
       </div>
       <AccountHandle :account="account" text-secondary-light />

components/account/AccountInlineInfo.vue

@@ -16,11 +16,7 @@ const { link = true, avatar = true } = defineProps<{
       min-w-0 flex gap-2 items-center
     >
       <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
-      <ContentRich
-        line-clamp-1 ws-pre-wrap break-all
-        :content="getDisplayName(account, { rich: true })"
-        :emojis="account.emojis"
-      />
+      <AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all />
     </NuxtLink>
   </AccountHoverWrapper>
 </template>