M pkgs/frontend/src/components/UserChip.vue → pkgs/frontend/src/components/UserChip.vue

@@ -1,12 +1,18 @@
 <script lang="ts" setup>
 import type { User } from '@/types'
-defineProps<{ user: User }>()
+import { computed } from 'vue';
+const props = defineProps<{ user?: User }>()
+
+const displayedUser = computed(() => {
+	if (!props.user) return { id: '0', name: '?', avatarUrl: 'https://cdn.discordapp.com/app-icons/1350116449611677770/0f6f1cdda4e1c6f0149aa2f099b80463.png?size=256', isModerator: false };
+	return props.user;
+});
 </script>
 
 <template>
 	<div class="user-chip">
-		<img :src="user.avatarUrl" alt="avatar" />
-		<span>{{ user.name }}</span>
+		<img :src="displayedUser.avatarUrl" alt="avatar" />
+		<span>{{ displayedUser.name }}</span>
 	</div>
 </template>