feat: image variants per image

web/src/components/MediaGrid.vue

@@ -6,7 +6,7 @@ import MediaCardBadges from '@/components/MediaCardBadges.vue'
 import MediaCheckbox from '@/components/MediaCheckbox.vue'
 import MediaThumb from '@/components/MediaThumb.vue'
 import type { MediaItem } from '@/composables/useMedia'
-import { accessibleName, formatDimensions, formatSize } from '@/lib/mediaFormat'
+import { accessibleName, formatDimensions, formatSize, totalMeta } from '@/lib/mediaFormat'
 
 const SELECTED_CARD =
 	'border-primary bg-secondary-200 text-primary-900 inset-ring-1 inset-ring-primary dark:bg-secondary-300'
@@ -16,6 +16,7 @@ const props = defineProps<{
 	items: MediaItem[]
 	columns: number
 	selected: number[]
+	totalSize?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -108,12 +109,15 @@ function onKeyup(event: KeyboardEvent) {
 						<span
 							class="truncate text-xs/5"
 							:class="selected.includes(item.id) ? 'text-primary-600' : 'text-muted'"
-							>{{ formatSize(item.size) }} ·
-							{{ formatDimensions(item.width, item.height) }}</span
+							>{{
+								totalSize
+									? totalMeta(item)
+									: `${formatSize(item.size)} · ${formatDimensions(item.width, item.height)}`
+							}}</span
 						>
 					</span>
 					<span class="flex flex-wrap gap-1">
-						<MediaCardBadges :item="item" />
+						<MediaCardBadges :item="item" variants />
 					</span>
 				</span>
 			</button>