feat: card alignment + fix modals

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

@@ -45,9 +45,9 @@
 			</Transition>
 		</div>
 		<template #actions>
-			<div class="w-full flex flex-row gap-2 justify-end">
+			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border-[1px] !border-surface-4" @click="hideModal">
+					<button class="!border !border-surface-4" @click="hideModal">
 						<XIcon />
 						Cancel
 					</button>

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

@@ -13,8 +13,8 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled>
-					<button @click="modal?.hide()">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="modal?.hide()">
 						<XIcon />
 						Cancel
 					</button>

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

@@ -2,11 +2,12 @@
 import type { Archon } from '@modrinth/api-client'
 import {
 	ClipboardCopyIcon,
-	ClockIcon,
 	DownloadIcon,
 	EditIcon,
+	LoaderCircleIcon,
 	MoreVerticalIcon,
 	RotateCounterClockwiseIcon,
+	ShieldIcon,
 	TrashIcon,
 	UserRoundIcon,
 	XIcon,
@@ -85,7 +86,7 @@ const activeOperation = computed(() => creating.value || restoring.value)
 
 const backupIcon = computed(() => {
 	if (props.backup.automated) {
-		return ClockIcon
+		return ShieldIcon
 	}
 	return UserRoundIcon
 })
@@ -167,35 +168,54 @@ const messages = defineMessages({
 		id: 'servers.backups.item.manual-backup',
 		defaultMessage: 'Manual backup',
 	},
+	creatingBackup: {
+		id: 'servers.backups.item.creating-backup',
+		defaultMessage: 'Creating backup\u2026',
+	},
+	restoring: {
+		id: 'servers.backups.item.restoring',
+		defaultMessage: 'Restoring',
+	},
 })
 </script>
 <template>
 	<div
-		class="grid items-center gap-4 rounded-2xl bg-bg-raised p-4 shadow-md"
-		:class="
-			preview
-				? 'grid-cols-1'
-				: 'grid-cols-[auto_1fr_auto] md:grid-cols-[minmax(0,1fr)_400px_minmax(0,1fr)]'
-		"
+		class="flex items-center gap-4 rounded-[20px] bg-surface-3 p-4 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.3),0px_1px_3px_0px_rgba(0,0,0,0.15)]"
 	>
-		<div class="flex flex-row gap-4 items-center">
+		<div class="flex min-w-0 flex-1 items-center gap-4">
+			<!-- Icon tile -->
 			<div
-				class="flex size-12 shrink-0 items-center justify-center rounded-2xl border-solid border-[1px] border-surface-5 bg-surface-4 md:size-16"
+				class="flex shrink-0 items-center justify-center rounded-2xl border border-solid border-surface-5 bg-surface-4"
+				:class="preview ? 'size-10' : 'size-14'"
 			>
-				<component :is="backupIcon" class="size-7 text-secondary md:size-10" />
+				<LoaderCircleIcon
+					v-if="activeOperation"
+					v-tooltip="restoring ? formatMessage(messages.restoring) : undefined"
+					class="animate-spin text-secondary"
+					:class="preview ? 'size-6' : 'size-10'"
+				/>
+				<component
+					:is="backupIcon"
+					v-else
+					class="text-secondary"
+					:class="preview ? 'size-6' : 'size-10'"
+				/>
 			</div>
 
+			<!-- Name + badge + subtitle -->
 			<div class="flex min-w-0 flex-col gap-1.5">
-				<div class="flex flex-wrap items-center gap-2">
-					<span class="truncate font-semibold text-contrast max-w-[400px]">{{ backup.name }}</span>
+				<div class="flex min-w-0 items-center gap-2">
+					<span class="min-w-0 truncate font-semibold text-contrast">
+						{{ creating ? formatMessage(messages.creatingBackup) : backup.name }}
+					</span>
 					<span
 						v-if="backup.automated"
-						class="rounded-full border-solid border-[1px] border-surface-5 bg-surface-4 px-2.5 py-1 text-sm text-secondary"
+						class="shrink-0 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-medium text-secondary"
 					>
 						{{ formatMessage(messages.auto) }}
 					</span>
 				</div>
-				<div class="flex items-center gap-1.5 text-sm text-secondary">
+				<div class="flex items-center gap-1.5 text-sm font-medium text-secondary">
 					<template v-if="preview">
 						<span>{{ formatDateTime(backup.created_at) }}</span>
 					</template>
@@ -227,47 +247,51 @@ const messages = defineMessages({
 			</div>
 		</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"
-		>
-			<span class="w-full font-medium text-contrast md:text-center">
-				{{ formatDateTime(backup.created_at) }}
-			</span>
+		<!-- Date + size (middle column) -->
+		<div v-if="!preview" class="flex w-[240px] shrink-0 flex-col gap-1.5">
+			<span class="whitespace-nowrap font-medium text-contrast">{{ formatDateTime(backup.created_at) }}</span>
 			<!-- TODO: Uncomment when API supports size field -->
-			<!-- <span class="text-secondary">{{ formatBytes(backup.size) }}</span> -->
+			<!-- <span class="font-normal text-secondary">{{ formatBytes(backup.size) }}</span> -->
 		</div>
 
-		<div v-if="!preview" class="flex shrink-0 items-center gap-2 md:justify-self-end">
-			<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) }}
+		<!-- Right side actions -->
+		<div v-if="!preview" class="flex w-[180px] shrink-0 items-center justify-end gap-2">
+			<ButtonStyled v-if="creating" type="outlined">
+				<button @click="() => emit('delete', true)" class="!border !border-surface-4">
+					{{ formatMessage(commonMessages.cancelButton) }}
 				</button>
 			</ButtonStyled>
-			<ButtonStyled circular type="transparent">
-				<OverflowMenu :options="overflowMenuOptions">
-					<MoreVerticalIcon class="size-5" />
-					<template #copy-id>
-						<ClipboardCopyIcon class="size-5" />
-						{{ formatMessage(commonMessages.copyIdButton) }}
-					</template>
-					<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 v-else>
+				<ButtonStyled v-if="!activeOperation" color="brand" type="outlined">
+					<button
+						v-tooltip="props.restoreDisabled"
+						class="!border"
+						: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 #copy-id>
+							<ClipboardCopyIcon class="size-5" />
+							{{ formatMessage(commonMessages.copyIdButton) }}
+						</template>
+						<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>
 		</div>
 
 		<pre v-if="!preview && showDebugInfo" class="w-full rounded-xl bg-surface-4 p-2 text-xs">{{

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

@@ -20,26 +20,28 @@
 				</span>
 			</div>
 		</div>
-		<div class="mt-2 flex justify-start gap-2">
-			<ButtonStyled color="brand">
-				<button :disabled="renameMutation.isPending.value || nameExists" @click="renameBackup">
-					<template v-if="renameMutation.isPending.value">
-						<SpinnerIcon class="animate-spin" />
-						Renaming...
-					</template>
-					<template v-else>
-						<SaveIcon />
-						Save changes
-					</template>
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button @click="hide">
-					<XIcon />
-					Cancel
-				</button>
-			</ButtonStyled>
-		</div>
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="hide">
+						<XIcon />
+						Cancel
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="renameMutation.isPending.value || nameExists" @click="renameBackup">
+						<template v-if="renameMutation.isPending.value">
+							<SpinnerIcon class="animate-spin" />
+							Renaming...
+						</template>
+						<template v-else>
+							<SaveIcon />
+							Save changes
+						</template>
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
 	</NewModal>
 </template>
 

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

@@ -17,8 +17,8 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled>
-					<button @click="modal?.hide()">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="modal?.hide()">
 						<XIcon />
 						Cancel
 					</button>

packages/ui/src/stories/servers/BackupItem.stories.ts

@@ -0,0 +1,167 @@
+import type { Archon } from '@modrinth/api-client'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import BackupItem from '../../components/servers/backups/BackupItem.vue'
+
+const meta = {
+	title: 'Servers/BackupItem',
+	component: BackupItem,
+	args: {
+		preview: false,
+		showCopyIdAction: false,
+		showDebugInfo: false,
+		restoreDisabled: undefined,
+	},
+} satisfies Meta<typeof BackupItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function makeBackup(overrides: Partial<Archon.Backups.v1.Backup> = {}): Archon.Backups.v1.Backup {
+	return {
+		id: 'backup-001',
+		physical_id: 'phys-001',
+		name: 'Backup #5',
+		created_at: new Date(Date.now() - 1000 * 60 * 10).toISOString(),
+		automated: false,
+		status: 'done',
+		interrupted: false,
+		ongoing: false,
+		locked: false,
+		...overrides,
+	}
+}
+
+export const Default: Story = {
+	name: 'Default (manual)',
+	args: {
+		backup: makeBackup({ name: 'Base finished!!' }),
+	},
+}
+
+export const Automated: Story = {
+	name: 'Automated',
+	args: {
+		backup: makeBackup({ automated: true, name: 'Backup #2' }),
+	},
+}
+
+export const Creating: Story = {
+	name: 'Creating (in progress)',
+	args: {
+		backup: makeBackup({
+			automated: true,
+			name: 'Backup #3',
+			status: 'in_progress',
+			ongoing: true,
+			task: {
+				create: { progress: 0.4, state: 'ongoing' },
+			},
+		}),
+	},
+}
+
+export const Restoring: Story = {
+	name: 'Restoring (in progress)',
+	args: {
+		backup: makeBackup({
+			name: 'Backup #5',
+			automated: true,
+			task: {
+				restore: { progress: 0.6, state: 'ongoing' },
+			},
+		}),
+	},
+}
+
+export const FailedCreate: Story = {
+	name: 'Failed (create)',
+	args: {
+		backup: makeBackup({ status: 'error', name: 'Backup #4' }),
+	},
+}
+
+export const FailedRestore: Story = {
+	name: 'Failed (restore)',
+	args: {
+		backup: makeBackup({
+			name: 'Backup #5',
+			task: {
+				restore: { progress: 0, state: 'failed' },
+			},
+		}),
+	},
+}
+
+export const Preview: Story = {
+	name: 'Preview (compact, used in delete modal)',
+	args: {
+		backup: makeBackup({ name: 'Base finished!!' }),
+		preview: true,
+	},
+}
+
+export const RestoreDisabled: Story = {
+	name: 'Restore disabled (server running)',
+	args: {
+		backup: makeBackup({ name: 'Backup #5', automated: true }),
+		restoreDisabled: 'Cannot restore backup while server is running',
+	},
+}
+
+export const AllStates: Story = {
+	render: () => ({
+		components: { BackupItem },
+		setup() {
+			const now = new Date(Date.now() - 1000 * 60 * 10).toISOString()
+
+			function makeBackup(
+				overrides: Partial<Archon.Backups.v1.Backup>,
+			): Archon.Backups.v1.Backup {
+				return {
+					id: 'backup-001',
+					physical_id: 'phys-001',
+					name: 'Backup #5',
+					created_at: now,
+					automated: false,
+					status: 'done',
+					interrupted: false,
+					ongoing: false,
+					locked: false,
+					...overrides,
+				}
+			}
+
+			return {
+				manual: makeBackup({ name: 'Base finished!!' }),
+				automated: makeBackup({ automated: true, name: 'Backup #2' }),
+				creating: makeBackup({
+					automated: true,
+					name: 'Backup #3',
+					status: 'in_progress',
+					ongoing: true,
+					task: { create: { progress: 0.4, state: 'ongoing' } },
+				}),
+				restoring: makeBackup({
+					automated: true,
+					task: { restore: { progress: 0.6, state: 'ongoing' } },
+				}),
+				failedCreate: makeBackup({ status: 'error', name: 'Backup #4' }),
+				failedRestore: makeBackup({
+					task: { restore: { progress: 0, state: 'failed' } },
+				}),
+			}
+		},
+		template: /* html */ `
+			<div style="display: flex; flex-direction: column; gap: 0.75rem; max-width: 900px;">
+				<BackupItem :backup="manual" />
+				<BackupItem :backup="automated" />
+				<BackupItem :backup="creating" />
+				<BackupItem :backup="restoring" />
+				<BackupItem :backup="failedCreate" />
+				<BackupItem :backup="failedRestore" />
+				<BackupItem :backup="manual" preview />
+			</div>
+		`,
+	}),
+}