feat: media duplicate purge, part 3 of 3: the SPA (Settings "Media cleanup" card, PurgeDuplicatesDialog, Media Duplicates toolbar button)

web/src/components/MediaToolbar.vue

@@ -40,16 +40,22 @@ const VIEW_OPTIONS: { value: MediaView; icon: string; label: string }[] = [
 	},
 ]
 
-const props = defineProps<{
-	controls: MediaControls
-	counts: MediaCounts | null
-}>()
+const props = withDefaults(
+	defineProps<{
+		controls: MediaControls
+		counts: MediaCounts | null
+		showPurge?: boolean
+		purgeDisabled?: boolean
+	}>(),
+	{ showPurge: false, purgeDisabled: false },
+)
 
 const emit = defineEmits<{
 	'update:q': [value: string]
 	'update:filter': [value: MediaFilter]
 	'update:sort': [value: MediaSort]
 	'update:view': [value: MediaView]
+	purge: []
 }>()
 
 const searchText = ref(props.controls.q)
@@ -191,7 +197,9 @@ const sortItems = computed(() =>
 			</template>
 		</UInput>
 
-		<div class="order-3 flex gap-2 md:order-none md:mb-1.5">
+		<div
+			class="order-3 flex flex-wrap gap-x-2 gap-y-3 md:order-none md:mb-1.5 md:flex-nowrap md:gap-2"
+		>
 			<UDropdownMenu :items="sortItems" :content="{ align: 'start' }">
 				<UButton
 					color="neutral"
@@ -205,6 +213,20 @@ const sortItems = computed(() =>
 				</UButton>
 			</UDropdownMenu>
 
+			<UButton
+				v-if="showPurge"
+				data-testid="purge-duplicates"
+				color="neutral"
+				variant="outline"
+				icon="i-lucide-merge"
+				:disabled="purgeDisabled"
+				class="order-last h-11 w-full justify-center gap-1.5 border border-accented bg-default px-3 text-sm text-highlighted ring-0 md:order-none md:h-8 md:w-auto"
+				:ui="{ leadingIcon: 'size-4' }"
+				@click="emit('purge')"
+			>
+				{{ t('Purge duplicates') }}
+			</UButton>
+
 			<div role="group" :aria-label="t('View')" class="flex shrink-0 border border-accented">
 				<UButton
 					v-for="option in VIEW_OPTIONS"