feat(SPA): media page T0

web/src/components/DeleteMediaDialog.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import ConfirmDialog from '@/components/ConfirmDialog.vue'
+import MediaArticleStatusBadge from '@/components/MediaArticleStatusBadge.vue'
+import type { MediaItem, MediaUsageItem } from '@/composables/useMedia'
+import { pluralArticles } from '@/lib/mediaFormat'
+
+const props = defineProps<{
+	item: MediaItem
+	usage: MediaUsageItem[]
+	action: () => Promise<void>
+}>()
+
+const emit = defineEmits<{ close: [confirmed: boolean] }>()
+
+const inUse = computed(() => props.item.used_in > 0)
+const title = computed(() =>
+	inUse.value ? "Delete an image that's in use?" : 'Delete this image?',
+)
+const description = computed(() =>
+	inUse.value
+		? `"${props.item.filename}" is used in ${pluralArticles(props.item.used_in)}. If you delete it, they will show a broken image. This can't be undone.`
+		: `"${props.item.filename}" will be deleted from your library. No article uses it. This can't be undone.`,
+)
+</script>
+
+<template>
+	<ConfirmDialog
+		:title="title"
+		:description="description"
+		confirm-label="Delete image"
+		cancel-label="Cancel"
+		pending-label="Deleting…"
+		tone="danger"
+		:action="action"
+		@close="emit('close', $event)"
+	>
+		<template #body>
+			<ul v-if="inUse && usage.length > 0" class="border border-default">
+				<li
+					v-for="(article, index) in usage"
+					:key="article.id"
+					data-testid="affected-article"
+					class="flex min-h-9 items-center gap-2 px-3"
+					:class="{ 'border-t border-muted': index > 0 }"
+				>
+					<span class="min-w-0 flex-1 truncate text-highlighted">{{
+						article.title
+					}}</span>
+					<MediaArticleStatusBadge :published="article.published" />
+				</li>
+			</ul>
+		</template>
+	</ConfirmDialog>
+</template>