fix: authors profile pictute all accross the SPA

web/src/components/MediaField.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { t } from '@/i18n'
 
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import AuthorAvatar from '@/components/AuthorAvatar.vue'
 import DirectoryField from '@/components/DirectoryField.vue'
 import ImageUploader from '@/components/ImageUploader.vue'
 import MediaThumb from '@/components/MediaThumb.vue'
 import type { MediaItem } from '@/composables/useMedia'
+import { useMediaNames } from '@/composables/useMediaNames'
 import type { ImageChoice } from '@/lib/imageChoice'
 
 const props = withDefaults(
@@ -25,6 +26,9 @@ const props = withDefaults(
 const imageId = defineModel<number | null>({ default: null })
 const item = defineModel<MediaItem | null>('item', { default: null })
 
+const names = useMediaNames()
+const shownItem = computed(() => item.value ?? names.itemOf(imageId.value))
+
 const pickerOpen = ref(false)
 const BUTTON_CLASS =
 	'h-11 gap-1.5 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 md:h-7'
@@ -32,12 +36,21 @@ const BUTTON_CLASS =
 const hasImage = computed(() => imageId.value !== null)
 const chooseLabel = computed(() => (hasImage.value ? t('Change image') : t('Choose image')))
 const caption = computed(() => {
-	if (item.value) {
-		return item.value.filename
+	if (shownItem.value) {
+		return shownItem.value.filename
 	}
 	return imageId.value === null ? '' : t('Image #{0}', [imageId.value])
 })
 
+function resolveMissing() {
+	if (!item.value) {
+		names.resolve([imageId.value])
+	}
+}
+
+onMounted(resolveMissing)
+watch(imageId, resolveMissing)
+
 function choose(picked: MediaItem) {
 	item.value = picked
 	imageId.value = picked.id
@@ -54,8 +67,8 @@ function remove() {
 		<div class="flex items-center gap-3">
 			<template v-if="square">
 				<MediaThumb
-					v-if="item"
-					:item="item"
+					v-if="shownItem"
+					:item="shownItem"
 					size="md"
 					class="size-16 border border-default"
 				/>
@@ -70,7 +83,7 @@ function remove() {
 						: 'border-dashed border-accented bg-default'
 				"
 			>
-				<MediaThumb v-if="item" :item="item" size="sm" class="size-full" />
+				<MediaThumb v-if="shownItem" :item="shownItem" size="sm" class="size-full" />
 				<UIcon v-else name="i-lucide-image" class="size-4.5" />
 			</div>
 			<div class="flex min-w-0 flex-1 flex-col gap-1.5">