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/shared/content-tab/layout.vue

@@ -17,16 +17,12 @@ import {
 	ShareIcon,
 	TextCursorInputIcon,
 	TrashIcon,
-	UploadIcon,
 } from '@modrinth/assets'
-import { formatBytes } from '@modrinth/utils'
 import { computed, ref, watch } from 'vue'
 
-import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
-import ProgressBar from '#ui/components/base/ProgressBar.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
@@ -53,6 +49,15 @@ import type { ContentCardTableItem, ContentItem } from './types'
 const { formatMessage } = useVIntl()
 const debug = useDebugLogger('ContentPageLayout')
 
+const props = withDefaults(
+	defineProps<{
+		bottomPadding?: boolean
+	}>(),
+	{
+		bottomPadding: true,
+	},
+)
+
 const messages = defineMessages({
 	loadingContent: {
 		id: 'content.page-layout.loading',
@@ -134,18 +139,10 @@ const messages = defineMessages({
 		id: 'content.page-layout.share.label',
 		defaultMessage: 'Share',
 	},
-	uploadingFiles: {
-		id: 'content.page-layout.uploading-files',
-		defaultMessage: 'Uploading files ({completed}/{total})',
-	},
 	sortByLabel: {
 		id: 'content.page-layout.sort.label',
 		defaultMessage: 'Sort by {mode}',
 	},
-	busyDescription: {
-		id: 'content.page-layout.busy-description',
-		defaultMessage: 'Please wait for the operation to complete before editing content.',
-	},
 	pleaseWait: {
 		id: 'content.page-layout.please-wait',
 		defaultMessage: 'Please wait',
@@ -154,12 +151,6 @@ const messages = defineMessages({
 
 const ctx = injectContentManager()
 
-const uploadOverallProgress = computed(() => {
-	const state = ctx.uploadState?.value
-	if (!state || !state.isUploading || state.totalFiles === 0) return 0
-	return Math.min((state.completedFiles + state.currentFileProgress) / state.totalFiles, 1)
-})
-
 type SortMode = 'alphabetical-asc' | 'alphabetical-desc' | 'date-added-newest' | 'date-added-oldest'
 const sortMode = ref<SortMode>('alphabetical-asc')
 
@@ -502,7 +493,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 </script>
 
 <template>
-	<div class="flex flex-col gap-4 pb-6">
+	<div class="flex flex-col gap-4" :class="{ 'pb-6': props.bottomPadding }">
 		<template v-if="!ctx.loading.value">
 			<div
 				v-if="ctx.error.value"
@@ -518,11 +509,6 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 			</div>
 
 			<template v-else>
-				<Admonition v-if="ctx.isBusy.value && ctx.busyMessage?.value" type="warning">
-					<template #header>{{ ctx.busyMessage.value }}</template>
-					{{ formatMessage(messages.busyDescription) }}
-				</Admonition>
-
 				<ContentModpackCard
 					v-if="ctx.modpack.value"
 					:project="ctx.modpack.value.project"
@@ -550,43 +536,6 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 					@dismiss-content-hint="ctx.dismissContentHint?.()"
 				/>
 
-				<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"
-					aria-live="polite"
-				>
-					<Admonition
-						v-if="ctx.uploadState?.value?.isUploading"
-						type="info"
-						show-actions-underneath
-					>
-						<template #icon>
-							<UploadIcon class="h-6 w-6 flex-none text-brand-blue" />
-						</template>
-						<template #header>
-							{{
-								formatMessage(messages.uploadingFiles, {
-									completed: ctx.uploadState?.value?.completedFiles ?? 0,
-									total: ctx.uploadState?.value?.totalFiles ?? 0,
-								})
-							}}
-						</template>
-						<span class="text-secondary">
-							{{ formatBytes(ctx.uploadState?.value?.uploadedBytes ?? 0) }}
-							/ {{ formatBytes(ctx.uploadState?.value?.totalBytes ?? 0) }} ({{
-								Math.round(uploadOverallProgress * 100)
-							}}%)
-						</span>
-						<template #actions>
-							<ProgressBar :progress="uploadOverallProgress" :max="1" color="blue" full-width />
-						</template>
-					</Admonition>
-				</Transition>
-
 				<template v-if="ctx.items.value.length > 0">
 					<div class="flex flex-col gap-4">
 						<span v-if="ctx.modpack.value" class="text-xl font-semibold text-contrast">