From ef32d86a0e259a1b1fcfed6d77f168340a2c03fa Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Sat, 30 May 2026 16:16:11 +0100
Subject: [PATCH 1/3] feat: incompat modal improvement

---
 apps/app-frontend/src/App.vue                 |   6 +
 .../IncompatibilityWarningModal.vue           | 539 ++++++++++++++----
 .../src/providers/content-install.ts          |  30 +-
 .../ui/src/components/base/StyledInput.vue    |   3 -
 .../components/search/SearchSidebarFilter.vue |   2 +-
 .../src/layouts/shared/browse-tab/sidebar.vue |   7 +
 .../components/modals/ContentInstallModal.vue |  30 +-
 7 files changed, 477 insertions(+), 140 deletions(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 5036efc8a9..de2c8d9615 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -620,6 +620,12 @@ const updateToPlayModal = ref()
 
 const modrinthLoginFlowWaitModal = ref()
 
+watch(incompatibilityWarningModal, (modal) => {
+	if (modal) {
+		setContentIncompatibilityWarningModal(modal)
+	}
+})
+
 setupAuthProvider(credentials, async (_redirectPath) => {
 	await signIn()
 })
diff --git a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
index cfcd483290..a92aa0c4b0 100644
--- a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
@@ -1,185 +1,482 @@
 <template>
-	<ModalWrapper ref="incompatibleModal" header="Incompatibility warning" :on-hide="onInstall">
-		<div class="modal-body">
-			<p>
-				This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
-				you're trying to install it on. Are you sure you want to continue? Dependencies will not be
-				installed.
-			</p>
-			<table>
-				<thead>
-					<tr class="header">
-						<th>{{ instance?.name }}</th>
-						<th>{{ project.title }}</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr class="content">
-						<td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
-						<td>
-							<Combobox
-								v-if="versions?.length > 1"
-								v-model="selectedVersionId"
-								:options="versionOptions"
-								:searchable="true"
-								placeholder="Select version"
-								force-direction="up"
-								:max-height="150"
-							/>
-							<span v-else>
-								<span>{{ selectedVersionLabel }}</span>
-							</span>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-			<div class="button-group">
+	<NewModal
+		ref="incompatibleModal"
+		no-padding
+		fade="warning"
+		max-width="600px"
+		width="600px"
+		:on-hide="handleHide"
+		:header="formatMessage(messages.header)"
+	>
+		<div class="flex h-[min(680px,calc(95vh-8rem))] min-h-0 flex-col overflow-hidden">
+			<div class="flex flex-col gap-4 p-6 pb-4">
+				<Admonition
+					type="warning"
+					:body="
+						formatMessage(messages.conflictSummary, {
+							instance: formatInstanceCompatibilityLabel(),
+						})
+					"
+				/>
+
+				<StyledInput
+					v-model="search"
+					:icon="SearchIcon"
+					type="search"
+					clearable
+					:placeholder="formatMessage(messages.searchPlaceholder)"
+					wrapper-class="w-full"
+				/>
+			</div>
+
+			<div class="relative min-h-0 flex-1">
+				<Transition
+					enter-active-class="transition-all duration-200 ease-out"
+					enter-from-class="opacity-0 max-h-0"
+					enter-to-class="opacity-100 max-h-4"
+					leave-active-class="transition-all duration-200 ease-in"
+					leave-from-class="opacity-100 max-h-4"
+					leave-to-class="opacity-0 max-h-0"
+				>
+					<div
+						v-if="showVersionTopFade"
+						class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-4 bg-gradient-to-b from-bg-raised to-transparent"
+					/>
+				</Transition>
+
+				<div
+					ref="versionListRef"
+					class="h-full min-h-0 overflow-y-auto px-6 pb-3"
+					@scroll="checkVersionScrollState"
+				>
+					<div v-if="filteredVersions.length > 0" class="flex flex-col gap-2" role="listbox">
+						<div
+							v-for="version in filteredVersions"
+							:key="version.id"
+							role="option"
+							tabindex="0"
+							:aria-selected="selectedVersion?.id === version.id"
+							class="w-full cursor-pointer rounded-2xl border border-solid p-4 text-left active:scale-[0.99] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-shadow"
+							:class="
+								selectedVersion?.id === version.id
+									? 'border-brand bg-brand-highlight'
+									: 'border-surface-5 bg-surface-3 hover:brightness-[1.08] focus-visible:brightness-[1.08]'
+							"
+							@click="selectedVersion = version"
+							@keydown.enter.prevent="selectedVersion = version"
+							@keydown.space.prevent="selectedVersion = version"
+						>
+							<div class="flex items-start gap-3">
+								<VersionChannelIndicator
+									v-if="version.version_type"
+									:channel="version.version_type"
+									size="sm"
+									class="mt-0.5 shrink-0"
+								/>
+								<div class="min-w-0 flex-1">
+									<div class="flex items-center gap-2">
+										<span class="truncate font-semibold text-contrast">
+											{{ version.name || version.version_number }}
+										</span>
+									</div>
+
+									<div class="mt-2 flex flex-wrap items-center gap-2">
+										<span v-if="formatVersionDate(version)" class="font-medium">
+											{{ formatVersionDate(version) }}
+										</span>
+										<BulletDivider
+											v-if="formatVersionDate(version)"
+											:class="isSelectedVersion(version) ? '!bg-brand-highlight' : ''"
+										/>
+										<span class="font-medium">
+											{{
+												formatMessage(messages.downloadsLabel, {
+													downloads: formatCompactNumber(version.downloads ?? 0),
+												})
+											}}
+										</span>
+									</div>
+
+									<div class="mt-3 flex flex-wrap gap-1.5">
+										<span
+											v-for="gameVersion in getVisibleGameVersions(version)"
+											:key="`${version.id}-${gameVersion}`"
+											class="inline-flex items-center rounded-full border border-solid px-2 py-1 leading-none"
+											:class="
+												isSelectedVersion(version) || isMatchingGameVersion(version, gameVersion)
+													? 'border-brand bg-brand-highlight text-brand'
+													: 'border-surface-5 bg-surface-4'
+											"
+										>
+											{{ gameVersion }}
+										</span>
+										<Tooltip
+											v-if="getHiddenGameVersions(version).length > 0"
+											theme="dismissable-prompt"
+											class="inline-flex shrink-0 items-center"
+											:triggers="['hover', 'focus']"
+											:popper-triggers="['hover', 'focus']"
+											popper-class="v-popper--interactive game-version-list-popper"
+											placement="top"
+											:delay="{ show: 200, hide: 100 }"
+											no-auto-focus
+										>
+											<button
+												type="button"
+												class="inline-flex cursor-help items-center rounded-full border border-solid border-surface-5 bg-surface-4 px-2 py-1 leading-none"
+												:aria-label="formatHiddenGameVersionsLabel(version)"
+												@click.stop
+												@keydown.stop
+											>
+												{{
+													formatMessage(messages.moreGameVersions, {
+														count: getHiddenGameVersions(version).length,
+													})
+												}}
+											</button>
+											<template #popper>
+												<div class="flex max-w-[22rem] flex-wrap gap-1.5">
+													<span
+														v-for="gameVersion in getHiddenGameVersions(version)"
+														:key="`${version.id}-hidden-${gameVersion}`"
+														class="inline-flex items-center rounded-full border border-solid px-2 py-1 leading-none"
+														:class="
+															isSelectedVersion(version) ||
+															isMatchingGameVersion(version, gameVersion)
+																? 'border-brand bg-brand-highlight text-brand'
+																: 'border-surface-5 bg-surface-4'
+														"
+													>
+														{{ gameVersion }}
+													</span>
+												</div>
+											</template>
+										</Tooltip>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div v-else class="py-8 text-center text-sm text-secondary">
+						{{ formatMessage(messages.noVersions) }}
+					</div>
+				</div>
+
+				<Transition
+					enter-active-class="transition-all duration-200 ease-out"
+					enter-from-class="opacity-0 max-h-0"
+					enter-to-class="opacity-100 max-h-4"
+					leave-active-class="transition-all duration-200 ease-in"
+					leave-from-class="opacity-100 max-h-4"
+					leave-to-class="opacity-0 max-h-0"
+				>
+					<div
+						v-if="showVersionBottomFade"
+						class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-4 bg-gradient-to-t from-bg-raised to-transparent"
+					/>
+				</Transition>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button @click="() => incompatibleModal.hide()"><XIcon />Cancel</button>
+					<button @click="hideModal">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
 				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="installing" @click="install()">
-						<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
+				<ButtonStyled color="orange">
+					<button :disabled="installing || !selectedVersion" @click="install()">
+						<DownloadIcon />
+						{{
+							installing
+								? formatMessage(commonMessages.installingLabel)
+								: formatMessage(messages.installAnywayButton)
+						}}
 					</button>
 				</ButtonStyled>
 			</div>
-		</div>
-	</ModalWrapper>
+		</template>
+	</NewModal>
 </template>
 
 <script setup>
-import { DownloadIcon, XIcon } from '@modrinth/assets'
+import { DownloadIcon, SearchIcon, XIcon } from '@modrinth/assets'
 import {
+	Admonition,
+	BulletDivider,
 	ButtonStyled,
-	Combobox,
+	NewModal,
+	StyledInput,
+	VersionChannelIndicator,
+	commonMessages,
+	defineMessages,
 	formatLoader,
 	injectNotificationManager,
+	useCompactNumber,
+	useRelativeTime,
+	useScrollIndicator,
 	useVIntl,
 } from '@modrinth/ui'
-import { computed, ref } from 'vue'
+import { formatVersionsForDisplay } from '@modrinth/utils'
+import { Tooltip } from 'floating-vue'
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { add_project_from_version as installMod } from '@/helpers/profile'
+import { get_game_versions } from '@/helpers/tags'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+const { formatCompactNumber } = useCompactNumber()
 
 const instance = ref(null)
 const project = ref(null)
 const versions = ref(null)
 const selectedVersion = ref(null)
-const incompatibleModal = ref(null)
+const incompatibleModal = useTemplateRef('incompatibleModal')
+const versionListRef = ref(null)
 const installing = ref(false)
+const installed = ref(false)
+const search = ref('')
+const gameVersionTags = ref([])
+let gameVersionTagsPromise = null
 
 const onInstall = ref(() => {})
+const {
+	showTopFade: showVersionTopFade,
+	showBottomFade: showVersionBottomFade,
+	checkScrollState: checkVersionScrollState,
+	forceCheck: forceVersionScrollCheck,
+} = useScrollIndicator(versionListRef)
+
+const filteredVersions = computed(() => {
+	const query = search.value.trim().toLowerCase()
+	if (!query) return versions.value ?? []
+
+	return (versions.value ?? []).filter((version) => {
+		const searchable = [
+			version.name,
+			version.version_number,
+			...version.loaders.map((loader) => formatLoader(formatMessage, loader)),
+			...version.game_versions,
+		]
+			.filter(Boolean)
+			.join(' ')
+			.toLowerCase()
 
-const selectedVersionLabel = computed(() => {
-	if (!selectedVersion.value) return ''
-	return `${selectedVersion.value.name} (${selectedVersion.value.loaders
-		.map((name) => formatLoader(formatMessage, name))
-		.join(', ')} - ${selectedVersion.value.game_versions.join(', ')})`
+		return searchable.includes(query)
+	})
 })
 
-const versionOptions = computed(() =>
-	(versions.value ?? []).map((version) => ({
-		value: version.id,
-		label: `${version.name} (${version.loaders
-			.map((name) => formatLoader(formatMessage, name))
-			.join(', ')} - ${version.game_versions.join(', ')})`,
-	})),
-)
-
-const selectedVersionId = computed({
-	get: () => selectedVersion.value?.id ?? null,
-	set: (value) => {
-		if (!value) return
-		selectedVersion.value = (versions.value ?? []).find((version) => version.id === value) ?? null
-	},
+function formatVersionDate(version) {
+	if (!version.date_published) return ''
+	return formatRelativeTime(new Date(version.date_published))
+}
+
+function formatInstanceCompatibilityLabel() {
+	if (
+		project.value?.project_type === 'resourcepack' ||
+		project.value?.project_type === 'datapack'
+	) {
+		return instance.value?.game_version ?? ''
+	}
+
+	return `${formatLoader(formatMessage, instance.value?.loader ?? '')} ${
+		instance.value?.game_version ?? ''
+	}`.trim()
+}
+
+function formatHiddenGameVersionsLabel(version) {
+	return formatMessage(messages.moreGameVersionsTooltip, {
+		versions: getHiddenGameVersions(version).join(', '),
+	})
+}
+
+function getDisplayGameVersions(version) {
+	if (!gameVersionTags.value.length) return version.game_versions
+	return formatVersionsForDisplay(version.game_versions, gameVersionTags.value).map((gameVersion) =>
+		normalizeCompletePatchRange(gameVersion, version.game_versions),
+	)
+}
+
+function getVisibleGameVersions(version) {
+	return getDisplayGameVersions(version).slice(0, 5)
+}
+
+function getHiddenGameVersions(version) {
+	return getDisplayGameVersions(version).slice(5)
+}
+
+function isSelectedVersion(version) {
+	return selectedVersion.value?.id === version.id
+}
+
+function isMatchingGameVersion(version, gameVersion) {
+	if (gameVersion === instance.value?.game_version) return true
+	if (!gameVersion.endsWith('.x')) return false
+
+	const prefix = gameVersion.slice(0, -2)
+	const instanceGameVersion = instance.value?.game_version
+	return (
+		version.game_versions.includes(instanceGameVersion) &&
+		(instanceGameVersion === prefix || instanceGameVersion?.startsWith(`${prefix}.`))
+	)
+}
+
+const minecraftPatchRangeRegex = /^([0-9]+\.[0-9]+)\.([0-9]+)–\1\.([0-9]+)$/
+const minecraftVersionRegex = /^([0-9]+\.[0-9]+)(?:\.([0-9]+))?$/
+
+function normalizeCompletePatchRange(gameVersion, rawGameVersions) {
+	const rangeMatch = gameVersion.match(minecraftPatchRangeRegex)
+	if (!rangeMatch) return gameVersion
+
+	const majorVersion = rangeMatch[1]
+	const rawGameVersionSet = new Set(rawGameVersions)
+	const patchVersionsForMajor = gameVersionTags.value
+		.filter((tag) => tag.version_type === 'release')
+		.map((tag) => {
+			const versionMatch = tag.version.match(minecraftVersionRegex)
+			if (!versionMatch || versionMatch[1] !== majorVersion) return null
+			const patchVersion = Number(versionMatch[2] ?? 0)
+			return patchVersion > 0 ? tag.version : null
+		})
+		.filter(Boolean)
+
+	if (
+		patchVersionsForMajor.length > 0 &&
+		patchVersionsForMajor.every((version) => rawGameVersionSet.has(version))
+	) {
+		return `${majorVersion}.x`
+	}
+
+	return gameVersion
+}
+
+async function loadGameVersionTags() {
+	if (gameVersionTags.value.length) return
+	gameVersionTagsPromise ??= get_game_versions()
+		.then((tags) => {
+			gameVersionTags.value = tags ?? []
+		})
+		.catch(() => {
+			gameVersionTags.value = []
+		})
+		.finally(() => {
+			gameVersionTagsPromise = null
+		})
+
+	await gameVersionTagsPromise
+}
+
+function hideModal() {
+	incompatibleModal.value?.hide()
+}
+
+async function showModal() {
+	await nextTick()
+
+	if (!incompatibleModal.value) {
+		await new Promise((resolve) => requestAnimationFrame(resolve))
+	}
+
+	incompatibleModal.value?.show()
+	await nextTick()
+	forceVersionScrollCheck()
+}
+
+watch(filteredVersions, () => {
+	nextTick(() => forceVersionScrollCheck())
 })
 
 defineExpose({
-	show: (instanceVal, projectVal, projectVersions, selected, callback) => {
+	show: async (instanceVal, projectVal, projectVersions, selected, callback) => {
 		instance.value = instanceVal
 		versions.value = projectVersions ?? []
 		selectedVersion.value = selected ?? projectVersions?.[0] ?? null
+		search.value = ''
 
 		project.value = projectVal
 
 		onInstall.value = callback
 		installing.value = false
+		installed.value = false
 
-		incompatibleModal.value.show()
+		await loadGameVersionTags()
+		await showModal()
 
 		trackEvent('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
 	},
 })
 
+const handleHide = () => {
+	if (!installed.value) {
+		onInstall.value()
+	}
+	installed.value = false
+}
+
 const install = async () => {
+	if (!selectedVersion.value) return
 	installing.value = true
-	await installMod(instance.value.path, selectedVersion.value.id, 'standalone').catch(handleError)
+	try {
+		await installMod(instance.value.path, selectedVersion.value.id, 'standalone')
+	} catch (err) {
+		handleError(err)
+		installing.value = false
+		return
+	}
 	installing.value = false
+	installed.value = true
 	onInstall.value(selectedVersion.value.id)
-	incompatibleModal.value.hide()
+	hideModal()
 
 	trackEvent('ProjectInstall', {
 		loader: instance.value.loader,
 		game_version: instance.value.game_version,
-		id: project.value,
+		id: project.value.id,
 		version_id: selectedVersion.value.id,
 		project_type: project.value.project_type,
 		title: project.value.title,
 		source: 'ProjectIncompatibilityWarningModal',
 	})
 }
-</script>
-
-<style lang="scss" scoped>
-.data {
-	text-transform: capitalize;
-}
-
-table {
-	width: 100%;
-	border-radius: var(--radius-lg);
-	border-collapse: collapse;
-	box-shadow: 0 0 0 1px var(--color-button-bg);
-}
-
-th {
-	text-align: left;
-	padding: 1rem;
-	background-color: var(--color-bg);
-	overflow: hidden;
-	border-bottom: 1px solid var(--color-button-bg);
-}
-
-th:first-child {
-	border-top-left-radius: var(--radius-lg);
-	border-right: 1px solid var(--color-button-bg);
-}
-
-th:last-child {
-	border-top-right-radius: var(--radius-lg);
-}
-
-td {
-	padding: 1rem;
-}
 
-td:first-child {
-	border-right: 1px solid var(--color-button-bg);
-}
-
-.button-group {
-	display: flex;
-	justify-content: flex-end;
-	gap: 1rem;
-}
-
-.modal-body {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-</style>
+const messages = defineMessages({
+	header: {
+		id: 'app.install.incompatibility-warning.header',
+		defaultMessage: 'Incompatibility warning',
+	},
+	conflictSummary: {
+		id: 'app.install.incompatibility-warning.conflict-summary',
+		defaultMessage:
+			'No available versions match {instance}. Select a version to install anyway. Dependencies will not be installed automatically.',
+	},
+	searchPlaceholder: {
+		id: 'app.install.incompatibility-warning.search-placeholder',
+		defaultMessage: 'Search by version or game version...',
+	},
+	downloadsLabel: {
+		id: 'app.install.incompatibility-warning.downloads',
+		defaultMessage: '{downloads} downloads',
+	},
+	moreGameVersions: {
+		id: 'app.install.incompatibility-warning.more-game-versions',
+		defaultMessage: '+{count} more',
+	},
+	moreGameVersionsTooltip: {
+		id: 'app.install.incompatibility-warning.more-game-versions-tooltip',
+		defaultMessage: 'More game versions: {versions}',
+	},
+	noVersions: {
+		id: 'app.install.incompatibility-warning.no-versions',
+		defaultMessage: 'No versions found',
+	},
+	installAnywayButton: {
+		id: 'app.install.incompatibility-warning.install-anyway',
+		defaultMessage: 'Install anyway',
+	},
+})
+</script>
diff --git a/apps/app-frontend/src/providers/content-install.ts b/apps/app-frontend/src/providers/content-install.ts
index ac36c29d9f..ada6260219 100644
--- a/apps/app-frontend/src/providers/content-install.ts
+++ b/apps/app-frontend/src/providers/content-install.ts
@@ -49,7 +49,7 @@ interface IncompatibilityWarningModalRef {
 		versions: Labrinth.Versions.v2.Version[],
 		version: Labrinth.Versions.v2.Version,
 		callback: (versionId?: string) => void,
-	) => void
+	) => void | Promise<void>
 }
 
 const LOADER_ORDER = ['vanilla', 'fabric', 'quilt', 'neoforge', 'forge']
@@ -410,15 +410,35 @@ export function createContentInstall(opts: {
 	async function handleInstallToInstance(instance: ContentInstallInstance) {
 		const profile = profileMap[instance.id]
 		const storeInstance = instances.value.find((i) => i.id === instance.id)
-		if (storeInstance) storeInstance.installing = true
+		if (!currentProject || !profile) {
+			opts.handleError('No project or instance found')
+			return
+		}
 
 		const version = findPreferredVersion(currentVersions, currentProject, profile)
 		if (!version) {
-			if (storeInstance) storeInstance.installing = false
-			opts.handleError('No compatible version found')
+			if (currentVersions.length > 0 && incompatibilityWarningModalRef) {
+				const onIncompatibleInstall = (versionId?: string) => {
+					if (versionId && storeInstance) {
+						storeInstance.installed = true
+					}
+					currentCallback(versionId)
+				}
+				await incompatibilityWarningModalRef.show(
+					profile,
+					currentProject,
+					currentVersions,
+					currentVersions[0],
+					onIncompatibleInstall,
+				)
+			} else {
+				opts.handleError('No version found')
+			}
 			return
 		}
 
+		if (storeInstance) storeInstance.installing = true
+
 		const installedProjectIds: string[] = []
 		if (currentProject) {
 			addInstallingItem(instance.id, currentProject, version)
@@ -614,7 +634,7 @@ export function createContentInstall(opts: {
 					removeInstallingItems(instancePath, installedProjectIds)
 				}
 			} else {
-				incompatibilityWarningModalRef?.show(instance, project, projectVersions, version, callback)
+				await incompatibilityWarningModalRef?.show(instance, project, projectVersions, version, callback)
 			}
 		} else {
 			let versions = (
diff --git a/packages/ui/src/components/base/StyledInput.vue b/packages/ui/src/components/base/StyledInput.vue
index 2c0e2f00a5..bb3503fcb5 100644
--- a/packages/ui/src/components/base/StyledInput.vue
+++ b/packages/ui/src/components/base/StyledInput.vue
@@ -71,9 +71,6 @@
 				variant === 'outlined'
 					? 'bg-transparent border border-solid border-button-bg rounded-l-xl border-r-0'
 					: 'bg-surface-4 border-none rounded-xl',
-				{
-					'placeholder:text-sm': type === 'search',
-				},
 			]"
 			@input="onInput"
 			@focus="isFocused = true"
diff --git a/packages/ui/src/components/search/SearchSidebarFilter.vue b/packages/ui/src/components/search/SearchSidebarFilter.vue
index 2100d61643..4e644365cc 100644
--- a/packages/ui/src/components/search/SearchSidebarFilter.vue
+++ b/packages/ui/src/components/search/SearchSidebarFilter.vue
@@ -5,7 +5,7 @@
 		:button-class="buttonClass ?? 'flex flex-col gap-2 justify-start items-start'"
 		:content-class="contentClass"
 		title-wrapper-class="flex flex-col gap-2 justify-start items-start"
-		:open-by-default="!locked && (openByDefault !== undefined ? openByDefault : true)"
+		:open-by-default="openByDefault !== undefined ? openByDefault : true"
 	>
 		<template #title>
 			<slot name="header" :filter="filterType">
diff --git a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
index 968c22a039..0593e75044 100644
--- a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
@@ -43,7 +43,14 @@ const buttonClass = computed(() => {
 const contentClass = computed(() => (isApp.value ? 'mt-2 mb-3' : 'mb-4 mx-3'))
 const innerPanelClass = computed(() => (isApp.value ? 'ml-2 mr-3' : 'p-1'))
 
+function hasProvidedFilter(filterId: string): boolean {
+	return (ctx.providedFilters?.value ?? []).some((filter) => filter.type === filterId)
+}
+
 function getFilterOpenByDefault(filterId: string): boolean {
+	if (hasProvidedFilter(filterId)) {
+		return true
+	}
 	if (ctx.isServerType.value) {
 		return ![
 			'server_category_minecraft_server_meta',
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
index 8a351a180f..9bd7eb65f7 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
@@ -98,14 +98,10 @@
 					v-for="inst in filteredInstances"
 					:key="inst.id"
 					class="flex items-center justify-between px-6 py-1.5"
-					:class="
-						!inst.compatible ? 'opacity-40' : inst.installed ? 'opacity-60' : 'hover:bg-surface-3'
-					"
+					:class="inst.installed ? 'opacity-60' : 'hover:bg-surface-3'"
 				>
 					<button
-						v-tooltip="
-							!inst.compatible ? 'This instance is not compatible with this project' : undefined
-						"
+						v-tooltip="!inst.compatible ? formatMessage(messages.incompatibleTooltip) : undefined"
 						class="flex min-w-0 cursor-pointer items-center gap-2.5 overflow-hidden border-0 bg-transparent p-0 text-left"
 						@click="emit('navigate', inst)"
 					>
@@ -114,14 +110,23 @@
 							inst.name
 						}}</span>
 					</button>
-					<ButtonStyled v-if="inst.installed" :disabled="true">
-						<button>
+					<ButtonStyled v-if="inst.installed">
+						<button disabled>
 							<CheckIcon />
 							{{ formatMessage(messages.installedBadge) }}
 						</button>
 					</ButtonStyled>
-					<ButtonStyled v-else-if="inst.compatible" :disabled="inst.installing">
-						<button @click="emit('install', inst)">
+					<ButtonStyled
+						v-else
+						:type="inst.compatible ? 'standard' : 'outlined'"
+						:color="inst.compatible ? 'standard' : 'orange'"
+					>
+						<button
+							:disabled="inst.installing"
+							v-tooltip="!inst.compatible ? formatMessage(messages.incompatibleTooltip) : undefined"
+							@click="emit('install', inst)"
+						>
+							<TriangleAlertIcon v-if="!inst.compatible" />
 							{{
 								inst.installing
 									? formatMessage(commonMessages.installingLabel)
@@ -247,6 +252,7 @@ import {
 	EyeIcon,
 	EyeOffIcon,
 	SearchIcon,
+	TriangleAlertIcon,
 	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
@@ -296,6 +302,10 @@ const messages = defineMessages({
 		id: 'instances.content-install.install-button',
 		defaultMessage: 'Install',
 	},
+	incompatibleTooltip: {
+		id: 'instances.content-install.incompatible-tooltip',
+		defaultMessage: 'This instance is not compatible with this project',
+	},
 	selectIcon: {
 		id: 'instances.content-install.select-icon',
 		defaultMessage: 'Select icon',

From 88801cc81cb68fb31c30ae239aea21cb27a9deb0 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 1 Jun 2026 13:53:58 +0100
Subject: [PATCH 2/3] feat: use ContentUpdaterModal and remove
 IncompatibilityWarningModal

---
 apps/app-frontend/src/App.vue                 |  30 +-
 .../IncompatibilityWarningModal.vue           | 482 ------------------
 .../src/providers/content-install.ts          | 123 ++++-
 .../modals/ConfirmBulkUpdateModal.vue         |  14 +-
 .../modals/ConfirmDeletionModal.vue           |  12 +-
 .../components/modals/ContentInstallModal.vue |   6 +-
 .../components/modals/ContentUpdaterModal.vue | 143 ++++--
 7 files changed, 270 insertions(+), 540 deletions(-)
 delete mode 100644 apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index de2c8d9615..34a5ae1419 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -36,6 +36,7 @@ import {
 	ButtonStyled,
 	commonMessages,
 	ContentInstallModal,
+	ContentUpdaterModal,
 	CreationFlowModal,
 	defineMessages,
 	I18nDebugPanel,
@@ -75,7 +76,6 @@ import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import ErrorModal from '@/components/ui/ErrorModal.vue'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue'
-import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
 import UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue'
 import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
@@ -599,6 +599,17 @@ const {
 	handleModpackDuplicateCreateAnyway: handleContentInstallModpackDuplicateCreateAnyway,
 	handleModpackDuplicateGoToInstance: handleContentInstallModpackDuplicateGoToInstance,
 	setIncompatibilityWarningModal: setContentIncompatibilityWarningModal,
+	incompatibilityWarningVersions: contentInstallIncompatibilityWarningVersions,
+	incompatibilityWarningCurrentGameVersion:
+		contentInstallIncompatibilityWarningCurrentGameVersion,
+	incompatibilityWarningCurrentLoader: contentInstallIncompatibilityWarningCurrentLoader,
+	incompatibilityWarningProjectType: contentInstallIncompatibilityWarningProjectType,
+	incompatibilityWarningProjectIconUrl: contentInstallIncompatibilityWarningProjectIconUrl,
+	incompatibilityWarningProjectName: contentInstallIncompatibilityWarningProjectName,
+	incompatibilityWarningMessage: contentInstallIncompatibilityWarningMessage,
+	incompatibilityWarningInstalling: contentInstallIncompatibilityWarningInstalling,
+	handleIncompatibilityWarningInstall: handleContentInstallIncompatibilityWarningInstall,
+	handleIncompatibilityWarningCancel: handleContentInstallIncompatibilityWarningCancel,
 } = contentInstall
 
 const serverInstall = createServerInstall({ router, handleError, popupNotificationManager })
@@ -1541,7 +1552,22 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		@go-to-instance="handleModpackDuplicateGoToInstance"
 	/>
 	<AddServerToInstanceModal ref="addServerToInstanceModal" />
-	<IncompatibilityWarningModal ref="incompatibilityWarningModal" />
+	<ContentUpdaterModal
+		ref="incompatibilityWarningModal"
+		mode="incompatibility-warning"
+		:versions="contentInstallIncompatibilityWarningVersions"
+		:current-game-version="contentInstallIncompatibilityWarningCurrentGameVersion"
+		:current-loader="contentInstallIncompatibilityWarningCurrentLoader"
+		current-version-id=""
+		:is-app="true"
+		:project-type="contentInstallIncompatibilityWarningProjectType"
+		:project-icon-url="contentInstallIncompatibilityWarningProjectIconUrl"
+		:project-name="contentInstallIncompatibilityWarningProjectName"
+		:warning="contentInstallIncompatibilityWarningMessage"
+		:action-loading="contentInstallIncompatibilityWarningInstalling"
+		@update="handleContentInstallIncompatibilityWarningInstall"
+		@cancel="handleContentInstallIncompatibilityWarningCancel"
+	/>
 	<ModpackAlreadyInstalledModal
 		ref="contentInstallModpackAlreadyInstalledModal"
 		@create-anyway="handleContentInstallModpackDuplicateCreateAnyway"
diff --git a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
deleted file mode 100644
index a92aa0c4b0..0000000000
--- a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
+++ /dev/null
@@ -1,482 +0,0 @@
-<template>
-	<NewModal
-		ref="incompatibleModal"
-		no-padding
-		fade="warning"
-		max-width="600px"
-		width="600px"
-		:on-hide="handleHide"
-		:header="formatMessage(messages.header)"
-	>
-		<div class="flex h-[min(680px,calc(95vh-8rem))] min-h-0 flex-col overflow-hidden">
-			<div class="flex flex-col gap-4 p-6 pb-4">
-				<Admonition
-					type="warning"
-					:body="
-						formatMessage(messages.conflictSummary, {
-							instance: formatInstanceCompatibilityLabel(),
-						})
-					"
-				/>
-
-				<StyledInput
-					v-model="search"
-					:icon="SearchIcon"
-					type="search"
-					clearable
-					:placeholder="formatMessage(messages.searchPlaceholder)"
-					wrapper-class="w-full"
-				/>
-			</div>
-
-			<div class="relative min-h-0 flex-1">
-				<Transition
-					enter-active-class="transition-all duration-200 ease-out"
-					enter-from-class="opacity-0 max-h-0"
-					enter-to-class="opacity-100 max-h-4"
-					leave-active-class="transition-all duration-200 ease-in"
-					leave-from-class="opacity-100 max-h-4"
-					leave-to-class="opacity-0 max-h-0"
-				>
-					<div
-						v-if="showVersionTopFade"
-						class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-4 bg-gradient-to-b from-bg-raised to-transparent"
-					/>
-				</Transition>
-
-				<div
-					ref="versionListRef"
-					class="h-full min-h-0 overflow-y-auto px-6 pb-3"
-					@scroll="checkVersionScrollState"
-				>
-					<div v-if="filteredVersions.length > 0" class="flex flex-col gap-2" role="listbox">
-						<div
-							v-for="version in filteredVersions"
-							:key="version.id"
-							role="option"
-							tabindex="0"
-							:aria-selected="selectedVersion?.id === version.id"
-							class="w-full cursor-pointer rounded-2xl border border-solid p-4 text-left active:scale-[0.99] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-shadow"
-							:class="
-								selectedVersion?.id === version.id
-									? 'border-brand bg-brand-highlight'
-									: 'border-surface-5 bg-surface-3 hover:brightness-[1.08] focus-visible:brightness-[1.08]'
-							"
-							@click="selectedVersion = version"
-							@keydown.enter.prevent="selectedVersion = version"
-							@keydown.space.prevent="selectedVersion = version"
-						>
-							<div class="flex items-start gap-3">
-								<VersionChannelIndicator
-									v-if="version.version_type"
-									:channel="version.version_type"
-									size="sm"
-									class="mt-0.5 shrink-0"
-								/>
-								<div class="min-w-0 flex-1">
-									<div class="flex items-center gap-2">
-										<span class="truncate font-semibold text-contrast">
-											{{ version.name || version.version_number }}
-										</span>
-									</div>
-
-									<div class="mt-2 flex flex-wrap items-center gap-2">
-										<span v-if="formatVersionDate(version)" class="font-medium">
-											{{ formatVersionDate(version) }}
-										</span>
-										<BulletDivider
-											v-if="formatVersionDate(version)"
-											:class="isSelectedVersion(version) ? '!bg-brand-highlight' : ''"
-										/>
-										<span class="font-medium">
-											{{
-												formatMessage(messages.downloadsLabel, {
-													downloads: formatCompactNumber(version.downloads ?? 0),
-												})
-											}}
-										</span>
-									</div>
-
-									<div class="mt-3 flex flex-wrap gap-1.5">
-										<span
-											v-for="gameVersion in getVisibleGameVersions(version)"
-											:key="`${version.id}-${gameVersion}`"
-											class="inline-flex items-center rounded-full border border-solid px-2 py-1 leading-none"
-											:class="
-												isSelectedVersion(version) || isMatchingGameVersion(version, gameVersion)
-													? 'border-brand bg-brand-highlight text-brand'
-													: 'border-surface-5 bg-surface-4'
-											"
-										>
-											{{ gameVersion }}
-										</span>
-										<Tooltip
-											v-if="getHiddenGameVersions(version).length > 0"
-											theme="dismissable-prompt"
-											class="inline-flex shrink-0 items-center"
-											:triggers="['hover', 'focus']"
-											:popper-triggers="['hover', 'focus']"
-											popper-class="v-popper--interactive game-version-list-popper"
-											placement="top"
-											:delay="{ show: 200, hide: 100 }"
-											no-auto-focus
-										>
-											<button
-												type="button"
-												class="inline-flex cursor-help items-center rounded-full border border-solid border-surface-5 bg-surface-4 px-2 py-1 leading-none"
-												:aria-label="formatHiddenGameVersionsLabel(version)"
-												@click.stop
-												@keydown.stop
-											>
-												{{
-													formatMessage(messages.moreGameVersions, {
-														count: getHiddenGameVersions(version).length,
-													})
-												}}
-											</button>
-											<template #popper>
-												<div class="flex max-w-[22rem] flex-wrap gap-1.5">
-													<span
-														v-for="gameVersion in getHiddenGameVersions(version)"
-														:key="`${version.id}-hidden-${gameVersion}`"
-														class="inline-flex items-center rounded-full border border-solid px-2 py-1 leading-none"
-														:class="
-															isSelectedVersion(version) ||
-															isMatchingGameVersion(version, gameVersion)
-																? 'border-brand bg-brand-highlight text-brand'
-																: 'border-surface-5 bg-surface-4'
-														"
-													>
-														{{ gameVersion }}
-													</span>
-												</div>
-											</template>
-										</Tooltip>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div v-else class="py-8 text-center text-sm text-secondary">
-						{{ formatMessage(messages.noVersions) }}
-					</div>
-				</div>
-
-				<Transition
-					enter-active-class="transition-all duration-200 ease-out"
-					enter-from-class="opacity-0 max-h-0"
-					enter-to-class="opacity-100 max-h-4"
-					leave-active-class="transition-all duration-200 ease-in"
-					leave-from-class="opacity-100 max-h-4"
-					leave-to-class="opacity-0 max-h-0"
-				>
-					<div
-						v-if="showVersionBottomFade"
-						class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-4 bg-gradient-to-t from-bg-raised to-transparent"
-					/>
-				</Transition>
-			</div>
-		</div>
-
-		<template #actions>
-			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="hideModal">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button :disabled="installing || !selectedVersion" @click="install()">
-						<DownloadIcon />
-						{{
-							installing
-								? formatMessage(commonMessages.installingLabel)
-								: formatMessage(messages.installAnywayButton)
-						}}
-					</button>
-				</ButtonStyled>
-			</div>
-		</template>
-	</NewModal>
-</template>
-
-<script setup>
-import { DownloadIcon, SearchIcon, XIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	BulletDivider,
-	ButtonStyled,
-	NewModal,
-	StyledInput,
-	VersionChannelIndicator,
-	commonMessages,
-	defineMessages,
-	formatLoader,
-	injectNotificationManager,
-	useCompactNumber,
-	useRelativeTime,
-	useScrollIndicator,
-	useVIntl,
-} from '@modrinth/ui'
-import { formatVersionsForDisplay } from '@modrinth/utils'
-import { Tooltip } from 'floating-vue'
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
-
-import { trackEvent } from '@/helpers/analytics'
-import { add_project_from_version as installMod } from '@/helpers/profile'
-import { get_game_versions } from '@/helpers/tags'
-
-const { handleError } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-const formatRelativeTime = useRelativeTime()
-const { formatCompactNumber } = useCompactNumber()
-
-const instance = ref(null)
-const project = ref(null)
-const versions = ref(null)
-const selectedVersion = ref(null)
-const incompatibleModal = useTemplateRef('incompatibleModal')
-const versionListRef = ref(null)
-const installing = ref(false)
-const installed = ref(false)
-const search = ref('')
-const gameVersionTags = ref([])
-let gameVersionTagsPromise = null
-
-const onInstall = ref(() => {})
-const {
-	showTopFade: showVersionTopFade,
-	showBottomFade: showVersionBottomFade,
-	checkScrollState: checkVersionScrollState,
-	forceCheck: forceVersionScrollCheck,
-} = useScrollIndicator(versionListRef)
-
-const filteredVersions = computed(() => {
-	const query = search.value.trim().toLowerCase()
-	if (!query) return versions.value ?? []
-
-	return (versions.value ?? []).filter((version) => {
-		const searchable = [
-			version.name,
-			version.version_number,
-			...version.loaders.map((loader) => formatLoader(formatMessage, loader)),
-			...version.game_versions,
-		]
-			.filter(Boolean)
-			.join(' ')
-			.toLowerCase()
-
-		return searchable.includes(query)
-	})
-})
-
-function formatVersionDate(version) {
-	if (!version.date_published) return ''
-	return formatRelativeTime(new Date(version.date_published))
-}
-
-function formatInstanceCompatibilityLabel() {
-	if (
-		project.value?.project_type === 'resourcepack' ||
-		project.value?.project_type === 'datapack'
-	) {
-		return instance.value?.game_version ?? ''
-	}
-
-	return `${formatLoader(formatMessage, instance.value?.loader ?? '')} ${
-		instance.value?.game_version ?? ''
-	}`.trim()
-}
-
-function formatHiddenGameVersionsLabel(version) {
-	return formatMessage(messages.moreGameVersionsTooltip, {
-		versions: getHiddenGameVersions(version).join(', '),
-	})
-}
-
-function getDisplayGameVersions(version) {
-	if (!gameVersionTags.value.length) return version.game_versions
-	return formatVersionsForDisplay(version.game_versions, gameVersionTags.value).map((gameVersion) =>
-		normalizeCompletePatchRange(gameVersion, version.game_versions),
-	)
-}
-
-function getVisibleGameVersions(version) {
-	return getDisplayGameVersions(version).slice(0, 5)
-}
-
-function getHiddenGameVersions(version) {
-	return getDisplayGameVersions(version).slice(5)
-}
-
-function isSelectedVersion(version) {
-	return selectedVersion.value?.id === version.id
-}
-
-function isMatchingGameVersion(version, gameVersion) {
-	if (gameVersion === instance.value?.game_version) return true
-	if (!gameVersion.endsWith('.x')) return false
-
-	const prefix = gameVersion.slice(0, -2)
-	const instanceGameVersion = instance.value?.game_version
-	return (
-		version.game_versions.includes(instanceGameVersion) &&
-		(instanceGameVersion === prefix || instanceGameVersion?.startsWith(`${prefix}.`))
-	)
-}
-
-const minecraftPatchRangeRegex = /^([0-9]+\.[0-9]+)\.([0-9]+)–\1\.([0-9]+)$/
-const minecraftVersionRegex = /^([0-9]+\.[0-9]+)(?:\.([0-9]+))?$/
-
-function normalizeCompletePatchRange(gameVersion, rawGameVersions) {
-	const rangeMatch = gameVersion.match(minecraftPatchRangeRegex)
-	if (!rangeMatch) return gameVersion
-
-	const majorVersion = rangeMatch[1]
-	const rawGameVersionSet = new Set(rawGameVersions)
-	const patchVersionsForMajor = gameVersionTags.value
-		.filter((tag) => tag.version_type === 'release')
-		.map((tag) => {
-			const versionMatch = tag.version.match(minecraftVersionRegex)
-			if (!versionMatch || versionMatch[1] !== majorVersion) return null
-			const patchVersion = Number(versionMatch[2] ?? 0)
-			return patchVersion > 0 ? tag.version : null
-		})
-		.filter(Boolean)
-
-	if (
-		patchVersionsForMajor.length > 0 &&
-		patchVersionsForMajor.every((version) => rawGameVersionSet.has(version))
-	) {
-		return `${majorVersion}.x`
-	}
-
-	return gameVersion
-}
-
-async function loadGameVersionTags() {
-	if (gameVersionTags.value.length) return
-	gameVersionTagsPromise ??= get_game_versions()
-		.then((tags) => {
-			gameVersionTags.value = tags ?? []
-		})
-		.catch(() => {
-			gameVersionTags.value = []
-		})
-		.finally(() => {
-			gameVersionTagsPromise = null
-		})
-
-	await gameVersionTagsPromise
-}
-
-function hideModal() {
-	incompatibleModal.value?.hide()
-}
-
-async function showModal() {
-	await nextTick()
-
-	if (!incompatibleModal.value) {
-		await new Promise((resolve) => requestAnimationFrame(resolve))
-	}
-
-	incompatibleModal.value?.show()
-	await nextTick()
-	forceVersionScrollCheck()
-}
-
-watch(filteredVersions, () => {
-	nextTick(() => forceVersionScrollCheck())
-})
-
-defineExpose({
-	show: async (instanceVal, projectVal, projectVersions, selected, callback) => {
-		instance.value = instanceVal
-		versions.value = projectVersions ?? []
-		selectedVersion.value = selected ?? projectVersions?.[0] ?? null
-		search.value = ''
-
-		project.value = projectVal
-
-		onInstall.value = callback
-		installing.value = false
-		installed.value = false
-
-		await loadGameVersionTags()
-		await showModal()
-
-		trackEvent('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
-	},
-})
-
-const handleHide = () => {
-	if (!installed.value) {
-		onInstall.value()
-	}
-	installed.value = false
-}
-
-const install = async () => {
-	if (!selectedVersion.value) return
-	installing.value = true
-	try {
-		await installMod(instance.value.path, selectedVersion.value.id, 'standalone')
-	} catch (err) {
-		handleError(err)
-		installing.value = false
-		return
-	}
-	installing.value = false
-	installed.value = true
-	onInstall.value(selectedVersion.value.id)
-	hideModal()
-
-	trackEvent('ProjectInstall', {
-		loader: instance.value.loader,
-		game_version: instance.value.game_version,
-		id: project.value.id,
-		version_id: selectedVersion.value.id,
-		project_type: project.value.project_type,
-		title: project.value.title,
-		source: 'ProjectIncompatibilityWarningModal',
-	})
-}
-
-const messages = defineMessages({
-	header: {
-		id: 'app.install.incompatibility-warning.header',
-		defaultMessage: 'Incompatibility warning',
-	},
-	conflictSummary: {
-		id: 'app.install.incompatibility-warning.conflict-summary',
-		defaultMessage:
-			'No available versions match {instance}. Select a version to install anyway. Dependencies will not be installed automatically.',
-	},
-	searchPlaceholder: {
-		id: 'app.install.incompatibility-warning.search-placeholder',
-		defaultMessage: 'Search by version or game version...',
-	},
-	downloadsLabel: {
-		id: 'app.install.incompatibility-warning.downloads',
-		defaultMessage: '{downloads} downloads',
-	},
-	moreGameVersions: {
-		id: 'app.install.incompatibility-warning.more-game-versions',
-		defaultMessage: '+{count} more',
-	},
-	moreGameVersionsTooltip: {
-		id: 'app.install.incompatibility-warning.more-game-versions-tooltip',
-		defaultMessage: 'More game versions: {versions}',
-	},
-	noVersions: {
-		id: 'app.install.incompatibility-warning.no-versions',
-		defaultMessage: 'No versions found',
-	},
-	installAnywayButton: {
-		id: 'app.install.incompatibility-warning.install-anyway',
-		defaultMessage: 'Install anyway',
-	},
-})
-</script>
diff --git a/apps/app-frontend/src/providers/content-install.ts b/apps/app-frontend/src/providers/content-install.ts
index ada6260219..4552c9268c 100644
--- a/apps/app-frontend/src/providers/content-install.ts
+++ b/apps/app-frontend/src/providers/content-install.ts
@@ -34,7 +34,7 @@ import {
 } from '@/store/install.js'
 
 interface ModalRef {
-	show: () => void
+	show: (initialVersionId?: string) => void
 	hide: () => void
 }
 
@@ -42,16 +42,6 @@ interface ModpackAlreadyInstalledModalRef {
 	show: (instanceName: string, instancePath: string) => void
 }
 
-interface IncompatibilityWarningModalRef {
-	show: (
-		instance: GameInstance,
-		project: Labrinth.Projects.v2.Project,
-		versions: Labrinth.Versions.v2.Version[],
-		version: Labrinth.Versions.v2.Version,
-		callback: (versionId?: string) => void,
-	) => void | Promise<void>
-}
-
 const LOADER_ORDER = ['vanilla', 'fabric', 'quilt', 'neoforge', 'forge']
 const SUPPORTED_LOADERS: Set<string> = new Set(['vanilla', 'forge', 'fabric', 'quilt', 'neoforge'])
 const VANILLA_COMPATIBLE_LOADERS: Set<string> = new Set(['minecraft', 'datapack'])
@@ -91,7 +81,17 @@ export interface ContentInstallContext {
 	setModpackAlreadyInstalledModal: (ref: ModpackAlreadyInstalledModalRef) => void
 	handleModpackDuplicateCreateAnyway: () => Promise<void>
 	handleModpackDuplicateGoToInstance: (instancePath: string) => void
-	setIncompatibilityWarningModal: (ref: IncompatibilityWarningModalRef) => void
+	setIncompatibilityWarningModal: (ref: ModalRef) => void
+	incompatibilityWarningVersions: Ref<Labrinth.Versions.v2.Version[]>
+	incompatibilityWarningCurrentGameVersion: Ref<string>
+	incompatibilityWarningCurrentLoader: Ref<string>
+	incompatibilityWarningProjectType: Ref<string | undefined>
+	incompatibilityWarningProjectIconUrl: Ref<string | undefined>
+	incompatibilityWarningProjectName: Ref<string | undefined>
+	incompatibilityWarningMessage: Ref<string | undefined>
+	incompatibilityWarningInstalling: Ref<boolean>
+	handleIncompatibilityWarningInstall: (version: Labrinth.Versions.v2.Version) => Promise<void>
+	handleIncompatibilityWarningCancel: () => void
 	install: (
 		projectId: string,
 		versionId?: string | null,
@@ -124,6 +124,14 @@ export function createContentInstall(opts: {
 
 	const projectInfo = ref<ContentInstallProjectInfo | null>(null)
 	const installingItems = ref<Map<string, ContentItem[]>>(new Map())
+	const incompatibilityWarningVersions = ref<Labrinth.Versions.v2.Version[]>([])
+	const incompatibilityWarningCurrentGameVersion = ref('')
+	const incompatibilityWarningCurrentLoader = ref('')
+	const incompatibilityWarningProjectType = ref<string | undefined>(undefined)
+	const incompatibilityWarningProjectIconUrl = ref<string | undefined>(undefined)
+	const incompatibilityWarningProjectName = ref<string | undefined>(undefined)
+	const incompatibilityWarningMessage = ref<string | undefined>(undefined)
+	const incompatibilityWarningInstalling = ref(false)
 
 	function addInstallingItem(
 		instancePath: string,
@@ -239,11 +247,15 @@ export function createContentInstall(opts: {
 
 	let modalRef: ModalRef | null = null
 	let modpackAlreadyInstalledModalRef: ModpackAlreadyInstalledModalRef | null = null
-	let incompatibilityWarningModalRef: IncompatibilityWarningModalRef | null = null
+	let incompatibilityWarningModalRef: ModalRef | null = null
 	let currentProject: Labrinth.Projects.v2.Project | null = null
 	let currentVersions: Labrinth.Versions.v2.Version[] = []
 	let currentCallback: (versionId?: string) => void = () => {}
 	let profileMap: Record<string, GameInstance> = {}
+	let incompatibilityWarningInstance: GameInstance | null = null
+	let incompatibilityWarningProject: Labrinth.Projects.v2.Project | null = null
+	let incompatibilityWarningCallback: (versionId?: string) => void = () => {}
+	let incompatibilityWarningInstalled = false
 
 	let pendingModpackInstall: {
 		project: Labrinth.Projects.v2.Project
@@ -424,7 +436,7 @@ export function createContentInstall(opts: {
 					}
 					currentCallback(versionId)
 				}
-				await incompatibilityWarningModalRef.show(
+				await showIncompatibilityWarning(
 					profile,
 					currentProject,
 					currentVersions,
@@ -478,6 +490,75 @@ export function createContentInstall(opts: {
 		}
 	}
 
+	async function showIncompatibilityWarning(
+		instance: GameInstance,
+		project: Labrinth.Projects.v2.Project,
+		versions: Labrinth.Versions.v2.Version[],
+		version: Labrinth.Versions.v2.Version,
+		callback: (versionId?: string) => void,
+	) {
+		incompatibilityWarningInstance = instance
+		incompatibilityWarningProject = project
+		incompatibilityWarningCallback = callback
+		incompatibilityWarningInstalled = false
+		incompatibilityWarningInstalling.value = false
+		incompatibilityWarningVersions.value = versions
+		incompatibilityWarningCurrentGameVersion.value = instance.game_version ?? ''
+		incompatibilityWarningCurrentLoader.value = instance.loader ?? ''
+		incompatibilityWarningProjectType.value = project.project_type
+		incompatibilityWarningProjectIconUrl.value = project.icon_url ?? undefined
+		incompatibilityWarningProjectName.value = project.title
+
+		const compatibilityLabel =
+			project.project_type === 'resourcepack' || project.project_type === 'datapack'
+				? (instance.game_version ?? '')
+				: `${instance.loader ?? ''} ${instance.game_version ?? ''}`.trim()
+		incompatibilityWarningMessage.value = `No available versions match ${compatibilityLabel}. Select a version to install anyway. Dependencies will not be installed automatically.`
+
+		await nextTick()
+		incompatibilityWarningModalRef?.show(version.id)
+		trackEvent('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
+	}
+
+	async function handleIncompatibilityWarningInstall(version: Labrinth.Versions.v2.Version) {
+		if (!incompatibilityWarningInstance || !incompatibilityWarningProject) return
+
+		incompatibilityWarningInstalling.value = true
+		try {
+			await add_project_from_version(
+				incompatibilityWarningInstance.path,
+				version.id,
+				'standalone',
+			)
+		} catch (err) {
+			opts.handleError(err)
+			incompatibilityWarningInstalling.value = false
+			return
+		}
+
+		incompatibilityWarningInstalling.value = false
+		incompatibilityWarningInstalled = true
+		incompatibilityWarningCallback(version.id)
+		incompatibilityWarningModalRef?.hide()
+
+		trackEvent('ProjectInstall', {
+			loader: incompatibilityWarningInstance.loader,
+			game_version: incompatibilityWarningInstance.game_version,
+			id: incompatibilityWarningProject.id,
+			version_id: version.id,
+			project_type: incompatibilityWarningProject.project_type,
+			title: incompatibilityWarningProject.title,
+			source: 'ProjectIncompatibilityWarningModal',
+		})
+	}
+
+	function handleIncompatibilityWarningCancel() {
+		if (!incompatibilityWarningInstalled) {
+			incompatibilityWarningCallback()
+		}
+		incompatibilityWarningInstalled = false
+	}
+
 	async function handleCreateAndInstall(data: {
 		name: string
 		iconPath: string | null
@@ -634,7 +715,7 @@ export function createContentInstall(opts: {
 					removeInstallingItems(instancePath, installedProjectIds)
 				}
 			} else {
-				await incompatibilityWarningModalRef?.show(instance, project, projectVersions, version, callback)
+				await showIncompatibilityWarning(instance, project, projectVersions, version, callback)
 			}
 		} else {
 			let versions = (
@@ -688,9 +769,19 @@ export function createContentInstall(opts: {
 			pendingModpackInstall = null
 			opts.router.push(`/instance/${encodeURIComponent(instancePath)}`)
 		},
-		setIncompatibilityWarningModal(ref: IncompatibilityWarningModalRef) {
+		setIncompatibilityWarningModal(ref: ModalRef) {
 			incompatibilityWarningModalRef = ref
 		},
+		incompatibilityWarningVersions,
+		incompatibilityWarningCurrentGameVersion,
+		incompatibilityWarningCurrentLoader,
+		incompatibilityWarningProjectType,
+		incompatibilityWarningProjectIconUrl,
+		incompatibilityWarningProjectName,
+		incompatibilityWarningMessage,
+		incompatibilityWarningInstalling,
+		handleIncompatibilityWarningInstall,
+		handleIncompatibilityWarningCancel,
 		install,
 		installingItems,
 	}
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
index 33bb748cc2..faa6477ff2 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
@@ -8,11 +8,13 @@
 	>
 		<div class="flex flex-col gap-6">
 			<Admonition type="warning" :header="formatMessage(messages.admonitionHeader)">
-				{{ formatMessage(messages.admonitionBody, { count }) }}
+				{{ formatMessage(messages.admonitionBody, { count: visibleCount }) }}
 			</Admonition>
 			<InlineBackupCreator
 				ref="backupCreator"
-				:backup-name="backupTip ? `Before bulk update (${backupTip})` : 'Before bulk update'"
+				:backup-name="
+					visibleBackupTip ? `Before bulk update (${visibleBackupTip})` : 'Before bulk update'
+				"
 				:shift-click-hint-override="formatMessage(messages.shiftClickHint)"
 				@update:buttons-disabled="buttonsDisabled = $event"
 			/>
@@ -29,7 +31,7 @@
 				<ButtonStyled color="orange">
 					<button :disabled="buttonsDisabled" @click="confirm">
 						<DownloadIcon />
-						{{ formatMessage(messages.updateButton, { count }) }}
+						{{ formatMessage(messages.updateButton, { count: visibleCount }) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -76,7 +78,7 @@ const messages = defineMessages({
 	},
 })
 
-defineProps<{
+const props = defineProps<{
 	count: number
 	server?: boolean
 	backupTip?: string
@@ -89,8 +91,12 @@ const emit = defineEmits<{
 const modal = ref<InstanceType<typeof NewModal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const buttonsDisabled = ref(false)
+const visibleCount = ref(props.count)
+const visibleBackupTip = ref(props.backupTip)
 
 function show() {
+	visibleCount.value = props.count
+	visibleBackupTip.value = props.backupTip
 	modal.value?.show()
 }
 
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
index 64f0b1ad06..b617a5ea4a 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
@@ -3,7 +3,7 @@
 		ref="modal"
 		:header="
 			formatMessage(messages.header, {
-				itemType: formatContentTypeSentence(formatMessage, itemType, count),
+				itemType: formatContentTypeSentence(formatMessage, visibleItemType, visibleCount),
 			})
 		"
 		:fade="variant === 'server' ? 'warning' : 'danger'"
@@ -37,8 +37,8 @@
 						<TrashIcon />
 						{{
 							formatMessage(messages.deleteButton, {
-								count,
-								itemType: formatContentTypeSentence(formatMessage, itemType, count),
+								count: visibleCount,
+								itemType: formatContentTypeSentence(formatMessage, visibleItemType, visibleCount),
 							})
 						}}
 					</button>
@@ -82,7 +82,7 @@ const messages = defineMessages({
 	},
 })
 
-withDefaults(
+const props = withDefaults(
 	defineProps<{
 		count: number
 		itemType: string
@@ -102,8 +102,12 @@ const emit = defineEmits<{
 const modal = ref<InstanceType<typeof NewModal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const buttonsDisabled = ref(false)
+const visibleCount = ref(props.count)
+const visibleItemType = ref(props.itemType)
 
 function show() {
+	visibleCount.value = props.count
+	visibleItemType.value = props.itemType
 	modal.value?.show()
 }
 
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
index 9bd7eb65f7..c2d6d6be3c 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
@@ -304,7 +304,8 @@ const messages = defineMessages({
 	},
 	incompatibleTooltip: {
 		id: 'instances.content-install.incompatible-tooltip',
-		defaultMessage: 'This instance is not compatible with this project',
+		defaultMessage:
+			'This instance uses a different loader or game version than this project supports.',
 	},
 	selectIcon: {
 		id: 'instances.content-install.select-icon',
@@ -462,7 +463,7 @@ function removeIcon() {
 function resetState() {
 	tab.value = props.defaultTab ?? 'existing'
 	searchFilter.value = ''
-	hideUninstallable.value = true
+	hideUninstallable.value = false
 	instanceName.value = `New instance (${props.instances.length + 1})`
 	iconPath.value = null
 	iconPreviewUrl.value = null
@@ -481,7 +482,6 @@ function resetState() {
 }
 
 function handleHide() {
-	resetState()
 	emit('cancel')
 }
 
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
index 5097a4630f..556736e7b3 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
@@ -3,19 +3,13 @@
 		ref="modal"
 		:max-width="'min(928px, calc(95vw - 10rem))'"
 		:width="'min(928px, calc(95vw - 10rem))'"
+		:on-hide="handleModalHide"
 		no-padding
 	>
 		<template #title>
 			<Avatar v-if="projectIconUrl" :src="projectIconUrl" size="3rem" :tint-by="projectName" />
 			<span class="text-lg font-extrabold text-contrast">{{
-				header ??
-				formatMessage(
-					isModpack
-						? messages.switchModpackVersionHeader
-						: switchMode
-							? messages.switchVersionHeader
-							: messages.updateVersionHeader,
-				)
+				header ?? defaultHeader
 			}}</span>
 		</template>
 		<div
@@ -99,7 +93,7 @@
 				</div>
 
 				<div
-					v-if="!isModpack"
+					v-if="!isModpack && !incompatibilityWarningMode"
 					class="absolute bottom-0 left-0 right-0 pointer-events-none flex flex-col items-center justify-end bg-gradient-to-b from-transparent to-bg-raised to-70% pb-3 h-24"
 				>
 					<div class="pointer-events-auto">
@@ -204,7 +198,14 @@
 			>
 				<TriangleAlertIcon class="size-6 shrink-0" />
 				<span>{{
-					formatMessage(isApp ? messages.updateWarningApp : messages.updateWarningWeb)
+					warning ??
+					formatMessage(
+						incompatibilityWarningMode
+							? messages.incompatibilityWarning
+							: isApp
+								? messages.updateWarningApp
+								: messages.updateWarningWeb,
+					)
 				}}</span>
 			</div>
 			<div class="flex flex-row gap-2 shrink-0 ml-auto">
@@ -214,23 +215,32 @@
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled color="brand">
+				<ButtonStyled :color="incompatibilityWarningMode ? 'orange' : 'brand'">
 					<button
-						:disabled="!selectedVersion || selectedVersion.id === currentVersionId"
+						:disabled="
+							actionLoading ||
+							!selectedVersion ||
+							(!incompatibilityWarningMode && selectedVersion.id === currentVersionId)
+						"
 						@click="handleUpdate"
 					>
-						<DownloadIcon />
+						<SpinnerIcon v-if="actionLoading" class="size-5 animate-spin" />
+						<DownloadIcon v-else />
 						{{
-							formatMessage(
-								isDowngrade
-									? messages.downgradeToVersion
-									: switchMode
-										? messages.switchToVersion
-										: messages.updateToVersion,
-								{
-									version: selectedVersion?.version_number ?? '...',
-								},
-							)
+							actionLoading
+								? formatMessage(commonMessages.installingLabel)
+								: incompatibilityWarningMode
+									? formatMessage(messages.installAnywayButton)
+									: formatMessage(
+											isDowngrade
+												? messages.downgradeToVersion
+												: switchMode
+													? messages.switchToVersion
+													: messages.updateToVersion,
+											{
+												version: selectedVersion?.version_number ?? '...',
+											},
+										)
 						}}
 					</button>
 				</ButtonStyled>
@@ -267,7 +277,12 @@ import {
 	TriangleAlertIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { capitalizeString, renderHighlightedString } from '@modrinth/utils'
+import {
+	capitalizeString,
+	formatVersionsForDisplay,
+	renderHighlightedString,
+	type GameVersionTag,
+} from '@modrinth/utils'
 import { useTimeoutFn } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
@@ -279,6 +294,7 @@ import NewModal from '#ui/components/modal/NewModal.vue'
 import VersionChannelIndicator from '#ui/components/version/VersionChannelIndicator.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectTags } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
 import {
 	versionChangesGameVersion,
@@ -287,12 +303,17 @@ import {
 
 const { formatMessage } = useVIntl()
 const debug = useDebugLogger('ContentUpdaterModal')
+const tags = injectTags(null)
 
 const messages = defineMessages({
 	updateVersionHeader: {
 		id: 'instances.updater-modal.header',
 		defaultMessage: 'Update version',
 	},
+	incompatibilityWarningHeader: {
+		id: 'instances.updater-modal.incompatibility-warning-header',
+		defaultMessage: 'Choose version',
+	},
 	switchModpackVersionHeader: {
 		id: 'instances.updater-modal.header-modpack',
 		defaultMessage: 'Switch modpack version',
@@ -330,6 +351,11 @@ const messages = defineMessages({
 		id: 'instances.updater-modal.warning-web',
 		defaultMessage: 'Updating can break your world. Review version changelogs and back up first.',
 	},
+	incompatibilityWarning: {
+		id: 'instances.updater-modal.incompatibility-warning',
+		defaultMessage:
+			'This version is not marked as compatible with this instance. Dependencies will not be installed automatically.',
+	},
 	downgradeToVersion: {
 		id: 'instances.updater-modal.downgrade-to',
 		defaultMessage: 'Downgrade to {version}',
@@ -375,6 +401,10 @@ const messages = defineMessages({
 		id: 'instances.updater-modal.incompatible-update.proceed',
 		defaultMessage: 'Update anyway',
 	},
+	installAnywayButton: {
+		id: 'instances.updater-modal.install-anyway',
+		defaultMessage: 'Install anyway',
+	},
 })
 
 const props = withDefaults(
@@ -389,6 +419,9 @@ const props = withDefaults(
 		projectIconUrl?: string
 		projectName?: string
 		header?: string
+		mode?: 'version' | 'incompatibility-warning'
+		warning?: string
+		actionLoading?: boolean
 		/** Whether versions are currently being loaded */
 		loading?: boolean
 		/** Whether changelog is being loaded for the selected version */
@@ -399,12 +432,29 @@ const props = withDefaults(
 		projectIconUrl: undefined,
 		projectName: undefined,
 		header: undefined,
+		mode: 'version',
+		warning: undefined,
+		actionLoading: false,
 		loading: false,
 		loadingChangelog: false,
 	},
 )
 
 const isModpack = computed(() => props.projectType === 'modpack')
+const incompatibilityWarningMode = computed(() => props.mode === 'incompatibility-warning')
+const defaultHeader = computed(() => {
+	if (incompatibilityWarningMode.value) {
+		return formatMessage(messages.incompatibilityWarningHeader)
+	}
+
+	return formatMessage(
+		isModpack.value
+			? messages.switchModpackVersionHeader
+			: switchMode.value
+				? messages.switchVersionHeader
+				: messages.updateVersionHeader,
+	)
+})
 
 const emit = defineEmits<{
 	update: [version: Labrinth.Versions.v2.Version, event: MouseEvent]
@@ -424,6 +474,7 @@ const pendingIncompatibleUpdate = ref<{
 	version: Labrinth.Versions.v2.Version
 	event: MouseEvent
 } | null>(null)
+const suppressCancelOnHide = ref(false)
 // Store the initial version ID to select when versions become available
 const pendingInitialVersionId = ref<string | undefined>(undefined)
 
@@ -501,12 +552,18 @@ const filteredVersions = computed(() => {
 	if (searchQuery.value) {
 		const query = searchQuery.value.toLowerCase()
 		versions = versions.filter(
-			(v) => v.name.toLowerCase().includes(query) || v.version_number.toLowerCase().includes(query),
+			(v) =>
+				v.name.toLowerCase().includes(query) ||
+				v.version_number.toLowerCase().includes(query) ||
+				(incompatibilityWarningMode.value &&
+					[...v.loaders, ...v.game_versions].some((value) =>
+						value.toLowerCase().includes(query),
+					)),
 		)
 	}
 
 	const beforeFilterCount = versions.length
-	if (!isModpack.value && hideIncompatibleState.value) {
+	if (!incompatibilityWarningMode.value && !isModpack.value && hideIncompatibleState.value) {
 		versions = versions.filter(
 			(version) =>
 				version.id === props.currentVersionId ||
@@ -528,6 +585,7 @@ const filteredVersions = computed(() => {
 })
 
 function shouldShowBadge(version: Labrinth.Versions.v2.Version): boolean {
+	if (incompatibilityWarningMode.value) return false
 	return version.id === props.currentVersionId || shouldShowIncompatibleBadge(version)
 }
 
@@ -587,8 +645,20 @@ function formatLongDate(dateString: string): string {
 
 function formatLoaderGameVersion(version: Labrinth.Versions.v2.Version): string {
 	const loader = capitalizeString(version.loaders[0] || '')
-	const gameVersion = version.game_versions[0] || ''
-	return `${loader} ${gameVersion}`
+	const gameVersions = formatGameVersions(version)
+	return [loader, gameVersions].filter(Boolean).join(' ')
+}
+
+function formatGameVersions(version: Labrinth.Versions.v2.Version): string {
+	if (!incompatibilityWarningMode.value) {
+		return version.game_versions[0] || ''
+	}
+
+	const gameVersions = tags?.gameVersions.value?.length
+		? formatVersionsForDisplay(version.game_versions, tags.gameVersions.value as GameVersionTag[])
+		: version.game_versions
+
+	return gameVersions.join(', ')
 }
 
 let prefetchTimeout: ReturnType<typeof useTimeoutFn> | null = null
@@ -615,6 +685,11 @@ function handleVersionSelect(version: Labrinth.Versions.v2.Version) {
 
 function handleUpdate(event: MouseEvent) {
 	if (selectedVersion.value) {
+		if (incompatibilityWarningMode.value) {
+			emitUpdate(selectedVersion.value, event, { hide: false })
+			return
+		}
+
 		const changesGameVersion = versionChangesGameVersion(
 			selectedVersion.value,
 			props.currentGameVersion,
@@ -679,9 +754,18 @@ function handleCancel() {
 	hide()
 }
 
+function handleModalHide() {
+	if (suppressCancelOnHide.value) {
+		suppressCancelOnHide.value = false
+		return
+	}
+
+	emit('cancel')
+}
+
 function show(initialVersionId?: string, options?: { switchMode?: boolean }) {
 	searchQuery.value = ''
-	hideIncompatibleState.value = !isModpack.value
+	hideIncompatibleState.value = incompatibilityWarningMode.value ? false : !isModpack.value
 	pendingIncompatibleUpdate.value = null
 	switchMode.value = options?.switchMode ?? false
 
@@ -724,6 +808,7 @@ function show(initialVersionId?: string, options?: { switchMode?: boolean }) {
 }
 
 function hide() {
+	suppressCancelOnHide.value = true
 	modal.value?.hide()
 }
 

From 9fce7acbc63e8d5963c43bd5e5e7f0d4a039e06a Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 1 Jun 2026 13:55:21 +0100
Subject: [PATCH 3/3] fix: lint

---
 apps/app-frontend/src/App.vue                        |  3 +--
 apps/app-frontend/src/providers/content-install.ts   |  6 +-----
 .../components/modals/ContentInstallModal.vue        |  2 +-
 .../components/modals/ContentUpdaterModal.vue        | 10 +++-------
 packages/ui/src/locales/en-US/index.json             | 12 ++++++++++++
 5 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 34a5ae1419..a7c73f2e3f 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -600,8 +600,7 @@ const {
 	handleModpackDuplicateGoToInstance: handleContentInstallModpackDuplicateGoToInstance,
 	setIncompatibilityWarningModal: setContentIncompatibilityWarningModal,
 	incompatibilityWarningVersions: contentInstallIncompatibilityWarningVersions,
-	incompatibilityWarningCurrentGameVersion:
-		contentInstallIncompatibilityWarningCurrentGameVersion,
+	incompatibilityWarningCurrentGameVersion: contentInstallIncompatibilityWarningCurrentGameVersion,
 	incompatibilityWarningCurrentLoader: contentInstallIncompatibilityWarningCurrentLoader,
 	incompatibilityWarningProjectType: contentInstallIncompatibilityWarningProjectType,
 	incompatibilityWarningProjectIconUrl: contentInstallIncompatibilityWarningProjectIconUrl,
diff --git a/apps/app-frontend/src/providers/content-install.ts b/apps/app-frontend/src/providers/content-install.ts
index 4552c9268c..30067ec4ca 100644
--- a/apps/app-frontend/src/providers/content-install.ts
+++ b/apps/app-frontend/src/providers/content-install.ts
@@ -525,11 +525,7 @@ export function createContentInstall(opts: {
 
 		incompatibilityWarningInstalling.value = true
 		try {
-			await add_project_from_version(
-				incompatibilityWarningInstance.path,
-				version.id,
-				'standalone',
-			)
+			await add_project_from_version(incompatibilityWarningInstance.path, version.id, 'standalone')
 		} catch (err) {
 			opts.handleError(err)
 			incompatibilityWarningInstalling.value = false
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
index c2d6d6be3c..920280dba3 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
@@ -122,8 +122,8 @@
 						:color="inst.compatible ? 'standard' : 'orange'"
 					>
 						<button
-							:disabled="inst.installing"
 							v-tooltip="!inst.compatible ? formatMessage(messages.incompatibleTooltip) : undefined"
+							:disabled="inst.installing"
 							@click="emit('install', inst)"
 						>
 							<TriangleAlertIcon v-if="!inst.compatible" />
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
index 556736e7b3..b24c020ab2 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
@@ -8,9 +8,7 @@
 	>
 		<template #title>
 			<Avatar v-if="projectIconUrl" :src="projectIconUrl" size="3rem" :tint-by="projectName" />
-			<span class="text-lg font-extrabold text-contrast">{{
-				header ?? defaultHeader
-			}}</span>
+			<span class="text-lg font-extrabold text-contrast">{{ header ?? defaultHeader }}</span>
 		</template>
 		<div
 			class="flex h-[min(550px,calc(95vh-10rem))] border-solid border-transparent border-[1px] border-b-surface-4"
@@ -280,8 +278,8 @@ import {
 import {
 	capitalizeString,
 	formatVersionsForDisplay,
-	renderHighlightedString,
 	type GameVersionTag,
+	renderHighlightedString,
 } from '@modrinth/utils'
 import { useTimeoutFn } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
@@ -556,9 +554,7 @@ const filteredVersions = computed(() => {
 				v.name.toLowerCase().includes(query) ||
 				v.version_number.toLowerCase().includes(query) ||
 				(incompatibilityWarningMode.value &&
-					[...v.loaders, ...v.game_versions].some((value) =>
-						value.toLowerCase().includes(query),
-					)),
+					[...v.loaders, ...v.game_versions].some((value) => value.toLowerCase().includes(query))),
 		)
 	}
 
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index c7520ca2be..325cf50aa9 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -1643,6 +1643,9 @@
   "instances.content-install.header": {
     "defaultMessage": "Install project"
   },
+  "instances.content-install.incompatible-tooltip": {
+    "defaultMessage": "This instance uses a different loader or game version than this project supports."
+  },
   "instances.content-install.install-button": {
     "defaultMessage": "Install"
   },
@@ -1715,6 +1718,12 @@
   "instances.updater-modal.hide-incompatible": {
     "defaultMessage": "Hide incompatible"
   },
+  "instances.updater-modal.incompatibility-warning": {
+    "defaultMessage": "This version is not marked as compatible with this instance. Dependencies will not be installed automatically."
+  },
+  "instances.updater-modal.incompatibility-warning-header": {
+    "defaultMessage": "Choose version"
+  },
   "instances.updater-modal.incompatible-update.description": {
     "defaultMessage": "{version} is not marked as compatible with this installation. It may fail to launch or behave unexpectedly."
   },
@@ -1724,6 +1733,9 @@
   "instances.updater-modal.incompatible-update.proceed": {
     "defaultMessage": "Update anyway"
   },
+  "instances.updater-modal.install-anyway": {
+    "defaultMessage": "Install anyway"
+  },
   "instances.updater-modal.loading-changelog": {
     "defaultMessage": "Loading changelog..."
   },