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/layouts/shared/files-tab/components/FileOperationAdmonitions.vue

@@ -1,113 +0,0 @@
-<template>
-	<TransitionGroup
-		name="fs-op"
-		enter-active-class="transition-all duration-300 ease-out overflow-hidden"
-		enter-from-class="opacity-0 max-h-0"
-		enter-to-class="opacity-100 max-h-40"
-		leave-active-class="transition-all duration-200 ease-in overflow-hidden"
-		leave-from-class="opacity-100 max-h-40"
-		leave-to-class="opacity-0 max-h-0"
-	>
-		<Admonition
-			v-for="op in activeOperations"
-			:key="`fs-op-${op.op}-${op.src}`"
-			:type="op.state === 'done' ? 'success' : op.state?.startsWith('fail') ? 'critical' : 'info'"
-			class="mb-4"
-		>
-			<template #icon="{ iconClass }">
-				<PackageOpenIcon :class="iconClass" />
-			</template>
-			<template #header>
-				{{
-					formatMessage(messages.extracting, {
-						source: op.src.includes('https://') ? formatMessage(messages.modpackFromUrl) : op.src,
-					})
-				}}
-				<span v-if="op.state === 'done'" class="font-normal text-green">
-					— {{ formatMessage(commonMessages.doneLabel) }}</span
-				>
-				<span v-else-if="op.state?.startsWith('fail')" class="font-normal text-red">
-					— {{ formatMessage(messages.failed) }}</span
-				>
-			</template>
-			<span class="text-secondary">
-				{{
-					formatMessage(messages.extracted, {
-						size: 'bytes_processed' in op ? formatBytes(op.bytes_processed ?? 0) : '0 B',
-					})
-				}}
-				<template v-if="'current_file' in op && op.current_file">
-					— {{ op.current_file?.split('/')?.pop() }}
-				</template>
-			</span>
-			<template v-if="op.id" #top-right-actions>
-				<ButtonStyled
-					v-if="op.state !== 'done' && !op.state?.startsWith('fail')"
-					type="outlined"
-					color="blue"
-				>
-					<button class="!border" @click="ctx.dismissOperation(op.id!, 'cancel')">
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled
-					v-if="op.state === 'done' || op.state?.startsWith('fail')"
-					circular
-					type="transparent"
-					hover-color-fill="background"
-					:color="op.state === 'done' ? 'green' : 'red'"
-				>
-					<button @click="ctx.dismissOperation(op.id!, 'dismiss')">
-						<XIcon />
-					</button>
-				</ButtonStyled>
-			</template>
-			<template #progress>
-				<ProgressBar
-					:progress="'progress' in op ? (op.progress ?? 0) : 0"
-					:max="1"
-					:color="op.state === 'done' ? 'green' : op.state?.startsWith('fail') ? 'red' : 'blue'"
-					:waiting="op.state === 'queued' || !op.progress || op.progress === 0"
-					full-width
-				/>
-			</template>
-		</Admonition>
-	</TransitionGroup>
-</template>
-
-<script setup lang="ts">
-import { PackageOpenIcon, XIcon } from '@modrinth/assets'
-import { formatBytes } from '@modrinth/utils'
-
-import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import ProgressBar from '#ui/components/base/ProgressBar.vue'
-import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { injectModrinthServerContext } from '#ui/providers'
-import { commonMessages } from '#ui/utils/common-messages'
-
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	extracting: {
-		id: 'files.operations.extracting',
-		defaultMessage: 'Extracting {source}',
-	},
-	modpackFromUrl: {
-		id: 'files.operations.modpack-from-url',
-		defaultMessage: 'modpack from URL',
-	},
-	failed: {
-		id: 'files.operations.failed',
-		defaultMessage: 'Failed',
-	},
-	extracted: {
-		id: 'files.operations.extracted',
-		defaultMessage: '{size} extracted',
-	},
-})
-
-const ctx = injectModrinthServerContext()
-
-const activeOperations = ctx.activeOperations
-</script>

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

@@ -32,10 +32,6 @@
 		>
 	</FileContextMenu>
 	<div v-if="!(ctx.loading.value && items.length === 0)" class="contents">
-		<Admonition v-if="ctx.busyWarning?.value" type="warning" class="mb-5">
-			<template #header>{{ ctx.busyWarning.value }}</template>
-			{{ formatMessage(messages.busyWarning) }}
-		</Admonition>
 		<div class="relative flex w-full flex-col">
 			<div class="relative isolate flex w-full flex-col gap-4">
 				<FileNavbar
@@ -210,7 +206,6 @@ import {
 import type { Component } from 'vue'
 import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 
-import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
@@ -244,10 +239,6 @@ import type { FileContextMenuOption, FileItem } from './types'
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
-	busyWarning: {
-		id: 'files.layout.busy-warning',
-		defaultMessage: 'File operations are disabled while the operation is in progress.',
-	},
 	emptyFolderTitle: {
 		id: 'files.layout.empty-folder-title',
 		defaultMessage: 'This folder is empty',