fix: add details to media panel when image is used in author or site

web/src/components/MediaDetailPanel.vue

@@ -421,6 +421,40 @@ const duplicateAlert = computed(() => {
 						</template>
 					</section>
 
+					<section
+						v-if="split && split.others.length > 0"
+						data-testid="usage-others"
+						class="flex flex-col gap-2"
+					>
+						<h3 :class="HEADING_CLASS">{{ t('Used elsewhere') }}</h3>
+						<ul class="border border-default">
+							<li
+								v-for="(other, index) in split.others"
+								:key="`${other.type}-${other.id}`"
+								data-testid="usage-other-row"
+								:class="[ROW_CLASS, { 'border-t border-muted': index > 0 }]"
+							>
+								<span class="w-13 shrink-0 truncate text-xs text-muted">{{
+									other.type === 'author'
+										? t('Author avatar')
+										: t('Site default social image')
+								}}</span>
+								<RouterLink
+									:to="other.type === 'author' ? '/authors' : '/settings/sites'"
+									:title="other.title"
+									:class="ENTRY_LINK_CLASS"
+								>
+									{{ other.title }}
+								</RouterLink>
+								<UIcon
+									name="i-lucide-arrow-up-right"
+									aria-hidden="true"
+									class="size-3.5 shrink-0 text-muted"
+								/>
+							</li>
+						</ul>
+					</section>
+
 					<section
 						v-if="split && hasEntries"
 						data-testid="usage-entries"

web/src/i18n/messages.ts

@@ -513,6 +513,9 @@ export const messages = {
 	'Used in articles: {0}': 'Utilisée dans les articles : {0}',
 	'Used in entries: {0}': 'Utilisée dans les entrées : {0}',
 	'Used in entries': 'Utilisée dans les entrées',
+	'Used elsewhere': 'Utilisée ailleurs',
+	'Author avatar': 'Avatar d’auteur',
+	'Site default social image': 'Image sociale par défaut du site',
 	'and {0} more': 'et {0} autres',
 	'1 place': '1 emplacement',
 	'{0} places': '{0} emplacements',

web/src/lib/mediaUsage.ts

@@ -20,8 +20,15 @@ export interface UsageEntry {
 	title: string
 }
 
+export interface UsageOther {
+	type: 'author' | 'site'
+	id: number
+	title: string
+}
+
 export interface UsageSplit {
 	articles: UsageArticle[]
+	others: UsageOther[]
 	entries: UsageEntry[]
 	entryCount: number
 	more: number
@@ -74,8 +81,16 @@ export function splitUsage(items: MediaUsageItem[]): UsageSplit {
 			published: item.published === true,
 		}))
 	const entryItems = items.filter((item) => item.type === ENTRY_TYPE)
+	const others = items
+		.filter((item) => item.type === 'author' || item.type === 'site')
+		.map((item) => ({
+			type: item.type as UsageOther['type'],
+			id: item.id,
+			title: item.title ?? '',
+		}))
 	return {
 		articles,
+		others,
 		entries: entryItems.slice(0, ENTRY_ROWS_SHOWN).map(toEntry),
 		entryCount: entryItems.length,
 		more: Math.max(0, entryItems.length - ENTRY_ROWS_SHOWN),