feat(media): align visual checks and variant UI with merged design

web/src/components/MediaLinksCard.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+
+const links = computed(() => [
+	{
+		to: '/settings/media/variants',
+		icon: 'i-lucide-layers',
+		label: t('Manage image variants'),
+		hint: t('Named sizes requested with ?v='),
+	},
+	{
+		to: '/settings/media/cache',
+		icon: 'i-lucide-database',
+		label: t('Cache usage'),
+		hint: t('Generated images and disk space'),
+	},
+])
+</script>
+
+<template>
+	<section
+		aria-labelledby="media-links-h"
+		data-testid="media-links-card"
+		class="flex flex-col gap-3 border border-default bg-default p-4 lg:p-5"
+	>
+		<div class="flex flex-col gap-0.5">
+			<h2 id="media-links-h" class="text-[0.9375rem]/6 font-semibold text-highlighted">
+				{{ t('Media') }}
+			</h2>
+			<p class="text-pretty text-muted">
+				{{ t('Image sizes, cache and cleanup for your media library.') }}
+			</p>
+		</div>
+		<div class="flex flex-col">
+			<RouterLink
+				v-for="link in links"
+				:key="link.to"
+				:to="link.to"
+				class="flex min-h-11 items-center gap-3 border-t border-default py-2 text-highlighted focus-visible:outline-2 focus-visible:outline-primary"
+			>
+				<UIcon :name="link.icon" class="size-4 shrink-0" />
+				<span class="flex min-w-0 flex-1 flex-col">
+					<span class="font-medium">{{ link.label }}</span>
+					<span class="text-muted">{{ link.hint }}</span>
+				</span>
+				<UIcon name="i-lucide-chevron-right" class="size-3.5 shrink-0" />
+			</RouterLink>
+		</div>
+	</section>
+</template>