feat: media page T1

web/src/components/MediaSelectAllRow.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { SelectAllState } from '@/composables/useMediaSelection'
+
+const props = defineProps<{
+	state: SelectAllState
+	count: number
+}>()
+
+const emit = defineEmits<{ toggle: [] }>()
+
+const modelValue = computed(() => {
+	if (props.state === 'partial') {
+		return 'indeterminate' as const
+	}
+	return props.state === 'all'
+})
+const imageCount = computed(() => `${props.count} ${props.count === 1 ? 'image' : 'images'}`)
+</script>
+
+<template>
+	<div class="flex items-center gap-2.5 text-muted">
+		<UCheckbox
+			:model-value="modelValue"
+			label="Select all"
+			color="primary"
+			class="-ml-2.75 md:ml-0"
+			:ui="{
+				root: 'items-center',
+				container: 'size-11 shrink-0 items-center justify-center md:size-4.5',
+				base: 'size-5.5 bg-default md:size-4.5',
+				wrapper: 'ms-2.5',
+				label: 'font-medium text-highlighted',
+			}"
+			@update:model-value="emit('toggle')"
+		/>
+		<span data-testid="image-count">{{ imageCount }}</span>
+	</div>
+</template>