Fmt

Merge branch 'main' into patch-1
feat: changelog 0.13.3 (#6055 )
2026-08-01 13:45:53 +00:00 · 2026-05-09 17:09:10 -04:00 · 2026-05-09 14:01:54 -07:00 · 2026-05-09 19:13:37 +00:00 · 2026-05-09 19:01:23 +00:00 · 2026-05-09 18:34:26 +00:00
126 changed files with 8906 additions and 2511 deletions
@@ -0,0 +1,125 @@
+name: API client release
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - .github/workflows/api-client-release.yml
+      - packages/api-client/**
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  release:
+    if: github.repository_owner == 'modrinth' && github.ref == 'refs/heads/main'
+    # npm Trusted Publishing requires a GitHub-hosted runner.
+    runs-on: ubuntu-latest
+    env:
+      FORCE_COLOR: 3
+      PACKAGE_DIR: packages/api-client
+      PACKAGE_NAME: '@modrinth/api-client'
+      BUMP_TYPE: minor
+    steps:
+      - name: Check out code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
+
+      - name: Check for api-client changes
+        id: changes
+        run: |
+          if [ "${{ github.event.before }}" = "0000000000000000000000000000000000000000" ]; then
+            echo "changed=true" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          if git diff --quiet "${{ github.event.before }}" "$GITHUB_SHA" -- "$PACKAGE_DIR"; then
+            echo "changed=false" >> "$GITHUB_OUTPUT"
+          else
+            echo "changed=true" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Setup Node
+        if: steps.changes.outputs.changed == 'true'
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: .nvmrc
+          registry-url: https://registry.npmjs.org
+
+      - name: Enable Corepack
+        if: steps.changes.outputs.changed == 'true'
+        run: corepack enable
+
+      - name: Get pnpm store path
+        if: steps.changes.outputs.changed == 'true'
+        id: pnpm-store
+        run: echo "store-path=$(pnpm store path --silent)" >> "$GITHUB_OUTPUT"
+
+      - name: Restore pnpm cache
+        if: steps.changes.outputs.changed == 'true'
+        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ${{ steps.pnpm-store.outputs.store-path }}
+          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-cache-
+
+      - name: Install dependencies
+        if: steps.changes.outputs.changed == 'true'
+        run: pnpm install --frozen-lockfile --filter @modrinth/api-client...
+
+      - name: Resolve release version
+        if: steps.changes.outputs.changed == 'true'
+        id: version
+        run: |
+          CURRENT_VERSION_JSON="$(npm view "${PACKAGE_NAME}" version --json)"
+          CURRENT_VERSION="$(
+            jq -nr \
+              --argjson version "$CURRENT_VERSION_JSON" \
+              'if ($version | type) == "array" then $version[-1] else $version end'
+          )"
+
+          NEXT_VERSION="$(
+            jq -nr \
+              --arg version "$CURRENT_VERSION" \
+              --arg bump "$BUMP_TYPE" '
+                def semver:
+                  capture("^(?<major>[0-9]+)\\.(?<minor>[0-9]+)\\.(?<patch>[0-9]+)$")
+                  | with_entries(.value |= tonumber);
+
+                ($version | semver) as $current
+                | if $bump == "major" then "\($current.major + 1).0.0"
+                  elif $bump == "minor" then "\($current.major).\($current.minor + 1).0"
+                  elif $bump == "patch" then "\($current.major).\($current.minor).\($current.patch + 1)"
+                  else error("Unsupported bump type: \($bump)")
+                  end
+              '
+          )"
+
+          PACKAGE_JSON="$(mktemp)"
+          jq --tab --arg version "$NEXT_VERSION" '.version = $version' "$PACKAGE_DIR/package.json" > "$PACKAGE_JSON"
+          mv "$PACKAGE_JSON" "$PACKAGE_DIR/package.json"
+
+          echo "current_version=$CURRENT_VERSION" >> "$GITHUB_OUTPUT"
+          echo "published_version=$CURRENT_VERSION" >> "$GITHUB_OUTPUT"
+          echo "version=$NEXT_VERSION" >> "$GITHUB_OUTPUT"
+
+      - name: Build api-client
+        if: steps.changes.outputs.changed == 'true'
+        run: pnpm --filter @modrinth/api-client build
+
+      - name: Check package contents
+        if: steps.changes.outputs.changed == 'true'
+        working-directory: packages/api-client
+        run: pnpm pack --dry-run
+
+      - name: Publish api-client
+        if: steps.changes.outputs.changed == 'true'
+        working-directory: packages/api-client
+        run: pnpm publish --access public --provenance --no-git-checks
@@ -51,9 +51,10 @@ import {
 	providePageContext,
 	providePopupNotificationManager,
 	useDebugLogger,
+	useFormatBytes,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatBytes, renderString } from '@modrinth/utils'
+import { renderString } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
 import { invoke } from '@tauri-apps/api/core'
@@ -146,8 +147,9 @@ const popupNotificationManager = new AppPopupNotificationManager()
 providePopupNotificationManager(popupNotificationManager)
 const { addPopupNotification } = popupNotificationManager

+const appVersion = getVersion()
 const tauriApiClient = new TauriModrinthClient({
-	userAgent: `modrinth/theseus/${getVersion()} (support@modrinth.com)`,
+	userAgent: async () => `modrinth/theseus/${await appVersion} (support@modrinth.com)`,
 	labrinthBaseUrl: config.labrinthBaseUrl,
 	archonBaseUrl: config.archonBaseUrl,
 	features: [
@@ -261,6 +263,8 @@ onUnmounted(async () => {
 })

 const { formatMessage } = useVIntl()
+const formatBytes = useFormatBytes()
+
 const messages = defineMessages({
 	updateInstalledToastTitle: {
 		id: 'app.update.complete-toast.title',
@@ -1567,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] {
@@ -1657,10 +1665,11 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	height: 100%;
 	overflow: auto;
 	overflow-x: hidden;
+	scrollbar-gutter: stable;
 }

 .app-contents::before {
-	z-index: 1;
+	z-index: 30;
 	content: '';
 	position: fixed;
 	left: var(--left-bar-width);
@@ -149,7 +149,7 @@ const handleOptionsClick = async (args) => {
 			break
 		case 'edit':
 			await router.push({
-				path: `/instance/${encodeURIComponent(args.item.path)}/`,
+				path: `/instance/${encodeURIComponent(args.item.path)}`,
 			})
 			break
 		case 'duplicate':
@@ -1,6 +1,7 @@
 <script setup>
-import { PlusIcon, XIcon } from '@modrinth/assets'
+import { WrenchIcon, XIcon } from '@modrinth/assets'
 import {
+	Accordion,
 	ButtonStyled,
 	Checkbox,
 	commonMessages,
@@ -9,7 +10,7 @@ import {
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
+import { save } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'

 import { PackageIcon, VersionIcon } from '@/assets/icons'
@@ -40,9 +41,13 @@ const messages = defineMessages({
 	},
 	selectFilesLabel: {
 		id: 'app.export-modal.select-files-label',
-		defaultMessage: 'Select files and folders to include in pack',
+		defaultMessage: 'Configure which files are included in this export',
 	},
 	exportButton: { id: 'app.export-modal.export-button', defaultMessage: 'Export' },
+	includeFile: {
+		id: 'app.export-modal.include-file-accessibility-label',
+		defaultMessage: 'Include "{file}"?',
+	},
 })

 const props = defineProps({
@@ -65,7 +70,6 @@ const exportDescription = ref('')
 const versionInput = ref('1.0.0')
 const files = ref([])
 const folders = ref([])
-const showingFiles = ref(false)

 const initFiles = async () => {
 	const newFolders = new Map()
@@ -87,7 +91,12 @@ const initFiles = async () => {
 					folder.startsWith('modrinth_logs') ||
 					folder.startsWith('.fabric'),
 			}))
-			.filter((pathData) => !pathData.path.includes('.DS_Store'))
+			.filter(
+				(pathData) =>
+					!pathData.path.includes('.DS_Store') &&
+					pathData.path !== 'mods/.connector' &&
+					!pathData.path.startsWith('mods/.connector/'),
+			)
 			.forEach((pathData) => {
 				const parent = pathData.path.split(sep).slice(0, -1).join(sep)
 				if (parent !== '') {
@@ -121,15 +130,20 @@ const exportPack = async () => {
 			}
 		})
 	})
-	const outputPath = await open({
-		directory: true,
-		multiple: false,
+	const outputPath = await save({
+		defaultPath: `${nameInput.value} ${versionInput.value}.mrpack`,
+		filters: [
+			{
+				name: 'Modrinth Modpack',
+				extensions: ['mrpack'],
+			},
+		],
 	})

 	if (outputPath) {
 		export_profile_mrpack(
 			props.instance.path,
-			outputPath + `/${nameInput.value} ${versionInput.value}.mrpack`,
+			outputPath,
 			filesToExport,
 			versionInput.value,
 			exportDescription.value,
@@ -142,97 +156,91 @@ const exportPack = async () => {

 <template>
 	<ModalWrapper ref="exportModal" :header="formatMessage(messages.header)">
-		<div class="modal-body">
-			<div class="labeled_input">
-				<p>{{ formatMessage(messages.modpackNameLabel) }}</p>
-				<StyledInput
-					v-model="nameInput"
-					:icon="PackageIcon"
-					type="text"
-					:placeholder="formatMessage(messages.modpackNamePlaceholder)"
-					clearable
-				/>
-			</div>
-			<div class="labeled_input">
-				<p>{{ formatMessage(messages.versionNumberLabel) }}</p>
-				<StyledInput
-					v-model="versionInput"
-					:icon="VersionIcon"
-					type="text"
-					:placeholder="formatMessage(messages.versionNumberPlaceholder)"
-					clearable
-				/>
-			</div>
-			<div class="adjacent-input">
+		<div class="flex flex-col gap-4 w-[40rem]">
+			<div class="grid grid-cols-2 gap-4">
 				<div class="labeled_input">
-					<p>{{ formatMessage(commonMessages.descriptionLabel) }}</p>
-
+					<p>{{ formatMessage(messages.modpackNameLabel) }}</p>
 					<StyledInput
-						v-model="exportDescription"
-						multiline
-						:placeholder="formatMessage(messages.descriptionPlaceholder)"
+						v-model="nameInput"
+						:icon="PackageIcon"
+						type="text"
+						:placeholder="formatMessage(messages.modpackNamePlaceholder)"
+						clearable
+					/>
+				</div>
+				<div class="labeled_input">
+					<p>{{ formatMessage(messages.versionNumberLabel) }}</p>
+					<StyledInput
+						v-model="versionInput"
+						:icon="VersionIcon"
+						type="text"
+						:placeholder="formatMessage(messages.versionNumberPlaceholder)"
+						clearable
 					/>
 				</div>
 			</div>
-
-			<div class="table">
-				<div class="table-head">
-					<div class="table-cell row-wise">
-						{{ formatMessage(messages.selectFilesLabel) }}
-						<ButtonStyled circular>
-							<button @click="() => (showingFiles = !showingFiles)">
-								<PlusIcon v-if="!showingFiles" />
-								<XIcon v-else />
-							</button>
-						</ButtonStyled>
-					</div>
-				</div>
-				<div v-if="showingFiles" class="table-content">
-					<div v-for="[path, children] in folders" :key="path.name" class="table-row">
-						<div class="table-cell file-entry">
-							<div class="file-primary">
+			<div class="flex flex-col gap-2">
+				<p class="m-0">{{ formatMessage(commonMessages.descriptionLabel) }}</p>
+				<StyledInput
+					v-model="exportDescription"
+					multiline
+					:placeholder="formatMessage(messages.descriptionPlaceholder)"
+				/>
+			</div>
+			<Accordion
+				class="w-full bg-surface-4 border border-solid border-surface-5 rounded-2xl overflow-clip"
+				button-class="p-4 w-full border-b border-solid border-b-surface-5 bg-surface-2 -mb-px hover:brightness-[--hover-brightness] group"
+			>
+				<template #title>
+					<span class="flex items-center gap-3 text-contrast group-active:scale-[0.98]">
+						<WrenchIcon aria-hidden="true" class="size-5 text-secondary" />
+						Configure which files are included in this export
+					</span>
+				</template>
+				<div class="flex flex-col [&>*:nth-child(even)]:bg-surface-3">
+					<div v-for="[path, children] in folders" :key="path.name" class="flex flex-col">
+						<Accordion
+							class="flex flex-col"
+							button-class="flex gap-3 pr-4 hover:bg-surface-5 group"
+						>
+							<template #title>
 								<Checkbox
 									:model-value="children.every((child) => child.selected)"
-									:label="path.name"
-									class="select-checkbox"
+									:indeterminate="
+										!children.every((child) => child.selected) &&
+										children.some((child) => child.selected)
+									"
+									:description="formatMessage(messages.includeFile, { file: path.name })"
+									class="pl-4 py-2"
 									:disabled="children.every((x) => x.disabled)"
 									@update:model-value="
 										(newValue) => children.forEach((child) => (child.selected = newValue))
 									"
+									@click.stop
 								/>
+								<span class="ml-2 group-active:scale-95">{{ path.name }}/</span>
+							</template>
+							<div v-for="child in children" :key="child.path">
 								<Checkbox
-									v-model="path.showingMore"
-									class="select-checkbox dropdown"
-									collapsing-toggle-style
+									v-model="child.selected"
+									:label="child.name"
+									class="w-full px-8 py-2 hover:bg-surface-4 text-primary"
+									:disabled="child.disabled"
 								/>
 							</div>
-							<div v-if="path.showingMore" class="file-secondary">
-								<div v-for="child in children" :key="child.path" class="file-secondary-row">
-									<Checkbox
-										v-model="child.selected"
-										:label="child.name"
-										class="select-checkbox"
-										:disabled="child.disabled"
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div v-for="file in files" :key="file.path" class="table-row">
-						<div class="table-cell file-entry">
-							<div class="file-primary">
-								<Checkbox
-									v-model="file.selected"
-									:label="file.name"
-									:disabled="file.disabled"
-									class="select-checkbox"
-								/>
-							</div>
-						</div>
+						</Accordion>
 					</div>
+					<Checkbox
+						v-for="file in files"
+						:key="file.path"
+						v-model="file.selected"
+						:label="file.name"
+						:disabled="file.disabled"
+						class="w-full px-4 py-2 hover:bg-surface-4 text-primary"
+					/>
 				</div>
-			</div>
-			<div class="button-row push-right">
+			</Accordion>
+			<div class="flex items-center justify-end gap-2">
 				<ButtonStyled type="outlined">
 					<button @click="exportModal.hide">
 						<XIcon />
@@ -249,83 +257,3 @@ const exportPack = async () => {
 		</div>
 	</ModalWrapper>
 </template>
-
-<style scoped lang="scss">
-.modal-body {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-md);
-}
-
-.labeled_input {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-sm);
-
-	p {
-		margin: 0;
-	}
-}
-
-.select-checkbox {
-	gap: var(--gap-sm);
-
-	button.checkbox {
-		border: none;
-	}
-
-	&.dropdown {
-		margin-left: auto;
-	}
-}
-
-.table-content {
-	max-height: 18rem;
-	overflow-y: auto;
-}
-
-.table {
-	border: 1px solid var(--color-bg);
-}
-
-.file-entry {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-sm);
-}
-
-.file-primary {
-	display: flex;
-	align-items: center;
-	gap: var(--gap-sm);
-}
-
-.file-secondary {
-	margin-left: var(--gap-xl);
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-sm);
-	height: 100%;
-	vertical-align: center;
-}
-
-.file-secondary-row {
-	display: flex;
-	align-items: center;
-	gap: var(--gap-sm);
-}
-
-.button-row {
-	display: flex;
-	gap: var(--gap-sm);
-	align-items: center;
-}
-
-.row-wise {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 1rem;
-}
-</style>
@@ -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}`
+}
@@ -36,18 +36,38 @@ export function useIntercomPositioning({
 		() => route.path.startsWith('/browse') || route.path.startsWith('/project'),
 	)
 	const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
-	const intercomBubbleHorizontalPadding = computed(() =>
+	const defaultIntercomBubbleHorizontalPadding = computed(() =>
 		sidebarVisible.value
 			? APP_SIDEBAR_WIDTH + INTERCOM_BUBBLE_DEFAULT_PADDING
 			: INTERCOM_BUBBLE_DEFAULT_PADDING,
 	)
+	const intercomBubbleRequestedHorizontalPadding = ref<number | null>(null)
+	const intercomBubbleHorizontalPadding = computed(
+		() =>
+			intercomBubbleRequestedHorizontalPadding.value ??
+			defaultIntercomBubbleHorizontalPadding.value,
+	)
 	const intercomBubbleVerticalClearance = ref<number | null>(null)
 	const intercomBubblePosition = computed(() => ({
 		horizontalPadding: intercomBubbleHorizontalPadding.value,
 		verticalPadding: intercomBubbleVerticalClearance.value ?? INTERCOM_BUBBLE_DEFAULT_PADDING,
 	}))
+	const intercomBubbleHorizontalPaddingRequests = new Map<symbol, number>()
 	const intercomBubbleClearanceRequests = new Map<symbol, number>()

+	function requestIntercomBubbleHorizontalPadding(id: symbol, padding: number | null) {
+		if (padding === null) {
+			intercomBubbleHorizontalPaddingRequests.delete(id)
+		} else {
+			intercomBubbleHorizontalPaddingRequests.set(id, padding)
+		}
+
+		intercomBubbleRequestedHorizontalPadding.value =
+			intercomBubbleHorizontalPaddingRequests.size > 0
+				? Math.max(...intercomBubbleHorizontalPaddingRequests.values())
+				: null
+	}
+
 	function requestIntercomBubbleVerticalClearance(id: symbol, clearance: number | null) {
 		if (clearance === null) {
 			intercomBubbleClearanceRequests.delete(id)
@@ -93,6 +113,7 @@ export function useIntercomPositioning({
 			intercomBubble: {
 				width: ref(INTERCOM_BUBBLE_WIDTH),
 				horizontalPadding: intercomBubbleHorizontalPadding,
+				requestHorizontalPadding: requestIntercomBubbleHorizontalPadding,
 				requestVerticalClearance: requestIntercomBubbleVerticalClearance,
 			},
 		},
@@ -184,7 +184,7 @@ export async function update_project(path: string, projectPath: string): Promise

 // Add a project to a profile from a version
 // Returns a path to the new project file
-export type DownloadReason = 'standalone' | 'dependency' | 'modpack'
+export type DownloadReason = 'standalone' | 'dependency' | 'modpack' | 'update'

 export async function add_project_from_version(
 	path: string,
@@ -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"
@@ -164,6 +158,9 @@
  "app.export-modal.header": {
    "message": "Export modpack"
  },
+  "app.export-modal.include-file-accessibility-label": {
+    "message": "Include \"{file}\"?"
+  },
  "app.export-modal.modpack-name-label": {
    "message": "Modpack Name"
  },
@@ -171,7 +168,7 @@
    "message": "Modpack name"
  },
  "app.export-modal.select-files-label": {
-    "message": "Select files and folders to include in pack"
+    "message": "Configure which files are included in this export"
  },
  "app.export-modal.version-number-label": {
    "message": "Version number"
@@ -302,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."
  },
@@ -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>
@@ -311,7 +311,7 @@ async function updateProject(mod: ContentItem) {
 				const profile = await get(props.instance.path).catch(handleError)

 				if (profile) {
-					await installVersionDependencies(profile, versionData).catch(handleError)
+					await installVersionDependencies(profile, versionData, 'update').catch(handleError)
 				}
 			}
 		}
@@ -347,7 +347,7 @@ async function switchProjectVersion(mod: ContentItem, version: Labrinth.Versions

 		const profile = await get(props.instance.path).catch(handleError)
 		if (profile) {
-			await installVersionDependencies(profile, version).catch(handleError)
+			await installVersionDependencies(profile, version, 'update').catch(handleError)
 		}

 		mod.file_path = newPath
@@ -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,
@@ -176,9 +176,10 @@ import {
 	ButtonStyled,
 	Card,
 	CopyCode,
+	useFormatBytes,
 	useFormatDateTime,
 } from '@modrinth/ui'
-import { formatBytes, renderString } from '@modrinth/utils'
+import { renderString } from '@modrinth/utils'
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'

@@ -191,6 +192,7 @@ const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
 	dateStyle: 'long',
 })
+const formatBytes = useFormatBytes()

 const breadcrumbs = useBreadcrumbs()

@@ -430,6 +430,7 @@ export function createContentInstall(opts: {
 			await installVersionDependencies(
 				profile,
 				version,
+				'dependency',
 				(depProject: Labrinth.Projects.v2.Project, depVersion?: Labrinth.Versions.v2.Version) => {
 					addInstallingItem(instance.id, depProject, depVersion)
 					installedProjectIds.push(depProject.id)
@@ -485,10 +486,10 @@ export function createContentInstall(opts: {
 			if (!id) return

 			await add_project_from_version(id, version.id, 'standalone')
-			await opts.router.push(`/instance/${encodeURIComponent(id)}/`)
+			await opts.router.push(`/instance/${encodeURIComponent(id)}`)

 			const instance = await get(id)
-			await installVersionDependencies(instance, version)
+			await installVersionDependencies(instance, version, 'dependency')

 			trackEvent('InstanceCreate', {
 				source: 'ProjectInstallModal',
@@ -512,7 +513,7 @@ export function createContentInstall(opts: {

 	function handleNavigate(instance: ContentInstallInstance) {
 		modalRef?.hide()
-		opts.router.push(`/instance/${encodeURIComponent(instance.id)}/`)
+		opts.router.push(`/instance/${encodeURIComponent(instance.id)}`)
 	}

 	function handleCancel() {
@@ -589,6 +590,7 @@ export function createContentInstall(opts: {
 					await installVersionDependencies(
 						instance,
 						version,
+						'dependency',
 						(
 							depProject: Labrinth.Projects.v2.Project,
 							depVersion?: Labrinth.Versions.v2.Version,
@@ -664,7 +666,7 @@ export function createContentInstall(opts: {
 		},
 		handleModpackDuplicateGoToInstance(instancePath: string) {
 			pendingModpackInstall = null
-			opts.router.push(`/instance/${encodeURIComponent(instancePath)}/`)
+			opts.router.push(`/instance/${encodeURIComponent(instancePath)}`)
 		},
 		setIncompatibilityWarningModal(ref: IncompatibilityWarningModalRef) {
 			incompatibilityWarningModalRef = ref
@@ -1,6 +1,17 @@
 import { provideFilePicker } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
+import { readFile } from '@tauri-apps/plugin-fs'
+
+function getFileName(path: string, fallback: string) {
+	return path.split(/[\\/]/).pop() || fallback
+}
+
+async function createFileFromPath(path: string, fallbackName: string, type?: string) {
+	const bytes = await readFile(path)
+	const name = getFileName(path, fallbackName)
+	return new File([bytes], name, type ? { type } : undefined)
+}

 export function setupFilePickerProvider() {
 	provideFilePicker({
@@ -12,8 +23,7 @@ export function setupFilePickerProvider() {
 			if (!result) return null
 			const path = result.path ?? result
 			if (!path) return null
-			const name = path.split(/[\\/]/).pop() || 'icon'
-			const file = new File([], name)
+			const file = await createFileFromPath(path, 'icon')
 			return { file, path, previewUrl: convertFileSrc(path) }
 		},
 		async pickModpackFile() {
@@ -24,8 +34,11 @@ export function setupFilePickerProvider() {
 			if (!result) return null
 			const path = result.path ?? result
 			if (!path) return null
-			const name = path.split(/[\\/]/).pop() || 'modpack.mrpack'
-			const file = new File([], name)
+			const file = await createFileFromPath(
+				path,
+				'modpack.mrpack',
+				'application/x-modrinth-modpack+zip',
+			)
 			return { file, path, previewUrl: '' }
 		},
 	})
@@ -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,
@@ -48,7 +48,7 @@ export const isVersionCompatible = (version, project, instance) => {
 	)
 }

-export const installVersionDependencies = async (profile, version, onDepInstalling) => {
+export const installVersionDependencies = async (profile, version, reason, onDepInstalling) => {
 	const projectNames = new Map()
 	const storeProjectName = (p) => {
 		if (p?.id && p.title) projectNames.set(p.id, p.title)
@@ -177,7 +177,7 @@ export const installVersionDependencies = async (profile, version, onDepInstalli
 		const batch = queuedInstalls.slice(i, i + batchSize)
 		await Promise.all(
 			batch.map(async ({ versionId }) => {
-				await add_project_from_version(profile.path, versionId, 'dependency')
+				await add_project_from_version(profile.path, versionId, reason)
 			}),
 		)
 	}
@@ -17,74 +17,60 @@
 	</label>
 </template>

-<script>
-import { fileIsValid } from '~/helpers/fileUtils.js'
+<script setup lang="ts">
+import { useFormatBytes } from '@modrinth/ui'
+import { fileIsValid } from '@modrinth/utils'
+import { ref } from 'vue'

-export default {
-	components: {},
-	props: {
-		prompt: {
-			type: String,
-			default: 'Select file',
-		},
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		accept: {
-			type: String,
-			default: null,
-		},
+const props = withDefaults(
+	defineProps<{
+		prompt?: string
+		multiple?: boolean
+		accept?: string
 		/**
 		 * The max file size in bytes
 		 */
-		maxSize: {
-			type: Number,
-			default: null,
-		},
-		showIcon: {
-			type: Boolean,
-			default: true,
-		},
-		shouldAlwaysReset: {
-			type: Boolean,
-			default: false,
-		},
-		longStyle: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
+		maxSize?: number | null
+		showIcon?: boolean
+		shouldAlwaysReset?: boolean
+		longStyle?: boolean
+		disabled?: boolean
+	}>(),
+	{
+		prompt: 'Select file',
+		multiple: false,
+		showIcon: true,
+		shouldAlwaysReset: false,
+		longStyle: false,
+		disabled: false,
 	},
-	emits: ['change'],
-	data() {
-		return {
-			files: [],
-		}
-	},
-	methods: {
-		addFiles(files, shouldNotReset) {
-			if (!shouldNotReset || this.shouldAlwaysReset) {
-				this.files = files
-			}
+)

-			const validationOptions = { maxSize: this.maxSize, alertOnInvalid: true }
-			this.files = [...this.files].filter((file) => fileIsValid(file, validationOptions))
+const emit = defineEmits<{ change: [files: File[]] }>()

-			if (this.files.length > 0) {
-				this.$emit('change', this.files)
-			}
-		},
-		handleDrop(e) {
-			this.addFiles(e.dataTransfer.files)
-		},
-		handleChange(e) {
-			this.addFiles(e.target.files)
-		},
-	},
+const formatBytes = useFormatBytes()
+
+const files = ref<File[]>([])
+
+function addFiles(incoming: FileList, shouldNotReset = false) {
+	if (!shouldNotReset || props.shouldAlwaysReset) {
+		files.value = Array.from(incoming)
+	}
+	const validationOptions = { maxSize: props.maxSize, alertOnInvalid: true }
+	files.value = files.value.filter((file) => fileIsValid(file, validationOptions, formatBytes))
+	if (files.value.length > 0) {
+		emit('change', files.value)
+	}
+}
+
+function handleDrop(e: DragEvent) {
+	addFiles(e.dataTransfer!.files)
+}
+
+function handleChange(e: Event) {
+	const input = e.target as HTMLInputElement
+	if (!input.files) return
+	addFiles(input.files)
 }
 </script>

@@ -1,12 +1,19 @@
 <template>
-	<div class="shadow-card rounded-2xl border border-surface-5 bg-surface-3 p-4">
+	<div class="shadow-card rounded-2xl border border-solid border-surface-5 bg-surface-3 p-4">
 		<div class="flex items-center justify-between">
 			<div class="flex items-center gap-4">
-				<Avatar
-					:src="queueEntry.project.icon_url"
-					size="4rem"
-					class="rounded-2xl border border-surface-5 bg-surface-4 !shadow-none"
-				/>
+				<NuxtLink
+					:to="`/project/${queueEntry.project.slug}`"
+					target="_blank"
+					tabindex="-1"
+					class="flex"
+				>
+					<Avatar
+						:src="queueEntry.project.icon_url"
+						size="4rem"
+						class="rounded-2xl border border-surface-5 bg-surface-4 !shadow-none"
+					/>
+				</NuxtLink>
 				<div class="flex flex-col gap-1.5">
 					<div class="flex items-center gap-2">
 						<NuxtLink
@@ -22,11 +29,15 @@
 							<component
 								:is="getProjectTypeIcon(queueEntry.project.project_types[0] as any)"
 								aria-hidden="true"
-								class="h-4 w-4"
+								class="size-4"
 							/>
 							<span class="text-sm font-medium text-secondary">
 								{{
-									queueEntry.project.project_types.map((t) => formatProjectType(t, true)).join(', ')
+									queueEntry.project.project_types.length === 0
+										? '???'
+										: queueEntry.project.project_types
+												.map((t) => formatProjectType(t, true))
+												.join(', ')
 								}}
 							</span>
 						</div>
@@ -35,37 +46,39 @@
 							class="flex items-center gap-2 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
 						>
 							<span class="text-sm text-secondary">Requesting</span>
-							<Badge :type="queueEntry.project.requested_status" class="status" />
+							<Badge :type="queueEntry.project.requested_status" class="text-sm" />
 						</div>
 					</div>
-					<div v-if="queueEntry.owner" class="flex items-center gap-1">
-						<Avatar
-							:src="queueEntry.owner.user.avatar_url"
-							size="1.5rem"
-							circle
-							class="border border-surface-5 bg-surface-4 !shadow-none"
-						/>
+					<div v-if="queueEntry.ownership?.kind === 'user'">
 						<NuxtLink
-							:to="`/user/${queueEntry.owner.user.username}`"
+							:to="`/user/${queueEntry.ownership.id}`"
 							target="_blank"
-							class="text-sm font-medium text-secondary hover:underline"
+							class="flex w-fit min-w-40 items-center gap-1 text-sm font-medium text-secondary hover:underline"
 						>
-							{{ queueEntry.owner.user.username }}
+							<Avatar
+								:src="queueEntry.ownership.icon_url"
+								size="1.5rem"
+								circle
+								class="border border-surface-5 bg-surface-4 !shadow-none"
+							/>
+							{{ queueEntry.ownership.name }}
 						</NuxtLink>
 					</div>
-					<div v-else-if="queueEntry.org" class="flex items-center gap-1">
+					<div
+						v-else-if="queueEntry.ownership?.kind === 'organization'"
+						class="flex items-center gap-1"
+					>
 						<Avatar
-							:src="queueEntry.org.icon_url"
+							:src="queueEntry.ownership.icon_url"
 							size="1.5rem"
-							circle
 							class="border border-surface-5 bg-surface-4 !shadow-none"
 						/>
 						<NuxtLink
-							:to="`/organization/${queueEntry.org.slug}`"
+							:to="`/organization/${queueEntry.ownership.id}`"
 							target="_blank"
 							class="text-sm font-medium text-secondary hover:underline"
 						>
-							{{ queueEntry.org.name }}
+							{{ queueEntry.ownership.name }}
 						</NuxtLink>
 					</div>
 				</div>
@@ -84,25 +97,20 @@
 				</span>

 				<div class="flex items-center gap-2">
-					<ButtonStyled circular color="orange">
-						<button @click="openProjectForReview">
-							<ScaleIcon class="size-5" />
+					<ButtonStyled circular>
+						<button v-tooltip="'Copy ID'" @click="copyId">
+							<ClipboardCopyIcon />
 						</button>
 					</ButtonStyled>
 					<ButtonStyled circular>
-						<OverflowMenu :options="quickActions" :dropdown-id="`${baseId}-quick-actions`">
-							<template #default>
-								<EllipsisVerticalIcon class="size-4" />
-							</template>
-							<template #copy-id>
-								<ClipboardCopyIcon />
-								<span class="hidden sm:inline">Copy ID</span>
-							</template>
-							<template #copy-link>
-								<LinkIcon />
-								<span class="hidden sm:inline">Copy link</span>
-							</template>
-						</OverflowMenu>
+						<button v-tooltip="'Copy link'" @click="copyLink">
+							<LinkIcon />
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-tooltip="'Begin review'" circular color="orange">
+						<button @click="openProjectForReview">
+							<ScaleIcon />
+						</button>
 					</ButtonStyled>
 				</div>
 			</div>
@@ -111,15 +119,13 @@
 </template>

 <script setup lang="ts">
-import { ClipboardCopyIcon, EllipsisVerticalIcon, LinkIcon, ScaleIcon } from '@modrinth/assets'
+import { ClipboardCopyIcon, LinkIcon, ScaleIcon } from '@modrinth/assets'
 import {
 	Avatar,
 	Badge,
 	ButtonStyled,
 	getProjectTypeIcon,
 	injectNotificationManager,
-	OverflowMenu,
-	type OverflowMenuOption,
 	useFormatDateTime,
 	useRelativeTime,
 } from '@modrinth/ui'
@@ -143,8 +149,6 @@ const formatDateTimeFull = useFormatDateTime({
 	timeZone: 'UTC',
 })

-const baseId = useId()
-
 const props = defineProps<{
 	queueEntry: ModerationProject
 }>()
@@ -185,34 +189,27 @@ const formattedDate = computed(() => {
 	}
 })

-const quickActions: OverflowMenuOption[] = [
-	{
-		id: 'copy-link',
-		action: () => {
-			const base = window.location.origin
-			const projectUrl = `${base}/project/${props.queueEntry.project.slug}`
-			navigator.clipboard.writeText(projectUrl).then(() => {
-				addNotification({
-					type: 'success',
-					title: 'Project link copied',
-					text: 'The link to this project has been copied to your clipboard.',
-				})
-			})
-		},
-	},
-	{
-		id: 'copy-id',
-		action: () => {
-			navigator.clipboard.writeText(props.queueEntry.project.id).then(() => {
-				addNotification({
-					type: 'success',
-					title: 'Project ID copied',
-					text: 'The ID of this project has been copied to your clipboard.',
-				})
-			})
-		},
-	},
-]
+function copyLink() {
+	const base = window.location.origin
+	const projectUrl = `${base}/project/${props.queueEntry.project.slug}`
+	navigator.clipboard.writeText(projectUrl).then(() => {
+		addNotification({
+			type: 'success',
+			title: 'Project link copied',
+			text: 'The link to this project has been copied to your clipboard.',
+		})
+	})
+}
+
+function copyId() {
+	navigator.clipboard.writeText(props.queueEntry.project.id).then(() => {
+		addNotification({
+			type: 'success',
+			title: 'Project ID copied',
+			text: 'The ID of this project has been copied to your clipboard.',
+		})
+	})
+}

 function openProjectForReview() {
 	emit('startFromProject', props.queueEntry.project.id)
@@ -28,6 +28,7 @@ import {
 	injectNotificationManager,
 	OverflowMenu,
 	type OverflowMenuOption,
+	useFormatBytes,
 	useFormatDateTime,
 } from '@modrinth/ui'
 import { NavTabs } from '@modrinth/ui'
@@ -56,6 +57,7 @@ const formatDateTimeUtc = useFormatDateTime({
 	timeZoneName: 'short',
 	timeZone: 'UTC',
 })
+const formatBytes = useFormatBytes()

 type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
 	id: string
@@ -362,12 +364,6 @@ const formattedDate = computed(() => {
 	return `${diffDays} days ago`
 })

-function formatFileSize(bytes: number): string {
-	if (bytes < 1024) return `${bytes} B`
-	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KiB`
-	return `${(bytes / (1024 * 1024)).toFixed(2)} MiB`
-}
-
 function viewFileFlags(file: FlattenedFileReport) {
 	selectedFileId.value = file.id
 	currentTab.value = 'File'
@@ -851,7 +847,7 @@ const reviewSummaryPreview = computed(() => {
 		const fileVerdict = fileUnsafe > 0 ? 'Unsafe' : 'Safe'

 		markdown += `### ${fileData.fileName}\n`
-		markdown += `> ${formatFileSize(fileData.fileSize)} • ${fileData.decisions.length} issues • Max severity: ${fileData.maxSeverity} • **Verdict:** ${fileVerdict}\n\n`
+		markdown += `> ${formatBytes(fileData.fileSize)} • ${fileData.decisions.length} issues • Max severity: ${fileData.maxSeverity} • **Verdict:** ${fileVerdict}\n\n`
 		markdown += `<details>\n<summary>Issues (${fileSafe} safe, ${fileUnsafe} unsafe)</summary>\n\n`
 		markdown += `| Class | Issue Type | Severity | Decision |\n`
 		markdown += `|-------|------------|----------|----------|\n`
@@ -1150,7 +1146,7 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 						</span>
 						<div class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1">
 							<span class="text-sm font-medium text-secondary">{{
-								formatFileSize(file.file_size)
+								formatBytes(file.file_size)
 							}}</span>
 						</div>
 						<div
@@ -24,8 +24,16 @@
 				</Checkbox>
 				<div class="input-group push-right">
 					<ButtonStyled color="orange">
-						<button :disabled="!submissionConfirmation" @click="resubmit()">
-							<ScaleIcon aria-hidden="true" />
+						<button
+							:disabled="!submissionConfirmation || isLoading"
+							@click="runBlockingAction('resubmit-modal', resubmit)"
+						>
+							<SpinnerIcon
+								v-if="loadingAction === 'resubmit-modal'"
+								class="animate-spin"
+								aria-hidden="true"
+							/>
+							<ScaleIcon v-else aria-hidden="true" />
 							Resubmit for review
 						</button>
 					</ButtonStyled>
@@ -54,8 +62,16 @@
 				</Checkbox>
 				<div class="input-group push-right">
 					<ButtonStyled color="brand">
-						<button :disabled="!replyConfirmation" @click="sendReplyFromModal()">
-							<ReplyIcon aria-hidden="true" />
+						<button
+							:disabled="!replyConfirmation || isLoading"
+							@click="runBlockingAction('reply-modal', () => sendReplyFromModal())"
+						>
+							<SpinnerIcon
+								v-if="loadingAction === 'reply-modal'"
+								class="animate-spin"
+								aria-hidden="true"
+							/>
+							<ReplyIcon v-else aria-hidden="true" />
 							Reply to thread
 						</button>
 					</ButtonStyled>
@@ -82,8 +98,9 @@
 		<template v-if="report && report.closed">
 			<p>This thread is closed and new messages cannot be sent to it.</p>
 			<ButtonStyled v-if="isStaff(auth.user)">
-				<button @click="reopenReport()">
-					<CheckCircleIcon aria-hidden="true" />
+				<button :disabled="isLoading" @click="runBlockingAction('reopen', () => reopenReport())">
+					<SpinnerIcon v-if="loadingAction === 'reopen'" class="animate-spin" aria-hidden="true" />
+					<CheckCircleIcon v-else aria-hidden="true" />
 					Reopen thread
 				</button>
 			</ButtonStyled>
@@ -100,35 +117,53 @@
 				<ButtonStyled color="brand">
 					<button
 						v-if="sortedMessages.length > 0"
-						:disabled="!replyBody"
-						@click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
+						:disabled="!replyBody || isLoading"
+						@click="
+							isApproved(project) && !isStaff(auth.user)
+								? openReplyModal()
+								: runBlockingAction('reply', () => sendReply())
+						"
 					>
-						<ReplyIcon aria-hidden="true" />
+						<SpinnerIcon v-if="loadingAction === 'reply'" class="animate-spin" aria-hidden="true" />
+						<ReplyIcon v-else aria-hidden="true" />
 						Reply
 					</button>
 					<button
 						v-else
-						:disabled="!replyBody"
-						@click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
+						:disabled="!replyBody || isLoading"
+						@click="
+							isApproved(project) && !isStaff(auth.user)
+								? openReplyModal()
+								: runBlockingAction('send', () => sendReply())
+						"
 					>
-						<SendIcon aria-hidden="true" />
+						<SpinnerIcon v-if="loadingAction === 'send'" class="animate-spin" aria-hidden="true" />
+						<SendIcon v-else aria-hidden="true" />
 						Send
 					</button>
 				</ButtonStyled>
 				<ButtonStyled v-if="isStaff(auth.user)">
-					<button :disabled="!replyBody" @click="sendReply(null, true)">
-						<ScaleIcon aria-hidden="true" />
+					<button
+						:disabled="!replyBody || isLoading"
+						@click="runBlockingAction('private-note', () => sendReply(null, true))"
+					>
+						<SpinnerIcon
+							v-if="loadingAction === 'private-note'"
+							class="animate-spin"
+							aria-hidden="true"
+						/>
+						<ScaleIcon v-else aria-hidden="true" />
 						Add private note
 					</button>
 				</ButtonStyled>
 				<template v-if="currentMember && !isStaff(auth.user)">
 					<template v-if="isRejected(project)">
 						<ButtonStyled color="orange">
-							<button v-if="replyBody" @click="openResubmitModal(true)">
+							<button v-if="replyBody" :disabled="isLoading" @click="openResubmitModal(true)">
 								<ScaleIcon aria-hidden="true" />
 								Resubmit for review with reply
 							</button>
-							<button v-else @click="openResubmitModal(false)">
+							<button v-else :disabled="isLoading" @click="openResubmitModal(false)">
 								<ScaleIcon aria-hidden="true" />
 								Resubmit for review
 							</button>
@@ -140,12 +175,30 @@
 					<template v-if="report">
 						<template v-if="isStaff(auth.user)">
 							<ButtonStyled color="red">
-								<button v-if="replyBody" @click="closeReport(true)">
-									<CheckCircleIcon aria-hidden="true" />
+								<button
+									v-if="replyBody"
+									:disabled="isLoading"
+									@click="runBlockingAction('close-with-reply', () => closeReport(true))"
+								>
+									<SpinnerIcon
+										v-if="loadingAction === 'close-with-reply'"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<CheckCircleIcon v-else aria-hidden="true" />
 									Close with reply
 								</button>
-								<button v-else @click="closeReport()">
-									<CheckCircleIcon aria-hidden="true" />
+								<button
+									v-else
+									:disabled="isLoading"
+									@click="runBlockingAction('close', () => closeReport())"
+								>
+									<SpinnerIcon
+										v-if="loadingAction === 'close'"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<CheckCircleIcon v-else aria-hidden="true" />
 									Close thread
 								</button>
 							</ButtonStyled>
@@ -154,92 +207,122 @@
 					<template v-if="project">
 						<template v-if="isStaff(auth.user)">
 							<ButtonStyled v-if="replyBody" color="green">
-								<button :disabled="isApproved(project)" @click="sendReply(requestedStatus)">
-									<CheckIcon aria-hidden="true" />
+								<button
+									:disabled="isApproved(project) || isLoading"
+									@click="runBlockingAction('approve-with-reply', () => sendReply(requestedStatus))"
+								>
+									<SpinnerIcon
+										v-if="loadingAction === 'approve-with-reply'"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<CheckIcon v-else aria-hidden="true" />
 									Approve with reply
 								</button>
 							</ButtonStyled>
 							<ButtonStyled v-else color="green">
-								<button :disabled="isApproved(project)" @click="setStatus(requestedStatus)">
-									<CheckIcon aria-hidden="true" />
+								<button
+									:disabled="isApproved(project) || isLoading"
+									@click="runBlockingAction('approve', () => setStatus(requestedStatus))"
+								>
+									<SpinnerIcon
+										v-if="loadingAction === 'approve'"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<CheckIcon v-else aria-hidden="true" />
 									Approve
 								</button>
 							</ButtonStyled>
 							<div class="joined-buttons">
 								<ButtonStyled v-if="replyBody" color="red">
-									<button :disabled="project.status === 'rejected'" @click="sendReply('rejected')">
-										<XIcon aria-hidden="true" />
+									<button
+										:disabled="project.status === 'rejected' || isLoading"
+										@click="runBlockingAction('reject-with-reply', () => sendReply('rejected'))"
+									>
+										<SpinnerIcon
+											v-if="loadingAction === 'reject-with-reply'"
+											class="animate-spin"
+											aria-hidden="true"
+										/>
+										<XIcon v-else aria-hidden="true" />
 										Reject with reply
 									</button>
 								</ButtonStyled>
 								<ButtonStyled v-else color="red">
-									<button :disabled="project.status === 'rejected'" @click="setStatus('rejected')">
-										<XIcon aria-hidden="true" />
+									<button
+										:disabled="project.status === 'rejected' || isLoading"
+										@click="runBlockingAction('reject', () => setStatus('rejected'))"
+									>
+										<SpinnerIcon
+											v-if="loadingAction === 'reject'"
+											class="animate-spin"
+											aria-hidden="true"
+										/>
+										<XIcon v-else aria-hidden="true" />
 										Reject
 									</button>
 								</ButtonStyled>
 								<ButtonStyled color="red">
 									<OverflowMenu
 										class="btn-dropdown-animation"
+										:disabled="isLoading"
 										:options="
 											replyBody
 												? [
 														{
 															id: 'withhold-reply',
 															color: 'danger',
-															action: () => {
-																sendReply('withheld')
-															},
+															action: () =>
+																runBlockingAction('withhold-reply', () => sendReply('withheld')),
 															hoverFilled: true,
-															disabled: project.status === 'withheld',
+															disabled: project.status === 'withheld' || isLoading,
 														},
 														{
 															id: 'set-to-draft-reply',
-															action: () => {
-																sendReply('draft')
-															},
+															action: () =>
+																runBlockingAction('set-to-draft-reply', () => sendReply('draft')),
 															hoverFilled: true,
-															disabled: project.status === 'draft',
+															disabled: project.status === 'draft' || isLoading,
 														},
 														{
 															id: 'send-to-review-reply',
-															action: () => {
-																sendReply('processing', true)
-															},
+															action: () =>
+																runBlockingAction('send-to-review-reply', () =>
+																	sendReply('processing', true),
+																),
 															hoverFilled: true,
-															disabled: project.status === 'processing',
+															disabled: project.status === 'processing' || isLoading,
 														},
 													]
 												: [
 														{
 															id: 'withhold',
 															color: 'danger',
-															action: () => {
-																setStatus('withheld')
-															},
+															action: () =>
+																runBlockingAction('withhold', () => setStatus('withheld')),
 															hoverFilled: true,
-															disabled: project.status === 'withheld',
+															disabled: project.status === 'withheld' || isLoading,
 														},
 														{
 															id: 'set-to-draft',
-															action: () => {
-																setStatus('draft')
-															},
+															action: () =>
+																runBlockingAction('set-to-draft', () => setStatus('draft')),
 															hoverFilled: true,
-															disabled: project.status === 'draft',
+															disabled: project.status === 'draft' || isLoading,
 														},
 														{
 															id: 'send-to-review',
-															action: () => {
-																setStatus('processing')
-															},
+															action: () =>
+																runBlockingAction('send-to-review', () => setStatus('processing')),
 															hoverFilled: true,
-															disabled: project.status === 'processing',
+															disabled: project.status === 'processing' || isLoading,
 														},
 													]
 										"
 									>
-										<DropdownIcon aria-hidden="true" />
+										<SpinnerIcon v-if="isDropdownLoading" class="animate-spin" aria-hidden="true" />
+										<DropdownIcon v-else aria-hidden="true" />
 										<template #withhold-reply>
 											<EyeOffIcon aria-hidden="true" />
 											Withhold with reply
@@ -285,6 +368,7 @@ import {
 	ReplyIcon,
 	ScaleIcon,
 	SendIcon,
+	SpinnerIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
@@ -363,6 +447,30 @@ const sortedMessages = computed(() => {
 const modalSubmit = ref(null)
 const modalReply = ref(null)

+const loadingAction = ref(null)
+const isLoading = computed(() => loadingAction.value !== null)
+const dropdownActionIds = [
+	'withhold',
+	'withhold-reply',
+	'set-to-draft',
+	'set-to-draft-reply',
+	'send-to-review',
+	'send-to-review-reply',
+]
+const isDropdownLoading = computed(() => dropdownActionIds.includes(loadingAction.value))
+
+async function runBlockingAction(actionId, action) {
+	if (loadingAction.value !== null) {
+		return
+	}
+	loadingAction.value = actionId
+	try {
+		await action()
+	} finally {
+		loadingAction.value = null
+	}
+}
+
 async function updateThreadLocal() {
 	let threadId = null
 	if (props.project) {
@@ -390,8 +498,8 @@ async function onUploadImage(file) {
 }

 async function sendReplyFromModal(status = null, privateMessage = false) {
-	modalReply.value.hide()
 	await sendReply(status, privateMessage)
+	modalReply.value.hide()
 }

 async function sendReply(status = null, privateMessage = false) {
@@ -0,0 +1,140 @@
+import type { FilterValue } from '@modrinth/ui'
+import { LOADER_FILTER_TYPES } from '@modrinth/ui'
+
+const TEN_MINUTES = 600
+
+export type DownloadContext = {
+	gameVersion?: string
+	loader?: string
+	reason?: 'standalone' | 'dependency' | 'modpack' | 'update'
+}
+
+export type FilterSelection = {
+	gameVersion?: string
+	loader?: string
+}
+
+const cookieDefaults = {
+	maxAge: TEN_MINUTES,
+	sameSite: 'lax' as const,
+	secure: true,
+	path: '/',
+	httpOnly: false,
+}
+
+function readCookieValue(value: string | null | undefined): string | undefined {
+	if (typeof value !== 'string' || !value) {
+		return undefined
+	}
+	return value
+}
+
+function newFilterSelection(
+	gameVersion: string | undefined,
+	loader: string | undefined,
+): FilterSelection | null {
+	if (!gameVersion && !loader) {
+		return null
+	} else if (!gameVersion) {
+		return {
+			loader,
+		}
+	} else if (!loader) {
+		return {
+			gameVersion,
+		}
+	} else {
+		return {
+			gameVersion,
+			loader,
+		}
+	}
+}
+
+export function useCdnDownloadContext() {
+	const filterGameVersionCookie = useCookie<string | null>('mr_download_filter_game_version', {
+		...cookieDefaults,
+		default: () => null,
+	})
+
+	const filterLoaderCookie = useCookie<string | null>('mr_download_filter_loader', {
+		...cookieDefaults,
+		default: () => null,
+	})
+
+	function createProjectDownloadUrl(originalUrl: string, context?: DownloadContext): string {
+		if (!originalUrl.startsWith('https://cdn.modrinth.com')) {
+			return originalUrl
+		}
+
+		const reason = context?.reason
+		const gameVersion = context?.gameVersion ?? readCookieValue(filterGameVersionCookie.value)
+		const loader = context?.loader ?? readCookieValue(filterLoaderCookie.value)
+
+		try {
+			const url = new URL(originalUrl)
+
+			if (reason) {
+				url.searchParams.set('mr_download_reason', reason)
+			}
+			if (gameVersion) {
+				url.searchParams.set('mr_game_version', gameVersion)
+			} else {
+				url.searchParams.delete('mr_game_version')
+			}
+
+			if (loader) {
+				url.searchParams.set('mr_loader', loader)
+			} else {
+				url.searchParams.delete('mr_loader')
+			}
+			return url.toString()
+		} catch {
+			return originalUrl
+		}
+	}
+
+	function persistFilterSelection(selection: FilterSelection | null) {
+		if (!selection) {
+			filterGameVersionCookie.value = null
+			filterLoaderCookie.value = null
+			return
+		}
+		filterGameVersionCookie.value = selection.gameVersion ?? null
+		filterLoaderCookie.value = selection.loader ?? null
+	}
+
+	function updateDiscoverFilterContext(filters: FilterValue[]) {
+		if (!import.meta.client) {
+			return
+		}
+		const versionFilters = [
+			...new Set(filters.filter((f) => f.type === 'game_version').map((f) => f.option)),
+		]
+		const loaderFilters = [
+			...new Set(
+				filters
+					.filter((f) => (LOADER_FILTER_TYPES as readonly string[]).includes(f.type))
+					.map((f) => f.option),
+			),
+		]
+		const gameVersion = versionFilters.length === 1 ? versionFilters[0] : undefined
+		const loader = loaderFilters.length === 1 ? loaderFilters[0] : undefined
+		persistFilterSelection(newFilterSelection(gameVersion, loader))
+	}
+
+	function updateVersionsFilterContext(gameVersions: string[], loaders: string[]) {
+		if (!import.meta.client) {
+			return
+		}
+		const gameVersion = gameVersions.length === 1 ? gameVersions[0] : undefined
+		const loader = loaders.length === 1 ? loaders[0] : undefined
+		persistFilterSelection(newFilterSelection(gameVersion, loader))
+	}
+
+	return {
+		createProjectDownloadUrl,
+		updateDiscoverFilterContext,
+		updateVersionsFilterContext,
+	}
+}
@@ -1,32 +0,0 @@
-import { formatBytes } from '@modrinth/utils'
-
-export const fileIsValid = (file, validationOptions) => {
-	const { maxSize, alertOnInvalid } = validationOptions
-	if (maxSize !== null && maxSize !== undefined && file.size > maxSize) {
-		if (alertOnInvalid) {
-			alert(`File ${file.name} is too big! Must be less than ${formatBytes(maxSize)}`)
-		}
-		return false
-	}
-
-	return true
-}
-
-export const acceptFileFromProjectType = (projectType) => {
-	switch (projectType) {
-		case 'mod':
-			return '.jar,.zip,.litemod,application/java-archive,application/x-java-archive,application/zip'
-		case 'plugin':
-			return '.jar,.zip,application/java-archive,application/x-java-archive,application/zip'
-		case 'resourcepack':
-			return '.zip,application/zip'
-		case 'shader':
-			return '.zip,application/zip'
-		case 'datapack':
-			return '.zip,application/zip'
-		case 'modpack':
-			return '.mrpack,application/x-modrinth-modpack+zip,application/zip'
-		default:
-			return '*'
-	}
-}
@@ -181,56 +181,35 @@ export async function enrichReportBatch(reports: Report[]): Promise<ExtendedRepo
 }

 // Doesn't need to be in @modrinth/moderation because it is specific to the frontend.
+export interface ModerationOwnershipUser {
+	kind: 'user'
+	id: string
+	name: string
+	icon_url: string | null
+}
+
+export interface ModerationOwnershipOrganization {
+	kind: 'organization'
+	id: string
+	name: string
+	icon_url: string | null
+}
+
+export type ModerationOwnership = ModerationOwnershipUser | ModerationOwnershipOrganization
+
+export interface ProjectWithOwnership {
+	ownership: ModerationOwnership
+	[key: string]: any
+}
+
 export interface ModerationProject {
 	project: any
-	owner: TeamMember | null
-	org: Organization | null
+	ownership: ModerationOwnership | null
 }

-export async function enrichProjectBatch(projects: any[]): Promise<ModerationProject[]> {
-	const teamIds = [...new Set(projects.map((p) => p.team_id).filter(Boolean))]
-	const orgIds = [...new Set(projects.map((p) => p.organization).filter(Boolean))]
-
-	const [teamsData, orgsData]: [TeamMember[][], Organization[]] = await Promise.all([
-		teamIds.length > 0
-			? fetchSegmented(teamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`)
-			: Promise.resolve([]),
-		orgIds.length > 0
-			? fetchSegmented(orgIds, (ids) => `organizations?ids=${asEncodedJsonArray(ids)}`, {
-					apiVersion: 3,
-				})
-			: Promise.resolve([]),
-	])
-
-	const cache = useModerationCache()
-
-	teamsData.forEach((team) => {
-		if (team.length > 0) cache.teams.value.set(team[0].team_id, team)
-	})
-
-	orgsData.forEach((org: Organization) => {
-		cache.orgs.value.set(org.id, org)
-	})
-
-	return projects.map((project) => {
-		let owner: TeamMember | null = null
-		let org: Organization | null = null
-
-		if (project.team_id) {
-			const teamMembers = cache.teams.value.get(project.team_id)
-			if (teamMembers) {
-				owner = teamMembers.find((member) => member.role === 'Owner') || null
-			}
-		}
-
-		if (project.organization) {
-			org = cache.orgs.value.get(project.organization) || null
-		}
-
-		return {
-			project,
-			owner,
-			org,
-		} as ModerationProject
-	})
+export function toModerationProjects(projects: ProjectWithOwnership[]): ModerationProject[] {
+	return projects.map(({ ownership, ...project }) => ({
+		project,
+		ownership: ownership ?? null,
+	}))
 }
@@ -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"
  },
@@ -370,18 +370,21 @@
 							<VersionSummary
 								v-if="filteredRelease"
 								:version="filteredRelease"
+								:decorate-download-url="decorateModalDownloadUrl"
 								@on-download="onDownload"
 								@on-navigate="onVersionNavigate"
 							/>
 							<VersionSummary
 								v-if="filteredBeta"
 								:version="filteredBeta"
+								:decorate-download-url="decorateModalDownloadUrl"
 								@on-download="onDownload"
 								@on-navigate="onVersionNavigate"
 							/>
 							<VersionSummary
 								v-if="filteredAlpha"
 								:version="filteredAlpha"
+								:decorate-download-url="decorateModalDownloadUrl"
 								@on-download="onDownload"
 								@on-navigate="onVersionNavigate"
 							/>
@@ -1082,6 +1085,7 @@ import {
 	OpenInAppModal,
 	OverflowMenu,
 	PopoutMenu,
+	PROJECT_DEP_MARKER_QUERY,
 	ProjectBackgroundGradient,
 	ProjectEnvironmentModal,
 	ProjectHeader,
@@ -1108,7 +1112,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useLocalStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
-import { nextTick, useTemplateRef, watch } from 'vue'
+import { nextTick, readonly, ref, useTemplateRef, watch } from 'vue'

 import { navigateTo } from '#app'
 import Accordion from '~/components/ui/Accordion.vue'
@@ -1137,6 +1141,7 @@ definePageMeta({

 const data = useNuxtApp()
 const route = useRoute()
+const router = useRouter()
 const signInRouteObj = computed(() => getSignInRouteObj(route))
 const config = useRuntimeConfig()
 const moderationQueue = useModerationQueue()
@@ -1146,6 +1151,23 @@ const { addNotification } = notifications
 const auth = await useAuth()
 const user = await useUser()

+const { createProjectDownloadUrl } = useCdnDownloadContext()
+
+const downloadReason = ref('standalone')
+
+function absorbDepQuery() {
+	if (route.query.dep === PROJECT_DEP_MARKER_QUERY.dep) {
+		downloadReason.value = 'dependency'
+		if (import.meta.client) {
+			const newQuery = { ...route.query }
+			delete newQuery.dep
+			void router.replace({ path: route.path, query: newQuery, hash: route.hash })
+		}
+	}
+}
+
+watch(() => route.query.dep, absorbDepQuery, { immediate: true })
+
 const tags = useGeneratedState()
 const flags = useFeatureFlags()
 const cosmetics = useCosmetics()
@@ -1210,6 +1232,14 @@ const currentPlatformText = computed(() => {
 	return formatMessage(getTagMessage(currentPlatform.value, 'loader'))
 })

+function decorateModalDownloadUrl(url) {
+	return createProjectDownloadUrl(url, {
+		reason: downloadReason.value,
+		gameVersion: currentGameVersion.value ?? undefined,
+		loader: currentPlatform.value ?? undefined,
+	})
+}
+
 const releaseVersions = computed(() => {
 	const set = new Set()
 	for (const gv of tags.value.gameVersions || []) {
@@ -1715,15 +1745,27 @@ const serverRequiredContent = computed(() => {
 		icon: content.project_icon,
 		onclickName:
 			content.project_id && content.project_id !== projectId.value
-				? () => navigateTo(`/project/${content.project_id}`)
+				? () => {
+						navigateTo({
+							path: `/project/${content.project_id}`,
+							query: { ...PROJECT_DEP_MARKER_QUERY },
+						})
+					}
 				: undefined,
 		onclickVersion:
 			content.project_id && content.project_id !== projectId.value
-				? () =>
-						navigateTo(`/project/${content.project_id}/version/${serverModpackVersion.value?.id}`)
+				? () => {
+						navigateTo({
+							path: `/project/${content.project_id}/version/${serverModpackVersion.value?.id}`,
+							query: { ...PROJECT_DEP_MARKER_QUERY },
+						})
+					}
 				: undefined,
 		onclickDownload: primaryFile?.url
-			? () => navigateTo(primaryFile.url, { external: true })
+			? () =>
+					navigateTo(createProjectDownloadUrl(primaryFile.url, { reason: 'dependency' }), {
+						external: true,
+					})
 			: undefined,
 		showCustomModpackTooltip: content.project_id === projectId.value,
 	}
@@ -2317,6 +2359,18 @@ const canCreateServerFrom = computed(() => {
 	return project.value.project_type === 'modpack' && project.value.server_side !== 'unsupported'
 })

+const createCanonicalUrl = () =>
+	project.value ? `https://modrinth.com/project/${project.value.id}` : undefined
+
+useHead({
+	link: [
+		{
+			rel: 'canonical',
+			href: createCanonicalUrl,
+		},
+	],
+})
+
 if (!route.name.startsWith('type-id-settings')) {
 	useSeoMeta({
 		title: () => title.value,
@@ -2324,6 +2378,7 @@ if (!route.name.startsWith('type-id-settings')) {
 		ogTitle: () => title.value,
 		ogDescription: () => project.value?.description ?? '',
 		ogImage: () => project.value?.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',
+		ogUrl: createCanonicalUrl,
 		robots: () =>
 			project.value?.status === 'approved' || project.value?.status === 'archived'
 				? 'all'
@@ -2332,6 +2387,7 @@ if (!route.name.startsWith('type-id-settings')) {
 } else {
 	useSeoMeta({
 		robots: 'noindex',
+		ogUrl: createCanonicalUrl,
 	})
 }

@@ -2689,6 +2745,7 @@ provideProjectPageContext({
 	// Lazy dependencies loading
 	dependencies,
 	dependenciesLoading: computed(() => dependenciesLoading.value),
+	cdnDownloadReason: readonly(downloadReason),

 	// Invalidate all project queries (auto-refetches active ones)
 	invalidate: invalidateProject,
@@ -56,7 +56,7 @@
 								<ButtonStyled color="brand" type="transparent">
 									<a
 										class="ml-auto"
-										:href="version.primaryFile?.url"
+										:href="createDownloadUrl(version)"
 										:title="`Download ${version.name}`"
 									>
 										<DownloadIcon aria-hidden="true" />
@@ -98,7 +98,9 @@ import {
 import VersionFilterControl from '@modrinth/ui/src/components/version/VersionFilterControl.vue'
 import { renderHighlightedString } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
+
+const { createProjectDownloadUrl, updateVersionsFilterContext } = useCdnDownloadContext()

 const formatDate = useFormatDateTime({
 	month: 'short',
@@ -106,7 +108,8 @@ const formatDate = useFormatDateTime({
 	year: 'numeric',
 })

-const { projectV2, versions, versionsLoading, loadVersions } = injectProjectPageContext()
+const { projectV2, versions, versionsLoading, loadVersions, cdnDownloadReason } =
+	injectProjectPageContext()

 // Load versions on mount (client-side)
 onMounted(() => {
@@ -216,6 +219,23 @@ function updateQuery(newQueries) {
 		},
 	})
 }
+
+watch(
+	() => [route.query.g, route.query.l],
+	() => {
+		updateVersionsFilterContext(
+			queryAsStringArray(route.query.g),
+			queryAsStringArray(route.query.l),
+		)
+	},
+	{ immediate: true },
+)
+
+function createDownloadUrl(version) {
+	return createProjectDownloadUrl(getPrimaryFile(version).url, {
+		reason: cdnDownloadReason.value,
+	})
+}
 </script>

 <style lang="scss">
@@ -146,7 +146,11 @@
 											const input = e.target
 											if (input.files?.length) {
 												if (
-													fileIsValid(input.files[0], { maxSize: 524288000, alertOnInvalid: true })
+													fileIsValid(
+														input.files[0],
+														{ maxSize: 524288000, alertOnInvalid: true },
+														formatBytes,
+													)
 												)
 													showBannerPreview(Array.from(input.files))
 											}
@@ -379,6 +383,7 @@ import {
 	StyledInput,
 	Toggle,
 	UnsavedChangesPopup,
+	useFormatBytes,
 	usePageLeaveSafety,
 } from '@modrinth/ui'
 import { fileIsValid, formatProjectStatus, formatProjectType } from '@modrinth/utils'
@@ -405,6 +410,8 @@ const flags = useFeatureFlags()
 const tags = useGeneratedState()
 const router = useNativeRouter()

+const formatBytes = useFormatBytes()
+
 const name = ref(project.value.title)
 const slug = ref(project.value.slug)
 const summary = ref(project.value.description)
@@ -110,7 +110,7 @@
 								id: 'download',
 								color: 'primary',
 								hoverFilled: true,
-								link: getPrimaryFile(version).url,
+								link: createDownloadUrl(version),
 								action: () => {
 									emit('onDownload')
 								},
@@ -340,7 +340,7 @@ import {
 	ProjectPageVersions,
 	useVIntl,
 } from '@modrinth/ui'
-import { useTemplateRef } from 'vue'
+import { useTemplateRef, watch } from 'vue'

 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
 import { getSignInRouteObj } from '~/composables/auth.js'
@@ -348,6 +348,8 @@ import { reportVersion } from '~/utils/report-helpers.ts'

 const route = useRoute()

+const { createProjectDownloadUrl, updateVersionsFilterContext } = useCdnDownloadContext()
+
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -357,6 +359,7 @@ const {
 	versions,
 	invalidate,
 	loadVersions,
+	cdnDownloadReason,
 } = injectProjectPageContext()

 // Load versions on mount (client-side)
@@ -401,6 +404,23 @@ function getPrimaryFile(version: Labrinth.Versions.v3.Version) {
 	return version.files.find((x) => x.primary) || version.files[0]
 }

+watch(
+	() => [route.query.g, route.query.l],
+	() => {
+		updateVersionsFilterContext(
+			queryAsStringArray(route.query.g),
+			queryAsStringArray(route.query.l),
+		)
+	},
+	{ immediate: true },
+)
+
+function createDownloadUrl(version: Labrinth.Versions.v3.Version) {
+	return createProjectDownloadUrl(getPrimaryFile(version).url, {
+		reason: cdnDownloadReason.value,
+	})
+}
+
 async function copyToClipboard(text: string) {
 	await navigator.clipboard.writeText(text)
 }
@@ -139,7 +139,7 @@
 				<ButtonStyled v-if="primaryFile && !currentMember" color="brand">
 					<a
 						v-tooltip="primaryFile.filename + ' (' + formatBytes(primaryFile.size) + ')'"
-						:href="primaryFile.url"
+						:href="decoratedPrimaryFileUrl"
 						@click="emit('onDownload')"
 					>
 						<DownloadIcon aria-hidden="true" />
@@ -213,14 +213,19 @@
 					:key="index"
 					class="dependency"
 					:class="{ 'button-transparent': !isEditing }"
-					@click="!isEditing ? router.push(dependency.link) : {}"
+					@click="!isEditing ? navigateToDependency(dependency) : {}"
 				>
 					<Avatar
 						:src="dependency.project ? dependency.project.icon_url : null"
 						alt="dependency-icon"
 						size="sm"
 					/>
-					<nuxt-link v-if="!isEditing" :to="dependency.link" class="info">
+					<nuxt-link
+						v-if="!isEditing"
+						:to="{ path: dependency.link, query: PROJECT_DEP_MARKER_QUERY }"
+						class="info"
+						@click.stop
+					>
 						<span class="project-title">
 							{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
 						</span>
@@ -299,7 +304,7 @@
 				</span>
 				<ButtonStyled>
 					<a
-						:href="file.url"
+						:href="decorateDownloadUrl(file.url)"
 						class="raised-button"
 						:title="`Download ${file.filename}`"
 						tabindex="0"
@@ -435,10 +440,12 @@ import {
 	injectNotificationManager,
 	injectProjectPageContext,
 	MultiSelect,
+	PROJECT_DEP_MARKER_QUERY,
 	StyledInput,
+	useFormatBytes,
 	useFormatDateTime,
 } from '@modrinth/ui'
-import { formatBytes, renderHighlightedString } from '@modrinth/utils'
+import { renderHighlightedString } from '@modrinth/utils'

 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
@@ -461,11 +468,13 @@ const auth = await useAuth()
 const tags = useGeneratedState()
 const flags = useFeatureFlags()
 const { addNotification } = injectNotificationManager()
+const { createProjectDownloadUrl } = useCdnDownloadContext()
 const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
 	dateStyle: 'long',
 })
 const formatDate = useFormatDateTime({ dateStyle: 'medium' })
+const formatBytes = useFormatBytes()

 // Helper for accessing nuxt app $formatVersion
 const formatVersionDisplay = (versions: string[]) => (data as any).$formatVersion(versions)
@@ -481,6 +490,7 @@ const {
 	dependenciesLoading: contextDependenciesLoading,
 	loadDependencies,
 	invalidate,
+	cdnDownloadReason,
 } = injectProjectPageContext()

 // Load versions and dependencies in parallel
@@ -752,6 +762,21 @@ const sortedDeps = computed(() => {
 	)
 })

+const decoratedPrimaryFileUrl = computed(() =>
+	createProjectDownloadUrl(primaryFile.value?.url, { reason: cdnDownloadReason.value }),
+)
+
+function decorateDownloadUrl(url: string) {
+	return createProjectDownloadUrl(url, { reason: cdnDownloadReason.value })
+}
+
+function navigateToDependency(dependency: { link: string }) {
+	return router.push({
+		path: dependency.link,
+		query: { ...PROJECT_DEP_MARKER_QUERY },
+	})
+}
+
 const environment = computed(
 	() => ENVIRONMENTS_COPY[version.value.environment as keyof typeof ENVIRONMENTS_COPY],
 )
@@ -46,7 +46,7 @@
 					<ButtonStyled circular type="transparent">
 						<a
 							v-tooltip="`Download`"
-							:href="getPrimaryFile(version).url"
+							:href="createDownloadUrl(version)"
 							class="hover:!bg-button-bg [&>svg]:!text-green"
 							aria-label="Download"
 							@click="emit('onDownload')"
@@ -100,7 +100,7 @@
 									id: 'download',
 									color: 'primary',
 									hoverFilled: true,
-									link: getPrimaryFile(version).url,
+									link: createDownloadUrl(version),
 									action: () => {
 										emit('onDownload')
 									},
@@ -266,7 +266,7 @@ import {
 	OverflowMenu,
 	ProjectPageVersions,
 } from '@modrinth/ui'
-import { onMounted, useTemplateRef } from 'vue'
+import { onMounted, useTemplateRef, watch } from 'vue'

 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
 import { getSignInRouteObj } from '~/composables/auth.js'
@@ -274,6 +274,8 @@ import { reportVersion } from '~/utils/report-helpers.ts'

 const route = useRoute()

+const { createProjectDownloadUrl, updateVersionsFilterContext } = useCdnDownloadContext()
+
 const tags = useGeneratedState()
 const flags = useFeatureFlags()
 const auth = await useAuth()
@@ -287,6 +289,7 @@ const {
 	versions,
 	versionsLoading,
 	loadVersions,
+	cdnDownloadReason,
 } = injectProjectPageContext()

 // Load versions on mount (client-side)
@@ -316,6 +319,23 @@ function getPrimaryFile(version) {
 	return version.files.find((x) => x.primary) || version.files[0]
 }

+watch(
+	() => [route.query.g, route.query.l],
+	() => {
+		updateVersionsFilterContext(
+			queryAsStringArray(route.query.g),
+			queryAsStringArray(route.query.l),
+		)
+	},
+	{ immediate: true },
+)
+
+function createDownloadUrl(version) {
+	return createProjectDownloadUrl(getPrimaryFile(version).url, {
+		reason: cdnDownloadReason.value,
+	})
+}
+
 async function copyToClipboard(text) {
 	await navigator.clipboard.writeText(text)
 }
@@ -81,11 +81,19 @@

 <script setup lang="ts">
 import { FileIcon, SpinnerIcon, UploadIcon } from '@modrinth/assets'
-import { Admonition, Avatar, CopyCode, injectNotificationManager } from '@modrinth/ui'
-import { formatBytes, type Project, type Version } from '@modrinth/utils'
+import {
+	Admonition,
+	Avatar,
+	CopyCode,
+	injectNotificationManager,
+	useFormatBytes,
+} from '@modrinth/ui'
+import type { Project, Version } from '@modrinth/utils'

 const { addNotification } = injectNotificationManager()

+const formatBytes = useFormatBytes()
+
 const fileInput = ref<HTMLInputElement>()
 const selectedFile = ref<File | null>(null)
 const fileHashes = ref<{
@@ -657,6 +657,7 @@ watch(
 	[collection, creator],
 	([col, cre]) => {
 		if (col && cre) {
+			const canonicalUrl = col ? `https://modrinth.com/collection/${col.id}` : undefined
 			useSeoMeta({
 				title: formatMessage(messages.collectionTitle, { name: col.name }),
 				description: formatMessage(messages.collectionDescription, {
@@ -667,8 +668,17 @@ watch(
 				ogTitle: formatMessage(messages.collectionTitle, { name: col.name }),
 				ogDescription: col.description,
 				ogImage: col.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',
+				ogUrl: canonicalUrl,
 				robots: col.status === 'listed' ? 'all' : 'noindex',
 			})
+			useHead({
+				link: [
+					{
+						rel: 'canonical',
+						href: canonicalUrl,
+					},
+				],
+			})
 		}
 	},
 	{ immediate: true },
@@ -11,19 +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'
@@ -40,10 +58,15 @@ import type { DisplayLocation, DisplayMode } from '~/plugins/cosmetics.ts'
 const { formatMessage } = useVIntl()
 const debug = useDebugLogger('Discover')

+const { updateDiscoverFilterContext } = useCdnDownloadContext()
+
 const client = injectModrinthClient()
 const queryClient = useQueryClient()

 const filtersMenuOpen = ref(false)
+const stickyInstallHeaderRef = ref<HTMLElement | null>(null)
+
+useStickyObserver(stickyInstallHeaderRef, 'DiscoverInstallHeader')

 const route = useRoute()

@@ -52,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
@@ -140,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,
@@ -173,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) {
@@ -203,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(),
@@ -239,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'] })
 	},
 })

@@ -306,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') {
@@ -318,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) {
@@ -401,7 +688,13 @@ function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject
 			name: project_name,
 			icon: project_icon ?? undefined,
 			onclick:
-				project_id !== project.project_id ? () => navigateTo(`/project/${project_id}`) : undefined,
+				project_id !== project.project_id
+					? () =>
+							navigateTo({
+								path: `/project/${project_id}`,
+								query: { ...PROJECT_DEP_MARKER_QUERY },
+							})
+					: undefined,
 			showCustomModpackTooltip: project_id === project.project_id,
 		}
 	}
@@ -494,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) ||
@@ -501,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),
 			},
@@ -570,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(() => {
@@ -594,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',
@@ -614,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:
@@ -639,6 +1010,21 @@ const searchState = useBrowseSearch({
 	displayMode: resultsDisplayMode,
 })

+watch(queuedServerInstallCount, (count) => {
+	if (count === 0) {
+		hideSelectedServerInstalls.value = false
+	}
+})
+
+watch(
+	() =>
+		searchState.isServerType.value
+			? searchState.serverCurrentFilters.value
+			: searchState.currentFilters.value,
+	(filters) => updateDiscoverFilterContext(filters),
+	{ deep: true, immediate: true },
+)
+
 watch(
 	[
 		() => searchState.query.value,
@@ -655,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({
@@ -687,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,
@@ -710,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>
@@ -741,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;

@@ -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>
@@ -8,17 +8,12 @@
 				autocomplete="off"
 				:placeholder="formatMessage(commonMessages.searchPlaceholder)"
 				clearable
-				wrapper-class="flex-1 lg:max-w-52"
-				input-class="h-[40px]"
+				wrapper-class="flex-1"
+				input-class="h-[40px] w-full"
 				@input="goToPage(1)"
 			/>

-			<div v-if="totalPages > 1" class="hidden flex-1 justify-center lg:flex">
-				<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
-				<ConfettiExplosion v-if="visible" />
-			</div>
-
-			<div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
+			<div class="flex flex-col flex-wrap justify-end gap-2 sm:flex-row lg:flex-shrink-0">
 				<div class="flex flex-col gap-2 sm:flex-row">
 					<Combobox
 						v-model="currentFilterType"
@@ -55,6 +50,20 @@
 							</span>
 						</template>
 					</Combobox>
+
+					<Combobox
+						v-model="itemsPerPage"
+						class="!w-full flex-grow sm:!w-[160px] sm:flex-grow-0 lg:!w-[140px]"
+						:options="itemsPerPageOptions"
+						placeholder="Items per page"
+						@select="goToPage(1)"
+					>
+						<template #selected>
+							<span class="flex flex-row gap-2 align-middle font-semibold">
+								<span class="truncate text-contrast">{{ itemsPerPage }} items</span>
+							</span>
+						</template>
+					</Combobox>
 				</div>

 				<ButtonStyled color="orange">
@@ -71,25 +80,44 @@
 			</div>
 		</div>

-		<div v-if="totalPages > 1" class="flex justify-center lg:hidden">
+		<div v-if="totalPages > 1" class="flex items-center justify-between">
+			<div>
+				Showing {{ itemsPerPage * (currentPage - 1) + 1 }}–{{
+					itemsPerPage * (currentPage - 1) + Math.min(itemsPerPage, paginatedProjects.length)
+				}}
+				of {{ filteredProjects.length }}
+				{{
+					currentFilterType === DEFAULT_FILTER_TYPE ? 'projects' : currentFilterType.toLowerCase()
+				}}
+			</div>
 			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
 			<ConfettiExplosion v-if="visible" />
 		</div>

-		<div class="flex flex-col gap-4">
-			<div v-if="paginatedProjects.length === 0" class="universal-card h-24 animate-pulse"></div>
+		<div class="flex flex-col gap-3">
+			<template v-if="pending">
+				<div
+					v-for="i in 3"
+					:key="`loading-skeleton-${i}`"
+					class="flex h-[98px] w-full animate-pulse rounded-2xl bg-surface-3"
+				></div>
+			</template>
+			<EmptyState
+				v-else-if="paginatedProjects.length === 0"
+				:type="!!query ? 'no-search-result' : 'no-tasks'"
+				:heading="emptyStateHeading"
+				:description="emptyStateDescription"
+			/>
 			<ModerationQueueCard
 				v-for="item in paginatedProjects"
 				v-else
 				:key="item.project.id"
 				:queue-entry="item"
-				:owner="item.owner"
-				:org="item.org"
 				@start-from-project="startFromProject"
 			/>
 		</div>

-		<div v-if="totalPages > 1" class="mt-4 flex justify-center">
+		<div v-if="totalPages > 1" class="flex justify-end">
 			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
 		</div>
 	</div>
@@ -102,6 +130,7 @@ import {
 	type ComboboxOption,
 	commonMessages,
 	defineMessages,
+	EmptyState,
 	injectNotificationManager,
 	Pagination,
 	StyledInput,
@@ -111,7 +140,11 @@ import Fuse from 'fuse.js'
 import ConfettiExplosion from 'vue-confetti-explosion'

 import ModerationQueueCard from '~/components/ui/moderation/ModerationQueueCard.vue'
-import { enrichProjectBatch, type ModerationProject } from '~/helpers/moderation.ts'
+import {
+	type ModerationProject,
+	type ProjectWithOwnership,
+	toModerationProjects,
+} from '~/helpers/moderation.ts'
 import { useModerationQueue } from '~/services/moderation-queue.ts'

 useHead({ title: 'Projects queue - Modrinth' })
@@ -141,39 +174,26 @@ const messages = defineMessages({
 	},
 })

-const { data: allProjects } = await useLazyAsyncData('moderation-projects', async () => {
+const { data: allProjects, pending } = await useLazyAsyncData('moderation-projects', async () => {
 	const startTime = performance.now()
 	let currentOffset = 0
 	const PROJECT_ENDPOINT_COUNT = 350
 	const allProjects: ModerationProject[] = []

-	const enrichmentPromises: Promise<ModerationProject[]>[] = []
-
-	let projects: any[] = []
+	let projects: ProjectWithOwnership[] = []
 	do {
 		projects = (await useBaseFetch(
 			`moderation/projects?count=${PROJECT_ENDPOINT_COUNT}&offset=${currentOffset}`,
 			{ internal: true },
-		)) as any[]
+		)) as ProjectWithOwnership[]

 		if (projects.length === 0) break

-		const enrichmentPromise = enrichProjectBatch(projects)
-		enrichmentPromises.push(enrichmentPromise)
-
+		allProjects.push(...toModerationProjects(projects))
 		currentOffset += projects.length
-
-		if (enrichmentPromises.length >= 3) {
-			const completed = await Promise.all(enrichmentPromises.splice(0, 2))
-			allProjects.push(...completed.flat())
-		}
 	} while (projects.length === PROJECT_ENDPOINT_COUNT)

-	const remainingBatches = await Promise.all(enrichmentPromises)
-	allProjects.push(...remainingBatches.flat())
-
-	const endTime = performance.now()
-	const duration = endTime - startTime
+	const duration = performance.now() - startTime

 	console.debug(
 		`Projects fetched and processed in ${duration.toFixed(2)}ms (${(duration / 1000).toFixed(2)}s)`,
@@ -212,7 +232,6 @@ watch(
 	},
 )

-const currentFilterType = ref('All projects')
 const filterTypes: ComboboxOption<string>[] = [
 	{ value: 'All projects', label: 'All projects' },
 	{ value: 'Modpacks', label: 'Modpacks' },
@@ -222,17 +241,119 @@ const filterTypes: ComboboxOption<string>[] = [
 	{ value: 'Plugins', label: 'Plugins' },
 	{ value: 'Shaders', label: 'Shaders' },
 	{ value: 'Servers', label: 'Servers' },
+	{ value: 'Fucked up', label: 'Fucked up' },
 ]
+const filterTypeValues = filterTypes.map((option) => option.value)
+const DEFAULT_FILTER_TYPE = filterTypeValues[0]

-const currentSortType = ref('Oldest')
 const sortTypes: ComboboxOption<string>[] = [
 	{ value: 'Oldest', label: 'Oldest' },
 	{ value: 'Newest', label: 'Newest' },
 ]
+const sortTypeValues = sortTypes.map((option) => option.value)
+const DEFAULT_SORT_TYPE = sortTypeValues[0]
+
+const itemsPerPageOptions: ComboboxOption<number>[] = [
+	{ value: 20, label: '20' },
+	{ value: 40, label: '40' },
+	{ value: 60, label: '60' },
+	{ value: 80, label: '80' },
+	{ value: 100, label: '100' },
+	{ value: 200, label: '200' },
+]
+const itemsPerPageValues = itemsPerPageOptions.map((option) => option.value)
+const DEFAULT_ITEMS_PER_PAGE = 40
+
+function parseFilterTypeFromQuery(value: LocationQueryValue | LocationQueryValue[]): string {
+	const query = queryAsStringOrEmpty(value)
+	return filterTypeValues.includes(query) ? query : DEFAULT_FILTER_TYPE
+}
+
+function parseSortTypeFromQuery(value: LocationQueryValue | LocationQueryValue[]): string {
+	const query = queryAsStringOrEmpty(value)
+	return sortTypeValues.includes(query) ? query : DEFAULT_SORT_TYPE
+}
+
+const currentFilterType = ref(parseFilterTypeFromQuery(route.query.filter))
+const currentSortType = ref(parseSortTypeFromQuery(route.query.sort))
+
+watch(
+	currentFilterType,
+	(newFilter) => {
+		const currentQuery = { ...route.query }
+		if (newFilter && newFilter !== DEFAULT_FILTER_TYPE) {
+			currentQuery.filter = newFilter
+		} else {
+			delete currentQuery.filter
+		}
+
+		router.replace({
+			path: route.path,
+			query: currentQuery,
+		})
+	},
+	{ immediate: false },
+)
+
+watch(
+	() => route.query.filter,
+	(newFilterParam) => {
+		const newValue = parseFilterTypeFromQuery(newFilterParam)
+		if (currentFilterType.value !== newValue) {
+			currentFilterType.value = newValue
+		}
+	},
+)
+
+watch(
+	currentSortType,
+	(newSort) => {
+		const currentQuery = { ...route.query }
+		if (newSort && newSort !== DEFAULT_SORT_TYPE) {
+			currentQuery.sort = newSort
+		} else {
+			delete currentQuery.sort
+		}
+
+		router.replace({
+			path: route.path,
+			query: currentQuery,
+		})
+	},
+	{ immediate: false },
+)
+
+watch(
+	() => route.query.sort,
+	(newSortParam) => {
+		const newValue = parseSortTypeFromQuery(newSortParam)
+		if (currentSortType.value !== newValue) {
+			currentSortType.value = newValue
+		}
+	},
+)
+
+const itemsPerPageCookie = useCookie<number>('moderation-items-per-page', {
+	default: () => DEFAULT_ITEMS_PER_PAGE,
+	maxAge: 60 * 60 * 24 * 365,
+	sameSite: 'lax',
+	path: '/',
+})
+
+const itemsPerPage = computed({
+	get() {
+		const value = Number(itemsPerPageCookie.value)
+		return itemsPerPageValues.includes(value) ? value : DEFAULT_ITEMS_PER_PAGE
+	},
+	set(value: number) {
+		itemsPerPageCookie.value = value
+	},
+})

 const currentPage = ref(1)
-const itemsPerPage = 15
-const totalPages = computed(() => Math.ceil((filteredProjects.value?.length || 0) / itemsPerPage))
+const totalPages = computed(() =>
+	Math.ceil((filteredProjects.value?.length || 0) / itemsPerPage.value),
+)

 const fuse = computed(() => {
 	if (!allProjects.value || allProjects.value.length === 0) return null
@@ -254,9 +375,7 @@ const fuse = computed(() => {
 				name: 'project.project_type',
 				weight: 1,
 			},
-			'owner.user.username',
-			'org.name',
-			'org.slug',
+			'ownership.name',
 		],
 		includeScore: true,
 		threshold: 0.4,
@@ -274,7 +393,11 @@ const baseFiltered = computed(() => {
 })

 const typeFiltered = computed(() => {
-	if (currentFilterType.value === 'All projects') return baseFiltered.value
+	if (currentFilterType.value === 'All projects') {
+		return baseFiltered.value
+	} else if (currentFilterType.value === 'Fucked up') {
+		return baseFiltered.value.filter((queueItem) => queueItem.project.project_types.length === 0)
+	}

 	const filterMap: Record<string, string> = {
 		Modpacks: 'modpack',
@@ -319,11 +442,31 @@ const filteredProjects = computed(() => {

 const paginatedProjects = computed(() => {
 	if (!filteredProjects.value) return []
-	const start = (currentPage.value - 1) * itemsPerPage
-	const end = start + itemsPerPage
+	const start = (currentPage.value - 1) * itemsPerPage.value
+	const end = start + itemsPerPage.value
 	return filteredProjects.value.slice(start, end)
 })

+const emptyStateHeading = computed(() => {
+	if (query.value) {
+		return 'Not finding anything...'
+	}
+	if (currentFilterType.value !== DEFAULT_FILTER_TYPE) {
+		return 'All done here!'
+	}
+	return 'The queue is empty!'
+})
+
+const emptyStateDescription = computed(() => {
+	if (query.value) {
+		return 'Check that your search query is correct!'
+	}
+	if (currentFilterType.value !== DEFAULT_FILTER_TYPE) {
+		return `There are no ${currentFilterType.value.toLowerCase()} in the queue`
+	}
+	return 'you will probably never see this but if you do, congrats!!! :D'
+})
+
 function goToPage(page: number) {
 	currentPage.value = page
 }
@@ -368,7 +511,7 @@ async function findFirstUnlockedProject(): Promise<ModerationProject | null> {

 async function moderateAllInFilter() {
 	// Start from the current page - get projects from current page onwards
-	const startIndex = (currentPage.value - 1) * itemsPerPage
+	const startIndex = (currentPage.value - 1) * itemsPerPage.value
 	const projectsFromCurrentPage = filteredProjects.value.slice(startIndex)
 	const projectIds = projectsFromCurrentPage.map((queueItem) => queueItem.project.id)
 	await moderationQueue.setQueue(projectIds)
@@ -307,6 +307,7 @@ import {
 	injectModrinthClient,
 	NavTabs,
 	OverflowMenu,
+	PROJECT_DEP_MARKER_QUERY,
 	ProjectCard,
 	ProjectCardList,
 	useCompactNumber,
@@ -489,7 +490,10 @@ function getServerModpackContent(project: ProjectV3) {
 			onclick:
 				project_id !== project.id
 					? () => {
-							navigateTo(`/project/${project_id}`)
+							navigateTo({
+								path: `/project/${project_id}`,
+								query: { ...PROJECT_DEP_MARKER_QUERY },
+							})
 						}
 					: undefined,
 			showCustomModpackTooltip: project_id === project.id,
@@ -551,6 +555,7 @@ watch(
 		if (org) {
 			const title = `${org.name} - Organization`
 			const description = `${org.description} - View the organization ${org.name} on Modrinth`
+			const canonicalUrl = org ? `https://modrinth.com/organization/${org.id}` : undefined

 			useSeoMeta({
 				title,
@@ -558,6 +563,15 @@ watch(
 				ogTitle: title,
 				ogDescription: org.description,
 				ogImage: org.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',
+				ogUrl: canonicalUrl,
+			})
+			useHead({
+				link: [
+					{
+						rel: 'canonical',
+						href: canonicalUrl,
+					},
+				],
 			})
 		}
 	},
@@ -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)
+})
@@ -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)
+})
@@ -8,6 +8,15 @@ export function queryAsString(query: LocationQueryValue | LocationQueryValue[]):
 	return Array.isArray(query) ? (query[0] ?? null) : (query ?? null)
 }

+export function queryAsStringArray(
+	query: LocationQueryValue | LocationQueryValue[] | undefined,
+): string[] {
+	if (query === undefined || query === null) {
+		return []
+	}
+	return Array.isArray(query) ? query.map(String) : [String(query)]
+}
+
 export function routeNameAsString(name: RouteRecordNameGeneric | undefined): string | undefined {
 	return name && typeof name === 'string' ? (name as string) : undefined
 }
@@ -54,6 +54,8 @@ pub enum DownloadReason {
    Dependency,
    /// Project was downloaded as part of a modpack.
    Modpack,
+    /// Project was re-downloaded due to an update.
+    Update,
 }

 impl std::str::FromStr for DownloadReason {
@@ -760,7 +760,19 @@ pub async fn edit_team_member(
                    None
                };

-            if organization_team_member
+            let edited_member_organization_team_member =
+                if let Some(organization) = &organization {
+                    DBTeamMember::get_from_user_id(
+                        organization.team_id,
+                        user_id,
+                        &**pool,
+                    )
+                    .await?
+                } else {
+                    None
+                };
+
+            if edited_member_organization_team_member
                .as_ref()
                .is_some_and(|x| x.is_owner)
                && edit_member
@@ -0,0 +1,2 @@
+# Autogenerated files
+dist
@@ -1,674 +1,165 @@
-                    GNU GENERAL PUBLIC LICENSE
+                   GNU LESSER GENERAL PUBLIC LICENSE
                       Version 3, 29 June 2007

 Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
 Everyone is permitted to copy and distribute verbatim copies
 of this license document, but changing it is not allowed.

-                            Preamble
-
-  The GNU General Public License is a free, copyleft license for
-software and other kinds of works.
-
-  The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works.  By contrast,
-the GNU General Public License is intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains free
-software for all its users.  We, the Free Software Foundation, use the
-GNU General Public License for most of our software; it applies also to
-any other work released this way by its authors.  You can apply it to
-your programs, too.
-
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-  To protect your rights, we need to prevent others from denying you
-these rights or asking you to surrender the rights.  Therefore, you have
-certain responsibilities if you distribute copies of the software, or if
-you modify it: responsibilities to respect the freedom of others.
-
-  For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must pass on to the recipients the same
-freedoms that you received.  You must make sure that they, too, receive
-or can get the source code.  And you must show them these terms so they
-know their rights.
-
-  Developers that use the GNU GPL protect your rights with two steps:
-(1) assert copyright on the software, and (2) offer you this License
-giving you legal permission to copy, distribute and/or modify it.
-
-  For the developers' and authors' protection, the GPL clearly explains
-that there is no warranty for this free software.  For both users' and
-authors' sake, the GPL requires that modified versions be marked as
-changed, so that their problems will not be attributed erroneously to
-authors of previous versions.
-
-  Some devices are designed to deny users access to install or run
-modified versions of the software inside them, although the manufacturer
-can do so.  This is fundamentally incompatible with the aim of
-protecting users' freedom to change the software.  The systematic
-pattern of such abuse occurs in the area of products for individuals to
-use, which is precisely where it is most unacceptable.  Therefore, we
-have designed this version of the GPL to prohibit the practice for those
-products.  If such problems arise substantially in other domains, we
-stand ready to extend this provision to those domains in future versions
-of the GPL, as needed to protect the freedom of users.
-
-  Finally, every program is threatened constantly by software patents.
-States should not allow patents to restrict development and use of
-software on general-purpose computers, but in those that do, we wish to
-avoid the special danger that patents applied to a free program could
-make it effectively proprietary.  To prevent this, the GPL assures that
-patents cannot be used to render the program non-free.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                       TERMS AND CONDITIONS
-
-  0. Definitions.
-
-  "This License" refers to version 3 of the GNU General Public License.
-
-  "Copyright" also means copyright-like laws that apply to other kinds of
-works, such as semiconductor masks.
-
-  "The Program" refers to any copyrightable work licensed under this
-License.  Each licensee is addressed as "you".  "Licensees" and
-"recipients" may be individuals or organizations.
-
-  To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of an
-exact copy.  The resulting work is called a "modified version" of the
-earlier work or a work "based on" the earlier work.
-
-  A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-  To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy.  Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-  To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies.  Mere interaction with a user through
-a computer network, with no transfer of a copy, is not conveying.
-
-  An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License.  If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-  1. Source Code.
-
-  The "source code" for a work means the preferred form of the work
-for making modifications to it.  "Object code" means any non-source
-form of a work.
-
-  A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-  The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form.  A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-  The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities.  However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work.  For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-  The Corresponding Source need not include anything that users
-can regenerate automatically from other parts of the Corresponding
-Source.
-
-  The Corresponding Source for a work in source code form is that
-same work.
-
-  2. Basic Permissions.
-
-  All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met.  This License explicitly affirms your unlimited
-permission to run the unmodified Program.  The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work.  This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-  You may make, run and propagate covered works that you do not
-convey, without conditions so long as your license otherwise remains
-in force.  You may convey covered works to others for the sole purpose
-of having them make modifications exclusively for you, or provide you
-with facilities for running those works, provided that you comply with
-the terms of this License in conveying all material for which you do
-not control copyright.  Those thus making or running the covered works
-for you must do so exclusively on your behalf, under your direction
-and control, on terms that prohibit them from making any copies of
-your copyrighted material outside their relationship with you.
-
-  Conveying under any other circumstances is permitted solely under
-the conditions stated below.  Sublicensing is not allowed; section 10
-makes it unnecessary.
-
-  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-  No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-  When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such circumvention
-is effected by exercising rights under this License with respect to
-the covered work, and you disclaim any intention to limit operation or
-modification of the work as a means of enforcing, against the work's
-users, your or third parties' legal rights to forbid circumvention of
-technological measures.
-
-  4. Conveying Verbatim Copies.
-
-  You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-  You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-  5. Conveying Modified Source Versions.
-
-  You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these conditions:
-
-    a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
-
-    b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under section
-    7.  This requirement modifies the requirement in section 4 to
-    "keep intact all notices".
-
-    c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy.  This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged.  This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
-
-    d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-  A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit.  Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-  6. Conveying Non-Source Forms.
-
-  You may convey a covered work in object code form under the terms
-of sections 4 and 5, provided that you also convey the
-machine-readable Corresponding Source under the terms of this License,
-in one of these ways:
-
-    a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
-
-    b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the
-    Corresponding Source from a network server at no charge.
-
-    c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source.  This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
-
-    d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge.  You need not require recipients to copy the
-    Corresponding Source along with the object code.  If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source.  Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
-
-    e) Convey the object code using peer-to-peer transmission, provided
-    you inform other peers where the object code and Corresponding
-    Source of the work are being offered to the general public at no
-    charge under subsection 6d.
-
-  A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-  A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal, family,
-or household purposes, or (2) anything designed or sold for incorporation
-into a dwelling.  In determining whether a product is a consumer product,
-doubtful cases shall be resolved in favor of coverage.  For a particular
-product received by a particular user, "normally used" refers to a
-typical or common use of that class of product, regardless of the status
-of the particular user or of the way in which the particular user
-actually uses, or expects or is expected to use, the product.  A product
-is a consumer product regardless of whether the product has substantial
-commercial, industrial or non-consumer uses, unless such uses represent
-the only significant mode of use of the product.
-
-  "Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to install
-and execute modified versions of a covered work in that User Product from
-a modified version of its Corresponding Source.  The information must
-suffice to ensure that the continued functioning of the modified object
-code is in no case prevented or interfered with solely because
-modification has been made.
-
-  If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information.  But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-  The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates
-for a work that has been modified or installed by the recipient, or for
-the User Product in which it has been modified or installed.  Access to a
-network may be denied when the modification itself materially and
-adversely affects the operation of the network or violates the rules and
-protocols for communication across the network.
-
-  Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-  7. Additional Terms.
-
-  "Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law.  If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-  When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it.  (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.)  You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-  Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders of
-that material) supplement the terms of this License with terms:
-
-    a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
-
-    b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
-
-    c) Prohibiting misrepresentation of the origin of that material, or
-    requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
-
-    d) Limiting the use for publicity purposes of names of licensors or
-    authors of the material; or
-
-    e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
-
-    f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions of
-    it) with contractual assumptions of liability to the recipient, for
-    any liability that these contractual assumptions directly impose on
-    those licensors and authors.
-
-  All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10.  If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term.  If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-  If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-  Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions;
-the above requirements apply either way.
-
-  8. Termination.
-
-  You may not propagate or modify a covered work except as expressly
-provided under this License.  Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-  However, if you cease all violation of this License, then your
-license from a particular copyright holder is reinstated (a)
-provisionally, unless and until the copyright holder explicitly and
-finally terminates your license, and (b) permanently, if the copyright
-holder fails to notify you of the violation by some reasonable means
-prior to 60 days after the cessation.
-
-  Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-  Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License.  If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-  9. Acceptance Not Required for Having Copies.
-
-  You are not required to accept this License in order to receive or
-run a copy of the Program.  Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance.  However,
-nothing other than this License grants you permission to propagate or
-modify any covered work.  These actions infringe copyright if you do
-not accept this License.  Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-  10. Automatic Licensing of Downstream Recipients.
-
-  Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License.  You are not responsible
-for enforcing compliance by third parties with this License.
-
-  An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations.  If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-  You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License.  For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-  11. Patents.
-
-  A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based.  The
-work thus licensed is called the contributor's "contributor version".
-
-  A contributor's "essential patent claims" are all patent claims
-owned or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version.  For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-  Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-  In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement).  To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-  If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients.  "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-  If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-  A patent license is "discriminatory" if it does not include within
-the scope of its coverage, prohibits the exercise of, or is
-conditioned on the non-exercise of one or more of the rights that are
-specifically granted under this License.  You may not convey a covered
-work if you are a party to an arrangement with a third party that is
-in the business of distributing software, under which you make payment
-to the third party based on the extent of your activity of conveying
-the work, and under which the third party grants, to any of the
-parties who would receive the covered work from you, a discriminatory
-patent license (a) in connection with copies of the covered work
-conveyed by you (or copies made from those copies), or (b) primarily
-for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement,
-or that patent license was granted, prior to 28 March 2007.
-
-  Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-  12. No Surrender of Others' Freedom.
-
-  If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you may
-not convey it at all.  For example, if you agree to terms that obligate you
-to collect a royalty for further conveying from those to whom you convey
-the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-  13. Use with the GNU Affero General Public License.
-
-  Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU Affero General Public License into a single
-combined work, and to convey the resulting work.  The terms of this
-License will continue to apply to the part which is the covered work,
-but the special requirements of the GNU Affero General Public License,
-section 13, concerning interaction through a network will apply to the
-combination as such.
-
-  14. Revised Versions of this License.
-
-  The Free Software Foundation may publish revised and/or new versions of
-the GNU General Public License from time to time.  Such new versions will
-be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation.  If the Program does not specify a version number of the
-GNU General Public License, you may choose any version ever published
-by the Free Software Foundation.
-
-  If the Program specifies that a proxy can decide which future
-versions of the GNU General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-  Later license versions may give you additional or different
-permissions.  However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-  15. Disclaimer of Warranty.
-
-  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
-OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
-PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
-IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
-ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-  16. Limitation of Liability.
-
-  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
-THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
-GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
-USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
-DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
-PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
-EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
-SUCH DAMAGES.
-
-  17. Interpretation of Sections 15 and 16.
-
-  If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If the program does terminal interaction, make it output a short
-notice like this when it starts in an interactive mode:
-
-    <program>  Copyright (C) <year>  <name of author>
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, your program's commands
-might be different; for a GUI interface, you would use an "about box".
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
-<https://www.gnu.org/licenses/>.
-
-  The GNU General Public License does not permit incorporating your program
-into proprietary programs.  If your program is a subroutine library, you
-may consider it more useful to permit linking proprietary applications with
-the library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.  But first, please read
-<https://www.gnu.org/licenses/why-not-lgpl.html>.
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.
@@ -1,62 +1,63 @@
-![Modrinth Monorepo Cover](/.github/assets/monorepo_cover.png)
-
 # @modrinth/api-client

 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-c78aff?style=for-the-badge)](https://www.typescriptlang.org/)
-[![License: GPL-3.0](https://img.shields.io/badge/License-GPL%203.0-c78aff?style=for-the-badge)](LICENSE)
+[![License: LGPL-3.0](https://img.shields.io/badge/License-LGPL%203.0-c78aff?style=for-the-badge)](LICENSE)

-A flexible, type-safe API client for Modrinth's APIs (Labrinth, Kyros & Archon). Works across Node.js, browsers, Nuxt, and Tauri with a feature system for authentication, retries, circuit breaking and other custom processing of requests and responses.
+Platform-agnostic TypeScript client for Modrinth's API across Node.js, browsers, Nuxt, and Tauri.
+
+**⚠️ We use this internally to power modrinth.com, Modrinth App, and Modrinth Hosting frontends. It may break without any notice, but you are welcome to use it.**

 ## Installation

 ```bash
 pnpm add @modrinth/api-client
-# or
-npm install @modrinth/api-client
-# or
-yarn add @modrinth/api-client
+```
+
+Tauri apps also need the optional peer dependency:
+
+```bash
+pnpm add @modrinth/api-client @tauri-apps/plugin-http
 ```

 ## Usage

-### Plain JavaScript/Node.js
+### Generic Node.js or Browser Client

-```typescript
-import { GenericModrinthClient, AuthFeature, ProjectV2 } from '@modrinth/api-client'
+```ts
+import { AuthFeature, GenericModrinthClient, type Labrinth } from '@modrinth/api-client'

 const client = new GenericModrinthClient({
 	userAgent: 'my-app/1.0.0',
-	features: [new AuthFeature({ token: 'mrp_...' })],
+	features: [new AuthFeature({ token: process.env.MODRINTH_TOKEN })],
 })

-// Explicitly make a request using client.request
-const project: any = await client.request('/project/sodium', { api: 'labrinth', version: 2 })
+const project: Labrinth.Projects.v2.Project = await client.labrinth.projects_v2.get('sodium')
+const members = await client.labrinth.projects_v3.getMembers(project.id)
+```

-// Example for archon (Modrinth Hosting)
-const servers = await client.request('/servers?limit=10', { api: 'archon', version: 0 })
+You can still make direct requests through the same platform layer:

-// Or use the provided wrappers for better type support.
-const project: ProjectV2 = await client.projects_v2.get('sodium')
+```ts
+const project = await client.request<Labrinth.Projects.v2.Project>('/project/sodium', {
+	api: 'labrinth',
+	version: 2,
+})
 ```

 ### Nuxt

-```typescript
-import { NuxtModrinthClient, AuthFeature, NuxtCircuitBreakerStorage } from '@modrinth/api-client'
+```ts
+import { AuthFeature, CircuitBreakerFeature, NuxtCircuitBreakerStorage, NuxtModrinthClient } from '@modrinth/api-client'

-// Alternatively you can create a singleton of the client and provide it via DI.
-export const useModrinthClient = () => {
+export const useModrinthClient = async () => {
 	const config = useRuntimeConfig()

-	// example using the useAuth composable from our frontend, replace this with whatever you're using to store auth token
-	const auth = await useAuth()
-
 	return new NuxtModrinthClient({
-		userAgent: 'my-nuxt-app/1.0.0', // leave blank to use default user agent from fetch function
+		userAgent: 'my-nuxt-app/1.0.0',
 		rateLimitKey: import.meta.server ? config.rateLimitKey : undefined,
 		features: [
 			new AuthFeature({
-				token: async () => auth.value.token,
+				token: process.env.MODRINTH_TOKEN,
 			}),
 			new CircuitBreakerFeature({
 				storage: new NuxtCircuitBreakerStorage(),
@@ -64,116 +65,113 @@ export const useModrinthClient = () => {
 		],
 	})
 }
-
-const client = useModrinthClient()
-const project = await client.request('/project/sodium', { api: 'labrinth', version: 2 })
 ```

 ### Tauri

-```typescript
-import { TauriModrinthClient, AuthFeature } from '@modrinth/api-client'
+```ts
 import { getVersion } from '@tauri-apps/api/app'
+import { AuthFeature, TauriModrinthClient } from '@modrinth/api-client'

-const version = await getVersion()
 const client = new TauriModrinthClient({
-	userAgent: `modrinth/theseus/${version} (support@modrinth.com)`,
-	features: [new AuthFeature({ token: 'mrp_...' })],
+	userAgent: async () => `modrinth/theseus/${await getVersion()} (support@modrinth.com)`,
+	features: [new AuthFeature({ token: process.env.MODRINTH_TOKEN })],
 })

-const project = await client.request('/project/sodium', { api: 'labrinth', version: 2 })
+const project = await client.labrinth.projects_v2.get('sodium')
 ```

-### Overriding Base URLs
+## API Modules

-By default, the client uses the production base URLs:
+Modules are available as nested properties on the client:

- `labrinthBaseUrl`: `https://api.modrinth.com/` (Labrinth API)
- `archonBaseUrl`: `https://archon.modrinth.com/` (Archon/Servers API)
+```ts
+client.labrinth.projects_v2
+client.labrinth.projects_v3
+client.labrinth.versions_v3
+```

-You can override these for staging environments or custom instances:
+Types are exported from the package root:

-```typescript
+```ts
+import type { Labrinth } from '@modrinth/api-client'
+
+const project: Labrinth.Projects.v3.Project = await client.labrinth.projects_v3.get('sodium')
+```
+
+## Modrinth Hosting API Modules
+
+- These modules are internal to Modrinth and are only supported inside the Modrinth Hosting panel in Modrinth App and on modrinth.com. They should not be expected to work in third-party clients today. We are discussing how to safely expose access to your own server through these APIs in the future.
+
+## Base URLs
+
+By default, the client uses Modrinth production services:
+
+- `labrinthBaseUrl`: `https://api.modrinth.com`
+
+Override them for staging or custom deployments:
+
+```ts
 const client = new GenericModrinthClient({
 	userAgent: 'my-app/1.0.0',
-	labrinthBaseUrl: 'https://staging-api.modrinth.com/',
-	archonBaseUrl: 'https://staging-archon.modrinth.com/',
-	features: [new AuthFeature({ token: 'mrp_...' })],
+	labrinthBaseUrl: 'https://staging-api.modrinth.com',
 })
-
-// Now requests will use the staging URLs
-await client.request('/project/sodium', { api: 'labrinth', version: 2 })
-// -> https://staging-api.modrinth.com/v2/project/sodium
 ```

-You can also use custom URLs directly in requests:
+External APIs can be targeted per request by passing a full URL as `api` and disabling auth:

-```typescript
-// One-off custom URL (useful for Kyros nodes or dynamic endpoints)
-await client.request('/some-endpoint', {
-	api: 'https://eu-lim16.nodes.modrinth.com/',
-	version: 0,
+```ts
+await client.request('/endpoint', {
+	api: 'https://example.com',
+	version: 1,
+	skipAuth: true,
 })
 ```

 ## Features

-### Authentication
+Features wrap requests before they reach the platform implementation:

-Supports both static and dynamic tokens:
+```ts
+import { AuthFeature, CircuitBreakerFeature, RetryFeature } from '@modrinth/api-client'

-```typescript
-// Static token
-new AuthFeature({ token: 'mrp_...' })
-
-// Dynamic token (e.g., from auth state)
-const auth = await useAuth()
-new AuthFeature({
-	token: async () => auth.value.token,
+const client = new GenericModrinthClient({
+	features: [new AuthFeature({ token: async () => process.env.MODRINTH_TOKEN }), new RetryFeature({ maxAttempts: 3, backoffStrategy: 'exponential' }), new CircuitBreakerFeature({ maxFailures: 3, resetTimeout: 30_000 })],
 })
 ```

-### Retry
+Built-in features include authentication, node auth, retries, circuit breaking, panel version headers, and verbose logging.

-Automatically retries failed requests with configurable backoff:
+## Uploads

-```typescript
-new RetryFeature({
-	maxAttempts: 3,
-	backoffStrategy: 'exponential',
-	initialDelay: 1000,
-	maxDelay: 15000,
+Upload endpoints return an `UploadHandle<T>` with progress and cancellation support:
+
+```ts
+const upload = client.kyros.files_v0.uploadFile(path, file)
+
+upload.onProgress(({ progress }) => {
+	console.log(Math.round(progress * 100))
 })
+
+await upload.promise
 ```

-### Circuit Breaker
+Uploads use `XMLHttpRequest` for progress tracking and are only available in browser-capable contexts. `NuxtModrinthClient.upload()` throws during SSR.

-Prevents cascade failures by opening circuits after repeated failures:
+## Third-Party API Typings

-```typescript
-new CircuitBreakerFeature({
-	maxFailures: 3,
-	resetTimeout: 30000,
-	failureStatusCodes: [500, 502, 503, 504],
-})
+- This package also includes some third-party API modules and typings used by Modrinth internals. They are not part of the stable public API surface and should be used at your own risk.
+
+## Development
+
+```bash
+pnpm --filter @modrinth/api-client build
+pnpm --filter @modrinth/api-client lint
+# or pnpm prepr:frontend:lib in turborepo root.
 ```

-## Documentation
-
-This package is **self-documenting** through TypeScript types and JSDoc comments. Use your IDE's IntelliSense to explore available methods, classes, and configuration options.
-
-For Modrinth API endpoints and routes, refer to the [Modrinth API Documentation](https://docs.modrinth.com).
-
-## Contributing
-
- Modules are available in the `modules/<api>/...` folders.
-  - When a module has different versions available, you should do it like so: `modules/labrinth/projects/v2.ts` etc.
-  - Types for a module's requests should be made available in `modules/<api>/module/types.ts` or `.../types/v2.ts`.
-  - You should expose these types in the `modules/types.ts` file.
- When creating a new module, add it to the `modules/index.ts`'s `MODULE_REGISTRY` for it to become available in the api client class.
-
-Dont forget to run `pnpm fix` before committing.
+When adding a module, add it to `src/modules/index.ts` so it is included in the typed client structure.

 ## License

-Licensed under GPL-3.0 - see the [LICENSE](LICENSE) file for details.
+Licensed under LGPL-3.0. See [LICENSE](LICENSE).
@@ -1,2 +1,7 @@
 import config from '@modrinth/tooling-config/eslint/nuxt.mjs'
-export default config
+
+export default config.append([
+	{
+		ignores: ['dist/'],
+	},
+])
@@ -1,9 +1,41 @@
 {
 	"name": "@modrinth/api-client",
-	"version": "0.1.0",
+	"version": "0.0.0",
 	"description": "An API client for Modrinth's API for use in nuxt, tauri and plain node/browser environments.",
-	"main": "./src/index.ts",
+	"license": "LGPL-3.0-only",
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"files": [
+		"dist",
+		"README.md",
+		"LICENSE"
+	],
+	"sideEffects": false,
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/modrinth/code.git",
+		"directory": "packages/api-client"
+	},
+	"bugs": {
+		"url": "https://github.com/modrinth/code/issues"
+	},
+	"homepage": "https://github.com/modrinth/code/tree/main/packages/api-client#readme",
+	"publishConfig": {
+		"access": "public"
+	},
 	"scripts": {
+		"clean": "node --eval \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
+		"build": "pnpm run clean && esbuild src/index.ts --bundle --format=esm --platform=neutral --target=es2020 --minify --legal-comments=none --outfile=dist/index.js --external:ofetch --external:mitt --external:@tauri-apps/plugin-http && tsc -p tsconfig.build.json",
+		"prepare": "pnpm run build",
 		"lint": "eslint . && prettier --check .",
 		"fix": "eslint . --fix && prettier --write ."
 	},
@@ -12,7 +44,10 @@
 		"ofetch": "^1.4.1"
 	},
 	"devDependencies": {
-		"@modrinth/tooling-config": "workspace:*"
+		"@modrinth/tooling-config": "workspace:*",
+		"@tauri-apps/plugin-http": "^2.0.0",
+		"esbuild": "0.27.2",
+		"typescript": "^5.9.3"
 	},
 	"peerDependencies": {
 		"@tauri-apps/plugin-http": "^2.0.0"
@@ -125,13 +125,15 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {

 		const url = this.buildUrl(path, baseUrl, options.version)

+		const defaultHeaders = await this.buildDefaultHeaders()
+
 		// Merge options with defaults
 		const mergedOptions: RequestOptions = {
 			method: 'GET',
 			timeout: this.config.timeout,
 			...options,
 			headers: {
-				...this.buildDefaultHeaders(),
+				...defaultHeaders,
 				...options.headers,
 			},
 		}
@@ -306,19 +308,25 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 	 * Subclasses can override this to add platform-specific headers
 	 * (e.g., Nuxt rate limit key)
 	 */
-	protected buildDefaultHeaders(): Record<string, string> {
+	protected async buildDefaultHeaders(): Promise<Record<string, string>> {
 		const headers: Record<string, string> = {
 			'Content-Type': 'application/json',
 			...this.config.headers,
 		}

-		if (this.config.userAgent) {
-			headers['User-Agent'] = this.config.userAgent
+		const userAgent = await this.resolveUserAgent()
+		if (userAgent) {
+			headers['User-Agent'] = userAgent
 		}

 		return headers
 	}

+	private async resolveUserAgent(): Promise<string | undefined> {
+		const userAgent = this.config.userAgent
+		return typeof userAgent === 'function' ? await userAgent() : userAgent
+	}
+
 	protected attachArchonSentryCaptureHeader(options: RequestOptions): void {
 		if (options.api !== 'archon' || !options.headers || !this.shouldCaptureArchonRequests()) {
 			return
@@ -404,7 +412,7 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 	 * @example
 	 * ```typescript
 	 * const client = new GenericModrinthClient()
-	 * client.addFeature(new AuthFeature({ token: 'mrp_...' }))
+	 * client.addFeature(new AuthFeature({ token: async () => getOAuthToken() }))
 	 * client.addFeature(new RetryFeature({ maxAttempts: 3 }))
 	 * ```
 	 */
@@ -33,14 +33,8 @@ export interface AuthConfig extends FeatureConfig {
 *
 * @example
 * ```typescript
- * // Static token
 * const auth = new AuthFeature({
- *   token: 'mrp_...'
- * })
- *
- * // Dynamic token (e.g., from auth state)
- * const auth = new AuthFeature({
- *   token: async () => await getAuthToken()
+ *   token: async () => process.env.MODRINTH_TOKEN
 * })
 * ```
 */
@@ -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,
@@ -51,6 +51,10 @@ export namespace Archon {
 				kind?: AddonKind
 			}

+			export type AddAddonsRequest = {
+				addons: AddAddonRequest[]
+			}
+
 			export type RemoveAddonRequest = {
 				kind: AddonKind
 				filename: string
@@ -876,6 +876,7 @@ export namespace Labrinth {
 				include_changelog?: boolean
 				limit?: number
 				offset?: number
+				apiVersion?: 2 | 3
 			}

 			export type VersionChannel = 'release' | 'beta' | 'alpha'
@@ -9,14 +9,14 @@ import { XHRUploadClient } from './xhr-upload-client'
 /**
 * Generic platform client using ofetch
 *
- * This client works in any JavaScript environment (Node.js, browser, workers).
+ * This client works in any JavaScript environment (Node.js, browser, workers, etc).
 *
 * @example
 * ```typescript
 * const client = new GenericModrinthClient({
 *   userAgent: 'my-app/1.0.0',
 *   features: [
- *     new AuthFeature({ token: 'mrp_...' }),
+ *     new AuthFeature({ token: async () => getOAuthToken() }),
 *     new RetryFeature({ maxAttempts: 3 })
 *   ]
 * })
@@ -66,13 +66,17 @@ export interface NuxtClientConfig extends ClientConfig {
 * ```typescript
 * // In a Nuxt composable
 * const config = useRuntimeConfig()
- * const auth = await useAuth()
 *
 * const client = new NuxtModrinthClient({
 *   userAgent: 'my-nuxt-app/1.0.0',
 *   rateLimitKey: import.meta.server ? config.rateLimitKey : undefined,
 *   features: [
- *     new AuthFeature({ token: () => auth.value.token })
+ *     new AuthFeature({
+ *       token: async () => getOAuthToken()
+ *     }),
+ *     new CircuitBreakerFeature({
+ *       storage: new NuxtCircuitBreakerStorage()
+ *     })
 *   ]
 * })
 *
@@ -171,9 +175,9 @@ export class NuxtModrinthClient extends XHRUploadClient {
 		return super.normalizeError(error)
 	}

-	protected buildDefaultHeaders(): Record<string, string> {
+	protected async buildDefaultHeaders(): Promise<Record<string, string>> {
 		const headers: Record<string, string> = {
-			...super.buildDefaultHeaders(),
+			...(await super.buildDefaultHeaders()),
 		}

 		// Use the resolved key (populated by resolveRateLimitKey in request())
@@ -27,11 +27,10 @@ interface HttpError extends Error {
 * ```typescript
 * import { getVersion } from '@tauri-apps/api/app'
 *
- * const version = await getVersion()
 * const client = new TauriModrinthClient({
- *   userAgent: `modrinth/theseus/${version} (support@modrinth.com)`,
+ *   userAgent: async () => `modrinth/theseus/${await getVersion()} (support@modrinth.com)`,
 *   features: [
- *     new AuthFeature({ token: 'mrp_...' })
+ *     new AuthFeature({ token: async () => getOAuthToken() })
 *   ]
 * })
 *
@@ -27,50 +27,57 @@ export abstract class XHRUploadClient extends AbstractModrinthClient {

 		const url = this.buildUrl(path, baseUrl, options.version)

-		// For FormData uploads, don't set Content-Type (let browser set multipart boundary)
-		// For file uploads, use application/octet-stream
-		const isFormData = 'formData' in options && options.formData instanceof FormData
-		const baseHeaders = this.buildDefaultHeaders()
-		// Remove Content-Type for FormData so browser can set multipart/form-data with boundary
-		if (isFormData) {
-			delete baseHeaders['Content-Type']
-		} else {
-			baseHeaders['Content-Type'] = 'application/octet-stream'
-		}
-
-		const mergedOptions: UploadRequestOptions = {
-			retry: false, // default: don't retry uploads
-			...options,
-			headers: {
-				...baseHeaders,
-				...options.headers,
-			},
-		}
-		this.attachArchonSentryCaptureHeader(mergedOptions)
-
-		const context = this.buildUploadContext(url, path, mergedOptions)
-
 		const progressCallbacks: Array<(p: UploadProgress) => void> = []
-		if (mergedOptions.onProgress) {
-			progressCallbacks.push(mergedOptions.onProgress)
+		if (options.onProgress) {
+			progressCallbacks.push(options.onProgress)
 		}
 		const abortController = new AbortController()

-		if (mergedOptions.signal) {
-			mergedOptions.signal.addEventListener('abort', () => abortController.abort())
+		if (options.signal) {
+			options.signal.addEventListener('abort', () => abortController.abort())
 		}

+		let context: RequestContext | undefined
 		const handle: UploadHandle<T> = {
-			promise: this.executeUploadFeatureChain<T>(context, progressCallbacks, abortController)
-				.then(async (result) => {
-					await this.config.hooks?.onResponse?.(result, context)
-					return result
-				})
-				.catch(async (error) => {
-					const apiError = this.normalizeError(error, context)
+			promise: (async () => {
+				const isFormData = 'formData' in options && options.formData instanceof FormData
+				const baseHeaders = await this.buildDefaultHeaders()
+				if (isFormData) {
+					delete baseHeaders['Content-Type']
+				} else {
+					baseHeaders['Content-Type'] = 'application/octet-stream'
+				}
+
+				const mergedOptions: UploadRequestOptions = {
+					retry: false,
+					...options,
+					headers: {
+						...baseHeaders,
+						...options.headers,
+					},
+				}
+				this.attachArchonSentryCaptureHeader(mergedOptions)
+
+				const uploadContext = this.buildUploadContext(url, path, mergedOptions)
+				context = uploadContext
+				if (abortController.signal.aborted) {
+					throw new ModrinthApiError('Upload cancelled')
+				}
+
+				const result = await this.executeUploadFeatureChain<T>(
+					uploadContext,
+					progressCallbacks,
+					abortController,
+				)
+				await this.config.hooks?.onResponse?.(result, uploadContext)
+				return result
+			})().catch(async (error) => {
+				const apiError = this.normalizeError(error, context)
+				if (context) {
 					await this.config.hooks?.onError?.(apiError, context)
-					throw apiError
-				}),
+				}
+				throw apiError
+			}),
 			onProgress: (callback) => {
 				progressCallbacks.push(callback)
 				return handle
@@ -1,6 +1,9 @@
 import type { AbstractFeature } from '../core/abstract-feature'
 import type { RequestContext } from './request'

+export type MaybePromise<T> = T | Promise<T>
+export type UserAgentProvider = string | (() => MaybePromise<string | undefined>)
+
 /**
 * Request lifecycle hooks
 */
@@ -26,11 +29,11 @@ export type RequestHooks = {
 */
 export interface ClientConfig {
 	/**
-	 * User agent string for requests
+	 * User agent string or provider for requests
 	 * Should identify your application (e.g., 'my-app/1.0.0')
 	 * If not provided, the platform's default user agent will be used
 	 */
-	userAgent?: string
+	userAgent?: UserAgentProvider

 	/**
 	 * Base URL for Labrinth API (main Modrinth API)
@@ -0,0 +1,12 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"noEmit": false,
+		"outDir": "dist",
+		"rootDir": "src"
+	},
+	"include": ["src/**/*.ts"],
+	"exclude": ["dist", "node_modules"]
+}
@@ -218,9 +218,8 @@ pub async fn generate_pack_from_version_id(
    icon_url: Option<String>,
    profile_path: String,

-    // Existing loading bar. Unlike when existing_loading_bar is used, this one is pre-initialized with PackFileDownload
-    // For example, you might use this if multiple packs are being downloaded at once and you want to use the same loading bar
    initialized_loading_bar: Option<LoadingBarId>,
+    reason: DownloadReason,
 ) -> crate::Result<CreatePack> {
    let state = State::get().await?;
    let has_icon_url = icon_url.is_some();
@@ -301,7 +300,7 @@ pub async fn generate_pack_from_version_id(
            })?;

    let download_meta = DownloadMeta {
-        reason: DownloadReason::Modpack,
+        reason,
        game_version: profile.game_version.clone(),
        loader: profile.loader.as_str().to_string(),
    };
@@ -48,6 +48,7 @@ pub async fn install_zipped_mrpack(
                icon_url,
                profile_path.clone(),
                None,
+                DownloadReason::Modpack,
            )
            .await?
        }
@@ -57,7 +58,12 @@ pub async fn install_zipped_mrpack(
    };

    // Install pack files, and if it fails, fail safely by removing the profile
-    let result = install_zipped_mrpack_files(create_pack, false).await;
+    let result = install_zipped_mrpack_files(
+        create_pack,
+        false,
+        DownloadReason::Modpack,
+    )
+    .await;

    match result {
        Ok(profile) => Ok(profile),
@@ -74,6 +80,7 @@ pub async fn install_zipped_mrpack(
 pub async fn install_zipped_mrpack_files(
    create_pack: CreatePack,
    ignore_lock: bool,
+    reason: DownloadReason,
 ) -> crate::Result<String> {
    let state = &State::get().await?;

@@ -221,7 +228,7 @@ pub async fn install_zipped_mrpack_files(
            })?;

    let download_meta = DownloadMeta {
-        reason: DownloadReason::Modpack,
+        reason,
        game_version: profile.game_version.clone(),
        loader: profile.loader.as_str().to_string(),
    };
@@ -461,7 +461,7 @@ pub async fn update_project(
            let mut path = Profile::add_project_version(
                profile_path,
                update_version,
-                fetch::DownloadReason::Standalone,
+                fetch::DownloadReason::Update,
                &state.pool,
                &state.fetch_semaphore,
                &state.io_semaphore,
@@ -1,4 +1,5 @@
 use crate::state::CacheBehaviour;
+use crate::util::fetch::DownloadReason;
 use crate::{
    LoadingBarType,
    event::{
@@ -162,7 +163,8 @@ async fn replace_managed_modrinth(
                profile.name.clone(),
                None,
                profile_path.to_string(),
-                Some(shared_loading_bar.clone())
+                Some(shared_loading_bar.clone()),
+                DownloadReason::Update,
            ),
            generate_pack_from_version_id(
                project_id.clone(),
@@ -170,7 +172,8 @@ async fn replace_managed_modrinth(
                profile.name.clone(),
                None,
                profile_path.to_string(),
-                Some(shared_loading_bar)
+                Some(shared_loading_bar),
+                DownloadReason::Update,
            )
        )?
    } else {
@@ -182,6 +185,7 @@ async fn replace_managed_modrinth(
            None,
            profile_path.to_string(),
            None,
+            DownloadReason::Update,
        )
        .await?;
        old_pack_creator.description.existing_loading_bar = None;
@@ -205,6 +209,7 @@ async fn replace_managed_modrinth(
    pack::install_mrpack::install_zipped_mrpack_files(
        new_pack_creator,
        ignore_lock,
+        DownloadReason::Update,
    )
    .await?;

@@ -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()
@@ -951,15 +972,13 @@ impl Profile {
            InitialScanFile,
        > = keys.into_iter().map(|k| (k.path.clone(), k)).collect();

-        let mut file_info_by_hash: std::collections::HashMap<
-            String,
-            CachedFile,
-        > = file_info.into_iter().map(|f| (f.hash.clone(), f)).collect();
+        let file_info_by_hash: std::collections::HashMap<String, CachedFile> =
+            file_info.into_iter().map(|f| (f.hash.clone(), f)).collect();

        let files = DashMap::new();

        for hash in file_hashes {
-            let file = file_info_by_hash.remove(&hash.hash);
+            let file = file_info_by_hash.get(&hash.hash).cloned();
            let trimmed = hash.path.trim_end_matches(".disabled");

            if let Some(initial_file) = keys_by_path.remove(trimmed) {
@@ -1054,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()
@@ -27,6 +27,7 @@ pub enum DownloadReason {
    Standalone,
    Dependency,
    Modpack,
+    Update,
 }

 #[derive(Debug, Clone, Serialize)]
@@ -10,6 +10,73 @@ 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',
+		body: `## Fixed
+- Fixed some buttons appearing as disabled even when they weren't, such as the project icon settings.`,
+	},
+	{
+		date: `2026-05-08T02:24:09+00:00`,
+		product: 'app',
+		version: '0.13.12',
+		body: `## Changed
+- Updated the modpack exporting experience, fixing issues with it and excluding /mods/.connector from the exports.
+
+## Fixed
+- Fixed page width changing based on if there is scrollable content or not, causing things to move when you switch tabs between scrollable and non-scrollable content.`,
+	},
+	{
+		date: `2026-05-08T02:24:09+00:00`,
+		product: 'hosting',
+		body: `## Fixed
+- Fixed failed \`mrpack\` uploads when uploading via the Modrinth App.
+- Fixed support bubble being broken when the console is in full screen/expand mode.`,
+	},
+	{
+		date: `2026-05-08T02:24:09+00:00`,
+		product: 'web',
+		body: `## Changed
+- Project pages now have canonical permalink URLs to hopefully optimize SEO a bit.
+
+## Fixed
+- Fixed error around editing org member permissions.`,
+	},
+	{
+		date: `2026-05-06T22:11:04+00:00`,
+		product: 'app',
+		version: '0.13.11',
+		body: `## Fixed
+- Fixed modpack export including duplicated files as overrides.`,
+	},
 	{
 		date: `2026-05-05T01:34:18+00:00`,
 		product: 'web',
@@ -76,6 +76,7 @@
 		"dayjs": "^1.11.10",
 		"dompurify": "^3.1.7",
 		"es-toolkit": "^1.44.0",
+		"flatpickr": "^4.6.13",
 		"floating-vue": "^5.2.2",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.9.0",
@@ -30,9 +30,10 @@
 </template>

 <script setup lang="ts">
-import { formatBytes } from '@modrinth/utils'
 import { computed, onUnmounted, ref, watch } from 'vue'

+import { useFormatBytes } from '#ui/composables'
+
 interface Props {
 	maxValue: number
 	currentValue: number
@@ -59,6 +60,8 @@ const props = withDefaults(defineProps<Props>(), {
 	],
 })

+const formatBytes = useFormatBytes()
+
 const currentPhrase = ref('')
 const usedPhrases = ref(new Set<number>())
 let phraseInterval: NodeJS.Timeout | null = null
@@ -15,7 +15,7 @@

 		<!-- Project statuses -->
 		<template v-else-if="type === 'approved'">
-			<ListIcon aria-hidden="true" /> {{ formatMessage(messages.listedLabel) }}
+			<GlobeIcon aria-hidden="true" /> {{ formatMessage(messages.listedLabel) }}
 		</template>
 		<template v-else-if="type === 'approved-general'">
 			<CheckIcon aria-hidden="true" /> {{ formatMessage(messages.approvedLabel) }}
@@ -91,7 +91,7 @@ import {
 	CheckIcon,
 	EyeOffIcon,
 	FileTextIcon,
-	ListIcon,
+	GlobeIcon,
 	LockIcon,
 	ModrinthIcon,
 	ScaleIcon,
@@ -134,7 +134,7 @@ const messages = defineMessages({
 	},
 	listedLabel: {
 		id: 'omorphia.component.badge.label.listed',
-		defaultMessage: 'Listed',
+		defaultMessage: 'Public',
 	},
 	moderatorLabel: {
 		id: 'omorphia.component.badge.label.moderator',
@@ -186,7 +186,7 @@ const messages = defineMessages({
 	},
 	withheldLabel: {
 		id: 'omorphia.component.badge.label.withheld',
-		defaultMessage: 'Withheld',
+		defaultMessage: 'Unlisted by staff',
 	},
 })
 const { formatMessage } = useVIntl()
@@ -277,20 +277,20 @@ const fontSize = computed(() => {
 		flex-shrink: 0;
 	}

-	&[disabled],
+	&[disabled]:not([disabled='false']),
 	&[disabled='true'],
 	&.disabled,
 	&.looks-disabled {
 		@apply opacity-50;
 	}

-	&[disabled],
+	&[disabled]:not([disabled='false']),
 	&[disabled='true'],
 	&.disabled {
 		@apply cursor-not-allowed;
 	}

-	&:not([disabled]):not([disabled='true']):not(.disabled) {
+	&:not([disabled]:not([disabled='false'])):not([disabled='true']):not(.disabled) {
 		@apply hover:brightness-[--hover-brightness] focus-visible:brightness-[--hover-brightness] hover:bg-[--_hover-bg] hover:text-[--_hover-text] focus-visible:bg-[--_hover-bg] focus-visible:text-[--_hover-text];

 		&:hover svg:first-child,
@@ -309,7 +309,7 @@ const fontSize = computed(() => {
 	> *:first-child
 	> *:first-child
 	> :is(button, a, .button-like):first-child {
-	&:not([disabled]):not([disabled='true']):not(.disabled) {
+	&:not([disabled]:not([disabled='false'])):not([disabled='true']):not(.disabled) {
 		@apply active:scale-95;
 	}
 }
@@ -14,12 +14,11 @@
 	>
 		<span
 			class="w-5 h-5 rounded-md flex items-center justify-center border-[1px] border-solid"
-			:class="
-				(modelValue
-					? 'bg-brand border-button-border text-brand-inverted'
-					: 'bg-surface-2 border-surface-5') +
-				(disabled ? '' : ' checkbox-shadow group-active:scale-95')
-			"
+			: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,
+			}"
 		>
 			<MinusIcon v-if="indeterminate" aria-hidden="true" stroke-width="3" />
 			<CheckIcon v-else-if="modelValue" aria-hidden="true" stroke-width="3" />
@@ -50,6 +50,7 @@ import { FolderUpIcon } from '@modrinth/assets'
 import { fileIsValid } from '@modrinth/utils'
 import { ref } from 'vue'

+import { useFormatBytes } from '../../composables'
 import { injectNotificationManager } from '../../providers'

 const { addNotification } = injectNotificationManager()
@@ -78,6 +79,8 @@ const props = withDefaults(
 	},
 )

+const formatBytes = useFormatBytes()
+
 const files = ref<File[]>([])

 function matchesAccept(file: File, accept?: string): boolean {
@@ -129,7 +132,7 @@ function addFiles(incoming: FileList, shouldNotReset = false) {
 		alertOnInvalid: true,
 	}

-	files.value = files.value.filter((file) => fileIsValid(file, validationOptions))
+	files.value = files.value.filter((file) => fileIsValid(file, validationOptions, formatBytes))

 	if (files.value.length > 0) {
 		emit('change', files.value)
@@ -12,73 +12,62 @@
 	</label>
 </template>

-<script>
+<script setup lang="ts">
 import { fileIsValid } from '@modrinth/utils'
-import { defineComponent } from 'vue'
+import { ref } from 'vue'

-export default defineComponent({
-	props: {
-		prompt: {
-			type: String,
-			default: 'Select file',
-		},
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		accept: {
-			type: String,
-			default: null,
-		},
+import { useFormatBytes } from '../../composables'
+
+const props = withDefaults(
+	defineProps<{
+		prompt?: string
+		multiple?: boolean
+		accept?: string
 		/**
 		 * The max file size in bytes
 		 */
-		maxSize: {
-			type: Number,
-			default: null,
-		},
-		showIcon: {
-			type: Boolean,
-			default: true,
-		},
-		shouldAlwaysReset: {
-			type: Boolean,
-			default: false,
-		},
-		longStyle: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
+		maxSize?: number | null
+		showIcon?: boolean
+		shouldAlwaysReset?: boolean
+		longStyle?: boolean
+		disabled?: boolean
+	}>(),
+	{
+		prompt: 'Select file',
+		multiple: false,
+		showIcon: true,
+		shouldAlwaysReset: false,
+		longStyle: false,
+		disabled: false,
 	},
-	emits: ['change'],
-	data() {
-		return {
-			files: [],
-		}
-	},
-	methods: {
-		addFiles(files, shouldNotReset) {
-			if (!shouldNotReset || this.shouldAlwaysReset) {
-				this.files = files
-			}
-			const validationOptions = { maxSize: this.maxSize, alertOnInvalid: true }
-			this.files = [...this.files].filter((file) => fileIsValid(file, validationOptions))
-			if (this.files.length > 0) {
-				this.$emit('change', this.files)
-			}
-		},
-		handleDrop(e) {
-			this.addFiles(e.dataTransfer.files)
-		},
-		handleChange(e) {
-			this.addFiles(e.target.files)
-		},
-	},
-})
+)
+
+const emit = defineEmits<{ change: [files: File[]] }>()
+
+const formatBytes = useFormatBytes()
+
+const files = ref<File[]>([])
+
+function addFiles(incoming: FileList, shouldNotReset = false) {
+	if (!shouldNotReset || props.shouldAlwaysReset) {
+		files.value = Array.from(incoming)
+	}
+	const validationOptions = { maxSize: props.maxSize, alertOnInvalid: true }
+	files.value = files.value.filter((file) => fileIsValid(file, validationOptions, formatBytes))
+	if (files.value.length > 0) {
+		emit('change', files.value)
+	}
+}
+
+function handleDrop(e: DragEvent) {
+	addFiles(e.dataTransfer!.files)
+}
+
+function handleChange(e: Event) {
+	const input = e.target as HTMLInputElement
+	if (!input.files) return
+	addFiles(input.files)
+}
 </script>

 <style lang="scss" scoped>
@@ -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 />
@@ -1,11 +1,12 @@
 <template>
-	<div ref="containerRef" class="relative inline-block w-full">
+	<div ref="containerRef" class="relative inline-block" :class="fitContent ? 'w-auto' : 'w-full'">
 		<span
 			ref="triggerRef"
 			role="button"
 			tabindex="0"
-			class="relative flex w-full items-center overflow-hidden rounded-xl bg-surface-4 px-3 py-1 text-left transition-all duration-200"
+			class="relative flex items-center overflow-hidden rounded-xl bg-surface-4 px-3 py-1 text-left transition-all duration-200"
 			:class="[
+				fitContent ? 'w-auto max-w-full' : 'w-full',
 				triggerClass,
 				{
 					'z-[9999]': isOpen,
@@ -19,68 +20,80 @@
 			@click="handleTriggerClick($event)"
 			@keydown="handleTriggerKeydown"
 		>
-			<div
-				ref="tagsContainerRef"
-				class="flex flex-1 items-center gap-1.5 overflow-hidden flex-wrap min-h-8"
-				:style="{ maxHeight: `calc(${maxTagRows} * 30px + ${maxTagRows - 1} * 6px)` }"
-			>
-				<span
-					v-for="tag in visibleTags"
-					:key="String(tag.value)"
-					class="inline-flex items-center gap-1 rounded-full bg-surface-4 px-2.5 py-1 text-sm font-medium text-primary transition-colors border-solid border border-surface-5 hover:brightness-110"
-					@click.stop="removeTag(tag.value)"
-				>
-					{{ tag.label }}
-					<XIcon class="size-3.5 shrink-0 text-secondary" />
-				</span>
-				<Menu
-					v-show="overflowCount > 0"
-					:delay="{ hide: 50, show: 0 }"
-					no-auto-focus
-					:auto-hide="false"
-					@apply-show="popperOverflowTags = [...overflowTags]"
+			<slot
+				v-if="hasCustomInputContent"
+				name="input-content"
+				:is-open="isOpen"
+				:model-value="modelValue"
+				:selected-options="selectedOptions"
+				:clear-all="clearAll"
+				:toggle-open="toggleDropdown"
+				:open-direction="openDirection"
+			/>
+			<template v-else>
+				<div
+					ref="tagsContainerRef"
+					class="flex min-h-8 flex-1 flex-wrap items-center gap-1.5 overflow-hidden"
+					:style="{ maxHeight: `calc(${maxTagRows} * 30px + ${maxTagRows - 1} * 6px)` }"
 				>
 					<span
-						class="inline-flex items-center rounded-full bg-surface-4 px-2 py-1 text-sm font-medium text-secondary border-solid border border-surface-5 select-none cursor-default"
-						@click.stop
+						v-for="tag in visibleTags"
+						:key="String(tag.value)"
+						class="inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-medium text-primary transition-colors hover:brightness-110"
+						@click.stop="removeTag(tag.value)"
 					>
-						+{{ overflowCount }}
+						{{ tag.label }}
+						<XIcon class="size-3.5 shrink-0 text-secondary" />
 					</span>
-					<template #popper>
-						<div class="flex gap-1 flex-wrap max-w-[20rem]" @mousedown.prevent>
-							<span
-								v-for="tag in overflowTags"
-								:key="String(tag.value)"
-								class="inline-flex items-center gap-1 rounded-full bg-surface-4 px-2.5 py-1 text-sm font-medium text-primary border-solid border border-surface-5 cursor-pointer hover:brightness-110"
-								@click.stop="removeTag(tag.value)"
-							>
-								{{ tag.label }}
-								<XIcon class="size-3.5 shrink-0 text-secondary" />
-							</span>
-						</div>
-					</template>
-				</Menu>
-				<span v-if="selectedOptions.length === 0" class="py-1 px-1.5 text-secondary">
-					{{ placeholder }}
-				</span>
-			</div>
-			<div class="ml-2 flex shrink-0 items-center gap-1.5">
-				<button
-					v-if="clearable && modelValue.length > 0"
-					type="button"
-					class="flex items-center justify-center rounded p-0.5 bg-transparent border-none text-secondary hover:text-contrast transition-colors cursor-pointer"
-					aria-label="Clear all"
-					@click.stop="clearAll"
-				>
-					<XIcon class="size-5" />
-				</button>
-				<div class="w-[1px] h-5 bg-surface-5 shrink-0"></div>
-				<ChevronLeftIcon
-					v-if="showChevron"
-					class="size-5 shrink-0 text-secondary transition-transform duration-150"
-					:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
-				/>
-			</div>
+					<Menu
+						v-show="overflowCount > 0"
+						:delay="{ hide: 50, show: 0 }"
+						no-auto-focus
+						:auto-hide="false"
+						@apply-show="popperOverflowTags = [...overflowTags]"
+					>
+						<span
+							class="inline-flex cursor-default select-none items-center rounded-full border border-solid border-surface-5 bg-surface-4 px-2 py-1 text-sm font-medium text-secondary"
+							@click.stop
+						>
+							+{{ overflowCount }}
+						</span>
+						<template #popper>
+							<div class="flex max-w-[20rem] flex-wrap gap-1" @mousedown.prevent>
+								<span
+									v-for="tag in overflowTags"
+									:key="String(tag.value)"
+									class="inline-flex cursor-pointer items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-medium text-primary hover:brightness-110"
+									@click.stop="removeTag(tag.value)"
+								>
+									{{ tag.label }}
+									<XIcon class="size-3.5 shrink-0 text-secondary" />
+								</span>
+							</div>
+						</template>
+					</Menu>
+					<span v-if="selectedOptions.length === 0" class="px-1.5 py-1 text-secondary">
+						{{ placeholder }}
+					</span>
+				</div>
+				<div class="ml-2 flex shrink-0 items-center gap-1.5">
+					<button
+						v-if="clearable && modelValue.length > 0"
+						type="button"
+						class="flex cursor-pointer items-center justify-center rounded border-none bg-transparent p-0.5 text-secondary transition-colors hover:text-contrast"
+						aria-label="Clear all"
+						@click.stop="clearAll"
+					>
+						<XIcon class="size-5" />
+					</button>
+					<div class="h-5 w-[1px] shrink-0 bg-surface-5"></div>
+					<ChevronLeftIcon
+						v-if="showChevron"
+						class="size-5 shrink-0 text-secondary transition-transform duration-150"
+						:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
+					/>
+				</div>
+			</template>
 		</span>

 		<Teleport to="#teleports">
@@ -153,12 +166,38 @@
 								</span>
 							</div>
 						</div>
+
+						<div v-if="$slots.top" class="border-0 border-b border-solid border-b-surface-5 py-1.5">
+							<slot
+								name="top"
+								:model-value="modelValue"
+								:selected-options="selectedOptions"
+								:clear-all="clearAll"
+								:is-open="isOpen"
+							></slot>
+						</div>
+
+						<div
+							v-if="shouldShowSelectionActions"
+							class="flex items-center justify-between gap-3 border-0 border-b border-solid border-b-surface-5 px-6 py-2.5 text-sm"
+						>
+							<span class="font-semibold text-secondary">{{ selectionActionsLabel }}</span>
+							<button
+								type="button"
+								class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors hover:bg-transparent hover:text-contrast"
+								@click="clearAll"
+								@keydown.enter.stop
+								@keydown.space.stop
+							>
+								{{ selectionActionsClearLabel }}
+							</button>
+						</div>
 					</div>

 					<div
 						v-if="filteredOptions.length > 0"
 						ref="optionsContainerRef"
-						class="flex flex-col gap-2 overflow-y-auto px-3 pt-1.5"
+						class="flex flex-col gap-2 overflow-y-auto px-3 py-1.5"
 						:style="{ maxHeight: `${maxHeight}px` }"
 					>
 						<template v-for="(item, index) in filteredOptions" :key="String(item.value)">
@@ -168,7 +207,7 @@
 								:aria-selected="isSelected(item.value)"
 								:aria-disabled="item.disabled || undefined"
 								:data-focused="focusedIndex === index"
-								class="flex items-center gap-2.5 cursor-pointer p-3 text-left transition-colors duration-150 text-contrast hover:bg-surface-5 focus:bg-surface-5 rounded-xl"
+								class="flex items-center gap-2.5 cursor-pointer p-3 text-left transition-colors duration-150 text-contrast hover:bg-surface-5 rounded-xl"
 								:class="[
 									item.class,
 									{
@@ -214,6 +253,10 @@
 						{{ noResultsMessage }}
 					</div>

+					<div v-if="$slots.bottom" @keydown.stop>
+						<slot name="bottom"></slot>
+					</div>
+
 					<slot name="dropdown-footer"></slot>
 				</div>
 			</Transition>
@@ -233,6 +276,7 @@ import {
 	onUnmounted,
 	ref,
 	shallowRef,
+	useSlots,
 	watch,
 } from 'vue'

@@ -263,12 +307,19 @@ const props = withDefaults(
 		clearable?: boolean
 		maxHeight?: number
 		triggerClass?: string
+		fitContent?: boolean
+		/** Width for the teleported dropdown; defaults to the trigger width */
+		dropdownWidth?: string | number
+		/** Minimum width for the teleported dropdown */
+		dropdownMinWidth?: string | number
 		forceDirection?: 'up' | 'down'
 		noOptionsMessage?: string
 		noResultsMessage?: string
 		disableSearchFilter?: boolean
 		includeSelectAllOption?: boolean
 		selectAllLabel?: string
+		showSelectionActions?: boolean
+		selectionActionsClearLabel?: string
 		maxTagRows?: number
 	}>(),
 	{
@@ -279,10 +330,13 @@ const props = withDefaults(
 		showChevron: true,
 		clearable: true,
 		maxHeight: DEFAULT_MAX_HEIGHT,
+		fitContent: false,
 		noOptionsMessage: 'No options available',
 		noResultsMessage: 'No results found',
 		includeSelectAllOption: false,
 		selectAllLabel: 'Select all',
+		showSelectionActions: false,
+		selectionActionsClearLabel: 'Deselect all',
 		maxTagRows: 1,
 	},
 )
@@ -294,6 +348,7 @@ const emit = defineEmits<{
 	searchInput: [query: string]
 }>()

+const slots = useSlots()
 const isOpen = ref(false)
 const searchQuery = ref('')
 const focusedIndex = ref(-1)
@@ -310,9 +365,11 @@ const dropdownStyle = ref({
 	top: '0px',
 	left: '0px',
 	width: '0px',
+	minWidth: '0px',
 })

 const openDirection = ref<'down' | 'up'>('down')
+const hasCustomInputContent = computed(() => Boolean(slots['input-content']))

 const selectedOptions = computed(() => {
 	return props.options.filter((opt) => props.modelValue.includes(opt.value))
@@ -361,6 +418,12 @@ const filteredOptions = computed(() => {

 const isNoOptionsState = computed(() => props.options.length === 0 && !searchQuery.value)
 const shouldShowSelectAll = computed(() => props.includeSelectAllOption && props.options.length > 0)
+const shouldShowSelectionActions = computed(
+	() => props.showSelectionActions && props.modelValue.length > 0,
+)
+const selectionActionsLabel = computed(() => {
+	return props.modelValue.length === 1 ? '1 selected' : `${props.modelValue.length} selected`
+})

 function isSelected(value: T) {
 	return props.modelValue.includes(value)
@@ -387,6 +450,14 @@ function clearAll() {
 	emit('update:modelValue', [])
 }

+function toggleDropdown() {
+	if (isOpen.value) {
+		closeDropdown()
+	} else {
+		openDropdown()
+	}
+}
+
 function toggleSelectAll() {
 	if (isAllSelected.value) {
 		emit('update:modelValue', [])
@@ -460,12 +531,35 @@ function calculateHorizontalPosition(
 	return left
 }

+function resolveDropdownWidth(triggerWidth: number): string {
+	if (props.dropdownWidth === undefined) return `${triggerWidth}px`
+	if (typeof props.dropdownWidth === 'number') return `${props.dropdownWidth}px`
+	return props.dropdownWidth
+}
+
+function resolveCssSize(size: string | number | undefined): string | undefined {
+	if (size === undefined) return undefined
+	if (typeof size === 'number') return `${size}px`
+	return size
+}
+
 async function updateDropdownPosition() {
 	if (!triggerRef.value || !dropdownRef.value) return

 	await nextTick()

 	const triggerRect = triggerRef.value.getBoundingClientRect()
+	const width = resolveDropdownWidth(triggerRect.width)
+	const minWidth = resolveCssSize(props.dropdownMinWidth) ?? '0px'
+
+	dropdownStyle.value = {
+		...dropdownStyle.value,
+		width,
+		minWidth,
+	}
+
+	await nextTick()
+
 	const dropdownRect = dropdownRef.value.getBoundingClientRect()
 	const viewportHeight = window.innerHeight
 	const viewportWidth = window.innerWidth
@@ -477,7 +571,8 @@ async function updateDropdownPosition() {
 	dropdownStyle.value = {
 		top: `${top}px`,
 		left: `${left}px`,
-		width: `${triggerRect.width}px`,
+		width,
+		minWidth,
 	}

 	openDirection.value = direction
@@ -699,6 +794,9 @@ watch(
 	() => props.modelValue,
 	() => {
 		calculateVisibleTags()
+		if (isOpen.value) {
+			updateDropdownPosition()
+		}
 	},
 	{ deep: true },
 )
@@ -1,5 +1,11 @@
 <template>
 	<div class="overflow-hidden rounded-2xl border border-solid border-surface-5">
+		<div
+			v-if="hasHeaderSlot"
+			class="border-solid border-0 border-b border-surface-5 bg-surface-3 p-4"
+		>
+			<slot name="header" />
+		</div>
 		<table class="w-full table-fixed border-separate border-spacing-0 border-surface-5">
 			<thead class="">
 				<tr class="bg-surface-3">
@@ -44,37 +50,62 @@
 					</th>
 				</tr>
 			</thead>
-			<tbody>
-				<tr
-					v-for="(row, rowIndex) in data"
-					:key="rowIndex"
-					:class="rowIndex % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'"
-				>
-					<td v-if="showSelection" class="w-10 border-solid border-0 border-t border-surface-5">
-						<Checkbox
-							:model-value="isSelected(row)"
-							class="shrink-0 p-4"
-							@update:model-value="toggleSelection(row)"
-						/>
-					</td>
-					<td
-						v-for="column in columns"
-						:key="column.key"
-						class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-5"
-						:class="`text-${column.align ?? 'left'}`"
-						:style="column.width ? { width: column.width } : undefined"
-					>
-						<slot
-							:name="`cell-${column.key}`"
-							:row="row"
-							:value="row[column.key]"
-							:column="column"
-							:index="rowIndex"
-						>
-							{{ row[column.key] ?? '' }}
+			<tbody :ref="setListContainer">
+				<tr v-if="data.length === 0" class="bg-surface-2">
+					<td :colspan="columnSpan" class="border-solid border-0 border-t border-surface-5 p-0">
+						<slot name="empty-state">
+							<div class="text-secondary flex h-64 items-center justify-center">
+								No data available.
+							</div>
 						</slot>
 					</td>
 				</tr>
+				<template v-else>
+					<tr v-if="virtualized && topSpacerHeight > 0" aria-hidden="true">
+						<td
+							:colspan="columnSpan"
+							class="border-0 p-0"
+							:style="{ height: `${topSpacerHeight}px` }"
+						></td>
+					</tr>
+					<tr
+						v-for="(row, rowIndex) in renderedRows"
+						:key="getRowRenderKey(row, getAbsoluteRowIndex(rowIndex))"
+						:class="getAbsoluteRowIndex(rowIndex) % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'"
+					>
+						<td v-if="showSelection" class="w-10 border-solid border-0 border-t border-surface-5">
+							<Checkbox
+								:model-value="isSelected(row)"
+								class="shrink-0 p-4"
+								@update:model-value="toggleSelection(row)"
+							/>
+						</td>
+						<td
+							v-for="column in columns"
+							:key="column.key"
+							class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-5"
+							:class="`text-${column.align ?? 'left'}`"
+							:style="column.width ? { width: column.width } : undefined"
+						>
+							<slot
+								:name="`cell-${column.key}`"
+								:row="row"
+								:value="row[column.key]"
+								:column="column"
+								:index="getAbsoluteRowIndex(rowIndex)"
+							>
+								{{ row[column.key] ?? '' }}
+							</slot>
+						</td>
+					</tr>
+					<tr v-if="virtualized && bottomSpacerHeight > 0" aria-hidden="true">
+						<td
+							:colspan="columnSpan"
+							class="border-0 p-0"
+							:style="{ height: `${bottomSpacerHeight}px` }"
+						></td>
+					</tr>
+				</template>
 			</tbody>
 		</table>
 	</div>
@@ -86,8 +117,9 @@
 	generic="K extends string = string, T extends Record<string, unknown> = Record<K, unknown>"
 >
 import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
-import { computed } from 'vue'
+import { computed, toRef, useSlots } from 'vue'

+import { useVirtualScroll } from '../../composables/virtual-scroll'
 import Checkbox from './Checkbox.vue'

 export type TableColumnAlign = 'left' | 'center' | 'right'
@@ -115,16 +147,49 @@ const props = withDefaults(
 		data: T[] /* Row data for table */
 		showSelection?: boolean
 		rowKey?: keyof T /* The key used to uniquely identify each row */
+		virtualized?: boolean
+		virtualRowHeight?: number
+		virtualBufferSize?: number /* The number of extra rows rendered above and below the visible viewport */
 	}>(),
 	{
 		showSelection: false,
 		rowKey: 'id' as keyof T,
+		virtualized: false,
+		virtualRowHeight: 56,
+		virtualBufferSize: 5,
 	},
 )

 const selectedIds = defineModel<unknown[]>('selectedIds', { default: () => [] })
 const sortColumn = defineModel<string | undefined>('sortColumn')
 const sortDirection = defineModel<SortDirection>('sortDirection', { default: 'asc' })
+const slots = useSlots()
+const hasHeaderSlot = computed(() => Boolean(slots.header))
+const columnSpan = computed(() => Math.max(props.columns.length + (props.showSelection ? 1 : 0), 1))
+
+const {
+	listContainer,
+	totalHeight,
+	visibleRange,
+	visibleTop: topSpacerHeight,
+	visibleItems,
+} = useVirtualScroll(toRef(props, 'data'), {
+	itemHeight: props.virtualRowHeight,
+	bufferSize: props.virtualBufferSize,
+	enabled: toRef(props, 'virtualized'),
+})
+
+const renderedRows = computed(() => (props.virtualized ? visibleItems.value : props.data))
+const bottomSpacerHeight = computed(() => {
+	if (!props.virtualized) {
+		return 0
+	}
+
+	return Math.max(
+		0,
+		totalHeight.value - topSpacerHeight.value - renderedRows.value.length * props.virtualRowHeight,
+	)
+})

 const emit = defineEmits<{
 	sort: [column: string, direction: SortDirection]
@@ -141,6 +206,23 @@ function getRowId(row: T): unknown {
 	return row[props.rowKey as keyof T]
 }

+function setListContainer(element: unknown) {
+	listContainer.value = props.virtualized ? (element as HTMLElement | null) : null
+}
+
+function getAbsoluteRowIndex(rowIndex: number): number {
+	return props.virtualized ? visibleRange.value.start + rowIndex : rowIndex
+}
+
+function getRowRenderKey(row: T, rowIndex: number): PropertyKey {
+	const rowId = getRowId(row)
+	if (typeof rowId === 'string' || typeof rowId === 'number' || typeof rowId === 'symbol') {
+		return rowId
+	}
+
+	return rowIndex
+}
+
 function isSelected(row: T): boolean {
 	return selectedIds.value.includes(getRowId(row))
 }
@@ -21,8 +21,11 @@ export type { ComboboxOption } from './Combobox.vue'
 export { default as Combobox } from './Combobox.vue'
 export { default as ContentPageHeader } from './ContentPageHeader.vue'
 export { default as CopyCode } from './CopyCode.vue'
+export { default as DatePicker } from './DatePicker.vue'
 export { default as DoubleIcon } from './DoubleIcon.vue'
 export { default as DropArea } from './DropArea.vue'
+export type { DropdownFilterBarCategory, DropdownFilterBarOption } from './DropdownFilterBar.vue'
+export { default as DropdownFilterBar } from './DropdownFilterBar.vue'
 export { default as DropdownSelect } from './DropdownSelect.vue'
 export { default as DropzoneFileInput } from './DropzoneFileInput.vue'
 export { default as EmptyState } from './EmptyState.vue'
@@ -268,16 +268,12 @@ import {
 	Pagination,
 	TagItem,
 	useCompactNumber,
+	useFormatBytes,
 	useFormatDateTime,
 	VersionChannelIndicator,
 	VersionFilterControl,
 } from '@modrinth/ui'
-import {
-	formatBytes,
-	formatVersionsForDisplay,
-	type GameVersionTag,
-	type Version,
-} from '@modrinth/utils'
+import { formatVersionsForDisplay, type GameVersionTag, type Version } from '@modrinth/utils'
 import { Menu } from 'floating-vue'
 import { computed, type Ref, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -293,6 +289,7 @@ const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
 	dateStyle: 'long',
 })
+const formatBytes = useFormatBytes()

 type VersionWithDisplayUrlEnding = Version & {
 	displayUrlEnding: string
@@ -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)
 })

@@ -15,7 +15,7 @@
 			<span>
 				{{
 					formatMessage(messages.extracted, {
-						size: 'bytes_processed' in op ? formatBytes(op.bytes_processed ?? 0) : '0 B',
+						size: formatBytes(op.bytes_processed ?? 0),
 					})
 				}}
 			</span>
@@ -35,11 +35,11 @@

 <script setup lang="ts">
 import { PackageOpenIcon } from '@modrinth/assets'
-import { formatBytes } from '@modrinth/utils'
 import { computed } from 'vue'

 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { useFormatBytes } from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import type { FileOperation } from '#ui/layouts/shared/files-tab/types'
 import { injectModrinthServerContext } from '#ui/providers'
@@ -53,6 +53,7 @@ const props = defineProps<{
 }>()

 const { formatMessage } = useVIntl()
+const formatBytes = useFormatBytes()
 const ctx = injectModrinthServerContext()

 const messages = defineMessages({
@@ -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'"
@@ -25,13 +25,15 @@

 <script setup lang="ts">
 import { UploadIcon } from '@modrinth/assets'
-import { formatBytes } from '@modrinth/utils'
 import { computed } from 'vue'

 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { useFormatBytes } from '#ui/composables'
 import { injectModrinthServerContext } from '#ui/providers'

+const formatBytes = useFormatBytes()
+
 const ctx = injectModrinthServerContext()

 const state = computed(() => ctx.uploadState.value)
@@ -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')
@@ -39,11 +39,13 @@ import { ButtonStyled, VersionChannelIndicator } from '../index'

 const props = defineProps<{
 	version: Version
+	decorateDownloadUrl?: (url: string) => string
 }>()

 const downloadUrl = computed(() => {
 	const primary: VersionFile = props.version.files.find((x) => x.primary) || props.version.files[0]
-	return primary.url
+	const raw = primary.url
+	return props.decorateDownloadUrl ? props.decorateDownloadUrl(raw) : raw
 })

 const emit = defineEmits<{
@@ -0,0 +1,39 @@
+import { defineMessage, useVIntl } from '#ui/composables/i18n.ts'
+
+const messages = [
+	defineMessage({
+		id: 'format.bytes.0',
+		defaultMessage: '{count, plural, one {# byte} other {# bytes}}',
+	}),
+	defineMessage({
+		id: 'format.bytes.1',
+		defaultMessage: '{count, number} KiB',
+	}),
+	defineMessage({
+		id: 'format.bytes.2',
+		defaultMessage: '{count, number} MiB',
+	}),
+	defineMessage({
+		id: 'format.bytes.3',
+		defaultMessage: '{count, number} GiB',
+	}),
+	defineMessage({
+		id: 'format.bytes.4',
+		defaultMessage: '{count, number} TiB',
+	}),
+]
+
+export function useFormatBytes() {
+	const { formatMessage } = useVIntl()
+
+	function format(bytes: number, decimals = 2): string {
+		if (bytes === 0) return formatMessage(messages[0], { count: 0 })
+
+		const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), messages.length - 1)
+		return formatMessage(messages[exponent], {
+			count: (bytes / Math.pow(1024, exponent)).toFixed(decimals),
+		})
+	}
+
+	return format
+}
@@ -1,6 +1,7 @@
 import { LRUCache } from 'lru-cache'

 import { injectI18n } from '../providers/i18n'
+import { LOCALES } from './i18n.ts'

 const formatterCache = new LRUCache<string, Intl.NumberFormat>({ max: 15 })

@@ -35,16 +36,13 @@ export function useCompactNumber() {
 		return twoDigitsCompactFormatter.format(value)
 	}

-	function formatCompactNumberPlural(value: number | bigint): string {
+	function formatCompactNumberPlural(value: number | bigint): number | bigint {
 		if (value < 10_000) {
-			return value.toString()
+			return value
 		}
-		if (value < 1_000_000) {
-			const oneDigitCompactFormatter = getCompactFormatter(locale.value, 1)
-			return oneDigitCompactFormatter.format(value)
-		}
-		const twoDigitsCompactFormatter = getCompactFormatter(locale.value, 2)
-		return twoDigitsCompactFormatter.format(value)
+		const currentLocale = locale.value
+		const localeDefinition = LOCALES.find((l) => l.code === currentLocale)
+		return localeDefinition?.compactNumberPlural ?? NaN
 	}

 	return { formatCompactNumber, formatCompactNumberPlural }
@@ -30,6 +30,7 @@ export interface LocaleDefinition {
 	name: string
 	translatedName: MessageDescriptor
 	numeric?: Intl.RelativeTimeFormatNumeric
+	compactNumberPlural?: number
 	dir?: 'ltr' | 'rtl'
 	serverLanguageCode?: string
 }
@@ -92,6 +93,7 @@ export const LOCALES: LocaleDefinition[] = [
 		code: 'fil-PH',
 		name: 'Filipino',
 		translatedName: defineMessage({ id: 'locale.fil-PH', defaultMessage: 'Filipino' }),
+		compactNumberPlural: 1,
 		serverLanguageCode: 'tl',
 	},
 	{
@@ -1,5 +1,6 @@
 export * from './debug-logger'
 export * from './dynamic-font-size'
+export * from './format-bytes'
 export * from './format-date-time'
 export * from './format-money'
 export * from './format-number'
@@ -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)

@@ -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>
@@ -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>
@@ -1 +1,2 @@
+export * from './install-logic'
 export * from './use-browse-search'
@@ -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}.`,
+	)
+}
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from 'vue-router'

 import { useDebugLogger } from '#ui/composables/debug-logger'
 import type { FilterType, FilterValue, ProjectType, SortType } from '#ui/utils/search'
-import { useSearch } from '#ui/utils/search'
+import { LOADER_FILTER_TYPES, useSearch } from '#ui/utils/search'
 import { useServerSearch } from '#ui/utils/server-search'

 import type { BrowseSearchResponse } from '../types'
@@ -60,14 +60,6 @@ export interface BrowseSearchState {
 	onFilterChange: () => void
 }

-const LOADER_FILTER_TYPES = [
-	'mod_loader',
-	'plugin_loader',
-	'modpack_loader',
-	'shader_loader',
-	'plugin_platform',
-] as const
-
 export function useBrowseSearch(options: UseBrowseSearchOptions): BrowseSearchState {
 	const debug = useDebugLogger('BrowseSearch')
 	const route = useRoute()
@@ -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>
@@ -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'
@@ -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">
@@ -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'>
@@ -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
@@ -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
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
François-X. T.	5d1ddeda24	Fmt	2026-05-09 17:09:10 -04:00
ProspectorandGitHub	a0228dc2b1	Merge branch 'main' into patch-1	2026-05-09 14:01:54 -07:00
Calum H.andGitHub	07f9e3aedc	feat: changelog 0.13.3 (#6055 )	2026-05-09 19:13:37 +00:00
Calum H.GitHub Prospector	a79b8e0777	feat: clean up browse shared layout logic + introduce queuing (#6030 ) * 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>	2026-05-09 19:01:23 +00:00
aecsocketandGitHub	671f6d264a	changelog (#6054 )	2026-05-09 18:34:26 +00:00
aecsocketandGitHub	e231df1f97	WebView window event handling fixes (#6038 ) * WebView fixes * UA override logic * fix * debug logs * alter all webviews * cookies stuff * remove debug stuff	2026-05-09 15:10:51 +00:00
JerozgenandGitHub	3052a14d95	feat: make byte size units translatable (#5969 ) Make byte size units translatable	2026-05-09 09:26:59 +00:00
Jerozgen GitHub Calum H.	e8665f43ca	Filipino compact number plural rule (#5516 ) Use `one` for compact numbers in Filipino Signed-off-by: Jerozgen <jerozgen@gmail.com> Co-authored-by: Calum H. <calum@modrinth.com>	2026-05-09 09:20:05 +00:00
Truman GaoandGitHub	cba4550be4	feat: table component updates (#6042 ) * feat: implement table header slot, empty state, and virtualization * refactor: pnpm prepr	2026-05-08 21:29:06 +00:00
ProspectorandGitHub	384556a810	fix: instance redirects to root page with / making it appear as a sub-page in navigation (#6040 )	2026-05-08 19:54:25 +00:00
Calum H.andGitHub	a082e8597c	fix: app user agent for api-client reqs using tauri http plugin (#6045 ) fix: app user agent	2026-05-08 19:52:52 +00:00
Prospector	7048a35e9f	changelog	2026-05-08 02:58:50 -07:00
ProspectorandGitHub	c166ce52b3	fix: some buttons appear disabled even if they aren't (#6037 ) This is because [disabled="false"] met the criteria of [disabled] as a css selector	2026-05-08 09:39:13 +00:00
ProspectorandGitHub	9c99518497	chore: improve moderation ux (#6035 ) * feat: save project review queue filters * reduce unnecessary network calls + prepr * missed file * ui tweaks * add fucked up * add label + prepr * prepr * update legacy badge labels * globe * fix margin * be more reasonable * pending state * fix double review, prepr * small badge text	2026-05-08 01:40:28 -07:00
Prospector	758ed818c8	changelog	2026-05-07 19:24:32 -07:00
ProspectorandGitHub	83e45d7a5c	refactor: update modpack export modal, exclude /mods/.connector (#6032 ) * refactor: update modpack export modal, exclude /mods/.connector * Add slash suffix to folders * prepr * preprr	2026-05-07 19:23:46 -07:00
ProspectorandGitHub	77b30b27fe	fix: make scrollbar gutter stable in app viewport (#6033 )	2026-05-07 19:21:37 -07:00
ProspectorandGitHub	3d7aea5a45	feat: add download metadata to website (#6034 ) * feat: add download metadata to website * add to project cards	2026-05-07 19:20:54 -07:00
Calum H.andGitHub	fd5d2797b3	fix: file picker in app not working with mrpack (#6027 ) fix: file picker in app	2026-05-07 16:12:44 +00:00
Calum H.andGitHub	ec85d9de1c	fix: intercom bubble on console fullscreen (#6029 )	2026-05-07 16:12:11 +00:00
Michael H.andGitHub	22415a4cc6	fix: check edited member, not editor, for org owner permission guard (#6024 ) fix: check edited member, not editor, for org owner permission guard (#1400)	2026-05-07 14:59:05 +00:00
Corsican FrogandGitHub	3c6fadf5e8	Merge branch 'main' into patch-1	2026-05-07 15:54:36 +02:00
Truman Gao GitHub Prospector	871672d8bf	feat: date picker component (#6010 ) * feat: date picker component * fix: month and year input padding * fix: chevron padding issue * feat: more padding/style fixes * feat: implement header disabled state for min/max dates * feat: implement dragging on start/end dates to move dates * feat: improve selected range styles * fix: type error * fix: time input problems * feat: implement 2 calendar view * fix: white bg when dragging on a normal day * fix: selected date background incorrectly applied * prepr --------- Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>	2026-05-07 13:22:48 +00:00
aecsocketandGitHub	e8dc3c3150	Add update download reason to analytics (#6023 ) * Add download reason to analytics * mark modpack updates as actual updates in analytics * fmt	2026-05-07 13:07:20 +00:00
ProspectorandGitHub	56dae8f104	chore: give projects, orgs, and collections canonical URLs to hopefully improve SEO (#6014 ) * Give projects, collections, and orgs canonical URLs * prepr	2026-05-07 06:07:41 -07:00
Corsican FrogandGitHub	8af43e59b9	Merge branch 'main' into patch-1	2026-05-07 11:24:07 +02:00
Calum H.andGitHub	ae9ca4db18	feat: doc change to trigger ci (#6019 )	2026-05-07 01:03:24 +02:00
Calum H.andGitHub	4eeb53c429	fix: virt version bumping npm (#6018 )	2026-05-07 01:00:45 +02:00
Calum H.andGitHub	c69f24f94d	feat: publish api-client to npm (#6016 ) * feat: publish api-client to npm * feat: change hosting wording + examples * GPL -> LGPL * fix: remove manual publishing + git url * fix: lint * fix: lint	2026-05-06 22:39:06 +00:00
Prospector	de07bcff7d	changelog	2026-05-06 15:21:13 -07:00
ProspectorandGitHub	beff44767e	fix: duplicate files ending up as overrides in mrpack export (#6015 ) * fix: duplicate files ending up as overrides in mrpack export * fmt	2026-05-06 22:00:11 +00:00
Truman GaoandGitHub	5875e4332f	feat: implement dropdown filter bar (#6009 )	2026-05-06 19:57:58 +00:00
Corsican FrogandGitHub	418e4f281d	Merge branch 'main' into patch-1	2026-05-06 18:46:07 +02:00
Corsican FrogandGitHub	abc6cf59d8	Whitelist scannable instance content files Only scan supported content archives into instance content. Accept .jar files for mods and .zip files for datapacks, resourcepacks, and shaderpacks, after trimming the .disabled suffix. This prevents .DS_Store and other unsupported files from appearing in the Content tab. Signed-off-by: Corsican Frog <49497194+acorsicanfrog@users.noreply.github.com>	2026-05-05 20:56:54 +02:00
Corsican FrogandGitHub	849fe4e1ba	Hide dotfiles from instance content scanning Prevent hidden files such as .DS_Store from being treated as valid instance content. This updates the profile scanning logic in [packages/app-lib/src/state/profiles.rs](/Users/froggy/Downloads/code-main/packages/app-lib/src/state/profiles.rs#L420) to ignore basenames that start with '.', and applies that filter consistently in both scan paths. Signed-off-by: Corsican Frog <49497194+acorsicanfrog@users.noreply.github.com>	2026-05-05 13:35:01 +02:00