fix: authors profile pictute all accross the SPA

web/src/views/AuthorsView.vue

@@ -357,6 +357,7 @@ async function loadDeleteOptions(author: Author) {
 			description: candidate.slug,
 			display: candidate.name,
 			avatarName: candidate.name,
+			avatarId: candidate.avatar_id,
 		})),
 		nobodyOption(),
 	]
@@ -668,7 +669,7 @@ const noResultsTitle = computed(() => t('No authors match "{0}"', [query.value.q
 			>
 				<template #cells="{ item }">
 					<div class="flex min-w-0 items-center gap-2.5">
-						<AuthorAvatar :name="item.name" :size="32" />
+						<AuthorAvatar :name="item.name" :avatar-id="item.avatar_id" :size="32" />
 						<span class="truncate font-medium text-highlighted" :title="item.name">{{
 							item.name
 						}}</span>
@@ -680,7 +681,7 @@ const noResultsTitle = computed(() => t('No authors match "{0}"', [query.value.q
 					<span class="text-muted">{{ pluralArticles(item.article_count) }}</span>
 				</template>
 				<template #card="{ item }">
-					<AuthorAvatar :name="item.name" :size="40" />
+					<AuthorAvatar :name="item.name" :avatar-id="item.avatar_id" :size="40" />
 					<div class="flex min-w-0 flex-1 flex-col gap-0.75">
 						<span
 							class="truncate text-md/5.25 font-medium text-highlighted"

web/src/views/__tests__/AuthorsView.spec.ts

@@ -49,6 +49,40 @@ function manyAuthors(count: number): Author[] {
 	}))
 }
 
+describe('Authors: avatar image', () => {
+	const AVATAR_ID = 77
+	const AVATAR_URL = '/static/uploadedImages/camille.jpg'
+
+	function backendWithAvatar() {
+		const backend = createBackend()
+		backend.authors = backend.authors.map((author) =>
+			author.slug === 'camille-roche' ? { ...author, avatar_id: AVATAR_ID } : author,
+		)
+		backend.responders[`GET /v1/media/${AVATAR_ID}`] = () => ({
+			id: AVATAR_ID,
+			url: AVATAR_URL,
+		})
+		return backend
+	}
+
+	it('draws the saved avatar in the row of the author that has one', async () => {
+		await mountDirectory('authors', '/authors', { backend: backendWithAvatar() })
+		await flushPromises()
+
+		const images = Array.from(
+			document.body.querySelectorAll<HTMLImageElement>('[data-testid="directory-row"] img'),
+		)
+		expect(images.map((image) => image.getAttribute('src'))).toEqual([AVATAR_URL])
+	})
+
+	it('keeps the initials for authors without an avatar', async () => {
+		await mountDirectory('authors', '/authors')
+		await flushPromises()
+
+		expect(document.body.querySelectorAll('[data-testid="directory-row"] img')).toHaveLength(0)
+	})
+})
+
 describe.each(['owner', 'admin'])('Authors: default for %s', (role) => {
 	it('shows the header, the search field, the columns and the rows', async () => {
 		const backend = await mountDirectory('authors', '/authors', { role })

web/src/views/__tests__/EditorAuthorList.spec.ts

@@ -79,6 +79,31 @@ describe('Author list: an ordered list with the first author as the primary byli
 	})
 })
 
+describe('Author list: avatars', () => {
+	const AVATAR_ID = 61
+	const AVATAR_URL = '/static/uploadedImages/ines.jpg'
+
+	function rowImages() {
+		return authorRows().map((row) => row.querySelector('img')?.getAttribute('src') ?? null)
+	}
+
+	it('draws the avatar of an author loaded with the article and keeps the initials of the others', async () => {
+		const backend = backendWith('Inès Duarte', 'Jonas Pereira')
+		backend.article.authors = backend.article.authors!.map((author, index) =>
+			index === 0 ? { ...author, avatar_id: AVATAR_ID } : author,
+		)
+		backend.responders[`GET /v1/media/${AVATAR_ID}`] = () => ({
+			id: AVATAR_ID,
+			url: AVATAR_URL,
+		})
+
+		await mountMeta('editor', EDITOR, { backend })
+		await flushPromises()
+
+		expect(rowImages()).toEqual([AVATAR_URL, null])
+	})
+})
+
 describe('Author list: reorder with the keyboard', () => {
 	async function mountThree() {
 		const backend = backendWith('Inès Duarte', 'Jonas Pereira', 'Camille Roche')