feat(SPA): media page T0

web/src/components/MediaCardList.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import MediaCardBadges from '@/components/MediaCardBadges.vue'
+import MediaThumb from '@/components/MediaThumb.vue'
+import type { MediaItem } from '@/composables/useMedia'
+import { formatDimensions, formatMediaDate, formatSize, formatType } from '@/lib/mediaFormat'
+
+defineProps<{
+	items: MediaItem[]
+}>()
+
+const emit = defineEmits<{
+	open: [id: number, opener: HTMLElement]
+}>()
+</script>
+
+<template>
+	<ul class="-mx-4 border-y border-default bg-default">
+		<li
+			v-for="item in items"
+			:key="item.id"
+			data-testid="media-card-row"
+			class="border-b border-default last:border-b-0"
+		>
+			<button
+				type="button"
+				data-media-card
+				:data-media-id="item.id"
+				class="flex min-h-20 w-full items-center py-2 pr-3 pl-11 text-start text-muted focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary"
+				@click="emit('open', item.id, $event.currentTarget as HTMLElement)"
+			>
+				<MediaThumb :item="item" size="md" class="size-14 border border-default" />
+				<span class="flex min-w-0 flex-1 flex-col gap-0.75 pl-3">
+					<span class="truncate text-[0.9375rem] font-medium text-highlighted">{{
+						item.filename
+					}}</span>
+					<span class="text-xs/5"
+						>{{ formatSize(item.size) }} ·
+						{{ formatDimensions(item.width, item.height) }} ·
+						{{ formatType(item.content_type) }}</span
+					>
+					<span class="flex flex-wrap items-center gap-1 text-xs/5">
+						<MediaCardBadges :item="item" />
+						<span>{{ item.uploaded_by }} · {{ formatMediaDate(item.created_at) }}</span>
+					</span>
+				</span>
+				<UIcon name="i-lucide-chevron-right" class="ml-2 size-4 shrink-0" />
+			</button>
+		</li>
+	</ul>
+</template>