feat: backups alignment with Figma (#5559)

* feat: backup admonitions

* feat: align modals + fix backupitem

* fix: body needs opac 80

* fix: lint

Author: IMB11

apps/frontend/src/pages/[type]/[id]/settings/server.vue

@@ -32,7 +32,7 @@
 						:options="languageOptions"
 						searchable
 						include-select-all-option
-						:maxTagRows="2"
+						:max-tag-rows="2"
 						placeholder="Select languages"
 						:disabled="!hasPermission"
 					/>

apps/frontend/src/pages/hosting/manage/[id].vue

@@ -311,6 +311,7 @@
 						</template>
 					</InstallingBanner>
 				</Transition>
+				<BackupProgressAdmonitions class="mb-4" />
 				<NuxtPage
 					:route="route"
 					:is-connected="isConnected"
@@ -357,6 +358,7 @@ import {
 } from '@modrinth/assets'
 import type { BusyReason } from '@modrinth/ui'
 import {
+	BackupProgressAdmonitions,
 	ButtonStyled,
 	defineMessage,
 	ErrorInformationCard,

packages/ui/src/components/base/Admonition.vue

@@ -52,7 +52,7 @@ import ButtonStyled from './ButtonStyled.vue'
 
 withDefaults(
 	defineProps<{
-		type?: 'info' | 'warning' | 'critical'
+		type?: 'info' | 'warning' | 'critical' | 'success'
 		header?: string
 		body?: string
 		showActionsUnderneath?: boolean
@@ -75,17 +75,20 @@ const typeClasses = {
 	info: 'border-brand-blue bg-bg-blue',
 	warning: 'border-brand-orange bg-bg-orange',
 	critical: 'border-brand-red bg-bg-red',
+	success: 'border-brand-green bg-bg-green',
 }
 
 const iconClasses = {
 	info: 'text-brand-blue',
 	warning: 'text-brand-orange',
 	critical: 'text-brand-red',
+	success: 'text-brand-green',
 }
 
-const buttonColors: Record<string, 'blue' | 'orange' | 'red'> = {
+const buttonColors: Record<string, 'blue' | 'orange' | 'red' | 'green'> = {
 	info: 'blue',
 	warning: 'orange',
 	critical: 'red',
+	success: 'green',
 }
 </script>

packages/ui/src/components/servers/backups/BackupDeleteModal.vue

@@ -1,17 +1,13 @@
 <template>
 	<NewModal ref="modal" header="Delete backup" fade="danger">
-		<div class="flex flex-col gap-6">
+		<div class="flex flex-col gap-6 max-w-[400px]">
 			<Admonition type="critical" header="Delete warning">
 				This backup will be permanently deleted. This action cannot be undone.
 			</Admonition>
 
 			<div v-if="currentBackup" class="flex flex-col gap-2">
 				<span class="font-semibold text-contrast">Backup</span>
-				<BackupItem
-					:backup="currentBackup"
-					preview
-					class="!bg-surface-2 border-solid border-[1px] border-surface-5"
-				/>
+				<BackupItem :backup="currentBackup" preview class="!bg-surface-2 !shadow-none" />
 			</div>
 		</div>
 

packages/ui/src/components/servers/backups/BackupItem.vue

@@ -17,7 +17,6 @@ import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { commonMessages } from '../../../utils'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import OverflowMenu, { type Option as OverflowOption } from '../../base/OverflowMenu.vue'
-import ProgressBar from '../../base/ProgressBar.vue'
 
 const { formatMessage } = useVIntl()
 const formatDateTime = useFormatDateTime({
@@ -48,12 +47,6 @@ const props = withDefaults(
 	},
 )
 
-const backupQueued = computed(
-	() =>
-		props.backup.status === 'pending' ||
-		props.backup.task?.create?.progress === 0 ||
-		(props.backup.status === 'in_progress' && !props.backup.task?.create),
-)
 const failedToCreate = computed(
 	() => props.backup.status === 'error' || props.backup.status === 'timed_out',
 )
@@ -63,30 +56,30 @@ const inactiveStates = ['failed', 'cancelled', 'done']
 const creating = computed(() => {
 	const task = props.backup.task?.create
 	if (task && task.progress < 1 && !inactiveStates.includes(task.state)) {
-		return task
+		return true
 	}
 
 	if (
 		(props.backup.status === 'in_progress' || props.backup.status === 'pending') &&
 		!props.backup.task?.restore
 	) {
-		return { progress: 0, state: 'ongoing' as const }
+		return true
 	}
-	return undefined
+	return false
 })
 
 const restoring = computed(() => {
 	const task = props.backup.task?.restore
 	if (task && task.progress < 1 && !inactiveStates.includes(task.state)) {
-		return task
+		return true
 	}
-	return undefined
+	return false
 })
 
-const restoreQueued = computed(() => restoring.value?.progress === 0)
-
 const failedToRestore = computed(() => props.backup.task?.restore?.state === 'failed')
 
+const activeOperation = computed(() => creating.value || restoring.value)
+
 const backupIcon = computed(() => {
 	if (props.backup.automated) {
 		return ClockIcon
@@ -97,8 +90,7 @@ const backupIcon = computed(() => {
 const overflowMenuOptions = computed<OverflowOption[]>(() => {
 	const options: OverflowOption[] = []
 
-	// Download only available when not creating
-	if (!creating.value) {
+	if (!activeOperation.value) {
 		options.push({
 			id: 'download',
 			action: () => emit('download'),
@@ -109,8 +101,7 @@ const overflowMenuOptions = computed<OverflowOption[]>(() => {
 
 	options.push({ id: 'rename', action: () => emit('rename') })
 
-	// Delete only available when not creating (has separate Cancel button)
-	if (!creating.value) {
+	if (!activeOperation.value) {
 		options.push({ divider: true })
 		options.push({
 			id: 'delete',
@@ -138,22 +129,6 @@ const messages = defineMessages({
 		id: 'servers.backups.item.rename',
 		defaultMessage: 'Rename',
 	},
-	queuedForBackup: {
-		id: 'servers.backups.item.queued-for-backup',
-		defaultMessage: 'Backup queued',
-	},
-	queuedForRestore: {
-		id: 'servers.backups.item.queued-for-restore',
-		defaultMessage: 'Restore queued',
-	},
-	creatingBackup: {
-		id: 'servers.backups.item.creating-backup',
-		defaultMessage: 'Creating backup...',
-	},
-	restoringBackup: {
-		id: 'servers.backups.item.restoring-backup',
-		defaultMessage: 'Restoring from backup...',
-	},
 	failedToCreateBackup: {
 		id: 'servers.backups.item.failed-to-create-backup',
 		defaultMessage: 'Failed to create backup',
@@ -179,7 +154,7 @@ const messages = defineMessages({
 <template>
 	<div
 		class="grid items-center gap-4 rounded-2xl bg-bg-raised p-4 shadow-md"
-		:class="preview ? 'grid-cols-2' : 'grid-cols-[auto_1fr_auto] md:grid-cols-[1fr_400px_1fr]'"
+		:class="preview ? 'grid-cols-1' : 'grid-cols-[auto_1fr_auto] md:grid-cols-[1fr_400px_1fr]'"
 	>
 		<div class="flex flex-row gap-4 items-center">
 			<div
@@ -199,7 +174,10 @@ const messages = defineMessages({
 					</span>
 				</div>
 				<div class="flex items-center gap-1.5 text-sm text-secondary">
-					<template v-if="failedToCreate || failedToRestore">
+					<template v-if="preview">
+						<span>{{ formatDateTime(backup.created_at) }}</span>
+					</template>
+					<template v-else-if="failedToCreate || failedToRestore">
 						<XIcon class="size-4 text-red" />
 						<span class="text-red">
 							{{
@@ -228,95 +206,42 @@ const messages = defineMessages({
 		</div>
 
 		<div
+			v-if="!preview"
 			class="col-span-full row-start-2 flex flex-col gap-2 md:col-span-1 md:row-start-auto md:items-center"
 		>
-			<template v-if="creating || restoring">
-				<ProgressBar
-					:progress="(creating || restoring)!.progress"
-					:color="creating ? 'brand' : 'purple'"
-					:waiting="(creating || restoring)!.progress === 0"
-					:label="
-						formatMessage(
-							creating
-								? backupQueued
-									? messages.queuedForBackup
-									: messages.creatingBackup
-								: restoreQueued
-									? messages.queuedForRestore
-									: messages.restoringBackup,
-						)
-					"
-					:label-class="creating ? 'text-contrast' : 'text-purple'"
-					show-progress
-					full-width
-				/>
-			</template>
-			<template v-else>
-				<span class="w-full font-medium text-contrast md:text-center">
-					{{ formatDateTime(backup.created_at) }}
-				</span>
-				<!-- TODO: Uncomment when API supports size field -->
-				<!-- <span class="text-secondary">{{ formatBytes(backup.size) }}</span> -->
-			</template>
+			<span class="w-full font-medium text-contrast md:text-center">
+				{{ formatDateTime(backup.created_at) }}
+			</span>
+			<!-- TODO: Uncomment when API supports size field -->
+			<!-- <span class="text-secondary">{{ formatBytes(backup.size) }}</span> -->
 		</div>
 
 		<div v-if="!preview" class="flex shrink-0 items-center gap-2 md:justify-self-end">
-			<template v-if="failedToCreate">
-				<ButtonStyled>
-					<button @click="() => emit('retry')">
-						<RotateCounterClockwiseIcon class="size-5" />
-						{{ formatMessage(commonMessages.retryButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="() => emit('delete', true)">
-						<TrashIcon class="size-5" />
-						{{ formatMessage(commonMessages.deleteLabel) }}
-					</button>
-				</ButtonStyled>
-			</template>
-			<template v-else-if="creating">
-				<ButtonStyled type="outlined">
-					<button class="!border-[1px] !border-surface-5" @click="() => emit('delete')">
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu :options="overflowMenuOptions">
-						<MoreVerticalIcon class="size-5" />
-						<template #rename>
-							<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
-			</template>
-			<template v-else>
-				<ButtonStyled color="brand" type="outlined">
-					<button
-						v-tooltip="props.restoreDisabled"
-						class="!border-[1px]"
-						:disabled="!!props.restoreDisabled"
-						@click="() => emit('restore')"
-					>
-						<RotateCounterClockwiseIcon class="size-5" />
-						{{ formatMessage(messages.restore) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu :options="overflowMenuOptions">
-						<MoreVerticalIcon class="size-5" />
-						<template #download>
-							<DownloadIcon class="size-5" /> {{ formatMessage(commonMessages.downloadButton) }}
-						</template>
-						<template #rename>
-							<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
-						</template>
-						<template #delete>
-							<TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
-			</template>
+			<ButtonStyled v-if="!activeOperation" color="brand" type="outlined">
+				<button
+					v-tooltip="props.restoreDisabled"
+					class="!border-[1px]"
+					:disabled="!!props.restoreDisabled"
+					@click="() => emit('restore')"
+				>
+					<RotateCounterClockwiseIcon class="size-5" />
+					{{ formatMessage(messages.restore) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled circular type="transparent">
+				<OverflowMenu :options="overflowMenuOptions">
+					<MoreVerticalIcon class="size-5" />
+					<template #download>
+						<DownloadIcon class="size-5" /> {{ formatMessage(commonMessages.downloadButton) }}
+					</template>
+					<template #rename>
+						<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
+					</template>
+					<template #delete>
+						<TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}
+					</template>
+				</OverflowMenu>
+			</ButtonStyled>
 		</div>
 
 		<pre v-if="!preview && showDebugInfo" class="w-full rounded-xl bg-surface-4 p-2 text-xs">{{