Fmt

* feat: clean up edge case behaviour and add queued to install logic

* fix: remove version choice modal

* feat: queued flow

* feat: standardize headers in app on proj pages

* fix: clear btn

* feat: installing floating popup

* fix: lint

* fix: onboarding/reset logic change for modpacks

* qa: big ol qa

* fix: lint

* fix: lint

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/app-frontend/src/App.vue

@@ -1571,11 +1571,15 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 
 .app-grid-navbar {
 	grid-area: nav;
+	position: relative;
+	z-index: 2;
 }
 
 .app-grid-statusbar {
 	grid-area: status;
 	padding-right: var(--window-controls-width, 0px);
+	position: relative;
+	z-index: 2;
 }
 
 [data-tauri-drag-region-exclude] {
@@ -1665,7 +1669,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 }
 
 .app-contents::before {
-	z-index: 1;
+	z-index: 30;
 	content: '';
 	position: fixed;
 	left: var(--left-bar-width);

apps/app-frontend/src/composables/browse/use-app-server-browse.ts

@@ -0,0 +1,332 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { CheckIcon, PlayIcon, PlusIcon, StopCircleIcon } from '@modrinth/assets'
+import type { CardAction } from '@modrinth/ui'
+import { commonMessages, defineMessages, useDebugLogger, useVIntl } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import type { ComputedRef, Ref } from 'vue'
+import { onUnmounted, ref, shallowRef } from 'vue'
+import type { Router } from 'vue-router'
+
+import { process_listener } from '@/helpers/events'
+import { get_by_profile_path } from '@/helpers/process'
+import { kill, list as listInstances } from '@/helpers/profile.js'
+import type { GameInstance } from '@/helpers/types'
+import { add_server_to_profile, getServerLatency } from '@/helpers/worlds'
+import { getServerAddress } from '@/store/install.js'
+
+interface BrowseServerInstance {
+	name: string
+	path: string
+}
+
+interface ContextMenuHandle {
+	showMenu: (
+		event: MouseEvent,
+		result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
+		options: { name: string }[],
+	) => void
+}
+
+interface ContextMenuOptionClick {
+	option: 'open_link' | 'copy_link'
+	item: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject
+}
+
+export interface UseAppServerBrowseOptions {
+	instance: Ref<BrowseServerInstance | null>
+	isFromWorlds: ComputedRef<boolean>
+	allInstalledIds: ComputedRef<Set<string>>
+	newlyInstalled: Ref<string[]>
+	installingServerProjects: Ref<string[]>
+	playServerProject: (projectId: string) => Promise<void>
+	showAddServerToInstanceModal: (serverName: string, serverAddress: string) => void
+	handleError: (error: unknown) => void
+	router: Router
+}
+
+const messages = defineMessages({
+	addToInstance: {
+		id: 'app.browse.add-to-instance',
+		defaultMessage: 'Add to instance',
+	},
+	addToInstanceName: {
+		id: 'app.browse.add-to-instance-name',
+		defaultMessage: 'Add to {instanceName}',
+	},
+	added: {
+		id: 'app.browse.added',
+		defaultMessage: 'Added',
+	},
+	alreadyAdded: {
+		id: 'app.browse.already-added',
+		defaultMessage: 'Already added',
+	},
+})
+
+export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
+	const { formatMessage } = useVIntl()
+	const debugLog = useDebugLogger('BrowseServer')
+	const serverPings = shallowRef<Record<string, number | undefined>>({})
+	const serverPingCache = new Map<string, number | undefined>()
+	const pendingServerPings = new Map<string, Promise<number | undefined>>()
+	const runningServerProjects = ref<Record<string, string>>({})
+	const lastServerHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
+	const contextMenuRef = ref<ContextMenuHandle | null>(null)
+	let serverPingCacheActive = true
+	let unlistenProcesses: (() => void) | null = null
+
+	async function checkServerRunningStates(hits: Labrinth.Search.v3.ResultSearchProject[]) {
+		debugLog('checkServerRunningStates', { hitCount: hits.length })
+		const packs = await listInstances().catch((error) => {
+			options.handleError(error)
+			return []
+		})
+		const newRunning: Record<string, string> = {}
+		for (const hit of hits) {
+			const inst = packs.find(
+				(pack: GameInstance) => pack.linked_data?.project_id === hit.project_id,
+			)
+			if (inst) {
+				const processes = await get_by_profile_path(inst.path).catch(() => [])
+				if (Array.isArray(processes) && processes.length > 0) {
+					newRunning[hit.project_id] = inst.path
+				}
+			}
+		}
+		debugLog('runningServerProjects updated', newRunning)
+		runningServerProjects.value = newRunning
+	}
+
+	async function handleStopServerProject(projectId: string) {
+		debugLog('handleStopServerProject', projectId)
+		const instancePath = runningServerProjects.value[projectId]
+		if (!instancePath) return
+		await kill(instancePath).catch(() => {})
+		const { [projectId]: _, ...rest } = runningServerProjects.value
+		runningServerProjects.value = rest
+	}
+
+	async function handlePlayServerProject(projectId: string) {
+		debugLog('handlePlayServerProject', projectId)
+		await options.playServerProject(projectId)
+		checkServerRunningStates(lastServerHits.value)
+	}
+
+	async function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearchProject) {
+		debugLog('handleAddServerToInstance', { projectId: project.project_id, name: project.name })
+		const address = getServerAddress(project.minecraft_java_server)
+		if (!address) return
+
+		if (options.instance.value) {
+			try {
+				await add_server_to_profile(
+					options.instance.value.path,
+					project.name,
+					address,
+					'prompt',
+					project.project_id,
+					project.minecraft_java_server?.content?.kind,
+				)
+				options.newlyInstalled.value.push(project.project_id)
+			} catch (error) {
+				options.handleError(error)
+			}
+		} else {
+			options.showAddServerToInstanceModal(project.name, address)
+		}
+	}
+
+	async function pingServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
+		debugLog('pingServerHits', { hitCount: hits.length })
+		const pingsToFetch = hits.flatMap((hit) => {
+			const address = hit.minecraft_java_server?.address
+			if (!address) return []
+			return [{ hit, address }]
+		})
+		const nextPings = { ...serverPings.value }
+		for (const { hit, address } of pingsToFetch) {
+			if (serverPingCache.has(address)) {
+				nextPings[hit.project_id] = serverPingCache.get(address)
+			}
+		}
+		serverPings.value = nextPings
+
+		await Promise.all(
+			pingsToFetch.map(async ({ hit, address }) => {
+				if (serverPingCache.has(address)) return
+
+				let pending = pendingServerPings.get(address)
+				if (!pending) {
+					pending = getServerLatency(address)
+						.then((latency) => {
+							if (serverPingCacheActive) serverPingCache.set(address, latency)
+							return latency
+						})
+						.catch((error) => {
+							console.error(`Failed to ping server ${address}:`, error)
+							if (serverPingCacheActive) serverPingCache.set(address, undefined)
+							return undefined
+						})
+						.finally(() => {
+							pendingServerPings.delete(address)
+						})
+					pendingServerPings.set(address, pending)
+				}
+
+				const latency = await pending
+				if (!serverPingCacheActive) return
+				serverPings.value = { ...serverPings.value, [hit.project_id]: latency }
+			}),
+		)
+	}
+
+	function updateServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
+		lastServerHits.value = hits
+		pingServerHits(hits)
+		checkServerRunningStates(hits)
+	}
+
+	function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject) {
+		const content = project.minecraft_java_server?.content
+		if (content?.kind === 'modpack') {
+			const { project_name, project_icon, project_id } = content
+			if (!project_name) return undefined
+			return {
+				name: project_name,
+				icon: project_icon ?? undefined,
+				onclick:
+					project_id !== project.project_id
+						? () => {
+								options.router.push(`/project/${project_id}`)
+							}
+						: undefined,
+				showCustomModpackTooltip: project_id === project.project_id,
+			}
+		}
+		return undefined
+	}
+
+	function getServerCardActions(
+		serverResult: Labrinth.Search.v3.ResultSearchProject,
+	): CardAction[] {
+		const isInstalled = options.allInstalledIds.value.has(serverResult.project_id)
+
+		if (options.isFromWorlds.value && options.instance.value) {
+			return [
+				{
+					key: 'add-to-instance',
+					label: formatMessage(isInstalled ? messages.added : messages.addToInstance),
+					icon: isInstalled ? CheckIcon : PlusIcon,
+					disabled: isInstalled,
+					color: 'brand',
+					type: 'outlined',
+					onClick: () => handleAddServerToInstance(serverResult),
+				},
+			]
+		}
+
+		const actions: CardAction[] = []
+
+		actions.push({
+			key: 'add',
+			label: '',
+			icon: isInstalled ? CheckIcon : PlusIcon,
+			disabled: isInstalled,
+			circular: true,
+			tooltip: isInstalled
+				? formatMessage(messages.alreadyAdded)
+				: options.instance.value
+					? formatMessage(messages.addToInstanceName, {
+							instanceName: options.instance.value.name,
+						})
+					: formatMessage(commonMessages.addServerToInstanceButton),
+			onClick: () => handleAddServerToInstance(serverResult),
+		})
+
+		if (runningServerProjects.value[serverResult.project_id]) {
+			actions.push({
+				key: 'stop',
+				label: formatMessage(commonMessages.stopButton),
+				icon: StopCircleIcon,
+				color: 'red',
+				type: 'outlined',
+				onClick: () => handleStopServerProject(serverResult.project_id),
+			})
+		} else {
+			const isInstalling = options.installingServerProjects.value.includes(serverResult.project_id)
+			actions.push({
+				key: 'play',
+				label: formatMessage(
+					isInstalling ? commonMessages.installingLabel : commonMessages.playButton,
+				),
+				icon: PlayIcon,
+				disabled: isInstalling,
+				color: 'brand',
+				type: 'outlined',
+				onClick: () => handlePlayServerProject(serverResult.project_id),
+			})
+		}
+
+		return actions
+	}
+
+	function handleRightClick(
+		event: MouseEvent,
+		result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
+	) {
+		contextMenuRef.value?.showMenu(event, result, [{ name: 'open_link' }, { name: 'copy_link' }])
+	}
+
+	function handleOptionsClick(args: ContextMenuOptionClick) {
+		const url = getProjectUrl(args.item)
+		switch (args.option) {
+			case 'open_link':
+				openUrl(url)
+				break
+			case 'copy_link':
+				navigator.clipboard.writeText(url)
+				break
+		}
+	}
+
+	process_listener((event: { event: string; profile_path_id: string }) => {
+		debugLog('process event', event)
+		if (event.event === 'finished') {
+			const projectId = Object.entries(runningServerProjects.value).find(
+				([, path]) => path === event.profile_path_id,
+			)?.[0]
+			if (projectId) {
+				const { [projectId]: _, ...rest } = runningServerProjects.value
+				runningServerProjects.value = rest
+			}
+		}
+	})
+		.then((unlisten) => {
+			unlistenProcesses = unlisten
+		})
+		.catch(options.handleError)
+
+	onUnmounted(() => {
+		serverPingCacheActive = false
+		unlistenProcesses?.()
+		serverPingCache.clear()
+		pendingServerPings.clear()
+	})
+
+	return {
+		serverPings,
+		contextMenuRef,
+		updateServerHits,
+		getServerModpackContent,
+		getServerCardActions,
+		handleRightClick,
+		handleOptionsClick,
+	}
+}
+
+function getProjectUrl(
+	item: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
+) {
+	const projectType = 'project_types' in item ? item.project_types?.[0] : item.project_type
+	return `https://modrinth.com/${projectType ?? 'project'}/${item.slug ?? item.project_id}`
+}

apps/app-frontend/src/locales/en-US/index.json

@@ -104,11 +104,11 @@
   "app.auth-servers.unreachable.header": {
     "message": "Cannot reach authentication servers"
   },
-  "app.browse.add-server-to-instance": {
-    "message": "Add server to instance"
-  },
   "app.browse.add-servers-to-instance": {
-    "message": "Add servers to your instance"
+    "message": "Adding server to instance"
+  },
+  "app.browse.add-to-an-instance": {
+    "message": "Add to an instance"
   },
   "app.browse.add-to-instance": {
     "message": "Add to instance"
@@ -122,6 +122,9 @@
   "app.browse.already-added": {
     "message": "Already added"
   },
+  "app.browse.back-to-instance": {
+    "message": "Back to instance"
+  },
   "app.browse.discover-content": {
     "message": "Discover content"
   },
@@ -131,20 +134,11 @@
   "app.browse.hide-added-servers": {
     "message": "Hide already added servers"
   },
-  "app.browse.hide-installed-content": {
-    "message": "Hide already installed content"
-  },
-  "app.browse.install-content-to-instance": {
-    "message": "Install content to instance"
-  },
   "app.browse.project-type.modpacks": {
     "message": "Modpacks"
   },
-  "app.browse.server.install": {
-    "message": "Install"
-  },
-  "app.browse.server.installed": {
-    "message": "Installed"
+  "app.browse.server-instance-content-warning": {
+    "message": "Adding content can break compatibility when joining the server. Any added content will also be lost when you update the server instance content."
   },
   "app.browse.server.installing": {
     "message": "Installing"
@@ -305,6 +299,15 @@
   "app.modal.update-to-play.update-required-description": {
     "message": "An update is required to play {name}. Please update to the latest version to launch the game."
   },
+  "app.project.install-button.already-installed": {
+    "message": "This project is already installed"
+  },
+  "app.project.install-context.back-to-browse": {
+    "message": "Back to browse"
+  },
+  "app.project.install-context.install-content-to-instance": {
+    "message": "Install content to instance"
+  },
   "app.settings.developer-mode-enabled": {
     "message": "Developer mode enabled."
   },

apps/app-frontend/src/pages/Browse.vue

@@ -5,46 +5,49 @@ import {
 	ClipboardCopyIcon,
 	ExternalIcon,
 	GlobeIcon,
-	PlayIcon,
 	PlusIcon,
 	SpinnerIcon,
-	StopCircleIcon,
 } from '@modrinth/assets'
-import type { CardAction, ProjectType, Tags } from '@modrinth/ui'
+import type { BrowseInstallContentType, CardAction, ProjectType, Tags } from '@modrinth/ui'
 import {
 	BrowsePageLayout,
 	BrowseSidebar,
 	commonMessages,
 	CreationFlowModal,
 	defineMessages,
+	getLatestMatchingInstallVersion,
+	getSelectedInstallPreferences,
+	getTargetInstallPreferences,
 	injectNotificationManager,
+	preferencesDiffer,
 	provideBrowseManager,
+	requestInstall,
 	useBrowseSearch,
 	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { openUrl } from '@tauri-apps/plugin-opener'
 import type { Ref } from 'vue'
-import { computed, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
-import { get_project_v3, get_search_results_v3 } from '@/helpers/cache.js'
-import { process_listener } from '@/helpers/events'
+import { useAppServerBrowse } from '@/composables/browse/use-app-server-browse'
+import {
+	get_project,
+	get_project_v3,
+	get_search_results_v3,
+	get_version_many,
+} from '@/helpers/cache.js'
 import { get_loader_versions as getLoaderManifest } from '@/helpers/metadata'
-import { get_by_profile_path } from '@/helpers/process'
 import {
 	get as getInstance,
 	get_installed_project_ids as getInstalledProjectIds,
-	kill,
-	list as listInstances,
 } from '@/helpers/profile.js'
 import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
-import type { GameInstance } from '@/helpers/types'
-import { add_server_to_profile, get_profile_worlds, getServerLatency } from '@/helpers/worlds'
+import { get_profile_worlds } from '@/helpers/worlds'
 import { injectContentInstall } from '@/providers/content-install'
 import { injectServerInstall } from '@/providers/server-install'
 import {
@@ -52,7 +55,6 @@ import {
 	provideServerInstallContent,
 } from '@/providers/setup/server-install-content'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { getServerAddress } from '@/store/install.js'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -76,15 +78,27 @@ const {
 	effectiveServerWorldId,
 	serverContextServerData,
 	serverContentProjectIds,
+	queuedServerInstallProjectIds,
+	queuedServerInstallCount,
+	selectedServerInstallProjects,
+	isInstallingQueuedServerInstalls,
+	queuedInstallProgress,
 	serverBackUrl,
 	serverBackLabel,
 	serverBrowseHeading,
+	clearQueuedServerInstalls,
+	removeQueuedServerInstall,
+	flushQueuedServerInstalls,
+	discardQueuedServerInstallsAndBack,
+	installQueuedServerInstallsAndBack,
 	initServerContext,
 	watchServerContextChanges,
 	searchServerModpacks,
 	getServerProjectVersions,
 	enforceSetupModpackRoute,
-	installProjectToServer,
+	getQueuedServerInstallPlans,
+	setQueuedServerInstallPlans,
+	openServerModpackInstallFlow,
 	onServerFlowBack,
 	handleServerModpackFlowCreate,
 	markServerProjectInstalled,
@@ -254,6 +268,7 @@ const instanceFilters = computed(() => {
 })
 
 const serverHideInstalled = ref(false)
+const hideSelectedServerInstalls = ref(false)
 if (route.query.shi) {
 	serverHideInstalled.value = route.query.shi === 'true'
 }
@@ -291,6 +306,12 @@ const serverContextFilters = computed(() => {
 			filters.push({ type: 'plugin_loader', option: platform })
 
 		if (pt === 'mod') filters.push({ type: 'environment', option: 'server' })
+
+		if (hideSelectedServerInstalls.value && queuedServerInstallProjectIds.value.size > 0) {
+			for (const id of queuedServerInstallProjectIds.value) {
+				filters.push({ type: 'project_id', option: `project_id:${id}`, negative: true })
+			}
+		}
 	}
 
 	if (pt === 'modpack') {
@@ -313,134 +334,24 @@ const combinedProvidedFilters = computed(() =>
 	isServerContext.value ? serverContextFilters.value : instanceFilters.value,
 )
 
-const serverPings = shallowRef<Record<string, number | undefined>>({})
-const serverPingCache = new Map<string, number | undefined>()
-const pendingServerPings = new Map<string, Promise<number | undefined>>()
-let serverPingCacheActive = true
-const runningServerProjects = ref<Record<string, string>>({})
-
-async function checkServerRunningStates(hits: Labrinth.Search.v3.ResultSearchProject[]) {
-	debugLog('checkServerRunningStates', { hitCount: hits.length })
-	const packs = await listInstances()
-	const newRunning: Record<string, string> = {}
-	for (const hit of hits) {
-		const inst = packs.find((p: GameInstance) => p.linked_data?.project_id === hit.project_id)
-		if (inst) {
-			const processes = await get_by_profile_path(inst.path).catch(() => [])
-			if (Array.isArray(processes) && processes.length > 0) {
-				newRunning[hit.project_id] = inst.path
-			}
-		}
-	}
-	debugLog('runningServerProjects updated', newRunning)
-	runningServerProjects.value = newRunning
-}
-
-async function handleStopServerProject(projectId: string) {
-	debugLog('handleStopServerProject', projectId)
-	const instancePath = runningServerProjects.value[projectId]
-	if (!instancePath) return
-	await kill(instancePath).catch(() => {})
-	const { [projectId]: _, ...rest } = runningServerProjects.value
-	runningServerProjects.value = rest
-}
-
-async function handlePlayServerProject(projectId: string) {
-	debugLog('handlePlayServerProject', projectId)
-	await playServerProject(projectId)
-	checkServerRunningStates(lastServerHits.value)
-}
-
-const lastServerHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
-
-async function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearchProject) {
-	debugLog('handleAddServerToInstance', { projectId: project.project_id, name: project.name })
-	const address = getServerAddress(project.minecraft_java_server)
-	if (!address) return
-
-	if (instance.value) {
-		try {
-			await add_server_to_profile(
-				instance.value.path,
-				project.name,
-				address,
-				'prompt',
-				project.project_id,
-				project.minecraft_java_server?.content?.kind,
-			)
-			newlyInstalled.value.push(project.project_id)
-		} catch (err) {
-			handleError(err as Error)
-		}
-	} else {
-		showAddServerToInstanceModal(project.name, address)
-	}
-}
-
-async function pingServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
-	debugLog('pingServerHits', { hitCount: hits.length })
-	const pingsToFetch = hits.flatMap((hit) => {
-		const address = hit.minecraft_java_server?.address
-		if (!address) return []
-		return [{ hit, address }]
-	})
-	const nextPings = { ...serverPings.value }
-	for (const { hit, address } of pingsToFetch) {
-		if (serverPingCache.has(address)) {
-			nextPings[hit.project_id] = serverPingCache.get(address)
-		}
-	}
-	serverPings.value = nextPings
-
-	await Promise.all(
-		pingsToFetch.map(async ({ hit, address }) => {
-			if (serverPingCache.has(address)) return
-
-			let pending = pendingServerPings.get(address)
-			if (!pending) {
-				pending = getServerLatency(address)
-					.then((latency) => {
-						if (serverPingCacheActive) serverPingCache.set(address, latency)
-						return latency
-					})
-					.catch((err) => {
-						console.error(`Failed to ping server ${address}:`, err)
-						if (serverPingCacheActive) serverPingCache.set(address, undefined)
-						return undefined
-					})
-					.finally(() => {
-						pendingServerPings.delete(address)
-					})
-				pendingServerPings.set(address, pending)
-			}
-
-			const latency = await pending
-			if (!serverPingCacheActive) return
-			serverPings.value = { ...serverPings.value, [hit.project_id]: latency }
-		}),
-	)
-}
-
-const unlistenProcesses = await process_listener(
-	(e: { event: string; profile_path_id: string }) => {
-		debugLog('process event', e)
-		if (e.event === 'finished') {
-			const projectId = Object.entries(runningServerProjects.value).find(
-				([, path]) => path === e.profile_path_id,
-			)?.[0]
-			if (projectId) {
-				const { [projectId]: _, ...rest } = runningServerProjects.value
-				runningServerProjects.value = rest
-			}
-		}
-	},
-)
-
-onUnmounted(() => {
-	serverPingCacheActive = false
-	unlistenProcesses()
-	serverPingCache.clear()
-	pendingServerPings.clear()
+const {
+	serverPings,
+	contextMenuRef,
+	updateServerHits,
+	getServerModpackContent,
+	getServerCardActions,
+	handleRightClick,
+	handleOptionsClick,
+} = useAppServerBrowse({
+	instance,
+	isFromWorlds,
+	allInstalledIds,
+	newlyInstalled,
+	installingServerProjects,
+	playServerProject,
+	showAddServerToInstanceModal,
+	handleError,
+	router,
 })
 
 const offline = ref(!navigator.onLine)
@@ -454,29 +365,13 @@ window.addEventListener('online', () => {
 })
 
 const messages = defineMessages({
-	addServerToInstance: {
-		id: 'app.browse.add-server-to-instance',
-		defaultMessage: 'Add server to instance',
-	},
 	addServersToInstance: {
 		id: 'app.browse.add-servers-to-instance',
-		defaultMessage: 'Add servers to your instance',
+		defaultMessage: 'Adding server to instance',
 	},
-	addToInstance: {
-		id: 'app.browse.add-to-instance',
-		defaultMessage: 'Add to instance',
-	},
-	addToInstanceName: {
-		id: 'app.browse.add-to-instance-name',
-		defaultMessage: 'Add to {instanceName}',
-	},
-	added: {
-		id: 'app.browse.added',
-		defaultMessage: 'Added',
-	},
-	alreadyAdded: {
-		id: 'app.browse.already-added',
-		defaultMessage: 'Already added',
+	addToAnInstance: {
+		id: 'app.browse.add-to-an-instance',
+		defaultMessage: 'Add to an instance',
 	},
 	discoverContent: {
 		id: 'app.browse.discover-content',
@@ -502,26 +397,19 @@ const messages = defineMessages({
 		id: 'app.browse.hide-added-servers',
 		defaultMessage: 'Hide already added servers',
 	},
-	hideInstalledContent: {
-		id: 'app.browse.hide-installed-content',
-		defaultMessage: 'Hide already installed content',
-	},
-	installContentToInstance: {
-		id: 'app.browse.install-content-to-instance',
-		defaultMessage: 'Install content to instance',
-	},
-	installToServer: {
-		id: 'app.browse.server.install',
-		defaultMessage: 'Install',
-	},
-	installedToServer: {
-		id: 'app.browse.server.installed',
-		defaultMessage: 'Installed',
-	},
 	installingToServer: {
 		id: 'app.browse.server.installing',
 		defaultMessage: 'Installing',
 	},
+	backToInstance: {
+		id: 'app.browse.back-to-instance',
+		defaultMessage: 'Back to instance',
+	},
+	serverInstanceContentWarning: {
+		id: 'app.browse.server-instance-content-warning',
+		defaultMessage:
+			'Adding content can break compatibility when joining the server. Any added content will also be lost when you update the server instance content.',
+	},
 	modLoaderProvidedByInstance: {
 		id: 'search.filter.locked.instance-loader.title',
 		defaultMessage: 'Loader is provided by the instance',
@@ -654,46 +542,6 @@ const selectableProjectTypes = computed(() => {
 	]
 })
 
-const getServerModpackContent = (project: Labrinth.Search.v3.ResultSearchProject) => {
-	const content = project.minecraft_java_server?.content
-	if (content?.kind === 'modpack') {
-		const { project_name, project_icon, project_id } = content
-		if (!project_name) return undefined
-		return {
-			name: project_name,
-			icon: project_icon ?? undefined,
-			onclick:
-				project_id !== project.project_id
-					? () => {
-							router.push(`/project/${project_id}`)
-						}
-					: undefined,
-			showCustomModpackTooltip: project_id === project.project_id,
-		}
-	}
-	return undefined
-}
-
-const contextMenuRef = ref(null)
-// @ts-expect-error - no event types
-const handleRightClick = (event, result) => {
-	// @ts-ignore
-	contextMenuRef.value?.showMenu(event, result, [{ name: 'open_link' }, { name: 'copy_link' }])
-}
-// @ts-expect-error - no event types
-const handleOptionsClick = (args) => {
-	switch (args.option) {
-		case 'open_link':
-			openUrl(`https://modrinth.com/${args.item.project_types?.[0] ?? 'project'}/${args.item.slug}`)
-			break
-		case 'copy_link':
-			navigator.clipboard.writeText(
-				`https://modrinth.com/${args.item.project_types?.[0] ?? 'project'}/${args.item.slug}`,
-			)
-			break
-	}
-}
-
 const installContext = computed(() => {
 	if (isServerContext.value && serverContextServerData.value) {
 		return {
@@ -707,6 +555,15 @@ const installContext = computed(() => {
 			backUrl: serverBackUrl.value,
 			backLabel: serverBackLabel.value,
 			heading: serverBrowseHeading.value,
+			queuedCount: queuedServerInstallCount.value,
+			selectedProjects: selectedServerInstallProjects.value,
+			isInstallingSelected: isInstallingQueuedServerInstalls.value,
+			installProgress: queuedInstallProgress.value,
+			clearQueued: clearQueuedServerInstalls,
+			clearSelected: clearQueuedServerInstalls,
+			onBack: flushQueuedServerInstalls,
+			discardSelectedAndBack: discardQueuedServerInstallsAndBack,
+			installSelected: installQueuedServerInstallsAndBack,
 		}
 	}
 	if (instance.value) {
@@ -716,13 +573,13 @@ const installContext = computed(() => {
 			gameVersion: instance.value.game_version,
 			iconSrc: instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null,
 			backUrl: `/instance/${encodeURIComponent(instance.value.path)}${isFromWorlds.value ? '/worlds' : ''}`,
-			backLabel: 'Back to instance',
+			backLabel: formatMessage(messages.backToInstance),
 			heading: formatMessage(
-				isFromWorlds.value ? messages.addServersToInstance : messages.installContentToInstance,
+				isFromWorlds.value ? messages.addServersToInstance : commonMessages.installingContentLabel,
 			),
 			warning:
 				isServerInstance.value && !isFromWorlds.value
-					? 'Adding content can break compatibility when joining the server. Any added content will also be lost when you update the server instance content.'
+					? formatMessage(messages.serverInstanceContentWarning)
 					: undefined,
 		}
 	}
@@ -741,71 +598,82 @@ function setProjectInstalling(projectId: string, installing: boolean) {
 	installingProjectIds.value = next
 }
 
+const serverInstallQueue = {
+	get: getQueuedServerInstallPlans,
+	set: setQueuedServerInstallPlans,
+}
+
+function getCurrentSelectedInstallPreferences(projectTypeValue: string) {
+	return getSelectedInstallPreferences({
+		contentType: projectTypeValue,
+		selectedFilters: searchState.currentFilters.value,
+		providedFilters: combinedProvidedFilters.value,
+		overriddenProvidedFilterTypes: searchState.overriddenProvidedFilterTypes.value,
+	})
+}
+
+function getServerInstallTargetPreferences(contentType: BrowseInstallContentType) {
+	return getTargetInstallPreferences(
+		{
+			gameVersion: serverContextServerData.value?.mc_version,
+			loader: serverContextServerData.value?.loader,
+		},
+		contentType,
+	)
+}
+
+function getInstanceInstallTargetPreferences(projectTypeValue: string) {
+	return getTargetInstallPreferences(
+		{
+			gameVersion: instance.value?.game_version,
+			loader: instance.value?.loader,
+		},
+		projectTypeValue,
+	)
+}
+
+async function getInstallProjectVersions(projectId: string) {
+	const project = await get_project(projectId, 'must_revalidate')
+	return (await get_version_many(
+		project.versions,
+		'must_revalidate',
+	)) as Labrinth.Versions.v2.Version[]
+}
+
+async function chooseInstanceInstallVersion(
+	project: Labrinth.Search.v2.ResultSearchProject & Labrinth.Search.v3.ResultSearchProject,
+	projectTypeValue: string,
+) {
+	const targetInstance = instance.value
+	if (!targetInstance) {
+		return { versionId: null as string | null }
+	}
+
+	const selectedPreferences = getCurrentSelectedInstallPreferences(projectTypeValue)
+	const targetPreferences = getInstanceInstallTargetPreferences(projectTypeValue)
+	if (!preferencesDiffer(selectedPreferences, targetPreferences)) {
+		return { versionId: null as string | null }
+	}
+
+	const selectedVersion = getLatestMatchingInstallVersion(
+		await getInstallProjectVersions(project.project_id),
+		selectedPreferences,
+		projectTypeValue,
+	)
+
+	if (!selectedVersion) {
+		return { versionId: null as string | null }
+	}
+
+	return { versionId: selectedVersion.id }
+}
+
 function getCardActions(
 	result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
 	currentProjectType: string,
 ): CardAction[] {
 	if (currentProjectType === 'server') {
-		const serverResult = result as Labrinth.Search.v3.ResultSearchProject
-		const isInstalled = allInstalledIds.value.has(serverResult.project_id)
-
-		if (isFromWorlds.value && instance.value) {
-			return [
-				{
-					key: 'add-to-instance',
-					label: formatMessage(isInstalled ? messages.added : messages.addToInstance),
-					icon: isInstalled ? CheckIcon : PlusIcon,
-					disabled: isInstalled,
-					color: 'brand',
-					type: 'outlined',
-					onClick: () => handleAddServerToInstance(serverResult),
-				},
-			]
-		}
-
-		const actions: CardAction[] = []
-
-		actions.push({
-			key: 'add',
-			label: '',
-			icon: isInstalled ? CheckIcon : PlusIcon,
-			disabled: isInstalled,
-			circular: true,
-			tooltip: isInstalled
-				? formatMessage(messages.alreadyAdded)
-				: instance.value
-					? formatMessage(messages.addToInstanceName, { instanceName: instance.value.name })
-					: formatMessage(messages.addServerToInstance),
-			onClick: () => handleAddServerToInstance(serverResult),
-		})
-
-		if (runningServerProjects.value[serverResult.project_id]) {
-			actions.push({
-				key: 'stop',
-				label: formatMessage(commonMessages.stopButton),
-				icon: StopCircleIcon,
-				color: 'red',
-				type: 'outlined',
-				onClick: () => handleStopServerProject(serverResult.project_id),
-			})
-		} else {
-			const isInstalling = (installingServerProjects.value as string[]).includes(
-				serverResult.project_id,
-			)
-			actions.push({
-				key: 'play',
-				label: formatMessage(
-					isInstalling ? commonMessages.installingLabel : commonMessages.playButton,
-				),
-				icon: PlayIcon,
-				disabled: isInstalling,
-				color: 'brand',
-				type: 'outlined',
-				onClick: () => handlePlayServerProject(serverResult.project_id),
-			})
-		}
-
-		return actions
+		return getServerCardActions(result as Labrinth.Search.v3.ResultSearchProject)
 	}
 
 	// Non-server project actions
@@ -817,39 +685,84 @@ function getCardActions(
 	const isInstalled =
 		projectResult.installed ||
 		allInstalledIds.value.has(projectResult.project_id || '') ||
-		serverContentProjectIds.value.has(projectResult.project_id || '')
+		serverContentProjectIds.value.has(projectResult.project_id || '') ||
+		serverContextServerData.value?.upstream?.project_id === projectResult.project_id
 	const isInstalling = installingProjectIds.value.has(projectResult.project_id)
 
 	if (
 		isServerContext.value &&
 		['modpack', 'mod', 'plugin', 'datapack'].includes(currentProjectType)
 	) {
+		const isQueued = queuedServerInstallProjectIds.value.has(projectResult.project_id)
+		const isInstallingSelection = isInstallingQueuedServerInstalls.value
+		const validatingInstall =
+			isInstalling && currentProjectType !== 'modpack' && !isInstallingSelection
+		const installLabel = isInstalled
+			? commonMessages.installedLabel
+			: isQueued
+				? isInstalling || isInstallingSelection
+					? validatingInstall
+						? commonMessages.validatingLabel
+						: messages.installingToServer
+					: commonMessages.selectedLabel
+				: isInstalling || isInstallingSelection
+					? validatingInstall
+						? commonMessages.validatingLabel
+						: messages.installingToServer
+					: commonMessages.installButton
 		return [
 			{
 				key: 'install',
-				label: formatMessage(
-					isInstalling
-						? messages.installingToServer
-						: isInstalled
-							? messages.installedToServer
-							: messages.installToServer,
-				),
-				icon: isInstalled ? CheckIcon : PlusIcon,
-				iconClass: isInstalling ? 'animate-spin' : undefined,
-				disabled: isInstalled || isInstalling,
-				color: 'brand',
+				label: formatMessage(installLabel),
+				icon:
+					isInstalling || isInstallingSelection
+						? SpinnerIcon
+						: isQueued || isInstalled
+							? CheckIcon
+							: PlusIcon,
+				iconClass: isInstalling || isInstallingSelection ? 'animate-spin' : undefined,
+				disabled: isInstalled || isInstalling || isInstallingSelection,
+				color: isQueued && !isInstalling && !isInstallingSelection ? 'green' : 'brand',
 				type: 'outlined',
 				onClick: async () => {
-					setProjectInstalling(projectResult.project_id, true)
+					if (isQueued) {
+						removeQueuedServerInstall(projectResult.project_id)
+						return
+					}
+
+					const contentType = currentProjectType as BrowseInstallContentType
+					const isModpack = contentType === 'modpack'
+					const shouldShowInstalling = isModpack || !isQueued
+					if (shouldShowInstalling) {
+						setProjectInstalling(projectResult.project_id, true)
+					}
 					try {
-						const didInstall = await installProjectToServer(projectResult)
-						if (didInstall !== false) {
-							onSearchResultInstalled(projectResult.project_id)
-						}
+						await requestInstall({
+							project: projectResult,
+							contentType,
+							mode: isModpack ? 'immediate' : 'queue',
+							selectedFilters: isModpack ? [] : searchState.currentFilters.value,
+							providedFilters: isModpack ? [] : combinedProvidedFilters.value,
+							overriddenProvidedFilterTypes: isModpack
+								? []
+								: searchState.overriddenProvidedFilterTypes.value,
+							targetPreferences: getServerInstallTargetPreferences(contentType),
+							getProjectVersions: getInstallProjectVersions,
+							queue: serverInstallQueue,
+							install: (plan) =>
+								openServerModpackInstallFlow({
+									projectId: plan.projectId,
+									versionId: plan.versionId,
+									name: plan.project.name,
+									iconUrl: plan.project.icon_url ?? undefined,
+								}),
+						})
 					} catch (err) {
 						handleError(err as Error)
 					} finally {
-						setProjectInstalling(projectResult.project_id, false)
+						if (shouldShowInstalling) {
+							setProjectInstalling(projectResult.project_id, false)
+						}
 					}
 				},
 			},
@@ -862,13 +775,15 @@ function getCardActions(
 	return [
 		{
 			key: 'install',
-			label: isInstalling
-				? 'Installing'
-				: isInstalled
-					? 'Installed'
-					: shouldUseInstallIcon
-						? 'Install'
-						: 'Add to an instance',
+			label: formatMessage(
+				isInstalling
+					? messages.installingToServer
+					: isInstalled
+						? commonMessages.installedLabel
+						: shouldUseInstallIcon
+							? commonMessages.installButton
+							: messages.addToAnInstance,
+			),
 			icon: isInstalling ? SpinnerIcon : isInstalled ? CheckIcon : PlusIcon,
 			iconClass: isInstalling ? 'animate-spin' : undefined,
 			disabled: isInstalled || isInstalling,
@@ -876,28 +791,39 @@ function getCardActions(
 			type: 'outlined',
 			onClick: async () => {
 				setProjectInstalling(projectResult.project_id, true)
-				await installVersion(
-					projectResult.project_id,
-					null,
-					instance.value ? instance.value.path : null,
-					'SearchCard',
-					(versionId) => {
+				try {
+					const selectedInstall = instance.value
+						? await chooseInstanceInstallVersion(projectResult, currentProjectType)
+						: { versionId: null as string | null }
+					if (selectedInstall === null) {
 						setProjectInstalling(projectResult.project_id, false)
-						if (versionId) {
-							onSearchResultInstalled(projectResult.project_id)
-						}
-					},
-					(profile) => {
-						router.push(`/instance/${profile}`)
-					},
-					{
-						preferredLoader: instance.value?.loader ?? undefined,
-						preferredGameVersion: instance.value?.game_version ?? undefined,
-					},
-				).catch((err) => {
+						return
+					}
+					const selectedPreferences = getCurrentSelectedInstallPreferences(currentProjectType)
+					await installVersion(
+						projectResult.project_id,
+						selectedInstall.versionId,
+						instance.value ? instance.value.path : null,
+						'SearchCard',
+						(versionId) => {
+							setProjectInstalling(projectResult.project_id, false)
+							if (versionId) {
+								onSearchResultInstalled(projectResult.project_id)
+							}
+						},
+						(profile) => {
+							router.push(`/instance/${profile}`)
+						},
+						{
+							preferredLoader: instance.value?.loader ?? selectedPreferences.loaders?.[0],
+							preferredGameVersion:
+								instance.value?.game_version ?? selectedPreferences.gameVersions?.[0],
+						},
+					)
+				} catch (err) {
 					setProjectInstalling(projectResult.project_id, false)
 					handleError(err)
-				})
+				}
 			},
 		},
 	]
@@ -937,9 +863,7 @@ async function search(requestParams: string) {
 
 	if (isServer) {
 		const hits = rawResults.result.hits ?? []
-		lastServerHits.value = hits
-		pingServerHits(hits)
-		checkServerRunningStates(hits)
+		updateServerHits(hits)
 		return {
 			projectHits: [],
 			serverHits: hits,
@@ -1024,6 +948,12 @@ watch(
 	{ deep: true },
 )
 
+watch(queuedServerInstallCount, (count) => {
+	if (count === 0) {
+		hideSelectedServerInstalls.value = false
+	}
+})
+
 if (instance.value?.game_version) {
 	const gv = instance.value.game_version
 	const alreadyHasGv = searchState.serverCurrentFilters.value.some(
@@ -1036,16 +966,26 @@ if (instance.value?.game_version) {
 
 await searchState.refreshSearch()
 
+function getProjectBrowseQuery() {
+	if (!installContext.value) return undefined
+	return {
+		...route.query,
+		b: route.fullPath,
+	}
+}
+
 provideBrowseManager({
 	tags,
 	projectType,
 	...searchState,
 	getProjectLink: (result: Labrinth.Search.v2.ResultSearchProject) => ({
 		path: `/project/${result.project_id ?? result.slug}`,
-		query: instance.value ? { i: instance.value.path } : undefined,
+		query: getProjectBrowseQuery(),
+	}),
+	getServerProjectLink: (result: Labrinth.Search.v3.ResultSearchProject) => ({
+		path: `/project/${result.slug ?? result.project_id}`,
+		query: getProjectBrowseQuery(),
 	}),
-	getServerProjectLink: (result: Labrinth.Search.v3.ResultSearchProject) =>
-		`/project/${result.slug ?? result.project_id}`,
 	selectableProjectTypes,
 	showProjectTypeTabs: computed(() => !isServerContext.value),
 	variant: 'app',
@@ -1068,8 +1008,18 @@ provideBrowseManager({
 		() => (isServerContext.value && projectType.value !== 'modpack') || !!instance.value,
 	),
 	hideInstalledLabel: computed(() =>
-		formatMessage(isFromWorlds.value ? messages.hideAddedServers : messages.hideInstalledContent),
+		formatMessage(
+			isFromWorlds.value ? messages.hideAddedServers : commonMessages.hideInstalledContentLabel,
+		),
 	),
+	hideSelected: hideSelectedServerInstalls,
+	showHideSelected: computed(
+		() =>
+			isServerContext.value &&
+			projectType.value !== 'modpack' &&
+			queuedServerInstallCount.value > 0,
+	),
+	hideSelectedLabel: computed(() => formatMessage(commonMessages.hideSelectedContentLabel)),
 	onInstalled: onSearchResultInstalled,
 	serverPings,
 	getServerModpackContent,
@@ -1084,8 +1034,12 @@ provideBrowseManager({
 		<BrowsePageLayout>
 			<template #after>
 				<ContextMenu ref="contextMenuRef" @option-clicked="handleOptionsClick">
-					<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
-					<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
+					<template #open_link>
+						<GlobeIcon /> {{ formatMessage(commonMessages.openInModrinthButton) }} <ExternalIcon />
+					</template>
+					<template #copy_link>
+						<ClipboardCopyIcon /> {{ formatMessage(commonMessages.copyLinkButton) }}
+					</template>
 				</ContextMenu>
 			</template>
 		</BrowsePageLayout>

apps/app-frontend/src/pages/project/Index.vue

@@ -45,7 +45,13 @@
 			/>
 		</Teleport>
 		<div class="flex flex-col gap-4 p-6">
-			<InstanceIndicator v-if="instance" :instance="instance" />
+			<div
+				v-if="projectInstallContext"
+				class="sticky top-0 z-20 -mx-6 -mt-6 rounded-tl-[--radius-xl] border-0 border-b border-solid bg-surface-1 p-3 border-surface-5"
+			>
+				<BrowseInstallHeader :install-context="projectInstallContext" />
+			</div>
+			<InstanceIndicator v-if="instance && !projectInstallContext" :instance="instance" />
 			<template v-if="data">
 				<Teleport
 					v-if="themeStore.featureFlags.project_background"
@@ -64,7 +70,7 @@
 						<ButtonStyled v-if="serverPlaying" size="large" color="red">
 							<button @click="handleStopServer">
 								<StopCircleIcon />
-								Stop
+								{{ formatMessage(commonMessages.stopButton) }}
 							</button>
 						</ButtonStyled>
 						<ButtonStyled v-else size="large" color="brand">
@@ -73,11 +79,18 @@
 								@click="handleClickPlay"
 							>
 								<PlayIcon />
-								{{ data && installingServerProjects.includes(data.id) ? 'Installing...' : 'Play' }}
+								{{
+									data && installingServerProjects.includes(data.id)
+										? formatMessage(commonMessages.installingLabel)
+										: formatMessage(commonMessages.playButton)
+								}}
 							</button>
 						</ButtonStyled>
 						<ButtonStyled size="large" circular>
-							<button v-tooltip="'Add server to instance'" @click="handleAddServerToInstance">
+							<button
+								v-tooltip="formatMessage(commonMessages.addServerToInstanceButton)"
+								@click="handleAddServerToInstance"
+							>
 								<PlusIcon />
 							</button>
 						</ButtonStyled>
@@ -111,13 +124,17 @@
 					<template v-else #actions>
 						<ButtonStyled size="large" color="brand">
 							<button
-								v-tooltip="installed ? `This project is already installed` : null"
-								:disabled="installed || installing"
+								v-tooltip="installButtonTooltip"
+								:disabled="installButtonDisabled"
 								@click="install(null)"
 							>
-								<DownloadIcon v-if="!installed && !installing" />
-								<CheckIcon v-else-if="installed" />
-								{{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
+								<SpinnerIcon
+									v-if="installButtonLoading && !installButtonInstalled"
+									class="animate-spin"
+								/>
+								<DownloadIcon v-else-if="!installButtonInstalled && !serverProjectSelected" />
+								<CheckIcon v-else />
+								{{ installButtonLabel }}
 							</button>
 						</ButtonStyled>
 						<ButtonStyled size="large" circular type="transparent">
@@ -166,7 +183,7 @@
 					:links="[
 						{
 							label: 'Description',
-							href: `/project/${$route.params.id}`,
+							href: projectDescriptionHref,
 						},
 						{
 							label: 'Versions',
@@ -176,7 +193,7 @@
 						},
 						{
 							label: 'Gallery',
-							href: `/project/${$route.params.id}/gallery`,
+							href: projectGalleryHref,
 							shown: data.gallery.length > 0,
 						},
 					]"
@@ -195,11 +212,39 @@
 			</template>
 			<template v-else> Project data couldn't not be loaded. </template>
 		</div>
+		<SelectedProjectsFloatingBar
+			v-if="projectInstallContext"
+			:install-context="projectInstallContext"
+		/>
 		<ContextMenu ref="options" @option-clicked="handleOptionsClick">
-			<template #install> <DownloadIcon /> Install </template>
-			<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
-			<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
+			<template #install>
+				<DownloadIcon /> {{ formatMessage(commonMessages.installButton) }}
+			</template>
+			<template #open_link>
+				<GlobeIcon /> {{ formatMessage(commonMessages.openInModrinthButton) }} <ExternalIcon />
+			</template>
+			<template #copy_link>
+				<ClipboardCopyIcon /> {{ formatMessage(commonMessages.copyLinkButton) }}
+			</template>
 		</ContextMenu>
+		<CreationFlowModal
+			v-if="serverInstallContent.isServerContext.value && data?.project_type === 'modpack'"
+			ref="serverSetupModalRef"
+			:type="
+				serverInstallContent.serverFlowFrom.value === 'reset-server'
+					? 'reset-server'
+					: 'server-onboarding'
+			"
+			:available-loaders="['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']"
+			:show-snapshot-toggle="true"
+			:on-back="serverInstallContent.onServerFlowBack"
+			:search-modpacks="serverInstallContent.searchServerModpacks"
+			:get-project-versions="serverInstallContent.getServerProjectVersions"
+			:get-loader-manifest="getLoaderManifest"
+			@hide="() => {}"
+			@browse-modpacks="() => {}"
+			@create="serverInstallContent.handleServerModpackFlowCreate"
+		/>
 	</div>
 </template>
 
@@ -216,10 +261,16 @@ import {
 	PlayIcon,
 	PlusIcon,
 	ReportIcon,
+	SpinnerIcon,
 	StopCircleIcon,
 } from '@modrinth/assets'
 import {
+	BrowseInstallHeader,
 	ButtonStyled,
+	commonMessages,
+	CreationFlowModal,
+	defineMessages,
+	getTargetInstallPreferences,
 	injectNotificationManager,
 	NavTabs,
 	OverflowMenu,
@@ -231,7 +282,11 @@ import {
 	ProjectSidebarLinks,
 	ProjectSidebarServerInfo,
 	ProjectSidebarTags,
+	requestInstall,
+	SelectedProjectsFloatingBar,
+	useVIntl,
 } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -249,6 +304,7 @@ import {
 	get_version_many,
 } from '@/helpers/cache.js'
 import { process_listener } from '@/helpers/events'
+import { get_loader_versions as getLoaderManifest } from '@/helpers/metadata'
 import { get_by_profile_path } from '@/helpers/process'
 import {
 	get as getInstance,
@@ -260,6 +316,7 @@ import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
 import { getServerLatency } from '@/helpers/worlds'
 import { injectContentInstall } from '@/providers/content-install'
 import { injectServerInstall } from '@/providers/server-install'
+import { createServerInstallContent } from '@/providers/setup/server-install-content'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { getServerAddress } from '@/store/install.js'
 import { useTheming } from '@/store/state.js'
@@ -272,6 +329,22 @@ const route = useRoute()
 const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
 const themeStore = useTheming()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	backToBrowse: {
+		id: 'app.project.install-context.back-to-browse',
+		defaultMessage: 'Back to browse',
+	},
+	installContentToInstance: {
+		id: 'app.project.install-context.install-content-to-instance',
+		defaultMessage: 'Install content to instance',
+	},
+	alreadyInstalled: {
+		id: 'app.project.install-button.already-installed',
+		defaultMessage: 'This project is already installed',
+	},
+})
 
 const { installingServerProjects, playServerProject, showAddServerToInstanceModal } =
 	injectServerInstall()
@@ -296,6 +369,11 @@ const serverPing = ref(undefined)
 const serverStatusOnline = ref(false)
 const serverInstancePath = ref(null)
 const serverPlaying = ref(false)
+const serverSetupModalRef = ref(null)
+const serverInstallContent = createServerInstallContent({ serverSetupModalRef })
+
+serverInstallContent.watchServerContextChanges()
+await serverInstallContent.initServerContext()
 
 const instanceFilters = computed(() => {
 	if (!instance.value) {
@@ -315,11 +393,9 @@ const instanceFilters = computed(() => {
 	return { l: loaders, g: instance.value.game_version }
 })
 
-const versionsHref = computed(() => {
-	const base = `/project/${route.params.id}/versions`
-	const filters = instanceFilters.value
+function buildProjectHref(path, extraQuery = {}) {
 	const params = new URLSearchParams()
-	for (const [key, val] of Object.entries(filters)) {
+	for (const [key, val] of Object.entries({ ...route.query, ...extraQuery })) {
 		if (Array.isArray(val)) {
 			for (const v of val) params.append(key, v)
 		} else if (val) {
@@ -327,7 +403,102 @@ const versionsHref = computed(() => {
 		}
 	}
 	const qs = params.toString()
-	return qs ? `${base}?${qs}` : base
+	return qs ? `${path}?${qs}` : path
+}
+
+const projectDescriptionHref = computed(() => buildProjectHref(`/project/${route.params.id}`))
+const versionsHref = computed(() =>
+	buildProjectHref(`/project/${route.params.id}/versions`, instanceFilters.value),
+)
+const projectGalleryHref = computed(() => buildProjectHref(`/project/${route.params.id}/gallery`))
+
+const projectBrowseBackUrl = computed(() => {
+	const browsePath = route.query.b
+	if (typeof browsePath === 'string' && browsePath.startsWith('/browse/')) return browsePath
+	const type = data.value?.project_type ? `${data.value.project_type}s` : 'mods'
+	return `/browse/${type}`
+})
+
+const projectInstallContext = computed(() => {
+	const serverData = serverInstallContent.serverContextServerData.value
+	if (serverData) {
+		return {
+			name: serverData.name,
+			loader: serverData.loader ?? '',
+			gameVersion: serverData.mc_version ?? '',
+			serverId: serverInstallContent.serverIdQuery.value,
+			upstream: serverData.upstream,
+			iconSrc: null,
+			isMedal: serverData.is_medal,
+			backUrl: projectBrowseBackUrl.value,
+			backLabel: formatMessage(messages.backToBrowse),
+			heading: serverInstallContent.serverBrowseHeading.value,
+			queuedCount: serverInstallContent.queuedServerInstallCount.value,
+			selectedProjects: serverInstallContent.selectedServerInstallProjects.value,
+			isInstallingSelected: serverInstallContent.isInstallingQueuedServerInstalls.value,
+			installProgress: serverInstallContent.queuedInstallProgress.value,
+			clearQueued: serverInstallContent.clearQueuedServerInstalls,
+			clearSelected: serverInstallContent.clearQueuedServerInstalls,
+			discardSelectedAndBack: serverInstallContent.discardQueuedServerInstallsAndBack,
+			installSelected: serverInstallContent.installQueuedServerInstallsAndBack,
+		}
+	}
+
+	if (instance.value) {
+		return {
+			name: instance.value.name,
+			loader: instance.value.loader,
+			gameVersion: instance.value.game_version,
+			iconSrc: instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null,
+			backUrl: projectBrowseBackUrl.value,
+			backLabel: formatMessage(messages.backToBrowse),
+			heading: formatMessage(messages.installContentToInstance),
+		}
+	}
+
+	return null
+})
+
+const serverProjectInstallContext = computed(
+	() =>
+		!!serverInstallContent.serverContextServerData.value &&
+		['modpack', 'mod', 'plugin', 'datapack'].includes(data.value?.project_type),
+)
+const serverProjectSelected = computed(
+	() => !!data.value && serverInstallContent.queuedServerInstallProjectIds.value.has(data.value.id),
+)
+const serverProjectInstalled = computed(
+	() =>
+		!!data.value &&
+		(serverInstallContent.serverContentProjectIds.value.has(data.value.id) ||
+			serverInstallContent.serverContextServerData.value?.upstream?.project_id === data.value.id),
+)
+const installButtonLoading = computed(
+	() => installing.value || serverInstallContent.isInstallingQueuedServerInstalls.value,
+)
+const installButtonValidating = computed(
+	() =>
+		serverProjectInstallContext.value &&
+		installing.value &&
+		data.value?.project_type !== 'modpack' &&
+		!serverInstallContent.isInstallingQueuedServerInstalls.value,
+)
+const installButtonInstalled = computed(() =>
+	serverProjectInstallContext.value ? serverProjectInstalled.value : installed.value,
+)
+const installButtonDisabled = computed(
+	() => installButtonInstalled.value || installButtonLoading.value,
+)
+const installButtonLabel = computed(() => {
+	if (installButtonInstalled.value) return formatMessage(commonMessages.installedLabel)
+	if (installButtonValidating.value) return formatMessage(commonMessages.validatingLabel)
+	if (installButtonLoading.value) return formatMessage(commonMessages.installingLabel)
+	if (serverProjectSelected.value) return formatMessage(commonMessages.selectedLabel)
+	return formatMessage(commonMessages.installButton)
+})
+const installButtonTooltip = computed(() => {
+	if (installButtonInstalled.value) return formatMessage(messages.alreadyInstalled)
+	return null
 })
 
 const [allLoaders, allGameVersions] = await Promise.all([
@@ -499,6 +670,55 @@ watch(
 )
 
 async function install(version) {
+	if (serverProjectInstallContext.value && data.value) {
+		if (serverProjectSelected.value) {
+			serverInstallContent.removeQueuedServerInstall(data.value.id)
+			return
+		}
+		if (installButtonDisabled.value) return
+
+		installing.value = true
+		try {
+			const contentType = data.value.project_type
+			await requestInstall({
+				project: {
+					...data.value,
+					project_id: data.value.id,
+					icon_url: data.value.icon_url,
+				},
+				contentType,
+				mode: contentType === 'modpack' ? 'immediate' : 'queue',
+				selectedFilters: [],
+				providedFilters: [],
+				overriddenProvidedFilterTypes: [],
+				targetPreferences: getTargetInstallPreferences(
+					{
+						gameVersion: serverInstallContent.serverContextServerData.value?.mc_version,
+						loader: serverInstallContent.serverContextServerData.value?.loader,
+					},
+					contentType,
+				),
+				getProjectVersions: async () => versions.value,
+				queue: {
+					get: serverInstallContent.getQueuedServerInstallPlans,
+					set: serverInstallContent.setQueuedServerInstallPlans,
+				},
+				install: (plan) =>
+					serverInstallContent.openServerModpackInstallFlow({
+						projectId: plan.projectId,
+						versionId: plan.versionId,
+						name: plan.project.title ?? plan.project.name ?? data.value.title,
+						iconUrl: plan.project.icon_url ?? undefined,
+					}),
+			})
+		} catch (err) {
+			handleError(err)
+		} finally {
+			installing.value = false
+		}
+		return
+	}
+
 	installing.value = true
 	await installVersion(
 		data.value.id,

apps/app-frontend/src/providers/setup/server-install-content.ts

@@ -1,22 +1,32 @@
-import type { Archon, Labrinth } from '@modrinth/api-client'
+import type { AbstractModrinthClient, Archon, Labrinth } from '@modrinth/api-client'
 import {
+	addPendingServerContentInstalls,
+	type BrowseInstallPlan,
+	type BrowseSelectedProject,
 	createContext,
 	type CreationFlowContextValue,
+	flushInstallQueue,
 	injectModrinthClient,
 	injectNotificationManager,
+	type PendingServerContentInstall,
+	type PendingServerContentInstallType,
+	readPendingServerContentInstalls,
+	removePendingServerContentInstall,
+	writePendingServerContentInstallBaseline,
 } from '@modrinth/ui'
 import { computed, type ComputedRef, nextTick, type Ref, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 type ServerFlowFrom = 'onboarding' | 'reset-server'
-type ServerInstallableType = 'modpack' | 'mod' | 'plugin' | 'datapack'
 
 type InstallableSearchResult = Labrinth.Search.v3.ResultSearchProject & {
+	title?: string
 	installing?: boolean
 	installed?: boolean
 }
+type PendingServerContentInstallInput = Omit<PendingServerContentInstall, 'createdAt'>
 
-interface ServerModpackSelectionRequest {
+export interface ServerModpackSelectionRequest {
 	projectId: string
 	versionId: string
 	name: string
@@ -40,9 +50,19 @@ export interface ServerInstallContentContext {
 	effectiveServerWorldId: ComputedRef<string | null>
 	serverContextServerData: Ref<Archon.Servers.v0.Server | null>
 	serverContentProjectIds: Ref<Set<string>>
+	queuedServerInstallProjectIds: ComputedRef<Set<string>>
+	queuedServerInstallCount: ComputedRef<number>
+	selectedServerInstallProjects: ComputedRef<BrowseSelectedProject[]>
+	isInstallingQueuedServerInstalls: Ref<boolean>
+	queuedInstallProgress: Ref<{ completed: number; total: number }>
 	serverBackUrl: ComputedRef<string>
 	serverBackLabel: ComputedRef<string>
 	serverBrowseHeading: ComputedRef<string>
+	clearQueuedServerInstalls: () => void
+	removeQueuedServerInstall: (projectId: string) => void
+	flushQueuedServerInstalls: () => Promise<boolean>
+	discardQueuedServerInstallsAndBack: () => Promise<void>
+	installQueuedServerInstallsAndBack: () => Promise<boolean>
 	initServerContext: () => Promise<void>
 	watchServerContextChanges: () => void
 	searchServerModpacks: (
@@ -51,7 +71,11 @@ export interface ServerInstallContentContext {
 	) => Promise<Labrinth.Projects.v2.SearchResult>
 	getServerProjectVersions: (projectId: string) => Promise<{ id: string }[]>
 	enforceSetupModpackRoute: (currentProjectType: string | undefined) => void
-	installProjectToServer: (project: InstallableSearchResult) => Promise<boolean>
+	getQueuedServerInstallPlans: () => Map<string, BrowseInstallPlan<InstallableSearchResult>>
+	setQueuedServerInstallPlans: (
+		plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
+	) => void
+	openServerModpackInstallFlow: (request: ServerModpackSelectionRequest) => Promise<void>
 	onServerFlowBack: () => void
 	handleServerModpackFlowCreate: (config: CreationFlowContextValue) => Promise<void>
 	markServerProjectInstalled: (id: string) => void
@@ -65,6 +89,145 @@ function readQueryString(value: unknown): string | null {
 	return typeof value === 'string' && value.length > 0 ? value : null
 }
 
+function getQueueStorageKey(serverId: string | null, worldId: string | null) {
+	if (!serverId || !worldId) return null
+	return `server-install-queue:${serverId}:${worldId}`
+}
+
+function readStoredQueue(serverId: string | null, worldId: string | null) {
+	const key = getQueueStorageKey(serverId, worldId)
+	if (!key) return new Map<string, BrowseInstallPlan<InstallableSearchResult>>()
+	try {
+		const raw = localStorage.getItem(key)
+		if (!raw) return new Map<string, BrowseInstallPlan<InstallableSearchResult>>()
+		return new Map<string, BrowseInstallPlan<InstallableSearchResult>>(JSON.parse(raw))
+	} catch {
+		return new Map<string, BrowseInstallPlan<InstallableSearchResult>>()
+	}
+}
+
+function writeStoredQueue(
+	serverId: string | null,
+	worldId: string | null,
+	plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
+) {
+	const key = getQueueStorageKey(serverId, worldId)
+	if (!key) return
+	if (plans.size === 0) {
+		localStorage.removeItem(key)
+		return
+	}
+	localStorage.setItem(key, JSON.stringify(Array.from(plans.entries())))
+}
+
+function getQueuedInstallOwnerFallback(project: InstallableSearchResult) {
+	if (project.organization) {
+		const ownerId = project.organization_id ?? project.organization
+		return {
+			id: ownerId,
+			name: project.organization,
+			type: 'organization' as const,
+			link: `https://modrinth.com/organization/${ownerId}`,
+		}
+	}
+
+	if (!project.author) return null
+
+	const ownerId = project.author_id ?? project.author
+	return {
+		id: ownerId,
+		name: project.author,
+		type: 'user' as const,
+		link: `https://modrinth.com/user/${ownerId}`,
+	}
+}
+
+async function getQueuedInstallOwner(
+	client: AbstractModrinthClient,
+	project: InstallableSearchResult,
+) {
+	const fallback = getQueuedInstallOwnerFallback(project)
+
+	try {
+		if (project.organization) {
+			const organization = await client.labrinth.projects_v3.getOrganization(project.project_id)
+			if (organization) {
+				return {
+					id: organization.id,
+					name: organization.name,
+					type: 'organization' as const,
+					avatar_url: organization.icon_url ?? undefined,
+					link: `https://modrinth.com/organization/${organization.slug}`,
+				}
+			}
+		}
+
+		const members = await client.labrinth.projects_v3.getMembers(project.project_id)
+		const owner =
+			members.find((member) => member.user.id === project.author_id)?.user ??
+			members.find((member) => member.is_owner || member.role === 'Owner')?.user ??
+			members[0]?.user
+
+		if (owner) {
+			return {
+				id: owner.id,
+				name: owner.username,
+				type: 'user' as const,
+				avatar_url: owner.avatar_url,
+				link: `https://modrinth.com/user/${owner.username}`,
+			}
+		}
+	} catch {
+		return fallback
+	}
+
+	return fallback
+}
+
+function getQueuedAddonInstallPlans(
+	plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
+) {
+	return Array.from(plans.values()).filter((plan) => plan.contentType !== 'modpack')
+}
+
+function getQueuedInstallPlaceholder(
+	plan: BrowseInstallPlan<InstallableSearchResult>,
+	owner: PendingServerContentInstallInput['owner'],
+): PendingServerContentInstallInput {
+	const project = plan.project as InstallableSearchResult & { slug?: string | null }
+	return {
+		projectId: plan.projectId,
+		versionId: plan.versionId,
+		contentType: plan.contentType as PendingServerContentInstallType,
+		title: project.title ?? project.name ?? 'Project',
+		versionName: plan.versionName ?? null,
+		versionNumber: plan.versionNumber ?? null,
+		fileName: plan.fileName ?? null,
+		owner,
+		slug: project.slug ?? plan.projectId,
+		iconUrl: project.icon_url ?? null,
+	}
+}
+
+function getQueuedInstallPlaceholderFallbacks(
+	plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
+) {
+	return getQueuedAddonInstallPlans(plans).map((plan) =>
+		getQueuedInstallPlaceholder(plan, getQueuedInstallOwnerFallback(plan.project)),
+	)
+}
+
+async function getQueuedInstallPlaceholders(
+	client: AbstractModrinthClient,
+	plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
+) {
+	return Promise.all(
+		getQueuedAddonInstallPlans(plans).map(async (plan) =>
+			getQueuedInstallPlaceholder(plan, await getQueuedInstallOwner(client, plan.project)),
+		),
+	)
+}
+
 export function createServerInstallContent(opts: {
 	serverSetupModalRef: Ref<ServerSetupModalHandle | null>
 }) {
@@ -72,7 +235,7 @@ export function createServerInstallContent(opts: {
 	const route = useRoute()
 	const router = useRouter()
 	const client = injectModrinthClient()
-	const { handleError } = injectNotificationManager()
+	const { addNotification, handleError } = injectNotificationManager()
 
 	const serverIdQuery = computed(() => readQueryString(route.query.sid))
 	const worldIdQuery = computed(() => readQueryString(route.query.wid))
@@ -90,8 +253,22 @@ export function createServerInstallContent(opts: {
 	const serverContextWorldId = ref<string | null>(worldIdQuery.value)
 	const serverContextServerData = ref<Archon.Servers.v0.Server | null>(null)
 	const serverContentProjectIds = ref<Set<string>>(new Set())
+	const serverContentInstallKeys = ref<Set<string>>(new Set())
+	const queuedServerInstalls = ref<Map<string, BrowseInstallPlan<InstallableSearchResult>>>(
+		new Map(),
+	)
+	const queuedServerInstallProjectIds = computed(() => new Set(queuedServerInstalls.value.keys()))
+	const queuedServerInstallCount = computed(() => queuedServerInstalls.value.size)
+	const selectedServerInstallProjects = computed<BrowseSelectedProject[]>(() =>
+		Array.from(queuedServerInstalls.value.values()).map((plan) => ({
+			id: plan.projectId,
+			name: plan.project.title ?? plan.project.name ?? 'Project',
+			iconUrl: plan.project.icon_url ?? null,
+		})),
+	)
+	const isInstallingQueuedServerInstalls = ref(false)
+	const queuedInstallProgress = ref({ completed: 0, total: 0 })
 	const effectiveServerWorldId = computed(() => worldIdQuery.value ?? serverContextWorldId.value)
-
 	const serverBackUrl = computed(() => {
 		const sid = serverIdQuery.value
 		if (!sid) return '/hosting/manage'
@@ -110,9 +287,9 @@ export function createServerInstallContent(opts: {
 	})
 	const serverBrowseHeading = computed(() => {
 		if (serverFlowFrom.value === 'reset-server') {
-			return 'Select modpack to install after reset'
+			return 'Selecting modpack to install after reset'
 		}
-		return 'Install content to server'
+		return 'Installing content'
 	})
 
 	async function resolveServerContextWorldId(serverId: string) {
@@ -134,7 +311,11 @@ export function createServerInstallContent(opts: {
 					.map((addon) => addon.project_id)
 					.filter((projectId): projectId is string => !!projectId),
 			)
+			const keys = new Set(
+				(content.addons ?? []).map((addon) => addon.project_id ?? addon.filename),
+			)
 			serverContentProjectIds.value = ids
+			serverContentInstallKeys.value = keys
 		} catch (err) {
 			handleError(err as Error)
 		}
@@ -159,6 +340,7 @@ export function createServerInstallContent(opts: {
 		}
 
 		if (resolvedWorldId) {
+			queuedServerInstalls.value = readStoredQueue(sid, resolvedWorldId)
 			await refreshServerInstalledContent(sid, resolvedWorldId)
 		}
 	}
@@ -168,11 +350,15 @@ export function createServerInstallContent(opts: {
 			if (!sid) {
 				serverContextServerData.value = null
 				serverContentProjectIds.value = new Set()
+				serverContentInstallKeys.value = new Set()
+				setQueuedServerInstallPlans(new Map())
 				return
 			}
 
 			if (sid !== prevSid) {
 				serverContentProjectIds.value = new Set()
+				serverContentInstallKeys.value = new Set()
+				queuedServerInstalls.value = readStoredQueue(sid, wid)
 				try {
 					serverContextServerData.value = await client.archon.servers_v0.get(sid)
 				} catch (err) {
@@ -180,28 +366,16 @@ export function createServerInstallContent(opts: {
 				}
 			}
 
+			if (wid !== prevWid) {
+				queuedServerInstalls.value = readStoredQueue(sid, wid)
+			}
+
 			if (wid && (sid !== prevSid || wid !== prevWid)) {
 				await refreshServerInstalledContent(sid, wid)
 			}
 		})
 	}
 
-	function normalizeLoader(loader: string) {
-		return loader.toLowerCase().replaceAll('_', '').replaceAll('-', '').replaceAll(' ', '')
-	}
-
-	function getCompatibleLoaders(loader: string) {
-		const normalized = normalizeLoader(loader)
-		if (!normalized) return new Set<string>()
-		if (normalized === 'paper' || normalized === 'purpur' || normalized === 'spigot') {
-			return new Set(['paper', 'purpur', 'spigot', 'bukkit'])
-		}
-		if (normalized === 'neoforge' || normalized === 'neo') {
-			return new Set(['neoforge', 'neo'])
-		}
-		return new Set([normalized])
-	}
-
 	function enforceSetupModpackRoute(currentProjectType: string | undefined) {
 		if (!isSetupServerContext.value || currentProjectType === 'modpack') return
 		router.replace({
@@ -248,82 +422,132 @@ export function createServerInstallContent(opts: {
 		ctx.modal.value?.setStage('final-config')
 	}
 
-	function getCurrentServerInstallType(): ServerInstallableType {
-		const raw = Array.isArray(route.params.projectType)
-			? route.params.projectType[0]
-			: route.params.projectType
-		if (raw === 'modpack' || raw === 'mod' || raw === 'plugin' || raw === 'datapack') {
-			return raw
-		}
-		throw new Error('This content type cannot be installed to a server from browse.')
+	function clearQueuedServerInstalls() {
+		setQueuedServerInstallPlans(new Map())
 	}
 
-	async function installProjectToServer(project: InstallableSearchResult) {
-		const contentType = getCurrentServerInstallType()
-		const sid = serverIdQuery.value
-		const wid = effectiveServerWorldId.value
-		if (!sid || !wid) {
-			throw new Error('No server world is available for install.')
-		}
+	function removeQueuedServerInstall(projectId: string) {
+		const nextPlans = new Map(queuedServerInstalls.value)
+		nextPlans.delete(projectId)
+		setQueuedServerInstallPlans(nextPlans)
+	}
 
-		if (contentType === 'modpack') {
-			const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
-				include_changelog: false,
-			})
-			const versionId = versions[0]?.id ?? project.version_id
-			if (!versionId) {
-				throw new Error('No version found for this modpack')
-			}
+	async function flushQueuedServerInstalls(
+		serverId: string | null = serverIdQuery.value,
+		worldId: string | null = effectiveServerWorldId.value,
+	) {
+		if (queuedServerInstalls.value.size === 0) return true
+		if (isInstallingQueuedServerInstalls.value) return false
 
-			await openServerModpackInstallFlow({
-				projectId: project.project_id,
-				versionId,
-				name: project.name,
-				iconUrl: project.icon_url ?? undefined,
-			})
+		if (!serverId || !worldId) {
+			handleError(new Error('No server world is available for install.'))
 			return false
 		}
 
-		const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
-			include_changelog: false,
-		})
-		const serverLoader = (serverContextServerData.value?.loader ?? '').toLowerCase()
-		const serverGameVersion = (serverContextServerData.value?.mc_version ?? '').trim()
-		const compatibleLoaders = getCompatibleLoaders(serverLoader)
-
-		const hasGameVersionMatch = (version: Labrinth.Versions.v2.Version) =>
-			!serverGameVersion || version.game_versions.includes(serverGameVersion)
-		const hasLoaderMatch = (version: Labrinth.Versions.v2.Version) => {
-			if (contentType === 'datapack') return true
-			if (compatibleLoaders.size === 0) return true
-			return version.loaders.some((loader) => compatibleLoaders.has(normalizeLoader(loader)))
+		const installedProjectIds = new Set<string>()
+		isInstallingQueuedServerInstalls.value = true
+		queuedInstallProgress.value = {
+			completed: 0,
+			total: queuedServerInstalls.value.size,
 		}
 
-		let matchingVersion = versions.find(
-			(version) => hasGameVersionMatch(version) && hasLoaderMatch(version),
-		)
-		if (!matchingVersion) {
-			matchingVersion = versions.find((version) => hasLoaderMatch(version))
+		try {
+			const result = await flushInstallQueue({
+				queue: {
+					get: () => queuedServerInstalls.value,
+					set: (plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>) => {
+						queuedServerInstalls.value = plans
+						writeStoredQueue(serverId, worldId, plans)
+					},
+				},
+				install: async (plan) => {
+					await client.archon.content_v1.addAddon(serverId, worldId, {
+						project_id: plan.projectId,
+						version_id: plan.versionId,
+					})
+					installedProjectIds.add(plan.projectId)
+				},
+				onError: (error, plan) => {
+					removePendingServerContentInstall(serverId, worldId, plan.projectId)
+					handleError(error as Error)
+				},
+				onProgress: (completed, total) => {
+					queuedInstallProgress.value = { completed, total }
+				},
+			})
+
+			if (installedProjectIds.size > 0) {
+				serverContentProjectIds.value = new Set([
+					...serverContentProjectIds.value,
+					...installedProjectIds,
+				])
+				serverContentInstallKeys.value = new Set([
+					...serverContentInstallKeys.value,
+					...installedProjectIds,
+				])
+			}
+
+			return result.ok
+		} finally {
+			isInstallingQueuedServerInstalls.value = false
+			queuedInstallProgress.value = { completed: 0, total: 0 }
 		}
-		if (!matchingVersion) {
-			matchingVersion = versions.find((version) => hasGameVersionMatch(version))
+	}
+
+	async function discardQueuedServerInstallsAndBack() {
+		clearQueuedServerInstalls()
+		await router.push(serverBackUrl.value)
+	}
+
+	async function installQueuedServerInstallsAndBack() {
+		const sid = serverIdQuery.value
+		const wid = effectiveServerWorldId.value
+		const backUrl = serverBackUrl.value
+		const plans = new Map(queuedServerInstalls.value)
+
+		if (sid && wid) {
+			writePendingServerContentInstallBaseline(sid, wid, serverContentInstallKeys.value)
+			addPendingServerContentInstalls(sid, wid, getQueuedInstallPlaceholderFallbacks(plans))
+			void getQueuedInstallPlaceholders(client, plans)
+				.then((items) => {
+					const pendingProjectIds = new Set(
+						readPendingServerContentInstalls(sid, wid).map((item) => item.projectId),
+					)
+					addPendingServerContentInstalls(
+						sid,
+						wid,
+						items.filter((item) => pendingProjectIds.has(item.projectId)),
+					)
+				})
+				.catch((err) => handleError(err as Error))
 		}
-		if (!matchingVersion) {
-			matchingVersion = versions[0]
-		}
-		if (!matchingVersion) {
-			throw new Error('No installable version was found for this project.')
+		await router.push(backUrl)
+
+		const ok = await flushQueuedServerInstalls(sid, wid)
+		if (!ok) {
+			queuedServerInstalls.value = new Map()
+			writeStoredQueue(sid, wid, new Map())
+			addNotification({
+				type: 'error',
+				title: 'Some projects failed to install',
+				text: 'Failed projects were not added. You can try installing them again.',
+			})
 		}
 
-		await client.archon.content_v1.addAddon(sid, wid, {
-			project_id: matchingVersion.project_id,
-			version_id: matchingVersion.id,
-		})
-
-		serverContentProjectIds.value = new Set([...serverContentProjectIds.value, project.project_id])
 		return true
 	}
 
+	function getQueuedServerInstallPlans() {
+		return queuedServerInstalls.value
+	}
+
+	function setQueuedServerInstallPlans(
+		plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
+	) {
+		queuedServerInstalls.value = plans
+		writeStoredQueue(serverIdQuery.value, effectiveServerWorldId.value, plans)
+	}
+
 	function onServerFlowBack() {
 		serverSetupModalRef.value?.hide()
 	}
@@ -377,15 +601,27 @@ export function createServerInstallContent(opts: {
 		effectiveServerWorldId,
 		serverContextServerData,
 		serverContentProjectIds,
+		queuedServerInstallProjectIds,
+		queuedServerInstallCount,
+		selectedServerInstallProjects,
+		isInstallingQueuedServerInstalls,
+		queuedInstallProgress,
 		serverBackUrl,
 		serverBackLabel,
 		serverBrowseHeading,
+		clearQueuedServerInstalls,
+		removeQueuedServerInstall,
+		flushQueuedServerInstalls,
+		discardQueuedServerInstallsAndBack,
+		installQueuedServerInstallsAndBack,
 		initServerContext,
 		watchServerContextChanges,
 		searchServerModpacks,
 		getServerProjectVersions,
 		enforceSetupModpackRoute,
-		installProjectToServer,
+		getQueuedServerInstallPlans,
+		setQueuedServerInstallPlans,
+		openServerModpackInstallFlow,
 		onServerFlowBack,
 		handleServerModpackFlowCreate,
 		markServerProjectInstalled,

apps/app/src/api/ads.rs

@@ -1,4 +1,6 @@
 use std::collections::HashSet;
+use std::sync::Arc;
+use std::sync::atomic::{AtomicBool, Ordering};
 use std::time::{Duration, Instant};
 use tauri::plugin::TauriPlugin;
 use tauri::{Manager, PhysicalPosition, PhysicalSize, Runtime};
@@ -14,6 +16,148 @@ pub struct AdsState {
 }
 
 const AD_LINK: &str = "https://modrinth.com/wrapper/app-ads-cookie";
+#[cfg(not(target_os = "linux"))]
+const ADS_USER_AGENT: &str = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36";
+
+#[cfg(windows)]
+fn ads_user_agent_override_params() -> String {
+    serde_json::json!({
+        "userAgent": ADS_USER_AGENT,
+        "platform": "Win32",
+        "userAgentMetadata": {
+            "brands": [
+                { "brand": "Chromium", "version": "128" },
+                { "brand": "Google Chrome", "version": "128" },
+                { "brand": "Not=A?Brand", "version": "99" },
+            ],
+            "fullVersion": "128.0.0.0",
+            "fullVersionList": [
+                { "brand": "Chromium", "version": "128.0.0.0" },
+                { "brand": "Google Chrome", "version": "128.0.0.0" },
+                { "brand": "Not=A?Brand", "version": "99.0.0.0" },
+            ],
+            "platform": "Windows",
+            "platformVersion": "10.0.0",
+            "architecture": "x86",
+            "bitness": "64",
+            "model": "",
+            "mobile": false,
+        },
+    })
+    .to_string()
+}
+
+#[cfg(windows)]
+fn configure_ads_cookie_settings(
+    core_webview2: &webview2_com::Microsoft::Web::WebView2::Win32::ICoreWebView2,
+) {
+    use webview2_com::Microsoft::Web::WebView2::Win32::{
+        COREWEBVIEW2_TRACKING_PREVENTION_LEVEL_NONE, ICoreWebView2,
+        ICoreWebView2_13, ICoreWebView2Profile3,
+    };
+    use windows_core::Interface;
+
+    match core_webview2
+        .cast::<ICoreWebView2_13>()
+        .and_then(|core_webview2| unsafe { core_webview2.Profile() })
+        .and_then(|profile| profile.cast::<ICoreWebView2Profile3>())
+    {
+        Ok(profile) => {
+            if let Err(error) = unsafe {
+                profile.SetPreferredTrackingPreventionLevel(
+                    COREWEBVIEW2_TRACKING_PREVENTION_LEVEL_NONE,
+                )
+            } {
+                tracing::warn!(
+                    ?error,
+                    "Failed to disable ads WebView2 tracking prevention"
+                );
+            }
+        }
+        Err(error) => {
+            tracing::warn!(
+                ?error,
+                "Failed to access ads WebView2 profile tracking prevention settings"
+            );
+        }
+    }
+}
+
+fn set_webview_visible<R: Runtime>(
+    webview: &tauri::Webview<R>,
+    _visible: bool,
+) {
+    webview
+        .with_webview(
+            #[allow(unused_variables)]
+            move |wv| {
+                #[cfg(windows)]
+                {
+                    let controller = wv.controller();
+                    unsafe { controller.SetIsVisible(_visible) }.ok();
+                }
+            },
+        )
+        .ok();
+}
+
+fn set_webview_visible_for_window<R: Runtime>(
+    app: &tauri::AppHandle<R>,
+    webview: &tauri::Webview<R>,
+    visible: bool,
+) {
+    let is_minimized = app
+        .get_window("main")
+        .and_then(|window| window.is_minimized().ok())
+        .unwrap_or(false);
+
+    set_webview_visible(webview, visible && !is_minimized);
+}
+
+fn sync_webview_visibility_for_main_window<R: Runtime>(
+    app: &tauri::AppHandle<R>,
+    main_window: &tauri::Window<R>,
+    was_minimized: &AtomicBool,
+) {
+    let is_minimized = main_window.is_minimized().unwrap_or(false);
+    let was = was_minimized.load(Ordering::SeqCst);
+
+    if is_minimized == was {
+        return;
+    }
+
+    was_minimized.store(is_minimized, Ordering::SeqCst);
+
+    let ads_visible = if is_minimized {
+        false
+    } else {
+        match app.state::<RwLock<AdsState>>().try_read() {
+            Ok(state) => state.shown && !state.modal_shown,
+            Err(_) => false,
+        }
+    };
+
+    let mut webviews = Vec::new();
+    let mut seen_webviews = HashSet::new();
+
+    for webview in main_window.webviews() {
+        seen_webviews.insert(webview.label().to_string());
+        webviews.push(webview);
+    }
+
+    for webview in app.webviews().into_values() {
+        if seen_webviews.insert(webview.label().to_string()) {
+            webviews.push(webview);
+        }
+    }
+
+    for webview in webviews {
+        let visible =
+            !is_minimized && (webview.label() != "ads-window" || ads_visible);
+
+        set_webview_visible(&webview, visible);
+    }
+}
 
 pub fn init<R: Runtime>() -> TauriPlugin<R> {
     tauri::plugin::Builder::<R>::new("ads")
@@ -30,10 +174,11 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
             // visible when we refresh, the Aditude wrapper will not make any ad requests
             // unless Chromium reports the page as visible. The refresh does not reset the
             // visibility state.
-            let app = app.clone();
+            let refresh_app = app.clone();
             tauri::async_runtime::spawn(async move {
                 loop {
-                    if let Some(webview) = app.webviews().get_mut("ads-window")
+                    if let Some(webview) =
+                        refresh_app.webviews().get_mut("ads-window")
                     {
                         let _ = webview.navigate(AD_LINK.parse().unwrap());
                     }
@@ -43,6 +188,34 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
                 }
             });
 
+            if let Some(main_window) = app.get_window("main") {
+                let app_handle = app.clone();
+                let event_window = main_window.clone();
+                let was_minimized = Arc::new(AtomicBool::new(false));
+
+                main_window.on_window_event(move |_| {
+                    sync_webview_visibility_for_main_window(
+                        &app_handle,
+                        &event_window,
+                        &was_minimized,
+                    );
+
+                    let delayed_app_handle = app_handle.clone();
+                    let delayed_event_window = event_window.clone();
+                    let delayed_was_minimized = was_minimized.clone();
+
+                    tauri::async_runtime::spawn(async move {
+                        tokio::time::sleep(Duration::from_millis(100)).await;
+
+                        sync_webview_visibility_for_main_window(
+                            &delayed_app_handle,
+                            &delayed_event_window,
+                            &delayed_was_minimized,
+                        );
+                    });
+                });
+            }
+
             Ok(())
         })
         .invoke_handler(tauri::generate_handler![
@@ -103,31 +276,38 @@ pub async fn init_ads_window<R: Runtime>(
                 webview.show().ok();
                 webview.set_position(position).ok();
                 webview.set_size(size).ok();
+                set_webview_visible_for_window(&app, webview, true);
             } else {
                 webview.hide().ok();
                 webview
                     .set_position(PhysicalPosition::new(-1000, -1000))
                     .ok();
+                set_webview_visible(webview, false);
             }
 
             Some(webview.clone())
         } else if let Some(window) = app.get_window("main") {
+            #[cfg(windows)]
+            let webview_url =
+                WebviewUrl::External("about:blank".parse().unwrap());
+            #[cfg(not(windows))]
+            let webview_url = WebviewUrl::External(AD_LINK.parse().unwrap());
+
             let webview = window.add_child(
-                tauri::webview::WebviewBuilder::new(
-                    "ads-window",
-                    WebviewUrl::External(
-                        AD_LINK.parse().unwrap(),
-                    ),
-                )
-                .initialization_script_for_all_frames(include_str!("ads-init.js"))
-                // We use a standard Chrome user agent for compatibility with our ad provider,
-                // since Tauri is not recognized by ad providers by default.
-                // Aditude has separately informed SSPs and IVT vendors that this traffic
-                // originates from a desktop app.
-                .user_agent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36")
-                .zoom_hotkeys_enabled(false)
-                .transparent(true)
-                .on_new_window(|_, _| tauri::webview::NewWindowResponse::Deny),
+                tauri::webview::WebviewBuilder::new("ads-window", webview_url)
+                    .initialization_script_for_all_frames(include_str!(
+                        "ads-init.js"
+                    ))
+                    // We use a standard Chrome user agent for compatibility with our ad provider,
+                    // since Tauri is not recognized by ad providers by default.
+                    // Aditude has separately informed SSPs and IVT vendors that this traffic
+                    // originates from a desktop app.
+                    .user_agent(ADS_USER_AGENT)
+                    .zoom_hotkeys_enabled(false)
+                    .transparent(true)
+                    .on_new_window(|_, _| {
+                        tauri::webview::NewWindowResponse::Deny
+                    }),
                 // set both the `hide`/`show` state and `position`,
                 // to ensure that the webview is actually shown/hidden
                 if state.shown {
@@ -140,15 +320,68 @@ pub async fn init_ads_window<R: Runtime>(
 
             if state.shown {
                 webview.show().ok();
+                set_webview_visible_for_window(&app, &webview, true);
             } else {
                 webview.hide().ok();
+                set_webview_visible(&webview, false);
             }
 
             webview.with_webview(#[allow(unused_variables)] |webview2| {
                 #[cfg(windows)]
                 {
+                    use webview2_com::CallDevToolsProtocolMethodCompletedHandler;
                     use webview2_com::Microsoft::Web::WebView2::Win32::ICoreWebView2_8;
                     use windows_core::Interface;
+                    use windows_core::HSTRING;
+
+                    let core_webview2 =
+                        unsafe { webview2.controller().CoreWebView2() };
+
+                    if let Ok(core_webview2) = core_webview2 {
+                        configure_ads_cookie_settings(&core_webview2);
+
+                        let navigate_webview = core_webview2.clone();
+                        let handler =
+                            CallDevToolsProtocolMethodCompletedHandler::create(
+                                Box::new(move |result: windows_core::Result<()>, _| {
+                                    if let Err(error) = result {
+                                        tracing::error!(
+                                            ?error,
+                                            "Failed to override ads user-agent client hints"
+                                        );
+                                    }
+
+                                    unsafe {
+                                        navigate_webview
+                                            .Navigate(&HSTRING::from(AD_LINK))
+                                            .ok();
+                                    }
+
+                                    Ok(())
+                                }) as Box<_>,
+                            );
+
+                        unsafe {
+                            if let Err(error) = core_webview2
+                                .CallDevToolsProtocolMethod(
+                                    &HSTRING::from(
+                                        "Emulation.setUserAgentOverride",
+                                    ),
+                                    &HSTRING::from(
+                                        ads_user_agent_override_params(),
+                                    ),
+                                    &handler,
+                                )
+                            {
+                                tracing::error!(
+                                    ?error,
+                                    "Failed to install ads user-agent client hints override"
+                                );
+
+                                core_webview2.Navigate(&HSTRING::from(AD_LINK)).ok();
+                            }
+                        }
+                    }
 
                     let webview2_controller = webview2.controller();
                     let Ok(webview2_8) = unsafe { webview2_controller.CoreWebView2() }
@@ -166,9 +399,9 @@ pub async fn init_ads_window<R: Runtime>(
             None
         };
 
-        let Some(webview) = webview.clone() else {
+        if webview.is_none() {
             return Ok(());
-        };
+        }
 
         // tauri::async_runtime::spawn(async move {
         //     loop {
@@ -249,6 +482,7 @@ pub async fn show_ads_window<R: Runtime>(
             webview.set_size(size).ok();
             webview.set_position(position).ok();
             webview.show().ok();
+            set_webview_visible_for_window(&app, webview, true);
         }
     }
 

apps/frontend/src/locales/en-US/index.json

@@ -1229,6 +1229,39 @@
   "dashboard.withdraw.error.tax-form.title": {
     "message": "Please complete tax form"
   },
+  "discover.install.back-to-server": {
+    "message": "Back to server"
+  },
+  "discover.install.back-to-setup": {
+    "message": "Back to setup"
+  },
+  "discover.install.cancel-reset": {
+    "message": "Cancel reset"
+  },
+  "discover.install.error.no-server-world": {
+    "message": "No server world is available for install."
+  },
+  "discover.install.error.some-projects-failed.description": {
+    "message": "Failed projects were not added. You can try installing them again."
+  },
+  "discover.install.error.some-projects-failed.title": {
+    "message": "Some projects failed to install"
+  },
+  "discover.install.error.unsupported-content-type": {
+    "message": "This content type cannot be installed to a server from browse."
+  },
+  "discover.install.heading.reset-modpack": {
+    "message": "Selecting modpack to install after reset"
+  },
+  "discover.seo.description": {
+    "message": "Search and browse thousands of Minecraft {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}} on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}}."
+  },
+  "discover.seo.title": {
+    "message": "Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}}"
+  },
+  "discover.seo.title-with-query": {
+    "message": "Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}} | {query}"
+  },
   "error.collection.404.list_item.1": {
     "message": "You may have mistyped the collection's URL."
   },
@@ -3062,6 +3095,9 @@
   "search.filter.locked.server.sync": {
     "message": "Sync with server"
   },
+  "servers.manage.content.title": {
+    "message": "Content - {serverName} - Modrinth"
+  },
   "servers.notice.actions": {
     "message": "Actions"
   },

apps/frontend/src/pages/discover/[type]/index.vue

@@ -11,20 +11,37 @@ import {
 	MoreVerticalIcon,
 	SpinnerIcon,
 } from '@modrinth/assets'
-import type { CardAction, CreationFlowContextValue } from '@modrinth/ui'
+import type {
+	BrowseInstallContentType,
+	BrowseInstallPlan,
+	CardAction,
+	CreationFlowContextValue,
+	PendingServerContentInstall,
+	PendingServerContentInstallType,
+} from '@modrinth/ui'
 import {
+	addPendingServerContentInstalls,
 	BrowseInstallHeader,
 	BrowsePageLayout,
 	BrowseSidebar,
+	commonMessages,
 	CreationFlowModal,
 	defineMessages,
+	flushInstallQueue,
+	getTargetInstallPreferences,
 	injectModrinthClient,
 	injectNotificationManager,
 	PROJECT_DEP_MARKER_QUERY,
 	provideBrowseManager,
+	readPendingServerContentInstalls,
+	removePendingServerContentInstall,
+	requestInstall,
+	SelectedProjectsFloatingBar,
 	useBrowseSearch,
 	useDebugLogger,
+	useStickyObserver,
 	useVIntl,
+	writePendingServerContentInstallBaseline,
 } from '@modrinth/ui'
 import { cycleValue } from '@modrinth/utils'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
@@ -47,6 +64,9 @@ const client = injectModrinthClient()
 const queryClient = useQueryClient()
 
 const filtersMenuOpen = ref(false)
+const stickyInstallHeaderRef = ref<HTMLElement | null>(null)
+
+useStickyObserver(stickyInstallHeaderRef, 'DiscoverInstallHeader')
 
 const route = useRoute()
 
@@ -55,7 +75,7 @@ const tags = useGeneratedState()
 const flags = useFeatureFlags()
 const auth = await useAuth()
 
-const { handleError } = injectNotificationManager()
+const { addNotification, handleError } = injectNotificationManager()
 
 let prefetchTimeout: ReturnType<typeof useTimeoutFn> | null = null
 const HOVER_DURATION_TO_PREFETCH_MS = 500
@@ -143,7 +163,7 @@ function cycleSearchDisplayMode() {
 
 const currentServerId = computed(() => queryAsString(route.query.sid) || null)
 const fromContext = computed(() => queryAsString(route.query.from) || null)
-const currentWorldId = computed(() => queryAsString(route.query.wid) || undefined)
+const currentWorldId = computed(() => queryAsString(route.query.wid) || null)
 
 const {
 	data: serverData,
@@ -176,11 +196,139 @@ const serverIcon = computed(() => {
 })
 
 const serverHideInstalled = ref(false)
+const hideSelectedServerInstalls = ref(false)
 const installingProjectIds = ref<Set<string>>(new Set())
 const optimisticallyInstalledProjectIds = ref<Set<string>>(new Set())
 const hiddenInstalledProjectIds = ref<Set<string>>(new Set())
 const hiddenInstalledProjectIdsInitialized = ref(false)
 
+interface InstallableSearchResult extends Labrinth.Search.v2.ResultSearchProject {
+	installed?: boolean
+}
+type PendingServerContentInstallInput = Omit<PendingServerContentInstall, 'createdAt'>
+
+const queuedServerInstalls = ref<Map<string, BrowseInstallPlan<InstallableSearchResult>>>(new Map())
+const queuedServerInstallProjectIds = computed(() => new Set(queuedServerInstalls.value.keys()))
+const queuedServerInstallCount = computed(() => queuedServerInstalls.value.size)
+const selectedServerInstallProjects = computed(() =>
+	Array.from(queuedServerInstalls.value.values()).map((plan) => ({
+		id: plan.projectId,
+		name: plan.project.title ?? formatMessage(commonMessages.projectLabel),
+		iconUrl: plan.project.icon_url ?? null,
+	})),
+)
+const isInstallingQueuedServerInstalls = ref(false)
+const queuedInstallProgress = ref({ completed: 0, total: 0 })
+const serverInstallQueue = {
+	get: () => queuedServerInstalls.value,
+	set: (plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>) => {
+		queuedServerInstalls.value = plans
+	},
+}
+
+function getQueuedInstallOwnerFallback(project: InstallableSearchResult) {
+	if (project.organization) {
+		const ownerId = project.organization_id ?? project.organization
+		return {
+			id: ownerId,
+			name: project.organization,
+			type: 'organization' as const,
+			link: `/organization/${ownerId}`,
+		}
+	}
+
+	if (!project.author) return null
+
+	const ownerId = project.author_id ?? project.author
+	return {
+		id: ownerId,
+		name: project.author,
+		type: 'user' as const,
+		link: `/user/${ownerId}`,
+	}
+}
+
+async function getQueuedInstallOwner(project: InstallableSearchResult) {
+	const fallback = getQueuedInstallOwnerFallback(project)
+
+	try {
+		if (project.organization) {
+			const organization = await client.labrinth.projects_v3.getOrganization(project.project_id)
+			if (organization) {
+				return {
+					id: organization.id,
+					name: organization.name,
+					type: 'organization' as const,
+					avatar_url: organization.icon_url ?? undefined,
+					link: `/organization/${organization.slug}`,
+				}
+			}
+		}
+
+		const members = await client.labrinth.projects_v3.getMembers(project.project_id)
+		const owner =
+			members.find((member) => member.user.id === project.author_id)?.user ??
+			members.find((member) => member.is_owner || member.role === 'Owner')?.user ??
+			members[0]?.user
+
+		if (owner) {
+			return {
+				id: owner.id,
+				name: owner.username,
+				type: 'user' as const,
+				avatar_url: owner.avatar_url,
+				link: `/user/${owner.username}`,
+			}
+		}
+	} catch {
+		return fallback
+	}
+
+	return fallback
+}
+
+function getQueuedAddonInstallPlans(
+	plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
+) {
+	return Array.from(plans.values()).filter((plan) => plan.contentType !== 'modpack')
+}
+
+function getQueuedInstallPlaceholder(
+	plan: BrowseInstallPlan<InstallableSearchResult>,
+	owner: PendingServerContentInstallInput['owner'],
+): PendingServerContentInstallInput {
+	return {
+		projectId: plan.projectId,
+		versionId: plan.versionId,
+		contentType: plan.contentType as PendingServerContentInstallType,
+		title: plan.project.title ?? formatMessage(commonMessages.projectLabel),
+		versionName: plan.versionName ?? null,
+		versionNumber: plan.versionNumber ?? null,
+		fileName: plan.fileName ?? null,
+		owner,
+		slug: plan.project.slug ?? plan.projectId,
+		iconUrl: plan.project.icon_url ?? null,
+	}
+}
+
+function getQueuedInstallPlaceholderFallbacks(
+	plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
+) {
+	return getQueuedAddonInstallPlans(plans).map((plan) =>
+		getQueuedInstallPlaceholder(plan, getQueuedInstallOwnerFallback(plan.project)),
+	)
+}
+
+async function getQueuedInstallPlaceholders(
+	plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
+) {
+	return Promise.all(
+		getQueuedAddonInstallPlans(plans).map(async (plan) =>
+			getQueuedInstallPlaceholder(plan, await getQueuedInstallOwner(plan.project)),
+		),
+	)
+}
+
 function setProjectInstalling(projectId: string, installing: boolean) {
 	const next = new Set(installingProjectIds.value)
 	if (installing) {
@@ -206,6 +354,10 @@ function getServerInstalledProjectIds(data = serverContentData.value) {
 	)
 }
 
+function getServerInstalledContentKeys(data = serverContentData.value) {
+	return new Set((data?.addons ?? []).map((addon) => addon.project_id ?? addon.filename))
+}
+
 function syncHiddenInstalledProjectIds() {
 	hiddenInstalledProjectIds.value = new Set([
 		...getServerInstalledProjectIds(),
@@ -242,21 +394,22 @@ watch(
 const installContentMutation = useMutation({
 	mutationFn: ({
 		serverId,
+		worldId,
 		projectId,
 		versionId,
 	}: {
 		serverId: string
+		worldId: string
 		projectId: string
 		versionId: string
 	}) =>
-		client.archon.content_v1.addAddon(serverId, currentWorldId.value!, {
+		client.archon.content_v1.addAddon(serverId, worldId, {
 			project_id: projectId,
 			version_id: versionId,
 		}),
-	onSuccess: () => {
-		if (currentServerId.value) {
-			queryClient.refetchQueries({ queryKey: ['content', 'list', currentServerId.value] })
-		}
+	onSuccess: (_data, variables) => {
+		queryClient.invalidateQueries({ queryKey: ['content', 'list', 'v1', variables.serverId] })
+		queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
 	},
 })
 
@@ -309,6 +462,16 @@ const serverFilters = computed(() => {
 				})
 			}
 		}
+
+		if (hideSelectedServerInstalls.value && queuedServerInstallProjectIds.value.size > 0) {
+			for (const id of queuedServerInstallProjectIds.value) {
+				filters.push({
+					type: 'project_id',
+					option: `project_id:${id}`,
+					negative: true,
+				})
+			}
+		}
 	}
 
 	if (currentServerId.value && projectType.value?.id === 'modpack') {
@@ -321,78 +484,199 @@ const serverFilters = computed(() => {
 	return filters
 })
 
-interface InstallableSearchResult extends Labrinth.Search.v2.ResultSearchProject {
-	installed?: boolean
+function getCurrentServerInstallType(): BrowseInstallContentType {
+	const type = projectType.value?.id
+	if (type === 'modpack' || type === 'mod' || type === 'plugin' || type === 'datapack') {
+		return type
+	}
+	throw new Error(formatMessage(messages.unsupportedContentType))
+}
+
+function getServerInstallTargetPreferences(contentType: BrowseInstallContentType) {
+	return getTargetInstallPreferences(
+		{
+			gameVersion: serverData.value?.mc_version,
+			loader: serverData.value?.loader,
+		},
+		contentType,
+	)
+}
+
+function getInstallProjectVersions(projectId: string) {
+	return client.labrinth.versions_v2.getProjectVersions(projectId, {
+		include_changelog: false,
+	})
+}
+
+function clearQueuedServerInstalls() {
+	queuedServerInstalls.value = new Map()
+}
+
+function removeQueuedServerInstall(projectId: string) {
+	const nextPlans = new Map(queuedServerInstalls.value)
+	nextPlans.delete(projectId)
+	queuedServerInstalls.value = nextPlans
+}
+
+watch([currentServerId, currentWorldId], ([serverId, worldId], [prevServerId, prevWorldId]) => {
+	if (serverId !== prevServerId || worldId !== prevWorldId) {
+		clearQueuedServerInstalls()
+	}
+})
+
+async function flushQueuedServerInstalls(
+	serverId: string | null = currentServerId.value,
+	worldId: string | null = currentWorldId.value,
+) {
+	if (queuedServerInstalls.value.size === 0) return true
+	if (isInstallingQueuedServerInstalls.value) return false
+
+	if (!serverId || !worldId) {
+		handleError(new Error(formatMessage(messages.noServerWorld)))
+		return false
+	}
+
+	isInstallingQueuedServerInstalls.value = true
+	queuedInstallProgress.value = {
+		completed: 0,
+		total: queuedServerInstalls.value.size,
+	}
+
+	try {
+		const result = await flushInstallQueue({
+			queue: serverInstallQueue,
+			install: async (plan) => {
+				await installContentMutation.mutateAsync({
+					serverId,
+					worldId,
+					projectId: plan.projectId,
+					versionId: plan.versionId,
+				})
+				markProjectInstalled(plan.projectId)
+			},
+			onError: (error, plan) => {
+				removePendingServerContentInstall(serverId, worldId, plan.projectId)
+				handleError(error as Error)
+			},
+			onProgress: (completed, total) => {
+				queuedInstallProgress.value = { completed, total }
+			},
+		})
+
+		return result.ok
+	} finally {
+		isInstallingQueuedServerInstalls.value = false
+		queuedInstallProgress.value = { completed: 0, total: 0 }
+	}
+}
+
+async function discardQueuedServerInstallsAndBack() {
+	clearQueuedServerInstalls()
+	await navigateTo(serverBackUrl.value)
+}
+
+async function installQueuedServerInstallsAndBack() {
+	const sid = currentServerId.value
+	const wid = currentWorldId.value
+	const backUrl = serverBackUrl.value
+	const plans = new Map(queuedServerInstalls.value)
+
+	if (sid && wid) {
+		writePendingServerContentInstallBaseline(sid, wid, [
+			...getServerInstalledContentKeys(),
+			...optimisticallyInstalledProjectIds.value,
+		])
+		addPendingServerContentInstalls(sid, wid, getQueuedInstallPlaceholderFallbacks(plans))
+		void getQueuedInstallPlaceholders(plans)
+			.then((items) => {
+				const pendingProjectIds = new Set(
+					readPendingServerContentInstalls(sid, wid).map((item) => item.projectId),
+				)
+				addPendingServerContentInstalls(
+					sid,
+					wid,
+					items.filter((item) => pendingProjectIds.has(item.projectId)),
+				)
+			})
+			.catch((err) => handleError(err as Error))
+	}
+	await navigateTo(backUrl)
+
+	const ok = await flushQueuedServerInstalls(sid, wid)
+	if (!ok) {
+		queuedServerInstalls.value = new Map()
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.someProjectsFailedTitle),
+			text: formatMessage(messages.someProjectsFailedText),
+		})
+	}
+
+	return true
 }
 
 async function serverInstall(project: InstallableSearchResult) {
-	if (!serverData.value || !currentServerId.value) {
+	if (!serverData.value || !currentServerId.value || !currentWorldId.value) {
 		handleError(new Error('No server to install to.'))
 		return
 	}
-	setProjectInstalling(project.project_id, true)
+	const contentType = getCurrentServerInstallType()
+	const isModpack = contentType === 'modpack'
+
 	try {
-		if (projectType.value?.id === 'modpack') {
-			const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
-				include_changelog: false,
-			})
-			const versionId = versions[0]?.id ?? project.latest_version
-			if (!versionId) {
-				handleError(new Error('No version found for this modpack'))
-				setProjectInstalling(project.project_id, false)
-				return
-			}
-			const modalInstance = onboardingModalRef.value
-			if (modalInstance) {
-				onboardingInstallingProject.value = project
+		if (!isModpack && queuedServerInstallProjectIds.value.has(project.project_id)) {
+			removeQueuedServerInstall(project.project_id)
+			return
+		}
+
+		if (isModpack || !queuedServerInstallProjectIds.value.has(project.project_id)) {
+			setProjectInstalling(project.project_id, true)
+		}
+
+		await requestInstall({
+			project,
+			contentType,
+			mode: isModpack ? 'immediate' : 'queue',
+			selectedFilters: isModpack ? [] : searchState.currentFilters.value,
+			providedFilters: isModpack ? [] : serverFilters.value,
+			overriddenProvidedFilterTypes: isModpack
+				? []
+				: searchState.overriddenProvidedFilterTypes.value,
+			targetPreferences: getServerInstallTargetPreferences(contentType),
+			getProjectVersions: getInstallProjectVersions,
+			queue: serverInstallQueue,
+			install: async (plan) => {
+				const modalInstance = onboardingModalRef.value
+				if (!modalInstance) {
+					setProjectInstalling(plan.projectId, false)
+					return
+				}
+
+				onboardingInstallingProject.value = plan.project
 				modalInstance.show()
 				await nextTick()
 				const ctx = modalInstance.ctx
 				ctx.setupType.value = 'modpack'
 				ctx.modpackSelection.value = {
-					projectId: project.project_id,
-					versionId,
-					name: project.title,
-					iconUrl: project.icon_url ?? undefined,
+					projectId: plan.projectId,
+					versionId: plan.versionId,
+					name: plan.project.title,
+					iconUrl: plan.project.icon_url ?? undefined,
 				}
 				ctx.modal.value?.setStage('final-config')
-			}
-			return
-		} else if (
-			projectType.value?.id === 'mod' ||
-			projectType.value?.id === 'plugin' ||
-			projectType.value?.id === 'datapack'
-		) {
-			const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id)
-			const isDatapack = projectType.value?.id === 'datapack'
-			const version = versions.find((x) => {
-				if (!x.game_versions.includes(serverData.value!.mc_version!)) return false
-				if (isDatapack) return true
-				return x.loaders.includes(serverData.value!.loader!.toLowerCase())
-			})
-			if (!version) {
-				handleError(
-					new Error(
-						isDatapack
-							? `No compatible version found for ${serverData.value!.mc_version}`
-							: `No compatible version found for ${serverData.value!.mc_version} / ${serverData.value!.loader}`,
-					),
-				)
-				setProjectInstalling(project.project_id, false)
-				return
-			}
-			await installContentMutation.mutateAsync({
-				serverId: currentServerId.value,
-				projectId: version.project_id,
-				versionId: version.id,
-			})
-			markProjectInstalled(project.project_id)
-		}
+			},
+		})
 	} catch (e) {
 		console.error(e)
-		handleError(new Error(`Error installing content ${e}`))
+		if (isModpack) {
+			setProjectInstalling(project.project_id, false)
+		}
+		handleError(e instanceof Error ? e : new Error(`Error installing content ${e}`))
+	} finally {
+		if (!isModpack) {
+			setProjectInstalling(project.project_id, false)
+		}
 	}
-	setProjectInstalling(project.project_id, false)
 }
 
 function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject) {
@@ -503,6 +787,7 @@ function getCardActions(
 	}
 
 	if (serverData.value) {
+		const isQueued = queuedServerInstallProjectIds.value.has(result.project_id)
 		const isInstalled =
 			projectResult.installed ||
 			optimisticallyInstalledProjectIds.value.has(result.project_id) ||
@@ -510,15 +795,36 @@ function getCardActions(
 				(serverContentData.value.addons ?? []).find((x) => x.project_id === result.project_id)) ||
 			serverData.value.upstream?.project_id === result.project_id
 		const isInstalling = installingProjectIds.value.has(result.project_id)
+		const isInstallingSelection = isInstallingQueuedServerInstalls.value
+		const validatingInstall =
+			isInstalling && currentProjectType !== 'modpack' && !isInstallingSelection
+		const installLabel = isInstalled
+			? formatMessage(commonMessages.installedLabel)
+			: isQueued
+				? isInstalling || isInstallingSelection
+					? validatingInstall
+						? formatMessage(commonMessages.validatingLabel)
+						: formatMessage(commonMessages.installingLabel)
+					: formatMessage(commonMessages.selectedLabel)
+				: isInstalling || isInstallingSelection
+					? validatingInstall
+						? formatMessage(commonMessages.validatingLabel)
+						: formatMessage(commonMessages.installingLabel)
+					: formatMessage(commonMessages.installButton)
 
 		return [
 			{
 				key: 'install',
-				label: isInstalling ? 'Installing...' : isInstalled ? 'Installed' : 'Install',
-				icon: isInstalling ? SpinnerIcon : isInstalled ? CheckIcon : DownloadIcon,
-				iconClass: isInstalling ? 'animate-spin' : undefined,
-				disabled: !!isInstalled || isInstalling,
-				color: 'brand',
+				label: installLabel,
+				icon:
+					isInstalling || isInstallingSelection
+						? SpinnerIcon
+						: isQueued || isInstalled
+							? CheckIcon
+							: DownloadIcon,
+				iconClass: isInstalling || isInstallingSelection ? 'animate-spin' : undefined,
+				disabled: !!isInstalled || isInstalling || isInstallingSelection,
+				color: isQueued && !isInstalling && !isInstallingSelection ? 'green' : 'brand',
 				type: 'outlined',
 				onClick: () => serverInstall(projectResult),
 			},
@@ -579,15 +885,15 @@ const serverBackUrl = computed(() => {
 })
 
 const serverBackLabel = computed(() => {
-	if (fromContext.value === 'onboarding') return 'Back to setup'
-	if (fromContext.value === 'reset-server') return 'Cancel reset'
-	return 'Back to server'
+	if (fromContext.value === 'onboarding') return formatMessage(messages.backToSetup)
+	if (fromContext.value === 'reset-server') return formatMessage(messages.cancelReset)
+	return formatMessage(messages.backToServer)
 })
 
 const serverBrowseHeading = computed(() =>
 	fromContext.value === 'reset-server'
-		? 'Select modpack to install after reset'
-		: 'Install content to server',
+		? formatMessage(messages.resetModpackHeading)
+		: formatMessage(commonMessages.installingContentLabel),
 )
 
 const installContext = computed(() => {
@@ -603,10 +909,51 @@ const installContext = computed(() => {
 		backUrl: serverBackUrl.value,
 		backLabel: serverBackLabel.value,
 		heading: serverBrowseHeading.value,
+		queuedCount: queuedServerInstallCount.value,
+		selectedProjects: selectedServerInstallProjects.value,
+		isInstallingSelected: isInstallingQueuedServerInstalls.value,
+		installProgress: queuedInstallProgress.value,
+		clearQueued: clearQueuedServerInstalls,
+		clearSelected: clearQueuedServerInstalls,
+		onBack: flushQueuedServerInstalls,
+		discardSelectedAndBack: discardQueuedServerInstallsAndBack,
+		installSelected: installQueuedServerInstallsAndBack,
 	}
 })
 
 const messages = defineMessages({
+	unsupportedContentType: {
+		id: 'discover.install.error.unsupported-content-type',
+		defaultMessage: 'This content type cannot be installed to a server from browse.',
+	},
+	noServerWorld: {
+		id: 'discover.install.error.no-server-world',
+		defaultMessage: 'No server world is available for install.',
+	},
+	someProjectsFailedTitle: {
+		id: 'discover.install.error.some-projects-failed.title',
+		defaultMessage: 'Some projects failed to install',
+	},
+	someProjectsFailedText: {
+		id: 'discover.install.error.some-projects-failed.description',
+		defaultMessage: 'Failed projects were not added. You can try installing them again.',
+	},
+	backToSetup: {
+		id: 'discover.install.back-to-setup',
+		defaultMessage: 'Back to setup',
+	},
+	cancelReset: {
+		id: 'discover.install.cancel-reset',
+		defaultMessage: 'Cancel reset',
+	},
+	backToServer: {
+		id: 'discover.install.back-to-server',
+		defaultMessage: 'Back to server',
+	},
+	resetModpackHeading: {
+		id: 'discover.install.heading.reset-modpack',
+		defaultMessage: 'Selecting modpack to install after reset',
+	},
 	gameVersionProvidedByServer: {
 		id: 'search.filter.locked.server-game-version.title',
 		defaultMessage: 'Game version is provided by the server',
@@ -623,6 +970,21 @@ const messages = defineMessages({
 		id: 'search.filter.locked.server.sync',
 		defaultMessage: 'Sync with server',
 	},
+	seoTitle: {
+		id: 'discover.seo.title',
+		defaultMessage:
+			'Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}}',
+	},
+	seoTitleWithQuery: {
+		id: 'discover.seo.title-with-query',
+		defaultMessage:
+			'Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}} | {query}',
+	},
+	seoDescription: {
+		id: 'discover.seo.description',
+		defaultMessage:
+			'Search and browse thousands of Minecraft {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}} on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}}.',
+	},
 	gameVersionShaderMessage: {
 		id: 'search.filter.game-version-shader-message',
 		defaultMessage:
@@ -648,6 +1010,12 @@ const searchState = useBrowseSearch({
 	displayMode: resultsDisplayMode,
 })
 
+watch(queuedServerInstallCount, (count) => {
+	if (count === 0) {
+		hideSelectedServerInstalls.value = false
+	}
+})
+
 watch(
 	() =>
 		searchState.isServerType.value
@@ -673,13 +1041,16 @@ watch(
 debug('calling initial refreshSearch')
 searchState.refreshSearch()
 
-const ogTitle = computed(
-	() =>
-		`Search ${projectType.value?.display ?? 'project'}s${searchState.query.value ? ' | ' + searchState.query.value : ''}`,
+const ogTitle = computed(() =>
+	searchState.query.value
+		? formatMessage(messages.seoTitleWithQuery, {
+				projectType: projectType.value?.id ?? 'project',
+				query: searchState.query.value,
+			})
+		: formatMessage(messages.seoTitle, { projectType: projectType.value?.id ?? 'project' }),
 )
-const description = computed(
-	() =>
-		`Search and browse thousands of Minecraft ${projectType.value?.display ?? 'project'}s on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft ${projectType.value?.display ?? 'project'}s.`,
+const description = computed(() =>
+	formatMessage(messages.seoDescription, { projectType: projectType.value?.id ?? 'project' }),
 )
 
 useSeoMeta({
@@ -705,7 +1076,15 @@ provideBrowseManager({
 	providedFilters: serverFilters,
 	hideInstalled: serverHideInstalled,
 	showHideInstalled: computed(() => !!serverData.value && projectType.value?.id !== 'modpack'),
-	hideInstalledLabel: computed(() => 'Hide already installed content'),
+	hideInstalledLabel: computed(() => formatMessage(commonMessages.hideInstalledContentLabel)),
+	hideSelected: hideSelectedServerInstalls,
+	showHideSelected: computed(
+		() =>
+			!!serverData.value &&
+			projectType.value?.id !== 'modpack' &&
+			queuedServerInstallCount.value > 0,
+	),
+	hideSelectedLabel: computed(() => formatMessage(commonMessages.hideSelectedContentLabel)),
 	displayMode: resultsDisplayMode,
 	cycleDisplayMode: cycleSearchDisplayMode,
 	maxResultsOptions: currentMaxResultsOptions,
@@ -728,10 +1107,15 @@ provideBrowseManager({
 	<Teleport v-if="flags.searchBackground" to="#absolute-background-teleport">
 		<div class="search-background"></div>
 	</Teleport>
-	<div v-if="installContext" class="normal-page__header mb-4 flex flex-col gap-2">
+	<div
+		v-if="installContext"
+		ref="stickyInstallHeaderRef"
+		class="normal-page__header browse-install-header-bleed sticky top-0 z-20 mb-4 flex flex-col gap-2 border-0 bg-surface-1 py-3"
+	>
 		<BrowseInstallHeader />
 	</div>
-	<aside class="normal-page__sidebar" aria-label="Filters">
+	<SelectedProjectsFloatingBar v-if="installContext" :install-context="installContext" />
+	<aside class="normal-page__sidebar" :aria-label="formatMessage(commonMessages.filtersLabel)">
 		<AdPlaceholder v-if="!auth.user && !serverData" />
 		<BrowseSidebar />
 	</aside>
@@ -759,6 +1143,22 @@ provideBrowseManager({
 	</section>
 </template>
 <style lang="scss" scoped>
+.browse-install-header-bleed {
+	grid-column: 1 / -1;
+	margin-inline: -1.5rem;
+	padding-inline: 0.75rem !important;
+
+	&::after {
+		content: '';
+		position: absolute;
+		right: 50%;
+		bottom: 0;
+		width: 100vw;
+		border-bottom: 1px solid var(--surface-5);
+		transform: translateX(50%);
+	}
+}
+
 .normal-page__content {
 	display: contents;
 

apps/frontend/src/pages/hosting/manage/[id]/content.vue

@@ -1,33 +1,72 @@
 <script setup lang="ts">
 import {
+	commonMessages,
+	defineMessages,
 	injectModrinthClient,
 	injectModrinthServerContext,
 	ServersManageContentPage,
+	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 
 const client = injectModrinthClient()
 const { server, serverId, worldId } = injectModrinthServerContext()
 const queryClient = useQueryClient()
+const { formatMessage } = useVIntl()
 
-if (worldId.value) {
+const messages = defineMessages({
+	title: {
+		id: 'servers.manage.content.title',
+		defaultMessage: 'Content - {serverName} - Modrinth',
+	},
+})
+
+async function getContentWorldId() {
+	if (worldId.value) return worldId.value
+
+	const serverFull = await queryClient.ensureQueryData({
+		queryKey: ['servers', 'v1', 'detail', serverId],
+		queryFn: () => client.archon.servers_v1.get(serverId),
+		staleTime: 30_000,
+	})
+	const activeWorld = serverFull.worlds.find((world) => world.is_active)
+	return activeWorld?.id ?? serverFull.worlds[0]?.id ?? null
+}
+
+const contentWorldId = await getContentWorldId()
+
+if (contentWorldId) {
 	try {
-		await queryClient.ensureQueryData({
+		const content = await queryClient.ensureQueryData({
 			queryKey: ['content', 'list', 'v1', serverId],
 			queryFn: () =>
-				client.archon.content_v1.getAddons(serverId, worldId.value!, { from_modpack: false }),
+				client.archon.content_v1.getAddons(serverId, contentWorldId, { from_modpack: false }),
 			staleTime: 30_000,
 		})
+
+		const modpackProjectId =
+			content.modpack?.spec.platform === 'modrinth' ? content.modpack.spec.project_id : null
+
+		if (modpackProjectId) {
+			await queryClient.ensureQueryData({
+				queryKey: ['labrinth', 'project', modpackProjectId],
+				queryFn: () => client.labrinth.projects_v2.get(modpackProjectId),
+				staleTime: 30_000,
+			})
+		}
 	} catch {
 		// Let mounted layouts' useQuery surface errors; do not fail route setup.
 	}
 }
 
 useHead({
-	title: `Content - ${server.value?.name ?? 'Server'} - Modrinth`,
+	title: () =>
+		formatMessage(messages.title, {
+			serverName: server.value?.name ?? formatMessage(commonMessages.serverLabel),
+		}),
 })
 </script>
 
 <template>
-	<ServersManageContentPage />
+	<ServersManageContentPage :owner-avatar-url-base="''" />
 </template>

apps/frontend/src/server/routes/organization/[id]/avatar.get.ts

@@ -0,0 +1,43 @@
+import { type Labrinth, ModrinthApiError } from '@modrinth/api-client'
+
+import { useServerModrinthClient } from '~/server/utils/api-client'
+
+export default defineEventHandler(async (event) => {
+	const id = getRouterParam(event, 'id')
+
+	if (!id) {
+		throw createError({
+			statusCode: 400,
+			message: 'Missing organization',
+		})
+	}
+
+	const client = useServerModrinthClient({ event })
+
+	let organization: Labrinth.Organizations.v3.Organization
+	try {
+		organization = await client.labrinth.organizations_v3.get(id)
+	} catch (error) {
+		if (error instanceof ModrinthApiError && error.statusCode === 404) {
+			throw createError({
+				statusCode: 404,
+				message: 'Organization not found',
+			})
+		}
+
+		throw createError({
+			statusCode: 502,
+			message: 'Failed to resolve organization avatar',
+		})
+	}
+
+	if (!organization.icon_url) {
+		throw createError({
+			statusCode: 404,
+			message: 'Organization avatar not found',
+		})
+	}
+
+	setHeader(event, 'cache-control', 'public, max-age=300, s-maxage=600')
+	return sendRedirect(event, organization.icon_url, 302)
+})

apps/frontend/src/server/routes/user/[username]/avatar.get.ts

@@ -0,0 +1,43 @@
+import { type Labrinth, ModrinthApiError } from '@modrinth/api-client'
+
+import { useServerModrinthClient } from '~/server/utils/api-client'
+
+export default defineEventHandler(async (event) => {
+	const username = getRouterParam(event, 'username')
+
+	if (!username) {
+		throw createError({
+			statusCode: 400,
+			message: 'Missing username',
+		})
+	}
+
+	const client = useServerModrinthClient({ event })
+
+	let user: Labrinth.Users.v2.User
+	try {
+		user = await client.labrinth.users_v2.get(username)
+	} catch (error) {
+		if (error instanceof ModrinthApiError && error.statusCode === 404) {
+			throw createError({
+				statusCode: 404,
+				message: 'User not found',
+			})
+		}
+
+		throw createError({
+			statusCode: 502,
+			message: 'Failed to resolve user avatar',
+		})
+	}
+
+	if (!user.avatar_url) {
+		throw createError({
+			statusCode: 404,
+			message: 'User avatar not found',
+		})
+	}
+
+	setHeader(event, 'cache-control', 'public, max-age=300, s-maxage=600')
+	return sendRedirect(event, user.avatar_url, 302)
+})

apps/frontend/src/utils/router.ts

@@ -9,8 +9,8 @@ export function queryAsString(query: LocationQueryValue | LocationQueryValue[]):
 }
 
 export function queryAsStringArray(
-	query: LocationQueryValue | LocationQueryValue[],
-): string | null {
+	query: LocationQueryValue | LocationQueryValue[] | undefined,
+): string[] {
 	if (query === undefined || query === null) {
 		return []
 	}

packages/api-client/src/modules/archon/content/v1.ts

@@ -49,6 +49,20 @@ export class ArchonContentV1Module extends AbstractModule {
 		})
 	}
 
+	/** POST /v1/:server_id/worlds/:world_id/addons/install-many */
+	public async addAddons(
+		serverId: string,
+		worldId: string,
+		addons: Archon.Content.v1.AddAddonRequest[],
+	): Promise<void> {
+		await this.client.request<void>(`/servers/${serverId}/worlds/${worldId}/addons/install-many`, {
+			api: 'archon',
+			version: 1,
+			method: 'POST',
+			body: { addons } satisfies Archon.Content.v1.AddAddonsRequest,
+		})
+	}
+
 	/** POST /v1/:server_id/worlds/:world_id/addons/delete */
 	public async deleteAddon(
 		serverId: string,

packages/api-client/src/modules/archon/types.ts

@@ -51,6 +51,10 @@ export namespace Archon {
 				kind?: AddonKind
 			}
 
+			export type AddAddonsRequest = {
+				addons: AddAddonRequest[]
+			}
+
 			export type RemoveAddonRequest = {
 				kind: AddonKind
 				filename: string

packages/app-lib/src/state/profiles.rs

@@ -417,6 +417,25 @@ struct InitialScanFile {
     cache_key: String,
 }
 
+fn is_scannable_project_file(
+    project_type: ProjectType,
+    file_name: &str,
+) -> bool {
+    let Some(extension) = Path::new(file_name.trim_end_matches(".disabled"))
+        .extension()
+        .and_then(|ext| ext.to_str())
+    else {
+        return false;
+    };
+
+    match project_type {
+        ProjectType::Mod => extension.eq_ignore_ascii_case("jar"),
+        ProjectType::DataPack
+        | ProjectType::ResourcePack
+        | ProjectType::ShaderPack => extension.eq_ignore_ascii_case("zip"),
+    }
+}
+
 impl Profile {
     pub async fn get(
         path: &str,
@@ -648,8 +667,10 @@ impl Profile {
                             && let Some(file_name) = subdirectory
                                 .file_name()
                                 .and_then(|x| x.to_str())
-                            && !(project_type == ProjectType::ShaderPack
-                                && file_name.ends_with(".txt"))
+                            && is_scannable_project_file(
+                                project_type,
+                                file_name,
+                            )
                         {
                             let file_size = subdirectory
                                 .metadata()
@@ -1052,8 +1073,7 @@ impl Profile {
                     if subdirectory.is_file()
                         && let Some(file_name) =
                             subdirectory.file_name().and_then(|x| x.to_str())
-                        && !(project_type == ProjectType::ShaderPack
-                            && file_name.ends_with(".txt"))
+                        && is_scannable_project_file(project_type, file_name)
                     {
                         let file_size = subdirectory
                             .metadata()

packages/blog/changelog.ts

@@ -10,6 +10,34 @@ export type VersionEntry = {
 }
 
 const VERSIONS: VersionEntry[] = [
+	{
+		date: `2026-05-09T19:06:18+00:00`,
+		product: 'app',
+		version: '0.13.13',
+		body: `## Changed
+- Improved the Browse page header so the back button no longer shifts the layout.
+
+## Fixed
+- Fixed instance redirects opening a broken page state.`,
+	},
+	{
+		date: `2026-05-09T19:06:18+00:00`,
+		product: 'web',
+		body: `## Changed
+- Improved performance on search pages.`,
+	},
+	{
+		date: `2026-05-09T19:06:18+00:00`,
+		product: 'hosting',
+		body: `## Changed
+- Updated Modrinth Hosting content browsing so multiple projects can be selected before installation.
+- After installing selected content, the Modrinth Hosting content page now reopens immediately and shows pending projects as installing.
+- Project icons now appear in the action bar when selecting multiple projects in the Content tab.
+
+## Fixed
+- Fixed selected content and dependencies not staying marked as installing.
+- Fixed page shifts while dependencies resolve during installation.`,
+	},
 	{
 		date: `2026-05-08T09:58:39+00:00`,
 		product: 'web',

packages/ui/src/components/base/Checkbox.vue

@@ -17,7 +17,7 @@
 			:class="{
 				'bg-brand border-button-border text-brand-inverted': modelValue,
 				'bg-surface-2 border-surface-5 text-primary': !modelValue,
-				'checkbox-shadow group-active:scale-95': disabled,
+				'checkbox-shadow group-active:scale-95': !disabled,
 			}"
 		>
 			<MinusIcon v-if="indeterminate" aria-hidden="true" stroke-width="3" />

packages/ui/src/components/base/FloatingActionBar.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
 	shown: boolean
 	ariaLabel?: string
 	belowModal?: boolean
+	hideWhenModalOpen?: boolean
 }>()
 
 const INTERCOM_BUBBLE_GAP = 8
@@ -18,7 +19,7 @@ const compact = ref(false)
 
 const { stackCount } = useModalStack()
 const pageContext = injectPageContext(null)
-const shown = computed(() => props.shown)
+const shown = computed(() => props.shown && (!props.hideWhenModalOpen || stackCount.value === 0))
 const intercomBubbleClearanceRequestId = Symbol('floating-action-bar')
 const zIndex = computed(() => 100 + stackCount.value * 10 + 8 + (!props.belowModal ? 1 : 0))
 const leftOffset = computed(
@@ -82,11 +83,11 @@ function updateIntercomBubbleClearance() {
 	)
 }
 
-function updateBodyState(shown = props.shown) {
+function updateBodyState(isShown = shown.value) {
 	if (typeof document === 'undefined') return
 
-	document.body.classList.toggle('floating-action-bar-shown', shown)
-	if (!shown) {
+	document.body.classList.toggle('floating-action-bar-shown', isShown)
+	if (!isShown) {
 		clearIntercomBubbleClearance()
 	}
 }
@@ -123,10 +124,10 @@ watch(
 )
 
 watch(
-	() => props.shown,
-	async (shown) => {
+	shown,
+	async (isShown) => {
 		await nextTick()
-		updateBodyState(shown)
+		updateBodyState(isShown)
 		scheduleIntercomBubbleClearanceUpdate()
 	},
 	{ immediate: true },
@@ -175,7 +176,7 @@ onUnmounted(() => {
 					ref="toolbarEl"
 					role="toolbar"
 					:aria-label="ariaLabel"
-					class="relative overflow-clip flex items-center gap-2 rounded-[20px] bg-surface-3 border border-surface-5 border-solid mx-auto max-w-[60vw] px-4 py-3 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.3),0px_6px_10px_0px_rgba(0,0,0,0.15)]"
+					class="relative overflow-clip flex items-center gap-1.5 rounded-[20px] bg-surface-3 border border-surface-5 border-solid mx-auto max-w-[60vw] px-3 py-2.5 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.3),0px_6px_10px_0px_rgba(0,0,0,0.15)]"
 					:class="{ 'bar-compact': compact }"
 				>
 					<slot />

packages/ui/src/components/servers/InstallingBanner.vue

@@ -7,18 +7,13 @@
 		:waiting="isWaiting"
 		@dismiss="emit('dismiss')"
 	>
-		<template #icon>
-			<slot v-if="!contentError" name="icon">
-				<SpinnerIcon class="h-6 w-6 flex-none animate-spin text-brand-blue" />
-			</slot>
-		</template>
 		<template #header>
-			{{ contentError ? 'Installation failed' : "We're preparing your server" }}
+			{{ headerLabel }}
 		</template>
 		<template v-if="contentError">
 			{{ errorLabel }}
 		</template>
-		<template v-else-if="progress">{{ phaseLabel }}</template>
+		<template v-else-if="effectivePhase">{{ phaseLabel }}</template>
 		<div v-else class="ticker-container">
 			<div class="ticker-content">
 				<div
@@ -35,7 +30,7 @@
 			<ButtonStyled color="red" type="outlined">
 				<button class="!border" type="button" @click="emit('retry')">
 					<RotateCounterClockwiseIcon class="size-5" />
-					Retry
+					{{ formatMessage(commonMessages.retryButton) }}
 				</button>
 			</ButtonStyled>
 		</template>
@@ -44,9 +39,11 @@
 
 <script setup lang="ts">
 import { RotateCounterClockwiseIcon } from '@modrinth/assets'
-import SpinnerIcon from '@modrinth/assets/icons/spinner.svg'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
 import Admonition from '../base/Admonition.vue'
 import ButtonStyled from '../base/ButtonStyled.vue'
 
@@ -62,6 +59,7 @@ export interface ContentError {
 
 const props = defineProps<{
 	progress?: SyncProgress | null
+	fallbackPhase?: SyncProgress['phase'] | null
 	contentError?: ContentError | null
 	dismissible?: boolean
 }>()
@@ -71,44 +69,123 @@ const emit = defineEmits<{
 	dismiss: []
 }>()
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	errorHeader: {
+		id: 'servers.installing-banner.error.header',
+		defaultMessage: 'Installation failed',
+	},
+	preparingHeader: {
+		id: 'servers.installing-banner.preparing.header',
+		defaultMessage: "We're preparing your server",
+	},
+	invalidLoaderVersionError: {
+		id: 'servers.installing-banner.error.invalid-loader-version',
+		defaultMessage:
+			'The specified loader or Minecraft version could not be installed. It may be invalid or unsupported.',
+	},
+	unsupportedLoaderVersionError: {
+		id: 'servers.installing-banner.error.unsupported-loader-version',
+		defaultMessage: 'This version of Minecraft or loader is not yet supported by Modrinth Hosting.',
+	},
+	internalPlatformError: {
+		id: 'servers.installing-banner.error.internal-platform',
+		defaultMessage: 'An internal error occurred while installing the platform. Please try again.',
+	},
+	noPrimaryFileError: {
+		id: 'servers.installing-banner.error.no-primary-file',
+		defaultMessage:
+			'This modpack version does not include a downloadable file. It may have been packaged incorrectly.',
+	},
+	modpackInstallFailedError: {
+		id: 'servers.installing-banner.error.modpack-install-failed',
+		defaultMessage: 'The modpack could not be installed. It may be corrupted or incompatible.',
+	},
+	unknownError: {
+		id: 'servers.installing-banner.error.unknown',
+		defaultMessage: 'An unexpected error occurred during installation.',
+	},
+	installingPlatform: {
+		id: 'servers.installing-banner.phase.installing-platform',
+		defaultMessage: 'Installing platform...',
+	},
+	installingModpack: {
+		id: 'servers.installing-banner.phase.installing-modpack',
+		defaultMessage: 'Installing modpack...',
+	},
+	installingAddons: {
+		id: 'servers.installing-banner.phase.installing-addons',
+		defaultMessage: 'Installing addons...',
+	},
+	tickerOrganizingFiles: {
+		id: 'servers.installing-banner.ticker.organizing-files',
+		defaultMessage: 'Organizing files...',
+	},
+	tickerDownloadingMods: {
+		id: 'servers.installing-banner.ticker.downloading-mods',
+		defaultMessage: 'Downloading mods...',
+	},
+	tickerConfiguringServer: {
+		id: 'servers.installing-banner.ticker.configuring-server',
+		defaultMessage: 'Configuring server...',
+	},
+	tickerSettingUpEnvironment: {
+		id: 'servers.installing-banner.ticker.setting-up-environment',
+		defaultMessage: 'Setting up environment...',
+	},
+	tickerAddingJava: {
+		id: 'servers.installing-banner.ticker.adding-java',
+		defaultMessage: 'Adding Java...',
+	},
+})
+
 const errorLabel = computed(() => {
 	const desc = props.contentError?.description?.toLowerCase()
 	const step = props.contentError?.step
 
 	if (step === 'modloader') {
 		if (desc === 'the specified version may be incorrect') {
-			return 'The specified loader or Minecraft version could not be installed. It may be invalid or unsupported.'
+			return formatMessage(messages.invalidLoaderVersionError)
 		}
 		if (desc === 'this version is not yet supported') {
-			return 'This version of Minecraft or loader is not yet supported by Modrinth Hosting.'
+			return formatMessage(messages.unsupportedLoaderVersionError)
 		}
 		if (desc === 'internal error') {
-			return 'An internal error occurred while installing the platform. Please try again.'
+			return formatMessage(messages.internalPlatformError)
 		}
 	}
 
 	if (step === 'modpack') {
 		if (desc?.includes('no primary file')) {
-			return 'This modpack version does not include a downloadable file. It may have been packaged incorrectly.'
+			return formatMessage(messages.noPrimaryFileError)
 		}
 		if (desc?.includes('failed to install')) {
-			return 'The modpack could not be installed. It may be corrupted or incompatible.'
+			return formatMessage(messages.modpackInstallFailedError)
 		}
 	}
 
-	return props.contentError?.description ?? 'An unexpected error occurred during installation.'
+	return props.contentError?.description ?? formatMessage(messages.unknownError)
+})
+
+const effectivePhase = computed(() => props.progress?.phase ?? props.fallbackPhase ?? null)
+
+const headerLabel = computed(() => {
+	if (props.contentError) return formatMessage(messages.errorHeader)
+	if (effectivePhase.value === 'Addons') return formatMessage(commonMessages.installingContentLabel)
+	return formatMessage(messages.preparingHeader)
 })
 
 const phaseLabel = computed(() => {
-	switch (props.progress?.phase) {
+	switch (effectivePhase.value) {
 		case 'InstallingLoader':
-			return 'Installing platform...'
+			return formatMessage(messages.installingPlatform)
 		case 'InstallingPack':
-			return 'Installing modpack...'
+			return formatMessage(messages.installingModpack)
 		case 'Addons':
-			return 'Installing addons...'
+			return formatMessage(messages.installingAddons)
 		default:
-			return 'Installing...'
+			return formatMessage(commonMessages.installingLabel)
 	}
 })
 
@@ -122,13 +199,13 @@ const isWaiting = computed(() => {
 	return !props.progress || props.progress.percent <= 0
 })
 
-const tickerMessages = [
-	'Organizing files...',
-	'Downloading mods...',
-	'Configuring server...',
-	'Setting up environment...',
-	'Adding Java...',
-]
+const tickerMessages = computed(() => [
+	formatMessage(messages.tickerOrganizingFiles),
+	formatMessage(messages.tickerDownloadingMods),
+	formatMessage(messages.tickerConfiguringServer),
+	formatMessage(messages.tickerSettingUpEnvironment),
+	formatMessage(messages.tickerAddingJava),
+])
 
 const currentIndex = ref(0)
 
@@ -136,7 +213,7 @@ let intervalId: ReturnType<typeof setInterval> | null = null
 
 onMounted(() => {
 	intervalId = setInterval(() => {
-		currentIndex.value = (currentIndex.value + 1) % tickerMessages.length
+		currentIndex.value = (currentIndex.value + 1) % tickerMessages.value.length
 	}, 3000)
 })
 

packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue

@@ -6,7 +6,6 @@ import Admonition from '#ui/components/base/Admonition.vue'
 import StackedAdmonitions, {
 	type StackedAdmonitionItem,
 } from '#ui/components/base/StackedAdmonitions.vue'
-import { ServerIcon } from '#ui/components/servers/icons'
 import InstallingBanner, {
 	type ContentError,
 	type SyncProgress,
@@ -23,7 +22,6 @@ import UploadAdmonition from './UploadAdmonition.vue'
 const props = defineProps<{
 	syncProgress?: SyncProgress | null
 	contentError?: ContentError | null
-	serverImage?: string
 }>()
 
 const emit = defineEmits<{
@@ -59,7 +57,13 @@ const isOnContentTab = computed(() => route.path.includes('/content'))
 const isOnFilesTab = computed(() => route.path.includes('/files'))
 
 const bannerCoversInstalling = computed(
-	() => ctx.server.value?.status === 'installing' || ctx.isSyncingContent.value,
+	() =>
+		ctx.server.value?.status === 'installing' ||
+		ctx.isSyncingContent.value ||
+		ctx.busyReasons.value.some(
+			(r) =>
+				r.reason.id === 'servers.busy.installing' || r.reason.id === 'servers.busy.syncing-content',
+		),
 )
 
 function isBackupReason(id: string) {
@@ -165,8 +169,7 @@ type ServerAdmonitionItem = StackedAdmonitionItem & {
 
 const showInstallingBanner = computed(() => {
 	if (!ctx.server.value) return false
-	const installing =
-		ctx.server.value.status === 'installing' || ctx.isSyncingContent.value || !!props.contentError
+	const installing = bannerCoversInstalling.value || !!props.contentError
 	if (!installing) return false
 	if (contentErrorKey.value && dismissedContentErrorKey.value === contentErrorKey.value)
 		return false
@@ -366,15 +369,12 @@ function onContentErrorDismiss() {
 			<InstallingBanner
 				v-if="item.kind === 'installing'"
 				:progress="syncProgress"
+				:fallback-phase="isOnContentTab && !syncProgress ? 'Addons' : null"
 				:content-error="contentError"
 				:dismissible="dismissible && !!contentError"
 				@dismiss="onContentErrorDismiss"
 				@retry="emit('content-retry')"
-			>
-				<template #icon>
-					<ServerIcon :image="serverImage" class="!h-6 !w-6" />
-				</template>
-			</InstallingBanner>
+			/>
 			<UploadAdmonition v-else-if="item.kind === 'upload'" />
 			<FileOperationAdmonition
 				v-else-if="item.kind === 'fs-op'"

packages/ui/src/components/servers/server-header/use-server-power-action.ts

@@ -12,10 +12,20 @@ export type PowerAction = 'Start' | 'Stop' | 'Restart' | 'Kill'
 export function useServerPowerAction(options?: { disabled?: Ref<boolean> }) {
 	const { formatMessage } = useVIntl()
 	const client = injectModrinthClient()
-	const { serverId, server, powerState, busyReasons } = injectModrinthServerContext()
+	const { serverId, server, powerState, isSyncingContent, busyReasons } =
+		injectModrinthServerContext()
 	const { addNotification } = injectNotificationManager()
 
-	const isInstalling = computed(() => server.value.status === 'installing')
+	const isInstalling = computed(
+		() =>
+			server.value.status === 'installing' ||
+			isSyncingContent.value ||
+			busyReasons.value.some(
+				(r) =>
+					r.reason.id === 'servers.busy.installing' ||
+					r.reason.id === 'servers.busy.syncing-content',
+			),
+	)
 	const isRunning = computed(() => powerState.value === 'running')
 	const isStopping = computed(() => powerState.value === 'stopping')
 	const isStarting = computed(() => powerState.value === 'starting')

packages/ui/src/composables/virtual-scroll.ts

@@ -4,13 +4,21 @@ import { computed, ref, watch, watchEffect } from 'vue'
 export interface VirtualScrollOptions {
 	itemHeight: number
 	bufferSize?: number
+	initialItemCount?: number
 	enabled?: Ref<boolean>
 	onNearEnd?: () => void
 	nearEndThreshold?: number
 }
 
 export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptions) {
-	const { itemHeight, bufferSize = 5, enabled, onNearEnd, nearEndThreshold = 0.2 } = options
+	const {
+		itemHeight,
+		bufferSize = 5,
+		initialItemCount = 20,
+		enabled,
+		onNearEnd,
+		nearEndThreshold = 0.2,
+	} = options
 
 	const listContainer = ref<HTMLElement | null>(null)
 	const scrollContainer = ref<HTMLElement | Window | null>(null)
@@ -68,7 +76,9 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
 			return { start: 0, end: items.value.length }
 		}
 
-		if (!listContainer.value || !scrollContainer.value) return { start: 0, end: 0 }
+		if (!listContainer.value || !scrollContainer.value) {
+			return { start: 0, end: Math.min(items.value.length, initialItemCount) }
+		}
 
 		const relativeScrollTop = Math.max(0, scrollTop.value - containerOffset.value)
 

packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsFloatingBar.vue

@@ -0,0 +1,137 @@
+<template>
+	<FloatingActionBar
+		:shown="shown"
+		:aria-label="formatMessage(messages.ariaLabel)"
+		hide-when-modal-open
+	>
+		<div class="flex min-w-0 items-center gap-0.5">
+			<div
+				v-if="selectedCount > 0"
+				class="relative h-8 shrink-0"
+				:style="{ width: `${iconStackWidth}px` }"
+				aria-hidden="true"
+			>
+				<div
+					v-for="(project, index) in visibleProjects"
+					:key="project.id"
+					v-tooltip="project.name"
+					class="absolute top-0 flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg border-[1.5px] border-solid border-surface-3 bg-surface-4"
+					:style="{ left: `${index * iconStackOffset}px`, zIndex: visibleProjects.length - index }"
+				>
+					<Avatar
+						:src="project.iconUrl"
+						:alt="project.name"
+						:tint-by="project.id"
+						size="100%"
+						no-shadow
+						class="selected-project-avatar"
+					/>
+				</div>
+				<div
+					v-if="overflowCount > 0"
+					class="absolute top-0 flex h-8 w-8 items-center justify-center rounded-lg border-[1.5px] border-solid border-surface-3 bg-surface-4 text-xs font-bold text-contrast"
+					:style="{ left: `${visibleProjects.length * iconStackOffset}px`, zIndex: 0 }"
+				>
+					+{{ overflowCount }}
+				</div>
+			</div>
+
+			<span class="px-3 py-2 text-base font-semibold text-contrast tabular-nums">
+				{{ selectedCountText }}
+			</span>
+			<div class="mx-0.5 h-6 w-px bg-surface-5" />
+			<ButtonStyled type="transparent">
+				<button
+					type="button"
+					class="!text-primary"
+					:disabled="isInstallingSelected"
+					@click="clearSelected"
+				>
+					<span>{{ formatMessage(commonMessages.clearButton) }}</span>
+				</button>
+			</ButtonStyled>
+		</div>
+
+		<div class="ml-auto shrink-0">
+			<ButtonStyled color="green">
+				<button type="button" :disabled="isInstallingSelected" @click="installSelected">
+					<PlusIcon />
+					{{ installButtonText }}
+				</button>
+			</ButtonStyled>
+		</div>
+	</FloatingActionBar>
+</template>
+
+<script setup lang="ts">
+import { PlusIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import Avatar from '#ui/components/base/Avatar.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { injectBrowseManager } from '../providers/browse-manager'
+import type { BrowseInstallContext } from '../types'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	ariaLabel: {
+		id: 'browse.selected-projects-floating-bar.aria-label',
+		defaultMessage: 'Selected projects',
+	},
+	selectedCount: {
+		id: 'browse.selected-projects-floating-bar.selected-count',
+		defaultMessage: '{count, plural, one {# project selected} other {# projects selected}}',
+	},
+	installButton: {
+		id: 'browse.selected-projects-floating-bar.install',
+		defaultMessage: 'Install {count, plural, one {# project} other {# projects}}',
+	},
+})
+
+const props = defineProps<{
+	installContext?: BrowseInstallContext | null
+}>()
+
+const ctx = injectBrowseManager(null)
+const installContext = computed(() => props.installContext ?? ctx?.installContext?.value ?? null)
+const selectedProjects = computed(() => installContext.value?.selectedProjects ?? [])
+const selectedCount = computed(() => selectedProjects.value.length)
+const iconStackOffset = 24
+const isInstallingSelected = computed(() => installContext.value?.isInstallingSelected ?? false)
+const shown = computed(() => selectedCount.value > 0 && !isInstallingSelected.value)
+const visibleProjects = computed(() => selectedProjects.value.slice(0, 3))
+const overflowCount = computed(() => Math.max(0, selectedCount.value - 3))
+const iconStackWidth = computed(() => {
+	if (selectedCount.value === 0) return 0
+	return (
+		32 + (visibleProjects.value.length - 1 + (overflowCount.value > 0 ? 1 : 0)) * iconStackOffset
+	)
+})
+const selectedCountText = computed(() =>
+	formatMessage(messages.selectedCount, { count: selectedCount.value }),
+)
+const installButtonText = computed(() =>
+	formatMessage(messages.installButton, { count: selectedCount.value }),
+)
+
+function clearSelected() {
+	if (isInstallingSelected.value) return
+	void (installContext.value?.clearSelected ?? installContext.value?.clearQueued)?.()
+}
+
+function installSelected() {
+	if (isInstallingSelected.value) return
+	void installContext.value?.installSelected?.()
+}
+</script>
+
+<style scoped>
+:deep(.selected-project-avatar) {
+	background-color: var(--color-button-bg);
+}
+</style>

packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsLeaveModal.vue

@@ -0,0 +1,87 @@
+<template>
+	<NewModal ref="modal" fade="warning" :header="formatMessage(messages.header)" max-width="560px">
+		<div class="flex flex-col gap-6">
+			{{ formatMessage(messages.admonitionBody, { count }) }}
+		</div>
+
+		<template #actions>
+			<div class="flex flex-wrap justify-end gap-2">
+				<ButtonStyled type="outlined">
+					<button @click="resolve('cancel')">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button :disabled="installing" @click="resolve('discard')">
+						<TrashIcon />
+						{{ formatMessage(messages.discardButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="green">
+					<button :disabled="installing" @click="resolve('install')">
+						<PlusIcon />
+						{{ formatMessage(commonMessages.installButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { PlusIcon, TrashIcon, XIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'browse.selected-projects-leave-modal.header',
+		defaultMessage: 'Selected projects not installed yet',
+	},
+	admonitionHeader: {
+		id: 'browse.selected-projects-leave-modal.admonition-header',
+		defaultMessage: 'Selected projects not installed yet',
+	},
+	admonitionBody: {
+		id: 'browse.selected-projects-leave-modal.admonition-body',
+		defaultMessage:
+			'You have selected {count, plural, one {# project} other {# projects}} to install. Install them now or go back without installing them.',
+	},
+	discardButton: {
+		id: 'browse.selected-projects-leave-modal.discard',
+		defaultMessage: 'Discard',
+	},
+})
+
+defineProps<{
+	count: number
+	installing?: boolean
+}>()
+
+type SelectedProjectsLeaveResult = 'cancel' | 'discard' | 'install'
+
+const modal = ref<InstanceType<typeof NewModal>>()
+let resolvePromise: ((value: SelectedProjectsLeaveResult) => void) | null = null
+
+function prompt(): Promise<SelectedProjectsLeaveResult> {
+	return new Promise((resolve) => {
+		resolvePromise = resolve
+		modal.value?.show()
+	})
+}
+
+function resolve(result: SelectedProjectsLeaveResult) {
+	modal.value?.hide()
+	resolvePromise?.(result)
+	resolvePromise = null
+}
+
+defineExpose({ prompt })
+</script>

packages/ui/src/layouts/shared/browse-tab/composables/index.ts

@@ -1 +1,2 @@
+export * from './install-logic'
 export * from './use-browse-search'

packages/ui/src/layouts/shared/browse-tab/composables/install-logic.ts

@@ -0,0 +1,540 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+import type { FilterValue } from '#ui/utils/search'
+
+export type BrowseInstallContentType = 'modpack' | 'mod' | 'plugin' | 'datapack'
+export type BrowseInstallAddonContentType = Exclude<BrowseInstallContentType, 'modpack'>
+
+/**
+ * Indicates why a concrete version was selected.
+ *
+ * `filtered` means the current browse filters resolved the version.
+ * `target` means filter resolution failed or matched the target exactly, so the server/instance target won.
+ */
+export type BrowseInstallPlanSource = 'filtered' | 'target'
+
+/**
+ * Version constraints used during install resolution.
+ *
+ * Empty arrays and blank values are normalized away, so missing properties mean "do not constrain".
+ */
+export interface BrowseInstallPreferences {
+	gameVersions?: string[]
+	loaders?: string[]
+}
+
+/**
+ * Server or instance metadata that should be used as the fallback compatibility target.
+ */
+export interface BrowseInstallTarget {
+	gameVersion?: string | null
+	loader?: string | null
+}
+
+/**
+ * Minimal project shape needed by shared install resolution.
+ */
+export interface BrowseInstallProject {
+	project_id: string
+	latest_version?: string | null
+	version_id?: string | null
+	title?: string
+	name?: string
+	icon_url?: string | null
+}
+
+/**
+ * Fully resolved install work item.
+ *
+ * This is intentionally concrete so queued installs can be flushed later without re-resolving
+ * against filters that may have changed since the user clicked install.
+ */
+export interface BrowseInstallPlan<TProject extends BrowseInstallProject = BrowseInstallProject> {
+	project: TProject
+	projectId: string
+	versionId: string
+	versionName?: string
+	versionNumber?: string
+	fileName?: string
+	contentType: BrowseInstallContentType
+	preferences: BrowseInstallPreferences
+	source: BrowseInstallPlanSource
+}
+
+/**
+ * Small adapter around caller-owned queue state.
+ *
+ * Callers keep their own reactive storage; shared logic only replaces the whole map.
+ */
+export interface BrowseInstallQueue<TProject extends BrowseInstallProject = BrowseInstallProject> {
+	get: () => Map<string, BrowseInstallPlan<TProject>>
+	set: (plans: Map<string, BrowseInstallPlan<TProject>>) => void
+}
+
+/**
+ * Filter inputs for deriving selected install preferences.
+ *
+ * Provided filters come from a target context, and overridden filter types are ignored so user
+ * choices can replace the target-provided constraints.
+ */
+export interface SelectedInstallPreferencesOptions {
+	contentType: string
+	selectedFilters?: readonly FilterValue[]
+	providedFilters?: readonly FilterValue[]
+	overriddenProvidedFilterTypes?: readonly string[]
+}
+
+/**
+ * Inputs for resolving one concrete install plan.
+ *
+ * Version fetching is injected so this module stays platform-agnostic and can be used by both web
+ * and app frontends.
+ */
+export interface ResolveInstallPlanOptions<
+	TProject extends BrowseInstallProject,
+> extends SelectedInstallPreferencesOptions {
+	project: TProject
+	contentType: BrowseInstallContentType
+	targetPreferences?: BrowseInstallPreferences
+	getProjectVersions: (projectId: string) => Promise<Labrinth.Versions.v2.Version[]>
+}
+
+/**
+ * Install request wrapper around plan resolution.
+ *
+ * Queue mode stores the resolved plan; immediate mode passes it to the caller's install handler.
+ */
+export interface RequestInstallOptions<
+	TProject extends BrowseInstallProject,
+> extends ResolveInstallPlanOptions<TProject> {
+	mode: 'queue' | 'immediate'
+	queue?: BrowseInstallQueue<TProject>
+	install?: (plan: BrowseInstallPlan<TProject>) => void | Promise<void>
+}
+
+/**
+ * Inputs for committing queued plans without re-running version matching.
+ */
+export interface FlushInstallQueueOptions<TProject extends BrowseInstallProject> {
+	queue: BrowseInstallQueue<TProject>
+	install: (plan: BrowseInstallPlan<TProject>) => void | Promise<void>
+	onError?: (error: unknown, plan: BrowseInstallPlan<TProject>) => void
+	onProgress?: (
+		completed: number,
+		total: number,
+		plan: BrowseInstallPlan<TProject>,
+	) => void | Promise<void>
+}
+
+/**
+ * Result of a queue flush. Failed plans are also written back to the queue.
+ */
+export interface FlushInstallQueueResult<TProject extends BrowseInstallProject> {
+	ok: boolean
+	successfulPlans: BrowseInstallPlan<TProject>[]
+	failedPlans: Map<string, BrowseInstallPlan<TProject>>
+}
+
+interface InstallCandidate {
+	preferences: BrowseInstallPreferences
+	source: BrowseInstallPlanSource
+}
+
+/**
+ * Maps a project/content type to the browse filter keys that represent its loader.
+ */
+export function getLoaderFilterTypes(contentType: string) {
+	if (contentType === 'mod') return ['mod_loader']
+	if (contentType === 'plugin') return ['plugin_loader', 'plugin_platform']
+	if (contentType === 'modpack') return ['modpack_loader']
+	if (contentType === 'shader') return ['shader_loader']
+	return []
+}
+
+/**
+ * Merges user-selected filters with target-provided filters for install decisions.
+ *
+ * User filters win per filter type, provided filters are dropped when overridden, and negative
+ * filters are excluded because they are browse-only constraints.
+ */
+export function getEffectiveInstallFilters({
+	selectedFilters = [],
+	providedFilters = [],
+	overriddenProvidedFilterTypes = [],
+}: Omit<SelectedInstallPreferencesOptions, 'contentType'>) {
+	const effectiveProvidedFilters = providedFilters.filter(
+		(providedFilter) => !overriddenProvidedFilterTypes.includes(providedFilter.type),
+	)
+	const userFilters = selectedFilters.filter(
+		(userFilter) =>
+			!effectiveProvidedFilters.some((providedFilter) => providedFilter.type === userFilter.type),
+	)
+
+	return [...userFilters, ...effectiveProvidedFilters].filter((filter) => !filter.negative)
+}
+
+/**
+ * Converts effective browse filters into install preferences for a specific content type.
+ */
+export function getInstallPreferencesFromFilters(
+	contentType: string,
+	filters: readonly FilterValue[],
+): BrowseInstallPreferences {
+	const loaderFilterTypes = getLoaderFilterTypes(contentType)
+	const gameVersions = uniqueDefined(
+		filters.filter((filter) => filter.type === 'game_version').map((filter) => filter.option),
+	)
+	const loaders = uniqueDefined(
+		filters
+			.filter((filter) => loaderFilterTypes.includes(filter.type))
+			.map((filter) => filter.option),
+	)
+
+	return normalizeInstallPreferences({
+		gameVersions: gameVersions.length > 0 ? gameVersions : undefined,
+		loaders: loaders.length > 0 ? loaders : undefined,
+	})
+}
+
+/**
+ * Derives the preferences represented by the current browse selection plus active provided filters.
+ */
+export function getSelectedInstallPreferences(
+	options: SelectedInstallPreferencesOptions,
+): BrowseInstallPreferences {
+	return getInstallPreferencesFromFilters(options.contentType, getEffectiveInstallFilters(options))
+}
+
+/**
+ * Converts server/instance metadata into fallback install preferences.
+ */
+export function getTargetInstallPreferences(
+	target: BrowseInstallTarget,
+	contentType?: string,
+): BrowseInstallPreferences {
+	const gameVersion = target.gameVersion?.trim()
+	const loader = target.loader?.trim()
+	const shouldUseTargetRuntime = contentType !== 'modpack'
+
+	return normalizeInstallPreferences({
+		gameVersions: gameVersion && shouldUseTargetRuntime ? [gameVersion] : undefined,
+		loaders: loader && shouldUseTargetRuntime ? [loader] : undefined,
+	})
+}
+
+/**
+ * Normalizes loader identifiers so API and UI aliases compare consistently.
+ */
+export function normalizeLoaderAlias(loader: string) {
+	return loader.toLowerCase().replaceAll('_', '').replaceAll('-', '').replaceAll(' ', '')
+}
+
+/**
+ * Returns aliases that should be considered mutually compatible for install matching.
+ */
+export function getCompatibleLoaderAliases(loader: string) {
+	const normalized = normalizeLoaderAlias(loader)
+	if (!normalized) return new Set<string>()
+	if (['paper', 'purpur', 'spigot', 'bukkit'].includes(normalized)) {
+		return new Set(['paper', 'purpur', 'spigot', 'bukkit'])
+	}
+	if (normalized === 'neoforge' || normalized === 'neo') {
+		return new Set(['neoforge', 'neo'])
+	}
+	return new Set([normalized])
+}
+
+/**
+ * Checks whether selected filters conflict with the target constraints.
+ */
+export function preferencesDiffer(
+	selected: BrowseInstallPreferences,
+	target: BrowseInstallPreferences,
+) {
+	return (
+		preferencesConflict(selected.gameVersions, target.gameVersions) ||
+		loaderPreferencesConflict(selected.loaders, target.loaders)
+	)
+}
+
+/**
+ * Fills missing selected preferences from the target.
+ *
+ * This preserves the user's explicit filter choices while still constraining unconstrained axes to
+ * the server/instance target.
+ */
+export function mergeInstallPreferences(
+	selected: BrowseInstallPreferences,
+	target: BrowseInstallPreferences,
+): BrowseInstallPreferences {
+	return normalizeInstallPreferences({
+		gameVersions: selected.gameVersions?.length ? selected.gameVersions : target.gameVersions,
+		loaders: selected.loaders?.length ? selected.loaders : target.loaders,
+	})
+}
+
+/**
+ * Finds the newest version matching the given preferences.
+ */
+export function getLatestMatchingInstallVersion(
+	versions: readonly Labrinth.Versions.v2.Version[],
+	preferences: BrowseInstallPreferences,
+	contentType: string,
+) {
+	return [...versions]
+		.filter((version) => versionMatchesPreferences(version, preferences, contentType))
+		.sort((a, b) => new Date(b.date_published).getTime() - new Date(a.date_published).getTime())[0]
+}
+
+/**
+ * Resolves the concrete version to install.
+ *
+ * The resolver tries the filtered plan first, with target values filling any missing axes. If that
+ * cannot resolve and differs from the target, it falls back to the target-only plan.
+ */
+export async function resolveInstallPlan<TProject extends BrowseInstallProject>(
+	options: ResolveInstallPlanOptions<TProject>,
+): Promise<BrowseInstallPlan<TProject>> {
+	const projectId = options.project.project_id
+	if (!projectId) {
+		throw new Error('No project is available for install.')
+	}
+
+	const selectedPreferences = getSelectedInstallPreferences(options)
+	const targetPreferences = normalizeInstallPreferences(options.targetPreferences)
+	const candidates = getInstallCandidates(selectedPreferences, targetPreferences)
+	const versions = await options.getProjectVersions(projectId)
+	let lastError: Error | null = null
+
+	for (const candidate of candidates) {
+		const version = getLatestMatchingInstallVersion(
+			versions,
+			candidate.preferences,
+			options.contentType,
+		)
+
+		if (version) {
+			const fileName =
+				version.files.find((file) => file.primary)?.filename ?? version.files[0]?.filename
+			return {
+				project: options.project,
+				projectId,
+				versionId: version.id,
+				versionName: version.name,
+				versionNumber: version.version_number,
+				fileName,
+				contentType: options.contentType,
+				preferences: candidate.preferences,
+				source: candidate.source,
+			}
+		}
+
+		lastError = createNoCompatibleVersionError(options.contentType, candidate.preferences)
+	}
+
+	throw lastError ?? new Error('No version found for this project.')
+}
+
+/**
+ * Resolves and either queues or immediately installs a project.
+ *
+ * Queue replacement is keyed by project ID, so clicking install again after changing filters
+ * replaces the previously resolved plan.
+ */
+export async function requestInstall<TProject extends BrowseInstallProject>(
+	options: RequestInstallOptions<TProject>,
+) {
+	const plan = await resolveInstallPlan(options)
+
+	if (options.mode === 'queue') {
+		if (!options.queue) {
+			throw new Error('No install queue is available.')
+		}
+
+		const nextPlans = new Map(options.queue.get())
+		nextPlans.set(plan.projectId, plan)
+		options.queue.set(nextPlans)
+		return plan
+	}
+
+	await options.install?.(plan)
+	return plan
+}
+
+/**
+ * Commits queued install plans exactly as stored.
+ *
+ * Successful plans are removed; failed plans remain in the queue for retry or user action.
+ */
+export async function flushInstallQueue<TProject extends BrowseInstallProject>({
+	queue,
+	install,
+	onError,
+	onProgress,
+}: FlushInstallQueueOptions<TProject>): Promise<FlushInstallQueueResult<TProject>> {
+	const queuedPlans = Array.from(queue.get().values())
+	const failedPlans = new Map<string, BrowseInstallPlan<TProject>>()
+	const successfulPlans: BrowseInstallPlan<TProject>[] = []
+	let completed = 0
+
+	for (const plan of queuedPlans) {
+		try {
+			await install(plan)
+			successfulPlans.push(plan)
+		} catch (error) {
+			failedPlans.set(plan.projectId, plan)
+			onError?.(error, plan)
+		} finally {
+			completed++
+			await onProgress?.(completed, queuedPlans.length, plan)
+		}
+	}
+
+	queue.set(failedPlans)
+
+	return {
+		ok: failedPlans.size === 0,
+		successfulPlans,
+		failedPlans,
+	}
+}
+
+/**
+ * Builds the ordered resolution attempts for an install request.
+ */
+function getInstallCandidates(
+	selectedPreferences: BrowseInstallPreferences,
+	targetPreferences: BrowseInstallPreferences,
+): InstallCandidate[] {
+	const filteredPreferences = mergeInstallPreferences(selectedPreferences, targetPreferences)
+	const candidates: InstallCandidate[] = []
+
+	if (hasPreferences(filteredPreferences)) {
+		candidates.push({
+			preferences: filteredPreferences,
+			source: preferencesEquivalent(selectedPreferences, targetPreferences) ? 'target' : 'filtered',
+		})
+	} else {
+		candidates.push({ preferences: {}, source: 'filtered' })
+	}
+
+	if (
+		hasPreferences(targetPreferences) &&
+		preferencesDiffer(filteredPreferences, targetPreferences)
+	) {
+		candidates.push({ preferences: targetPreferences, source: 'target' })
+	}
+
+	return candidates
+}
+
+function hasPreferences(preferences: BrowseInstallPreferences) {
+	return !!preferences.gameVersions?.length || !!preferences.loaders?.length
+}
+
+function versionMatchesPreferences(
+	version: Labrinth.Versions.v2.Version,
+	preferences: BrowseInstallPreferences,
+	contentType: string,
+) {
+	const gameVersionMatches =
+		!preferences.gameVersions?.length ||
+		version.game_versions.some((gameVersion) => preferences.gameVersions?.includes(gameVersion))
+	if (!gameVersionMatches) return false
+	if (contentType === 'datapack') return true
+	if (!preferences.loaders?.length) return true
+
+	const compatibleLoaders = getCompatibleLoaderAliasSet(preferences.loaders)
+	return version.loaders.some((loader) => compatibleLoaders.has(normalizeLoaderAlias(loader)))
+}
+
+function preferencesConflict(
+	selected: readonly string[] | undefined,
+	target: readonly string[] | undefined,
+) {
+	if (!selected?.length || !target?.length) return false
+	return !selected.some((value) => target.includes(value))
+}
+
+function loaderPreferencesConflict(
+	selected: readonly string[] | undefined,
+	target: readonly string[] | undefined,
+) {
+	if (!selected?.length || !target?.length) return false
+	const selectedLoaders = getCompatibleLoaderAliasSet(selected)
+	const targetLoaders = getCompatibleLoaderAliasSet(target)
+	return !Array.from(selectedLoaders).some((loader) => targetLoaders.has(loader))
+}
+
+function preferencesEquivalent(
+	selected: BrowseInstallPreferences,
+	target: BrowseInstallPreferences,
+) {
+	return (
+		valueSetsEquivalent(selected.gameVersions, target.gameVersions) &&
+		loaderSetsEquivalent(selected.loaders, target.loaders)
+	)
+}
+
+function valueSetsEquivalent(
+	selected: readonly string[] | undefined,
+	target: readonly string[] | undefined,
+) {
+	return setsEquivalent(new Set(selected ?? []), new Set(target ?? []))
+}
+
+function loaderSetsEquivalent(
+	selected: readonly string[] | undefined,
+	target: readonly string[] | undefined,
+) {
+	return setsEquivalent(
+		getCompatibleLoaderAliasSet(selected ?? []),
+		getCompatibleLoaderAliasSet(target ?? []),
+	)
+}
+
+function getCompatibleLoaderAliasSet(loaders: readonly string[]) {
+	const aliases = new Set<string>()
+	for (const loader of loaders) {
+		for (const alias of getCompatibleLoaderAliases(loader)) {
+			aliases.add(alias)
+		}
+	}
+	return aliases
+}
+
+function setsEquivalent(a: Set<string>, b: Set<string>) {
+	if (a.size !== b.size) return false
+	return Array.from(a).every((value) => b.has(value))
+}
+
+function normalizeInstallPreferences(
+	preferences?: BrowseInstallPreferences,
+): BrowseInstallPreferences {
+	return {
+		gameVersions: uniqueDefined(preferences?.gameVersions),
+		loaders: uniqueDefined(preferences?.loaders),
+	}
+}
+
+function uniqueDefined(values: readonly (string | null | undefined)[] = []) {
+	return Array.from(
+		new Set(values.map((value) => value?.trim()).filter((value): value is string => !!value)),
+	)
+}
+
+function createNoCompatibleVersionError(
+	contentType: BrowseInstallContentType,
+	preferences: BrowseInstallPreferences,
+) {
+	const versionLabel = preferences.gameVersions?.length
+		? preferences.gameVersions.join(', ')
+		: 'any game version'
+	const loaderLabel = preferences.loaders?.length ? preferences.loaders.join(', ') : 'any loader'
+
+	return new Error(
+		contentType === 'datapack'
+			? `No compatible version found for ${versionLabel}.`
+			: `No compatible version found for ${versionLabel} / ${loaderLabel}.`,
+	)
+}

packages/ui/src/layouts/shared/browse-tab/header.vue

@@ -1,22 +1,29 @@
 <script setup lang="ts">
-import { GameIcon, LeftArrowIcon, MinecraftServerIcon } from '@modrinth/assets'
-import { computed } from 'vue'
+import { LeftArrowIcon } from '@modrinth/assets'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import ContentPageHeader from '#ui/components/base/ContentPageHeader.vue'
 import { useServerImage } from '#ui/composables/use-server-image'
 import { formatLoaderLabel } from '#ui/utils/loaders'
 
+import SelectedProjectsLeaveModal from './components/SelectedProjectsLeaveModal.vue'
 import { injectBrowseManager } from './providers/browse-manager'
+import type { BrowseInstallContext } from './types'
 
 const MEDAL_ICON_URL = 'https://cdn-raw.modrinth.com/medal_icon.webp'
 
-const ctx = injectBrowseManager()
 const router = useRouter()
-const installContext = computed(() => ctx.installContext?.value ?? null)
+const props = defineProps<{
+	installContext?: BrowseInstallContext | null
+}>()
+type SelectedProjectsLeaveResult = 'cancel' | 'discard' | 'install'
+
+const ctx = injectBrowseManager(null)
+const installContext = computed(() => props.installContext ?? ctx?.installContext?.value ?? null)
+const selectedProjectsLeaveModal = ref<InstanceType<typeof SelectedProjectsLeaveModal>>()
 
 const serverId = computed(() => installContext.value?.serverId ?? '')
 const upstream = computed(() => installContext.value?.upstream ?? null)
@@ -27,35 +34,97 @@ const { image: fetchedIcon } = useServerImage(serverId, upstream, {
 
 const iconSrc = computed(() => {
 	if (installContext.value?.isMedal) return MEDAL_ICON_URL
-	return fetchedIcon.value ?? installContext.value?.iconSrc ?? MinecraftServerIcon
+	return fetchedIcon.value ?? installContext.value?.iconSrc ?? null
 })
+
+const metadataItems = computed(() => {
+	const context = installContext.value
+	if (!context) return []
+	return [
+		context.heading,
+		context.gameVersion ? `MC ${context.gameVersion}` : '',
+		context.loader ? formatLoaderLabel(context.loader) : '',
+	].filter(Boolean)
+})
+
+const selectedCount = computed(() => installContext.value?.selectedProjects?.length ?? 0)
+const isInstallingSelected = computed(() => installContext.value?.isInstallingSelected ?? false)
+
+async function handleBack() {
+	const context = installContext.value
+	if (!context) return
+
+	if (selectedCount.value > 0 && !isInstallingSelected.value) {
+		const result = await selectedProjectsLeaveModal.value?.prompt()
+		await handleSelectedProjectsLeaveResult(result ?? 'cancel', context)
+		return
+	}
+
+	const shouldNavigate = await context.onBack?.()
+	if (shouldNavigate === false) return
+
+	await router.push(context.backUrl)
+}
+
+async function handleSelectedProjectsLeaveResult(
+	result: SelectedProjectsLeaveResult,
+	context: BrowseInstallContext,
+) {
+	if (result === 'cancel') return
+	if (result === 'install') {
+		const shouldNavigate = await context.installSelected?.()
+		if (shouldNavigate === false) return
+		return
+	}
+
+	if (context.discardSelectedAndBack) {
+		await context.discardSelectedAndBack()
+		return
+	}
+
+	await (context.clearSelected ?? context.clearQueued)?.()
+	await router.push(context.backUrl)
+}
 </script>
 
 <template>
 	<template v-if="installContext">
-		<ContentPageHeader class="mb-2">
-			<template #icon>
-				<Avatar :src="iconSrc" size="64px" />
-			</template>
-			<template #title>
-				{{ installContext.name }}
-			</template>
-			<template #summary>
-				<span class="flex items-center gap-2 text-sm font-semibold text-secondary">
-					<GameIcon class="h-5 w-5 text-secondary" />
-					{{ formatLoaderLabel(installContext.loader) }} {{ installContext.gameVersion }}
-				</span>
-			</template>
-			<template #actions>
-				<ButtonStyled>
-					<button @click="router.push(installContext.backUrl)">
-						<LeftArrowIcon />
-						{{ installContext.backLabel }}
-					</button>
-				</ButtonStyled>
-			</template>
-		</ContentPageHeader>
-		<h1 class="m-0 mb-1 text-xl font-extrabold">{{ installContext.heading }}</h1>
+		<SelectedProjectsLeaveModal
+			ref="selectedProjectsLeaveModal"
+			:count="selectedCount"
+			:installing="isInstallingSelected"
+		/>
+		<div class="flex flex-col gap-2">
+			<div class="flex flex-wrap items-center justify-between gap-4">
+				<div class="flex min-w-0 items-center gap-4">
+					<ButtonStyled circular size="large">
+						<button :aria-label="installContext.backLabel" @click="handleBack">
+							<LeftArrowIcon />
+						</button>
+					</ButtonStyled>
+
+					<Avatar v-if="iconSrc" :src="iconSrc" size="48px" class="shrink-0" />
+
+					<div class="flex min-w-0 flex-col justify-center gap-1">
+						<h1 class="m-0 truncate text-2xl font-semibold leading-8 text-contrast">
+							{{ installContext.name }}
+						</h1>
+						<div
+							v-if="metadataItems.length"
+							class="flex flex-wrap items-center gap-2 text-base font-medium leading-6 text-primary"
+						>
+							<template v-for="(item, index) in metadataItems" :key="item">
+								<span
+									v-if="index > 0"
+									class="h-1.5 w-1.5 shrink-0 rounded-full bg-current opacity-60"
+								/>
+								<span>{{ item }}</span>
+							</template>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 		<Admonition v-if="installContext.warning" type="warning" class="mb-1">
 			{{ installContext.warning }}
 		</Admonition>

packages/ui/src/layouts/shared/browse-tab/index.ts

@@ -1,3 +1,4 @@
+export { default as SelectedProjectsFloatingBar } from './components/SelectedProjectsFloatingBar.vue'
 export * from './composables'
 export { default as BrowseInstallHeader } from './header.vue'
 export { default as BrowsePageLayout } from './layout.vue'

packages/ui/src/layouts/shared/browse-tab/layout.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { SearchIcon } from '@modrinth/assets'
-import { computed, toValue } from 'vue'
+import { computed, ref, toValue } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
@@ -12,13 +12,23 @@ import StyledInput from '#ui/components/base/StyledInput.vue'
 import ProjectCard from '#ui/components/project/card/ProjectCard.vue'
 import ProjectCardList from '#ui/components/project/ProjectCardList.vue'
 import SearchFilterControl from '#ui/components/search/SearchFilterControl.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useStickyObserver } from '#ui/composables/sticky-observer'
+import { commonMessages } from '#ui/utils/common-messages'
 import type { SortType } from '#ui/utils/search'
 
+import SelectedProjectsFloatingBar from './components/SelectedProjectsFloatingBar.vue'
 import BrowseInstallHeader from './header.vue'
 import { injectBrowseManager } from './providers/browse-manager'
 
 const ctx = injectBrowseManager()
+const { formatMessage } = useVIntl()
 const lockedMessages = computed(() => toValue(ctx.lockedFilterMessages))
+const stickyInstallHeaderRef = ref<HTMLElement | null>(null)
+const { isStuck: isInstallHeaderStuck } = useStickyObserver(
+	stickyInstallHeaderRef,
+	'BrowseInstallHeader',
+)
 
 const sortOptions = computed<ComboboxOption<SortType>[]>(() =>
 	ctx.effectiveSortTypes.value.map((st) => ({
@@ -33,12 +43,43 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
 		label: String(n),
 	})),
 )
+
+const messages = defineMessages({
+	searchPlaceholder: {
+		id: 'browse.search.placeholder',
+		defaultMessage:
+			'Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} server {servers} other {projects}}...',
+	},
+	viewPrefix: {
+		id: 'browse.view-prefix',
+		defaultMessage: 'View:',
+	},
+	filterResults: {
+		id: 'browse.filter-results',
+		defaultMessage: 'Filter results...',
+	},
+	offline: {
+		id: 'browse.offline',
+		defaultMessage: 'You are currently offline. Connect to the internet to browse Modrinth!',
+	},
+	noResults: {
+		id: 'browse.no-results',
+		defaultMessage: 'No results found for your query!',
+	},
+})
 </script>
 
 <template>
 	<template v-if="ctx.installContext?.value && ctx.variant !== 'web'">
-		<BrowseInstallHeader />
+		<div
+			ref="stickyInstallHeaderRef"
+			class="sticky top-0 z-20 -mx-6 -mt-6 rounded-tl-[--radius-xl] border-0 border-b border-solid bg-surface-1 p-3 border-surface-5"
+			:class="[isInstallHeaderStuck ? 'border-t' : '']"
+		>
+			<BrowseInstallHeader />
+		</div>
 	</template>
+	<SelectedProjectsFloatingBar v-if="ctx.installContext?.value && ctx.variant !== 'web'" />
 
 	<NavTabs v-if="ctx.showProjectTypeTabs.value" :links="ctx.selectableProjectTypes.value" />
 
@@ -47,7 +88,7 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
 		:icon="SearchIcon"
 		type="text"
 		autocomplete="off"
-		:placeholder="`Search ${ctx.projectType.value}s...`"
+		:placeholder="formatMessage(messages.searchPlaceholder, { projectType: ctx.projectType.value })"
 		clearable
 		wrapper-class="w-full"
 		:input-class="ctx.variant === 'web' ? '!h-12' : 'h-12'"
@@ -62,7 +103,9 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
 			@update:model-value="(val: SortType) => (ctx.effectiveCurrentSortType.value = val)"
 		>
 			<template #prefix>
-				<span class="font-semibold text-primary">Sort by:</span>
+				<span class="font-semibold text-primary">{{
+					formatMessage(commonMessages.sortByLabel)
+				}}</span>
 			</template>
 		</Combobox>
 
@@ -70,17 +113,19 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
 			:model-value="ctx.maxResults.value"
 			:options="maxResultsOptions"
 			:class="ctx.variant === 'web' ? '!w-auto flex-grow md:flex-grow-0' : 'max-w-[9rem]'"
-			placeholder="View"
+			:placeholder="formatMessage(commonMessages.viewLabel)"
 			@update:model-value="(val: number) => (ctx.maxResults.value = val)"
 		>
 			<template #prefix>
-				<span class="font-semibold text-primary">View:</span>
+				<span class="font-semibold text-primary">{{ formatMessage(messages.viewPrefix) }}</span>
 			</template>
 		</Combobox>
 
 		<div v-if="ctx.filtersMenuOpen && !ctx.filtersMenuOpen.value" class="lg:hidden">
 			<ButtonStyled>
-				<button @click="ctx.filtersMenuOpen.value = true">Filter results...</button>
+				<button @click="ctx.filtersMenuOpen.value = true">
+					{{ formatMessage(messages.filterResults) }}
+				</button>
 			</ButtonStyled>
 		</div>
 
@@ -119,7 +164,7 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
 			<component :is="ctx.loadingComponent ?? LoadingIndicator" />
 		</section>
 		<section v-else-if="ctx.offline?.value && ctx.totalHits.value === 0" class="offline">
-			You are currently offline. Connect to the internet to browse Modrinth!
+			{{ formatMessage(messages.offline) }}
 		</section>
 		<section
 			v-else-if="
@@ -129,7 +174,7 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
 			"
 			class="offline"
 		>
-			<p>No results found for your query!</p>
+			<p>{{ formatMessage(messages.noResults) }}</p>
 		</section>
 
 		<ProjectCardList v-else :layout="ctx.effectiveLayout.value">

packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts

@@ -66,6 +66,9 @@ export interface BrowseManagerContext {
 	hideInstalled?: Ref<boolean>
 	showHideInstalled?: ComputedRef<boolean>
 	hideInstalledLabel?: ComputedRef<string>
+	hideSelected?: Ref<boolean>
+	showHideSelected?: ComputedRef<boolean>
+	hideSelectedLabel?: ComputedRef<string>
 	onInstalled?: (projectId: string) => void
 
 	displayMode?: Ref<'list' | 'grid' | 'gallery'> | ComputedRef<'list' | 'grid' | 'gallery'>

packages/ui/src/layouts/shared/browse-tab/sidebar.vue

@@ -5,10 +5,13 @@ import { computed, toValue } from 'vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import SearchSidebarFilter from '#ui/components/search/SearchSidebarFilter.vue'
+import { useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
 
 import { injectBrowseManager } from './providers/browse-manager'
 
 const ctx = injectBrowseManager()
+const { formatMessage } = useVIntl()
 
 const isApp = computed(() => ctx.variant === 'app')
 const lockedMessages = computed(() => toValue(ctx.lockedFilterMessages))
@@ -80,7 +83,7 @@ function getFilterOpenByDefault(filterId: string): boolean {
 			v-if="ctx.filtersMenuOpen?.value"
 			class="sticky top-0 z-10 mx-1 flex items-center justify-between gap-3 border-0 border-b-[1px] border-solid border-divider bg-bg-raised px-6 py-4"
 		>
-			<h3 class="m-0 text-lg text-contrast">Filters</h3>
+			<h3 class="m-0 text-lg text-contrast">{{ formatMessage(commonMessages.filtersLabel) }}</h3>
 			<ButtonStyled circular>
 				<button @click="closeFiltersMenu">
 					<XIcon />
@@ -89,16 +92,29 @@ function getFilterOpenByDefault(filterId: string): boolean {
 		</div>
 
 		<div
-			v-if="ctx.showHideInstalled?.value"
+			v-if="ctx.showHideInstalled?.value || ctx.showHideSelected?.value"
 			:class="
 				isApp
-					? 'border-0 border-b-[1px] p-4 last:border-b-0 border-[--brand-gradient-border] border-solid'
-					: 'card-shadow rounded-2xl bg-bg-raised p-4'
+					? 'flex flex-col gap-3 border-0 border-b-[1px] p-4 last:border-b-0 border-[--brand-gradient-border] border-solid'
+					: 'card-shadow flex flex-col gap-3 rounded-2xl bg-bg-raised p-4'
 			"
 		>
 			<Checkbox
+				v-if="ctx.showHideInstalled?.value"
 				v-model="ctx.hideInstalled!.value"
-				:label="ctx.hideInstalledLabel?.value ?? 'Hide already installed content'"
+				:label="
+					ctx.hideInstalledLabel?.value ?? formatMessage(commonMessages.hideInstalledContentLabel)
+				"
+				class="filter-checkbox"
+				@update:model-value="ctx.onFilterChange()"
+				@click.prevent.stop
+			/>
+			<Checkbox
+				v-if="ctx.showHideSelected?.value"
+				v-model="ctx.hideSelected!.value"
+				:label="
+					ctx.hideSelectedLabel?.value ?? formatMessage(commonMessages.hideSelectedContentLabel)
+				"
 				class="filter-checkbox"
 				@update:model-value="ctx.onFilterChange()"
 				@click.prevent.stop

packages/ui/src/layouts/shared/browse-tab/types.ts

@@ -12,6 +12,12 @@ export interface BrowseSearchResponse {
 	per_page: number
 }
 
+export interface BrowseSelectedProject {
+	id: string
+	name: string
+	iconUrl?: string | null
+}
+
 export interface BrowseInstallContext {
 	name: string
 	loader: string
@@ -24,6 +30,19 @@ export interface BrowseInstallContext {
 	backLabel: string
 	heading: string
 	warning?: string
+	queuedCount?: number
+	queuedLabel?: string
+	clearQueued?: () => void | Promise<void>
+	onBack?: () => boolean | void | Promise<boolean | void>
+	selectedProjects?: BrowseSelectedProject[]
+	isInstallingSelected?: boolean
+	installProgress?: {
+		completed: number
+		total: number
+	}
+	clearSelected?: () => void | Promise<void>
+	discardSelectedAndBack?: () => void | Promise<void>
+	installSelected?: () => boolean | void | Promise<boolean | void>
 }
 
 export interface CardAction {
@@ -32,7 +51,7 @@ export interface CardAction {
 	icon: Component
 	iconClass?: string
 	disabled?: boolean
-	color?: 'brand' | 'red'
+	color?: 'brand' | 'red' | 'green'
 	type?: 'standard' | 'outlined' | 'transparent'
 	circular?: boolean
 	tooltip?: string

packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue

@@ -21,7 +21,7 @@ import Checkbox from '#ui/components/base/Checkbox.vue'
 import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
 import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
 import Toggle from '#ui/components/base/Toggle.vue'
-import { useVIntl } from '#ui/composables/i18n'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 import { truncatedTooltip } from '#ui/utils/truncate'
 
@@ -34,6 +34,13 @@ import type {
 
 const { formatMessage } = useVIntl()
 
+const messages = defineMessages({
+	selectProject: {
+		id: 'content.card.select-project',
+		defaultMessage: 'Select {project}',
+	},
+})
+
 interface Props {
 	project: ContentCardProject
 	projectLink?: string | RouteLocationRaw
@@ -111,7 +118,10 @@ const deleteHovered = ref(false)
 	<div
 		role="row"
 		class="flex h-[74px] items-center justify-between gap-4 px-3"
-		:class="{ 'opacity-50': disabled }"
+		:class="{
+			'opacity-50 grayscale': disabled && !installing,
+			'opacity-50': installing,
+		}"
 	>
 		<div
 			class="flex min-w-0 items-center gap-4"
@@ -122,7 +132,7 @@ const deleteHovered = ref(false)
 			<Checkbox
 				v-if="showCheckbox"
 				:model-value="selected ?? false"
-				:aria-label="`Select ${project.title}`"
+				:aria-label="formatMessage(messages.selectProject, { project: project.title })"
 				class="shrink-0"
 				@update:model-value="selected = $event"
 			/>

packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue

@@ -89,6 +89,7 @@ const { listContainer, totalHeight, visibleRange, visibleTop, visibleItems } = u
 	{
 		itemHeight: 74,
 		bufferSize: 5,
+		initialItemCount: 20,
 		enabled: toRef(props, 'virtualized'),
 	},
 )

packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue

@@ -119,16 +119,18 @@ const collapsedOptions = computed(() => {
 
 const containerRef = ref<HTMLElement | null>(null)
 const isExpanded = ref(true)
-const observer = new ResizeObserver((entries) => {
-	for (const entry of entries) {
-		isExpanded.value = entry.contentRect.width >= 700
-	}
-})
+let observer: ResizeObserver | null = null
 onMounted(() => {
+	observer = new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			isExpanded.value = entry.contentRect.width >= 700
+		}
+	})
 	if (containerRef.value) observer.observe(containerRef.value)
 })
 onUnmounted(() => {
-	observer.disconnect()
+	observer?.disconnect()
+	observer = null
 })
 </script>
 

packages/ui/src/layouts/shared/content-tab/components/ContentSelectionBar.vue

@@ -2,6 +2,7 @@
 import { PowerIcon, PowerOffIcon, XIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
+import Avatar from '#ui/components/base/Avatar.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
@@ -93,6 +94,13 @@ const emit = defineEmits<{
 }>()
 
 const shown = computed(() => props.selectedItems.length > 0 || props.isBulkOperating)
+const iconStackOffset = 24
+const visibleItems = computed(() => props.selectedItems.slice(0, 3))
+const overflowCount = computed(() => Math.max(0, props.selectedItems.length - 3))
+const iconStackWidth = computed(() => {
+	if (props.selectedItems.length === 0) return 0
+	return 32 + (visibleItems.value.length - 1 + (overflowCount.value > 0 ? 1 : 0)) * iconStackOffset
+})
 
 const allDisabled = computed(() => props.selectedItems.every((m) => !m.enabled))
 const allEnabled = computed(() => props.selectedItems.every((m) => m.enabled))
@@ -130,10 +138,41 @@ const bulkProgressMessage = computed(() => {
 <template>
 	<FloatingActionBar :shown="shown" :aria-label="ariaLabel">
 		<div class="flex items-center gap-0.5">
-			<span class="px-4 py-2.5 text-base font-semibold text-contrast tabular-nums">
+			<div
+				v-if="selectedItems.length > 0"
+				class="relative h-8 shrink-0"
+				:style="{ width: `${iconStackWidth}px` }"
+				aria-hidden="true"
+			>
+				<div
+					v-for="(item, index) in visibleItems"
+					:key="item.id"
+					v-tooltip="item.project?.title ?? item.file_name"
+					class="absolute top-0 flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg border-[1.5px] border-solid border-surface-3 bg-surface-4"
+					:style="{ left: `${index * iconStackOffset}px`, zIndex: visibleItems.length - index }"
+				>
+					<Avatar
+						:src="item.project?.icon_url"
+						:alt="item.project?.title ?? item.file_name"
+						:tint-by="item.id"
+						size="100%"
+						no-shadow
+						class="selected-content-avatar"
+					/>
+				</div>
+				<div
+					v-if="overflowCount > 0"
+					class="absolute top-0 flex h-8 w-8 items-center justify-center rounded-lg border-[1.5px] border-solid border-surface-3 bg-surface-4 text-xs font-bold text-contrast"
+					:style="{ left: `${visibleItems.length * iconStackOffset}px`, zIndex: 0 }"
+				>
+					+{{ overflowCount }}
+				</div>
+			</div>
+
+			<span class="px-3 py-2 text-base font-semibold text-contrast tabular-nums">
 				{{ selectedCountText }}
 			</span>
-			<div class="mx-1 h-6 w-px bg-surface-5" />
+			<div class="mx-0.5 h-6 w-px bg-surface-5" />
 			<ButtonStyled type="transparent">
 				<button
 					v-tooltip="formatMessage(commonMessages.clearButton)"
@@ -223,4 +262,8 @@ const bulkProgressMessage = computed(() => {
 .animate-indeterminate {
 	animation: indeterminate 1.5s ease-in-out infinite;
 }
+
+:deep(.selected-content-avatar) {
+	background-color: var(--color-button-bg);
+}
 </style>

packages/ui/src/layouts/wrapped/hosting/manage/content.vue

@@ -2,11 +2,10 @@
 import type { Archon, Labrinth } from '@modrinth/api-client'
 import { ClipboardCopyIcon } from '@modrinth/assets'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
-import { useReadyState } from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import {
 	injectModrinthClient,
@@ -15,6 +14,12 @@ import {
 	injectServerSettingsModal,
 } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
+import {
+	type PendingServerContentInstall,
+	pendingServerContentInstallsEvent,
+	readPendingServerContentInstallBaseline,
+	readPendingServerContentInstalls,
+} from '#ui/utils/server-content-installing'
 
 import ConfirmModpackUpdateModal from '../../../shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue'
 import ConfirmUnlinkModal from '../../../shared/content-tab/components/modals/ConfirmUnlinkModal.vue'
@@ -31,6 +36,19 @@ import type {
 } from '../../../shared/content-tab/types'
 
 type AddonWithUiState = Archon.Content.v1.Addon & { installing?: boolean }
+type ContentOwnerAvatarSource = {
+	id: string
+	name: string
+	type: 'user' | 'organization'
+}
+const props = withDefaults(
+	defineProps<{
+		ownerAvatarUrlBase?: string
+	}>(),
+	{
+		ownerAvatarUrlBase: 'https://modrinth.com',
+	},
+)
 
 const { formatMessage } = useVIntl()
 
@@ -100,6 +118,11 @@ const type = computed(() => {
 
 const queryKey = computed(() => ['content', 'list', 'v1', serverId])
 
+function getContentOwnerAvatarUrl(owner: ContentOwnerAvatarSource) {
+	const ownerId = owner.type === 'user' ? owner.name || owner.id : owner.id
+	return `${props.ownerAvatarUrlBase}/${owner.type}/${encodeURIComponent(ownerId)}/avatar`
+}
+
 const contentQuery = useQuery({
 	queryKey,
 	queryFn: () =>
@@ -108,8 +131,6 @@ const contentQuery = useQuery({
 	staleTime: 0,
 })
 
-const contentReadyPending = useReadyState(contentQuery)
-
 const modpackProjectId = computed(() => {
 	const spec = contentQuery.data.value?.modpack?.spec
 	return spec?.platform === 'modrinth' ? spec.project_id : null
@@ -163,8 +184,8 @@ const modpack = computed<ContentModpackData | null>(() => {
 			? {
 					id: mp.owner.id,
 					name: mp.owner.name,
-					avatar_url: mp.owner.icon_url ?? undefined,
 					type: mp.owner.type,
+					avatar_url: getContentOwnerAvatarUrl(mp.owner),
 					link:
 						mp.owner.type === 'organization'
 							? `/organization/${mp.owner.id}`
@@ -202,8 +223,228 @@ const addonLookup = computed(() => {
 	return map
 })
 
-const contentItems = computed<ContentItem[]>(() => {
-	return (contentQuery.data.value?.addons ?? []).map(addonToContentItem)
+const pendingServerContentInstalls = ref<PendingServerContentInstall[]>([])
+const lastStableContentKeys = ref<Set<string>>(new Set())
+const contentInstallBaselineKeys = ref<Set<string> | null>(null)
+const contentInstallAddedKeys = ref<Set<string>>(new Set())
+
+function syncPendingServerContentInstalls() {
+	pendingServerContentInstalls.value = readPendingServerContentInstalls(serverId, worldId.value)
+}
+
+function handlePendingServerContentInstallsChanged(event: Event) {
+	const detail = (event as CustomEvent<{ serverId?: string | null; worldId?: string | null }>)
+		.detail
+	if (detail?.serverId !== serverId || detail?.worldId !== worldId.value) return
+	syncPendingServerContentInstalls()
+}
+
+function getAddonInstallKey(addon: Archon.Content.v1.Addon) {
+	return addon.project_id ?? addon.filename
+}
+
+function getAddonInstallKeys(addons: Archon.Content.v1.Addon[]) {
+	const keys = new Set<string>()
+	for (const addon of addons) {
+		keys.add(getAddonInstallKey(addon))
+	}
+	return keys
+}
+
+function syncContentInstallKeys(
+	addons: Archon.Content.v1.Addon[] = contentQuery.data.value?.addons ?? [],
+) {
+	const currentKeys = getAddonInstallKeys(addons)
+	if (isSyncingContent.value) {
+		if (!contentInstallBaselineKeys.value) {
+			contentInstallBaselineKeys.value =
+				readPendingServerContentInstallBaseline(serverId, worldId.value) ??
+				new Set(lastStableContentKeys.value)
+		}
+
+		const nextAddedKeys = new Set(contentInstallAddedKeys.value)
+		for (const key of currentKeys) {
+			if (!contentInstallBaselineKeys.value.has(key)) {
+				nextAddedKeys.add(key)
+			}
+		}
+		contentInstallAddedKeys.value = nextAddedKeys
+		return
+	}
+
+	lastStableContentKeys.value = currentKeys
+	contentInstallBaselineKeys.value = null
+	contentInstallAddedKeys.value = new Set()
+}
+
+function pendingInstallToContentItem(item: PendingServerContentInstall): ContentItem {
+	return {
+		project: {
+			id: item.projectId,
+			slug: item.slug ?? item.projectId,
+			title: item.title,
+			icon_url: item.iconUrl ?? undefined,
+		},
+		version: {
+			id: item.versionId,
+			version_number:
+				item.versionName ?? item.versionNumber ?? formatMessage(commonMessages.installingLabel),
+			file_name: item.fileName ?? formatMessage(commonMessages.installingLabel),
+		},
+		owner: item.owner
+			? {
+					id: item.owner.id,
+					name: item.owner.name,
+					type: item.owner.type,
+					avatar_url: getContentOwnerAvatarUrl(item.owner),
+					link: item.owner.link,
+				}
+			: undefined,
+		id: `installing:${item.projectId}`,
+		enabled: true,
+		file_name: `installing:${item.projectId}`,
+		project_type: item.contentType,
+		has_update: false,
+		update_version_id: null,
+		installing: true,
+	}
+}
+
+const rawContentItems = computed<ContentItem[]>(() => {
+	const addons = contentQuery.data.value?.addons ?? []
+	const pendingProjectIds = new Set(
+		pendingServerContentInstalls.value.map((item) => item.projectId),
+	)
+	const pendingInstallByProjectId = new Map(
+		pendingServerContentInstalls.value.map((item) => [item.projectId, item]),
+	)
+	const installingContentKeys = new Set([...pendingProjectIds, ...contentInstallAddedKeys.value])
+	const installedProjectIds = new Set(
+		addons.map((addon) => addon.project_id).filter((id): id is string => !!id),
+	)
+	const pendingItems = pendingServerContentInstalls.value
+		.filter((item) => !installedProjectIds.has(item.projectId))
+		.map(pendingInstallToContentItem)
+	const addonItems = addons.map((addon) => {
+		const contentItem = addonToContentItem(addon)
+		const installing = installingContentKeys.has(getAddonInstallKey(addon))
+		const pendingItem = addon.project_id ? pendingInstallByProjectId.get(addon.project_id) : null
+
+		if (!installing || !pendingItem) {
+			return {
+				...contentItem,
+				installing,
+			}
+		}
+
+		const pendingContentItem = pendingInstallToContentItem(pendingItem)
+		return {
+			...contentItem,
+			project: {
+				...contentItem.project,
+				slug: pendingContentItem.project.slug,
+				title: pendingContentItem.project.title,
+				icon_url: contentItem.project.icon_url ?? pendingContentItem.project.icon_url,
+			},
+			version: {
+				id: pendingContentItem.version?.id ?? contentItem.version?.id ?? contentItem.file_name,
+				version_number:
+					pendingContentItem.version?.version_number ??
+					contentItem.version?.version_number ??
+					formatMessage(commonMessages.installingLabel),
+				file_name:
+					pendingContentItem.version?.file_name ??
+					contentItem.version?.file_name ??
+					contentItem.file_name,
+			},
+			owner: pendingContentItem.owner ?? contentItem.owner,
+			installing,
+		}
+	})
+
+	return [...addonItems, ...pendingItems]
+})
+
+const displayedContentItems = ref<ContentItem[]>([])
+const contentItems = computed<ContentItem[]>(() => displayedContentItems.value)
+const contentReadyPending = computed(
+	() =>
+		contentQuery.isLoading.value &&
+		contentQuery.data.value === undefined &&
+		pendingServerContentInstalls.value.length === 0 &&
+		displayedContentItems.value.length === 0,
+)
+
+function getContentItemDisplayKey(item: ContentItem) {
+	return item.project?.id ?? item.file_name ?? item.id
+}
+
+function mergeFragileContentItems(items: ContentItem[]) {
+	const nextItems = new Map(items.map((item) => [getContentItemDisplayKey(item), item]))
+	const mergedItems = displayedContentItems.value.map((item) => {
+		const key = getContentItemDisplayKey(item)
+		const nextItem = nextItems.get(key)
+		if (!nextItem) return item
+
+		nextItems.delete(key)
+		return nextItem
+	})
+
+	return [...mergedItems, ...nextItems.values()]
+}
+
+watch(
+	[
+		rawContentItems,
+		isSyncingContent,
+		() => contentQuery.isFetching.value,
+		() => contentQuery.isLoading.value,
+	],
+	([items, syncing, isFetching, isLoading]) => {
+		if (syncing) {
+			if (items.length > 0) {
+				displayedContentItems.value = mergeFragileContentItems(items)
+			}
+			return
+		}
+
+		if (items.length > 0 || (!isFetching && !isLoading)) {
+			displayedContentItems.value = items
+		}
+	},
+	{ deep: true, immediate: true },
+)
+
+watch(
+	[isSyncingContent, () => contentQuery.data.value?.addons],
+	([, addons]) => {
+		syncContentInstallKeys(addons ?? [])
+	},
+	{ deep: true, immediate: true },
+)
+
+watch(
+	worldId,
+	() => {
+		syncPendingServerContentInstalls()
+		syncContentInstallKeys()
+	},
+	{ immediate: true },
+)
+
+onMounted(() => {
+	syncPendingServerContentInstalls()
+	window.addEventListener(
+		pendingServerContentInstallsEvent,
+		handlePendingServerContentInstallsChanged,
+	)
+})
+
+onUnmounted(() => {
+	window.removeEventListener(
+		pendingServerContentInstallsEvent,
+		handlePendingServerContentInstallsChanged,
+	)
 })
 
 const deleteMutation = useMutation({
@@ -471,7 +712,7 @@ function addonToContentItem(addon: AddonWithUiState): ContentItem {
 					id: addon.owner.id,
 					name: addon.owner.name,
 					type: addon.owner.type,
-					avatar_url: addon.owner.icon_url ?? undefined,
+					avatar_url: getContentOwnerAvatarUrl(addon.owner),
 					link: `/${addon.owner.type}/${addon.owner.id}`,
 				}
 			: undefined,
@@ -785,7 +1026,14 @@ provideContentManager({
 	isPackLocked: ref(false),
 	isBusy: computed(() => busyReasons.value.length > 0),
 	busyMessage: computed(() => {
-		const bannerCoversInstalling = server.value?.status === 'installing' || isSyncingContent.value
+		const bannerCoversInstalling =
+			server.value?.status === 'installing' ||
+			isSyncingContent.value ||
+			busyReasons.value.some(
+				(r) =>
+					r.reason.id === 'servers.busy.installing' ||
+					r.reason.id === 'servers.busy.syncing-content',
+			)
 		const filteredReasons = busyReasons.value.filter((r) => {
 			if (
 				bannerCoversInstalling &&
@@ -826,18 +1074,19 @@ provideContentManager({
 	mapToTableItem: (item) => {
 		const projectType = item.project_type ?? type.value
 		const addon = addonLookup.value.get(item.file_name)
-		const hasModrinthProject = !!addon?.project_id
+		const hasModrinthProject = !!addon?.project_id || (!!item.installing && !!item.project?.id)
+		const projectSlugOrId = item.project.slug ?? item.project.id
 		return {
 			id: item.id,
 			project: item.project,
-			projectLink: hasModrinthProject ? `/${projectType}/${item.project.id}` : undefined,
+			projectLink: hasModrinthProject ? `/${projectType}/${projectSlugOrId}` : undefined,
 			version: item.version,
 			versionLink:
 				hasModrinthProject && item.version?.id
-					? `/${projectType}/${item.project.id}/version/${item.version.id}`
+					? `/${projectType}/${projectSlugOrId}/version/${item.version.id}`
 					: undefined,
 			owner: item.owner
-				? { ...item.owner, link: `/${item.owner.type}/${item.owner.id}` }
+				? { ...item.owner, link: item.owner.link ?? `/${item.owner.type}/${item.owner.id}` }
 				: undefined,
 			enabled: item.enabled,
 		}

packages/ui/src/layouts/wrapped/hosting/manage/root.vue

@@ -311,7 +311,6 @@
 						class="mb-4"
 						:sync-progress="syncProgress"
 						:content-error="contentError"
-						:server-image="serverImage"
 						@content-retry="handleContentRetry"
 					/>
 					<slot :on-reinstall="onReinstall" :on-reinstall-failed="onReinstallFailed" />
@@ -404,6 +403,11 @@ import {
 	provideServerSettingsModal,
 } from '#ui/providers'
 import { formatLoaderLabel } from '#ui/utils/loaders'
+import {
+	pendingServerContentInstallsEvent,
+	readPendingServerContentInstalls,
+	writePendingServerContentInstalls,
+} from '#ui/utils/server-content-installing'
 
 import ServerOnboardingPanelPage from './[id]/onboarding.vue'
 
@@ -571,6 +575,8 @@ const { data: serverProject } = useServerProject(computed(() => serverData.value
 const syncProgress = ref<Archon.Websocket.v0.SyncContentProgress | null>(null)
 const contentError = ref<Archon.Websocket.v0.SyncContentError | null>(null)
 const syncProgressActive = ref(false)
+const hasPendingServerContentInstalls = ref(false)
+const hasSeenPendingServerContentSync = ref(false)
 const isAwaitingPostInstallRefresh = ref(false)
 const { start: startSyncHide, stop: cancelSyncHide } = useTimeoutFn(
 	() => (syncProgressActive.value = false),
@@ -582,15 +588,45 @@ watch(syncProgress, (progress) => {
 	if (progress != null) {
 		cancelSyncHide()
 		syncProgressActive.value = true
+		if (progress.phase !== 'Analyzing' && hasPendingServerContentInstalls.value) {
+			hasSeenPendingServerContentSync.value = true
+		}
 	} else if (syncProgressActive.value) {
 		startSyncHide()
+		if (hasSeenPendingServerContentSync.value) {
+			writePendingServerContentInstalls(props.serverId, worldId.value, [])
+			hasSeenPendingServerContentSync.value = false
+		}
 	}
 })
 
+watch(contentError, (error) => {
+	if (!error || !hasPendingServerContentInstalls.value) return
+	writePendingServerContentInstalls(props.serverId, worldId.value, [])
+	hasSeenPendingServerContentSync.value = false
+})
+
 const isSyncingContent = computed(
-	() => syncProgressActive.value || isAwaitingPostInstallRefresh.value,
+	() =>
+		syncProgressActive.value ||
+		isAwaitingPostInstallRefresh.value ||
+		hasPendingServerContentInstalls.value,
 )
 
+function syncPendingServerContentInstalls() {
+	hasPendingServerContentInstalls.value =
+		readPendingServerContentInstalls(props.serverId, worldId.value).length > 0
+}
+
+function handlePendingServerContentInstallsChanged(event: Event) {
+	const detail = (event as CustomEvent<{ serverId?: string | null; worldId?: string | null }>)
+		.detail
+	if (detail?.serverId !== props.serverId || detail?.worldId !== worldId.value) return
+	syncPendingServerContentInstalls()
+}
+
+watch(worldId, syncPendingServerContentInstalls, { immediate: true })
+
 let hasSeenInstallProgress = false
 
 const onStateEvent = (data: Archon.Websocket.v0.WSStateEvent) => {
@@ -1346,6 +1382,11 @@ const cleanup = () => {
 
 onMounted(() => {
 	isMounted.value = true
+	syncPendingServerContentInstalls()
+	window.addEventListener(
+		pendingServerContentInstallsEvent,
+		handlePendingServerContentInstallsChanged,
+	)
 
 	if (serverData.value) {
 		initializeServer()
@@ -1434,6 +1475,10 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+	window.removeEventListener(
+		pendingServerContentInstallsEvent,
+		handlePendingServerContentInstallsChanged,
+	)
 	cleanup()
 })
 </script>

packages/ui/src/locales/en-US/index.json

@@ -95,9 +95,48 @@
   "billing.resubscribe-modal.title": {
     "defaultMessage": "Resubscribe to Server"
   },
+  "browse.filter-results": {
+    "defaultMessage": "Filter results..."
+  },
+  "browse.no-results": {
+    "defaultMessage": "No results found for your query!"
+  },
+  "browse.offline": {
+    "defaultMessage": "You are currently offline. Connect to the internet to browse Modrinth!"
+  },
+  "browse.search.placeholder": {
+    "defaultMessage": "Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} server {servers} other {projects}}..."
+  },
+  "browse.selected-projects-floating-bar.aria-label": {
+    "defaultMessage": "Selected projects"
+  },
+  "browse.selected-projects-floating-bar.install": {
+    "defaultMessage": "Install {count, plural, one {# project} other {# projects}}"
+  },
+  "browse.selected-projects-floating-bar.selected-count": {
+    "defaultMessage": "{count, plural, one {# project selected} other {# projects selected}}"
+  },
+  "browse.selected-projects-leave-modal.admonition-body": {
+    "defaultMessage": "You have selected {count, plural, one {# project} other {# projects}} to install. Install them now or go back without installing them."
+  },
+  "browse.selected-projects-leave-modal.admonition-header": {
+    "defaultMessage": "Selected projects not installed yet"
+  },
+  "browse.selected-projects-leave-modal.discard": {
+    "defaultMessage": "Discard"
+  },
+  "browse.selected-projects-leave-modal.header": {
+    "defaultMessage": "Selected projects not installed yet"
+  },
+  "browse.view-prefix": {
+    "defaultMessage": "View:"
+  },
   "button.accept": {
     "defaultMessage": "Accept"
   },
+  "button.add-server-to-instance": {
+    "defaultMessage": "Add server to instance"
+  },
   "button.affiliate-links": {
     "defaultMessage": "Affiliate links"
   },
@@ -167,6 +206,9 @@
   "button.hide-snapshots": {
     "defaultMessage": "Hide snapshots"
   },
+  "button.install": {
+    "defaultMessage": "Install"
+  },
   "button.max": {
     "defaultMessage": "Max"
   },
@@ -185,6 +227,9 @@
   "button.open-in-folder": {
     "defaultMessage": "Open in folder"
   },
+  "button.open-in-modrinth": {
+    "defaultMessage": "Open in Modrinth"
+  },
   "button.play": {
     "defaultMessage": "Play"
   },
@@ -278,6 +323,9 @@
   "collections.label.private": {
     "defaultMessage": "Private"
   },
+  "content.card.select-project": {
+    "defaultMessage": "Select {project}"
+  },
   "content.confirm-bulk-update.admonition-body": {
     "defaultMessage": "Are you sure you want to update {count, plural, one {# project} other {# projects}} to their latest compatible version? It's recommended to update content one-by-one."
   },
@@ -1721,21 +1769,36 @@
   "label.filter-by": {
     "defaultMessage": "Filter by"
   },
+  "label.filters": {
+    "defaultMessage": "Filters"
+  },
   "label.followed-projects": {
     "defaultMessage": "Followed projects"
   },
   "label.game-version": {
     "defaultMessage": "Game version"
   },
+  "label.hide-installed-content": {
+    "defaultMessage": "Hide already installed content"
+  },
+  "label.hide-selected-content": {
+    "defaultMessage": "Hide selected content"
+  },
   "label.installation-info": {
     "defaultMessage": "Installation info"
   },
+  "label.installed": {
+    "defaultMessage": "Installed"
+  },
   "label.installed-modpack": {
     "defaultMessage": "Installed modpack"
   },
   "label.installing": {
     "defaultMessage": "Installing..."
   },
+  "label.installing-content": {
+    "defaultMessage": "Installing content"
+  },
   "label.loading": {
     "defaultMessage": "Loading..."
   },
@@ -1811,6 +1874,9 @@
   "label.select-all": {
     "defaultMessage": "Select all"
   },
+  "label.selected": {
+    "defaultMessage": "Selected"
+  },
   "label.selection-actions": {
     "defaultMessage": "Selection actions"
   },
@@ -1853,9 +1919,15 @@
   "label.username": {
     "defaultMessage": "Username"
   },
+  "label.validating": {
+    "defaultMessage": "Validating"
+  },
   "label.version": {
     "defaultMessage": "Version"
   },
+  "label.view": {
+    "defaultMessage": "View"
+  },
   "label.visibility": {
     "defaultMessage": "Visibility"
   },
@@ -3119,6 +3191,54 @@
   "servers.busy.syncing-content": {
     "defaultMessage": "Content sync in progress"
   },
+  "servers.installing-banner.error.header": {
+    "defaultMessage": "Installation failed"
+  },
+  "servers.installing-banner.error.internal-platform": {
+    "defaultMessage": "An internal error occurred while installing the platform. Please try again."
+  },
+  "servers.installing-banner.error.invalid-loader-version": {
+    "defaultMessage": "The specified loader or Minecraft version could not be installed. It may be invalid or unsupported."
+  },
+  "servers.installing-banner.error.modpack-install-failed": {
+    "defaultMessage": "The modpack could not be installed. It may be corrupted or incompatible."
+  },
+  "servers.installing-banner.error.no-primary-file": {
+    "defaultMessage": "This modpack version does not include a downloadable file. It may have been packaged incorrectly."
+  },
+  "servers.installing-banner.error.unknown": {
+    "defaultMessage": "An unexpected error occurred during installation."
+  },
+  "servers.installing-banner.error.unsupported-loader-version": {
+    "defaultMessage": "This version of Minecraft or loader is not yet supported by Modrinth Hosting."
+  },
+  "servers.installing-banner.phase.installing-addons": {
+    "defaultMessage": "Installing addons..."
+  },
+  "servers.installing-banner.phase.installing-modpack": {
+    "defaultMessage": "Installing modpack..."
+  },
+  "servers.installing-banner.phase.installing-platform": {
+    "defaultMessage": "Installing platform..."
+  },
+  "servers.installing-banner.preparing.header": {
+    "defaultMessage": "We're preparing your server"
+  },
+  "servers.installing-banner.ticker.adding-java": {
+    "defaultMessage": "Adding Java..."
+  },
+  "servers.installing-banner.ticker.configuring-server": {
+    "defaultMessage": "Configuring server..."
+  },
+  "servers.installing-banner.ticker.downloading-mods": {
+    "defaultMessage": "Downloading mods..."
+  },
+  "servers.installing-banner.ticker.organizing-files": {
+    "defaultMessage": "Organizing files..."
+  },
+  "servers.installing-banner.ticker.setting-up-environment": {
+    "defaultMessage": "Setting up environment..."
+  },
   "servers.list-empty.already-have-server-label": {
     "defaultMessage": "Already have a server?"
   },

packages/ui/src/utils/common-messages.ts

@@ -29,6 +29,10 @@ export const commonMessages = defineMessages({
 		id: 'project-type.all',
 		defaultMessage: 'All',
 	},
+	addServerToInstanceButton: {
+		id: 'button.add-server-to-instance',
+		defaultMessage: 'Add server to instance',
+	},
 	backButton: {
 		id: 'button.back',
 		defaultMessage: 'Back',
@@ -133,6 +137,10 @@ export const commonMessages = defineMessages({
 		id: 'label.filter-by',
 		defaultMessage: 'Filter by',
 	},
+	filtersLabel: {
+		id: 'label.filters',
+		defaultMessage: 'Filters',
+	},
 	followButton: {
 		id: 'button.follow',
 		defaultMessage: 'Follow',
@@ -189,6 +197,10 @@ export const commonMessages = defineMessages({
 		id: 'button.open-folder',
 		defaultMessage: 'Open folder',
 	},
+	openInModrinthButton: {
+		id: 'button.open-in-modrinth',
+		defaultMessage: 'Open in Modrinth',
+	},
 	orLabel: {
 		id: 'label.or',
 		defaultMessage: 'or',
@@ -385,6 +397,34 @@ export const commonMessages = defineMessages({
 		id: 'label.installation-info',
 		defaultMessage: 'Installation info',
 	},
+	installButton: {
+		id: 'button.install',
+		defaultMessage: 'Install',
+	},
+	installedLabel: {
+		id: 'label.installed',
+		defaultMessage: 'Installed',
+	},
+	validatingLabel: {
+		id: 'label.validating',
+		defaultMessage: 'Validating',
+	},
+	selectedLabel: {
+		id: 'label.selected',
+		defaultMessage: 'Selected',
+	},
+	installingContentLabel: {
+		id: 'label.installing-content',
+		defaultMessage: 'Installing content',
+	},
+	hideInstalledContentLabel: {
+		id: 'label.hide-installed-content',
+		defaultMessage: 'Hide already installed content',
+	},
+	hideSelectedContentLabel: {
+		id: 'label.hide-selected-content',
+		defaultMessage: 'Hide selected content',
+	},
 	installedModpackTitle: {
 		id: 'label.installed-modpack',
 		defaultMessage: 'Installed modpack',
@@ -451,6 +491,10 @@ export const commonMessages = defineMessages({
 		id: 'label.version',
 		defaultMessage: 'Version',
 	},
+	viewLabel: {
+		id: 'label.view',
+		defaultMessage: 'View',
+	},
 	projectLabel: {
 		id: 'label.project',
 		defaultMessage: 'Project',

packages/ui/src/utils/index.ts

@@ -7,6 +7,7 @@ export * from './loaders'
 export * from './notices'
 export * from './savable'
 export * from './search'
+export * from './server-content-installing'
 export * from './server-search'
 export * from './tag-messages'
 export * from './truncate'

packages/ui/src/utils/server-content-installing.ts

@@ -0,0 +1,203 @@
+import type {
+	ContentCardProject,
+	ContentCardVersion,
+	ContentOwner,
+} from '../layouts/shared/content-tab/types'
+
+export type PendingServerContentInstallType = 'mod' | 'plugin' | 'datapack'
+type PendingServerContentOwner = Omit<ContentOwner, 'link'> & { link?: string }
+
+export interface PendingServerContentInstall {
+	projectId: string
+	versionId: string
+	contentType: PendingServerContentInstallType
+	title: ContentCardProject['title']
+	versionName?: ContentCardVersion['version_number'] | null
+	versionNumber?: ContentCardVersion['version_number'] | null
+	fileName?: ContentCardVersion['file_name'] | null
+	owner?: PendingServerContentOwner | null
+	slug?: ContentCardProject['slug'] | null
+	iconUrl?: ContentCardProject['icon_url'] | null
+	createdAt: number
+}
+
+interface PendingServerContentInstallBaseline {
+	contentKeys: string[]
+	projectIds?: string[]
+	createdAt: number
+}
+
+export const pendingServerContentInstallsEvent = 'modrinth:pending-server-content-installs'
+
+const stalePendingInstallAge = 30 * 60 * 1000
+
+function getPendingServerContentInstallsKey(serverId: string | null, worldId: string | null) {
+	if (!serverId || !worldId) return null
+	return `server-content-installing:${serverId}:${worldId}`
+}
+
+function getPendingServerContentInstallBaselineKey(
+	serverId: string | null,
+	worldId: string | null,
+) {
+	if (!serverId || !worldId) return null
+	return `server-content-installing-baseline:${serverId}:${worldId}`
+}
+
+function isPendingServerContentInstall(value: unknown): value is PendingServerContentInstall {
+	if (!value || typeof value !== 'object') return false
+	const record = value as Record<string, unknown>
+	return (
+		typeof record.projectId === 'string' &&
+		typeof record.versionId === 'string' &&
+		(record.contentType === 'mod' ||
+			record.contentType === 'plugin' ||
+			record.contentType === 'datapack') &&
+		typeof record.title === 'string' &&
+		typeof record.createdAt === 'number'
+	)
+}
+
+function isPendingServerContentInstallBaseline(
+	value: unknown,
+): value is PendingServerContentInstallBaseline {
+	if (!value || typeof value !== 'object') return false
+	const record = value as Record<string, unknown>
+	const contentKeys = record.contentKeys ?? record.projectIds
+	return (
+		Array.isArray(contentKeys) &&
+		contentKeys.every((contentKey) => typeof contentKey === 'string') &&
+		typeof record.createdAt === 'number'
+	)
+}
+
+function filterFreshPendingServerContentInstalls(items: PendingServerContentInstall[]) {
+	const cutoff = Date.now() - stalePendingInstallAge
+	return items.filter((item) => item.createdAt >= cutoff)
+}
+
+function isFreshPendingServerContentInstallBaseline(item: PendingServerContentInstallBaseline) {
+	return item.createdAt >= Date.now() - stalePendingInstallAge
+}
+
+function emitPendingServerContentInstallsChanged(serverId: string | null, worldId: string | null) {
+	if (typeof window === 'undefined') return
+	window.dispatchEvent(
+		new CustomEvent(pendingServerContentInstallsEvent, {
+			detail: { serverId, worldId },
+		}),
+	)
+}
+
+export function readPendingServerContentInstalls(serverId: string | null, worldId: string | null) {
+	const key = getPendingServerContentInstallsKey(serverId, worldId)
+	if (!key || typeof localStorage === 'undefined') return []
+
+	try {
+		const raw = localStorage.getItem(key)
+		if (!raw) return []
+		const parsed = JSON.parse(raw)
+		if (!Array.isArray(parsed)) return []
+		const freshItems = filterFreshPendingServerContentInstalls(
+			parsed.filter(isPendingServerContentInstall),
+		)
+		if (freshItems.length !== parsed.length) {
+			writePendingServerContentInstalls(serverId, worldId, freshItems)
+		}
+		return freshItems
+	} catch {
+		return []
+	}
+}
+
+export function writePendingServerContentInstalls(
+	serverId: string | null,
+	worldId: string | null,
+	items: PendingServerContentInstall[],
+) {
+	const key = getPendingServerContentInstallsKey(serverId, worldId)
+	if (!key || typeof localStorage === 'undefined') return
+
+	const freshItems = filterFreshPendingServerContentInstalls(items)
+	if (freshItems.length === 0) {
+		localStorage.removeItem(key)
+		const baselineKey = getPendingServerContentInstallBaselineKey(serverId, worldId)
+		if (baselineKey) {
+			localStorage.removeItem(baselineKey)
+		}
+	} else {
+		localStorage.setItem(key, JSON.stringify(freshItems))
+	}
+	emitPendingServerContentInstallsChanged(serverId, worldId)
+}
+
+export function readPendingServerContentInstallBaseline(
+	serverId: string | null,
+	worldId: string | null,
+) {
+	const key = getPendingServerContentInstallBaselineKey(serverId, worldId)
+	if (!key || typeof localStorage === 'undefined') return null
+
+	try {
+		const raw = localStorage.getItem(key)
+		if (!raw) return null
+		const parsed = JSON.parse(raw)
+		if (!isPendingServerContentInstallBaseline(parsed)) return null
+		if (!isFreshPendingServerContentInstallBaseline(parsed)) {
+			localStorage.removeItem(key)
+			return null
+		}
+		return new Set(parsed.contentKeys ?? parsed.projectIds)
+	} catch {
+		return null
+	}
+}
+
+export function writePendingServerContentInstallBaseline(
+	serverId: string | null,
+	worldId: string | null,
+	contentKeys: Iterable<string>,
+) {
+	const key = getPendingServerContentInstallBaselineKey(serverId, worldId)
+	if (!key || typeof localStorage === 'undefined') return
+
+	localStorage.setItem(
+		key,
+		JSON.stringify({
+			contentKeys: Array.from(new Set(contentKeys)),
+			createdAt: Date.now(),
+		} satisfies PendingServerContentInstallBaseline),
+	)
+	emitPendingServerContentInstallsChanged(serverId, worldId)
+}
+
+export function addPendingServerContentInstalls(
+	serverId: string | null,
+	worldId: string | null,
+	items: Omit<PendingServerContentInstall, 'createdAt'>[],
+) {
+	if (items.length === 0) return
+
+	const now = Date.now()
+	const next = new Map(
+		readPendingServerContentInstalls(serverId, worldId).map((item) => [item.projectId, item]),
+	)
+	for (const item of items) {
+		next.set(item.projectId, { ...item, createdAt: now })
+	}
+	writePendingServerContentInstalls(serverId, worldId, Array.from(next.values()))
+}
+
+export function removePendingServerContentInstall(
+	serverId: string | null,
+	worldId: string | null,
+	projectId: string,
+) {
+	writePendingServerContentInstalls(
+		serverId,
+		worldId,
+		readPendingServerContentInstalls(serverId, worldId).filter(
+			(item) => item.projectId !== projectId,
+		),
+	)
+}