feat: image variants cache panel

web/src/components/variants/CacheTopImagesCard.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import MediaThumb from '@/components/MediaThumb.vue'
+import type { CacheImageStat } from '@/composables/useVariantCache'
+import { variantsCount } from '@/lib/variants/cacheFormat'
+import { formatVariantSize } from '@/lib/variants/variantFormat'
+
+defineProps<{
+	items: CacheImageStat[]
+	desktop: boolean
+	locked: boolean
+	isPurging: (id: number) => boolean
+}>()
+
+const emit = defineEmits<{ purge: [item: CacheImageStat] }>()
+</script>
+
+<template>
+	<UCard
+		data-testid="cache-top-images"
+		:ui="{
+			root: 'min-w-0 rounded-none border border-default bg-default ring-0 divide-y-0',
+			header: 'flex min-h-11 items-center border-b border-default px-4 py-0 sm:px-4 sm:py-0',
+			body: 'p-0 sm:p-0',
+		}"
+	>
+		<template #header>
+			<h2 class="font-semibold text-highlighted">
+				{{ t('Top 10 images by variant disk usage') }}
+			</h2>
+		</template>
+		<div
+			v-for="(item, index) in items"
+			:key="item.id"
+			data-testid="cache-image-row"
+			class="flex min-h-15 items-center gap-3 px-3 sm:min-h-10 sm:px-4"
+			:class="index > 0 ? 'border-t border-muted' : ''"
+		>
+			<span class="w-5 font-mono text-xs text-muted">{{ index + 1 }}</span>
+			<MediaThumb
+				:item="{ url: item.url, content_type: '', sha256: '' }"
+				size="sm"
+				class="h-6 w-8 border border-default"
+			/>
+			<div class="flex min-w-0 flex-1 flex-col sm:flex-row sm:gap-3">
+				<span class="min-w-0 flex-1 truncate font-medium text-highlighted">
+					{{ item.filename }}
+				</span>
+				<span class="whitespace-nowrap text-xs text-muted sm:w-37.5">
+					{{ variantsCount(item.files)
+					}}{{ desktop ? '' : ` · ${formatVariantSize(item.bytes)}` }}
+				</span>
+			</div>
+			<span v-if="desktop" class="w-15 text-right text-toned">
+				{{ formatVariantSize(item.bytes) }}
+			</span>
+			<UTooltip v-if="!desktop" :text="t('Purge {0}', [item.filename])">
+				<UButton
+					color="neutral"
+					variant="outline"
+					icon="i-lucide-eraser"
+					:aria-label="t('Purge {0}', [item.filename])"
+					:loading="isPurging(item.id)"
+					:disabled="locked || isPurging(item.id)"
+					class="size-11 shrink-0 justify-center border border-accented bg-default text-highlighted ring-0"
+					:ui="{ leadingIcon: 'size-3.5' }"
+					@click="emit('purge', item)"
+				/>
+			</UTooltip>
+			<UButton
+				v-else
+				color="neutral"
+				variant="outline"
+				icon="i-lucide-eraser"
+				:aria-label="t('Purge {0}', [item.filename])"
+				:loading="isPurging(item.id)"
+				:disabled="locked || isPurging(item.id)"
+				class="h-6.5 shrink-0 gap-1.5 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0"
+				:ui="{ leadingIcon: 'size-3.5' }"
+				@click="emit('purge', item)"
+			>
+				{{ t('Purge') }}
+			</UButton>
+		</div>
+	</UCard>
+</template>