From e51ca06f97a221c90c7874b22b2123e637f52c81 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sat, 26 Nov 2022 15:06:30 +0000
Subject: [PATCH] fix: use rich (emoji) display name only with `<ContentRich>`

---
 components/account/AccountHeader.vue       | 2 +-
 components/account/AccountInfo.vue         | 2 +-
 components/account/AccountInlineInfo.vue   | 2 +-
 components/account/AccountLink.vue         | 2 +-
 components/status/StatusAccountDetails.vue | 2 +-
 composables/masto.ts                       | 8 ++++++--
 pages/@[account]/[status].vue              | 2 +-
 pages/@[account]/index.vue                 | 2 +-
 8 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 78281b58..9d486fd6 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -66,7 +66,7 @@ function previewAvatar() {
             <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
           </button>
           <div flex flex-col>
-            <ContentRich font-bold text-2xl break-words :content="getDisplayName(account)" :emojis="account.emojis" />
+            <ContentRich font-bold text-2xl break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
             <AccountHandle :account="account" op50 />
           </div>
         </div>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index fd384d23..49993e83 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -19,7 +19,7 @@ const accountHandle = $(useAccountHandle(account, fullServer))
       </NuxtLink>
     </div>
     <NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
-      <ContentRich font-bold hover:underline :content="getDisplayName(account)" :emojis="account.emojis" />
+      <ContentRich font-bold hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
       <AccountHandle :account="account" text-sm op35 />
       <slot name="bottom" />
     </NuxtLink>
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index 7a2358b0..37406e3b 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -10,6 +10,6 @@ const { link = true } = defineProps<{
 <template>
   <NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center>
     <AccountAvatar :account="account" w-5 h-5 />
-    <ContentRich hover:underline :content="getDisplayName(account)" :emojis="account.emojis" />
+    <ContentRich hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
   </NuxtLink>
 </template>
diff --git a/components/account/AccountLink.vue b/components/account/AccountLink.vue
index d425b2f5..8333d368 100644
--- a/components/account/AccountLink.vue
+++ b/components/account/AccountLink.vue
@@ -8,6 +8,6 @@ defineProps<{
 
 <template>
   <NuxtLink :to="getAccountPath(account)">
-    <ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
+    <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
   </NuxtLink>
 </template>
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index 9abdb53f..6549477f 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/components/status/StatusAccountDetails.vue
@@ -14,7 +14,7 @@ const accountHandle = $(useAccountHandle(account))
     :to="link ? getAccountPath(account) : undefined"
     flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
   >
-    <ContentRich font-bold break-words hover:underline :content="getDisplayName(account)" :emojis="account.emojis" />
+    <ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
     <p op35 text-sm>
       {{ accountHandle }}
     </p>
diff --git a/composables/masto.ts b/composables/masto.ts
index caf04639..21380229 100644
--- a/composables/masto.ts
+++ b/composables/masto.ts
@@ -39,8 +39,12 @@ export function getServerName(account: Account) {
   return account.url.match(UserLinkRE)?.[1] || currentUser.value?.server || ''
 }
 
-export function getDisplayName(account: Account) {
-  return account.displayName || account.username
+export function getDisplayName(account?: Account, options?: { rich?: boolean }) {
+  const displayName = account?.displayName || account?.username || ''
+  if (options?.rich)
+    return displayName
+
+  return displayName.replace(/:([\w-]+?):/g, '')
 }
 
 export function getShortHandle(account: Account) {
diff --git a/pages/@[account]/[status].vue b/pages/@[account]/[status].vue
index ed3288c3..96141732 100644
--- a/pages/@[account]/[status].vue
+++ b/pages/@[account]/[status].vue
@@ -23,7 +23,7 @@ const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fet
         v-if="currentUser"
         border="t base"
         :draft-key="`reply-${id}`"
-        :placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
+        :placeholder="`Reply to ${status?.account ? getDisplayName(status.account) : 'this thread'}`"
         :in-reply-to-id="id"
       />
 
diff --git a/pages/@[account]/index.vue b/pages/@[account]/index.vue
index e57415f1..05c40d19 100644
--- a/pages/@[account]/index.vue
+++ b/pages/@[account]/index.vue
@@ -6,7 +6,7 @@ const account = await fetchAccountByName(accountName).catch(() => null)
 
 if (account) {
   useHead({
-    title: () => `${account.displayName?.replace(/\:\w+\:/g, '') ?? ''} (@${account.acct})`,
+    title: () => `${getDisplayName(account)} (@${account.acct})`,
   })
 }
 </script>