feat: implement improved flow for server panel edit installation (#5711)

* feat: implement improved flow for server panel edit installation * feat: installation form finalized * feat: error state for InstallingBanner * feat: action button refactor + save banner text fix * fix: lint * fix: content card alignment * feat: better copy * fix: lint * fix: hide shift click + fix NeoForge chip * fix: lint
2026-04-01 19:53:19 +02:00
parent c52abece44
commit fa4711ff7b
19 changed files with 785 additions and 168 deletions
--- a/packages/api-client/src/modules/archon/types.ts
+++ b/packages/api-client/src/modules/archon/types.ts
@@ -611,6 +611,11 @@ export namespace Archon {
 				percent: number
 			}

+			export type SyncContentError = {
+				step: string
+				description: string
+			}
+
 			export type WSStateEvent = {
 				event: 'state'
 				debug: string
@@ -620,6 +625,7 @@ export namespace Archon {
 				target: 'start' | 'stop' | 'restart' | null
 				uptime: number
 				progress: SyncContentProgress | null
+				content_error: SyncContentError | null
 			}

 			// Outgoing messages (client -> server)
--- a/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
@@ -147,6 +147,7 @@ watch(
 		// Always fetch the actual latest version from the API since search index can be stale
 		try {
 			const versions = await ctx.getProjectVersions(projectId)
+			if (ctx.modpackSearchProjectId.value !== projectId) return
 			if (versions.length > 0) {
 				const version = versions[0]
 				ctx.modpackSelection.value = {
--- a/packages/ui/src/components/flows/creation-flow-modal/creation-flow-context.ts
+++ b/packages/ui/src/components/flows/creation-flow-modal/creation-flow-context.ts
@@ -307,8 +307,19 @@ export function createCreationFlowContext(
 		isImportMode.value = false
 		setupType.value = type
 		if (type === 'modpack') {
+			selectedLoader.value = null
+			selectedLoaderVersion.value = null
+			loaderVersionType.value = 'stable'
 			modal.value?.setStage('modpack')
 		} else {
+			modpackSelection.value = null
+			modpackFile.value = null
+			modpackFilePath.value = null
+			if (type === 'vanilla') {
+				selectedLoader.value = null
+				selectedLoaderVersion.value = null
+				loaderVersionType.value = 'stable'
+			}
 			// both custom and vanilla go to custom-setup
 			// vanilla just hides loader chips via hideLoaderChips computed
 			modal.value?.setStage('custom-setup')
--- a/packages/ui/src/components/servers/InstallingBanner.vue
+++ b/packages/ui/src/components/servers/InstallingBanner.vue
@@ -1,12 +1,17 @@
 <template>
-	<Admonition type="info" show-actions-underneath>
+	<Admonition :type="contentError ? 'critical' : 'info'" :show-actions-underneath="!contentError">
 		<template #icon>
-			<slot name="icon">
+			<slot v-if="!contentError" name="icon">
 				<SpinnerIcon class="h-6 w-6 flex-none animate-spin text-brand-blue" />
 			</slot>
 		</template>
-		<template #header>We're preparing your server!</template>
-		<template v-if="progress">{{ phaseLabel }}</template>
+		<template #header>
+			{{ contentError ? 'Installation error' : "We're preparing your server!" }}
+		</template>
+		<template v-if="contentError">
+			{{ errorLabel }}
+		</template>
+		<template v-else-if="progress">{{ phaseLabel }}</template>
 		<div v-else class="ticker-container">
 			<div class="ticker-content">
 				<div
@@ -19,7 +24,15 @@
 				</div>
 			</div>
 		</div>
-		<template #actions>
+		<template v-if="contentError" #top-right-actions>
+			<ButtonStyled color="red" type="outlined">
+				<button class="!border" @click="emit('retry')">
+					<RotateCounterClockwiseIcon class="size-5" />
+					Retry
+				</button>
+			</ButtonStyled>
+		</template>
+		<template v-if="!contentError" #actions>
 			<ProgressBar
 				v-if="progress"
 				:progress="progress.percent"
@@ -33,10 +46,12 @@
 </template>

 <script setup lang="ts">
+import { RotateCounterClockwiseIcon } from '@modrinth/assets'
 import SpinnerIcon from '@modrinth/assets/icons/spinner.svg'
 import { computed, onMounted, onUnmounted, ref } from 'vue'

 import Admonition from '../base/Admonition.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
 import ProgressBar from '../base/ProgressBar.vue'

 export interface SyncProgress {
@@ -44,10 +59,48 @@ export interface SyncProgress {
 	percent: number
 }

+export interface ContentError {
+	step: string
+	description: string
+}
+
 const props = defineProps<{
 	progress?: SyncProgress | null
+	contentError?: ContentError | null
 }>()

+const emit = defineEmits<{
+	retry: []
+}>()
+
+const errorLabel = computed(() => {
+	const desc = props.contentError?.description?.toLowerCase()
+	const step = props.contentError?.step
+
+	if (step === 'modloader') {
+		if (desc === 'the specified version may be incorrect') {
+			return 'The specified loader or Minecraft version could not be installed. It may be invalid or unsupported.'
+		}
+		if (desc === 'this version is not yet supported') {
+			return 'This version of Minecraft or loader is not yet supported by Modrinth Hosting.'
+		}
+		if (desc === 'internal error') {
+			return 'An internal error occurred while installing the platform. Please try again.'
+		}
+	}
+
+	if (step === 'modpack') {
+		if (desc?.includes('no primary file')) {
+			return 'The modpack version has no downloadable file. It may have been packaged incorrectly.'
+		}
+		if (desc?.includes('failed to install')) {
+			return 'Failed to install the modpack. It may be corrupted or incompatible.'
+		}
+	}
+
+	return props.contentError?.description ?? 'An unexpected error occurred during installation.'
+})
+
 const phaseLabel = computed(() => {
 	switch (props.progress?.phase) {
 		case 'InstallingLoader':
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
@@ -138,7 +138,7 @@ onUnmounted(() => {
 		class="@container flex flex-col gap-4 rounded-[20px] bg-bg-raised p-6 shadow-md"
 		:class="{ 'opacity-50': disabled }"
 	>
-		<div class="flex flex-wrap items-center justify-between gap-4">
+		<div class="flex flex-wrap items-start justify-between gap-4">
 			<div class="flex min-w-0 flex-1 items-center gap-4">
 				<AutoLink :to="projectLink" class="shrink-0">
 					<Avatar :src="project.icon_url" :alt="project.title" size="5rem" no-shadow raised />
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
@@ -13,6 +13,7 @@
 			<InlineBackupCreator
 				ref="backupCreator"
 				:backup-name="backupTip ? `Before bulk update (${backupTip})` : 'Before bulk update'"
+				:shift-click-hint-override="formatMessage(messages.shiftClickHint)"
 				@update:buttons-disabled="buttonsDisabled = $event"
 			/>
 		</div>
@@ -68,6 +69,11 @@ const messages = defineMessages({
 		id: 'content.confirm-bulk-update.update-button',
 		defaultMessage: 'Update {count, plural, one {# project} other {# projects}}',
 	},
+	shiftClickHint: {
+		id: 'content.confirm-bulk-update.shift-click-hint',
+		defaultMessage:
+			'Hold Shift while clicking "Update all" to skip this confirmation in the future.',
+	},
 })

 defineProps<{
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue
@@ -44,7 +44,7 @@
 			/>
 		</div>
 		<span v-if="!props.hideShiftClickHint" class="text-secondary">
-			{{ formatMessage(messages.shiftClickHint) }}
+			{{ props.shiftClickHintOverride ?? formatMessage(messages.shiftClickHint) }}
 		</span>
 	</div>
 </template>
@@ -61,6 +61,7 @@ import { useInlineBackup } from '../../composables/use-inline-backup'
 const props = defineProps<{
 	backupName: string
 	hideShiftClickHint?: boolean
+	shiftClickHintOverride?: string
 }>()

 const emit = defineEmits<{
--- a/packages/ui/src/layouts/shared/installation-settings/components/ContentDiffModal.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/components/ContentDiffModal.vue
@@ -73,6 +73,7 @@
 				<InlineBackupCreator
 					ref="backupCreator"
 					backup-name="Before version change"
+					hide-shift-click-hint
 					@update:buttons-disabled="buttonsDisabled = $event"
 				/>
 			</div>
--- a/packages/ui/src/layouts/shared/installation-settings/components/IncompatibleContentModal.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/components/IncompatibleContentModal.vue
@@ -0,0 +1,194 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" :closable="!loading" no-padding>
+		<div class="flex max-w-[500px] flex-col gap-6 p-6">
+			<Admonition
+				:type="variant === 'loader-change' ? 'critical' : 'warning'"
+				:header="
+					variant === 'loader-change'
+						? formatMessage(messages.loaderChangeTitle)
+						: formatMessage(messages.gameVersionWarningTitle)
+				"
+			>
+				<div class="flex flex-col gap-3">
+					<span>
+						{{
+							variant === 'loader-change'
+								? formatMessage(messages.loaderChangeBody)
+								: formatMessage(messages.gameVersionWarningBody)
+						}}
+					</span>
+					<div v-if="variant === 'loader-change'">
+						<ButtonStyled color="red">
+							<button :disabled="loading" @click="handleResetServer">
+								<TrashIcon class="size-5" />
+								{{ formatMessage(commonMessages.resetServerButton) }}
+							</button>
+						</ButtonStyled>
+					</div>
+				</div>
+			</Admonition>
+
+			<InlineBackupCreator
+				ref="backupCreator"
+				:backup-name="
+					variant === 'loader-change' ? 'Before loader change' : 'Before version change'
+				"
+				hide-shift-click-hint
+				@update:buttons-disabled="buttonsDisabled = $event"
+			/>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled>
+					<button :disabled="loading" @click="handleCancel">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<template v-if="variant === 'game-version-change'">
+					<ButtonStyled>
+						<button :disabled="buttonsDisabled || loading" @click="handleDisableConflicts">
+							<SpinnerIcon
+								v-if="loading && loadingAction === 'disable-conflicts'"
+								class="size-5 animate-spin"
+							/>
+							<PowerOffIcon v-else class="size-5" />
+							{{ formatMessage(messages.disableConflictsButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="orange">
+						<button :disabled="buttonsDisabled || loading" @click="handleAutoFix">
+							<SpinnerIcon
+								v-if="loading && loadingAction === 'auto-fix'"
+								class="size-5 animate-spin"
+							/>
+							<HammerIcon v-else class="size-5" />
+							{{ formatMessage(messages.autoFixButton) }}
+						</button>
+					</ButtonStyled>
+				</template>
+				<template v-else>
+					<ButtonStyled color="red">
+						<button :disabled="buttonsDisabled || loading" @click="handleConfirmLoaderChange">
+							<SpinnerIcon v-if="loading" class="size-5 animate-spin" />
+							<CircleAlertIcon v-else class="size-5" />
+							{{ formatMessage(messages.changeLoaderButton) }}
+						</button>
+					</ButtonStyled>
+				</template>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import {
+	CircleAlertIcon,
+	HammerIcon,
+	PowerOffIcon,
+	SpinnerIcon,
+	TrashIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { ref } from 'vue'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import InlineBackupCreator from '../../content-tab/components/modals/InlineBackupCreator.vue'
+
+defineProps<{
+	variant: 'loader-change' | 'game-version-change'
+	loading?: boolean
+}>()
+
+const emit = defineEmits<{
+	'confirm-loader-change': []
+	'auto-fix': []
+	'disable-conflicts': []
+	'reset-server': []
+	cancel: []
+}>()
+
+const { formatMessage } = useVIntl()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const buttonsDisabled = ref(false)
+const loadingAction = ref<'auto-fix' | 'disable-conflicts' | null>(null)
+
+function show(e?: MouseEvent) {
+	loadingAction.value = null
+	modal.value?.show(e)
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+function handleCancel() {
+	hide()
+	emit('cancel')
+}
+
+function handleConfirmLoaderChange() {
+	emit('confirm-loader-change')
+}
+
+function handleAutoFix() {
+	loadingAction.value = 'auto-fix'
+	emit('auto-fix')
+}
+
+function handleDisableConflicts() {
+	loadingAction.value = 'disable-conflicts'
+	emit('disable-conflicts')
+}
+
+function handleResetServer() {
+	hide()
+	emit('reset-server')
+}
+
+const messages = defineMessages({
+	header: {
+		id: 'installation-settings.incompatible-content.header',
+		defaultMessage: 'Incompatible content installed',
+	},
+	loaderChangeTitle: {
+		id: 'installation-settings.incompatible-content.loader-change-title',
+		defaultMessage: 'Changing loaders is destructive',
+	},
+	loaderChangeBody: {
+		id: 'installation-settings.incompatible-content.loader-change-body',
+		defaultMessage:
+			'When changing the loader, all installed content will be disabled. We recommend resetting your server instead.',
+	},
+	gameVersionWarningTitle: {
+		id: 'installation-settings.incompatible-content.game-version-warning-title',
+		defaultMessage: 'Incompatibility warning',
+	},
+	gameVersionWarningBody: {
+		id: 'installation-settings.incompatible-content.game-version-warning-body',
+		defaultMessage:
+			'When changing the game version, we can either disable incompatible installed content or attempt to resolve the incompatibilities.',
+	},
+	changeLoaderButton: {
+		id: 'installation-settings.incompatible-content.change-loader-button',
+		defaultMessage: 'Change loader',
+	},
+	autoFixButton: {
+		id: 'installation-settings.incompatible-content.auto-fix-button',
+		defaultMessage: 'Auto-fix',
+	},
+	disableConflictsButton: {
+		id: 'installation-settings.incompatible-content.disable-conflicts-button',
+		defaultMessage: 'Disable conflicts',
+	},
+})
+
+defineExpose({ show, hide })
+</script>
--- a/packages/ui/src/layouts/shared/installation-settings/composables/index.ts
+++ b/packages/ui/src/layouts/shared/installation-settings/composables/index.ts
@@ -1 +1 @@
-export { useInstallationForm } from './use-installation-form'
+export { type IncompatibleContentVariant, useInstallationForm } from './use-installation-form'
--- a/packages/ui/src/layouts/shared/installation-settings/composables/use-installation-form.ts
+++ b/packages/ui/src/layouts/shared/installation-settings/composables/use-installation-form.ts
@@ -6,13 +6,19 @@ import { formatLoaderLabel } from '#ui/utils/loaders'

 import type { ContentUpdaterModal } from '../../content-tab'
 import type ContentDiffModal from '../components/ContentDiffModal.vue'
+import type IncompatibleContentModal from '../components/IncompatibleContentModal.vue'
 import type { InstallationSettingsContext } from '../providers/installation-settings'
 import type { ContentDiffPreview } from '../types'

+export type IncompatibleContentVariant = 'loader-change' | 'game-version-change'
+
 export function useInstallationForm(
 	ctx: InstallationSettingsContext,
 	updaterModalRef: Ref<InstanceType<typeof ContentUpdaterModal> | null | undefined>,
 	contentDiffModalRef?: Ref<InstanceType<typeof ContentDiffModal> | null | undefined>,
+	incompatibleContentModalRef?: Ref<
+		InstanceType<typeof IncompatibleContentModal> | null | undefined
+	>,
 ) {
 	const isEditing = ref(false)
 	const selectedPlatform = ctx.editingPlatformRef ?? ref(ctx.currentPlatform.value)
@@ -22,6 +28,7 @@ export function useInstallationForm(
 	const isSaving = ref(false)
 	const isVerifying = ref(false)
 	const pendingPreview = ref<ContentDiffPreview | null>(null)
+	const incompatibleContentVariant = ref<IncompatibleContentVariant | null>(null)
 	let abortController: AbortController | null = null

 	const gameVersionOptions = computed(() =>
@@ -75,9 +82,26 @@ export function useInstallationForm(
 	async function save() {
 		isSaving.value = true
 		try {
+			const platformChanged = selectedPlatform.value !== ctx.currentPlatform.value
 			const isModded = ctx.currentPlatform.value !== 'vanilla'
 			const gameVersionChanged = selectedGameVersion.value !== ctx.currentGameVersion.value

+			if (platformChanged && ctx.disableAllContent) {
+				isSaving.value = false
+				incompatibleContentVariant.value = 'loader-change'
+				await nextTick()
+				incompatibleContentModalRef?.value?.show()
+				return
+			}
+
+			if (isModded && gameVersionChanged && ctx.disableIncompatibleContent) {
+				isSaving.value = false
+				incompatibleContentVariant.value = 'game-version-change'
+				await nextTick()
+				incompatibleContentModalRef?.value?.show()
+				return
+			}
+
 			if (ctx.previewSave && isModded && gameVersionChanged) {
 				isVerifying.value = true
 				abortController = new AbortController()
@@ -127,6 +151,111 @@ export function useInstallationForm(
 		}
 	}

+	async function confirmLoaderChange() {
+		try {
+			if (ctx.disableAllContent) {
+				await ctx.disableAllContent()
+			}
+			incompatibleContentVariant.value = null
+			await performSave()
+		} catch {
+			incompatibleContentVariant.value = null
+			isSaving.value = false
+		}
+	}
+
+	async function confirmAutoFix() {
+		try {
+			if (ctx.previewSave) {
+				isVerifying.value = true
+				abortController = new AbortController()
+				const loaderVersionId =
+					selectedPlatform.value !== 'vanilla'
+						? (loaderVersionEntries.value[selectedLoaderVersion.value]?.id ?? null)
+						: null
+
+				let preview: ContentDiffPreview | null
+				try {
+					preview = await ctx.previewSave(
+						selectedPlatform.value,
+						selectedGameVersion.value,
+						loaderVersionId,
+						abortController.signal,
+					)
+				} finally {
+					isVerifying.value = false
+					abortController = null
+				}
+
+				if (preview && (preview.diffs.length > 0 || preview.hasUnknownContent)) {
+					pendingPreview.value = preview
+					incompatibleContentVariant.value = null
+					await nextTick()
+					await nextTick()
+					contentDiffModalRef?.value?.show()
+					return
+				}
+			}
+
+			incompatibleContentVariant.value = null
+			await performSave()
+		} catch {
+			incompatibleContentVariant.value = null
+			isSaving.value = false
+		}
+	}
+
+	async function confirmDisableConflicts() {
+		try {
+			if (ctx.disableIncompatibleContent && ctx.previewSave) {
+				isVerifying.value = true
+				abortController = new AbortController()
+				const loaderVersionId =
+					selectedPlatform.value !== 'vanilla'
+						? (loaderVersionEntries.value[selectedLoaderVersion.value]?.id ?? null)
+						: null
+
+				let preview: ContentDiffPreview | null
+				try {
+					preview = await ctx.previewSave(
+						selectedPlatform.value,
+						selectedGameVersion.value,
+						loaderVersionId,
+						abortController.signal,
+					)
+				} finally {
+					isVerifying.value = false
+					abortController = null
+				}
+
+				if (preview) {
+					await ctx.disableIncompatibleContent(preview.diffs)
+				}
+			}
+
+			incompatibleContentVariant.value = null
+			if (ctx.saveWithoutAutoFix) {
+				const loaderVersionId =
+					selectedPlatform.value !== 'vanilla'
+						? (loaderVersionEntries.value[selectedLoaderVersion.value]?.id ?? null)
+						: null
+				await ctx.saveWithoutAutoFix(
+					selectedPlatform.value,
+					selectedGameVersion.value,
+					loaderVersionId,
+				)
+				if (ctx.afterSave) await ctx.afterSave()
+				isEditing.value = false
+				isSaving.value = false
+			} else {
+				await performSave()
+			}
+		} catch {
+			incompatibleContentVariant.value = null
+			isSaving.value = false
+		}
+	}
+
 	async function confirmSave() {
 		pendingPreview.value = null
 		try {
@@ -138,6 +267,7 @@ export function useInstallationForm(

 	function cancelPreview() {
 		pendingPreview.value = null
+		incompatibleContentVariant.value = null
 		isSaving.value = false
 	}

@@ -262,7 +392,11 @@ export function useInstallationForm(
 		hasChanges,
 		save,
 		pendingPreview,
+		incompatibleContentVariant,
 		confirmSave,
+		confirmLoaderChange,
+		confirmAutoFix,
+		confirmDisableConflicts,
 		cancelPreview,
 		cancelEditing,
 		updatingModpack,
--- a/packages/ui/src/layouts/shared/installation-settings/layout.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/layout.vue
@@ -24,6 +24,7 @@ import Combobox from '#ui/components/base/Combobox.vue'
 import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
+import { formatLoaderLabel } from '#ui/utils/loaders'

 import ConfirmModpackUpdateModal from '../content-tab/components/modals/ConfirmModpackUpdateModal.vue'
 import ConfirmReinstallModal from '../content-tab/components/modals/ConfirmReinstallModal.vue'
@@ -31,6 +32,7 @@ import ConfirmRepairModal from '../content-tab/components/modals/ConfirmRepairMo
 import ConfirmUnlinkModal from '../content-tab/components/modals/ConfirmUnlinkModal.vue'
 import ContentUpdaterModal from '../content-tab/components/modals/ContentUpdaterModal.vue'
 import ContentDiffModal from './components/ContentDiffModal.vue'
+import IncompatibleContentModal from './components/IncompatibleContentModal.vue'
 import { useInstallationForm } from './composables'
 import { injectInstallationSettings } from './providers/installation-settings'

@@ -44,11 +46,17 @@ const unlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 const contentUpdaterModal = ref<InstanceType<typeof ContentUpdaterModal> | null>()

 const contentDiffModal = ref<InstanceType<typeof ContentDiffModal>>()
+const incompatibleContentModal = ref<InstanceType<typeof IncompatibleContentModal>>()
 const modpackUpdateModal = ref<InstanceType<typeof ConfirmModpackUpdateModal>>()
 const pendingUpdateVersion = ref<Labrinth.Versions.v2.Version | null>(null)
 const isUpdateDowngrade = ref(false)

-const form = useInstallationForm(ctx, contentUpdaterModal, contentDiffModal)
+const form = useInstallationForm(
+	ctx,
+	contentUpdaterModal,
+	contentDiffModal,
+	incompatibleContentModal,
+)

 function handleBeforeUnload(e: BeforeUnloadEvent) {
 	if (form.isSaving.value) {
@@ -133,6 +141,16 @@ function handleUnlink() {
 	ctx.unlinkModpack()
 }

+const emit = defineEmits<{
+	'reset-server': []
+}>()
+
+function handleIncompatibleResetServer() {
+	form.cancelPreview()
+	form.cancelEditing()
+	emit('reset-server')
+}
+
 defineExpose({
 	cancelEditing: () => form.cancelEditing(),
 })
@@ -477,6 +495,8 @@ const messages = defineMessages({
 							<Chips
 								v-model="form.selectedPlatform.value"
 								:items="ctx.availablePlatforms"
+								:format-label="formatLoaderLabel"
+								:capitalize="false"
 								:disabled-items="disabledPlatforms"
 								:disabled-tooltip="formatMessage(messages.platformLockTooltip)"
 								:aria-label="formatMessage(messages.selectPlatformAriaLabel)"
@@ -708,8 +728,20 @@ const messages = defineMessages({
 			@unlink="handleUnlink"
 		/>

+		<IncompatibleContentModal
+			v-if="form.incompatibleContentVariant.value"
+			ref="incompatibleContentModal"
+			:variant="form.incompatibleContentVariant.value"
+			:loading="form.isVerifying.value || form.isSaving.value"
+			@confirm-loader-change="form.confirmLoaderChange()"
+			@auto-fix="form.confirmAutoFix()"
+			@disable-conflicts="form.confirmDisableConflicts()"
+			@reset-server="handleIncompatibleResetServer"
+			@cancel="form.cancelPreview()"
+		/>
+
 		<ContentDiffModal
-			v-if="form.pendingPreview.value"
+			v-if="form.pendingPreview.value && !form.incompatibleContentVariant.value"
 			ref="contentDiffModal"
 			:header="formatMessage(messages.confirmVersionChangeHeader)"
 			:description="
--- a/packages/ui/src/layouts/shared/installation-settings/providers/installation-settings.ts
+++ b/packages/ui/src/layouts/shared/installation-settings/providers/installation-settings.ts
@@ -4,6 +4,7 @@ import type { ComputedRef, Ref } from 'vue'
 import { createContext } from '#ui/providers/create-context'

 import type {
+	ContentDiffItem,
 	ContentDiffPreview,
 	GameVersionOption,
 	InstallationInfoRow,
@@ -61,6 +62,26 @@ export interface InstallationSettingsContext {

 	lockPlatform?: boolean
 	hideLoaderVersion?: boolean
+
+	/** Bulk-disable all addons on the server (used before switching loaders). */
+	disableAllContent?: () => Promise<void>
+
+	/**
+	 * Disable only the incompatible addons identified in a content diff preview.
+	 * Used when the user chooses "Disable conflicts" instead of "Auto-fix".
+	 */
+	disableIncompatibleContent?: (diffs: ContentDiffItem[]) => Promise<void>
+
+	/**
+	 * Save the installation settings without auto-resolving content.
+	 * Uses installContent with soft_override instead of applyGameVersionUpdate.
+	 */
+	saveWithoutAutoFix?: (
+		platform: string,
+		gameVersion: string,
+		loaderVersionId: string | null,
+	) => Promise<void>
+
 	previewSave?: (
 		platform: string,
 		gameVersion: string,
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -233,6 +233,9 @@
  "content.confirm-bulk-update.header": {
    "defaultMessage": "Update projects"
  },
+  "content.confirm-bulk-update.shift-click-hint": {
+    "defaultMessage": "Hold Shift while clicking \"Update all\" to skip this confirmation in the future."
+  },
  "content.confirm-bulk-update.update-button": {
    "defaultMessage": "Update {count, plural, one {# project} other {# projects}}"
  },
@@ -977,6 +980,30 @@
  "installation-settings.edit.warning-server": {
    "defaultMessage": "We don't recommend editing your installation settings after installing content. If you want to edit them reset your server."
  },
+  "installation-settings.incompatible-content.auto-fix-button": {
+    "defaultMessage": "Auto-fix"
+  },
+  "installation-settings.incompatible-content.change-loader-button": {
+    "defaultMessage": "Change loader"
+  },
+  "installation-settings.incompatible-content.disable-conflicts-button": {
+    "defaultMessage": "Disable conflicts"
+  },
+  "installation-settings.incompatible-content.game-version-warning-body": {
+    "defaultMessage": "When changing the game version, we can either disable incompatible installed content or attempt to resolve the incompatibilities."
+  },
+  "installation-settings.incompatible-content.game-version-warning-title": {
+    "defaultMessage": "Incompatibility warning"
+  },
+  "installation-settings.incompatible-content.header": {
+    "defaultMessage": "Incompatible content installed"
+  },
+  "installation-settings.incompatible-content.loader-change-body": {
+    "defaultMessage": "When changing the loader, all installed content will be disabled. We recommend resetting your server instead."
+  },
+  "installation-settings.incompatible-content.loader-change-title": {
+    "defaultMessage": "Changing loaders is destructive"
+  },
  "installation-settings.linked-instance.title": {
    "defaultMessage": "Linked {projectType, select, server {server project} other {modpack}}"
  },
--- a/packages/ui/src/stories/servers/InstallingBanner.stories.ts
+++ b/packages/ui/src/stories/servers/InstallingBanner.stories.ts
@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import InstallingBanner from '../../components/servers/InstallingBanner.vue'
+
+const meta = {
+	title: 'Servers/InstallingBanner',
+	component: InstallingBanner,
+} satisfies Meta<typeof InstallingBanner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	name: 'Default (no progress)',
+}
+
+export const WithProgress: Story = {
+	args: {
+		progress: {
+			phase: 'InstallingLoader',
+			percent: 45,
+		},
+	},
+}
+
+export const InstallingModpack: Story = {
+	args: {
+		progress: {
+			phase: 'InstallingPack',
+			percent: 72,
+		},
+	},
+}
+
+export const InstallingAddons: Story = {
+	args: {
+		progress: {
+			phase: 'Addons',
+			percent: 90,
+		},
+	},
+}
+
+export const ErrorInvalidVersion: Story = {
+	name: 'Error: Invalid Version',
+	args: {
+		contentError: {
+			step: 'modloader',
+			description: 'the specified version may be incorrect',
+		},
+	},
+}
+
+export const ErrorUnsupportedVersion: Story = {
+	name: 'Error: Unsupported Version',
+	args: {
+		contentError: {
+			step: 'modloader',
+			description: 'this version is not yet supported',
+		},
+	},
+}
+
+export const ErrorInternal: Story = {
+	name: 'Error: Internal',
+	args: {
+		contentError: {
+			step: 'modloader',
+			description: 'internal error',
+		},
+	},
+}
+
+export const ErrorModpackInstall: Story = {
+	name: 'Error: Modpack Install Failed',
+	args: {
+		contentError: {
+			step: 'modpack',
+			description: 'Failed to install modpack',
+		},
+	},
+}
+
+export const ErrorModpackNoFile: Story = {
+	name: 'Error: Modpack No Primary File',
+	args: {
+		contentError: {
+			step: 'modpack',
+			description: 'Modpack version has no primary file',
+		},
+	},
+}
+
+export const AllStates: Story = {
+	render: () => ({
+		components: { InstallingBanner },
+		template: /*html*/ `
+			<div style="display: flex; flex-direction: column; gap: 1rem;">
+				<InstallingBanner />
+				<InstallingBanner :progress="{ phase: 'InstallingLoader', percent: 45 }" />
+				<InstallingBanner :content-error="{ step: 'modloader', description: 'the specified version may be incorrect' }" />
+				<InstallingBanner :content-error="{ step: 'modloader', description: 'this version is not yet supported' }" />
+				<InstallingBanner :content-error="{ step: 'modloader', description: 'internal error' }" />
+				<InstallingBanner :content-error="{ step: 'modpack', description: 'Failed to install modpack' }" />
+			</div>
+		`,
+	}),
+}