feat(SPA): media library indications for custom medial field type usage

2026-10-21 16:17:09 +02:00
1 parent 3e7fc9a4a5
commit 0fc3511e2b
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { t } from '@/i18n'

-import { computed, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { useMediaQuery } from '@vueuse/core'
 import MediaArticleStatusBadge from '@/components/MediaArticleStatusBadge.vue'
 import MediaThumb from '@/components/MediaThumb.vue'
 import MediaVariantsTab from '@/components/variants/MediaVariantsTab.vue'
-import type { MediaItem, MediaUsageItem } from '@/composables/useMedia'
+import { MEDIA_SKELETON_DELAY_MS, type MediaItem, type UsageState } from '@/composables/useMedia'
 import {
 	formatDimensions,
 	formatMediaDate,
@@ -15,6 +15,7 @@ import {
 	joinNames,
 	pluralArticles,
 } from '@/lib/mediaFormat'
+import { usageSplitOf } from '@/lib/mediaUsage'
 import { PANEL_TAB_TRIGGER } from '@/lib/tabStyles'
 import { useCanManageVariants } from '@/composables/useCanManageVariants'

@@ -24,7 +25,7 @@ const ACTION_BUTTON =

 const props = defineProps<{
 	item: MediaItem | null
-	usage: MediaUsageItem[]
+	usage: UsageState | null
 	copies: MediaItem[]
 	offline: boolean
 }>()
@@ -34,6 +35,7 @@ const emit = defineEmits<{
 	rename: []
 	delete: []
 	'review-duplicates': []
+	'retry-usage': []
 	gone: []
 }>()

@@ -75,6 +77,66 @@ watch(
 	},
 )

+const SKELETON_ROWS = [0, 1, 2]
+const ROW_CLASS = 'flex h-12 items-center gap-2 px-3 md:h-9'
+const ENTRY_LINK_CLASS =
+	'min-w-0 flex-1 truncate font-medium text-highlighted underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+const HEADING_CLASS = 'text-base font-semibold text-highlighted'
+
+const split = computed(() => usageSplitOf(props.usage))
+const usageLoading = computed(
+	() =>
+		(props.item?.used_in ?? 0) > 0 &&
+		(props.usage === null || props.usage.status === 'loading'),
+)
+const usageFailed = computed(
+	() =>
+		props.usage?.status === 'failed' &&
+		props.usage.failure !== 'handled' &&
+		props.usage.failure !== 'not-found',
+)
+const hasEntries = computed(() => (split.value?.entryCount ?? 0) > 0)
+const articleCount = computed(() => split.value?.articles.length ?? 0)
+const skeletonShown = ref(false)
+let skeletonTimer: ReturnType<typeof setTimeout> | null = null
+
+function clearSkeletonTimer() {
+	if (skeletonTimer !== null) {
+		clearTimeout(skeletonTimer)
+		skeletonTimer = null
+	}
+}
+
+watch(
+	[usageLoading, () => props.item?.id],
+	() => {
+		clearSkeletonTimer()
+		skeletonShown.value = false
+		if (usageLoading.value) {
+			skeletonTimer = setTimeout(() => {
+				skeletonShown.value = true
+			}, MEDIA_SKELETON_DELAY_MS)
+		}
+	},
+	{ immediate: true },
+)
+
+onBeforeUnmount(clearSkeletonTimer)
+
+const articlesHeading = computed(() => {
+	if (usageLoading.value || props.usage?.status === 'failed') {
+		return t('Used in')
+	}
+	return articleCount.value > 0
+		? t('Used in {0}', [pluralArticles(articleCount.value)])
+		: t('Not used in any article')
+})
+const noArticleLine = computed(() =>
+	props.item?.used_in === 0
+		? t('This image is safe to delete. No article shows it.')
+		: t('No article shows it.'),
+)
+
 const closeButton = computed(() => ({
 	color: 'neutral' as const,
 	variant: 'ghost' as const,
@@ -195,7 +257,12 @@ const duplicateAlert = computed(() => {
 					<MediaThumb
 						:item="item"
 						size="xl"
-						class="aspect-4/3 w-full border border-default md:aspect-16/10"
+						class="w-full border border-default"
+						:class="
+							hasEntries
+								? 'aspect-panel-banner md:aspect-16/6'
+								: 'aspect-4/3 md:aspect-16/10'
+						"
 					/>

 					<div class="flex gap-2 max-md:flex-wrap">
@@ -274,52 +341,119 @@ const duplicateAlert = computed(() => {
 						</dd>
 					</dl>

-					<section class="flex flex-col gap-2">
-						<h3 class="text-base font-semibold text-highlighted">
-							{{
-								item.used_in > 0
-									? t('Used in {0}', [pluralArticles(item.used_in)])
-									: t('Not used in any article')
-							}}
-						</h3>
-						<template v-if="item.used_in > 0">
-							<ul v-if="usage.length > 0" class="border border-default">
+					<section class="flex flex-col gap-2" data-testid="usage-articles">
+						<h3 :class="HEADING_CLASS">{{ articlesHeading }}</h3>
+						<template v-if="item.used_in === 0">
+							<p class="text-muted">{{ noArticleLine }}</p>
+						</template>
+						<template v-else-if="usageLoading">
+							<ul
+								v-if="skeletonShown"
+								data-testid="usage-skeleton"
+								class="border border-default"
+							>
 								<li
-									v-for="(article, index) in usage"
-									:key="article.id"
-									data-testid="usage-row"
-									class="flex min-h-12 items-center gap-2 px-3 md:min-h-10"
-									:class="{
-										'border-t border-muted': index > 0,
-									}"
+									v-for="row in SKELETON_ROWS"
+									:key="row"
+									:class="[ROW_CLASS, { 'border-t border-muted': row > 0 }]"
 								>
-									<RouterLink
-										:to="`/article/${article.id}/edit`"
-										class="min-w-0 flex-1 truncate font-medium text-highlighted underline underline-offset-3"
-									>
-										{{ article.title }}
-									</RouterLink>
-									<MediaArticleStatusBadge
-										:published="article.published"
-										size="md"
-									/>
-									<UIcon
-										name="i-lucide-arrow-up-right"
-										class="size-3.5 shrink-0 text-muted"
-									/>
+									<USkeleton class="h-3 w-full rounded-none bg-accented" />
 								</li>
 							</ul>
-							<p class="text-xs text-muted">
-								{{
-									t(
-										'Counted from the text of your articles each time you open this page.',
-									)
-								}}
-							</p>
 						</template>
-						<p v-else class="text-muted">
-							{{ t('This image is safe to delete. No article shows it.') }}
-						</p>
+						<template v-else-if="usageFailed">
+							<div data-testid="usage-error" class="flex flex-col items-start gap-2">
+								<p class="text-muted">
+									{{ t("Couldn't load where this image is used.") }}
+								</p>
+								<UButton
+									color="neutral"
+									variant="ghost"
+									class="h-11 px-3 md:h-8"
+									@click="emit('retry-usage')"
+								>
+									{{ t('Try again') }}
+								</UButton>
+							</div>
+						</template>
+						<template v-else-if="split">
+							<template v-if="split.articles.length > 0">
+								<ul class="border border-default">
+									<li
+										v-for="(article, index) in split.articles"
+										:key="article.id"
+										data-testid="usage-row"
+										class="flex min-h-12 items-center gap-2 px-3 md:min-h-10"
+										:class="{
+											'border-t border-muted': index > 0,
+										}"
+									>
+										<RouterLink
+											:to="`/article/${article.id}/edit`"
+											class="min-w-0 flex-1 truncate font-medium text-highlighted underline underline-offset-3"
+										>
+											{{ article.title }}
+										</RouterLink>
+										<MediaArticleStatusBadge
+											:published="article.published"
+											size="md"
+										/>
+										<UIcon
+											name="i-lucide-arrow-up-right"
+											class="size-3.5 shrink-0 text-muted"
+										/>
+									</li>
+								</ul>
+								<p class="text-xs text-muted">
+									{{
+										t(
+											'Counted from the text of your articles each time you open this page.',
+										)
+									}}
+								</p>
+							</template>
+							<p v-else class="text-muted">{{ t('No article shows it.') }}</p>
+						</template>
+					</section>
+
+					<section
+						v-if="split && hasEntries"
+						data-testid="usage-entries"
+						class="flex flex-col gap-2"
+					>
+						<h3 :class="HEADING_CLASS">{{ t('Used in entries') }}</h3>
+						<ul class="border border-default">
+							<li
+								v-for="(entry, index) in split.entries"
+								:key="entry.id"
+								data-testid="usage-entry-row"
+								:class="[ROW_CLASS, { 'border-t border-muted': index > 0 }]"
+							>
+								<span class="w-13 shrink-0 truncate text-xs text-muted">{{
+									entry.typeName
+								}}</span>
+								<RouterLink
+									:to="`/content/${entry.key}/${entry.id}`"
+									:title="entry.title"
+									:aria-label="`${entry.title}, ${entry.typeName}`"
+									:class="ENTRY_LINK_CLASS"
+								>
+									{{ entry.title }}
+								</RouterLink>
+								<UIcon
+									name="i-lucide-arrow-up-right"
+									aria-hidden="true"
+									class="size-3.5 shrink-0 text-muted"
+								/>
+							</li>
+							<li
+								v-if="split.more > 0"
+								data-testid="usage-more"
+								class="border-t border-muted px-3 py-2 text-muted"
+							>
+								{{ t('and {0} more', [split.more]) }}
+							</li>
+						</ul>
 					</section>
 				</div>
 			</div>