feat(SPA): screens for Sites and Authors

web/src/components/MediaPicker.vue

@@ -38,6 +38,8 @@ const props = defineProps<{
 	selected: MediaItem | null
 	variants?: ImageVariant[]
 	variantsReady?: boolean
+	plain?: boolean
+	hint?: string
 }>()
 
 const emit = defineEmits<{
@@ -64,7 +66,12 @@ const searching = computed(() => props.query !== '')
 const summary = computed(() =>
 	searching.value ? t('Newest first') : t('Newest first · {0} images', [props.total]),
 )
-const scrollHeight = computed(() => (props.selected ? 'max-h-32 md:max-h-49.5' : 'max-h-77'))
+const scrollHeight = computed(() => {
+	if (props.plain) {
+		return 'max-h-71 md:max-h-89'
+	}
+	return props.selected ? 'max-h-32 md:max-h-49.5' : 'max-h-77'
+})
 const showEmptyLibrary = computed(
 	() => props.status === 'ready' && props.items.length === 0 && !searching.value,
 )
@@ -72,7 +79,9 @@ const showNoResults = computed(
 	() => props.status === 'ready' && props.items.length === 0 && searching.value,
 )
 const showGrid = computed(() => props.status === 'ready' && props.items.length > 0)
-const showLoadMore = computed(() => showGrid.value && props.hasMore && !props.selected)
+const showLoadMore = computed(
+	() => showGrid.value && props.hasMore && (props.plain || !props.selected),
+)
 const noResultsTitle = computed(() => t('No images match \u0022{0}\u0022', [props.query]))
 
 function clearDebounce() {
@@ -239,9 +248,15 @@ onBeforeUnmount(clearDebounce)
 		</div>
 
 		<template v-else-if="showGrid">
-			<span data-testid="picker-summary" class="text-xs/5 text-muted">{{ summary }}</span>
+			<span v-if="!plain" data-testid="picker-summary" class="text-xs/5 text-muted">{{
+				summary
+			}}</span>
 			<div class="-m-1 min-h-0 overflow-y-auto p-1" :class="scrollHeight">
-				<div ref="grid" class="grid grid-cols-3 gap-x-2 gap-y-3 md:grid-cols-4 md:gap-x-3">
+				<div
+					ref="grid"
+					class="grid grid-cols-3 md:grid-cols-4"
+					:class="plain ? 'gap-2.5' : 'gap-x-2 gap-y-3 md:gap-x-3'"
+				>
 					<button
 						v-for="item in items"
 						:key="item.id"
@@ -311,8 +326,10 @@ onBeforeUnmount(clearDebounce)
 			</div>
 		</template>
 
+		<p v-if="hint" class="text-xs/5 text-muted">{{ hint }}</p>
+
 		<div
-			v-if="selected"
+			v-if="selected && !plain"
 			data-testid="picker-panel"
 			class="flex flex-col gap-3 border-t border-default pt-3"
 		>