fix: handle undefined displayName (#21)

components/account/AccountHeader.vue

@@ -25,7 +25,7 @@ const createdAt = $computed(() => {
             </NuxtLink>
           </div>
           <NuxtLink flex flex-col :to="`/@${account.acct}`">
-            <CommonRichContent font-bold :content="account.displayName" />
+            <CommonRichContent font-bold :content="getDisplayName(account)" />
             <p op50>
               @{{ account.acct }}
             </p>

components/account/AccountInfo.vue

@@ -15,7 +15,7 @@ const { link = true } = defineProps<{
       </NuxtLink>
     </div>
     <NuxtLink flex flex-col :to="link ? `/@${account.acct}` : null">
-      <CommonRichContent font-bold :content="account.displayName" />
+      <CommonRichContent font-bold :content="getDisplayName(account)" />
       <p op35 text-sm>
         @{{ account.acct }}
       </p>

components/account/AccountInlineInfo.vue

@@ -9,6 +9,6 @@ defineProps<{
 <template>
   <NuxtLink :href="`/@${account.acct}`" flex gap-2 font-bold items-center>
     <img :src="account.avatar" class="w-5 h-5 rounded">
-    <CommonRichContent :content="account.displayName" />
+    <CommonRichContent :content="getDisplayName(account)" />
   </NuxtLink>
 </template>

components/notification/NotificationCard.vue

@@ -1,35 +1,37 @@
 <script setup lang="ts">
 import type { Notification } from 'masto'
 
-defineProps<{
+const { notification } = defineProps<{
   notification: Notification
 }>()
+
+const displayName = $computed(() => getDisplayName(notification.account))
 </script>
 
 <template>
   <div flex flex-col>
     <template v-if="notification.type === 'follow'">
       <div flex ml-4>
-        <div i-ri:user-follow-fill mr-3 color-purple />{{ notification.account.displayName }} followed you
+        <div i-ri:user-follow-fill mr-3 color-purple />{{ displayName }} followed you
       </div>
       <AccountCard :account="notification.account" p3 />
     </template>
     <template v-if="notification.type === 'follow_request'">
       <div flex ml-4>
-        <div i-ri:user-follow-fill mr-3 color-gray />{{ notification.account.displayName }} requested to follow you
+        <div i-ri:user-follow-fill mr-3 color-gray />{{ displayName }} requested to follow you
       </div>
       <!-- TODO: accept request -->
       <AccountCard :account="notification.account" p3 />
     </template>
     <template v-if="notification.type === 'favourite'">
       <div flex ml-4>
-        <div i-ri:heart-fill mr-3 color-red />{{ notification.account.displayName }} favourited your post
+        <div i-ri:heart-fill mr-3 color-red />{{ displayName }} favourited your post
       </div>
       <StatusCard :status="notification.status!" p3 />
     </template>
     <template v-if="notification.type === 'reblog'">
       <div flex ml-4>
-        <div i-ri:repeat-fill mr-3 color-green />{{ notification.account.displayName }} reblogged your post
+        <div i-ri:repeat-fill mr-3 color-green />{{ displayName }} reblogged your post
       </div>
       <StatusCard :status="notification.status!" p3 />
     </template>

composables/masto.ts

@@ -0,0 +1,5 @@
+import type { Account } from 'masto'
+
+export function getDisplayName(account: Account) {
+  return account.displayName || account.username
+}

pages/@[user]/[post].vue

@@ -18,7 +18,7 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
       <PublishWidget
         w-full
         :draft-key="`reply-${id}`"
-        :placeholder="`Reply to ${status?.account?.displayName || status?.account?.acct || 'this thread'}`"
+        :placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
         :in-reply-to-id="id"
       />
     </div>