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/base/FloatingActionBar.vue

@@ -1,11 +1,48 @@
 <script setup lang="ts">
-import { onUnmounted, watch } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps<{
 	shown: boolean
 	ariaLabel?: string
 }>()
 
+const toolbarEl = ref<HTMLElement | null>(null)
+const compact = ref(false)
+
+function checkCompact() {
+	const el = toolbarEl.value
+	if (!el) return
+
+	const clone = el.cloneNode(true) as HTMLElement
+	clone.classList.remove('bar-compact')
+	clone.style.position = 'absolute'
+	clone.style.visibility = 'hidden'
+	clone.style.pointerEvents = 'none'
+	clone.style.width = `${el.offsetWidth}px`
+
+	el.parentElement!.appendChild(clone)
+	const needsCompact = clone.offsetHeight > 70
+	clone.remove()
+
+	compact.value = needsCompact
+}
+
+let observer: ResizeObserver | null = null
+
+watch(
+	toolbarEl,
+	(el) => {
+		observer?.disconnect()
+		if (!el) return
+		observer = new ResizeObserver(() => {
+			checkCompact()
+		})
+		observer.observe(el.parentElement!)
+		checkCompact()
+	},
+	{ immediate: true },
+)
+
 watch(
 	() => props.shown,
 	(shown) => {
@@ -15,6 +52,7 @@ watch(
 )
 
 onUnmounted(() => {
+	observer?.disconnect()
 	document?.body.classList.remove('floating-action-bar-shown')
 })
 </script>
@@ -27,9 +65,11 @@ onUnmounted(() => {
 			aria-live="polite"
 		>
 			<div
+				ref="toolbarEl"
 				role="toolbar"
 				:aria-label="ariaLabel"
 				class="relative overflow-clip flex items-center gap-2 rounded-[20px] bg-surface-3 border border-surface-5 border-solid mx-auto max-w-[60vw] px-4 py-3 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.3),0px_6px_10px_0px_rgba(0,0,0,0.15)]"
+				:class="{ 'bar-compact': compact }"
 			>
 				<slot />
 			</div>
@@ -81,4 +121,12 @@ onUnmounted(() => {
 .intercom-lightweight-app-launcher {
 	z-index: 9 !important;
 }
+
+.bar-compact .bar-label {
+	display: none;
+}
+
+.bar-compact .cq-show-icon {
+	display: block;
+}
 </style>

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) {

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

@@ -109,7 +109,7 @@ const description = computed(() => {
 const messages = defineMessages({
 	fallbackName: {
 		id: 'servers.backups.admonition.fallback-name',
-		defaultMessage: 'your backup',
+		defaultMessage: 'Your backup',
 	},
 	backupQueuedTitle: {
 		id: 'servers.backups.admonition.backup-queued.title',

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

@@ -84,10 +84,10 @@ const admonitions = computed<AdmonitionEntry[]>(() => {
 	// 1. Active WS entries (real-time progress from backupsState)
 	for (const [id, entry] of backupsState.entries()) {
 		const backup = findBackup(id)
+		seenIds.add(id)
 		if (entry.create && entry.create.state === 'ongoing') {
 			const key = `${id}:create`
 			if (!dismissedIds.has(key)) {
-				seenIds.add(id)
 				result.push({
 					key,
 					backupId: id,
@@ -102,7 +102,6 @@ const admonitions = computed<AdmonitionEntry[]>(() => {
 		if (entry.restore && entry.restore.state === 'ongoing') {
 			const key = `${id}:restore`
 			if (!dismissedIds.has(key)) {
-				seenIds.add(id)
 				result.push({
 					key,
 					backupId: id,

packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue

@@ -178,10 +178,10 @@ const calculateMenuPosition = () => {
 		top = Math.max(margin, window.innerHeight - menuHeight - margin)
 	}
 
-	if (triggerRect.left + menuWidth + margin <= window.innerWidth) {
-		left = triggerRect.left
-	} else if (triggerRect.right - menuWidth - margin >= 0) {
+	if (triggerRect.right - menuWidth >= margin) {
 		left = triggerRect.right - menuWidth
+	} else if (triggerRect.left + menuWidth + margin <= window.innerWidth) {
+		left = triggerRect.left
 	} else {
 		left = Math.max(margin, window.innerWidth - menuWidth - margin)
 	}