fix: content tab fixes (#5543)

* fix: search again

* fix: navigation bug

* fix: switch to stable key for toggle disable

* feat: inline backup slow warning icon

* fix: qa

* feat: fix installation state

packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue

@@ -3,6 +3,7 @@ import {
 	DownloadIcon,
 	MoreVerticalIcon,
 	OrganizationIcon,
+	SpinnerIcon,
 	TrashIcon,
 	TriangleAlertIcon,
 } from '@modrinth/assets'
@@ -33,6 +34,7 @@ interface Props {
 	versionLink?: string | RouteLocationRaw
 	owner?: ContentOwner
 	enabled?: boolean
+	installing?: boolean
 	hasUpdate?: boolean
 	isClientOnly?: boolean
 	overflowOptions?: OverflowMenuOption[]
@@ -48,6 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
 	versionLink: undefined,
 	owner: undefined,
 	enabled: undefined,
+	installing: false,
 	hasUpdate: false,
 	isClientOnly: false,
 	overflowOptions: undefined,
@@ -95,13 +98,21 @@ const fileNameRef = ref<HTMLElement | null>(null)
 			/>
 
 			<div class="flex min-w-0 items-center gap-3">
-				<Avatar
-					:src="project.icon_url"
-					:alt="project.title"
-					size="3rem"
-					no-shadow
-					class="shrink-0 rounded-2xl border border-surface-5"
-				/>
+				<div v-tooltip="installing ? formatMessage(commonMessages.installingLabel) : undefined" class="relative shrink-0">
+					<Avatar
+						:src="project.icon_url"
+						:alt="project.title"
+						size="3rem"
+						no-shadow
+						class="rounded-2xl border border-surface-5"
+					/>
+					<div
+						v-if="installing"
+						class="absolute inset-0 flex items-center justify-center rounded-2xl bg-black/20"
+					>
+						<SpinnerIcon class="size-5 animate-spin text-white" />
+					</div>
+				</div>
 				<div class="flex min-w-0 flex-col gap-0.5">
 					<div class="flex min-w-0 items-center gap-1">
 						<AutoLink

packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
-import { computed, getCurrentInstance, ref, toRef } from 'vue'
+import { computed, getCurrentInstance, onMounted, onUnmounted, ref, toRef } from 'vue'
 
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import { useVIntl } from '#ui/composables/i18n'
@@ -112,14 +112,43 @@ function toggleSelectAll() {
 	}
 }
 
-function toggleItemSelection(itemId: string, selected: boolean) {
-	if (selected) {
+const lastSelectedIndex = ref<number | null>(null)
+const shiftHeld = ref(false)
+
+function onKeyDown(e: KeyboardEvent) {
+	if (e.key === 'Shift') shiftHeld.value = true
+}
+function onKeyUp(e: KeyboardEvent) {
+	if (e.key === 'Shift') shiftHeld.value = false
+}
+
+onMounted(() => {
+	window.addEventListener('keydown', onKeyDown)
+	window.addEventListener('keyup', onKeyUp)
+})
+onUnmounted(() => {
+	window.removeEventListener('keydown', onKeyDown)
+	window.removeEventListener('keyup', onKeyUp)
+})
+
+function toggleItemSelection(itemId: string, selected: boolean, index?: number) {
+	if (selected && shiftHeld.value && lastSelectedIndex.value !== null && index !== undefined) {
+		const start = Math.min(lastSelectedIndex.value, index)
+		const end = Math.max(lastSelectedIndex.value, index)
+		const rangeIds = props.items.slice(start, end + 1).map((item) => item.id)
+		const merged = new Set([...selectedIds.value, ...rangeIds])
+		selectedIds.value = [...merged]
+	} else if (selected) {
 		if (!selectedIds.value.includes(itemId)) {
 			selectedIds.value = [...selectedIds.value, itemId]
 		}
 	} else {
 		selectedIds.value = selectedIds.value.filter((id) => id !== itemId)
 	}
+
+	if (index !== undefined) {
+		lastSelectedIndex.value = index
+	}
 }
 
 function isItemSelected(itemId: string): boolean {
@@ -241,6 +270,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 					:version-link="item.versionLink"
 					:owner="item.owner"
 					:enabled="item.enabled"
+					:installing="item.installing"
 					:has-update="item.hasUpdate"
 					:is-client-only="item.isClientOnly"
 					:overflow-options="item.overflowOptions"
@@ -254,7 +284,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 						'border-0 border-t border-solid border-surface-4',
 						visibleRange.start + idx === items.length - 1 && !flat ? 'rounded-b-[20px]' : '',
 					]"
-					@update:selected="(val) => toggleItemSelection(item.id, val ?? false)"
+					@update:selected="(val) => toggleItemSelection(item.id, val ?? false, visibleRange.start + idx)"
 					@update:enabled="(val) => emit('update:enabled', item.id, val)"
 					@delete="emit('delete', item.id)"
 					@update="emit('update', item.id)"
@@ -285,6 +315,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 				:version-link="item.versionLink"
 				:owner="item.owner"
 				:enabled="item.enabled"
+				:installing="item.installing"
 				:has-update="item.hasUpdate"
 				:overflow-options="item.overflowOptions"
 				:disabled="item.disabled"
@@ -297,7 +328,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 					'border-0 border-t border-solid border-surface-4',
 					index === items.length - 1 && !flat ? 'rounded-b-[20px]' : '',
 				]"
-				@update:selected="(val) => toggleItemSelection(item.id, val ?? false)"
+				@update:selected="(val) => toggleItemSelection(item.id, val ?? false, index)"
 				@update:enabled="(val) => emit('update:enabled', item.id, val)"
 				@delete="emit('delete', item.id)"
 				@update="emit('update', item.id)"

packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue

@@ -3,11 +3,8 @@
 		<span class="text-primary">
 			{{ formatMessage(messages.warningBody, { type: backup.isServer ? 'server' : 'instance' }) }}
 		</span>
-		<span v-if="backup.isServer" class="text-brand-orange font-semibold">
-			{{ formatMessage(messages.backupTakesAWhile) }}
-		</span>
 
-		<div v-if="backup.available">
+		<div v-if="backup.available" class="flex items-center gap-2">
 			<!-- Button / Loading state -->
 			<ButtonStyled v-if="!backup.backupComplete.value && !backup.backupFailed.value">
 				<button
@@ -39,12 +36,18 @@
 			<div v-else-if="backup.backupFailed.value" class="text-sm text-red">
 				{{ formatMessage(messages.backupFailed) }}
 			</div>
+
+			<TriangleAlertIcon
+				v-if="backup.isServer"
+				v-tooltip="formatMessage(messages.backupTakesAWhile)"
+				class="size-5 shrink-0 text-brand-orange hover:brightness-110"
+			/>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { CheckCircleIcon, PlusIcon, SpinnerIcon } from '@modrinth/assets'
+import { CheckCircleIcon, PlusIcon, SpinnerIcon, TriangleAlertIcon } from '@modrinth/assets'
 import { watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'

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

@@ -230,6 +230,7 @@ const tableItems = computed<ContentCardTableItem[]>(() =>
 		return {
 			...base,
 			disabled: isChanging(base.id) || ctx.isBusy.value || item.installing === true,
+			installing: item.installing === true,
 			hasUpdate: !ctx.isPackLocked.value && item.has_update,
 			isClientOnly: isClientOnlyEnvironment(item.environment),
 			overflowOptions: ctx.getOverflowOptions?.(item),
@@ -542,7 +543,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 						</div>
 					</div>
 
-					<div class="flex flex-wrap items-center justify-between gap-2">
+					<div class="@container flex flex-wrap items-center justify-between gap-2">
 						<div class="flex flex-wrap items-center gap-1.5">
 							<FilterIcon class="size-5 text-secondary" />
 							<button
@@ -571,22 +572,36 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 							>
 								{{ option.label }}
 							</button>
-							<div class="ml-4 mx-0.5 h-5 w-px bg-surface-5" />
-
-							<ButtonStyled type="transparent" hover-color-fill="none">
-								<button
-									:aria-label="
-										formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
-									"
-									@click="cycleSortMode"
-								>
-									<ArrowUpDownIcon />
-									{{ sortLabels[sortMode]() }}
-								</button>
-							</ButtonStyled>
+							<div class="hidden @[900px]:block">
+								<ButtonStyled type="transparent" hover-color-fill="none">
+									<button
+										:aria-label="
+											formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
+										"
+										@click="cycleSortMode"
+									>
+										<ArrowUpDownIcon />
+										{{ sortLabels[sortMode]() }}
+									</button>
+								</ButtonStyled>
+							</div>
 						</div>
 
 						<div class="flex items-center gap-2">
+							<div class="@[900px]:hidden">
+								<ButtonStyled type="transparent" hover-color-fill="none">
+									<button
+										:aria-label="
+											formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
+										"
+										@click="cycleSortMode"
+									>
+										<ArrowUpDownIcon />
+										{{ sortLabels[sortMode]() }}
+									</button>
+								</ButtonStyled>
+							</div>
+
 							<ButtonStyled
 								v-if="hasBulkUpdateSupport && !ctx.isPackLocked.value && hasOutdatedProjects"
 								color="green"

packages/ui/src/layouts/shared/content-tab/types.ts

@@ -30,6 +30,7 @@ export interface ContentCardTableItem {
 	owner?: ContentOwner
 	enabled?: boolean
 	disabled?: boolean
+	installing?: boolean
 	hasUpdate?: boolean
 	isClientOnly?: boolean
 	overflowOptions?: OverflowMenuOption[]

packages/ui/src/layouts/wrapped/hosting/manage/content.vue

@@ -61,6 +61,22 @@ const messages = defineMessages({
 		id: 'hosting.content.failed-to-update',
 		defaultMessage: 'Failed to update',
 	},
+	failedToBulkDelete: {
+		id: 'hosting.content.failed-to-bulk-delete',
+		defaultMessage: 'Failed to delete content',
+	},
+	failedToBulkEnable: {
+		id: 'hosting.content.failed-to-bulk-enable',
+		defaultMessage: 'Failed to enable content',
+	},
+	failedToBulkDisable: {
+		id: 'hosting.content.failed-to-bulk-disable',
+		defaultMessage: 'Failed to disable content',
+	},
+	failedToBulkUpdate: {
+		id: 'hosting.content.failed-to-bulk-update',
+		defaultMessage: 'Failed to update content',
+	},
 })
 
 const props = withDefaults(
@@ -208,7 +224,8 @@ const deleteMutation = useMutation({
 		}
 		addNotification({
 			type: 'error',
-			text: err instanceof Error ? err.message : formatMessage(messages.failedToRemoveContent),
+			title: formatMessage(messages.failedToRemoveContent),
+			text: err instanceof Error ? err.message : undefined,
 		})
 	},
 })
@@ -241,7 +258,7 @@ const toggleMutation = useMutation({
 	onError: (_err, { addon }) => {
 		addNotification({
 			type: 'error',
-			text: formatMessage(messages.failedToToggle, { name: friendlyAddonName(addon) }),
+			title: formatMessage(messages.failedToToggle, { name: friendlyAddonName(addon) }),
 		})
 	},
 })
@@ -269,22 +286,46 @@ function itemsToAddonRequests(items: ContentItem[]): Archon.Content.v1.RemoveAdd
 async function handleBulkDelete(items: ContentItem[]) {
 	const requests = itemsToAddonRequests(items)
 	if (requests.length === 0) return
-	await client.archon.content_v1.deleteAddons(serverId, worldId.value!, requests)
-	await queryClient.invalidateQueries({ queryKey: queryKey.value })
+	try {
+		await client.archon.content_v1.deleteAddons(serverId, worldId.value!, requests)
+		await queryClient.invalidateQueries({ queryKey: queryKey.value })
+	} catch (err) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.failedToBulkDelete),
+			text: err instanceof Error ? err.message : undefined,
+		})
+	}
 }
 
 async function handleBulkEnable(items: ContentItem[]) {
 	const requests = itemsToAddonRequests(items)
 	if (requests.length === 0) return
-	await client.archon.content_v1.enableAddons(serverId, worldId.value!, requests)
-	await queryClient.invalidateQueries({ queryKey: queryKey.value })
+	try {
+		await client.archon.content_v1.enableAddons(serverId, worldId.value!, requests)
+		await queryClient.invalidateQueries({ queryKey: queryKey.value })
+	} catch (err) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.failedToBulkEnable),
+			text: err instanceof Error ? err.message : undefined,
+		})
+	}
 }
 
 async function handleBulkDisable(items: ContentItem[]) {
 	const requests = itemsToAddonRequests(items)
 	if (requests.length === 0) return
-	await client.archon.content_v1.disableAddons(serverId, worldId.value!, requests)
-	await queryClient.invalidateQueries({ queryKey: queryKey.value })
+	try {
+		await client.archon.content_v1.disableAddons(serverId, worldId.value!, requests)
+		await queryClient.invalidateQueries({ queryKey: queryKey.value })
+	} catch (err) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.failedToBulkDisable),
+			text: err instanceof Error ? err.message : undefined,
+		})
+	}
 }
 
 const uploadState = ref<UploadState>({
@@ -396,7 +437,8 @@ function handleUploadFiles() {
 			if (err instanceof Error && err.message === 'Upload cancelled') return
 			addNotification({
 				type: 'error',
-				text: err instanceof Error ? err.message : formatMessage(messages.failedToUpload),
+				title: formatMessage(messages.failedToUpload),
+				text: err instanceof Error ? err.message : undefined,
 			})
 		} finally {
 			activeUploadCancel = null
@@ -458,7 +500,8 @@ async function handleViewModpackContent() {
 		modpackContentModal.value?.hide()
 		addNotification({
 			type: 'error',
-			text: err instanceof Error ? err.message : formatMessage(messages.failedToLoadModpackContent),
+			title: formatMessage(messages.failedToLoadModpackContent),
+			text: err instanceof Error ? err.message : undefined,
 		})
 	}
 }
@@ -500,14 +543,18 @@ async function handleModpackBulkToggle(items: ContentItem[], enable: boolean) {
 			await client.archon.content_v1.disableAddons(serverId, worldId.value!, requests)
 		}
 		await queryClient.invalidateQueries({ queryKey: queryKey.value })
-	} catch {
-		// Revert
+	} catch (err) {
 		for (const item of items) {
 			modpackAddons.value = modpackAddons.value.map((a) =>
 				a.filename === item.file_name ? { ...a, disabled: enable } : a,
 			)
 			modpackContentModal.value?.updateItem(item.file_name, { enabled: !enable })
 		}
+		addNotification({
+			type: 'error',
+			title: formatMessage(enable ? messages.failedToBulkEnable : messages.failedToBulkDisable),
+			text: err instanceof Error ? err.message : undefined,
+		})
 	}
 }
 
@@ -522,7 +569,8 @@ async function handleModpackUnlinkConfirm() {
 	} catch (err) {
 		addNotification({
 			type: 'error',
-			text: err instanceof Error ? err.message : formatMessage(messages.failedToUnlink),
+			title: formatMessage(messages.failedToUnlink),
+			text: err instanceof Error ? err.message : undefined,
 		})
 	}
 }
@@ -535,8 +583,16 @@ async function handleBulkUpdate(items: ContentItem[]) {
 			version_id: item.update_version_id ?? undefined,
 		}))
 	if (addons.length === 0) return
-	await client.archon.content_v1.updateAddons(serverId, worldId.value!, addons)
-	await queryClient.invalidateQueries({ queryKey: queryKey.value })
+	try {
+		await client.archon.content_v1.updateAddons(serverId, worldId.value!, addons)
+		await queryClient.invalidateQueries({ queryKey: queryKey.value })
+	} catch (err) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.failedToBulkUpdate),
+			text: err instanceof Error ? err.message : undefined,
+		})
+	}
 }
 
 async function handleUpdateItem(fileNameKey: string) {
@@ -564,7 +620,8 @@ async function handleUpdateItem(fileNameKey: string) {
 	} catch (err) {
 		addNotification({
 			type: 'error',
-			text: err instanceof Error ? err.message : formatMessage(messages.failedToLoadVersions),
+			title: formatMessage(messages.failedToLoadVersions),
+			text: err instanceof Error ? err.message : undefined,
 		})
 	} finally {
 		loadingVersions.value = false
@@ -593,7 +650,7 @@ async function handleModpackUpdate() {
 
 	await nextTick()
 
-	contentUpdaterModal.value?.show(mp.spec.version_id ?? undefined)
+	contentUpdaterModal.value?.show(mp.has_update ?? undefined)
 
 	if (!cached) {
 		try {
@@ -607,7 +664,8 @@ async function handleModpackUpdate() {
 		} catch (err) {
 			addNotification({
 				type: 'error',
-				text: err instanceof Error ? err.message : formatMessage(messages.failedToLoadVersions),
+				title: formatMessage(messages.failedToLoadVersions),
+			text: err instanceof Error ? err.message : undefined,
 			})
 		} finally {
 			loadingVersions.value = false
@@ -698,7 +756,8 @@ async function performUpdate(selectedVersion: Labrinth.Versions.v2.Version) {
 	} catch (err) {
 		addNotification({
 			type: 'error',
-			text: err instanceof Error ? err.message : formatMessage(messages.failedToUpdate),
+			title: formatMessage(messages.failedToUpdate),
+			text: err instanceof Error ? err.message : undefined,
 		})
 	} finally {
 		resetUpdateState()