feat: image variants per image

web/src/lib/mediaQuery.ts

@@ -1,13 +1,15 @@
 import type { LocationQuery } from 'vue-router'
 
 export type MediaFilter = 'all' | 'unused' | 'duplicates'
-export type MediaSort = 'newest' | 'oldest' | 'name' | 'largest'
+export type MediaSort = 'newest' | 'oldest' | 'name' | 'largest' | 'total_size'
+export type MediaVariantsFilter = 'all' | 'with' | 'without'
 export type MediaView = 'grid' | 'list'
 
 export interface MediaControls {
 	q: string
 	filter: MediaFilter
 	sort: MediaSort
+	variants: MediaVariantsFilter
 	view: MediaView
 }
 
@@ -17,11 +19,13 @@ export const DEFAULT_CONTROLS: MediaControls = {
 	q: '',
 	filter: 'all',
 	sort: 'newest',
+	variants: 'all',
 	view: 'grid',
 }
 
 const FILTERS: MediaFilter[] = ['all', 'unused', 'duplicates']
-const SORTS: MediaSort[] = ['newest', 'oldest', 'name', 'largest']
+const SORTS: MediaSort[] = ['newest', 'oldest', 'name', 'largest', 'total_size']
+const VARIANTS_FILTERS: MediaVariantsFilter[] = ['all', 'with', 'without']
 const VIEWS: MediaView[] = ['grid', 'list']
 
 function firstValue(value: LocationQuery[string] | undefined) {
@@ -37,6 +41,7 @@ export function parseMediaControls(query: LocationQuery): MediaControls {
 		q: firstValue(query.q).trim(),
 		filter: pick(FILTERS, firstValue(query.filter), DEFAULT_CONTROLS.filter),
 		sort: pick(SORTS, firstValue(query.sort), DEFAULT_CONTROLS.sort),
+		variants: pick(VARIANTS_FILTERS, firstValue(query.variants), DEFAULT_CONTROLS.variants),
 		view: pick(VIEWS, firstValue(query.view), DEFAULT_CONTROLS.view),
 	}
 }
@@ -52,6 +57,9 @@ export function toRouteQuery(controls: MediaControls) {
 	if (controls.sort !== DEFAULT_CONTROLS.sort) {
 		query.sort = controls.sort
 	}
+	if (controls.variants !== DEFAULT_CONTROLS.variants) {
+		query.variants = controls.variants
+	}
 	if (controls.view !== DEFAULT_CONTROLS.view) {
 		query.view = controls.view
 	}
@@ -63,6 +71,7 @@ export function toRequestQuery(controls: MediaControls) {
 		...(controls.q ? [`q=${encodeURIComponent(controls.q)}`] : []),
 		`filter=${controls.filter}`,
 		`sort=${controls.sort}`,
+		...(controls.variants === 'all' ? [] : [`variants=${controls.variants}`]),
 		`limit=${MEDIA_PAGE_LIMIT}`,
 	]
 	return parts.join('&')