feat: instances v2 (#6431)

* feat: base of instances v2 * feat: use old profiles with compat layer * prototype: instances v2 * fix: install_from using profile * fix: skins migration fix * fix: frontend still using profile path * fix: add update proj multiselect guard * fix: cargo fmt * fix: content missing fields * feat: break up app-lib/api/instance.rs * fix: check_content_updates mismatch * fix: updater modal cleanup w/new structure * feat: better update all handling * fix: remove preview_update_all * fix: feedback on bulk update + lint * fix: rem transitions * fix: change to jsonb * feat: app db backup after update * fix: lint * fix: sqlx prepare + use sqlx macros * fix: lint * fix: bugs * feat: defuck the installing process up * fix: bug of hell * fix: shear * fix: fmt * fix: install progress spacing + change mc/content/overrides to bytes * fix: lint * fix: prepr * fix: navtabs anim not working in app * fix: worlds.vue improvements + browse page fixes * feat: optimise queries + adapter fns * fix: lint * fix: lint * feat: shared modrinth-content-management crate (#6469) * feat: disable warnings setting * feat: add instances shortcuts (#6329) * Add modrinth://launch deep link to start a profile Support external profile launching via modrinth://launch/{profile_path} for integrations such as Stream Deck. * Change route to /launch/profile/{id} for future extensibility * fix: ensure profile path is url decoded * fix: URL-decode profile path from deep link * fix: use urlencoding crate for URL decoding * feat: implement app instance shortcuts * feat: change windows shortcut creation to use windows api instead * feat: implement creating a shortcut launching world/server * format * fmt * fix multiline inline tables * pnpm prepr * feat: move create shortcut to last item * refactor: split up shortcuts.rs for individual platforms * refactor: turn profile launch url into url type * use string literal and add safety comment * pt2 * refactor: rename anything that's profile into instance * update mac shortcut --------- Co-authored-by: DJCheesusReal <134006619+DJCheesusReal@users.noreply.github.com> --------- Co-authored-by: Truman Gao <106889354+tdgao@users.noreply.github.com> Co-authored-by: DJCheesusReal <134006619+DJCheesusReal@users.noreply.github.com>
2026-08-25 17:14:50 +00:00 · 2026-06-25 21:19:29 +00:00
parent ef4044534f
commit 734720e11e
353 changed files with 24745 additions and 9771 deletions
@@ -300,8 +300,6 @@ watch(
 watch(
 	() => props.links,
 	async () => {
-		sliderReady.value = false
-		transitionsEnabled.value = false
 		await nextTick()
 		updateActiveTab()
 	},
@@ -148,122 +148,135 @@ defineExpose({

 <template>
 	<NewModal ref="shareModal" :header="header" :noblur="noblur" :on-hide="onHide">
-		<div class="flex flex-col flex-wrap items-center gap-2">
-			<div v-if="link" class="group relative mx-auto">
-				<div ref="qrCode">
-					<QrcodeVue :value="url" class="!bg-white rounded-[var(--radius-md)]" margin="3" />
-				</div>
-				<ButtonStyled circular type="transparent">
-					<button
-						v-tooltip="'Copy QR code'"
-						class="absolute top-0 right-0 m-2"
-						aria-label="Copy QR code"
-						@click="copyImage"
-					>
-						<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
-					</button>
-				</ButtonStyled>
-			</div>
-			<StyledInput
-				v-else
-				v-model="content"
-				multiline
-				resize="vertical"
-				wrapper-class="h-full w-[30rem]"
+		<div class="flex flex-col items-center gap-2">
+			<div
+				:class="['flex items-center justify-center', link ? 'flex-wrap gap-4' : 'flex-col gap-2']"
 			>
-				<template #right>
+				<div v-if="link" class="group relative shrink-0">
+					<div ref="qrCode">
+						<QrcodeVue :value="url" class="!bg-white rounded-[var(--radius-md)]" margin="3" />
+					</div>
 					<ButtonStyled circular type="transparent">
 						<button
-							v-tooltip="'Copy Text'"
-							type="button"
-							aria-label="Copy Text"
+							v-tooltip="'Copy QR code'"
 							class="absolute top-0 right-0 m-2"
-							@click="copyText"
+							aria-label="Copy QR code"
+							@click="copyImage"
 						>
 							<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
 						</button>
 					</ButtonStyled>
-				</template>
-			</StyledInput>
-			<div class="flex flex-grow flex-col justify-center gap-2">
-				<button
-					v-if="link"
-					v-tooltip="'Copy Link'"
-					type="button"
-					aria-label="Copy Link"
-					class="flex h-10 w-full cursor-pointer items-center justify-between gap-2 rounded-xl border-none bg-button-bg px-3 pr-1.5 text-primary transition-all hover:bg-button-bg-hover hover:brightness-125 active:scale-95"
-					@click="copyText"
+				</div>
+				<StyledInput
+					v-else
+					v-model="content"
+					multiline
+					resize="vertical"
+					wrapper-class="h-full w-[30rem]"
 				>
-					<span class="cursor-pointer truncate text-left font-semibold text-primary">
-						{{ url }}
-					</span>
-					<div class="grid h-10 w-10 place-content-center">
-						<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
-					</div>
-				</button>
-				<ButtonStyled v-if="link">
-					<a :href="url" target="_blank" rel="noopener noreferrer" aria-label="Open in new tab">
-						Open in new tab
-						<ExternalIcon aria-hidden="true" />
-					</a>
-				</ButtonStyled>
-				<div v-if="socialButtons" class="flex flex-row gap-1">
-					<ButtonStyled v-if="canShare" circular>
-						<button v-tooltip="'Share'" aria-label="Share" @click="share">
-							<ShareIcon aria-hidden="true" />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled circular>
+					<template #right>
+						<ButtonStyled circular type="transparent">
+							<button
+								v-tooltip="'Copy Text'"
+								type="button"
+								aria-label="Copy Text"
+								class="absolute top-0 right-0 m-2"
+								@click="copyText"
+							>
+								<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+					</template>
+				</StyledInput>
+				<div
+					v-if="link || socialButtons"
+					:class="['flex flex-col justify-center gap-2', link ? 'w-64 max-w-full' : 'flex-grow']"
+				>
+					<button
+						v-if="link"
+						v-tooltip="'Copy Link'"
+						type="button"
+						aria-label="Copy Link"
+						class="flex h-10 w-full cursor-pointer items-center justify-between gap-2 rounded-xl border-none bg-button-bg px-3 pr-1.5 text-primary transition-all hover:bg-button-bg-hover hover:brightness-125 active:scale-95"
+						@click="copyText"
+					>
+						<span class="min-w-0 cursor-pointer truncate text-left font-semibold text-primary">
+							{{ url }}
+						</span>
+						<div class="grid h-10 w-10 place-content-center">
+							<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
+						</div>
+					</button>
+					<ButtonStyled v-if="link">
 						<a
-							v-tooltip="'Send as an email'"
-							:href="sendEmail"
-							:target="targetParameter"
-							aria-label="Send as an email"
-						>
-							<MailIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
-					<ButtonStyled circular>
-						<a
-							v-if="link"
-							v-tooltip="'Open link in browser'"
-							:target="targetParameter"
 							:href="url"
-							aria-label="Open link in browser"
+							target="_blank"
+							rel="noopener noreferrer"
+							aria-label="Open in new tab"
+							class="w-full"
 						>
-							<GlobeIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
-					<ButtonStyled circular>
-						<a
-							v-tooltip="'Toot about it'"
-							:target="targetParameter"
-							:href="sendToot"
-							aria-label="Toot about it"
-						>
-							<MastodonIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
-					<ButtonStyled circular>
-						<a
-							v-tooltip="'Tweet about it'"
-							:target="targetParameter"
-							:href="sendTweet"
-							aria-label="Tweet about it"
-						>
-							<TwitterIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
-					<ButtonStyled circular>
-						<a
-							v-tooltip="'Share on Reddit'"
-							:target="targetParameter"
-							:href="postOnReddit"
-							aria-label="Share on Reddit"
-						>
-							<RedditIcon aria-hidden="true" />
+							Open in new tab
+							<ExternalIcon aria-hidden="true" />
 						</a>
 					</ButtonStyled>
+					<div v-if="socialButtons" class="flex flex-row gap-1">
+						<ButtonStyled v-if="canShare" circular>
+							<button v-tooltip="'Share'" aria-label="Share" @click="share">
+								<ShareIcon aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								v-tooltip="'Send as an email'"
+								:href="sendEmail"
+								:target="targetParameter"
+								aria-label="Send as an email"
+							>
+								<MailIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								v-if="link"
+								v-tooltip="'Open link in browser'"
+								:target="targetParameter"
+								:href="url"
+								aria-label="Open link in browser"
+							>
+								<GlobeIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								v-tooltip="'Toot about it'"
+								:target="targetParameter"
+								:href="sendToot"
+								aria-label="Toot about it"
+							>
+								<MastodonIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								v-tooltip="'Tweet about it'"
+								:target="targetParameter"
+								:href="sendTweet"
+								aria-label="Tweet about it"
+							>
+								<TwitterIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								v-tooltip="'Share on Reddit'"
+								:target="targetParameter"
+								:href="postOnReddit"
+								aria-label="Share on Reddit"
+							>
+								<RedditIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -25,6 +25,10 @@
 					:status-text="item.toast.statusText"
 					:progress="item.toast.progress"
 					:waiting="item.toast.waiting"
+					:show-progress="item.toast.showProgress"
+					:progress-type="item.toast.progressType"
+					:progress-current="item.toast.progressCurrent"
+					:progress-total="item.toast.progressTotal"
 					@accept="handleToastAction(item, item.toast.onAccept)"
 					@decline="handleToastAction(item, item.toast.onDecline)"
 					@dismiss="handleToastAction(item, item.toast.onDismiss)"
@@ -33,17 +37,25 @@
 					@open-instance="handleToastAction(item, item.toast.onOpenInstance)"
 				/>
 				<div v-else-if="isDownloadNotification(item)" class="flex flex-col gap-4">
-					<NotificationToast
-						v-for="progressItem in downloadToastItems(item)"
-						:key="progressItem.id"
-						type="instance-download"
-						:entity-name="progressItem.title || item.title"
-						:entity-icon-url="progressItem.iconUrl ?? item.iconUrl ?? MinecraftServerIcon"
-						:status-text="downloadStatusText(progressItem)"
-						:progress="progressItem.progress"
-						:waiting="progressItem.waiting"
-						@dismiss="dismiss(item.id)"
-					/>
+					<div v-for="progressItem in downloadToastItems(item)" :key="progressItem.id">
+						<NotificationToast
+							type="instance-download"
+							:entity-name="progressItem.title || item.title"
+							:entity-icon-url="progressItem.iconUrl ?? item.iconUrl ?? MinecraftServerIcon"
+							:status-text="progressItem.text"
+							:progress="progressItem.progress"
+							:waiting="progressItem.waiting"
+							:show-progress="progressItem.showProgress"
+							:wrap-text="progressItem.wrapText"
+							:progress-type="progressItem.progressType"
+							:progress-current="progressItem.progressCurrent"
+							:progress-total="progressItem.progressTotal"
+							:action-label="progressItem.buttons?.[0]?.label"
+							:action-icon="progressItem.buttons?.[0]?.icon"
+							@dismiss="handleProgressItemDismiss(item, progressItem)"
+							@action="handleProgressItemAction(progressItem)"
+						/>
+					</div>
 				</div>
 				<div
 					v-else
@@ -203,12 +215,39 @@ function downloadToastItems(item: PopupNotification): PopupNotificationProgressI
 			iconUrl: item.iconUrl,
 			progress: item.progress ?? 0,
 			waiting: item.waiting ?? false,
+			showProgress: true,
+			progressType: 'percentage',
 		},
 	]
 }

-function downloadStatusText(progressItem: PopupNotificationProgressItem) {
-	return progressItem.text?.replace(/^\d+%\s*/, '') ?? ''
+async function handleProgressItemDismiss(
+	item: PopupNotification,
+	progressItem: PopupNotificationProgressItem,
+) {
+	if (progressItem.onDismiss) {
+		await progressItem.onDismiss()
+		return
+	}
+
+	dismiss(item.id)
+}
+
+async function handleProgressItemAction(progressItem: PopupNotificationProgressItem) {
+	const button = progressItem.buttons?.[0]
+	if (button) {
+		await handleProgressItemButtonClick(progressItem, button)
+	}
+}
+
+async function handleProgressItemButtonClick(
+	progressItem: PopupNotificationProgressItem,
+	btn: PopupNotificationButton,
+) {
+	await btn.action()
+	if (!btn.keepOpen) {
+		await progressItem.onDismiss?.()
+	}
 }

 function handleButtonClick(id: string | number, btn: PopupNotificationButton) {
@@ -83,24 +83,15 @@
 				:tint-by="entityLabel"
 				class="!rounded-xl border border-solid border-surface-5"
 			/>
-			<div class="flex min-w-0 flex-1 flex-col" :class="{ 'gap-2.5': type === 'instance-ready' }">
-				<div class="flex min-w-0 flex-1 items-start gap-1">
-					<div class="flex min-w-0 flex-1 flex-col gap-[3px] text-base leading-5">
-						<p
-							ref="titleRef"
-							v-tooltip="truncatedTooltip(titleRef, entityLabel)"
-							class="m-0 min-w-0 truncate text-lg font-semibold leading-6 text-contrast"
-						>
-							{{ entityLabel }}
-						</p>
-						<p
-							ref="statusRef"
-							v-tooltip="truncatedTooltip(statusRef, statusLine)"
-							class="m-0 min-w-0 truncate font-normal leading-tight text-contrast/85"
-						>
-							{{ statusLine }}
-						</p>
-					</div>
+			<div class="notification-toast-main-grid min-w-0 flex-1 text-base leading-5">
+				<p
+					ref="titleRef"
+					v-tooltip="truncatedTooltip(titleRef, entityLabel)"
+					class="col-start-1 col-end-3 row-start-1 m-0 min-w-0 truncate pr-9 text-lg font-semibold leading-6 text-contrast"
+				>
+					{{ entityLabel }}
+				</p>
+				<div class="col-start-2 row-start-1 justify-self-end">
 					<ButtonStyled size="small" type="transparent" circular>
 						<button
 							type="button"
@@ -112,12 +103,49 @@
 						</button>
 					</ButtonStyled>
 				</div>
-				<div v-if="type === 'instance-ready'" class="flex items-center gap-2">
+				<div
+					class="col-start-1 col-end-3 row-start-2 flex min-w-0 items-center justify-between gap-0.5"
+				>
+					<p
+						ref="statusRef"
+						v-tooltip="truncatedTooltip(statusRef, statusLine)"
+						class="m-0 min-w-0 flex-1 font-normal leading-tight text-contrast/85"
+						:class="wrapText ? 'whitespace-normal break-words' : 'truncate'"
+					>
+						{{ statusLine }}
+					</p>
+					<div
+						v-if="type === 'instance-download' && progressLabel"
+						class="notification-inline-progress-label flex-none text-xs"
+					>
+						{{ progressLabel }}
+					</div>
+				</div>
+				<div
+					v-if="type === 'instance-ready'"
+					class="col-start-1 col-end-3 row-start-3 mt-2 flex min-w-0 items-center justify-between gap-2"
+				>
+					<div class="flex min-w-0 items-center gap-2">
+						<ButtonStyled color="brand">
+							<button @click="$emit('launch')">Launch game</button>
+						</ButtonStyled>
+						<ButtonStyled type="outlined">
+							<button @click="$emit('open-instance')">Instance</button>
+						</ButtonStyled>
+					</div>
+					<div v-if="progressLabel" class="notification-inline-progress-label flex-none">
+						{{ progressLabel }}
+					</div>
+				</div>
+				<div
+					v-if="type === 'instance-download' && actionLabel"
+					class="col-start-1 row-start-3 mt-2 flex min-w-0 items-center gap-2"
+				>
 					<ButtonStyled color="brand">
-						<button @click="$emit('launch')">Launch game</button>
-					</ButtonStyled>
-					<ButtonStyled type="outlined">
-						<button @click="$emit('open-instance')">Instance</button>
+						<button @click="$emit('action')">
+							<component :is="actionIcon" v-if="actionIcon" />
+							{{ actionLabel }}
+						</button>
 					</ButtonStyled>
 				</div>
 			</div>
@@ -144,8 +172,10 @@

 <script setup lang="ts">
 import { XIcon } from '@modrinth/assets'
-import { computed, ref } from 'vue'
+import { type Component, computed, ref } from 'vue'

+import { useFormatBytes, useFormatNumber } from '../../composables'
+import type { PopupNotificationProgressType } from '../../providers'
 import { truncatedTooltip } from '../../utils/truncate'
 import Avatar from '../base/Avatar.vue'
 import ButtonStyled from '../base/ButtonStyled.vue'
@@ -167,6 +197,13 @@ const props = withDefaults(
 		statusText?: string
 		progress?: number
 		waiting?: boolean
+		showProgress?: boolean
+		wrapText?: boolean
+		progressType?: PopupNotificationProgressType
+		progressCurrent?: number
+		progressTotal?: number
+		actionLabel?: string
+		actionIcon?: Component
 	}>(),
 	{
 		actorName: null,
@@ -174,6 +211,9 @@ const props = withDefaults(
 		entityName: '',
 		entityIconUrl: null,
 		waiting: false,
+		showProgress: true,
+		wrapText: false,
+		progressType: 'percentage',
 	},
 )

@@ -181,6 +221,7 @@ defineEmits<{
 	accept: []
 	decline: []
 	dismiss: []
+	action: []
 	launch: []
 	'open-actor': []
 	'open-instance': []
@@ -198,6 +239,8 @@ const entityLabel = computed(() => props.entityName || '')
 const progressValue = computed(() => Math.max(0, Math.min(1, props.progress ?? 0)))
 const progressPercent = computed(() => Math.round(progressValue.value * 100))
 const isWaitingProgress = computed(() => props.type === 'instance-download' && props.waiting)
+const formatBytes = useFormatBytes()
+const formatNumber = useFormatNumber()

 const inviteActionText = computed(() => {
 	if (props.type === 'server-invite') {
@@ -216,20 +259,56 @@ const resolvedStatusText = computed(() => {
 })

 const statusLine = computed(() => {
-	if (props.type !== 'instance-download' || props.waiting) {
-		return resolvedStatusText.value
-	}
-
-	const status = resolvedStatusText.value.trim()
-	return status ? `${status} ${progressPercent.value}%` : `${progressPercent.value}%`
+	return resolvedStatusText.value
 })

 const showsBottomProgress = computed(
 	() =>
-		props.type === 'instance-download' ||
+		(props.type === 'instance-download' && props.showProgress) ||
 		(props.type === 'instance-ready' && props.progress != null),
 )

+const progressCurrent = computed(() => {
+	if (props.progressCurrent != null) {
+		return Math.max(0, props.progressCurrent)
+	}
+	if (props.progressTotal != null) {
+		return Math.round(progressValue.value * props.progressTotal)
+	}
+	return progressPercent.value
+})
+
+const progressTotal = computed(() => Math.max(0, props.progressTotal ?? 0))
+
+function formatProgressLabel(
+	type: PopupNotificationProgressType | undefined,
+	current: number,
+	total: number,
+): string {
+	if (type === 'bytes' && total > 0) {
+		return `${formatBytes(Math.min(current, total), 1)} / ${formatBytes(total, 1)}`
+	}
+
+	if (type === 'count' && total > 0) {
+		return `${formatNumber(Math.min(current, total))} / ${formatNumber(total)}`
+	}
+
+	return `${progressPercent.value}%`
+}
+
+const progressLabel = computed(() => {
+	if (!showsBottomProgress.value || isWaitingProgress.value) {
+		return ''
+	}
+
+	const primary = formatProgressLabel(
+		props.progressType,
+		progressCurrent.value,
+		progressTotal.value,
+	)
+	return primary
+})
+
 const titleRef = ref<HTMLElement | null>(null)
 const statusRef = ref<HTMLElement | null>(null)
 </script>
@@ -239,6 +318,22 @@ const statusRef = ref<HTMLElement | null>(null)
 	width: min(420px, calc(100vw - 1.5rem));
 }

+.notification-toast-main-grid {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	column-gap: 0.25rem;
+	row-gap: 0.1875rem;
+}
+
+.notification-inline-progress-label {
+	flex: 0 0 auto;
+	color: var(--color-secondary);
+	font-variant-numeric: tabular-nums;
+	pointer-events: none;
+	text-align: right;
+	white-space: nowrap;
+}
+
 .notification-toast-dismiss {
 	--_height: 1.25rem;
 	--_width: 1.25rem;
@@ -55,6 +55,11 @@ async function handleBack() {
 	if (!context) return

 	if (selectedCount.value > 0 && !isInstallingSelected.value) {
+		if (context.skipNonEssentialWarnings) {
+			await handleSelectedProjectsLeaveResult('discard', context)
+			return
+		}
+
 		const result = await selectedProjectsLeaveModal.value?.prompt()
 		await handleSelectedProjectsLeaveResult(result ?? 'cancel', context)
 		return
@@ -36,6 +36,7 @@ export interface BrowseInstallContext {
 	onBack?: () => boolean | void | Promise<boolean | void>
 	selectedProjects?: BrowseSelectedProject[]
 	isInstallingSelected?: boolean
+	skipNonEssentialWarnings?: boolean
 	installProgress?: {
 		completed: number
 		total: number
@@ -46,6 +46,10 @@ const messages = defineMessages({
 		id: 'content.selection-bar.bulk.updating-waiting',
 		defaultMessage: 'Updating {contentType}...',
 	},
+	bulkUpdatingCount: {
+		id: 'content.selection-bar.bulk.updating-count',
+		defaultMessage: 'Updating {count, number} {contentType}',
+	},
 	bulkDeleting: {
 		id: 'content.selection-bar.bulk.deleting',
 		defaultMessage: 'Deleting {progress}/{total} {contentType}...',
@@ -54,6 +58,18 @@ const messages = defineMessages({
 		id: 'content.selection-bar.bulk.deleting-waiting',
 		defaultMessage: 'Deleting {contentType}...',
 	},
+	bulkEnablingCount: {
+		id: 'content.selection-bar.bulk.enabling-count',
+		defaultMessage: 'Enabling {count, number} {contentType}',
+	},
+	bulkDisablingCount: {
+		id: 'content.selection-bar.bulk.disabling-count',
+		defaultMessage: 'Disabling {count, number} {contentType}',
+	},
+	bulkDeletingCount: {
+		id: 'content.selection-bar.bulk.deleting-count',
+		defaultMessage: 'Deleting {count, number} {contentType}',
+	},
 	allAlreadyEnabled: {
 		id: 'content.selection-bar.all-already-enabled',
 		defaultMessage: 'All selected content is already enabled',
@@ -74,6 +90,8 @@ interface Props {
 	bulkProgress?: number
 	bulkTotal?: number
 	bulkWaiting?: boolean
+	bulkStatusMessage?: string | null
+	bulkItemCount?: number
 	ariaLabel?: string
 	getItemId?: (item: ContentItem) => string
 }
@@ -87,6 +105,8 @@ const props = withDefaults(defineProps<Props>(), {
 	bulkProgress: 0,
 	bulkTotal: 0,
 	bulkWaiting: false,
+	bulkStatusMessage: null,
+	bulkItemCount: 0,
 	ariaLabel: undefined,
 	getItemId: undefined,
 })
@@ -114,7 +134,22 @@ const allDisabled = computed(() => props.selectedItems.every((m) => !m.enabled))
 const allEnabled = computed(() => props.selectedItems.every((m) => m.enabled))

 const selectedCountText = computed(() => {
-	const count = props.selectedItems.length || props.bulkTotal
+	const count = props.isBulkOperating
+		? props.bulkItemCount || props.bulkTotal || props.selectedItems.length
+		: props.selectedItems.length || props.bulkTotal
+	if (props.isBulkOperating && props.bulkOperation) {
+		const messageMap = {
+			enable: messages.bulkEnablingCount,
+			disable: messages.bulkDisablingCount,
+			update: messages.bulkUpdatingCount,
+			delete: messages.bulkDeletingCount,
+		}
+		return formatMessage(messageMap[props.bulkOperation], {
+			count,
+			contentType: formatContentTypeSentence(formatMessage, props.contentTypeLabel, count),
+		})
+	}
+
 	if (props.contentTypeLabel) {
 		return formatMessage(messages.selectedCount, {
 			count,
@@ -125,6 +160,7 @@ const selectedCountText = computed(() => {
 })

 const bulkProgressMessage = computed(() => {
+	if (props.bulkStatusMessage) return props.bulkStatusMessage
 	if (!props.bulkOperation) return ''
 	const messageMap = {
 		enable: props.bulkWaiting ? messages.bulkEnablingWaiting : messages.bulkEnabling,
@@ -256,7 +256,7 @@ import {
 	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'

 import AutoLink from '#ui/components/base/AutoLink.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
@@ -481,6 +481,15 @@ function resetState() {
 	selectedGameVersion.value = preferred ?? defaultVersion
 }

+watch(
+	() => props.loading,
+	(loading, wasLoading) => {
+		if (wasLoading && !loading) {
+			tab.value = props.defaultTab ?? 'existing'
+		}
+	},
+)
+
 function handleHide() {
 	emit('cancel')
 }
@@ -31,7 +31,7 @@
 							formatMessage(messages.loadingVersions)
 						}}</span>
 					</div>
-					<template v-else>
+					<div v-else class="min-h-full">
 						<div class="flex flex-col gap-1.5" role="listbox">
 							<button
 								v-for="version in filteredVersions"
@@ -87,7 +87,7 @@
 						>
 							{{ formatMessage(messages.noVersionsFound) }}
 						</div>
-					</template>
+					</div>
 				</div>

 				<div
@@ -120,8 +120,8 @@

 			<div class="w-px bg-divider" />

-			<div class="flex-1 flex flex-col min-w-0 relative bg-surface-1" aria-live="polite">
-				<template v-if="selectedVersion">
+			<div class="flex-1 flex flex-col min-w-0 min-h-0 relative bg-surface-1" aria-live="polite">
+				<div v-if="selectedVersion" class="flex-1 flex flex-col min-w-0 min-h-0 relative">
 					<div class="bg-bg p-4">
 						<div class="flex flex-col gap-1.5">
 							<div class="flex items-center justify-between">
@@ -157,7 +157,7 @@

 					<div class="h-px bg-divider" />

-					<div class="flex-1 bg-bg p-4 overflow-y-auto">
+					<div class="flex-1 min-h-0 bg-bg p-4 overflow-y-auto">
 						<div
 							v-if="loadingChangelog"
 							class="flex flex-col items-center justify-center h-full gap-2"
@@ -180,7 +180,14 @@
 					<div
 						class="absolute bottom-0 left-0 right-0 h-14 bg-gradient-to-t from-bg to-transparent pointer-events-none"
 					/>
-				</template>
+				</div>
+				<div
+					v-else-if="loading || loadingChangelog || props.versions.length > 0"
+					class="flex-1 flex flex-col items-center justify-center h-full gap-2 text-secondary bg-bg"
+				>
+					<SpinnerIcon class="h-6 w-6 animate-spin" />
+					<span class="text-sm">{{ formatMessage(messages.loadingChangelog) }}</span>
+				</div>
 				<div v-else class="flex-1 flex items-center justify-center text-secondary bg-bg">
 					{{ formatMessage(messages.selectVersionPrompt) }}
 				</div>
@@ -284,7 +291,7 @@ import {
 	renderHighlightedString,
 } from '@modrinth/utils'
 import { useTimeoutFn } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, toRef } from 'vue'

 import Avatar from '#ui/components/base/Avatar.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
@@ -301,6 +308,9 @@ import {
 	versionMatchesCompatibilityTarget,
 } from '#ui/utils/version-compatibility'

+import { useContentUpdaterFiltering } from './use-content-updater-filtering'
+import { useContentUpdaterSelection } from './use-content-updater-selection'
+
 const { formatMessage } = useVIntl()
 const debug = useDebugLogger('ContentUpdaterModal')
 const tags = injectTags(null)
@@ -473,52 +483,19 @@ const incompatibleUpdateModal = ref<InstanceType<typeof ConfirmModal>>()
 const searchQuery = ref('')
 const hideIncompatibleState = ref(true)
 const switchMode = ref(false)
-const selectedVersion = ref<Labrinth.Versions.v2.Version | null>(null)
 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)
-const pinnedInitialVersionId = ref<string | undefined>(undefined)

-watch(
-	() => props.versions,
-	(newVersions) => {
-		// If we have a selected version, check if it was updated with new data (e.g., changelog)
-		if (selectedVersion.value) {
-			const updatedVersion = newVersions.find((v) => v.id === selectedVersion.value?.id)
-			if (updatedVersion && updatedVersion !== selectedVersion.value) {
-				selectedVersion.value = updatedVersion
-			}
-		}
-
-		// Handle initial selection when versions first arrive
-		if (newVersions.length > 0 && !selectedVersion.value && pendingInitialVersionId.value) {
-			const pendingFound = newVersions.find((v) => v.id === pendingInitialVersionId.value)
-			debug('versions watcher: initial selection', {
-				pendingInitialVersionId: pendingInitialVersionId.value,
-				foundPending: !!pendingFound,
-				currentVersionId: props.currentVersionId,
-				currentInList: newVersions.some((v) => v.id === props.currentVersionId),
-				totalVersions: newVersions.length,
-				loaderDistribution: [...new Set(newVersions.flatMap((v) => v.loaders))],
-				gameVersionDistribution: [...new Set(newVersions.flatMap((v) => v.game_versions))].slice(
-					0,
-					10,
-				),
-			})
-			const version = pendingFound ?? newVersions[0]
-			selectedVersion.value = version
-			if (version) {
-				emit('versionSelect', version)
-			}
-			pendingInitialVersionId.value = undefined
-		}
-	},
-	{ deep: true },
-)
+const { selectedVersion, pinnedInitialVersionId, selectVersion, resetInitialSelection } =
+	useContentUpdaterSelection({
+		versions: toRef(props, 'versions'),
+		currentVersionId: toRef(props, 'currentVersionId'),
+		onVersionSelect: (version) => emit('versionSelect', version),
+		debug,
+	})

 function isVersionCompatible(version: Labrinth.Versions.v2.Version): boolean {
 	const compatible = versionMatchesCompatibilityTarget(version, {
@@ -551,41 +528,17 @@ const isDowngrade = computed(() => {
 	)
 })

-const filteredVersions = computed(() => {
-	let versions = [...props.versions]
-
-	if (searchQuery.value) {
-		const query = searchQuery.value.toLowerCase()
-		versions = versions.filter(
-			(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 (!incompatibilityWarningMode.value && !isModpack.value && hideIncompatibleState.value) {
-		versions = versions.filter(
-			(version) =>
-				version.id === props.currentVersionId ||
-				version.id === selectedVersion.value?.id ||
-				version.id === pinnedInitialVersionId.value ||
-				isVersionCompatible(version),
-		)
-	}
-
-	debug('filteredVersions computed', {
-		totalVersions: props.versions.length,
-		afterSearchFilter: beforeFilterCount,
-		afterCompatibilityFilter: versions.length,
-		hiddenByCompatibility: beforeFilterCount - versions.length,
-		hideIncompatible: hideIncompatibleState.value,
-		filteringCompatibility: !isModpack.value && hideIncompatibleState.value,
-	})
-
-	return versions
+const filteredVersions = useContentUpdaterFiltering({
+	versions: toRef(props, 'versions'),
+	searchQuery,
+	isModpack,
+	incompatibilityWarningMode,
+	hideIncompatibleState,
+	selectedVersion,
+	pinnedInitialVersionId,
+	currentVersionId: toRef(props, 'currentVersionId'),
+	isVersionCompatible,
+	debug,
 })

 function shouldShowBadge(version: Labrinth.Versions.v2.Version): boolean {
@@ -682,9 +635,7 @@ function handleVersionMouseLeave() {

 function handleVersionSelect(version: Labrinth.Versions.v2.Version) {
 	if (prefetchTimeout) prefetchTimeout.stop()
-	selectedVersion.value = version
-	// Emit event so parent can fetch full version data with changelog
-	emit('versionSelect', version)
+	selectVersion(version)
 }

 function handleUpdate(event: MouseEvent) {
@@ -772,7 +723,6 @@ function show(initialVersionId?: string, options?: { switchMode?: boolean }) {
 	searchQuery.value = ''
 	hideIncompatibleState.value = incompatibilityWarningMode.value ? false : !isModpack.value
 	pendingIncompatibleUpdate.value = null
-	pinnedInitialVersionId.value = initialVersionId
 	switchMode.value = options?.switchMode ?? false

 	debug('show() called', {
@@ -791,25 +741,9 @@ function show(initialVersionId?: string, options?: { switchMode?: boolean }) {
 			foundInList: !!currentInList,
 			allVersionIds: props.versions.map((v) => v.id),
 		})
-
-		if (initialVersionId) {
-			selectedVersion.value =
-				props.versions.find((v) => v.id === initialVersionId) ?? props.versions[0]
-		} else {
-			selectedVersion.value = props.versions[0]
-		}
-		pendingInitialVersionId.value = undefined
-		if (selectedVersion.value) {
-			emit('versionSelect', selectedVersion.value)
-		}
-	} else {
-		selectedVersion.value = null
-		pendingInitialVersionId.value = initialVersionId
-		debug('show(): no versions yet, deferring selection', {
-			pendingInitialVersionId: initialVersionId,
-		})
 	}

+	resetInitialSelection(initialVersionId)
 	modal.value?.show()
 }

@@ -0,0 +1,68 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { ComputedRef, Ref } from 'vue'
+import { computed } from 'vue'
+
+type UseContentUpdaterFilteringOptions = {
+	versions: Readonly<Ref<Labrinth.Versions.v2.Version[]>>
+	searchQuery: Ref<string>
+	isModpack: ComputedRef<boolean>
+	incompatibilityWarningMode: ComputedRef<boolean>
+	hideIncompatibleState: Ref<boolean>
+	selectedVersion: Ref<Labrinth.Versions.v2.Version | null>
+	pinnedInitialVersionId: Ref<string | undefined>
+	currentVersionId: Readonly<Ref<string>>
+	isVersionCompatible: (version: Labrinth.Versions.v2.Version) => boolean
+	debug: (message: string, data?: Record<string, unknown>) => void
+}
+
+export function useContentUpdaterFiltering({
+	versions: sourceVersions,
+	searchQuery,
+	isModpack,
+	incompatibilityWarningMode,
+	hideIncompatibleState,
+	selectedVersion,
+	pinnedInitialVersionId,
+	currentVersionId,
+	isVersionCompatible,
+	debug,
+}: UseContentUpdaterFilteringOptions) {
+	return computed(() => {
+		let versions = [...sourceVersions.value]
+
+		if (searchQuery.value) {
+			const query = searchQuery.value.toLowerCase()
+			versions = versions.filter(
+				(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 (!incompatibilityWarningMode.value && !isModpack.value && hideIncompatibleState.value) {
+			versions = versions.filter(
+				(version) =>
+					version.id === currentVersionId.value ||
+					version.id === selectedVersion.value?.id ||
+					version.id === pinnedInitialVersionId.value ||
+					isVersionCompatible(version),
+			)
+		}
+
+		debug('filteredVersions computed', {
+			totalVersions: sourceVersions.value.length,
+			afterSearchFilter: beforeFilterCount,
+			afterCompatibilityFilter: versions.length,
+			hiddenByCompatibility: beforeFilterCount - versions.length,
+			hideIncompatible: hideIncompatibleState.value,
+			filteringCompatibility: !isModpack.value && hideIncompatibleState.value,
+		})
+
+		return versions
+	})
+}
@@ -0,0 +1,88 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
+
+type UseContentUpdaterSelectionOptions = {
+	versions: Readonly<Ref<Labrinth.Versions.v2.Version[]>>
+	currentVersionId: Readonly<Ref<string>>
+	onVersionSelect: (version: Labrinth.Versions.v2.Version) => void
+	debug: (message: string, data?: Record<string, unknown>) => void
+}
+
+export function useContentUpdaterSelection({
+	versions,
+	currentVersionId,
+	onVersionSelect,
+	debug,
+}: UseContentUpdaterSelectionOptions) {
+	const selectedVersion = ref<Labrinth.Versions.v2.Version | null>(null)
+	const pendingInitialVersionId = ref<string | undefined>(undefined)
+	const pinnedInitialVersionId = ref<string | undefined>(undefined)
+
+	watch(
+		versions,
+		(newVersions) => {
+			if (selectedVersion.value) {
+				const updatedVersion = newVersions.find((v) => v.id === selectedVersion.value?.id)
+				if (updatedVersion && updatedVersion !== selectedVersion.value) {
+					selectedVersion.value = updatedVersion
+				}
+			}
+
+			if (newVersions.length > 0 && !selectedVersion.value && pendingInitialVersionId.value) {
+				const pendingFound = newVersions.find((v) => v.id === pendingInitialVersionId.value)
+				debug('versions watcher: initial selection', {
+					pendingInitialVersionId: pendingInitialVersionId.value,
+					foundPending: !!pendingFound,
+					currentVersionId: currentVersionId.value,
+					currentInList: newVersions.some((v) => v.id === currentVersionId.value),
+					totalVersions: newVersions.length,
+					loaderDistribution: [...new Set(newVersions.flatMap((v) => v.loaders))],
+					gameVersionDistribution: [...new Set(newVersions.flatMap((v) => v.game_versions))].slice(
+						0,
+						10,
+					),
+				})
+				const version = pendingFound ?? newVersions[0]
+				selectedVersion.value = version
+				if (version) {
+					onVersionSelect(version)
+				}
+				pendingInitialVersionId.value = undefined
+			}
+		},
+		{ deep: true },
+	)
+
+	function selectVersion(version: Labrinth.Versions.v2.Version) {
+		selectedVersion.value = version
+		onVersionSelect(version)
+	}
+
+	function resetInitialSelection(initialVersionId?: string) {
+		pinnedInitialVersionId.value = initialVersionId
+
+		if (versions.value.length > 0) {
+			selectedVersion.value = initialVersionId
+				? (versions.value.find((v) => v.id === initialVersionId) ?? versions.value[0])
+				: versions.value[0]
+			pendingInitialVersionId.value = undefined
+			if (selectedVersion.value) {
+				onVersionSelect(selectedVersion.value)
+			}
+		} else {
+			selectedVersion.value = null
+			pendingInitialVersionId.value = initialVersionId
+			debug('show(): no versions yet, deferring selection', {
+				pendingInitialVersionId: initialVersionId,
+			})
+		}
+	}
+
+	return {
+		selectedVersion,
+		pinnedInitialVersionId,
+		selectVersion,
+		resetInitialSelection,
+	}
+}
@@ -8,6 +8,7 @@ export { default as ConfirmModpackUpdateModal } from './components/modals/Confir
 export { default as ConfirmReinstallModal } from './components/modals/ConfirmReinstallModal.vue'
 export { default as ConfirmRepairModal } from './components/modals/ConfirmRepairModal.vue'
 export { default as ConfirmUnlinkModal } from './components/modals/ConfirmUnlinkModal.vue'
+export { default as ContentUpdaterModal } from './components/modals/content-updater-modal/index.vue'
 export { default as ContentDependencyWarningModal } from './components/modals/ContentDependencyWarningModal.vue'
 export type {
 	ContentInstallInstance,
@@ -15,7 +16,6 @@ export type {
 	ContentInstallProjectOwner,
 } from './components/modals/ContentInstallModal.vue'
 export { default as ContentInstallModal } from './components/modals/ContentInstallModal.vue'
-export { default as ContentUpdaterModal } from './components/modals/ContentUpdaterModal.vue'
 export type { ModpackContentModalState } from './components/modals/ModpackContentModal.vue'
 export { default as ModpackContentModal } from './components/modals/ModpackContentModal.vue'
 export { default as ContentCardLayout } from './layout.vue'
@@ -45,7 +45,7 @@ import {
 	useContentSelection,
 } from './composables'
 import { injectContentManager } from './providers/content-manager'
-import type { ContentCardTableItem, ContentItem } from './types'
+import type { BulkOperationStatus, ContentCardTableItem, ContentItem } from './types'

 const { formatMessage } = useVIntl()
 const debug = useDebugLogger('ContentPageLayout')
@@ -151,6 +151,7 @@ const messages = defineMessages({
 })

 const ctx = injectContentManager()
+const skipNonEssentialWarnings = computed(() => ctx.skipNonEssentialWarnings?.value ?? false)

 function getItemId(item: ContentItem) {
 	return ctx.getItemId?.(item) ?? item.file_path ?? item.file_name ?? item.id
@@ -247,6 +248,8 @@ if (ctx.isBulkOperating) {
 const { isChanging, markChanging, unmarkChanging } = useChangingItems()

 const bulkWaiting = ref(false)
+const bulkStatusMessage = ref<string | null>(null)
+const bulkItemCount = ref(0)

 const refreshing = ref(false)
 async function handleRefresh() {
@@ -387,7 +390,7 @@ async function promptDeleteItems(items: ContentItem[], event?: MouseEvent) {
 }

 function showDeletionConfirmation(event?: MouseEvent) {
-	if (event?.shiftKey && !ctx.isBusy.value) {
+	if ((event?.shiftKey || skipNonEssentialWarnings.value) && !ctx.isBusy.value) {
 		confirmDelete()
 	} else {
 		confirmDeletionModal.value?.show()
@@ -448,6 +451,8 @@ async function confirmDelete() {
 	if (ctx.bulkDeleteItems && itemsToDelete.length > 1) {
 		isBulkOperating.value = true
 		bulkOperation.value = 'delete'
+		bulkProgress.value = 0
+		bulkTotal.value = itemsToDelete.length
 		bulkWaiting.value = true
 		try {
 			await ctx.bulkDeleteItems(itemsToDelete)
@@ -456,6 +461,8 @@ async function confirmDelete() {
 			clearSelection()
 			isBulkOperating.value = false
 			bulkOperation.value = null
+			bulkProgress.value = 0
+			bulkTotal.value = 0
 			bulkWaiting.value = false
 		}
 		return
@@ -506,6 +513,8 @@ async function bulkEnable() {
 	if (ctx.bulkEnableItems) {
 		isBulkOperating.value = true
 		bulkOperation.value = 'enable'
+		bulkProgress.value = 0
+		bulkTotal.value = items.length
 		bulkWaiting.value = true
 		try {
 			await ctx.bulkEnableItems(items)
@@ -513,6 +522,8 @@ async function bulkEnable() {
 			clearSelection()
 			isBulkOperating.value = false
 			bulkOperation.value = null
+			bulkProgress.value = 0
+			bulkTotal.value = 0
 			bulkWaiting.value = false
 		}
 		return
@@ -527,6 +538,8 @@ async function bulkDisable() {
 	if (ctx.bulkDisableItems) {
 		isBulkOperating.value = true
 		bulkOperation.value = 'disable'
+		bulkProgress.value = 0
+		bulkTotal.value = items.length
 		bulkWaiting.value = true
 		try {
 			await ctx.bulkDisableItems(items)
@@ -534,6 +547,8 @@ async function bulkDisable() {
 			clearSelection()
 			isBulkOperating.value = false
 			bulkOperation.value = null
+			bulkProgress.value = 0
+			bulkTotal.value = 0
 			bulkWaiting.value = false
 		}
 		return
@@ -555,15 +570,19 @@ function handleSwitchVersionById(id: string) {
 // Bulk updating
 const confirmBulkUpdateModal = ref<InstanceType<typeof ConfirmBulkUpdateModal>>()
 const pendingBulkUpdateItems = ref<ContentItem[]>([])
+const pendingBulkUpdateAll = ref(false)

-const hasBulkUpdateSupport = computed(() => !!(ctx.bulkUpdateItem || ctx.bulkUpdateItems))
+const hasBulkUpdateSupport = computed(
+	() => !!(ctx.bulkUpdateAll || ctx.bulkUpdateItem || ctx.bulkUpdateItems),
+)

 function promptUpdateAll(event?: MouseEvent) {
 	if (!hasBulkUpdateSupport.value) return
 	const items = ctx.items.value.filter((item) => item.has_update)
 	if (items.length === 0) return
 	pendingBulkUpdateItems.value = items
-	if (event?.shiftKey && !ctx.isBusy.value) {
+	pendingBulkUpdateAll.value = true
+	if ((event?.shiftKey || skipNonEssentialWarnings.value) && !ctx.isBusy.value) {
 		confirmBulkUpdate()
 	} else {
 		confirmBulkUpdateModal.value?.show()
@@ -575,7 +594,8 @@ function promptUpdateSelected(event?: MouseEvent) {
 	const items = selectedItems.value.filter((item) => item.has_update)
 	if (items.length === 0) return
 	pendingBulkUpdateItems.value = items
-	if (event?.shiftKey && !ctx.isBusy.value) {
+	pendingBulkUpdateAll.value = false
+	if ((event?.shiftKey || skipNonEssentialWarnings.value) && !ctx.isBusy.value) {
 		confirmBulkUpdate()
 	} else {
 		confirmBulkUpdateModal.value?.show()
@@ -587,22 +607,61 @@ async function confirmBulkUpdate() {
 	const items = pendingBulkUpdateItems.value
 	if (items.length === 0 || !hasBulkUpdateSupport.value) return

-	if (ctx.bulkUpdateItems) {
-		isBulkOperating.value = true
-		bulkOperation.value = 'update'
-		bulkWaiting.value = true
-		try {
-			await ctx.bulkUpdateItems(items)
-		} finally {
-			clearSelection()
-			isBulkOperating.value = false
-			bulkOperation.value = null
-			bulkWaiting.value = false
+	const setBulkStatus = (status: BulkOperationStatus) => {
+		bulkStatusMessage.value = status.message ?? null
+		bulkProgress.value = status.progress ?? bulkProgress.value
+		bulkTotal.value = status.total ?? bulkTotal.value
+		bulkWaiting.value = status.waiting ?? false
+	}
+
+	try {
+		if (pendingBulkUpdateAll.value && ctx.bulkUpdateAll) {
+			isBulkOperating.value = true
+			bulkOperation.value = 'update'
+			bulkProgress.value = 0
+			bulkTotal.value = items.length
+			bulkItemCount.value = items.length
+			bulkStatusMessage.value = null
+			bulkWaiting.value = true
+			try {
+				await ctx.bulkUpdateAll(setBulkStatus)
+			} finally {
+				clearSelection()
+				isBulkOperating.value = false
+				bulkOperation.value = null
+				bulkProgress.value = 0
+				bulkTotal.value = 0
+				bulkItemCount.value = 0
+				bulkStatusMessage.value = null
+				bulkWaiting.value = false
+			}
+		} else if (ctx.bulkUpdateItems) {
+			isBulkOperating.value = true
+			bulkOperation.value = 'update'
+			bulkProgress.value = 0
+			bulkTotal.value = items.length
+			bulkItemCount.value = items.length
+			bulkStatusMessage.value = null
+			bulkWaiting.value = true
+			try {
+				await ctx.bulkUpdateItems(items)
+			} finally {
+				clearSelection()
+				isBulkOperating.value = false
+				bulkOperation.value = null
+				bulkProgress.value = 0
+				bulkTotal.value = 0
+				bulkItemCount.value = 0
+				bulkStatusMessage.value = null
+				bulkWaiting.value = false
+			}
+		} else if (ctx.bulkUpdateItem) {
+			await runBulk('update', items, ctx.bulkUpdateItem, { onComplete: clearSelection })
 		}
-	} else if (ctx.bulkUpdateItem) {
-		await runBulk('update', items, ctx.bulkUpdateItem, { onComplete: clearSelection })
+	} finally {
+		pendingBulkUpdateItems.value = []
+		pendingBulkUpdateAll.value = false
 	}
-	pendingBulkUpdateItems.value = []
 }

 const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
@@ -883,6 +942,8 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 			:bulk-progress="bulkProgress"
 			:bulk-total="bulkTotal"
 			:bulk-waiting="bulkWaiting"
+			:bulk-status-message="bulkStatusMessage"
+			:bulk-item-count="bulkItemCount"
 			:aria-label="formatMessage(commonMessages.selectionActionsLabel)"
 			:get-item-id="getItemId"
 			@clear="clearSelection"
@@ -5,6 +5,7 @@ import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowM
 import { createContext } from '#ui/providers/create-context'

 import type {
+	BulkOperationStatus,
 	ContentCardTableItem,
 	ContentItem,
 	ContentModpackCardCategory,
@@ -46,6 +47,7 @@ export interface ContentManagerContext {
 	// Guards
 	isBusy: Ref<boolean> | ComputedRef<boolean>
 	busyMessage?: Ref<string | null> | ComputedRef<string | null>
+	skipNonEssentialWarnings?: Ref<boolean> | ComputedRef<boolean>
 	disableAddContent?: Ref<boolean> | ComputedRef<boolean>
 	disableAddContentTooltip?: string

@@ -70,6 +72,7 @@ export interface ContentManagerContext {
 	// Update support (optional per-platform)
 	hasUpdateSupport: boolean
 	updateItem?: (id: string) => void
+	bulkUpdateAll?: (onProgress?: (status: BulkOperationStatus) => void) => Promise<void>
 	bulkUpdateItem?: (item: ContentItem) => Promise<void>
 	bulkUpdateItems?: (items: ContentItem[]) => Promise<void>

@@ -46,6 +46,13 @@ export interface ContentCardTableItem {
 export type ContentCardTableSortColumn = 'project' | 'version'
 export type ContentCardTableSortDirection = 'asc' | 'desc'

+export interface BulkOperationStatus {
+	message?: string
+	progress?: number
+	total?: number
+	waiting?: boolean
+}
+
 /** Content item returned from the app backend API - maps to ContentCardTableItem for display */
 export interface ContentItem extends Omit<
 	ContentCardTableItem,
@@ -222,6 +222,7 @@ import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useStickyObserver } from '#ui/composables/sticky-observer'
 import { useVirtualScroll } from '#ui/composables/virtual-scroll'
+import { injectFilePicker } from '#ui/providers/file-picker'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { commonMessages } from '#ui/utils/common-messages'
 import { getFileExtension } from '#ui/utils/file-extensions'
@@ -295,6 +296,7 @@ defineProps<{

 const { addNotification } = injectNotificationManager()
 const ctx = injectFileManager()
+const filePicker = injectFilePicker(null)

 const editorComponent = shallowRef<Component | null>(null)
 import('vue3-ace-editor').then(async (mod) => {
@@ -601,8 +603,24 @@ function handleDropError(error: unknown) {
 	})
 }

-function initiateFileUpload() {
+async function initiateFileUpload() {
 	if (isBusy.value) return
+	if (filePicker?.pickFiles) {
+		try {
+			const picked = await filePicker.pickFiles({ multiple: true })
+			if (picked.length > 0) {
+				ctx.uploadFiles(picked.map((item) => item.file))
+			}
+		} catch (error) {
+			addNotification({
+				title: formatMessage(commonMessages.uploadFailedLabel),
+				text: error instanceof Error ? error.message : undefined,
+				type: 'error',
+			})
+		}
+		return
+	}
+
 	const input = document.createElement('input')
 	input.type = 'file'
 	input.multiple = true
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="header" :closable="true" no-padding>
+	<NewModal ref="modal" :header="header" :closable="true" :disable-close="disableClose" no-padding>
 		<div class="max-w-[500px]">
 			<div class="flex flex-col gap-4 p-4">
 				<Admonition :type="hasUnknownContent ? 'warning' : 'info'" :header="admonitionHeader">
@@ -80,7 +80,7 @@
 		</div>

 		<template #actions>
-			<div class="flex justify-between gap-2">
+			<div class="flex justify-between gap-2 pt-4">
 				<div>
 					<ButtonStyled v-if="showReportButton" color="red" type="transparent">
 						<button @click="emit('report')">
@@ -132,6 +132,7 @@ const props = defineProps<{
 	showReportButton?: boolean
 	showBackupCreator?: boolean
 	removedLabel?: string
+	disableClose?: boolean
 }>()

 const emit = defineEmits<{
@@ -33,7 +33,7 @@ import ConfirmModpackUpdateModal from '../content-tab/components/modals/ConfirmM
 import ConfirmReinstallModal from '../content-tab/components/modals/ConfirmReinstallModal.vue'
 import ConfirmRepairModal from '../content-tab/components/modals/ConfirmRepairModal.vue'
 import ConfirmUnlinkModal from '../content-tab/components/modals/ConfirmUnlinkModal.vue'
-import ContentUpdaterModal from '../content-tab/components/modals/ContentUpdaterModal.vue'
+import ContentUpdaterModal from '../content-tab/components/modals/content-updater-modal/index.vue'
 import ContentDiffModal from './components/ContentDiffModal.vue'
 import IncompatibleContentModal from './components/IncompatibleContentModal.vue'
 import { useInstallationForm } from './composables'
@@ -43,6 +43,7 @@ import type { LoaderVersionEntry } from './types'
 const { formatMessage } = useVIntl()
 const ctx = injectInstallationSettings()
 const debug = useDebugLogger('InstallationSettingsLayout')
+const skipNonEssentialWarnings = computed(() => ctx.skipNonEssentialWarnings?.value ?? false)
 const availablePlatforms = computed(() =>
 	Array.isArray(ctx.availablePlatforms) ? ctx.availablePlatforms : ctx.availablePlatforms.value,
 )
@@ -203,6 +204,8 @@ const isLocalFile = computed(() => {
 	return typeof val === 'boolean' ? val : val.value
 })

+const isLinkedModpack = computed(() => showModpackVersionActions.value || isLocalFile.value)
+
 function handleModpackUpdateRequest(version: Labrinth.Versions.v2.Version, event?: MouseEvent) {
 	debug('handleModpackUpdateRequest: start', {
 		versionId: version.id,
@@ -226,7 +229,7 @@ function handleModpackUpdateRequest(version: Labrinth.Versions.v2.Version, event
 		isUpdateDowngrade.value ||
 		versionChangesGameVersion(version, ctx.updaterModalProps.value.currentGameVersion)

-	if (event?.shiftKey || !shouldShowWarning) {
+	if (event?.shiftKey || skipNonEssentialWarnings.value || !shouldShowWarning) {
 		debug('handleModpackUpdateRequest: confirming without warning', {
 			isUpdateDowngrade: isUpdateDowngrade.value,
 			shouldShowWarning,
@@ -243,6 +246,25 @@ function handleModpackUpdateRequest(version: Labrinth.Versions.v2.Version, event
 	modpackUpdateModal.value?.show()
 }

+function handleSwapModpack() {
+	debug('handleSwapModpack: start', { snapshot: stateSnapshot() })
+	if (ctx.isBusy.value) {
+		debug('handleSwapModpack: ignored busy')
+		return
+	}
+	form.cancelEditing()
+	ctx.swapModpack?.()
+	debug('handleSwapModpack: invoked ctx.swapModpack')
+}
+
+function handleModpackPrimaryAction() {
+	if (showModpackVersionActions.value) {
+		form.handleChangeModpackVersion()
+	} else {
+		handleSwapModpack()
+	}
+}
+
 function handleModpackUpdateConfirm() {
 	debug('handleModpackUpdateConfirm: start', {
 		pendingVersionId: pendingUpdateVersion.value?.id,
@@ -350,6 +372,10 @@ function handleShowRepairModal() {
 		snapshot: stateSnapshot(),
 		refs: modalRefsSnapshot(),
 	})
+	if (skipNonEssentialWarnings.value) {
+		handleRepair()
+		return
+	}
 	repairModal.value?.show()
 	nextTick(() => {
 		debug('handleShowRepairModal: after nextTick', {
@@ -365,7 +391,7 @@ function handleShowUnlinkModal(event: MouseEvent) {
 		snapshot: stateSnapshot(),
 		refs: modalRefsSnapshot(),
 	})
-	if (event.shiftKey) {
+	if (event.shiftKey || skipNonEssentialWarnings.value) {
 		handleUnlink()
 		return
 	}
@@ -629,12 +655,12 @@ const messages = defineMessages({
 						</div>
 					</div>
 					<div class="flex flex-wrap gap-2">
-						<ButtonStyled v-if="showModpackVersionActions">
+						<ButtonStyled v-if="showModpackVersionActions || isLocalFile">
 							<button
 								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
 								class="!shadow-none"
 								:disabled="ctx.isBusy.value"
-								@click="form.handleChangeModpackVersion()"
+								@click="handleModpackPrimaryAction"
 							>
 								<ArrowLeftRightIcon class="size-5" />
 								{{ formatMessage(commonMessages.changeVersionButton) }}
@@ -649,7 +675,7 @@ const messages = defineMessages({
 						{{
 							formatMessage(messages.linkedInstanceTitle, {
 								projectType: formatMessage(
-									showModpackVersionActions ? messages.modpackLabel : messages.serverProjectLabel,
+									isLinkedModpack ? messages.modpackLabel : messages.serverProjectLabel,
 								),
 							})
 						}}
@@ -665,9 +691,7 @@ const messages = defineMessages({
 								<UnlinkIcon class="size-5" />
 								{{
 									formatMessage(
-										showModpackVersionActions
-											? commonMessages.unlinkModpackButton
-											: messages.unlinkButton,
+										isLinkedModpack ? commonMessages.unlinkModpackButton : messages.unlinkButton,
 									)
 								}}
 							</button>
@@ -678,7 +702,7 @@ const messages = defineMessages({
 							formatMessage(messages.unlinkDescription, {
 								type: formatMessage(ctx.isServer ? messages.serverLabel : messages.instanceLabel),
 								projectType: formatMessage(
-									showModpackVersionActions ? messages.modpackLabel : messages.serverLabel,
+									isLinkedModpack ? messages.modpackLabel : messages.serverLabel,
 								),
 							})
 						}}
@@ -17,6 +17,7 @@ export interface InstallationSettingsContext {
 	isLinked: ComputedRef<boolean>
 	isBusy: Ref<boolean> | ComputedRef<boolean>
 	busyMessage?: Ref<string | null> | ComputedRef<string | null>
+	skipNonEssentialWarnings?: Ref<boolean> | ComputedRef<boolean>

 	modpack: Ref<InstallationModpackData | null> | ComputedRef<InstallationModpackData | null>

@@ -36,6 +37,7 @@ export interface InstallationSettingsContext {
 	save: (platform: string, gameVersion: string, loaderVersionId: string | null) => Promise<void>
 	repair: () => Promise<void>
 	reinstallModpack: () => Promise<void>
+	swapModpack?: () => Promise<void>
 	unlinkModpack: () => Promise<void>

 	getCachedModpackVersions: () => Labrinth.Versions.v2.Version[] | null
@@ -26,13 +26,15 @@ import {
 } from '#ui/utils/server-content-installing'
 import { versionChangesGameVersion } from '#ui/utils/version-compatibility'

+import type { BrowseInstallPlan } from '../../../shared/browse-tab/composables/install-logic'
 import {
 	flushStoredServerAddonInstallQueue,
 	getStoredServerAddonInstallQueue,
+	getTargetInstallPreferences,
 } from '../../../shared/browse-tab/composables/install-logic'
 import ConfirmModpackUpdateModal from '../../../shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue'
 import ConfirmUnlinkModal from '../../../shared/content-tab/components/modals/ConfirmUnlinkModal.vue'
-import ContentUpdaterModal from '../../../shared/content-tab/components/modals/ContentUpdaterModal.vue'
+import ContentUpdaterModal from '../../../shared/content-tab/components/modals/content-updater-modal/index.vue'
 import ModpackContentModal from '../../../shared/content-tab/components/modals/ModpackContentModal.vue'
 import ContentPageLayout from '../../../shared/content-tab/layout.vue'
 import type { ContentModpackData } from '../../../shared/content-tab/providers/content-manager'
@@ -359,6 +361,57 @@ function getAddonInstallKeys(addons: Archon.Content.v1.Addon[]) {
 	return keys
 }

+function getInstalledProjectIds() {
+	return new Set(
+		(contentQuery.data.value?.addons ?? [])
+			.map((addon) => addon.project_id)
+			.filter((projectId): projectId is string => !!projectId),
+	)
+}
+
+function toResolvePreferences(
+	preferences?: BrowseInstallPlan['preferences'],
+): Labrinth.Content.v3.ResolutionPreferences {
+	return {
+		game_versions: preferences?.gameVersions,
+		loaders: preferences?.loaders,
+	}
+}
+
+async function resolveStoredServerAddonPlans(plans: BrowseInstallPlan[]) {
+	const existingProjectIds = getInstalledProjectIds()
+	const resolvedAddons: Array<{ project_id: string; version_id: string }> = []
+
+	for (const plan of plans) {
+		const target = getTargetInstallPreferences(
+			{
+				gameVersion: server.value?.mc_version,
+				loader: server.value?.loader,
+			},
+			plan.contentType,
+		)
+		const resolved = await client.labrinth.content_v3.resolve({
+			project_id: plan.projectId,
+			version_id: plan.versionId,
+			content_type: plan.contentType as Labrinth.Content.v3.ContentType,
+			selected: toResolvePreferences(plan.preferences),
+			target: toResolvePreferences(target),
+			existing_project_ids: Array.from(existingProjectIds),
+		})
+
+		for (const item of [resolved.primary, ...resolved.dependencies]) {
+			if (existingProjectIds.has(item.project_id)) continue
+			existingProjectIds.add(item.project_id)
+			resolvedAddons.push({
+				project_id: item.project_id,
+				version_id: item.version_id,
+			})
+		}
+	}
+
+	return resolvedAddons
+}
+
 function addonMatchesPendingInstall(
 	addon: Archon.Content.v1.Addon,
 	pendingInstall: PendingServerContentInstall,
@@ -418,15 +471,12 @@ async function flushStoredServerInstalls() {
 		const result = await flushStoredServerAddonInstallQueue({
 			serverId,
 			worldId: wid,
-			install: (plans) =>
-				client.archon.content_v1.addAddons(
-					serverId,
-					wid,
-					plans.map((plan) => ({
-						project_id: plan.projectId,
-						version_id: plan.versionId,
-					})),
-				),
+			install: async (plans) => {
+				const addons = await resolveStoredServerAddonPlans(plans)
+				if (addons.length > 0) {
+					await client.archon.content_v1.addAddons(serverId, wid, addons)
+				}
+			},
 		})

 		if (!result.ok) {
@@ -572,24 +572,36 @@
  "content.selection-bar.bulk.deleting": {
    "defaultMessage": "Deleting {progress}/{total} {contentType}..."
  },
+  "content.selection-bar.bulk.deleting-count": {
+    "defaultMessage": "Deleting {count, number} {contentType}"
+  },
  "content.selection-bar.bulk.deleting-waiting": {
    "defaultMessage": "Deleting {contentType}..."
  },
  "content.selection-bar.bulk.disabling": {
    "defaultMessage": "Disabling {progress}/{total} {contentType}..."
  },
+  "content.selection-bar.bulk.disabling-count": {
+    "defaultMessage": "Disabling {count, number} {contentType}"
+  },
  "content.selection-bar.bulk.disabling-waiting": {
    "defaultMessage": "Disabling {contentType}..."
  },
  "content.selection-bar.bulk.enabling": {
    "defaultMessage": "Enabling {progress}/{total} {contentType}..."
  },
+  "content.selection-bar.bulk.enabling-count": {
+    "defaultMessage": "Enabling {count, number} {contentType}"
+  },
  "content.selection-bar.bulk.enabling-waiting": {
    "defaultMessage": "Enabling {contentType}..."
  },
  "content.selection-bar.bulk.updating": {
    "defaultMessage": "Updating {progress}/{total} {contentType}..."
  },
+  "content.selection-bar.bulk.updating-count": {
+    "defaultMessage": "Updating {count, number} {contentType}"
+  },
  "content.selection-bar.bulk.updating-waiting": {
    "defaultMessage": "Updating {contentType}..."
  },
@@ -22,6 +22,8 @@ export interface PickModpackFileOptions {
 export interface FilePickerProvider {
 	/** Pick an image file (for icons) */
 	pickImage: () => Promise<PickedFile | null>
+	/** Pick one or more generic files */
+	pickFiles?: (options?: { multiple?: boolean }) => Promise<PickedFile[]>
 	/** Pick a .mrpack modpack file */
 	pickModpackFile: (options?: PickModpackFileOptions) => Promise<PickedModpackFile | null>
 }
@@ -10,6 +10,8 @@ export interface PopupNotificationButton {
 	keepOpen?: boolean
 }

+export type PopupNotificationProgressType = 'percentage' | 'bytes' | 'count'
+
 export interface PopupNotificationProgressItem {
 	id: string
 	title: string
@@ -17,6 +19,13 @@ export interface PopupNotificationProgressItem {
 	iconUrl?: string | null
 	progress: number
 	waiting: boolean
+	showProgress?: boolean
+	wrapText?: boolean
+	progressType?: PopupNotificationProgressType
+	progressCurrent?: number
+	progressTotal?: number
+	onDismiss?: () => void | Promise<void>
+	buttons?: PopupNotificationButton[]
 }

 export type PopupNotificationToastType =
@@ -35,6 +44,10 @@ export interface PopupNotificationToast {
 	statusText?: string
 	progress?: number
 	waiting?: boolean
+	showProgress?: boolean
+	progressType?: PopupNotificationProgressType
+	progressCurrent?: number
+	progressTotal?: number
 	onAccept?: () => void | Promise<void>
 	onDecline?: () => void | Promise<void>
 	onDismiss?: () => void | Promise<void>
@@ -4,7 +4,7 @@ import { fn } from 'storybook/test'
 import { ref } from 'vue'

 import ButtonStyled from '../../components/base/ButtonStyled.vue'
-import ContentUpdaterModal from '../../layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue'
+import ContentUpdaterModal from '../../layouts/shared/content-tab/components/modals/content-updater-modal/index.vue'

 // Real version data from Modrinth API - Sodium (mod)
 const sodiumVersions: Labrinth.Versions.v2.Version[] = [
@@ -72,6 +72,7 @@ export const FigmaExamples: Story = {
 					:entity-icon-url="instanceIconUrl"
 					status-text="Downloading Minecraft..."
 					:progress="0.5"
+					progress-type="percentage"
 					@dismiss="noop"
 				/>
 				<NotificationToast
@@ -157,3 +158,50 @@ export const WaitingDownload: Story = {
 		`,
 	}),
 }
+
+export const DownloadProgressLabels: Story = {
+	render: () => ({
+		components: { NotificationToast },
+		setup() {
+			return {
+				instanceIconUrl: MinecraftServerIcon,
+				noop,
+			}
+		},
+		template: /* html */ `
+			<div class="flex flex-col gap-4">
+				<NotificationToast
+					type="instance-download"
+					entity-name="Cobblemon Official Modpack"
+					:entity-icon-url="instanceIconUrl"
+					status-text="Downloading pack file"
+					progress-type="bytes"
+					:progress-current="128 * 1024 * 1024"
+					:progress-total="512 * 1024 * 1024"
+					:progress="0.25"
+					@dismiss="noop"
+				/>
+				<NotificationToast
+					type="instance-download"
+					entity-name="Cobblemon Official Modpack"
+					:entity-icon-url="instanceIconUrl"
+					status-text="Downloading content"
+					progress-type="count"
+					:progress-current="3"
+					:progress-total="193"
+					:progress="3 / 193"
+					@dismiss="noop"
+				/>
+				<NotificationToast
+					type="instance-download"
+					entity-name="New Creation"
+					:entity-icon-url="instanceIconUrl"
+					status-text="Downloading Minecraft"
+					progress-type="percentage"
+					:progress="0.63"
+					@dismiss="noop"
+				/>
+			</div>
+		`,
+	}),
+}