fix: final content tab qa (#5611)

* fix: queued admonition always showing

* fix: dont apply grayscale to checkbox in content card item

* fix: actual stable id for disable/enable/bulk state

* fix: vue-router resolve workaround

* fix: show disable/enable btns same time

* fix: remove mr-2 on toggle

* fix: type errors + add ModpackAlreadyInstalledModal

* fix: bulk actions + overflow menu hitting ad container

* fix: responsiveness of ContentSelectionBar

* feat: better backup naming for inline backups + sorting fixes

* fix: lint

* fix: typo

packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue

@@ -100,15 +100,17 @@
 
 		<InlineBackupCreator
 			v-if="ctx.flowType === 'reset-server'"
-			backup-name="Before reinstall"
+			ref="backupCreator"
+			backup-name="Before reset server"
 			hide-shift-click-hint
+			@update:buttons-disabled="ctx.isBackingUp.value = $event"
 		/>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { EyeIcon, EyeOffIcon, SettingsIcon } from '@modrinth/assets'
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { useDebugLogger } from '#ui/composables/debug-logger'
 
@@ -125,6 +127,11 @@ import { capitalize } from '../shared'
 
 const debug = useDebugLogger('FinalConfigStage')
 const ctx = injectCreationFlowContext()
+
+const backupCreator = ref<InstanceType<typeof InlineBackupCreator> | null>(null)
+watch(backupCreator, (creator) => {
+	ctx.cancelBackup.value = creator?.cancelBackup ?? null
+})
 const {
 	worldName,
 	gamemode,

packages/ui/src/components/flows/creation-flow-modal/creation-flow-context.ts

@@ -115,6 +115,10 @@ export interface CreationFlowContextValue {
 	// Loading state (set when finish() is called, cleared on reset)
 	loading: Ref<boolean>
 
+	// Backup state (set by InlineBackupCreator in reset-server flow)
+	isBackingUp: Ref<boolean>
+	cancelBackup: Ref<(() => void) | null>
+
 	// Modal
 	modal: ShallowRef<ComponentExposed<typeof MultiStageModal> | null>
 	stageConfigs: StageConfigInput<CreationFlowContextValue>[]
@@ -240,6 +244,8 @@ export function createCreationFlowContext(
 
 	const hardReset = ref(isInitialSetup)
 	const loading = ref(false)
+	const isBackingUp = ref(false)
+	const cancelBackup = ref<(() => void) | null>(null)
 
 	// hideLoaderChips: hides the entire loader chips section (only for vanilla world type in world/server flows)
 	const hideLoaderChips = computed(() => setupType.value === 'vanilla')
@@ -292,6 +298,8 @@ export function createCreationFlowContext(
 
 		hardReset.value = isInitialSetup
 		loading.value = false
+		isBackingUp.value = false
+		cancelBackup.value = null
 	}
 
 	function setSetupType(type: SetupType) {
@@ -401,6 +409,8 @@ export function createCreationFlowContext(
 		importSearchQuery,
 		hardReset,
 		loading,
+		isBackingUp,
+		cancelBackup,
 		modal,
 		stageConfigs: resolvedStageConfigs,
 		onBack,

packages/ui/src/components/flows/creation-flow-modal/index.vue

@@ -5,7 +5,7 @@
 		:context="ctx"
 		:fade="fade"
 		disable-progress
-		@hide="$emit('hide')"
+		@hide="handleHide"
 	/>
 </template>
 
@@ -89,5 +89,10 @@ function hide() {
 	modal.value?.hide()
 }
 
+function handleHide() {
+	ctx.cancelBackup.value?.()
+	emit('hide')
+}
+
 defineExpose({ show, hide, ctx })
 </script>

packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts

@@ -44,7 +44,7 @@ export const stageConfig: StageConfigInput<CreationFlowContextValue> = {
 			icon: isFinish ? PlusIcon : RightArrowIcon,
 			iconPosition: isFinish ? ('before' as const) : ('after' as const),
 			color: isReset ? ('red' as const) : isFinish ? ('brand' as const) : undefined,
-			disabled: isForwardBlocked(ctx),
+			disabled: isForwardBlocked(ctx) || ctx.isBackingUp.value,
 			loading: isFinish && ctx.loading.value,
 			onClick: () => {
 				if (isFinish) {