components/Avatar.vue

@@ -24,7 +24,7 @@ let displayAvatar: string | null
 const user = props.user || props.member?.user
 
 if (user) {
-	displayName = getDisplayName(user, props.member)
+	displayName = getDisplayName(props.member ?? user)
 	
 	if (user.avatar) {
 		displayAvatar = user.avatar

components/Guild/MemberEntry.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
         <Avatar :member="props.member" class="member-avatar"/>
-        <span class="member-display-name">{{ getDisplayName(props.member.user, props.member) }}</span>
+        <span class="member-display-name">{{ getDisplayName(props.member) }}</span>
         <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>

utils/getDisplayName.ts

@@ -1,7 +1,14 @@
 import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
 
-export function getDisplayName(user: UserResponse, member?: GuildMemberResponse): string {
-	if (member?.nickname) return member.nickname
-	if (user.display_name) return user.display_name
-	return user.username
+export default (profile: UserResponse | GuildMemberResponse): string => {
+	if ("username" in profile) {
+		// assume it's a UserRespone
+		if (profile.display_name) return profile.display_name
+		return profile.username
+	} else {
+		// assume it's a GuildMemberResponse
+		if (profile.nickname) return profile.nickname
+		if (profile.user.display_name) return profile.user.display_name
+		return profile.user.username
+	}
 }