RenewCMS/web/src/components/variants/MediaVariantsTab.vue

<script setup lang="ts">
import { t } from '@/i18n'

import { computed, nextTick, onMounted, ref } from 'vue'
import { useMediaQuery } from '@vueuse/core'
import { useLocalizedToast } from '@/i18n/presentation'
import VariantImageRow from '@/components/variants/VariantImageRow.vue'
import VariantOriginalBlock from '@/components/variants/VariantOriginalBlock.vue'
import VariantPreviewDialog from '@/components/variants/VariantPreviewDialog.vue'
import { useImageVariantRows } from '@/composables/useImageVariantRows'
import type { MediaItem } from '@/composables/useMedia'
import type { MediaVariantItem } from '@/composables/useMediaVariants'

const ROOMY_QUERY = '(min-width: 40rem)'
const SKELETON_ROWS = 5
const TOAST_DURATION_MS = 5000
const SETTINGS_VARIANTS_PATH = '/settings/media/variants'
const RETRY_BUTTON =
	'h-11 gap-1.5 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 md:h-7'

const props = defineProps<{ item: MediaItem }>()

const emit = defineEmits<{ gone: [] }>()

const toast = useLocalizedToast()
const roomy = useMediaQuery(ROOMY_QUERY)
const rows = useImageVariantRows(props.item.id, () => emit('gone'))

const previewOpen = ref(false)
const previewTarget = ref<MediaVariantItem | null>(null)
let previewOpener: HTMLElement | null = null

const total = computed(() => rows.items.value.length)
const showList = computed(
	() => rows.status.value === 'ready' && rows.unsupported.value === null && total.value > 0,
)
const showEmpty = computed(
	() => rows.status.value === 'ready' && rows.unsupported.value === null && total.value === 0,
)
const generateAllDisabled = computed(() => rows.allGenerated.value || rows.anyBusy.value)

onMounted(rows.load)

async function copyUrl(variant: MediaVariantItem) {
	try {
		await navigator.clipboard.writeText(`${window.location.origin}${variant.url}`)
	} catch {
		return
	}
	toast.add(() => ({
		id: `media-variant-url-copied-${props.item.id}-${variant.name}`,
		color: 'success' as const,
		icon: 'i-lucide-circle-check',
		get title() {
			return t('URL copied')
		},
		get description() {
			return t('Paste it wherever you need the image address.')
		},
		duration: TOAST_DURATION_MS,
	}))
}

function openPreview(variant: MediaVariantItem, opener: HTMLElement) {
	previewOpener = opener
	previewTarget.value = variant
	previewOpen.value = true
}

async function onPreviewOpenChange(open: boolean) {
	previewOpen.value = open
	if (open) {
		return
	}
	await nextTick()
	previewOpener?.focus()
}
</script>

<template>
	<div data-testid="variants-tab" class="flex flex-col gap-4">
		<section
			v-if="rows.status.value === 'loading' && rows.showSkeleton.value"
			:aria-label="t('Loading variants')"
			aria-busy="true"
			class="border border-default"
		>
			<div
				v-for="row in SKELETON_ROWS"
				:key="row"
				data-testid="variant-skeleton-row"
				class="flex flex-col gap-2 px-3 py-2.5"
				:class="row > 1 ? 'border-t border-muted' : ''"
			>
				<USkeleton class="h-3.25 w-[30%] rounded-none bg-accented" />
				<USkeleton class="h-2.75 w-[55%] rounded-none bg-accented" />
			</div>
		</section>

		<UAlert
			v-else-if="rows.status.value === 'error'"
			role="alert"
			color="error"
			variant="soft"
			orientation="vertical"
			:close="false"
			icon="i-lucide-circle-x"
			:title="t('Couldn\'t load variants')"
			:description="t('Check your connection and try again.')"
			:ui="{ actions: 'mt-2' }"
		>
			<template #actions>
				<UButton
					color="neutral"
					variant="outline"
					icon="i-lucide-rotate-cw"
					:class="RETRY_BUTTON"
					:ui="{ leadingIcon: 'size-3.5' }"
					@click="rows.load"
				>
					{{ t('Try again') }}
				</UButton>
			</template>
		</UAlert>

		<template v-else-if="rows.status.value === 'ready'">
			<VariantOriginalBlock :item="item" />

			<UAlert
				v-if="rows.unsupported.value !== null"
				color="info"
				variant="soft"
				:close="false"
				icon="i-lucide-info"
				:title="t('Variants aren\'t generated for this format.')"
				:description="t('SVG images are served as they are.')"
			/>

			<UEmpty
				v-else-if="showEmpty"
				variant="naked"
				icon="i-lucide-layers"
				:title="t('No variants defined')"
				:description="
					t('Define a variant in Settings to get resized copies of this image.')
				"
				:ui="{
					root: 'gap-3 border border-default bg-default px-6 py-7',
					header: 'gap-3',
					avatar: 'mb-0 size-11 rounded-none bg-elevated text-toned',
					title: 'text-[0.9375rem] font-semibold',
					description: 'max-w-95 text-muted text-pretty',
				}"
			>
				<template #actions>
					<RouterLink
						:to="SETTINGS_VARIANTS_PATH"
						class="inline-flex min-h-11 items-center gap-1 font-medium text-highlighted underline underline-offset-3 sm:min-h-5"
					>
						{{ t('Settings → Media → Variants') }}
						<UIcon name="i-lucide-arrow-up-right" class="size-3.5" />
					</RouterLink>
				</template>
			</UEmpty>

			<template v-else-if="showList">
				<div class="flex items-center gap-3">
					<div class="flex flex-1 flex-col">
						<span class="font-semibold text-highlighted">{{
							t('{0} of {1} generated', [rows.generatedCount.value, total])
						}}</span>
						<span
							v-if="rows.generatedCount.value === 0 && !rows.anyBusy.value"
							class="text-xs/5 text-muted"
							>{{ t('Nothing generated yet.') }}</span
						>
						<span v-if="rows.anyBusy.value" class="text-xs/5 text-info">{{
							t('Generating variants…')
						}}</span>
					</div>
					<UButton
						color="neutral"
						variant="outline"
						:icon="rows.anyBusy.value ? 'i-lucide-loader-circle' : 'i-lucide-zap'"
						:disabled="generateAllDisabled"
						class="h-11 border border-accented bg-default px-3 text-sm font-medium text-highlighted ring-0 sm:h-8"
						:ui="{
							leadingIcon: rows.anyBusy.value ? 'size-4 animate-spin' : 'size-4',
						}"
						@click="rows.generateAll"
					>
						{{ rows.anyBusy.value ? t('Generating…') : t('Generate all') }}
					</UButton>
				</div>
				<ul class="border border-default">
					<VariantImageRow
						v-for="(row, index) in rows.rows.value"
						:key="row.item.name"
						:row="row"
						:original-size="item.size"
						:roomy="roomy"
						:first="index === 0"
						@copy="copyUrl(row.item)"
						@preview="openPreview(row.item, $event)"
						@purge="rows.purge(row.item.name)"
						@generate="rows.generateOne(row.item.name)"
					/>
				</ul>
			</template>
		</template>

		<p role="status" aria-live="polite" data-testid="variants-announcer" class="sr-only">
			{{ rows.announcement.value }}
		</p>

		<VariantPreviewDialog
			v-if="previewTarget"
			:open="previewOpen"
			:variant="previewTarget"
			:original="item"
			@update:open="onPreviewOpenChange"
		/>
	</div>
</template>