refactor(account): extract display name component

components/account/AccountBigCard.vue

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

components/notification/NotificationCard.vue

@@ -18,11 +18,7 @@ const { notification } = defineProps<{
           :lang="notification.status?.language ?? undefined"
         >
           <div i-ri:user-follow-fill me-1 color-primary />
-          <ContentRich
+          <AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
-            text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
-            :content="getDisplayName(notification.account, { rich: true })"
-            :emojis="notification.account.emojis"
-          />
           <span ws-nowrap>
             {{ $t('notification.followed_you') }}
           </span>
@@ -36,10 +32,9 @@ const { notification } = defineProps<{
     <template v-else-if="notification.type === 'admin.sign_up'">
       <div flex p3 items-center bg-shaded>
         <div i-ri:admin-fill me-1 color-purple />
-        <ContentRich
+        <AccountDisplayName
+          :account="notification.account"
           text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
-          :content="getDisplayName(notification.account, { rich: true })"
-          :emojis="notification.account.emojis"
         />
         <span>{{ $t("notification.signed_up") }}</span>
       </div>

components/notification/NotificationGroupedFollow.vue

@@ -35,10 +35,9 @@ const lang = $computed(() => {
         </span>
       </template>
       <template v-else>
-        <ContentRich
+        <AccountDisplayName
+          :account="items.items[0]?.account"
           text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
-          :content="getDisplayName(items.items[0]?.account, { rich: true })"
-          :emojis="items.items[0]?.account.emojis"
         />
         <span me-1 ws-nowrap>
           {{ $t('notification.followed_you') }}

components/search/SearchAccountInfo.vue

@@ -11,11 +11,7 @@ defineProps<{
     <AccountAvatar w-10 h-10 :account="account" shrink-0 />
     <div flex="~ col gap1" shrink h-full overflow-hidden leading-none>
       <div flex="~" gap-2>
-        <ContentRich
+        <AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all text-base />
-          line-clamp-1 ws-pre-wrap break-all text-base
-          :content="getDisplayName(account, { rich: true })"
-          :emojis="account.emojis"
-        />
         <AccountBotIndicator v-if="account.bot" />
       </div>
       <AccountHandle text-sm :account="account" text-secondary-light />

components/status/StatusAccountDetails.vue

@@ -13,11 +13,7 @@ const { account, link = true } = defineProps<{
     flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
     text-link-rounded
   >
-    <ContentRich
+    <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all />
-      font-bold line-clamp-1 ws-pre-wrap break-all
-      :content="getDisplayName(account, { rich: true })"
-      :emojis="account.emojis"
-    />
     <AccountHandle :account="account" />
   </NuxtLink>
 </template>