feat: sites and authors integration into existing screens (& formated all frontend files kinda accidentally)

web/src/components/variants/CacheByVariantCard.vue

@@ -20,7 +20,9 @@ const largest = computed(() => Math.max(0, ...props.items.map((item) => item.byt
 		}"
 	>
 		<template #header>
-			<h2 class="font-semibold text-highlighted">{{ t('By variant') }}</h2>
+			<h2 class="font-semibold text-highlighted">
+				{{ t('By variant') }}
+			</h2>
 		</template>
 		<div
 			v-for="item in items"
@@ -36,7 +38,10 @@ const largest = computed(() => Math.max(0, ...props.items.map((item) => item.byt
 					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' }"
+					:ui="{
+						base: 'h-4.5 gap-1 px-1.5 py-0 text-xs',
+						leadingIcon: 'size-3',
+					}"
 				>
 					{{ t('Disabled') }}
 				</UBadge>

web/src/components/variants/CacheSkeleton.vue

@@ -26,7 +26,9 @@ const CARD_UI = {
 		<div class="grid grid-cols-1 gap-4 sm:grid-cols-[460px_minmax(0,1fr)]">
 			<UCard :ui="CARD_UI">
 				<template #header>
-					<h2 class="font-semibold text-highlighted">{{ t('By variant') }}</h2>
+					<h2 class="font-semibold text-highlighted">
+						{{ t('By variant') }}
+					</h2>
 				</template>
 				<div v-for="row in VARIANT_ROWS" :key="row" class="flex flex-col gap-2">
 					<USkeleton class="h-3.25 w-[50%]" :class="BAR" />

web/src/components/variants/RequestReferenceCard.vue

@@ -25,7 +25,12 @@ const rows = computed(() => [
 		result: t('Unsupported parameter'),
 		mono: false,
 	},
-	{ request: t('Missing source image'), status: 404, result: t('Not found'), mono: false },
+	{
+		request: t('Missing source image'),
+		status: 404,
+		result: t('Not found'),
+		mono: false,
+	},
 ])
 
 const columns = [
@@ -47,7 +52,9 @@ function isSuccess(status: number) {
 			body: 'flex flex-col gap-3 p-4 sm:p-4',
 		}"
 	>
-		<h2 class="font-semibold text-highlighted">{{ t('How requests are handled') }}</h2>
+		<h2 class="font-semibold text-highlighted">
+			{{ t('How requests are handled') }}
+		</h2>
 		<div class="grid grid-cols-1 gap-4 sm:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)]">
 			<div class="border border-default">
 				<UTable
@@ -85,7 +92,10 @@ function isSuccess(status: number) {
 									? 'bg-(--rc-success-soft) text-success'
 									: 'bg-(--rc-error-soft) text-error'
 							"
-							:ui="{ base: 'h-5 gap-1 px-1.5 py-0 text-xs', leadingIcon: 'size-3' }"
+							:ui="{
+								base: 'h-5 gap-1 px-1.5 py-0 text-xs',
+								leadingIcon: 'size-3',
+							}"
 							>{{ row.original.status }}</UBadge
 						>
 					</template>

web/src/components/variants/VariantCardList.vue

@@ -64,6 +64,8 @@ function nameTone(item: ImageVariant) {
 				/>
 			</div>
 		</UCard>
-		<p data-testid="variants-summary" class="py-1 text-muted">{{ summary }}</p>
+		<p data-testid="variants-summary" class="py-1 text-muted">
+			{{ summary }}
+		</p>
 	</div>
 </template>

web/src/components/variants/VariantFormFields.vue

@@ -186,7 +186,10 @@ function setFormat(value: unknown) {
 							:highlight="Boolean(errors.width)"
 							autocomplete="off"
 							class="w-full"
-							:ui="{ base: `${FIELD_BASE} pe-10`, trailing: 'pe-3' }"
+							:ui="{
+								base: `${FIELD_BASE} pe-10`,
+								trailing: 'pe-3',
+							}"
 							@blur="emit('blur', 'width')"
 						>
 							<template #trailing>
@@ -218,7 +221,10 @@ function setFormat(value: unknown) {
 							:highlight="Boolean(errors.height || errors.dimension)"
 							autocomplete="off"
 							class="w-full"
-							:ui="{ base: `${FIELD_BASE} pe-10`, trailing: 'pe-3' }"
+							:ui="{
+								base: `${FIELD_BASE} pe-10`,
+								trailing: 'pe-3',
+							}"
 							@blur="emit('blur', 'height')"
 						>
 							<template #trailing>

web/src/components/variants/VariantFormSlideover.vue

@@ -196,7 +196,11 @@ function handleFailure(error: unknown): FieldName | null {
 async function persist() {
 	if (props.mode === 'edit' && props.variant) {
 		const saved = await store.save(props.variant.name, toDefinition(form.values))
-		emit('saved', { mode: 'edit', name: saved.name, purgedFiles: saved.purged_files ?? 0 })
+		emit('saved', {
+			mode: 'edit',
+			name: saved.name,
+			purgedFiles: saved.purged_files ?? 0,
+		})
 		return
 	}
 	const created = await store.create(toNewVariant(form.values))

web/src/components/variants/VariantImageRow.vue

@@ -43,7 +43,10 @@ const ACTIONS_BY_STATUS: Record<VariantRow['status'], ActionKey[]> = {
 const item = computed(() => props.row.item)
 const generated = computed(() => props.row.status === 'generated')
 const actions = computed(() =>
-	ACTIONS_BY_STATUS[props.row.status].map((key) => ({ key, ...ACTIONS[key] })),
+	ACTIONS_BY_STATUS[props.row.status].map((key) => ({
+		key,
+		...ACTIONS[key],
+	})),
 )
 const meta = computed(() => {
 	const base = `${item.value.output_width}×${item.value.output_height} · ${formatLabel(item.value.output_format as VariantFormat)}`

web/src/components/variants/VariantOriginalBlock.vue

@@ -19,7 +19,8 @@ defineProps<{ item: MediaItem }>()
 			<span class="truncate font-semibold text-highlighted">{{ item.filename }}</span>
 			<span class="text-xs/5 text-toned">
 				{{ formatType(item.content_type) }} ·
-				{{ formatDimensions(item.width, item.height) }} · {{ formatSize(item.size) }}
+				{{ formatDimensions(item.width, item.height) }} ·
+				{{ formatSize(item.size) }}
 			</span>
 		</div>
 	</div>

web/src/components/variants/VariantPickerField.vue

@@ -21,7 +21,9 @@ const props = defineProps<{
 	ready: boolean
 }>()
 
-const variant = defineModel<string>('variant', { default: ORIGINAL_OPTION_VALUE })
+const variant = defineModel<string>('variant', {
+	default: ORIGINAL_OPTION_VALUE,
+})
 
 const options = computed(() => buildOptions(props.image, props.variants))
 const vector = computed(() => isVector(props.image))

web/src/components/variants/VariantPreview.vue

@@ -77,7 +77,9 @@ async function onCopy() {
 <template>
 	<div class="flex min-w-0 flex-col gap-3">
 		<div class="flex items-baseline gap-2">
-			<h3 class="flex-1 font-semibold text-highlighted">{{ t('Preview') }}</h3>
+			<h3 class="flex-1 font-semibold text-highlighted">
+				{{ t('Preview') }}
+			</h3>
 			<span class="text-xs/5 text-muted">{{
 				t('Sample: {0}', [SAMPLE_SOURCE.filename])
 			}}</span>

web/src/components/variants/VariantSelect.vue

@@ -23,7 +23,10 @@ function toItemValue(value: string) {
 }
 
 const items = computed(() =>
-	props.options.map((option) => ({ ...option, value: toItemValue(option.value) })),
+	props.options.map((option) => ({
+		...option,
+		value: toItemValue(option.value),
+	})),
 )
 const current = computed(() =>
 	props.modelValue === undefined ? undefined : toItemValue(props.modelValue),

web/src/components/variants/VariantsTabs.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { t } from '@/i18n'
 
-withDefaults(defineProps<{ active?: 'variants' | 'cache' }>(), { active: 'variants' })
+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'