@@ -146,6 +146,7 @@ p256 = "0.13.2"
 parking_lot = "0.12.5"
 paste = "1.0.15"
 path-util = { path = "packages/path-util" }
+pathdiff = "0.2.3"
 phf = { version = "0.13.1", features = ["macros"] }
 png = "0.18.0"
 postcard = { version = "1.1.3", default-features = false, features = ["alloc"] }
@@ -160,6 +161,7 @@ rand = "=0.8.5"  # Locked on 0.8 until argon2 and p256 update to 0.9
 rand_chacha = "=0.3.1"  # Locked on 0.3 until we can update rand to 0.9
 rdkafka = { version = "0.36.2", features = ["cmake-build"] }
 redis = "1.4.1"
+reflink-copy = "0.1.30"
 regex = "1.12.2"
 reqwest = { version = "0.12.24", default-features = false }
 rgb = "0.8.52"
@@ -173,6 +175,7 @@ rust-s3 = { version = "0.37.0", default-features = false, features = [
 rustls = "0.23.32"
 rustrict = { version = "0.7.39", default-features = false, features = ["censor"] }
 rusty-money = "0.4.1"
+same-file = "1.0.6"
 scalar_api_reference = { version = "0.2.2", default-features = false }
 secrecy = "0.10.3"
 sentry = { version = "0.45.0", default-features = false, features = [
 
@@ -37,6 +37,7 @@
 		"@floating-ui/vue": "^2.0.1",
 		"fuse.js": "^6.6.2",
 		"intl-messageformat": "^10.7.7",
+		"motion-v": "2.2.1",
 		"ofetch": "^1.3.4",
 		"overlayscrollbars": "^2.15.1",
 		"posthog-js": "^1.158.2",
 
@@ -1,5 +1,6 @@
 <template>
 	<div class="flex gap-2 items-center">
+		<DownloadManager />
 		<div v-if="downloadState.total > 0 || hasActiveLoadingBars" class="relative">
 			<IconButton
 				v-tooltip="downloadToggleLabel"
@@ -17,7 +18,7 @@
 		</div>
 		<AppUpdateButton />
 		<div
-			class="flex border-solid border-surface-5 text-sm items-center gap-2 py-1.5 px-3 rounded-xl border"
+			class="flex border-solid border-surface-5 text-sm font-medium items-center gap-2 py-1.5 px-3 rounded-xl border"
 		>
 			<template v-if="selectedProcess">
 				<OnlineIndicatorIcon />
@@ -130,10 +131,10 @@ import {
 	TerminalSquareIcon,
 	UnplugIcon,
 } from '@modrinth/assets'
-import { IconButton } from '@modrinth/ui'
 import {
 	defineMessages,
 	FloatingMenu,
+	IconButton,
 	injectNotificationManager,
 	injectPopupNotificationManager,
 	type PopupNotificationProgressItem,
@@ -145,10 +146,9 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import AppUpdateButton from '@/components/ui/app-update-button/index.vue'
-import { useInstallJobNotifications } from '@/composables/browse/install-job-notifications'
+import DownloadManager from '@/components/ui/download-manager/index.vue'
 import { useAppEvent } from '@/composables/use-app-event'
 import { trackEvent } from '@/helpers/analytics'
-import { toError } from '@/helpers/errors'
 import { get_many as getInstances } from '@/helpers/instance'
 import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
 import type { LoadingBar } from '@/helpers/state'
@@ -323,7 +323,6 @@ function goToTerminal(instanceId?: string) {
 const currentLoadingBars = ref<LoadingBar[]>([])
 const currentLoadingBarIconUrls = ref<Record<string, string | null>>({})
 const notificationId = ref<string | number | null>(null)
-const terminalNotificationIds = new Map<string, string | number>()
 const dismissed = ref(false)
 
 function getLoadingBarKey(loadingBar: LoadingBar): string {
@@ -371,79 +370,28 @@ function removeNotification(): void {
 	notificationId.value = null
 }
 
-function syncTerminalNotifications(): void {
-	const terminalNotifications = installJobNotifications.terminalNotifications.value
-	const currentJobIds = new Set(terminalNotifications.map((notification) => notification.id))
-
-	for (const terminal of terminalNotifications) {
-		const popupId = terminalNotificationIds.get(terminal.id)
-		let notification = popupId
-			? popupNotificationManager
-					.getNotifications()
-					.find(
-						(candidate): candidate is PopupNotificationStandard =>
-							candidate.id === popupId && candidate.contentType === 'standard',
-					)
-			: undefined
-
-		if (!notification) {
-			notification = popupNotificationManager.addPopupNotification({
-				contentType: 'standard',
-				title: terminal.title,
-				text: terminal.text,
-				type: terminal.type,
-				buttons: terminal.buttons,
-				onDismiss: terminal.onDismiss,
-				autoCloseMs: null,
-			})
-			terminalNotificationIds.set(terminal.id, notification.id)
-			continue
-		}
-
-		notification.title = terminal.title
-		notification.text = terminal.text
-		notification.type = terminal.type
-		notification.buttons = terminal.buttons
-		notification.onDismiss = terminal.onDismiss
-	}
-
-	for (const [jobId, popupId] of terminalNotificationIds) {
-		if (!currentJobIds.has(jobId)) {
-			popupNotificationManager.removeNotification(popupId)
-			terminalNotificationIds.delete(jobId)
-		}
-	}
-}
-
 function buildDownloadItems(): PopupNotificationProgressItem[] {
-	return [
-		...installJobNotifications.progressItems.value,
-		...currentLoadingBars.value.map<PopupNotificationProgressItem>((bar) => ({
-			id: getLoadingBarKey(bar),
-			title: bar.title ?? '',
-			text: getLoadingText(bar),
-			iconUrl: currentLoadingBarIconUrls.value[getLoadingBarKey(bar)] ?? null,
-			progress: getLoadingProgress(bar),
-			waiting: !bar.total || bar.total <= 0,
-			progressType: bar.bar_type?.type === 'pack_import' ? 'bytes' : 'percentage',
-			progressCurrent: bar.current,
-			progressTotal: bar.total,
-		})),
-	]
+	return currentLoadingBars.value.map((bar) => ({
+		id: getLoadingBarKey(bar),
+		title: bar.title ?? '',
+		text: getLoadingText(bar),
+		iconUrl: currentLoadingBarIconUrls.value[getLoadingBarKey(bar)] ?? null,
+		progress: getLoadingProgress(bar),
+		waiting: !bar.total || bar.total <= 0,
+		progressType: bar.bar_type?.type === 'pack_import' ? 'bytes' : 'percentage',
+		progressCurrent: bar.current,
+		progressTotal: bar.total,
+	}))
 }
 
-const hasActiveLoadingBars = computed(
-	() => currentLoadingBars.value.length > 0 || installJobNotifications.active.value,
-)
+const hasActiveLoadingBars = computed(() => currentLoadingBars.value.length > 0)
 
 function updateNotification(resummon = false): void {
-	syncTerminalNotifications()
-
 	if (resummon) {
 		dismissed.value = false
 	}
 
-	if (currentLoadingBars.value.length === 0 && !installJobNotifications.active.value) {
+	if (currentLoadingBars.value.length === 0) {
 		removeNotification()
 		dismissed.value = false
 		return
@@ -462,19 +410,15 @@ function updateNotification(resummon = false): void {
 	const progressItems = buildDownloadItems()
 
 	if (notif) {
-		notif.title = installJobNotifications.active.value
-			? installJobNotifications.title.value
-			: formatMessage(messages.downloads)
+		notif.title = formatMessage(messages.downloads)
 		notif.text = undefined
 		notif.progressItems = progressItems
 		notif.progress = undefined
 		notif.waiting = undefined
 	} else {
 		const notification = popupNotificationManager.addPopupNotification({
 			contentType: 'standard',
-			title: installJobNotifications.active.value
-				? installJobNotifications.title.value
-				: formatMessage(messages.downloads),
+			title: formatMessage(messages.downloads),
 			type: 'download',
 			autoCloseMs: null,
 			progressItems,
@@ -554,12 +498,6 @@ async function refreshLoadingBars() {
 	updateNotification()
 }
 
-const installJobNotifications = await useInstallJobNotifications({
-	router,
-	handleError: (error) => handleError(toError(error)),
-	onChange: updateNotification,
-})
-
 await refreshLoadingBars()
 
 useAppEvent('loading', async () => {
@@ -576,11 +514,8 @@ function selectProcess(process: RunningProcess) {
 
 onBeforeUnmount(() => {
 	removeNotification()
-	terminalNotificationIds.forEach((id) => popupNotificationManager.removeNotification(id))
-	terminalNotificationIds.clear()
 	dismissed.value = false
 	window.removeEventListener('offline', handleOffline)
 	window.removeEventListener('online', handleOnline)
-	installJobNotifications.dispose()
 })
 </script>
@@ -36,6 +36,7 @@ const runningInstances = ref([])
 const { formatMessage } = useVIntl()
 
 const container = ref()
+const footer = ref()
 let resizeObserver
 const maxAuto = ref(0)
 const allInstances = computed(() =>
@@ -74,9 +75,12 @@ const updateMaxAuto = () => {
 	const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize)
 	const dividerHeight = rem + 1
 	const gap = rem / 4
+	const footerHeight = (footer.value?.clientHeight ?? 0) + gap
 	maxAuto.value = Math.max(
 		0,
-		Math.floor((container.value.clientHeight - 2 * dividerHeight - gap) / (3 * rem + gap)),
+		Math.floor(
+			(container.value.clientHeight - footerHeight - 2 * dividerHeight - gap) / (3 * rem + gap),
+		),
 	)
 }
 
@@ -176,6 +180,7 @@ useAppEvent('process', checkProcesses)
 onMounted(() => {
 	resizeObserver = new ResizeObserver(updateMaxAuto)
 	resizeObserver.observe(container.value)
+	resizeObserver.observe(footer.value)
 	updateMaxAuto()
 	checkProcesses()
 })
@@ -349,7 +354,9 @@ function openContextMenu(event, instance) {
 				"
 			></div>
 		</div>
-		<slot />
+		<div ref="footer" class="flex shrink-0 flex-col items-center">
+			<slot />
+		</div>
 	</div>
 </template>