feat: backups alignment with Figma (#5559)

* feat: backup admonitions

* feat: align modals + fix backupitem

* fix: body needs opac 80

* fix: lint

packages/ui/src/layouts/shared/content-tab/layout.vue

@@ -144,6 +144,10 @@ const messages = defineMessages({
 		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',
+	},
 })
 
 const ctx = injectContentManager()
@@ -493,7 +497,11 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 				:categories="ctx.modpack.value.categories"
 				:has-update="ctx.modpack.value.hasUpdate"
 				:disabled="ctx.modpack.value.disabled || ctx.isBusy.value"
-				:disabled-text="ctx.modpack.value.disabledText"
+				:disabled-text="
+					ctx.modpack.value.disabledText ??
+					ctx.busyMessage?.value ??
+					(ctx.isBusy.value ? formatMessage(messages.pleaseWait) : undefined)
+				"
 				:show-content-hint="
 					!!(ctx.showContentHint?.value && ctx.modpack.value && ctx.items.value.length === 0)
 				"

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

@@ -789,14 +789,21 @@ provideContentManager({
 	isBusy: computed(() => busyReasons.value.length > 0),
 	busyMessage: computed(() => {
 		const bannerCoversInstalling = server.value?.status === 'installing' || isSyncingContent.value
-		const nonBannerReasons = bannerCoversInstalling
-			? busyReasons.value.filter(
-					(r) =>
-						r.reason.id !== 'servers.busy.installing' &&
-						r.reason.id !== 'servers.busy.syncing-content',
-				)
-			: busyReasons.value
-		return nonBannerReasons.length > 0 ? formatMessage(nonBannerReasons[0].reason) : null
+		const filteredReasons = busyReasons.value.filter((r) => {
+			if (
+				bannerCoversInstalling &&
+				(r.reason.id === 'servers.busy.installing' ||
+					r.reason.id === 'servers.busy.syncing-content')
+			)
+				return false
+			if (
+				r.reason.id === 'servers.busy.backup-creating' ||
+				r.reason.id === 'servers.busy.backup-restoring'
+			)
+				return false
+			return true
+		})
+		return filteredReasons.length > 0 ? formatMessage(filteredReasons[0].reason) : null
 	}),
 	getItemId: (item) => item.file_name,
 	contentTypeLabel: type,

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

@@ -21,8 +21,8 @@
 		</div>
 
 		<div v-else key="content" class="contents">
-			<Admonition v-if="serverBusy" type="warning" class="mb-5">
-				<template #header>{{ busyTooltip }}</template>
+			<Admonition v-if="nonBackupBusyReasons.length > 0" type="warning" class="mb-5">
+				<template #header>{{ formatMessage(nonBackupBusyReasons[0].reason) }}</template>
 				File operations are disabled while the operation is in progress.
 			</Admonition>
 			<div class="relative flex w-full flex-col">
@@ -327,6 +327,13 @@ const serverBusy = computed(() => busyReasons.value.length > 0)
 const busyTooltip = computed(() =>
 	busyReasons.value.length > 0 ? formatMessage(busyReasons.value[0].reason) : undefined,
 )
+const nonBackupBusyReasons = computed(() =>
+	busyReasons.value.filter(
+		(r) =>
+			r.reason.id !== 'servers.busy.backup-creating' &&
+			r.reason.id !== 'servers.busy.backup-restoring',
+	),
+)
 const queryClient = useQueryClient()
 
 interface BaseOperation {