feat: image variants cache panel

web/src/components/DashboardShell.vue

@@ -78,8 +78,8 @@ const settingsChildren = computed(() => [
 	},
 	{
 		label: t('Cache'),
+		to: '/settings/media/cache',
 		icon: 'i-lucide-database',
-		disabled: true,
 		active: !props.noCurrentNav && route.path === '/settings/media/cache',
 	},
 ])

web/src/components/__tests__/DashboardShell.spec.ts

@@ -396,10 +396,9 @@ describe('DashboardShell Settings expands to the Media subpages', () => {
 			const variants = nav.find('a[href="/settings/media/variants"]')
 			expect(variants.text()).toContain('Variants')
 			expect(variants.attributes('aria-current')).toBeUndefined()
-			const cache = nav
-				.findAll('[aria-disabled="true"], [disabled]')
-				.find((el) => el.text().includes('Cache'))
-			expect(cache).toBeDefined()
+			const cache = nav.find('a[href="/settings/media/cache"]')
+			expect(cache.text()).toContain('Cache')
+			expect(cache.attributes('aria-current')).toBeUndefined()
 			expect(nav.find('a[href="/settings"]').attributes('aria-current')).toBe('page')
 		},
 	)
@@ -414,6 +413,14 @@ describe('DashboardShell Settings expands to the Media subpages', () => {
 		expect(nav.find('a[href="/settings"]').attributes('aria-current')).toBeUndefined()
 	})
 
+	it('marks Cache current and Settings not current on the cache page', async () => {
+		const wrapper = await mountShell('/settings/media/cache', { role: 'admin' })
+
+		const nav = wrapper.find('nav[aria-label="Main"]')
+		expect(nav.find('a[href="/settings/media/cache"]').attributes('aria-current')).toBe('page')
+		expect(nav.find('a[href="/settings"]').attributes('aria-current')).toBeUndefined()
+	})
+
 	it('shows no Media subpages without an owner or admin role', async () => {
 		const wrapper = await mountShell('/settings', { role: 'user' })
 

web/src/components/variants/CacheByVariantCard.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import type { CacheVariantStat } from '@/composables/useVariantCache'
+import { barPercent, filesAndSize } from '@/lib/variants/cacheFormat'
+
+const props = defineProps<{ items: CacheVariantStat[] }>()
+
+const largest = computed(() => Math.max(0, ...props.items.map((item) => item.bytes)))
+</script>
+
+<template>
+	<UCard
+		data-testid="cache-by-variant"
+		: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: 'my-2 flex flex-col gap-4 px-4 py-2 sm:my-2 sm:gap-3 sm:px-4 sm:py-2',
+		}"
+	>
+		<template #header>
+			<h2 class="font-semibold text-highlighted">{{ t('By variant') }}</h2>
+		</template>
+		<div
+			v-for="item in items"
+			:key="item.name"
+			data-testid="cache-variant-row"
+			class="flex flex-col gap-1.5"
+		>
+			<div class="flex items-baseline gap-2">
+				<span class="font-mono font-medium text-highlighted">{{ item.name }}</span>
+				<UBadge
+					v-if="!item.enabled"
+					color="neutral"
+					variant="outline"
+					icon="i-lucide-circle-off"
+					class="border border-accented bg-transparent text-toned ring-0"
+					:ui="{ base: 'h-4.5 gap-1 px-1.5 py-0 text-xs', leadingIcon: 'size-3' }"
+				>
+					{{ t('Disabled') }}
+				</UBadge>
+				<span class="flex-1" />
+				<span class="text-xs text-toned">{{ filesAndSize(item.files, item.bytes) }}</span>
+			</div>
+			<UProgress
+				:model-value="barPercent(item.bytes, largest)"
+				:max="100"
+				:aria-label="item.name"
+				:ui="{
+					base: 'h-2 rounded-none bg-accented',
+					indicator: item.enabled
+						? 'rounded-none bg-primary'
+						: 'rounded-none bg-(--ui-border-accented)',
+				}"
+			/>
+		</div>
+	</UCard>
+</template>

web/src/components/variants/CachePurgeBanner.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { formatNumber, t } from '@/i18n'
+
+defineProps<{ files: number }>()
+</script>
+
+<template>
+	<UAlert
+		data-testid="cache-purge-banner"
+		role="status"
+		aria-live="polite"
+		color="info"
+		variant="soft"
+		icon="i-lucide-loader-circle"
+		:close="false"
+		:title="files === 1 ? t('Purging 1 file') : t('Purging {0} files', [formatNumber(files)])"
+		:ui="{
+			root: 'items-center rounded-none px-3.5 py-3',
+			icon: 'size-4 animate-spin',
+			title: 'font-semibold',
+		}"
+	>
+		<template #description>
+			<UProgress
+				:model-value="null"
+				:max="100"
+				:ui="{
+					base: 'h-1.5 rounded-none bg-accented',
+					indicator: 'rounded-none bg-info',
+				}"
+			/>
+		</template>
+	</UAlert>
+</template>

web/src/components/variants/CacheSkeleton.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import CacheStatTile from '@/components/variants/CacheStatTile.vue'
+
+defineProps<{ desktop: boolean }>()
+
+const VARIANT_ROWS = 5
+const IMAGE_ROWS = 6
+const BAR = 'rounded-none bg-accented'
+const CARD_UI = {
+	root: 'min-w-0 rounded-none border border-default bg-default ring-0',
+	body: 'flex flex-col gap-5 p-4 sm:p-4',
+}
+</script>
+
+<template>
+	<section :aria-label="t('Loading cache')" aria-busy="true" class="flex flex-col gap-3 sm:gap-4">
+		<div class="grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-4">
+			<CacheStatTile icon="i-lucide-files" :label="t('Generated files')" loading />
+			<CacheStatTile icon="i-lucide-hard-drive" :label="t('Disk used')" loading />
+			<CacheStatTile icon="i-lucide-layers" :label="t('Variants defined')" loading />
+			<CacheStatTile icon="i-lucide-ban" :label="t('Rejected requests')" loading />
+		</div>
+		<div class="grid grid-cols-1 gap-4 sm:grid-cols-[460px_minmax(0,1fr)]">
+			<UCard :ui="CARD_UI">
+				<div v-for="row in VARIANT_ROWS" :key="row" class="flex flex-col gap-2">
+					<USkeleton class="h-3.25 w-[50%]" :class="BAR" />
+					<USkeleton class="h-2 w-full" :class="BAR" />
+				</div>
+			</UCard>
+			<UCard v-if="desktop" :ui="CARD_UI">
+				<USkeleton
+					v-for="row in IMAGE_ROWS"
+					:key="row"
+					class="h-3.25 w-[90%]"
+					:class="BAR"
+				/>
+			</UCard>
+		</div>
+	</section>
+</template>

web/src/components/variants/CacheStatTile.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+	icon: string
+	label: string
+	value?: string
+	sub?: string
+	loading?: boolean
+}>()
+</script>
+
+<template>
+	<UCard
+		data-testid="cache-tile"
+		:ui="{
+			root: 'min-w-0 rounded-none border border-default bg-default ring-0',
+			body: 'flex min-w-0 flex-col gap-1 p-3 sm:p-4',
+		}"
+	>
+		<div class="flex items-center gap-1.5 text-sm text-muted">
+			<UIcon :name="icon" class="size-3.5 shrink-0" />
+			<span>{{ label }}</span>
+		</div>
+		<USkeleton v-if="loading" class="h-7 w-[60%] rounded-none bg-accented" />
+		<span v-else class="text-stat-sm/9 font-semibold text-highlighted sm:text-2xl/9">
+			{{ value }}
+		</span>
+		<USkeleton v-if="loading" class="h-2.75 w-[40%] rounded-none bg-accented" />
+		<span v-else class="text-xs text-muted">{{ sub }}</span>
+	</UCard>
+</template>

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>

web/src/components/variants/TypeToConfirmDialog.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+
+const props = defineProps<{
+	title: string
+	description: string
+	fieldLabel: string
+	word: string
+	confirmLabel: string
+	cancelLabel: string
+}>()
+
+const emit = defineEmits<{ close: [confirmed: boolean] }>()
+
+const open = defineModel<boolean>('open', { default: true })
+const typed = ref('')
+const field = ref<{ inputRef: HTMLInputElement | null } | null>(null)
+let settled = false
+
+const matches = computed(() => typed.value === props.word)
+
+onMounted(async () => {
+	await nextTick()
+	await new Promise((resolve) => setTimeout(resolve))
+	field.value?.inputRef?.focus()
+})
+
+function settle(confirmed: boolean) {
+	if (settled) {
+		return
+	}
+	settled = true
+	open.value = false
+	emit('close', confirmed)
+}
+
+watch(open, (value) => {
+	if (!value) {
+		settle(false)
+	}
+})
+
+function onConfirm() {
+	if (matches.value) {
+		settle(true)
+	}
+}
+</script>
+
+<template>
+	<UModal
+		:open="open"
+		:title="title"
+		:description="description"
+		:close="false"
+		:content="{ role: 'alertdialog' }"
+		:ui="{
+			content:
+				'divide-y-0 shadow-(--shadow-modal) ring-0 sm:top-35 sm:max-w-115 sm:translate-y-0 max-sm:!inset-x-4 max-sm:!top-auto max-sm:!bottom-4 max-sm:!left-4 max-sm:!w-auto max-sm:!max-w-none max-sm:!translate-x-0 max-sm:!translate-y-0',
+			header: 'min-h-0 px-6 pt-5 pb-0 sm:px-6',
+			title: 'text-lg/6 font-semibold',
+			description: 'mt-1 text-sm text-muted text-pretty',
+			body: 'px-6 pt-5 pb-0 sm:px-6 sm:pt-5 sm:pb-0',
+			footer: 'px-6 py-5 sm:px-6',
+		}"
+		@update:open="open = $event"
+	>
+		<template #body>
+			<UFormField :label="fieldLabel" name="confirm-word">
+				<UInput
+					ref="field"
+					v-model="typed"
+					autocomplete="off"
+					autocapitalize="off"
+					spellcheck="false"
+					class="w-full"
+					:ui="{ base: 'font-mono' }"
+					@keydown.enter.prevent="onConfirm"
+				/>
+			</UFormField>
+		</template>
+		<template #footer>
+			<div class="flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+				<UButton
+					color="neutral"
+					variant="outline"
+					block
+					class="h-11 justify-center text-sm text-highlighted sm:h-8 sm:w-auto sm:px-3"
+					@click="settle(false)"
+				>
+					{{ cancelLabel }}
+				</UButton>
+				<UButton
+					color="error"
+					block
+					:disabled="!matches"
+					class="h-11 justify-center text-sm sm:h-8 sm:w-auto sm:px-3"
+					@click="onConfirm"
+				>
+					{{ confirmLabel }}
+				</UButton>
+			</div>
+		</template>
+	</UModal>
+</template>

web/src/components/variants/VariantsTabs.vue

@@ -1,9 +1,26 @@
 <script setup lang="ts">
 import { t } from '@/i18n'
 
+withDefaults(defineProps<{ active?: 'variants' | 'cache' }>(), { active: 'variants' })
+
 const TAB = 'h-9 gap-1.5 rounded-none border-b-2 px-0 py-0 text-sm hover:bg-transparent max-sm:h-11'
 const ACTIVE = 'border-primary font-medium text-highlighted'
-const INACTIVE = 'border-transparent font-normal text-toned aria-disabled:opacity-100'
+const INACTIVE = 'border-transparent font-normal text-toned'
+
+const tabs = [
+	{
+		key: 'variants' as const,
+		to: '/settings/media/variants',
+		icon: 'i-lucide-layers',
+		label: () => t('Variants'),
+	},
+	{
+		key: 'cache' as const,
+		to: '/settings/media/cache',
+		icon: 'i-lucide-database',
+		label: () => t('Cache'),
+	},
+]
 </script>
 
 <template>
@@ -13,27 +30,20 @@ const INACTIVE = 'border-transparent font-normal text-toned aria-disabled:opacit
 		class="flex gap-5 border-b border-default"
 	>
 		<UButton
+			v-for="tab in tabs"
+			:key="tab.key"
 			role="tab"
-			aria-selected="true"
-			icon="i-lucide-layers"
+			:to="tab.to"
+			:active="false"
+			:aria-selected="active === tab.key ? 'true' : 'false'"
+			:aria-current="active === tab.key ? 'page' : undefined"
+			:icon="tab.icon"
 			color="neutral"
 			variant="ghost"
-			:class="[TAB, ACTIVE, '-mb-px']"
+			:class="[TAB, active === tab.key ? ACTIVE : INACTIVE, '-mb-px']"
 			:ui="{ leadingIcon: 'size-3.5' }"
 		>
-			{{ t('Variants') }}
-		</UButton>
-		<UButton
-			role="tab"
-			aria-selected="false"
-			aria-disabled="true"
-			icon="i-lucide-database"
-			color="neutral"
-			variant="ghost"
-			:class="[TAB, INACTIVE, '-mb-px']"
-			:ui="{ leadingIcon: 'size-3.5' }"
-		>
-			{{ t('Cache') }}
+			{{ tab.label() }}
 		</UButton>
 	</div>
 </template>