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/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 {