feat(SPA): media page T0

web/src/components/MediaTable.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import MediaBadge from '@/components/MediaBadge.vue'
+import MediaThumb from '@/components/MediaThumb.vue'
+import type { MediaItem } from '@/composables/useMedia'
+import {
+	formatDimensions,
+	formatMediaDate,
+	formatSize,
+	formatType,
+	pluralArticles,
+} from '@/lib/mediaFormat'
+
+const ROW_GRID =
+	'grid grid-cols-[36px_minmax(0,1.7fr)_110px_76px_64px_120px_130px_100px] items-center pr-3'
+
+defineProps<{
+	items: MediaItem[]
+}>()
+
+const emit = defineEmits<{
+	open: [id: number, opener: HTMLElement]
+}>()
+
+function open(event: Event, id: number) {
+	emit('open', id, event.currentTarget as HTMLElement)
+}
+</script>
+
+<template>
+	<div class="border border-default bg-default">
+		<div :class="ROW_GRID" class="h-9 bg-elevated font-medium text-muted">
+			<span></span>
+			<span>Filename</span>
+			<span>Dimensions</span>
+			<span>Size</span>
+			<span>Type</span>
+			<span>Used in</span>
+			<span>Uploaded by</span>
+			<span class="flex items-center gap-1 text-highlighted">
+				Uploaded
+				<UIcon name="i-lucide-arrow-down" class="size-3 shrink-0" />
+			</span>
+		</div>
+		<div
+			v-for="item in items"
+			:key="item.id"
+			data-testid="media-row"
+			:data-media-id="item.id"
+			:class="ROW_GRID"
+			class="relative h-14 border-t border-default bg-default text-muted hover:bg-elevated"
+		>
+			<span></span>
+			<span class="flex min-w-0 items-center gap-3 pr-3">
+				<MediaThumb :item="item" size="sm" class="size-10 border border-default" />
+				<button
+					type="button"
+					data-media-card
+					:data-media-id="item.id"
+					class="truncate font-medium text-highlighted after:absolute after:inset-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary"
+					@click="open($event, item.id)"
+				>
+					{{ item.filename }}
+				</button>
+				<MediaBadge v-if="item.duplicate" kind="duplicate" label="Duplicate" />
+			</span>
+			<span>{{ formatDimensions(item.width, item.height) }}</span>
+			<span>{{ formatSize(item.size) }}</span>
+			<span>{{ formatType(item.content_type) }}</span>
+			<span>
+				<button
+					v-if="item.used_in > 0"
+					type="button"
+					data-testid="media-used-in"
+					class="relative z-10 text-highlighted underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+					@click="open($event, item.id)"
+				>
+					{{ pluralArticles(item.used_in) }}
+				</button>
+				<MediaBadge v-else kind="unused" label="Unused" />
+			</span>
+			<span class="truncate pr-2">{{ item.uploaded_by }}</span>
+			<span>{{ formatMediaDate(item.created_at) }}</span>
+		</div>
+	</div>
+</template>