feat: backups page cleanup before worlds (#5844)

* feat: card alignment + fix modals

* feat: change admon title in restore alert modal

* fix: lint

* feat: backups queue api into api-client

* feat: impl backup queue api endpoints into frontend

* feat: ack fix

* feat: bulk actions

* feat: bulk delete impl

* fix: lint

* fix: align error states

* fix: transition group

* feat: ready for qa

* fix: lint

* feat: qa

* feat: stacked admonitions component

* fix: issues with stacking

* feat: hook up admonition stacking + fix app csp for staging kyros nodes

* fix: logs.vue

* qa: close stack on admonitions click

* fix: all problems with stacked admonitions

* qa: admonition cleanup and copy overhaul draft

* fix: qa issues padding

* fix: padding bug

* feat: qa

* fix: intercom in app csp bug

* fix: positioning intercom

* feat: loading overlay on top of console + admon consistency changes

* feat: scroll indicator fade in backup delete modal + admon timestamp fix

* feat: move action bar behind modal

* fix: lint + i18n

* fix: server ping spam on filter (cache but clear on unmount)

* fix: 1 admon fade in flicker issue

* chore: temp staging undo

* qa: changes

* fix: lint

* chore: revert staging to use staging

* fix: scoping

packages/ui/src/layouts/wrapped/hosting/manage/backups-selection.ts

@@ -0,0 +1,74 @@
+import type { Archon } from '@modrinth/api-client'
+import type { ComputedRef, Ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+
+type BackupQueueBackup = Archon.BackupsQueue.v1.BackupQueueBackup
+
+export function useBackupsSelection(
+	visibleBackups: Ref<BackupQueueBackup[]>,
+	displayOrderedBackups: ComputedRef<BackupQueueBackup[]>,
+) {
+	const selectedIds = ref<Set<string>>(new Set())
+
+	watch(visibleBackups, () => {
+		const ids = new Set(visibleBackups.value.map((b) => b.id))
+		const next = new Set<string>()
+		for (const id of selectedIds.value) {
+			if (ids.has(id)) next.add(id)
+		}
+		if (next.size !== selectedIds.value.size) {
+			selectedIds.value = next
+		}
+	})
+
+	function toggleSelection(id: string) {
+		const next = new Set(selectedIds.value)
+		if (next.has(id)) next.delete(id)
+		else next.add(id)
+		selectedIds.value = next
+	}
+
+	function selectAll() {
+		selectedIds.value = new Set(visibleBackups.value.map((b) => b.id))
+	}
+
+	function deselectAll() {
+		selectedIds.value = new Set()
+	}
+
+	function toggleSelectAll() {
+		if (allSelected.value) deselectAll()
+		else selectAll()
+	}
+
+	const allSelected = computed(
+		() =>
+			visibleBackups.value.length > 0 &&
+			visibleBackups.value.every((b) => selectedIds.value.has(b.id)),
+	)
+
+	const someSelected = computed(() => {
+		const vis = visibleBackups.value
+		if (vis.length === 0) return false
+		let n = 0
+		for (const b of vis) {
+			if (selectedIds.value.has(b.id)) n++
+		}
+		return n > 0 && n < vis.length
+	})
+
+	const selectedBackups = computed(() =>
+		displayOrderedBackups.value.filter((b) => selectedIds.value.has(b.id)),
+	)
+
+	return {
+		selectedIds,
+		toggleSelection,
+		selectAll,
+		deselectAll,
+		toggleSelectAll,
+		allSelected,
+		someSelected,
+		selectedBackups,
+	}
+}

packages/ui/src/layouts/wrapped/hosting/manage/backups.vue

@@ -28,13 +28,33 @@
 
 		<div v-else key="content" class="contents">
 			<ReadyTransition :pending="backupsReadyPending">
-				<BackupCreateModal ref="createBackupModal" :backups="backupsData ?? []" />
-				<BackupRenameModal ref="renameBackupModal" :backups="backupsData ?? []" />
+				<BackupCreateModal ref="createBackupModal" :backups="completedBackups" />
+				<BackupRenameModal ref="renameBackupModal" :backups="completedBackups" />
 				<BackupRestoreModal ref="restoreBackupModal" />
-				<BackupDeleteModal ref="deleteBackupModal" @delete="deleteBackup" />
+				<BackupDeleteModal
+					ref="deleteBackupModal"
+					@delete="deleteBackup"
+					@bulk-delete="bulkDelete"
+				/>
 
-				<div v-if="backupsData?.length" class="mb-2 flex items-center align-middle justify-between">
-					<span class="text-2xl font-semibold text-contrast">Backups</span>
+				<div
+					v-if="completedBackups.length"
+					class="mb-2 flex flex-wrap items-center justify-between gap-4"
+				>
+					<div class="flex min-w-0 flex-wrap items-center gap-4">
+						<Checkbox
+							:model-value="allSelected"
+							:indeterminate="someSelected"
+							:label="formatMessage(messages.selectAll)"
+							class="shrink-0"
+							label-class="text-secondary font-semibold"
+							@update:model-value="toggleSelectAll"
+						/>
+						<div class="hidden h-6 w-px bg-surface-5 sm:block" />
+						<FilterPills v-model="selectedFilters" :options="filterPillOptions">
+							<template #all>{{ formatMessage(commonMessages.allProjectType) }}</template>
+						</FilterPills>
+					</div>
 					<ButtonStyled color="brand">
 						<button
 							v-tooltip="backupCreationDisabled"
@@ -42,80 +62,157 @@
 							@click="showCreateModel"
 						>
 							<PlusIcon class="size-5" />
-							Create backup
+							{{ formatMessage(messages.createBackup) }}
 						</button>
 					</ButtonStyled>
 				</div>
 
-				<template v-if="backupsData">
-					<div class="flex w-full flex-col gap-1.5">
-						<Transition name="fade" mode="out-in">
-							<div
-								v-if="groupedBackups.length === 0"
-								key="empty"
-								class="mt-6 flex flex-col items-center justify-center gap-2 text-center text-secondary"
-							>
-								<EmptyState
-									type="empty-inbox"
-									heading="No backups yet"
-									description="Create your first backup"
-								>
-									<template #actions>
-										<ButtonStyled color="brand">
-											<button
-												v-tooltip="backupCreationDisabled"
-												:disabled="!!backupCreationDisabled"
-												class="w-min mx-auto"
-												@click="showCreateModel"
-											>
-												<PlusIcon class="size-5" />
-												Create backup
-											</button>
-										</ButtonStyled>
-									</template>
-								</EmptyState>
-							</div>
-
-							<div v-else key="list" class="flex flex-col gap-1.5">
-								<template v-for="group in groupedBackups" :key="group.label">
-									<div class="flex items-center gap-2">
-										<component :is="group.icon" v-if="group.icon" class="size-6 text-secondary" />
-										<span class="text-lg font-semibold text-secondary">{{ group.label }}</span>
-									</div>
-
-									<div class="flex gap-2">
-										<div class="flex w-5 justify-center">
-											<div class="h-full w-px bg-surface-5" />
-										</div>
-
-										<TransitionGroup name="list" tag="div" class="flex flex-1 flex-col gap-3 py-3">
-											<BackupItem
-												v-for="backup in group.backups"
-												:key="`backup-${backup.id}`"
-												:backup="backup"
-												:restore-disabled="backupRestoreDisabled"
-												:kyros-url="server.node?.instance"
-												:jwt="server.node?.token"
-												:show-copy-id-action="showCopyIdAction"
-												:show-debug-info="showDebugInfo"
-												@download="() => triggerDownloadAnimation()"
-												@rename="() => renameBackupModal?.show(backup)"
-												@restore="() => restoreBackupModal?.show(backup)"
-												@delete="
-													(skipConfirmation?: boolean) =>
-														skipConfirmation
-															? deleteBackup(backup)
-															: deleteBackupModal?.show(backup)
-												"
-												@retry="() => retryBackup(backup.id)"
-											/>
-										</TransitionGroup>
-									</div>
-								</template>
-							</div>
-						</Transition>
+				<div class="flex w-full flex-col gap-1.5">
+					<div
+						v-if="groupedBackups.length === 0"
+						class="mt-6 flex flex-col items-center justify-center gap-2 text-center text-secondary"
+					>
+						<EmptyState
+							v-if="completedBackups.length === 0"
+							type="empty-inbox"
+							:heading="formatMessage(messages.emptyHeading)"
+							:description="formatMessage(messages.emptyDescription)"
+						>
+							<template #actions>
+								<ButtonStyled color="brand">
+									<button
+										v-tooltip="backupCreationDisabled"
+										:disabled="!!backupCreationDisabled"
+										class="mx-auto w-min"
+										@click="showCreateModel"
+									>
+										<PlusIcon class="size-5" />
+										{{ formatMessage(messages.createBackup) }}
+									</button>
+								</ButtonStyled>
+							</template>
+						</EmptyState>
+						<EmptyState
+							v-else
+							type="empty-inbox"
+							:heading="formatMessage(messages.filteredEmptyHeading)"
+							:description="formatMessage(messages.filteredEmptyDescription)"
+						>
+							<template #actions>
+								<ButtonStyled type="outlined">
+									<button class="!border !border-surface-4" @click="clearBackupFilters">
+										{{ formatMessage(messages.clearFilters) }}
+									</button>
+								</ButtonStyled>
+							</template>
+						</EmptyState>
 					</div>
-				</template>
+
+					<div v-else class="flex flex-col gap-3">
+						<template v-for="group in groupedBackups" :key="group.label">
+							<div class="flex items-center gap-2">
+								<div class="flex w-5 shrink-0 items-center justify-center">
+									<component :is="group.icon" v-if="group.icon" class="size-5" />
+								</div>
+								<span class="text-lg font-semibold leading-5 text-contrast">{{ group.label }}</span>
+							</div>
+
+							<TransitionGroup name="list" tag="div" class="flex flex-col">
+								<div
+									v-for="(backup, backupIndex) in group.backups"
+									:key="`backup-${backup.id}`"
+									class="flex gap-2"
+								>
+									<div class="flex w-5 flex-col items-center">
+										<div
+											class="w-px flex-1 bg-surface-5"
+											:class="{ '-mt-1.5': backupIndex === 0 }"
+										/>
+										<Checkbox
+											:model-value="selectedIds.has(backup.id)"
+											:description="formatMessage(messages.selectBackupAria, { name: backup.name })"
+											class="shrink-0"
+											@update:model-value="toggleSelection(backup.id)"
+										/>
+										<div class="w-px flex-1 bg-surface-5" />
+									</div>
+									<BackupItem
+										class="my-1.5 min-w-0 flex-1"
+										:backup="backup"
+										:selected="selectedIds.has(backup.id)"
+										:restore-disabled="backupRestoreDisabled"
+										:kyros-url="server.node?.instance"
+										:jwt="server.node?.token"
+										:show-copy-id-action="showCopyIdAction"
+										:show-debug-info="showDebugInfo"
+										@download="() => triggerDownloadAnimation()"
+										@rename="() => renameBackupModal?.show(backup)"
+										@restore="() => restoreBackupModal?.show(backup)"
+										@delete="
+											(skipConfirmation?: boolean) =>
+												skipConfirmation ? deleteBackup(backup) : deleteBackupModal?.show(backup)
+										"
+									/>
+								</div>
+							</TransitionGroup>
+						</template>
+					</div>
+				</div>
+
+				<FloatingActionBar
+					:shown="selectedIds.size > 0 || isBulkOperating"
+					:aria-label="
+						formatMessage(messages.bulkBarAriaLabel, {
+							count: isBulkOperating ? bulkTotal : selectedIds.size,
+						})
+					"
+				>
+					<div class="flex items-center gap-0.5">
+						<span class="px-4 py-2.5 text-base font-semibold tabular-nums text-contrast">
+							{{
+								formatMessage(messages.selectedCount, {
+									count: isBulkOperating ? bulkTotal : selectedIds.size,
+								})
+							}}
+						</span>
+						<div class="mx-1 h-6 w-px bg-surface-5" />
+						<ButtonStyled type="transparent">
+							<button
+								type="button"
+								:disabled="isBulkOperating"
+								:class="{ 'pointer-events-none opacity-60': isBulkOperating }"
+								@click="deselectAll"
+							>
+								{{ formatMessage(commonMessages.clearButton) }}
+							</button>
+						</ButtonStyled>
+					</div>
+
+					<div v-if="!isBulkOperating" class="ml-auto flex items-center gap-0.5">
+						<ButtonStyled type="transparent" color="red" hover-color-fill="background">
+							<button type="button" @click="confirmBulkDelete">
+								<TrashIcon />
+								<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
+							</button>
+						</ButtonStyled>
+					</div>
+
+					<div v-else class="ml-auto flex items-center" aria-live="polite">
+						<span class="px-4 py-2.5 text-base font-semibold tabular-nums text-secondary">
+							{{ formatMessage(messages.bulkDeleting, { total: bulkTotal }) }}
+						</span>
+					</div>
+
+					<div v-if="isBulkOperating" class="absolute bottom-0 left-0 right-0 h-1">
+						<div
+							class="animate-indeterminate h-full rounded-l-full bg-brand"
+							role="progressbar"
+							:aria-valuemin="0"
+							:aria-valuemax="bulkTotal"
+							style="box-shadow: 0px -2px 4px 0px rgba(27, 217, 106, 0.1)"
+						/>
+					</div>
+				</FloatingActionBar>
 
 				<div
 					class="over-the-top-download-animation"
@@ -142,35 +239,102 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import { CalendarIcon, DownloadIcon, IssuesIcon, PlusIcon } from '@modrinth/assets'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { CalendarIcon, DownloadIcon, IssuesIcon, PlusIcon, TrashIcon } from '@modrinth/assets'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import type { Component } from 'vue'
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import Checkbox from '#ui/components/base/Checkbox.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
+import FilterPills, { type FilterPillOption } from '#ui/components/base/FilterPills.vue'
+import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
 import BackupCreateModal from '#ui/components/servers/backups/BackupCreateModal.vue'
 import BackupDeleteModal from '#ui/components/servers/backups/BackupDeleteModal.vue'
 import BackupItem from '#ui/components/servers/backups/BackupItem.vue'
 import BackupRenameModal from '#ui/components/servers/backups/BackupRenameModal.vue'
 import BackupRestoreModal from '#ui/components/servers/backups/BackupRestoreModal.vue'
-import { useReadyState } from '#ui/composables'
-import { useVIntl } from '#ui/composables/i18n'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
+import { useBulkOperation } from '#ui/layouts/shared/content-tab/composables/bulk-operations'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
 } from '#ui/providers'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { useBackupsSelection } from './backups-selection'
+
+const messages = defineMessages({
+	selectAll: {
+		id: 'servers.backups.toolbar.select-all',
+		defaultMessage: 'Select all',
+	},
+	selectBackupAria: {
+		id: 'servers.backups.select-backup-aria',
+		defaultMessage: 'Select backup {name}',
+	},
+	filterManual: {
+		id: 'servers.backups.toolbar.filter-manual',
+		defaultMessage: 'Manual',
+	},
+	filterAuto: {
+		id: 'servers.backups.toolbar.filter-auto',
+		defaultMessage: 'Auto',
+	},
+	selectedCount: {
+		id: 'servers.backups.bulk-bar.selected-count',
+		defaultMessage: '{count, plural, one {# backup selected} other {# backups selected}}',
+	},
+	bulkBarAriaLabel: {
+		id: 'servers.backups.bulk-bar.aria-label',
+		defaultMessage:
+			'{count, plural, one {Bulk actions for one selected backup} other {Bulk actions for # selected backups}}',
+	},
+	createBackup: {
+		id: 'servers.backups.toolbar.create-backup',
+		defaultMessage: 'Create backup',
+	},
+	emptyHeading: {
+		id: 'servers.backups.empty.heading',
+		defaultMessage: 'No backups yet',
+	},
+	emptyDescription: {
+		id: 'servers.backups.empty.description',
+		defaultMessage: 'Create your first backup',
+	},
+	filteredEmptyHeading: {
+		id: 'servers.backups.filtered-empty.heading',
+		defaultMessage: 'No backups match',
+	},
+	filteredEmptyDescription: {
+		id: 'servers.backups.filtered-empty.description',
+		defaultMessage: 'Try a different filter or clear filters to see all backups.',
+	},
+	clearFilters: {
+		id: 'servers.backups.filtered-empty.clear-filters',
+		defaultMessage: 'Clear filters',
+	},
+	bulkDeleting: {
+		id: 'servers.backups.bulk-bar.deleting',
+		defaultMessage: 'Deleting {total, plural, one {# backup} other {# backups}}...',
+	},
+})
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
+
+const filterPillOptions = computed<FilterPillOption[]>(() => [
+	{ id: 'manual', label: formatMessage(messages.filterManual) },
+	{ id: 'auto', label: formatMessage(messages.filterAuto) },
+])
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
-const { server, worldId, backupsState, markBackupCancelled, busyReasons } =
-	injectModrinthServerContext()
+const { server, worldId, busyReasons } = injectModrinthServerContext()
 
 const props = defineProps<{
 	isServerRunning: boolean
@@ -183,81 +347,82 @@ const serverId = route.params.id as string
 
 defineEmits(['onDownload'])
 
-const backupsQueryKey = ['backups', 'list', serverId]
-const {
-	data: backupsData,
-	isLoading,
-	error,
-	refetch,
-} = useQuery({
-	queryKey: backupsQueryKey,
-	queryFn: () => client.archon.backups_v1.list(serverId, worldId.value!),
-	enabled: computed(() => worldId.value !== null),
+const { backups, invalidate, hasActiveCreate, hasActiveRestore, query } = useServerBackupsQueue(
+	computed(() => serverId),
+	worldId,
+)
+
+const error = computed(() => {
+	const err = query.error.value
+	return err instanceof Error ? err : err ? new Error(String(err)) : null
+})
+const refetch = () => query.refetch()
+
+/** Until world exists we cannot fetch; `isLoading` is false while the query is disabled, which would flash empty state. */
+const backupsReadyPending = computed(
+	() => !worldId.value || (query.data.value === undefined && !query.error.value),
+)
+
+const selectedFilters = ref<string[]>([])
+
+const completedBackups = computed(() => backups.value.filter((backup) => backup.status === 'done'))
+
+const filteredBackups = computed(() => {
+	const f = selectedFilters.value
+	if (f.length === 0 || f.length === 2) {
+		return completedBackups.value
+	}
+	const wantAuto = f.includes('auto')
+	return completedBackups.value.filter((b) => b.automated === wantAuto)
 })
 
-const backupsReadyPending = useReadyState({ isLoading, data: backupsData })
-
-const deleteMutation = useMutation({
+/** Completed backups with a snapshot: queue API schedules deletion. */
+const deleteQueueMutation = useMutation({
 	mutationFn: (backupId: string) =>
-		client.archon.backups_v1.delete(serverId, worldId.value!, backupId),
-	onSuccess: (_data, backupId) => {
-		markBackupCancelled(backupId)
-		backupsState.delete(backupId)
-		queryClient.invalidateQueries({ queryKey: backupsQueryKey })
-		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+		client.archon.backups_queue_v1.delete(serverId, worldId.value!, backupId),
+	onSuccess: async () => {
+		await invalidate()
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
 	},
 })
 
-const retryMutation = useMutation({
+/** In-progress / incomplete backups: legacy cancel + delete path. */
+const deleteLegacyMutation = useMutation({
 	mutationFn: (backupId: string) =>
-		client.archon.backups_v1.retry(serverId, worldId.value!, backupId),
-	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
+		client.archon.backups_v1.delete(serverId, worldId.value!, backupId),
+	onSuccess: async () => {
+		await invalidate()
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+	},
 })
 
-const backups = computed(() => {
-	if (!backupsData.value) return []
-
-	const merged = backupsData.value.map((backup) => {
-		const progressState = backupsState.get(backup.id)
-		if (progressState) {
-			const hasOngoingTask = Object.values(progressState).some((task) => task?.state === 'ongoing')
-			const hasCompletedTask = Object.values(progressState).some((task) => task?.state === 'done')
-
-			return {
-				...backup,
-				task: {
-					...backup.task,
-					...progressState,
-				},
-				status: hasOngoingTask
-					? ('in_progress' as const)
-					: hasCompletedTask
-						? ('done' as const)
-						: backup.status,
-				ongoing: hasOngoingTask || (backup.ongoing && !hasCompletedTask),
-			}
-		}
-		return backup
-	})
-
-	return merged.sort((a, b) => {
-		return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-	})
+/** Bulk delete via queue API — handles both completed and in-progress backups (cancels the latter). */
+const deleteManyMutation = useMutation({
+	mutationFn: (backupIds: string[]) =>
+		client.archon.backups_queue_v1.deleteMany(serverId, worldId.value!, backupIds),
+	onSuccess: async () => {
+		await invalidate()
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+	},
 })
 
 type BackupGroup = {
 	label: string
 	icon: Component | null
-	backups: Archon.Backups.v1.Backup[]
+	backups: Archon.BackupsQueue.v1.BackupQueueBackup[]
 }
 
 const groupedBackups = computed((): BackupGroup[] => {
-	if (!backups.value.length) return []
+	if (!filteredBackups.value.length) return []
 
 	const now = dayjs()
 	const groups: BackupGroup[] = []
 
-	const addToGroup = (label: string, icon: Component | null, backup: Archon.Backups.v1.Backup) => {
+	const addToGroup = (
+		label: string,
+		icon: Component | null,
+		backup: Archon.BackupsQueue.v1.BackupQueueBackup,
+	) => {
 		let group = groups.find((g) => g.label === label)
 		if (!group) {
 			group = { label, icon, backups: [] }
@@ -266,7 +431,7 @@ const groupedBackups = computed((): BackupGroup[] => {
 		group.backups.push(backup)
 	}
 
-	for (const backup of backups.value) {
+	for (const backup of filteredBackups.value) {
 		const created = dayjs(backup.created_at)
 		const diffMinutes = now.diff(created, 'minute')
 		const isToday = created.isSame(now, 'day')
@@ -289,6 +454,20 @@ const groupedBackups = computed((): BackupGroup[] => {
 	return groups
 })
 
+const displayOrderedBackups = computed(() => groupedBackups.value.flatMap((g) => g.backups))
+
+const {
+	selectedIds,
+	toggleSelection,
+	deselectAll,
+	toggleSelectAll,
+	allSelected,
+	someSelected,
+	selectedBackups,
+} = useBackupsSelection(filteredBackups, displayOrderedBackups)
+
+const { isBulkOperating, bulkTotal } = useBulkOperation()
+
 const overTheTopDownloadAnimation = ref()
 const createBackupModal = ref<InstanceType<typeof BackupCreateModal>>()
 const renameBackupModal = ref<InstanceType<typeof BackupRenameModal>>()
@@ -302,13 +481,16 @@ const backupRestoreDisabled = computed(() => {
 	if (busyReasons.value.length > 0) {
 		return formatMessage(busyReasons.value[0].reason)
 	}
+	if (hasActiveCreate.value || hasActiveRestore.value) {
+		return 'A backup operation is already queued or in progress'
+	}
 	return undefined
 })
 
 const backupCreationDisabled = computed(() => {
 	const quota = server.value.backup_quota
 	if (quota !== undefined) {
-		const usedCount = backupsData.value?.length ?? server.value.used_backup_quota ?? 0
+		const usedCount = backups.value.length ?? server.value.used_backup_quota ?? 0
 		if (usedCount >= quota) {
 			return `All ${quota} of your backup slots are in use`
 		}
@@ -316,9 +498,8 @@ const backupCreationDisabled = computed(() => {
 	if (busyReasons.value.length > 0) {
 		return formatMessage(busyReasons.value[0].reason)
 	}
-	// also check for active backups, combining REST data with WS overlay
-	if (backups.value.some((b) => b.status === 'in_progress' || b.status === 'pending')) {
-		return 'A backup is already in progress'
+	if (hasActiveCreate.value) {
+		return 'A backup is already queued or in progress'
 	}
 	return undefined
 })
@@ -327,20 +508,46 @@ const showCreateModel = () => {
 	createBackupModal.value?.show()
 }
 
+function clearBackupFilters() {
+	selectedFilters.value = []
+}
+
+function confirmBulkDelete() {
+	if (!selectedBackups.value.length) return
+	deleteBackupModal.value?.showBulk(selectedBackups.value)
+}
+
+async function bulkDelete(toRemove: Archon.BackupsQueue.v1.BackupQueueBackup[]) {
+	if (!toRemove.length) return
+
+	isBulkOperating.value = true
+	bulkTotal.value = toRemove.length
+
+	try {
+		await deleteManyMutation.mutateAsync(toRemove.map((b) => b.id))
+	} catch (err) {
+		addNotification({
+			type: 'error',
+			title: `Failed to delete ${toRemove.length} backup${toRemove.length === 1 ? '' : 's'}`,
+			text: err instanceof Error ? err.message : String(err),
+		})
+	} finally {
+		deselectAll()
+		isBulkOperating.value = false
+		bulkTotal.value = 0
+	}
+}
+
 function triggerDownloadAnimation() {
 	overTheTopDownloadAnimation.value = true
 	setTimeout(() => (overTheTopDownloadAnimation.value = false), 500)
 }
 
-const retryBackup = (backupId: string) => {
-	retryMutation.mutate(backupId, {
-		onError: (err) => {
-			console.error('Failed to retry backup:', err)
-		},
-	})
+function useQueueDeleteFor(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
+	return backup.status === 'done'
 }
 
-function deleteBackup(backup?: Archon.Backups.v1.Backup) {
+function deleteBackup(backup?: Archon.BackupsQueue.v1.BackupQueueBackup) {
 	if (!backup) {
 		addNotification({
 			type: 'error',
@@ -350,7 +557,9 @@ function deleteBackup(backup?: Archon.Backups.v1.Backup) {
 		return
 	}
 
-	deleteMutation.mutate(backup.id, {
+	const mutation = useQueueDeleteFor(backup) ? deleteQueueMutation : deleteLegacyMutation
+
+	mutation.mutate(backup.id, {
 		onError: (err) => {
 			const message = err instanceof Error ? err.message : String(err)
 			addNotification({
@@ -396,6 +605,21 @@ function deleteBackup(backup?: Archon.Backups.v1.Backup) {
 	transition: transform 200ms ease-in-out;
 }
 
+@keyframes indeterminate {
+	0% {
+		width: 20%;
+		margin-left: -20%;
+	}
+	100% {
+		width: 60%;
+		margin-left: 100%;
+	}
+}
+
+.animate-indeterminate {
+	animation: indeterminate 1.5s ease-in-out infinite;
+}
+
 .over-the-top-download-animation {
 	position: fixed;
 	z-index: 100;

packages/ui/src/layouts/wrapped/hosting/manage/content.vue

@@ -2,11 +2,10 @@
 import type { Archon, Labrinth } from '@modrinth/api-client'
 import { ClipboardCopyIcon } from '@modrinth/assets'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
+import { computed, nextTick, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
-import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
 import { useReadyState } from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import {
@@ -22,10 +21,7 @@ import ConfirmUnlinkModal from '../../../shared/content-tab/components/modals/Co
 import ContentUpdaterModal from '../../../shared/content-tab/components/modals/ContentUpdaterModal.vue'
 import ModpackContentModal from '../../../shared/content-tab/components/modals/ModpackContentModal.vue'
 import ContentPageLayout from '../../../shared/content-tab/layout.vue'
-import type {
-	ContentModpackData,
-	UploadState,
-} from '../../../shared/content-tab/providers/content-manager'
+import type { ContentModpackData } from '../../../shared/content-tab/providers/content-manager'
 import { provideContentManager } from '../../../shared/content-tab/providers/content-manager'
 import type {
 	ContentItem,
@@ -85,20 +81,9 @@ const messages = defineMessages({
 	},
 })
 
-const leaveMessages = defineMessages({
-	uploadInProgress: {
-		id: 'instances.confirm-leave-modal.upload-in-progress',
-		defaultMessage: 'Upload in progress',
-	},
-	leavePageBody: {
-		id: 'instances.confirm-leave-modal.body',
-		defaultMessage:
-			'Files are still being uploaded. Leaving this page will cancel the upload and your changes may be lost.',
-	},
-})
-
 const client = injectModrinthClient()
-const { server, worldId, busyReasons, isSyncingContent } = injectModrinthServerContext()
+const { server, worldId, busyReasons, isSyncingContent, uploadState, cancelUpload } =
+	injectModrinthServerContext()
 const { addNotification } = injectNotificationManager()
 const { openServerSettings, browseServerContent } = injectServerSettingsModal()
 const route = useRoute()
@@ -352,57 +337,10 @@ async function handleBulkDisable(items: ContentItem[]) {
 	}
 }
 
-const uploadState = ref<UploadState>({
-	isUploading: false,
-	currentFileName: null,
-	currentFileProgress: 0,
-	uploadedBytes: 0,
-	totalBytes: 0,
-	completedFiles: 0,
-	totalFiles: 0,
-})
-
-const confirmLeaveModal = ref<InstanceType<typeof ConfirmLeaveModal>>()
 const modpackUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 const modpackContentModal = ref<InstanceType<typeof ModpackContentModal>>()
 const contentUpdaterModal = ref<InstanceType<typeof ContentUpdaterModal>>()
 
-let activeUploadCancel: (() => void) | null = null
-
-const isUploading = computed(() => uploadState.value.isUploading)
-
-function handleBeforeUnload(e: BeforeUnloadEvent) {
-	if (isUploading.value) {
-		e.preventDefault()
-		return ''
-	}
-}
-
-if (typeof window !== 'undefined') {
-	watch(isUploading, (uploading) => {
-		if (uploading) {
-			window.addEventListener('beforeunload', handleBeforeUnload)
-		} else {
-			window.removeEventListener('beforeunload', handleBeforeUnload)
-		}
-	})
-
-	onBeforeUnmount(() => {
-		window.removeEventListener('beforeunload', handleBeforeUnload)
-	})
-
-	onBeforeRouteLeave(async () => {
-		if (isUploading.value) {
-			const shouldLeave = (await confirmLeaveModal.value?.prompt()) ?? false
-			if (shouldLeave) {
-				activeUploadCancel?.()
-			}
-			return shouldLeave
-		}
-		return true
-	})
-}
-
 const updatingProject = ref<ContentItem | null>(null)
 const updatingModpack = ref(false)
 const loadingChangelog = ref(false)
@@ -486,7 +424,7 @@ function handleUploadFiles() {
 				uploadState.value.totalBytes = p.total
 			},
 		})
-		activeUploadCancel = () => handle.cancel()
+		cancelUpload.value = () => handle.cancel()
 
 		try {
 			await handle.promise
@@ -500,7 +438,7 @@ function handleUploadFiles() {
 				text: err instanceof Error ? err.message : undefined,
 			})
 		} finally {
-			activeUploadCancel = null
+			cancelUpload.value = null
 			uploadState.value = {
 				isUploading: false,
 				currentFileName: null,
@@ -875,7 +813,6 @@ provideContentManager({
 	},
 	browse: handleBrowseContent,
 	uploadFiles: handleUploadFiles,
-	uploadState,
 	deletionContext: 'server',
 	hasUpdateSupport: true,
 	updateItem: handleUpdateItem,
@@ -911,7 +848,7 @@ provideContentManager({
 
 <template>
 	<ReadyTransition :pending="contentReadyPending">
-		<ContentPageLayout>
+		<ContentPageLayout :bottom-padding="false">
 			<template #modals>
 				<ConfirmUnlinkModal ref="modpackUnlinkModal" server @unlink="handleModpackUnlinkConfirm" />
 				<ModpackContentModal
@@ -968,10 +905,4 @@ provideContentManager({
 		@confirm="handleModpackUpdateConfirm"
 		@cancel="handleModpackUpdateCancel"
 	/>
-	<ConfirmLeaveModal
-		ref="confirmLeaveModal"
-		:header="formatMessage(leaveMessages.uploadInProgress)"
-		:body="formatMessage(leaveMessages.leavePageBody)"
-		admonition-type="critical"
-	/>
 </template>

packages/ui/src/layouts/wrapped/hosting/manage/index.vue

@@ -89,6 +89,7 @@
 
 		<template v-else>
 			<div
+				v-if="!showEmptyState"
 				class="relative flex h-fit w-full flex-col mb-4 items-center justify-between md:flex-row"
 			>
 				<h1 class="w-full text-2xl m-0 font-extrabold text-contrast">
@@ -131,7 +132,7 @@
 				</div>
 
 				<div
-					v-else-if="serverList.length === 0 && !isPollingForNewServers"
+					v-else-if="showEmptyState"
 					key="empty"
 					class="flex h-full flex-col items-center justify-center gap-8 grow max-h-[1100px]"
 				>
@@ -559,6 +560,11 @@ const serverList = computed<Archon.Servers.v0.Server[]>(() => {
 	return serverResponse.value.servers
 })
 
+const showEmptyState = computed(
+	() =>
+		!showServersListLoading.value && serverList.value.length === 0 && !isPollingForNewServers.value,
+)
+
 const searchInput = ref('')
 
 const fuse = computed(() => {

packages/ui/src/layouts/wrapped/hosting/manage/overview.vue

@@ -117,7 +117,12 @@ provideConsoleManager({
 	},
 	showCommandInput: true,
 	disableCommandInput: computed(() => serverPowerState.value !== 'running'),
-	loading: computed(() => !isConnected.value || isWsAuthIncorrect.value),
+	loading: computed(
+		() =>
+			!isConnected.value ||
+			modrinthServersConsole.isInitialLogHydrating.value ||
+			isWsAuthIncorrect.value,
+	),
 	onClear: async () => {
 		modrinthServersConsole.clear()
 		try {

packages/ui/src/layouts/wrapped/hosting/manage/root.vue

@@ -99,7 +99,7 @@
 	<div
 		v-else-if="serverData"
 		data-pyro-server-manager-root
-		class="experimental-styles-within relative mx-auto pb-6 box-border flex min-h-[calc(100svh-100px)] w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
+		class="experimental-styles-within relative mx-auto box-border flex w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
 		:style="{
 			'--server-bg-image': serverImage
 				? `url(${serverImage})`
@@ -107,9 +107,7 @@
 		}"
 		:class="[
 			'server-panel-' + revealState,
-			{
-				'max-w-[1280px]': isNuxt,
-			},
+			isNuxt ? 'min-h-[100svh] max-w-[1280px] pb-16' : 'min-h-[calc(100svh-100px)] pb-6',
 		]"
 	>
 		<template v-if="revealState !== 'pending' || isOnboarding">
@@ -309,66 +307,13 @@
 						Hang on, we're reconnecting to your server.
 					</div>
 
-					<Transition
-						enter-active-class="transition-all duration-300 ease-out overflow-hidden"
-						enter-from-class="opacity-0 max-h-0"
-						enter-to-class="opacity-100 max-h-40"
-						leave-active-class="transition-all duration-200 ease-in overflow-hidden"
-						leave-from-class="opacity-100 max-h-40"
-						leave-to-class="opacity-0 max-h-0"
-					>
-						<InstallingBanner
-							v-if="
-								(serverData.status === 'installing' || isSyncingContent || contentError) &&
-								syncProgress?.phase !== 'Analyzing'
-							"
-							data-pyro-server-installing
-							class="mb-4"
-							:progress="syncProgress"
-							:content-error="contentError"
-							@retry="handleContentRetry"
-						>
-							<template #icon>
-								<ServerIcon :image="serverImage" class="!h-6 !w-6" />
-							</template>
-						</InstallingBanner>
-					</Transition>
-					<Transition
-						enter-active-class="transition-all duration-300 ease-out overflow-hidden"
-						enter-from-class="opacity-0 max-h-0"
-						enter-to-class="opacity-100 max-h-40"
-						leave-active-class="transition-all duration-200 ease-in overflow-hidden"
-						leave-from-class="opacity-100 max-h-40"
-						leave-to-class="opacity-0 max-h-0"
-					>
-						<Admonition v-if="uploadState.isUploading" type="info" class="mb-4">
-							<template #icon>
-								<UploadIcon class="h-6 w-6 flex-none text-brand-blue" />
-							</template>
-							<template #header>
-								Uploading files ({{ uploadState.completedFiles }}/{{ uploadState.totalFiles }})
-								<span v-if="uploadState.currentFileName" class="font-normal text-secondary">
-									— {{ uploadState.currentFileName }}
-								</span>
-							</template>
-							<span class="text-secondary">
-								{{ formatBytes(uploadState.uploadedBytes) }} /
-								{{ formatBytes(uploadState.totalBytes) }} ({{
-									Math.round(uploadOverallProgress * 100)
-								}}%)
-							</span>
-							<template v-if="cancelUpload" #top-right-actions>
-								<ButtonStyled type="outlined" color="blue">
-									<button class="!border" @click="cancelUpload?.()">Cancel</button>
-								</ButtonStyled>
-							</template>
-							<template #progress>
-								<ProgressBar :progress="uploadOverallProgress" :max="1" color="blue" full-width />
-							</template>
-						</Admonition>
-					</Transition>
-					<FileOperationAdmonitions class="mb-4" />
-					<BackupProgressAdmonitions class="mb-4" />
+					<ServerPanelAdmonitions
+						class="mb-4"
+						:sync-progress="syncProgress"
+						:content-error="contentError"
+						:server-image="serverImage"
+						@content-retry="handleContentRetry"
+					/>
 					<slot :on-reinstall="onReinstall" :on-reinstall-failed="onReinstallFailed" />
 				</div>
 			</template>
@@ -417,11 +362,9 @@ import {
 	SettingsIcon,
 	TransferIcon,
 	TriangleAlertIcon,
-	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
 import type { Stats } from '@modrinth/utils'
-import { formatBytes } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useStorage, useTimeoutFn } from '@vueuse/core'
 import DOMPurify from 'dompurify'
@@ -429,16 +372,12 @@ import { Tooltip } from 'floating-vue'
 import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
-import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import ErrorInformationCard from '#ui/components/base/ErrorInformationCard.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
-import ProgressBar from '#ui/components/base/ProgressBar.vue'
 import ServerNotice from '#ui/components/base/ServerNotice.vue'
 import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
-import BackupProgressAdmonitions from '#ui/components/servers/backups/BackupProgressAdmonitions.vue'
-import { ServerIcon } from '#ui/components/servers/icons'
-import InstallingBanner from '#ui/components/servers/InstallingBanner.vue'
+import ServerPanelAdmonitions from '#ui/components/servers/admonitions/ServerPanelAdmonitions.vue'
 import MedalServerCountdown from '#ui/components/servers/marketing/MedalServerCountdown.vue'
 import {
 	PanelServerActionButton,
@@ -455,6 +394,7 @@ import {
 	useServerProject,
 } from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
 import { useServerManageCoreRuntime } from '#ui/composables/server-manage-core-runtime'
 import type { LogLine } from '#ui/layouts/shared/console'
 import type { ServerSettingsTabId } from '#ui/layouts/shared/server-settings'
@@ -465,7 +405,6 @@ import {
 } from '#ui/providers'
 import { formatLoaderLabel } from '#ui/utils/loaders'
 
-import FileOperationAdmonitions from '../../../shared/files-tab/components/FileOperationAdmonitions.vue'
 import ServerOnboardingPanelPage from './[id]/onboarding.vue'
 
 interface Tab {
@@ -618,17 +557,17 @@ const worldId = computed(() => {
 	return activeWorld?.id ?? serverFull.value.worlds[0]?.id ?? null
 })
 
+const { handleWsBackupProgress, busyReasons: backupsBusy } = useServerBackupsQueue(
+	computed(() => props.serverId),
+	worldId,
+)
+
 const { image: serverImage } = useServerImage(
 	props.serverId,
 	computed(() => serverData.value?.upstream ?? null),
 )
 const { data: serverProject } = useServerProject(computed(() => serverData.value?.upstream ?? null))
 
-const cancelledBackups = new Set<string>()
-const markBackupCancelled = (backupId: string) => {
-	cancelledBackups.add(backupId)
-}
-
 const syncProgress = ref<Archon.Websocket.v0.SyncContentProgress | null>(null)
 const contentError = ref<Archon.Websocket.v0.SyncContentError | null>(null)
 const syncProgressActive = ref(false)
@@ -686,7 +625,6 @@ const onStateEvent = (data: Archon.Websocket.v0.WSStateEvent) => {
 }
 
 const {
-	backupsState,
 	cancelUpload,
 	cleanupCoreRuntime,
 	connectSocket,
@@ -704,8 +642,7 @@ const {
 	worldId,
 	server: serverData,
 	isSyncingContent,
-	markBackupCancelled,
-	includeBackupBusyReasons: true,
+	extraBusyReasons: backupsBusy,
 	setDisconnectedOnAuthIncorrect: false,
 	syncUptimeFromState: true,
 	incrementUptimeLocally: true,
@@ -713,12 +650,6 @@ const {
 	onStateEvent,
 })
 
-const uploadOverallProgress = computed(() => {
-	const state = uploadState.value
-	if (!state.isUploading || state.totalFiles === 0) return 0
-	return Math.min((state.completedFiles + state.currentFileProgress) / state.totalFiles, 1)
-})
-
 const isUploading = computed(() => uploadState.value.isUploading)
 
 function handleBeforeUnload(e: BeforeUnloadEvent) {
@@ -981,69 +912,7 @@ async function handleContentRetry() {
 }
 
 const handleBackupProgress = (data: Archon.Websocket.v0.WSBackupProgressEvent) => {
-	if (data.task === 'file') return
-
-	const backupId = data.id
-
-	if (cancelledBackups.has(backupId)) return
-
-	const current = backupsState.get(backupId) ?? {}
-	const currentTaskState = current[data.task]?.state
-	const isIncomingTerminal =
-		data.state === 'done' || data.state === 'failed' || data.state === 'cancelled'
-
-	if (currentTaskState === data.state && isIncomingTerminal) return
-
-	const previousProgress = current[data.task]?.progress
-	if (currentTaskState !== data.state || previousProgress !== data.progress) {
-		backupsState.set(backupId, {
-			...current,
-			[data.task]: {
-				progress: data.progress,
-				state: data.state,
-			},
-		})
-	}
-
-	if (isIncomingTerminal) {
-		const attemptCleanup = (attempt: number = 1) => {
-			queryClient.invalidateQueries({ queryKey: ['backups', 'list', props.serverId] }).then(() => {
-				const backupData = queryClient.getQueryData<Archon.Backups.v1.Backup[]>([
-					'backups',
-					'list',
-					props.serverId,
-				])
-				const backup = backupData?.find((b) => b.id === backupId)
-				const isStillActive =
-					backup && (backup.status === 'in_progress' || backup.status === 'pending')
-
-				if (isStillActive && attempt < 6) {
-					setTimeout(() => attemptCleanup(attempt + 1), 1000 * Math.pow(2, attempt - 1))
-					return
-				}
-
-				if (isStillActive) {
-					queryClient.setQueryData<Archon.Backups.v1.Backup[]>(
-						['backups', 'list', props.serverId],
-						(old) =>
-							old?.map((b) => {
-								if (b.id !== backupId) return b
-								return {
-									...b,
-									status: data.state === 'done' ? ('done' as const) : ('error' as const),
-									ongoing: false,
-									interrupted: data.state === 'failed',
-								}
-							}),
-					)
-				}
-
-				backupsState.delete(backupId)
-			})
-		}
-
-		attemptCleanup()
-	}
+	handleWsBackupProgress(data)
 }
 
 const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) => {
@@ -1455,20 +1324,23 @@ function initializeServer() {
 	}
 }
 
+let intercomInitialized = false
+
 const cleanup = () => {
 	isMounted.value = false
 
 	saveWsStateToCache()
 
-	shutdown()
+	if (intercomInitialized) {
+		shutdown()
+		intercomInitialized = false
+	}
 
 	cleanupCoreRuntime(props.serverId)
 
 	isReconnecting.value = false
 	isLoading.value = true
 
-	cancelledBackups.clear()
-
 	DOMPurify.removeHook('afterSanitizeAttributes')
 }
 
@@ -1486,19 +1358,36 @@ onMounted(() => {
 		})
 	}
 
-	let intercomInitialized = false
 	const tryInitIntercom = () => {
 		if (intercomInitialized) return
-		if (!props.authUser || !props.fetchIntercomToken) return
+		if (!props.authUser || !props.fetchIntercomToken) {
+			console.debug('[PYROSERVERS][INTERCOM] waiting for auth user and token fetcher', {
+				hasAuthUser: !!props.authUser,
+				hasFetchIntercomToken: !!props.fetchIntercomToken,
+			})
+			return
+		}
 		intercomInitialized = true
+		console.debug('[PYROSERVERS][INTERCOM] initializing secure support chat')
 		props
 			.fetchIntercomToken()
 			.then(({ token }) => {
+				console.debug('[PYROSERVERS][INTERCOM] fetched messenger JWT, booting widget')
 				Intercom({
 					app_id: props.intercomAppId!,
 					intercom_user_jwt: token,
 					session_duration: 1000 * 60 * 60 * 24,
 				})
+				window.setTimeout(() => {
+					const hasWidget = !!document.querySelector(
+						'.intercom-lightweight-app, #intercom-container, #intercom-frame',
+					)
+					if (!hasWidget) {
+						console.warn(
+							'[PYROSERVERS][INTERCOM] boot completed but no Intercom widget was detected',
+						)
+					}
+				}, 2500)
 			})
 			.catch((error) => {
 				intercomInitialized = false