feat: media page T1

web/src/components/MediaTable.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import MediaBadge from '@/components/MediaBadge.vue'
+import MediaCheckbox from '@/components/MediaCheckbox.vue'
 import MediaThumb from '@/components/MediaThumb.vue'
 import type { MediaItem } from '@/composables/useMedia'
+import type { SelectAllState } from '@/composables/useMediaSelection'
 import {
 	formatDimensions,
 	formatMediaDate,
@@ -15,12 +17,22 @@ const ROW_GRID =
 
 defineProps<{
 	items: MediaItem[]
+	selected: number[]
+	allState: SelectAllState
 }>()
 
 const emit = defineEmits<{
 	open: [id: number, opener: HTMLElement]
+	toggle: [id: number]
+	'toggle-all': []
 }>()
 
+const ALL_STATES = {
+	none: 'unchecked',
+	partial: 'partial',
+	all: 'checked',
+} as const
+
 function open(event: Event, id: number) {
 	emit('open', id, event.currentTarget as HTMLElement)
 }
@@ -29,7 +41,14 @@ function open(event: Event, id: number) {
 <template>
 	<div class="border border-default bg-default">
 		<div :class="ROW_GRID" class="h-9 bg-elevated font-medium text-muted">
-			<span></span>
+			<span class="flex justify-center">
+				<MediaCheckbox
+					size="sm"
+					label="Select all"
+					:state="ALL_STATES[allState]"
+					@toggle="emit('toggle-all')"
+				/>
+			</span>
 			<span>Filename</span>
 			<span>Dimensions</span>
 			<span>Size</span>
@@ -46,17 +65,31 @@ function open(event: Event, id: number) {
 			: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"
+			:data-selected="selected.includes(item.id) || undefined"
+			class="relative h-14 border-t border-default"
+			:class="[
+				ROW_GRID,
+				selected.includes(item.id)
+					? 'bg-secondary-200 text-primary-900 dark:bg-secondary-300'
+					: 'bg-default text-muted hover:bg-elevated',
+			]"
 		>
-			<span></span>
+			<span class="relative z-10 flex justify-center">
+				<MediaCheckbox
+					size="sm"
+					:label="`Select ${item.filename}`"
+					:state="selected.includes(item.id) ? 'checked' : 'unchecked'"
+					@toggle="emit('toggle', item.id)"
+				/>
+			</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"
+					class="truncate font-medium after:absolute after:inset-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary"
+					:class="selected.includes(item.id) ? 'text-primary-900' : 'text-highlighted'"
 					@click="open($event, item.id)"
 				>
 					{{ item.filename }}