feat: media page T1

web/src/components/MediaBulkBar.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useElementBounding, useMediaQuery } from '@vueuse/core'
+
+const DESKTOP_QUERY = '(min-width: 48rem)'
+const CONTENT_SELECTOR = '#dashboard-content'
+
+defineProps<{
+	count: number
+	offline: boolean
+	obscured: boolean
+}>()
+
+const emit = defineEmits<{
+	delete: []
+	clear: []
+}>()
+
+const isDesktop = useMediaQuery(DESKTOP_QUERY)
+const content = useElementBounding(() => document.querySelector<HTMLElement>(CONTENT_SELECTOR))
+const centre = computed(() => `${content.left.value + content.width.value / 2}px`)
+</script>
+
+<template>
+	<div
+		role="region"
+		aria-label="Selection"
+		data-testid="media-bulk-bar"
+		class="fixed bottom-4 z-(--z-banner) flex items-center gap-2 bg-inverted py-2 pr-2 pl-4 text-inverted shadow-(--shadow-popover) max-md:inset-x-4 md:bottom-6 md:left-(--bulk-centre) md:w-100 md:-translate-x-1/2"
+		:class="{ invisible: obscured }"
+		:inert="obscured || undefined"
+		:style="isDesktop ? { '--bulk-centre': centre } : undefined"
+	>
+		<span class="flex-1 font-medium">{{ count }} selected</span>
+		<UButton
+			color="error"
+			icon="i-lucide-trash-2"
+			:disabled="offline"
+			data-testid="bulk-delete"
+			class="h-11 px-3 md:h-8"
+			@click="emit('delete')"
+		>
+			Delete
+		</UButton>
+		<UButton
+			color="neutral"
+			variant="outline"
+			data-testid="bulk-clear"
+			class="h-11 border border-(--ui-text-inverted) bg-transparent px-3 text-inverted ring-0 hover:bg-transparent md:h-8"
+			@click="emit('clear')"
+		>
+			Clear
+		</UButton>
+	</div>
+</template>