From 7c63b811299fb62953ace5537df306989048ee4b Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Tue, 19 Nov 2024 13:42:21 +0100
Subject: [PATCH] fix: :bug: Properly render emojis in display names

---
 components/social-elements/notes/header.vue | 5 +++--
 composables/ParsedContent.ts                | 5 ++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/social-elements/notes/header.vue b/components/social-elements/notes/header.vue
index dc4d7d8..83f3ba1 100644
--- a/components/social-elements/notes/header.vue
+++ b/components/social-elements/notes/header.vue
@@ -9,7 +9,7 @@
             <div class="flex flex-row text-sm items-center justify-between w-full">
                 <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
                     <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
-                        {{ note?.account.display_name }}
+                        <span v-html="display_name"></span>
                     </Skeleton>
                 </NuxtLink>
                 <NuxtLink :href="noteUrl" class="text-gray-300 ml-2 line-clamp-1 break-all shrink-0">
@@ -32,7 +32,7 @@
             <div class="flex flex-row items-center justify-between w-full">
                 <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
                     <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
-                        {{ note?.account.display_name }}
+                        <span v-html="display_name"></span>
                     </Skeleton>
                 </NuxtLink>
                 <NuxtLink v-if="note" :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
@@ -86,6 +86,7 @@ const props = defineProps<{
 
 const username = props.note?.account.acct.split("@")[0];
 const instance = props.note?.account.acct.split("@")[1];
+const { display_name } = useParsedAccount(props.note?.account, settings);
 
 const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`;
 const accountUrl = props.note && `/@${props.note.account.acct}`;
diff --git a/composables/ParsedContent.ts b/composables/ParsedContent.ts
index 233879d..22025cf 100644
--- a/composables/ParsedContent.ts
+++ b/composables/ParsedContent.ts
@@ -101,7 +101,10 @@ export const useParsedAccount = (
     account: MaybeRef<Account | undefined | null>,
     settings: MaybeRef<Settings>,
 ) => {
-    const displayName = computed(() => toValue(account)?.display_name ?? "");
+    const displayName = computed(
+        () =>
+            toValue(account)?.display_name ?? toValue(account)?.username ?? "",
+    );
     const note = computed(() => toValue(account)?.note ?? "");
     const fields = computed(() => toValue(account)?.fields ?? []);
     const emojis = computed(() => toValue(account)?.emojis ?? []);