feat: image variants per image

web/src/components/BulkDeleteMediaDialog.vue

@@ -4,6 +4,7 @@ import { t } from '@/i18n'
 import { computed } from 'vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import MediaBadge from '@/components/MediaBadge.vue'
+import VariantRemovalNote from '@/components/variants/VariantRemovalNote.vue'
 import type { MediaItem } from '@/composables/useMedia'
 import { pluralArticles } from '@/lib/mediaFormat'
 
@@ -20,6 +21,12 @@ const emit = defineEmits<{ close: [confirmed: boolean] }>()
 const total = computed(() => props.items.length)
 const imageLabel = computed(() => t(total.value === 1 ? '{0} image' : '{0} images', [total.value]))
 const inUse = computed(() => props.items.filter((item) => item.used_in > 0))
+const variantCount = computed(() =>
+	props.items.reduce((sum, item) => sum + (item.variant_count ?? 0), 0),
+)
+const variantBytes = computed(() =>
+	props.items.reduce((sum, item) => sum + (item.variant_size ?? 0), 0),
+)
 const articleCount = computed(() => inUse.value.reduce((sum, item) => sum + item.used_in, 0))
 const description = computed(() => {
 	const usedCount = inUse.value.length
@@ -79,6 +86,7 @@ const description = computed(() => {
 					<MediaBadge v-else kind="unused" :label="t('Unused')" />
 				</li>
 			</ul>
+			<VariantRemovalNote :count="variantCount" :bytes="variantBytes" />
 		</template>
 	</ConfirmDialog>
 </template>