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/stories/servers/BackupItem.stories.ts

@@ -0,0 +1,99 @@
+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.BackupsQueue.v1.BackupQueueBackup> = {},
+): Archon.BackupsQueue.v1.BackupQueueBackup {
+	return {
+		id: 'backup-001',
+		name: 'Backup #5',
+		created_at: new Date(Date.now() - 1000 * 60 * 10).toISOString(),
+		automated: false,
+		status: 'done',
+		locked: false,
+		history: [],
+		...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 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 CommonStates: Story = {
+	render: () => ({
+		components: { BackupItem },
+		setup() {
+			const now = new Date(Date.now() - 1000 * 60 * 10).toISOString()
+
+			function makeBackup(
+				overrides: Partial<Archon.BackupsQueue.v1.BackupQueueBackup>,
+			): Archon.BackupsQueue.v1.BackupQueueBackup {
+				return {
+					id: 'backup-001',
+					name: 'Backup #5',
+					created_at: now,
+					automated: false,
+					status: 'done',
+					locked: false,
+					history: [],
+					...overrides,
+				}
+			}
+
+			return {
+				manual: makeBackup({ name: 'Base finished!!' }),
+				automated: makeBackup({ automated: true, name: 'Backup #2' }),
+			}
+		},
+		template: /* html */ `
+			<div style="display: flex; flex-direction: column; gap: 0.75rem; max-width: 900px;">
+				<BackupItem :backup="manual" />
+				<BackupItem :backup="automated" />
+				<BackupItem :backup="manual" preview />
+			</div>
+		`,
+	}),
+}

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

@@ -1,7 +1,7 @@
 import type { Archon, UploadState } from '@modrinth/api-client'
 import type { Stats } from '@modrinth/utils'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { computed, reactive, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import EditServerIcon from '../../components/servers/edit-server-icon/EditServerIcon.vue'
 import { provideModrinthServerContext } from '../../providers'
@@ -66,8 +66,6 @@ const meta = {
 					isServerRunning: computed(() => true),
 					stats,
 					uptimeSeconds: ref(0),
-					backupsState: reactive(new Map()),
-					markBackupCancelled: () => {},
 					isSyncingContent: ref(false),
 					busyReasons: computed(() => []),
 					fsAuth: ref(null),

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

@@ -23,6 +23,15 @@ export const WithProgress: Story = {
 	},
 }
 
+export const IndeterminateLoaderInstall: Story = {
+	args: {
+		progress: {
+			phase: 'InstallingLoader',
+			percent: 0,
+		},
+	},
+}
+
 export const InstallingModpack: Story = {
 	args: {
 		progress: {
@@ -97,6 +106,7 @@ export const AllStates: Story = {
 		template: /*html*/ `
 			<div style="display: flex; flex-direction: column; gap: 1rem;">
 				<InstallingBanner />
+				<InstallingBanner :progress="{ phase: 'InstallingLoader', percent: 0 }" />
 				<InstallingBanner :progress="{ phase: 'InstallingLoader', percent: 45 }" />
 				<InstallingBanner :content-error="{ step: 'modloader', description: 'the specified version may be incorrect' }" />
 				<InstallingBanner :content-error="{ step: 'modloader', description: 'this version is not yet supported' }" />

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

@@ -0,0 +1,270 @@
+import { RotateCounterClockwiseIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import Admonition from '../../components/base/Admonition.vue'
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+
+type AdmonitionType = 'info' | 'warning' | 'critical' | 'success'
+type ActionType = 'Cancel' | 'Retry' | 'Dismiss'
+type ProgressColor = 'blue' | 'green' | 'red'
+
+interface CopyExample {
+	title: string
+	body: string
+	type: AdmonitionType
+	action?: ActionType
+	dismissible?: boolean
+	progress?: number
+	progressColor?: ProgressColor
+	waiting?: boolean
+}
+
+interface CopySection {
+	title: string
+	items: CopyExample[]
+}
+
+const meta = {
+	title: 'Servers/ServerPanelAdmonitionCopyDraft',
+	component: Admonition,
+	parameters: {
+		layout: 'padded',
+	},
+} satisfies Meta<typeof Admonition>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sections: CopySection[] = [
+	{
+		title: 'Installation and content sync',
+		items: [
+			{
+				type: 'info',
+				title: "We're preparing your server",
+				body: 'Installing platform...',
+				progress: 45,
+				progressColor: 'blue',
+			},
+			{
+				type: 'info',
+				title: "We're preparing your server",
+				body: 'Installing modpack...',
+				progress: 72,
+				progressColor: 'blue',
+			},
+			{
+				type: 'critical',
+				title: 'Installation failed',
+				body: 'The specified loader or Minecraft version could not be installed. It may be invalid or unsupported.',
+				action: 'Retry',
+				dismissible: true,
+			},
+			{
+				type: 'critical',
+				title: 'Installation failed',
+				body: 'This modpack version does not include a downloadable file. It may have been packaged incorrectly.',
+				action: 'Retry',
+				dismissible: true,
+			},
+		],
+	},
+	{
+		title: 'Uploads and file operations',
+		items: [
+			{
+				type: 'info',
+				title: 'Uploading resourcepack.zip (1/3)',
+				body: '20 KB / 100 KB (20%)',
+				action: 'Cancel',
+				progress: 0.2,
+				progressColor: 'blue',
+			},
+			{
+				type: 'info',
+				title: 'Extracting story-modpack.mrpack',
+				body: '2 MB extracted. Current file: server.properties',
+				action: 'Cancel',
+				progress: 0.35,
+				progressColor: 'blue',
+			},
+			{
+				type: 'success',
+				title: 'Extracting story-modpack.mrpack finished',
+				body: '12 MB extracted',
+				progress: 1,
+				progressColor: 'green',
+			},
+			{
+				type: 'critical',
+				title: 'Extracting story-modpack.mrpack failed',
+				body: '2 MB extracted',
+				action: 'Dismiss',
+				dismissible: true,
+				progress: 0.35,
+				progressColor: 'red',
+			},
+		],
+	},
+	{
+		title: 'Backup creation',
+		items: [
+			{
+				type: 'info',
+				title: 'Backup queued',
+				body: 'World backup is queued and will start shortly.',
+				action: 'Cancel',
+			},
+			{
+				type: 'info',
+				title: 'Creating backup',
+				body: 'Saving world data and server configuration for World backup. This can take a few minutes.',
+				action: 'Cancel',
+				progress: 0.42,
+				progressColor: 'blue',
+			},
+			{
+				type: 'critical',
+				title: 'Backup failed',
+				body: 'Something went wrong while creating World backup. Please try again or contact support if the issue continues.',
+				action: 'Retry',
+				dismissible: true,
+			},
+			{
+				type: 'success',
+				title: 'Backup finished',
+				body: 'World backup finished successfully.',
+				action: 'Dismiss',
+				dismissible: true,
+			},
+		],
+	},
+	{
+		title: 'Backup restore',
+		items: [
+			{
+				type: 'info',
+				title: 'Restore queued',
+				body: 'Restoring from World backup is queued and will start shortly.',
+				action: 'Cancel',
+			},
+			{
+				type: 'info',
+				title: 'Restoring from backup',
+				body: 'Restoring your server from World backup. This may take a couple of minutes.',
+				action: 'Cancel',
+				progress: 0.65,
+				progressColor: 'blue',
+			},
+			{
+				type: 'critical',
+				title: 'Restore failed',
+				body: 'Something went wrong while restoring from World backup. Please try again or contact support if the issue continues.',
+				action: 'Retry',
+				dismissible: true,
+			},
+			{
+				type: 'success',
+				title: 'Restore finished',
+				body: 'Your server has been restored to World backup and is ready to start.',
+				action: 'Dismiss',
+				dismissible: true,
+			},
+		],
+	},
+	{
+		title: 'Busy states',
+		items: [
+			{
+				type: 'warning',
+				title: 'Background task running',
+				body: 'Please wait for the operation to complete before editing content.',
+			},
+			{
+				type: 'warning',
+				title: 'Background task running',
+				body: 'File operations are disabled while the operation is in progress.',
+			},
+		],
+	},
+]
+
+export const AllCopy: Story = {
+	render: () => ({
+		components: { Admonition, ButtonStyled, RotateCounterClockwiseIcon },
+		setup() {
+			return { sections }
+		},
+		template: /* html */ `
+			<div style="height: 100vh; overflow-y: auto; padding: 1rem 1rem 4rem 0;">
+				<div style="display: flex; max-width: 840px; flex-direction: column; gap: 2rem;">
+					<section v-for="section in sections" :key="section.title">
+					<h2 style="margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 700;">
+						{{ section.title }}
+					</h2>
+					<div style="display: flex; flex-direction: column; gap: 0.75rem;">
+						<Admonition
+							v-for="item in section.items"
+							:key="item.title + item.body"
+							:type="item.type"
+							:header="item.title"
+							:dismissible="item.dismissible"
+							:progress="item.progress != null ? (item.progress > 1 ? item.progress / 100 : item.progress) : undefined"
+							:progress-color="item.progressColor"
+							:waiting="item.waiting"
+						>
+							{{ item.body }}
+							<template
+								v-if="
+									item.action === 'Cancel' ||
+										item.action === 'Retry'
+									"
+									#top-right-actions
+								>
+									<ButtonStyled v-if="item.action === 'Cancel'" type="outlined" color="blue">
+										<button class="!border" type="button">Cancel</button>
+									</ButtonStyled>
+									<ButtonStyled
+										v-else
+										type="outlined"
+										color="red"
+									>
+										<button class="!border" type="button">
+											<RotateCounterClockwiseIcon class="size-5" />
+											Retry
+										</button>
+									</ButtonStyled>
+								</template>
+							</Admonition>
+						</div>
+					</section>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const TitleTreatmentExperiment: Story = {
+	render: () => ({
+		components: { Admonition, ButtonStyled, RotateCounterClockwiseIcon },
+		template: /* html */ `
+			<div style="max-width: 840px;">
+				<Admonition
+					type="critical"
+					header="Backup failed"
+					dismissible
+				>
+					Something went wrong while creating World backup. Please try again or contact support if the issue continues.
+					<template #top-right-actions>
+						<ButtonStyled type="outlined" color="red">
+							<button class="!border" type="button">
+								<RotateCounterClockwiseIcon class="size-5" />
+								Retry
+							</button>
+						</ButtonStyled>
+					</template>
+				</Admonition>
+			</div>
+		`,
+	}),
+}

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

@@ -0,0 +1,116 @@
+import type { Archon, UploadState } from '@modrinth/api-client'
+import type { Stats } from '@modrinth/utils'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import ServerPanelAdmonitions from '../../components/servers/admonitions/ServerPanelAdmonitions.vue'
+import { defineMessage } from '../../composables/i18n'
+import type { FileOperation } from '../../layouts/shared/files-tab/types'
+import { provideModrinthServerContext } from '../../providers'
+import type { ModrinthServerContext } from '../../providers/server-context'
+
+const meta = {
+	title: 'Servers/ServerPanelAdmonitions',
+	component: ServerPanelAdmonitions,
+	parameters: {
+		layout: 'padded',
+	},
+	decorators: [
+		(story) => ({
+			components: { story },
+			setup() {
+				const router = useRouter()
+				onMounted(() => {
+					router.replace('/hosting/manage/demo-server/content')
+				})
+
+				const server = ref({
+					server_id: 'demo-server',
+					status: 'running',
+					upstream: null,
+				} as Archon.Servers.v0.Server)
+
+				const stats = ref<Stats>({
+					current: {
+						cpu_percent: 0,
+						ram_usage_bytes: 0,
+						ram_total_bytes: 1,
+						storage_usage_bytes: 0,
+						storage_total_bytes: 0,
+					},
+					past: {
+						cpu_percent: 0,
+						ram_usage_bytes: 0,
+						ram_total_bytes: 1,
+						storage_usage_bytes: 0,
+						storage_total_bytes: 0,
+					},
+					graph: { cpu: [], ram: [] },
+				})
+
+				const uploadState = ref<UploadState>({
+					isUploading: true,
+					currentFileName: 'resourcepack.zip',
+					currentFileProgress: 0.2,
+					uploadedBytes: 20_000,
+					totalBytes: 100_000,
+					completedFiles: 1,
+					totalFiles: 3,
+				})
+
+				const fileOp = ref<FileOperation[]>([
+					{
+						id: 'fs-op-1',
+						op: 'extract',
+						src: 'story-modpack.mrpack',
+						state: 'running',
+						progress: 0.35,
+						bytes_processed: 2_000_000,
+					},
+				])
+
+				const serverContext: ModrinthServerContext = {
+					get serverId() {
+						return 'demo-server'
+					},
+					worldId: ref(null),
+					server,
+					isConnected: ref(true),
+					isWsAuthIncorrect: ref(false),
+					powerState: ref('running'),
+					powerStateDetails: ref(undefined),
+					isServerRunning: computed(() => true),
+					stats,
+					uptimeSeconds: ref(0),
+					isSyncingContent: ref(false),
+					busyReasons: computed(() => [
+						{ reason: defineMessage({ id: 's.bg', defaultMessage: 'Background task running' }) },
+					]),
+					fsAuth: ref(null),
+					fsOps: ref<Archon.Websocket.v0.FilesystemOperation[]>([]),
+					fsQueuedOps: ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([]),
+					refreshFsAuth: async () => {},
+					uploadState,
+					cancelUpload: ref(() => {
+						uploadState.value = { ...uploadState.value, isUploading: false }
+					}),
+					activeOperations: computed(() => fileOp.value),
+					dismissOperation: async (id) => {
+						fileOp.value = fileOp.value.filter((o) => o.id !== id)
+					},
+				}
+
+				provideModrinthServerContext(serverContext)
+				return {}
+			},
+			template: '<div style="max-width: 720px"><story /></div>',
+		}),
+	],
+} satisfies Meta<typeof ServerPanelAdmonitions>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const WithUploadFileOpAndBusy: Story = {}