From d4a6034e2b9f346170e020d72cd7015a2eaf24a0 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Thu, 30 Oct 2025 15:19:33 +0000
Subject: [PATCH 1/3] fix: firefox backup download issues

---
 .../src/components/ui/servers/BackupItem.vue  | 74 ++++++++++++++---
 .../composables/servers/modules/backups.ts    | 83 +++++++++++++++++++
 .../src/pages/servers/manage/[id]/backups.vue |  1 +
 3 files changed, 147 insertions(+), 11 deletions(-)

diff --git a/apps/frontend/src/components/ui/servers/BackupItem.vue b/apps/frontend/src/components/ui/servers/BackupItem.vue
index 6e910066ed..c4c921594c 100644
--- a/apps/frontend/src/components/ui/servers/BackupItem.vue
+++ b/apps/frontend/src/components/ui/servers/BackupItem.vue
@@ -13,14 +13,23 @@ import {
 	TrashIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, OverflowMenu, ProgressBar } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	commonMessages,
+	injectNotificationManager,
+	OverflowMenu,
+	ProgressBar,
+} from '@modrinth/ui'
 import type { Backup } from '@modrinth/utils'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const flags = useFeatureFlags()
 const { formatMessage } = useVIntl()
+const { addNotification } = injectNotificationManager()
 
 const emit = defineEmits<{
 	(e: 'download' | 'rename' | 'restore' | 'lock' | 'retry'): void
@@ -33,11 +42,13 @@ const props = withDefaults(
 		preview?: boolean
 		kyrosUrl?: string
 		jwt?: string
+		server?: ModrinthServer
 	}>(),
 	{
 		preview: false,
 		kyrosUrl: undefined,
 		jwt: undefined,
+		server: undefined,
 	},
 )
 
@@ -124,7 +135,44 @@ const messages = defineMessages({
 		id: 'servers.backups.item.retry',
 		defaultMessage: 'Retry',
 	},
+	downloadingBackup: {
+		id: 'servers.backups.item.downloading-backup',
+		defaultMessage: 'Downloading backup...',
+	},
 })
+
+const downloadingState = ref<{ progress: number; state: string } | undefined>(undefined)
+
+const downloading = computed(() => downloadingState.value)
+
+const handleDownload = async () => {
+	if (!props.server?.backups || downloading.value) {
+		return
+	}
+
+	downloadingState.value = { progress: 0, state: 'ongoing' }
+
+	try {
+		const download = props.server.backups.downloadBackup(props.backup.id, props.backup.name)
+
+		download.onProgress((p) => {
+			downloadingState.value = { progress: p.progress, state: 'ongoing' }
+		})
+
+		await download.promise
+
+		emit('download')
+	} catch (error) {
+		console.error('Failed to download backup:', error)
+		addNotification({
+			type: 'error',
+			title: 'Download failed',
+			text: error instanceof Error ? error.message : 'Failed to download backup',
+		})
+	} finally {
+		downloadingState.value = undefined
+	}
+}
 </script>
 <template>
 	<div
@@ -192,6 +240,15 @@ const messages = defineMessages({
 				class="max-w-full"
 			/>
 		</div>
+		<div v-else-if="downloading" class="col-span-2 flex flex-col gap-3 text-blue">
+			{{ formatMessage(messages.downloadingBackup) }}
+			<ProgressBar
+				:progress="downloading.progress >= 0 ? downloading.progress : 0"
+				color="blue"
+				:waiting="downloading.progress <= 0"
+				class="max-w-full"
+			/>
+		</div>
 		<template v-else>
 			<div class="col-span-2">
 				{{ dayjs(backup.created_at).format('MMMM D, YYYY [at] h:mm A') }}
@@ -224,16 +281,11 @@ const messages = defineMessages({
 			</ButtonStyled>
 			<template v-else>
 				<ButtonStyled>
-					<a
-						:class="{
-							disabled: !kyrosUrl || !jwt,
-						}"
-						:href="`https://${kyrosUrl}/modrinth/v0/backups/${backup.id}/download?auth=${jwt}`"
-						@click="() => emit('download')"
-					>
-						<DownloadIcon />
+					<button :disabled="!server?.backups || !!downloading" @click="handleDownload">
+						<SpinnerIcon v-if="downloading" class="animate-spin" />
+						<DownloadIcon v-else />
 						{{ formatMessage(commonMessages.downloadButton) }}
-					</a>
+					</button>
 				</ButtonStyled>
 				<ButtonStyled circular type="transparent">
 					<OverflowMenu
diff --git a/apps/frontend/src/composables/servers/modules/backups.ts b/apps/frontend/src/composables/servers/modules/backups.ts
index 921b9a350e..ac01150814 100644
--- a/apps/frontend/src/composables/servers/modules/backups.ts
+++ b/apps/frontend/src/composables/servers/modules/backups.ts
@@ -106,4 +106,87 @@ export class BackupsModule extends ServerModule {
 	async getAutoBackup(): Promise<AutoBackupSettings> {
 		return await useServersFetch(`servers/${this.serverId}/autobackup`)
 	}
+
+	downloadBackup(
+		backupId: string,
+		backupName: string,
+	): {
+		promise: Promise<void>
+		onProgress: (cb: (p: { loaded: number; total: number; progress: number }) => void) => void
+		cancel: () => void
+	} {
+		const progressSubject = new EventTarget()
+		const abortController = new AbortController()
+
+		const downloadPromise = new Promise<void>((resolve, reject) => {
+			const auth = this.server.general?.node
+			if (!auth?.instance || !auth?.token) {
+				reject(new Error('Missing authentication credentials'))
+				return
+			}
+
+			const xhr = new XMLHttpRequest()
+
+			xhr.addEventListener('progress', (e) => {
+				if (e.lengthComputable) {
+					const progress = e.loaded / e.total
+					progressSubject.dispatchEvent(
+						new CustomEvent('progress', {
+							detail: { loaded: e.loaded, total: e.total, progress },
+						}),
+					)
+				} else {
+					// progress = -1 to indicate indeterminate size
+					progressSubject.dispatchEvent(
+						new CustomEvent('progress', {
+							detail: { loaded: e.loaded, total: 0, progress: -1 },
+						}),
+					)
+				}
+			})
+
+			xhr.onload = () => {
+				if (xhr.status >= 200 && xhr.status < 300) {
+					try {
+						const blob = xhr.response
+						const url = window.URL.createObjectURL(blob)
+						const a = document.createElement('a')
+						a.href = url
+						a.download = `${backupName}.zip`
+						document.body.appendChild(a)
+						a.click()
+						document.body.removeChild(a)
+						window.URL.revokeObjectURL(url)
+						resolve()
+					} catch (error) {
+						reject(error)
+					}
+				} else {
+					reject(new Error(`Download failed with status ${xhr.status}`))
+				}
+			}
+
+			xhr.onerror = () => reject(new Error('Download failed'))
+			xhr.onabort = () => reject(new Error('Download cancelled'))
+
+			xhr.open(
+				'GET',
+				`https://${auth.instance}/modrinth/v0/backups/${backupId}/download?auth=${auth.token}`,
+			)
+			xhr.responseType = 'blob'
+			xhr.send()
+
+			abortController.signal.addEventListener('abort', () => xhr.abort())
+		})
+
+		return {
+			promise: downloadPromise,
+			onProgress: (cb: (p: { loaded: number; total: number; progress: number }) => void) => {
+				progressSubject.addEventListener('progress', ((e: CustomEvent) => {
+					cb(e.detail)
+				}) as EventListener)
+			},
+			cancel: () => abortController.abort(),
+		}
+	}
 }
diff --git a/apps/frontend/src/pages/servers/manage/[id]/backups.vue b/apps/frontend/src/pages/servers/manage/[id]/backups.vue
index 091f036be0..56d859466a 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/backups.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/backups.vue
@@ -105,6 +105,7 @@
 				v-for="backup in backups"
 				:key="`backup-${backup.id}`"
 				:backup="backup"
+				:server="props.server"
 				:kyros-url="props.server.general?.node.instance"
 				:jwt="props.server.general?.node.token"
 				@download="() => triggerDownloadAnimation()"

From 404930037f24a3f262b209683c8c1fe0664d98ec Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Thu, 30 Oct 2025 15:22:23 +0000
Subject: [PATCH 2/3] fix: lint

---
 .../src/components/ui/servers/BackupItem.vue      | 15 ++++++++++++---
 apps/frontend/src/locales/en-US/index.json        |  6 ++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/ui/servers/BackupItem.vue b/apps/frontend/src/components/ui/servers/BackupItem.vue
index c4c921594c..b189b6dbf9 100644
--- a/apps/frontend/src/components/ui/servers/BackupItem.vue
+++ b/apps/frontend/src/components/ui/servers/BackupItem.vue
@@ -139,6 +139,10 @@ const messages = defineMessages({
 		id: 'servers.backups.item.downloading-backup',
 		defaultMessage: 'Downloading backup...',
 	},
+	downloading: {
+		id: 'servers.backups.item.downloading',
+		defaultMessage: 'Downloading',
+	},
 })
 
 const downloadingState = ref<{ progress: number; state: string } | undefined>(undefined)
@@ -282,9 +286,14 @@ const handleDownload = async () => {
 			<template v-else>
 				<ButtonStyled>
 					<button :disabled="!server?.backups || !!downloading" @click="handleDownload">
-						<SpinnerIcon v-if="downloading" class="animate-spin" />
-						<DownloadIcon v-else />
-						{{ formatMessage(commonMessages.downloadButton) }}
+						<template v-if="downloading">
+							<SpinnerIcon class="animate-spin" />
+							{{ formatMessage(messages.downloading) }}
+						</template>
+						<template v-else>
+							<DownloadIcon />
+							{{ formatMessage(commonMessages.downloadButton) }}
+						</template>
 					</button>
 				</ButtonStyled>
 				<ButtonStyled circular type="transparent">
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 087870e3cc..c2e4902d04 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1934,6 +1934,12 @@
   "servers.backups.item.creating-backup": {
     "message": "Creating backup..."
   },
+  "servers.backups.item.downloading": {
+    "message": "Downloading"
+  },
+  "servers.backups.item.downloading-backup": {
+    "message": "Downloading backup..."
+  },
   "servers.backups.item.failed-to-create-backup": {
     "message": "Failed to create backup"
   },

From 32da1fe596f123586f81b97e19d2137cc1971d33 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Thu, 30 Oct 2025 19:28:51 +0000
Subject: [PATCH 3/3] fix: hide download button when downloading & disable
 overflow menu options

---
 .../src/components/ui/servers/BackupItem.vue  | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/apps/frontend/src/components/ui/servers/BackupItem.vue b/apps/frontend/src/components/ui/servers/BackupItem.vue
index b189b6dbf9..b8e170ca8f 100644
--- a/apps/frontend/src/components/ui/servers/BackupItem.vue
+++ b/apps/frontend/src/components/ui/servers/BackupItem.vue
@@ -284,34 +284,32 @@ const handleDownload = async () => {
 				</button>
 			</ButtonStyled>
 			<template v-else>
-				<ButtonStyled>
-					<button :disabled="!server?.backups || !!downloading" @click="handleDownload">
-						<template v-if="downloading">
-							<SpinnerIcon class="animate-spin" />
-							{{ formatMessage(messages.downloading) }}
-						</template>
-						<template v-else>
-							<DownloadIcon />
-							{{ formatMessage(commonMessages.downloadButton) }}
-						</template>
+				<ButtonStyled v-show="!downloading">
+					<button :disabled="!server?.backups" @click="handleDownload">
+						<DownloadIcon />
+						{{ formatMessage(commonMessages.downloadButton) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled circular type="transparent">
 					<OverflowMenu
 						:options="[
-							{ id: 'rename', action: () => emit('rename') },
+							{
+								id: 'rename',
+								action: () => emit('rename'),
+								disabled: !!restoring || !!downloading,
+							},
 							{
 								id: 'restore',
 								action: () => emit('restore'),
-								disabled: !!restoring,
+								disabled: !!restoring || !!downloading,
 							},
-							{ id: 'lock', action: () => emit('lock') },
+							{ id: 'lock', action: () => emit('lock'), disabled: !!restoring || !!downloading },
 							{ divider: true },
 							{
 								id: 'delete',
 								color: 'red',
 								action: () => emit('delete'),
-								disabled: !!restoring,
+								disabled: !!restoring || !!downloading,
 							},
 						]"
 					>