Added UserAvatar component.

components/UserAvatar.vue

@@ -0,0 +1,15 @@
+<template>
+    <div v-if="user" class="flex align-items-center">
+        <Avatar :image="user.meta?.avatarUrl" alt="user avatar" shape="circle" />
+        <span class="ml-2">
+            {{ user.meta?.displayName }}
+        </span>
+    </div>
+    <Message v-else severity="error">You may need to <i>includeRelated:['user']</i> to view this.</Message>
+</template>
+
+<script setup>
+const props = defineProps({
+    user: Object,
+});
+</script>

components/UserProfileLink.vue

@@ -1,9 +1,6 @@
 <template>
-    <NuxtLink v-if="user" :to="`/user/${user.props.id}/profile`" v-ripple class="flex align-items-center">
-        <Avatar :image="user.meta?.avatarUrl" alt="user avatar" shape="circle" />
-        <span class="ml-2">
-            {{ user.meta?.displayName }}
-        </span>
+    <NuxtLink v-if="user" :to="`/user/${user.props.id}/profile`" v-ripple>
+        <UserAvatar :user="user" />
     </NuxtLink>
     <Message v-else severity="error">You may need to <i>includeRelated:['user']</i> to view this.</Message>
 </template>

docs/change-log.md

@@ -16,6 +16,7 @@ outline: deep
 * Implemented: write docs for utils #89
 * Fixed: drizzle kit is now interactive #93
 * Fixed: cannot dispose useVingRecord on edit page #102
+* Added UserAvatar component.
 
 ## 2024-04-10
 * Implemented: filterQualifier: true should be in the examples for all relation ids #96

docs/subsystems/ui.md

@@ -228,8 +228,16 @@ Place this in your layouts so the user has an indication that there are some bac
 </client-only>
 ```
 
+
+### UserAvatar
+Displays the user's avatar next to their display name.
+
+```html
+<UserAvatar :user="user" />
+```
+
 ### UserProfileLink
-Creates a link to a user profile including the user's avatar.
+Wraps the `UserAvatar` component in a `NuxtLink` pointing to the user's profile page.
 
 ```html
 <UserProfileLink :user="user" />