feat: 移植截图中心（浏览/分组/编辑/导出）

apps/app-frontend/src/components/ui/screenshots-page/card.vue

@@ -0,0 +1,289 @@
+<script lang="ts"></script>
+
+<script setup lang="ts">
+import { KeyboardSensor, PointerSensor, useDraggable } from '@dnd-kit/vue'
+import { CheckIcon, ClipboardCopyIcon, EditIcon, MoreHorizontalIcon } from '@modrinth/assets'
+import {
+	defineMessages,
+	IconButton,
+	useDebugLogger,
+	useFormatDateTime,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { useImageThumbnail } from '@/composables/use-image-thumbnail'
+import type { InstanceScreenshot } from '@/helpers/instance'
+
+const props = defineProps<{
+	screenshot: InstanceScreenshot
+	selectionKey: string
+	selected: boolean
+	selectionActive: boolean
+	activeDragged: boolean
+	canDrag: boolean
+	showInstanceName: boolean
+	highlighted: boolean
+	copied: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: 'activate', event: MouseEvent | KeyboardEvent): void
+	(e: 'copy' | 'edit' | 'toggle-selection'): void
+	(e: 'more', event: MouseEvent): void
+}>()
+
+const card = ref<HTMLElement>()
+const thumbnail = useImageThumbnail(
+	() => ({
+		instanceId: props.screenshot.instance_id,
+		filePath: `screenshots/${props.screenshot.file_name}`,
+		path: props.screenshot.path,
+	}),
+	512,
+	() => props.screenshot.modified_at,
+)
+const image = ref<HTMLImageElement>()
+const imageReady = ref(false)
+const { formatMessage } = useVIntl()
+const debugImage = useDebugLogger('Screenshots:Card')
+const formatTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+let loadStartedAt = performance.now()
+let loadGeneration = 0
+const messages = defineMessages({
+	select: { id: 'app.screenshots.select', defaultMessage: 'Select {name}' },
+	deselect: { id: 'app.screenshots.deselect', defaultMessage: 'Deselect {name}' },
+	copy: { id: 'app.screenshots.copy', defaultMessage: 'Copy image' },
+	copied: { id: 'app.screenshots.copied', defaultMessage: 'Copied' },
+	edit: { id: 'app.screenshots.edit', defaultMessage: 'Edit screenshot' },
+	moreActions: { id: 'app.screenshots.more-actions', defaultMessage: 'More actions' },
+})
+
+const sensors = [
+	PointerSensor.configure({
+		preventActivation: () => false,
+	}),
+	KeyboardSensor,
+]
+
+useDraggable({
+	id: computed(() => `screenshot:${props.selectionKey}`),
+	element: card,
+	disabled: computed(() => !props.canDrag),
+	sensors,
+	data: computed(() => ({
+		selectionKey: props.selectionKey,
+		instanceId: props.screenshot.instance_id,
+	})),
+})
+
+function activate(event: MouseEvent | KeyboardEvent) {
+	if (event instanceof KeyboardEvent) {
+		if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) {
+			return
+		}
+		event.preventDefault()
+	}
+	emit('activate', event)
+}
+
+async function markImageLoaded() {
+	const loadedImage = image.value
+	const loadedUrl = thumbnail.value
+	const generation = loadGeneration
+	if (!loadedImage) return
+
+	try {
+		await loadedImage.decode()
+	} catch {
+		if (!loadedImage.complete || loadedImage.naturalWidth === 0) return
+	}
+
+	await new Promise<void>((resolve) => {
+		window.requestAnimationFrame(() => window.requestAnimationFrame(() => resolve()))
+	})
+
+	if (
+		generation !== loadGeneration ||
+		image.value !== loadedImage ||
+		thumbnail.value !== loadedUrl
+	) {
+		return
+	}
+
+	const wasReady = imageReady.value
+	imageReady.value = true
+	if (!wasReady) {
+		debugImage('image loaded', {
+			id: props.screenshot.id,
+			fileName: props.screenshot.file_name,
+			url: props.screenshot.url,
+			loadDurationMs: performance.now() - loadStartedAt,
+			naturalWidth: image.value?.naturalWidth,
+			naturalHeight: image.value?.naturalHeight,
+		})
+	}
+}
+
+function markImageFailed(event: Event) {
+	debugImage('image failed', {
+		id: props.screenshot.id,
+		fileName: props.screenshot.file_name,
+		url: props.screenshot.url,
+		loadDurationMs: performance.now() - loadStartedAt,
+		event,
+	})
+}
+
+onMounted(() => {
+	debugImage('mounted', {
+		id: props.screenshot.id,
+		fileName: props.screenshot.file_name,
+		url: props.screenshot.url,
+		complete: image.value?.complete,
+	})
+	if (image.value?.complete && image.value.naturalWidth > 0) markImageLoaded()
+})
+
+onBeforeUnmount(() => {
+	loadGeneration += 1
+	debugImage('unmounted', {
+		id: props.screenshot.id,
+		fileName: props.screenshot.file_name,
+		url: props.screenshot.url,
+		loaded: imageReady.value,
+	})
+})
+
+watch(thumbnail, (url, previousUrl) => {
+	loadGeneration += 1
+	loadStartedAt = performance.now()
+	imageReady.value = false
+	debugImage('source changed', {
+		id: props.screenshot.id,
+		fileName: props.screenshot.file_name,
+		previousUrl,
+		url,
+	})
+})
+</script>
+<template>
+	<article
+		ref="card"
+		role="button"
+		tabindex="0"
+		class="group relative isolate aspect-video min-w-0 cursor-pointer overflow-hidden rounded-xl border border-solid border-surface-5 bg-surface-2 p-0 text-left shadow-sm transition-[filter] hover:brightness-110 focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+		:class="{
+			'!border-brand brightness-110': selected,
+			'!border-brand ring-2 ring-brand animate-pulse': highlighted,
+			'opacity-50': activeDragged,
+			'cursor-grab active:cursor-grabbing': canDrag,
+		}"
+		data-screenshot-card
+		:data-screenshot-id="screenshot.id"
+		:data-selection-key="selectionKey"
+		:aria-label="
+			selectionActive
+				? formatMessage(selected ? messages.deselect : messages.select, {
+						name: screenshot.file_name,
+					})
+				: screenshot.file_name
+		"
+		:aria-pressed="selectionActive ? selected : undefined"
+		@click="activate"
+		@contextmenu.prevent.stop="emit('more', $event)"
+		@keydown="activate"
+	>
+		<button
+			type="button"
+			class="selection-button group/selection absolute right-0.5 top-0 z-[3] flex size-[50px] cursor-pointer items-start justify-center border-0 bg-transparent p-0 pt-4"
+			:aria-label="
+				formatMessage(selected ? messages.deselect : messages.select, {
+					name: screenshot.file_name,
+				})
+			"
+			:aria-pressed="selected"
+			@click.stop="emit('toggle-selection')"
+		>
+			<span
+				class="relative flex size-6 items-center justify-center rounded-full opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100 group-focus-within:opacity-100 group-hover/selection:brightness-125"
+				:class="
+					selected ? 'border-0 !opacity-100' : 'border-2 border-solid border-primary bg-transparent'
+				"
+			>
+				<span v-if="selected" class="absolute inset-0 rounded-full bg-brand" />
+				<CheckIcon v-if="selected" class="relative size-4 invert [stroke-width:3]" />
+			</span>
+		</button>
+		<img
+			v-if="thumbnail"
+			ref="image"
+			:src="thumbnail"
+			:alt="screenshot.file_name"
+			loading="eager"
+			decoding="async"
+			draggable="false"
+			class="screenshot-card-fade absolute inset-0 z-[1] h-full w-full object-cover"
+			:class="imageReady ? 'opacity-100' : 'opacity-0'"
+			@load="markImageLoaded"
+			@error="markImageFailed"
+		/>
+		<div
+			aria-hidden="true"
+			class="pointer-events-none absolute inset-0 bg-surface-4"
+			:class="{ 'animate-pulse': !imageReady }"
+		/>
+		<div
+			class="absolute inset-x-0 bottom-0 z-[2] flex items-end justify-between gap-2 bg-gradient-to-t from-surface-1 to-transparent p-3 pt-[120px] text-[var(--color-text-primary)] opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100"
+		>
+			<div class="min-w-0">
+				<div v-tooltip="screenshot.file_name" class="truncate text-sm font-semibold">
+					{{ screenshot.file_name }}
+				</div>
+				<div class="truncate text-xs text-[var(--color-text-tertiary)]">
+					{{ showInstanceName ? screenshot.instance_name : formatTime(screenshot.created_at) }}
+				</div>
+			</div>
+			<div
+				v-if="!selectionActive"
+				class="flex shrink-0 translate-y-1 gap-1 opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100"
+				@click.stop
+			>
+				<IconButton
+					v-tooltip="formatMessage(messages.edit)"
+					:label="formatMessage(messages.edit)"
+					type="quiet"
+					class="bg-surface-2 text-[var(--color-text-primary)] hover:bg-surface-3"
+					@click="emit('edit')"
+				>
+					<EditIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(copied ? messages.copied : messages.copy)"
+					:label="formatMessage(copied ? messages.copied : messages.copy)"
+					type="quiet"
+					class="bg-surface-2 text-[var(--color-text-primary)] hover:bg-surface-3"
+					@click="emit('copy')"
+				>
+					<CheckIcon v-if="copied" class="text-green" />
+					<ClipboardCopyIcon v-else />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(messages.moreActions)"
+					:label="formatMessage(messages.moreActions)"
+					type="quiet"
+					class="bg-surface-2 text-[var(--color-text-primary)] hover:bg-surface-3"
+					@click="emit('more', $event)"
+				>
+					<MoreHorizontalIcon />
+				</IconButton>
+			</div>
+		</div>
+	</article>
+</template>
+
+<style scoped>
+.screenshot-card-fade {
+	transition: opacity 350ms ease-in-out;
+}
+</style>

apps/app-frontend/src/components/ui/screenshots-page/drag-gather.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import ScreenshotDragPreview from './drag-preview.vue'
+import { gatherDuration, type ScreenshotDragGatherItem } from './use-screenshot-drag-gather'
+
+const props = defineProps<{
+	items: ScreenshotDragGatherItem[]
+	target: {
+		x: number
+		y: number
+	}
+}>()
+
+const emit = defineEmits<{
+	complete: []
+}>()
+
+const gathered = ref(false)
+const finishing = ref(false)
+let animationFrame: number | undefined
+let completionTimer: number | undefined
+
+const itemContainerStyles = computed(() =>
+	props.items.map((_, index) => ({
+		left: `${props.target.x}px`,
+		top: `${props.target.y}px`,
+		zIndex: `${index}`,
+	})),
+)
+
+const itemStyles = computed(() =>
+	props.items.map((item, index) => {
+		const originX = item.rect.left - props.target.x
+		const originY = item.rect.top - props.target.y
+
+		return {
+			width: `${item.rect.width}px`,
+			height: `${item.rect.height}px`,
+			transform: gathered.value
+				? `translate3d(${-item.rect.width / 2}px, ${-item.rect.height / 2}px, 0)`
+				: `translate3d(${originX}px, ${originY}px, 0)`,
+			transitionDuration: `${gatherDuration}ms`,
+			transitionDelay: `${Math.min(index, 8) * 10}ms`,
+		}
+	}),
+)
+
+onMounted(() => {
+	animationFrame = requestAnimationFrame(() => {
+		animationFrame = requestAnimationFrame(() => {
+			gathered.value = true
+			completionTimer = window.setTimeout(
+				() => {
+					finishing.value = true
+					emit('complete')
+				},
+				Math.max(gatherDuration - 250, 0),
+			)
+		})
+	})
+})
+
+onBeforeUnmount(() => {
+	if (animationFrame !== undefined) {
+		cancelAnimationFrame(animationFrame)
+	}
+	if (completionTimer !== undefined) {
+		clearTimeout(completionTimer)
+	}
+})
+</script>
+
+<template>
+	<Teleport to="body">
+		<div
+			class="pointer-events-none fixed inset-0 z-[9998] overflow-hidden transition-opacity duration-150 ease-out"
+			:class="finishing ? 'opacity-0' : 'opacity-100'"
+			aria-hidden="true"
+		>
+			<div
+				v-for="(item, index) in items"
+				:key="item.selectionKey"
+				class="fixed"
+				:style="itemContainerStyles[index]"
+			>
+				<div
+					class="origin-center transition-transform ease-[cubic-bezier(0.2,0.8,0.2,1)]"
+					:style="itemStyles[index]"
+				>
+					<ScreenshotDragPreview :screenshot="item.screenshot" />
+				</div>
+			</div>
+		</div>
+	</Teleport>
+</template>

apps/app-frontend/src/components/ui/screenshots-page/drag-preview.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { TagItem } from '@modrinth/ui'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+import { useImageThumbnail } from '@/composables/use-image-thumbnail'
+import type { InstanceScreenshot } from '@/helpers/instance'
+
+import { gatherDuration } from './use-screenshot-drag-gather'
+
+const props = withDefaults(
+	defineProps<{
+		screenshot: InstanceScreenshot
+		count?: number
+	}>(),
+	{
+		count: 1,
+	},
+)
+
+const thumbnail = useImageThumbnail(
+	() => ({
+		instanceId: props.screenshot.instance_id,
+		filePath: `screenshots/${props.screenshot.file_name}`,
+		path: props.screenshot.path,
+	}),
+	512,
+	() => props.screenshot.modified_at,
+)
+const showGatheredCount = ref(false)
+let countTimer: number | undefined
+
+onMounted(() => {
+	if (props.count <= 1 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+		showGatheredCount.value = true
+		return
+	}
+
+	countTimer = window.setTimeout(() => {
+		showGatheredCount.value = true
+		countTimer = undefined
+	}, gatherDuration - 150)
+})
+
+onBeforeUnmount(() => {
+	if (countTimer !== undefined) {
+		clearTimeout(countTimer)
+	}
+})
+</script>
+
+<template>
+	<div aria-hidden="true" class="relative w-full select-none">
+		<div
+			v-if="count > 1"
+			class="absolute inset-x-3 -bottom-2 top-2 rounded-xl border border-solid border-surface-5 bg-surface-2 shadow-md motion-safe:transition-opacity motion-safe:duration-200 motion-safe:delay-100 motion-safe:ease-out"
+			:class="showGatheredCount ? 'opacity-60' : 'opacity-0'"
+		/>
+		<div
+			v-if="count > 1"
+			class="absolute inset-x-1.5 -bottom-1 top-1 rounded-xl border border-solid border-surface-4 bg-surface-3 shadow-md motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-out"
+			:class="showGatheredCount ? 'opacity-80' : 'opacity-0'"
+		/>
+		<div
+			class="relative aspect-video w-full overflow-hidden rounded-xl border border-solid border-surface-5 bg-surface-2 opacity-90 shadow-lg"
+		>
+			<img v-if="thumbnail" :src="thumbnail" alt="" class="h-full w-full object-cover" />
+			<TagItem
+				v-if="count > 1"
+				class="!absolute right-3 top-3 z-[2] border-surface-5 bg-surface-4 tabular-nums text-[var(--color-text-tertiary)] motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-out"
+			>
+				{{ count }}
+			</TagItem>
+		</div>
+	</div>
+</template>

apps/app-frontend/src/components/ui/screenshots-page/group.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { useDroppable } from '@dnd-kit/vue'
+import { defineMessages, useDebugLogger, useVIntl } from '@modrinth/ui'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import type { InstanceScreenshot } from '@/helpers/instance'
+
+import ScreenshotCard from './card.vue'
+import ScreenshotSection from './section.vue'
+
+const props = defineProps<{
+	id: string
+	title: string
+	screenshots: InstanceScreenshot[]
+	renderedScreenshots?: InstanceScreenshot[]
+	virtualGridHeight?: number
+	virtualGridTop?: number
+	selectedKeys: ReadonlySet<string>
+	selectionActive: boolean
+	activeDraggedKeys: ReadonlySet<string>
+	showDropOutline: boolean
+	canDrag: boolean
+	dropInstanceId?: string
+	dropCustomGroup?: boolean
+	dropCustomGroupId?: string
+	showInstanceName: boolean
+	highlightedScreenshotId?: string
+	copiedScreenshotIds: ReadonlySet<string>
+	forceOpen: boolean
+	hideHeader?: boolean
+	editableTitle?: boolean
+	startEditingTitle?: boolean
+	maxTitleLength?: number
+	validateTitle?: (value: string) => boolean
+	onTitleChange?: (value: string) => boolean | void | Promise<boolean | void>
+}>()
+
+const collapsed = defineModel<boolean>('collapsed', { required: true })
+const dropTarget = ref<HTMLElement>()
+const { formatMessage } = useVIntl()
+const debugLayout = useDebugLogger('Screenshots:Group')
+const messages = defineMessages({
+	emptyGroup: {
+		id: 'app.screenshots.group.empty',
+		defaultMessage: 'Drag and drop to add screenshots.',
+	},
+})
+
+const shouldShowGrid = computed(() =>
+	Boolean(props.hideHeader || props.forceOpen || !collapsed.value),
+)
+const visibleScreenshots = ref<InstanceScreenshot[]>(props.renderedScreenshots ?? props.screenshots)
+const renderGrid = ref(shouldShowGrid.value)
+const virtualGridStyle = computed(() =>
+	props.virtualGridHeight === undefined ? undefined : { height: `${props.virtualGridHeight}px` },
+)
+const visibleGridStyle = computed(() =>
+	props.virtualGridTop === undefined
+		? undefined
+		: { transform: `translateY(${props.virtualGridTop}px)` },
+)
+let unmountGridTimeout: ReturnType<typeof setTimeout> | undefined
+let resizeObserver: ResizeObserver | undefined
+
+async function logGeometry(reason: string) {
+	await nextTick()
+	const rect = dropTarget.value?.getBoundingClientRect()
+	debugLayout(reason, {
+		id: props.id,
+		title: props.title,
+		collapsed: collapsed.value,
+		shouldShowGrid: shouldShowGrid.value,
+		renderGrid: renderGrid.value,
+		screenshotCount: props.screenshots.length,
+		renderedCount: visibleScreenshots.value.length,
+		firstScreenshotId: visibleScreenshots.value.at(0)?.id,
+		lastScreenshotId: visibleScreenshots.value.at(-1)?.id,
+		virtualGridHeight: props.virtualGridHeight,
+		virtualGridTop: props.virtualGridTop,
+		actual: rect
+			? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }
+			: undefined,
+	})
+}
+
+watch(
+	() => props.renderedScreenshots ?? props.screenshots,
+	(screenshots) => {
+		if (shouldShowGrid.value) visibleScreenshots.value = screenshots
+		void logGeometry('rendered screenshots changed')
+	},
+)
+
+watch(
+	() => [props.virtualGridHeight, props.virtualGridTop] as const,
+	() => void logGeometry('virtual grid geometry changed'),
+)
+
+watch(
+	shouldShowGrid,
+	(showGrid, previouslyShown) => {
+		if (unmountGridTimeout) clearTimeout(unmountGridTimeout)
+		if (showGrid) {
+			visibleScreenshots.value = props.renderedScreenshots ?? props.screenshots
+			renderGrid.value = true
+			void logGeometry('grid shown')
+			return
+		}
+		if (!previouslyShown) {
+			renderGrid.value = false
+			return
+		}
+		unmountGridTimeout = setTimeout(() => {
+			renderGrid.value = false
+			void logGeometry('grid unmounted after collapse')
+			unmountGridTimeout = undefined
+		}, 300)
+	},
+	{ flush: 'post' },
+)
+
+onMounted(() => {
+	debugLayout('mounted', { id: props.id, title: props.title })
+	void logGeometry('mounted geometry')
+	if (dropTarget.value) {
+		resizeObserver = new ResizeObserver(([entry]) => {
+			const rect = entry?.target.getBoundingClientRect()
+			debugLayout('actual size changed', {
+				id: props.id,
+				title: props.title,
+				width: rect?.width,
+				height: rect?.height,
+				expectedHeight:
+					(props.hideHeader ? 0 : 40) +
+					(shouldShowGrid.value ? 10 + (props.virtualGridHeight ?? 0) : 0) +
+					12,
+			})
+		})
+		resizeObserver.observe(dropTarget.value)
+	}
+})
+
+onBeforeUnmount(() => {
+	debugLayout('unmounted', {
+		id: props.id,
+		title: props.title,
+		renderedCount: visibleScreenshots.value.length,
+	})
+	resizeObserver?.disconnect()
+	if (unmountGridTimeout) clearTimeout(unmountGridTimeout)
+})
+
+const emit = defineEmits<{
+	(e: 'activate', screenshot: InstanceScreenshot, event: MouseEvent | KeyboardEvent): void
+	(e: 'toggle-selection' | 'copy' | 'edit', screenshot: InstanceScreenshot): void
+	(e: 'more', screenshot: InstanceScreenshot, event: MouseEvent): void
+}>()
+
+useDroppable({
+	id: computed(() => `screenshot-group:${props.id}`),
+	element: dropTarget,
+	disabled: computed(() => !props.dropInstanceId && !props.dropCustomGroup),
+	data: computed(() =>
+		props.dropCustomGroup
+			? { groupId: props.id, customGroupId: props.dropCustomGroupId ?? null }
+			: { groupId: props.id, instanceId: props.dropInstanceId },
+	),
+})
+
+function getSelectionKey(screenshot: InstanceScreenshot) {
+	return JSON.stringify([screenshot.instance_id, screenshot.file_name])
+}
+</script>
+
+<template>
+	<div
+		ref="dropTarget"
+		class="group/instance-container relative select-none pb-3 transition-colors"
+	>
+		<Transition
+			enter-active-class="transition-opacity duration-150 ease-out"
+			enter-from-class="!opacity-0"
+			enter-to-class="opacity-100"
+			leave-active-class="transition-opacity duration-150 ease-in"
+			leave-from-class="opacity-100"
+			leave-to-class="!opacity-0"
+		>
+			<div
+				v-if="showDropOutline"
+				class="pointer-events-none absolute -inset-2 inset-y-0 z-20 rounded-xl border-2 border-dashed border-brand bg-brand-highlight opacity-40"
+			/>
+		</Transition>
+		<ScreenshotSection
+			v-model:collapsed="collapsed"
+			:title="title"
+			:count="screenshots.length"
+			:force-open="forceOpen"
+			:hide-header="hideHeader"
+			:editable="editableTitle"
+			:start-editing="startEditingTitle"
+			:max-title-length="maxTitleLength"
+			:validate-title="validateTitle"
+			:on-title-change="onTitleChange"
+		>
+			<template #actions="{ startEditing }">
+				<slot name="actions" :start-editing="startEditing" />
+			</template>
+			<div v-if="renderGrid" class="relative min-h-[45px] w-full" :style="virtualGridStyle">
+				<div
+					class="grid min-h-[45px] w-full grid-cols-1 gap-3 sm:grid-cols-2 2xl:grid-cols-4"
+					:class="{ 'absolute inset-x-0 top-0': virtualGridHeight !== undefined }"
+					:style="visibleGridStyle"
+				>
+					<ScreenshotCard
+						v-for="screenshot in visibleScreenshots"
+						:key="getSelectionKey(screenshot)"
+						:screenshot="screenshot"
+						:selection-key="getSelectionKey(screenshot)"
+						:selected="selectedKeys.has(getSelectionKey(screenshot))"
+						:selection-active="selectionActive"
+						:active-dragged="activeDraggedKeys.has(getSelectionKey(screenshot))"
+						:can-drag="canDrag"
+						:show-instance-name="showInstanceName"
+						:highlighted="highlightedScreenshotId === screenshot.id"
+						:copied="copiedScreenshotIds.has(screenshot.id)"
+						@activate="(event) => emit('activate', screenshot, event)"
+						@toggle-selection="emit('toggle-selection', screenshot)"
+						@copy="emit('copy', screenshot)"
+						@edit="emit('edit', screenshot)"
+						@more="(event) => emit('more', screenshot, event)"
+					/>
+					<p
+						v-if="screenshots.length === 0"
+						key="empty-group"
+						class="col-span-full m-0 pl-0.5 pt-1 text-base font-base text-[var(--color-text-tertiary)] opacity-80"
+					>
+						{{ formatMessage(messages.emptyGroup) }}
+					</p>
+				</div>
+			</div>
+		</ScreenshotSection>
+	</div>
+</template>

apps/app-frontend/src/components/ui/screenshots-page/section.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { DropdownIcon } from '@modrinth/assets'
+import {
+	Accordion,
+	commonMessages,
+	defineMessages,
+	InlineEditableText,
+	TagItem,
+	useDebugLogger,
+	useVIntl,
+} from '@modrinth/ui'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		title: string
+		count: number
+		collapsed?: boolean
+		forceOpen?: boolean
+		hideHeader?: boolean
+		editable?: boolean
+		startEditing?: boolean
+		maxTitleLength?: number
+		validateTitle?: (value: string) => boolean
+		onTitleChange?: (value: string) => boolean | void | Promise<boolean | void>
+	}>(),
+	{
+		collapsed: false,
+		forceOpen: false,
+		hideHeader: false,
+		editable: false,
+		startEditing: false,
+	},
+)
+
+const emit = defineEmits<{
+	(e: 'update:collapsed', collapsed: boolean): void
+}>()
+
+const { formatMessage } = useVIntl()
+const debugLayout = useDebugLogger('Screenshots:Section')
+const accordion = ref<InstanceType<typeof Accordion>>()
+const titleInput = ref<InstanceType<typeof InlineEditableText>>()
+const titleModel = ref(props.title)
+const messages = defineMessages({
+	collapse: { id: 'app.screenshots.group.collapse', defaultMessage: 'Collapse group' },
+	expand: { id: 'app.screenshots.group.expand', defaultMessage: 'Expand group' },
+})
+
+function toggle() {
+	debugLayout('toggle requested', {
+		title: props.title,
+		count: props.count,
+		isOpen: accordion.value?.isOpen,
+	})
+	if (accordion.value?.isOpen) {
+		accordion.value.close()
+	} else {
+		accordion.value?.open()
+	}
+}
+
+function handleOpen() {
+	debugLayout('opened', { title: props.title, count: props.count })
+	emit('update:collapsed', false)
+}
+
+function handleClose() {
+	debugLayout('closed', { title: props.title, count: props.count })
+	emit('update:collapsed', true)
+}
+
+onMounted(() => {
+	debugLayout('mounted', {
+		title: props.title,
+		count: props.count,
+		collapsed: props.collapsed,
+		hideHeader: props.hideHeader,
+		forceOpen: props.forceOpen,
+	})
+})
+
+onBeforeUnmount(() => {
+	debugLayout('unmounted', { title: props.title, count: props.count })
+})
+
+async function startTitleEditing() {
+	if (!props.editable) return
+	await titleInput.value?.startEditing()
+}
+
+watch(
+	() => props.title,
+	(title) => {
+		titleModel.value = title
+	},
+)
+
+watch(
+	() => props.startEditing,
+	async (shouldStartEditing) => {
+		if (!shouldStartEditing) return
+		await nextTick()
+		await startTitleEditing()
+	},
+	{ immediate: true, flush: 'post' },
+)
+</script>
+
+<template>
+	<section class="flex w-full flex-col">
+		<div
+			v-if="!hideHeader"
+			class="group/header flex h-10 w-full items-center gap-2 border-0 border-b border-solid border-b-surface-5"
+		>
+			<div class="group/open-target flex min-w-0 cursor-pointer items-center gap-2" @click="toggle">
+				<button
+					type="button"
+					class="flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0"
+					:aria-expanded="accordion?.isOpen"
+					:aria-label="formatMessage(accordion?.isOpen ? messages.collapse : messages.expand)"
+					@click.stop="toggle"
+				>
+					<DropdownIcon
+						class="size-5 shrink-0 text-[var(--color-text-tertiary)] transition-all duration-300 group-hover/open-target:text-[var(--color-text-default)]"
+						:class="{ 'rotate-180': accordion?.isOpen }"
+					/>
+				</button>
+				<InlineEditableText
+					v-if="editable"
+					ref="titleInput"
+					v-model="titleModel"
+					activation-mode="manual"
+					class="!h-10 select-none text-base font-semibold text-[var(--color-text-default)] group-hover/open-target:text-[var(--color-text-primary)]"
+					:edit-label="formatMessage(commonMessages.renameButton)"
+					max-width="24rem"
+					icon-text-class="select-none"
+					:max-length="maxTitleLength"
+					:validate="validateTitle"
+					:on-change="onTitleChange"
+				/>
+				<span
+					v-else
+					class="select-none truncate text-base font-semibold text-[var(--color-text-default)] group-hover/open-target:text-[var(--color-text-primary)]"
+				>
+					{{ title }}
+				</span>
+				<TagItem v-if="count" class="shrink-0 border-surface-3 bg-surface-2">
+					{{ count }}
+				</TagItem>
+			</div>
+			<div class="min-w-0 flex-1" />
+			<slot name="actions" :start-editing="startTitleEditing" />
+		</div>
+		<Accordion
+			ref="accordion"
+			:open-by-default="hideHeader || !props.collapsed"
+			:force-open="forceOpen"
+			overflow-visible
+			class="w-full"
+			@on-open="handleOpen"
+			@on-close="handleClose"
+		>
+			<div class="mt-2.5">
+				<slot />
+			</div>
+		</Accordion>
+	</section>
+</template>

apps/app-frontend/src/components/ui/screenshots-page/toolbar.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ArrowUpDownIcon, GridIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
+import {
+	Button,
+	Combobox,
+	type ComboboxOption,
+	defineMessages,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+
+const search = defineModel<string>('search', { required: true })
+const sort = defineModel<string>('sort', { required: true })
+const group = defineModel<string>('group', { required: true })
+
+defineProps<{
+	sortOptions: ComboboxOption<string>[]
+	groupOptions: ComboboxOption<string>[]
+}>()
+
+const emit = defineEmits<{
+	(e: 'new-group'): void
+}>()
+
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	search: { id: 'app.screenshots.search', defaultMessage: 'Search' },
+	newGroup: { id: 'app.screenshots.group.new', defaultMessage: 'New group' },
+	sortBy: { id: 'app.screenshots.sort-by', defaultMessage: 'Sort by' },
+	groupBy: { id: 'app.screenshots.group-by', defaultMessage: 'Group by' },
+})
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<div class="flex flex-wrap gap-2">
+			<StyledInput
+				v-model="search"
+				:icon="SearchIcon"
+				type="text"
+				:placeholder="formatMessage(messages.search)"
+				clearable
+				wrapper-class="min-w-[16rem] flex-1"
+			/>
+			<Button @click="emit('new-group')">
+				<PlusIcon />
+				{{ formatMessage(messages.newGroup) }}
+			</Button>
+		</div>
+		<div class="flex flex-wrap items-center gap-2">
+			<Combobox
+				v-model="sort"
+				class="w-max"
+				:options="sortOptions"
+				:show-icon-in-selected="false"
+				dropdown-min-width="160px"
+			>
+				<template #prefix>
+					<ArrowUpDownIcon
+						class="size-5 text-[var(--color-text-default)]"
+						:aria-label="formatMessage(messages.sortBy)"
+					/>
+				</template>
+				<template #selected="{ label }">
+					<span>{{ label }}</span>
+				</template>
+			</Combobox>
+			<Combobox
+				v-model="group"
+				class="w-max"
+				:options="groupOptions"
+				:show-icon-in-selected="false"
+				dropdown-min-width="160px"
+			>
+				<template #prefix>
+					<GridIcon
+						class="size-5 text-[var(--color-text-default)]"
+						:aria-label="formatMessage(messages.groupBy)"
+					/>
+				</template>
+				<template #selected="{ label }">
+					<span>{{ label }}</span>
+				</template>
+			</Combobox>
+		</div>
+	</div>
+</template>

apps/app-frontend/src/components/ui/screenshots-page/use-screenshot-drag-gather.ts

@@ -0,0 +1,130 @@
+import { onBeforeUnmount, type Ref, ref } from 'vue'
+
+import type { InstanceScreenshot } from '@/helpers/instance'
+
+type Point = {
+	x: number
+	y: number
+}
+
+export type ActiveScreenshotDrag = {
+	primarySelectionKey: string
+	selectionKeys: string[]
+}
+
+export const gatherDuration = 500
+
+export type ScreenshotDragGatherItem = {
+	screenshot: InstanceScreenshot
+	selectionKey: string
+	rect: {
+		left: number
+		top: number
+		width: number
+		height: number
+	}
+}
+
+function getSelectionKey(screenshot: InstanceScreenshot) {
+	return JSON.stringify([screenshot.instance_id, screenshot.file_name])
+}
+
+export function useScreenshotDragGather(screenshots: Ref<InstanceScreenshot[]>) {
+	const items = ref<ScreenshotDragGatherItem[]>([])
+	const target = ref<Point>({ x: 0, y: 0 })
+	const targetOffset = ref<Point>({ x: 0, y: 0 })
+	const isGathering = ref(false)
+	let cleanupTimer: number | undefined
+
+	const clearCleanupTimer = () => {
+		if (cleanupTimer !== undefined) {
+			clearTimeout(cleanupTimer)
+			cleanupTimer = undefined
+		}
+	}
+
+	const clear = () => {
+		clearCleanupTimer()
+		items.value = []
+		targetOffset.value = { x: 0, y: 0 }
+		isGathering.value = false
+	}
+
+	const updateTarget = (pointer: Point) => {
+		target.value = {
+			x: pointer.x + targetOffset.value.x,
+			y: pointer.y + targetOffset.value.y,
+		}
+	}
+
+	const start = (drag: ActiveScreenshotDrag | null, pointer: Point) => {
+		clear()
+
+		const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		if (!drag || drag.selectionKeys.length < 2 || reduceMotion) return
+
+		const screenshotCards = Array.from(
+			document.querySelectorAll<HTMLElement>('[data-screenshot-card]'),
+		)
+		const sourceCard = screenshotCards.find(
+			(card) => card.dataset.selectionKey === drag.primarySelectionKey,
+		)
+
+		if (sourceCard) {
+			const sourceRect = sourceCard.getBoundingClientRect()
+			targetOffset.value = {
+				x: sourceRect.left + sourceRect.width / 2 - pointer.x,
+				y: sourceRect.top + sourceRect.height / 2 - pointer.y,
+			}
+		}
+
+		const screenshotsByKey = new Map(
+			screenshots.value.map((screenshot) => [getSelectionKey(screenshot), screenshot]),
+		)
+		items.value = drag.selectionKeys.flatMap((selectionKey) => {
+			const screenshot = screenshotsByKey.get(selectionKey)
+			const card = screenshotCards.find(
+				(candidate) =>
+					candidate.dataset.selectionKey === selectionKey && candidate.getClientRects().length > 0,
+			)
+			if (!screenshot || !card) return []
+
+			const rect = card.getBoundingClientRect()
+			return [
+				{
+					screenshot,
+					selectionKey,
+					rect: {
+						left: rect.left,
+						top: rect.top,
+						width: rect.width,
+						height: rect.height,
+					},
+				},
+			]
+		})
+		updateTarget(pointer)
+		isGathering.value = items.value.length > 0
+	}
+
+	const finish = () => {
+		isGathering.value = false
+		clearCleanupTimer()
+		cleanupTimer = window.setTimeout(() => {
+			items.value = []
+			cleanupTimer = undefined
+		}, 400)
+	}
+
+	onBeforeUnmount(clearCleanupTimer)
+
+	return {
+		items,
+		target,
+		isGathering,
+		start,
+		updateTarget,
+		clear,
+		finish,
+	}
+}