feat: media page T1

web/src/components/MergeMediaDialog.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import ConfirmDialog from '@/components/ConfirmDialog.vue'
+import MediaThumb from '@/components/MediaThumb.vue'
+import type { MediaItem } from '@/composables/useMedia'
+import { mergeArticleCount } from '@/lib/mediaDuplicates'
+import { pluralArticles } from '@/lib/mediaFormat'
+
+const props = defineProps<{
+	keep: MediaItem
+	copies: MediaItem[]
+	action: () => Promise<void | boolean>
+}>()
+
+const emit = defineEmits<{ close: [confirmed: boolean] }>()
+
+const otherCount = computed(() => props.copies.length - 1)
+const others = computed(() => (otherCount.value === 1 ? 'copy' : `${otherCount.value} copies`))
+const articles = computed(() => mergeArticleCount(props.copies, props.keep.id))
+const description = computed(
+	() =>
+		`Articles that use the other ${others.value} will be switched to ${props.keep.filename}, and the other ${others.value} will be deleted. ${pluralArticles(articles.value)} will be updated. This can't be undone.`,
+)
+</script>
+
+<template>
+	<ConfirmDialog
+		:title="`Merge into ${keep.filename}?`"
+		:description="description"
+		:confirm-label="`Merge ${otherCount === 1 ? '1 copy' : `${otherCount} copies`}`"
+		cancel-label="Cancel"
+		pending-label="Merging…"
+		tone="danger"
+		:action="action"
+		@close="emit('close', $event)"
+	>
+		<template #body>
+			<div class="flex items-center gap-3 border border-default px-3 py-2.5">
+				<MediaThumb :item="keep" size="sm" class="h-10.5 w-14 border border-default" />
+				<div class="flex min-w-0 flex-col">
+					<span class="truncate font-medium text-highlighted">{{ keep.filename }}</span>
+					<span class="text-xs/5 text-muted"
+						>Kept · used in {{ pluralArticles(keep.used_in) }} now</span
+					>
+				</div>
+			</div>
+		</template>
+	</ConfirmDialog>
+</template>