feat: image variants per image

web/src/views/MediaView.vue

@@ -135,9 +135,15 @@ const nothingToShow = computed(
 		!emptyLibrary.value &&
 		(isDuplicates.value ? groups.value.length === 0 : media.items.value.length === 0),
 )
-const emptyVariant = computed(() =>
-	isDuplicates.value && controls.value.q === '' ? 'no-duplicates' : 'no-results',
-)
+const emptyVariant = computed(() => {
+	if (isDuplicates.value && controls.value.q === '') {
+		return 'no-duplicates'
+	}
+	if (controls.value.variants === 'with' && controls.value.q === '' && !isDuplicates.value) {
+		return controls.value.filter === 'all' ? 'no-variants' : 'no-results'
+	}
+	return 'no-results'
+})
 const filterLabel = computed(
 	() =>
 		({ all: t('All'), unused: t('Unused'), duplicates: t('Duplicates') })[
@@ -203,7 +209,7 @@ function updateControls(patch: Partial<MediaControls>) {
 }
 
 function clearFilters() {
-	updateControls({ q: '', filter: 'all' })
+	updateControls({ q: '', filter: 'all', variants: 'all' })
 }
 
 function announce(source: () => string) {
@@ -919,6 +925,7 @@ async function mergeAction() {
 					@update:q="updateControls({ q: $event })"
 					@update:filter="updateControls({ filter: $event })"
 					@update:sort="updateControls({ sort: $event })"
+					@update:variants="updateControls({ variants: $event })"
 					@update:view="updateControls({ view: $event })"
 					@purge="openPurge"
 				/>
@@ -985,6 +992,7 @@ async function mergeAction() {
 							:items="media.items.value"
 							:columns="isDesktop ? DESKTOP_COLUMNS : MOBILE_COLUMNS"
 							:selected="gridSelected"
+							:total-size="controls.sort === 'total_size'"
 							@open="openPanel"
 							@toggle="toggleSelected"
 						/>
@@ -1042,6 +1050,7 @@ async function mergeAction() {
 			@rename="renameOpen = true"
 			@delete="deleteOpen = true"
 			@review-duplicates="reviewDuplicates"
+			@gone="activeItem && handleGone(activeItem)"
 		/>
 
 		<RenameMediaDialog