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] 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',