fix: authors profile pictute all accross the SPA

web/src/components/AuthorAvatar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useAvatarImage } from '@/composables/useAvatarImage'
 import { initialsOf } from '@/lib/directory'
 
 const TONES = ['bg-(--rc-sand)', 'bg-(--ui-bg-accented)', 'bg-(--ui-bg-elevated)'] as const
@@ -7,18 +8,21 @@ const TONES = ['bg-(--rc-sand)', 'bg-(--ui-bg-accented)', 'bg-(--ui-bg-elevated)
 const props = withDefaults(
 	defineProps<{
 		name: string
+		avatarId?: number | null
 		size?: number
 		ring?: boolean
 	}>(),
-	{ size: 32, ring: false },
+	{ avatarId: null, size: 32, ring: false },
 )
 
+const src = useAvatarImage(() => props.avatarId)
 const tone = computed(() => TONES[props.name.length % TONES.length])
 const fontSize = computed(() => `${Math.round(props.size * 0.36)}px`)
 </script>
 
 <template>
 	<UAvatar
+		:src="src"
 		:alt="name"
 		:text="initialsOf(name)"
 		aria-hidden="true"