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

apps/app-frontend/src/components/ui/SearchCard.vue

@@ -1,6 +1,6 @@
 <template>
 	<ProjectCard
-		:title="project.title"
+		:title="project.name"
 		:link="
 			() => {
 				emit('open')
@@ -12,7 +12,7 @@
 		"
 		:author="{ name: project.author, link: `https://modrinth.com/user/${project.author}` }"
 		:icon-url="project.icon_url"
-		:summary="project.description"
+		:summary="project.summary"
 		:tags="project.display_categories"
 		:all-tags="project.categories"
 		:downloads="project.downloads"
@@ -20,16 +20,6 @@
 		:date-updated="project.date_modified"
 		:banner="project.featured_gallery ?? undefined"
 		:color="project.color ?? undefined"
-		:environment="
-			projectType
-				? ['mod', 'modpack'].includes(projectType)
-					? {
-							clientSide: project.client_side,
-							serverSide: project.server_side,
-						}
-					: undefined
-				: undefined
-		"
 		layout="list"
 	>
 		<template #actions>
@@ -140,5 +130,5 @@ async function install() {
 	).catch(handleError)
 }
 
-const modpack = computed(() => props.project.project_type === 'modpack')
+const modpack = computed(() => props.project.project_types?.includes('modpack'))
 </script>

apps/app-frontend/src/pages/Browse.vue

@@ -40,7 +40,7 @@ import type Instance from '@/components/ui/Instance.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
 import NavTabs from '@/components/ui/NavTabs.vue'
 import SearchCard from '@/components/ui/SearchCard.vue'
-import { get_project_v3, get_search_results, get_search_results_v3 } from '@/helpers/cache.js'
+import { get_project_v3, get_search_results_v3 } from '@/helpers/cache.js'
 import { process_listener } from '@/helpers/events'
 import { get_by_profile_path } from '@/helpers/process'
 import {
@@ -186,6 +186,21 @@ const instanceFilters = computed(() => {
 				option: 'client',
 			})
 		}
+
+		if (
+			instanceHideInstalled.value &&
+			(installedProjectIds.value || newlyInstalled.value.length > 0)
+		) {
+			const allInstalled = [...(installedProjectIds.value ?? []), ...newlyInstalled.value]
+
+			allInstalled
+				.map((x) => ({
+					type: 'project_id',
+					option: `project_id:${x}`,
+					negative: true,
+				}))
+				.forEach((x) => filters.push(x))
+		}
 	}
 
 	debugLog('instanceFilters result', filters)
@@ -338,13 +353,13 @@ watch(projectType, () => {
 	loading.value = true
 })
 
-interface SearchResults extends Labrinth.Search.v2.SearchResults {
+interface SearchResults extends Labrinth.Search.v3.SearchResults {
-	hits: (Labrinth.Search.v2.ResultSearchProject & { installed?: boolean })[]
+	hits: (Labrinth.Search.v3.ResultSearchProject & { installed?: boolean })[]
 }
 
 const results: Ref<SearchResults | null> = shallowRef(null)
 const pageCount = computed(() =>
-	results.value ? Math.ceil(results.value.total_hits / results.value.limit) : 1,
+	results.value ? Math.ceil(results.value.total_hits / results.value.hits_per_page) : 1,
 )
 
 const effectiveRequestParams = computed(() => {
@@ -364,10 +379,6 @@ watch(effectiveRequestParams, () => {
 	}, 200)
 })
 
-watch(instanceHideInstalled, () => {
-	debugLog('instanceHideInstalled changed', instanceHideInstalled.value)
-	refreshSearch()
-})
 
 async function refreshSearch() {
 	const version = ++searchVersion
@@ -375,23 +386,34 @@ async function refreshSearch() {
 
 	try {
 		const isServer = projectType.value === 'server'
+		const searchParams = isServer ? serverRequestParams.value : requestParams.value
+
+		debugLog('searching v3', searchParams)
+		let rawResults = (await get_search_results_v3(searchParams)) as {
+			result: SearchResults
+		} | null
+
+		if (version !== searchVersion) {
+			debugLog('search version stale, discarding', { version, current: searchVersion })
+			return
+		}
+
+		if (!rawResults) {
+			rawResults = {
+				result: {
+					hits: [],
+					total_hits: 0,
+					hits_per_page: maxResults.value,
+					page: 1,
+				},
+			}
+		}
 
 		if (isServer) {
-			debugLog('searching v3 (server)', serverRequestParams.value)
+			const hits = rawResults.result.hits ?? []
-			const rawResults = (await get_search_results_v3(serverRequestParams.value)) as {
-				result: Labrinth.Search.v3.SearchResults
-			} | null
-
-			if (version !== searchVersion) {
-				debugLog('search version stale, discarding', { version, current: searchVersion })
-				return
-			}
-
-			const searchResults = rawResults?.result ?? { hits: [], total_hits: 0 }
-			const hits = searchResults.hits ?? []
 			debugLog('server search results', {
 				hitCount: hits.length,
-				totalHits: searchResults.total_hits,
+				totalHits: rawResults.result.total_hits,
 			})
 			serverHits.value = hits
 			serverPings.value = {}
@@ -399,31 +421,11 @@ async function refreshSearch() {
 			checkServerRunningStates(hits)
 			results.value = {
 				hits: [],
-				total_hits: searchResults.total_hits ?? 0,
+				total_hits: rawResults.result.total_hits ?? 0,
-				limit: maxResults.value,
+				hits_per_page: maxResults.value,
-				offset: 0,
+				page: 1,
 			}
 		} else {
-			debugLog('searching v2', requestParams.value)
-			let rawResults = (await get_search_results(requestParams.value)) as {
-				result: SearchResults
-			} | null
-
-			if (version !== searchVersion) {
-				debugLog('search version stale, discarding', { version, current: searchVersion })
-				return
-			}
-
-			if (!rawResults) {
-				rawResults = {
-					result: {
-						hits: [],
-						total_hits: 0,
-						limit: 1,
-						offset: 0,
-					},
-				}
-			}
 			if (instance.value) {
 				const allInstalledIds = new Set([
 					...newlyInstalled.value,
@@ -434,12 +436,8 @@ async function refreshSearch() {
 					...val,
 					installed: allInstalledIds.has(val.project_id),
 				}))
-
-				if (instanceHideInstalled.value) {
-					rawResults.result.hits = rawResults.result.hits.filter((val) => !val.installed)
-				}
 			}
-			debugLog('v2 search results', {
+			debugLog('v3 search results', {
 				hitCount: rawResults.result.hits.length,
 				totalHits: rawResults.result.total_hits,
 			})
@@ -671,11 +669,11 @@ const handleRightClick = (event, result) => {
 const handleOptionsClick = (args) => {
 	switch (args.option) {
 		case 'open_link':
-			openUrl(`https://modrinth.com/${args.item.project_type}/${args.item.slug}`)
+			openUrl(`https://modrinth.com/${args.item.project_types?.[0] ?? 'project'}/${args.item.slug}`)
 			break
 		case 'copy_link':
 			navigator.clipboard.writeText(
-				`https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
+				`https://modrinth.com/${args.item.project_types?.[0] ?? 'project'}/${args.item.slug}`,
 			)
 			break
 	}
@@ -887,7 +885,7 @@ previousFilterState.value = JSON.stringify({
 						exclude-loaders
 						@contextmenu.prevent.stop="
 							(event: any) =>
-								handleRightClick(event, { project_type: 'server', slug: project.slug })
+								handleRightClick(event, { project_types: ['server'], slug: project.slug })
 						"
 					>
 						<template #actions>

apps/app-frontend/src/pages/instance/Mods.vue

@@ -76,6 +76,7 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { ContentCardLayout as ContentPageLayout } from '@modrinth/ui'
+import { useDebounceFn } from '@vueuse/core'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import { open } from '@tauri-apps/plugin-dialog'
 import { openUrl } from '@tauri-apps/plugin-opener'
@@ -174,12 +175,34 @@ const props = defineProps<{
 
 const loading = ref(true)
 const projects = ref<ContentItem[]>([])
+
+const installingBuffer = ref<ContentItem[]>([])
+
+watch(
+	() => installingItems.value.get(props.instance.path),
+	(items) => {
+		if (items && items.length > 0) {
+			installingBuffer.value = [...items]
+		}
+	},
+	{ immediate: true, deep: true },
+)
+
+watch(projects, (newProjects) => {
+	if (installingBuffer.value.length === 0) return
+	const realProjectIds = new Set(newProjects.map((p) => p.project?.id).filter(Boolean))
+	if (installingBuffer.value.every((item) => realProjectIds.has(item.project?.id))) {
+		installingBuffer.value = []
+	}
+})
+
 const mergedProjects = computed<ContentItem[]>(() => {
-	const pending = installingItems.value.get(props.instance.path) ?? []
+	const active = installingItems.value.get(props.instance.path)
+	const pending = active ?? installingBuffer.value
 	if (pending.length === 0) return projects.value
 	const realProjectIds = new Set(projects.value.map((p) => p.project?.id).filter(Boolean))
 	const placeholders = pending.filter((item) => !realProjectIds.has(item.project?.id))
-	return [...projects.value, ...placeholders]
+	return placeholders.length > 0 ? [...projects.value, ...placeholders] : projects.value
 })
 
 const linkedModpackProject = ref<ContentModpackCardProject | null>(null)
@@ -252,7 +275,7 @@ async function handleUploadFiles() {
 	}
 }
 
-async function toggleDisableMod(mod: ContentItem) {
+async function _toggleDisableMod(mod: ContentItem) {
 	try {
 		mod.file_path = await toggle_disable_project(props.instance.path, mod.file_path!)
 		mod.enabled = !mod.enabled
@@ -270,6 +293,8 @@ async function toggleDisableMod(mod: ContentItem) {
 	}
 }
 
+const toggleDisableMod = useDebounceFn(_toggleDisableMod, 20)
+
 async function removeMod(mod: ContentItem) {
 	await remove_project(props.instance.path, mod.file_path!).catch(handleError)
 	projects.value = projects.value.filter((x) => mod.file_path !== x.file_path)
@@ -354,9 +379,7 @@ async function handleModpackContentToggle(item: ContentItem) {
 }
 
 async function handleModpackContentBulkToggle(items: ContentItem[]) {
-	for (const item of items) {
+	await Promise.all(items.map((item) => toggleDisableMod(item)))
-		await toggleDisableMod(item)
-	}
 }
 
 async function handleModpackContent() {
@@ -676,7 +699,10 @@ provideContentManager({
 	getItemId: (item) => item.file_name,
 	contentTypeLabel: ref(formatMessage(messages.contentTypeProject)),
 	toggleEnabled: toggleDisableMod,
+	bulkEnableItems: (items) => Promise.all(items.map((item) => toggleDisableMod(item))).then(() => {}),
+	bulkDisableItems: (items) => Promise.all(items.map((item) => toggleDisableMod(item))).then(() => {}),
 	deleteItem: removeMod,
+	bulkDeleteItems: (items) => Promise.all(items.map((item) => removeMod(item))).then(() => {}),
 	refresh: () => initProjects('must_revalidate'),
 	browse: handleBrowseContent,
 	uploadFiles: handleUploadFiles,
@@ -699,27 +725,17 @@ provideContentManager({
 			title: item.file_name.replace('.disabled', ''),
 			icon_url: null,
 		},
-		projectLink: item.installing
+		projectLink: item.project?.id
-			? undefined
+			? `/project/${item.project.id}`
-			: item.project?.id
+			: undefined,
-				? `/project/${item.project.id}`
+		version: item.version ?? {
-				: undefined,
+			id: item.file_name,
-		version: item.installing
+			version_number: formatMessage(messages.unknownVersion),
-			? {
+			file_name: item.file_name,
-					id: item.file_name,
+		},
-					version_number: formatMessage(messages.installing),
+		versionLink: item.project?.id && item.version?.id
-					file_name: '',
+			? `/project/${item.project.id}/version/${item.version.id}`
-				}
+			: undefined,
-			: (item.version ?? {
-					id: item.file_name,
-					version_number: formatMessage(messages.unknownVersion),
-					file_name: item.file_name,
-				}),
-		versionLink: item.installing
-			? undefined
-			: item.project?.id && item.version?.id
-				? `/project/${item.project.id}/version/${item.version.id}`
-				: undefined,
 		owner: item.owner
 			? {
 					...item.owner,

apps/app-frontend/src/providers/content-install.ts

@@ -127,7 +127,9 @@ export function createContentInstall(opts: {
 			icon_url?: string | null
 			project_type?: string
 		},
+		version?: Labrinth.Versions.v2.Version,
 	) {
+		const primaryFile = version?.files?.find((f) => f.primary) ?? version?.files?.[0]
 		const placeholder: ContentItem = {
 			file_name: `__installing_${project.id}`,
 			project: {
@@ -136,6 +138,13 @@ export function createContentInstall(opts: {
 				title: project.title,
 				icon_url: project.icon_url ?? null,
 			},
+			version: version
+				? {
+						id: version.id,
+						version_number: version.version_number,
+						file_name: primaryFile?.filename ?? '',
+					}
+				: undefined,
 			project_type: project.project_type ?? 'mod',
 			has_update: false,
 			update_version_id: null,
@@ -288,7 +297,7 @@ export function createContentInstall(opts: {
 
 		const installedProjectIds: string[] = []
 		if (currentProject) {
-			addInstallingItem(instance.id, currentProject)
+			addInstallingItem(instance.id, currentProject, version)
 			installedProjectIds.push(currentProject.id)
 		}
 
@@ -297,8 +306,8 @@ export function createContentInstall(opts: {
 			await installVersionDependencies(
 				profile,
 				version,
-				(depProject: Labrinth.Projects.v2.Project) => {
+				(depProject: Labrinth.Projects.v2.Project, depVersion?: Labrinth.Versions.v2.Version) => {
-					addInstallingItem(instance.id, depProject)
+					addInstallingItem(instance.id, depProject, depVersion)
 					installedProjectIds.push(depProject.id)
 				},
 			)
@@ -450,14 +459,14 @@ export function createContentInstall(opts: {
 				}
 
 				const installedProjectIds: string[] = [project.id]
-				addInstallingItem(instancePath, project)
+				addInstallingItem(instancePath, project, version)
 				try {
 					await add_project_from_version(instance.path, version.id)
 					await installVersionDependencies(
 						instance,
 						version,
-						(depProject: Labrinth.Projects.v2.Project) => {
+						(depProject: Labrinth.Projects.v2.Project, depVersion?: Labrinth.Versions.v2.Version) => {
-							addInstallingItem(instancePath, depProject)
+							addInstallingItem(instancePath, depProject, depVersion)
 							installedProjectIds.push(depProject.id)
 						},
 					)

apps/frontend/src/pages/hosting/manage/[id].vue

@@ -173,7 +173,7 @@
 				data-pyro-navigation
 				class="isolate flex w-full select-none flex-col justify-between gap-4 overflow-auto md:flex-row md:items-center"
 			>
-				<NavTabs :links="navLinks" />
+				<NavTabs :links="navLinks" replace />
 			</div>
 
 			<div data-pyro-mount class="h-full w-full flex-1">

apps/labrinth/src/search/backend/typesense/mod.rs

@@ -586,10 +586,6 @@ impl Typesense {
     /// `filters`/`version` fields, translating each from Meilisearch filter
     /// syntax to Typesense filter syntax.
     fn build_filter(info: &SearchRequest) -> Result<Option<String>, ApiError> {
-        if let Some(new_filters) = info.new_filters.as_deref() {
-            return Ok(Some(meili_to_typesense(new_filters)));
-        }
-
         let facet_part = if let Some(facets_json) = info.facets.as_deref() {
             Some(
                 facets_to_typesense(facets_json)
@@ -599,10 +595,18 @@ impl Typesense {
             None
         };
 
-        let legacy_part =
+        let new_filters_part =
-            combined_search_filters(info).map(|f| meili_to_typesense(&f));
+            info.new_filters.as_deref().map(|f| meili_to_typesense(f));
 
-        Ok(match (facet_part, legacy_part) {
+        let legacy_part = if info.new_filters.is_none() {
+            combined_search_filters(info).map(|f| meili_to_typesense(&f))
+        } else {
+            None
+        };
+
+        let filter_part = new_filters_part.or(legacy_part);
+
+        Ok(match (facet_part, filter_part) {
             (Some(f), Some(l)) if !f.is_empty() && !l.is_empty() => {
                 Some(format!("({f}) && ({l})"))
             }

packages/app-lib/src/state/profiles.rs

@@ -1223,20 +1223,41 @@ impl Profile {
     }
 
     /// Toggle a project's disabled state.
+    ///
+    /// Accepts either a bare file name (e.g. `mymod.jar`) or a relative
+    /// path (`mods/mymod.jar`). The function resolves the current on-disk
+    /// path (enabled or disabled) before renaming, so callers don't need
+    /// to track the `.disabled` suffix.
     #[tracing::instrument]
     pub async fn toggle_disable_project(
         profile_path: &str,
         project_path: &str,
     ) -> crate::Result<String> {
-        let path = crate::api::profile::get_full_path(profile_path).await?;
+        let base = crate::api::profile::get_full_path(profile_path).await?;
 
-        let new_path = if project_path.ends_with(".disabled") {
+        let trimmed = project_path.trim_end_matches(".disabled");
-            project_path.trim_end_matches(".disabled").to_string()
+
+        // Resolve the actual current path on disk
+        let current_path = if base.join(project_path).exists() {
+            project_path.to_string()
+        } else if base.join(format!("{trimmed}.disabled")).exists() {
+            format!("{trimmed}.disabled")
+        } else if base.join(trimmed).exists() {
+            trimmed.to_string()
         } else {
-            format!("{project_path}.disabled")
+            return Err(crate::ErrorKind::FSError(format!(
+                "Could not find project file for '{project_path}' in profile"
+            ))
+            .into());
         };
 
-        io::rename_or_move(&path.join(project_path), &path.join(&new_path))
+        let new_path = if current_path.ends_with(".disabled") {
+            current_path.trim_end_matches(".disabled").to_string()
+        } else {
+            format!("{current_path}.disabled")
+        };
+
+        io::rename_or_move(&base.join(&current_path), &base.join(&new_path))
             .await?;
 
         Ok(new_path)

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
+				<div v-tooltip="installing ? formatMessage(commonMessages.installingLabel) : undefined" class="relative shrink-0">
-					:src="project.icon_url"
+					<Avatar
-					:alt="project.title"
+						:src="project.icon_url"
-					size="3rem"
+						:alt="project.title"
-					no-shadow
+						size="3rem"
-					class="shrink-0 rounded-2xl border border-surface-5"
+						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) {
+const lastSelectedIndex = ref<number | null>(null)
-	if (selected) {
+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" />
+							<div class="hidden @[900px]:block">
-
+								<ButtonStyled type="transparent" hover-color-fill="none">
-							<ButtonStyled type="transparent" hover-color-fill="none">
+									<button
-								<button
+										:aria-label="
-									:aria-label="
+											formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
-										formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
+										"
-									"
+										@click="cycleSortMode"
-									@click="cycleSortMode"
+									>
-								>
+										<ArrowUpDownIcon />
-									<ArrowUpDownIcon />
+										{{ sortLabels[sortMode]() }}
-									{{ sortLabels[sortMode]() }}
+									</button>
-								</button>
+								</ButtonStyled>
-							</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)
+	try {
-	await queryClient.invalidateQueries({ queryKey: queryKey.value })
+		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)
+	try {
-	await queryClient.invalidateQueries({ queryKey: queryKey.value })
+		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)
+	try {
-	await queryClient.invalidateQueries({ queryKey: queryKey.value })
+		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 {
+	} catch (err) {
-		// Revert
 		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)
+	try {
-	await queryClient.invalidateQueries({ queryKey: queryKey.value })
+		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()

packages/ui/src/utils/common-messages.ts

@@ -414,6 +414,10 @@ export const commonMessages = defineMessages({
 		id: 'label.update-available',
 		defaultMessage: 'Update available',
 	},
+	installingLabel: {
+		id: 'label.installing',
+		defaultMessage: 'Installing...',
+	},
 	changelogLabel: {
 		id: 'label.changelog',
 		defaultMessage: 'Changelog',

packages/ui/src/utils/search.ts

@@ -227,7 +227,7 @@ export function useSearch(
 				options: tags.value.gameVersions.map((gameVersion) => ({
 					id: gameVersion.version,
 					toggle_group: gameVersion.version_type !== 'release' ? 'all_versions' : undefined,
-					value: `versions:${gameVersion.version}`,
+					value: `game_versions:${gameVersion.version}`,
 					query_value: gameVersion.version,
 					method: 'or',
 				})),
@@ -425,7 +425,7 @@ export function useSearch(
 			.sort((a, b) => (b.ordering ?? 0) - (a.ordering ?? 0))
 	})
 
-	const facets = computed(() => {
+	const newFilters = computed(() => {
 		const validProvidedFilters = providedFilters.value.filter(
 			(providedFilter) => !overriddenProvidedFilterTypes.value.includes(providedFilter.type),
 		)
@@ -435,8 +435,10 @@ export function useSearch(
 		)
 		const filterValues = [...filteredFilters, ...validProvidedFilters]
 
-		const andFacets: string[][] = []
+		const parts: string[] = []
-		const orFacets: Record<string, string[]> = {}
+		const orGroups: Record<string, string[]> = {}
+		const negativeByType: Record<string, string[]> = {}
+
 		for (const filterValue of filterValues) {
 			const type = filters.value.find((type) => type.id === filterValue.type)
 			if (!type) {
@@ -458,43 +460,68 @@ export function useSearch(
 			}
 
 			if (option.method === 'or' || option.method === 'and') {
+				const [field, val] = option.value.split(':')
+				if (!field || !val) continue
+
 				if (filterValue.negative) {
-					andFacets.push([option.value.replace(':', '!=')])
+					if (!negativeByType[field]) {
-				} else {
+						negativeByType[field] = []
-					if (option.method === 'or') {
-						if (!orFacets[type.id]) {
-							orFacets[type.id] = []
-						}
-						orFacets[type.id].push(option.value)
-					} else if (option.method === 'and') {
-						andFacets.push([option.value])
 					}
+					negativeByType[field].push(val)
+				} else if (option.method === 'or') {
+					if (!orGroups[field]) {
+						orGroups[field] = []
+					}
+					orGroups[field].push(val)
+				} else {
+					parts.push(`${field} = "${val}"`)
 				}
 			}
 		}
 
-		Object.values(orFacets).forEach((facets) => andFacets.push(facets))
+		for (const [field, values] of Object.entries(orGroups)) {
+			if (values.length === 1) {
+				parts.push(`${field} = "${values[0]}"`)
+			} else {
+				const quoted = values.map((v) => `"${v}"`).join(', ')
+				parts.push(`${field} IN [${quoted}]`)
+			}
+		}
 
-		/*
+		for (const [field, values] of Object.entries(negativeByType)) {
-       Add environment facets, separate from the rest because it oddly depends on the combination
+			const quoted = values.map((v) => `"${v}"`).join(', ')
-       of filters selected to determine which facets to add.
+			parts.push(`${field} NOT IN [${quoted}]`)
-       Uses filterValues (merged user + provided filters) so server-provided environment
+		}
-       filters are respected.
+
-     */
+		// Environment facets
 		const client = filterValues.some(
 			(filter) => filter.type === 'environment' && filter.option === 'client',
 		)
 		const server = filterValues.some(
 			(filter) => filter.type === 'environment' && filter.option === 'server',
 		)
-		andFacets.push(...createEnvironmentFacets(client, server))
+		for (const envGroup of getEnvironmentFilterGroups(client, server)) {
-
+			if (envGroup.length === 1) {
-		const projectType = projectTypes.value.map((projectType) => `project_type:${projectType}`)
+				const [field, val] = envGroup[0].split(':')
-		if (andFacets.length > 0) {
+				parts.push(`${field} = "${val}"`)
-			return [projectType, ...andFacets]
+			} else if (envGroup.length > 1) {
-		} else {
+				const conditions = envGroup.map((f) => {
-			return [projectType]
+					const [field, val] = f.split(':')
+					return `${field} = "${val}"`
+				})
+				parts.push(`(${conditions.join(' OR ')})`)
+			}
 		}
+
+		// Project types
+		if (projectTypes.value.length === 1) {
+			parts.push(`project_types = "${projectTypes.value[0]}"`)
+		} else if (projectTypes.value.length > 1) {
+			const quoted = projectTypes.value.map((v) => `"${v}"`).join(', ')
+			parts.push(`project_types IN [${quoted}]`)
+		}
+
+		return parts.join(' AND ')
 	})
 
 	const requestParams: Ref<string> = computed(() => {
@@ -504,7 +531,9 @@ export function useSearch(
 			params.push(`query=${encodeURIComponent(query.value)}`)
 		}
 
-		params.push(`facets=${encodeURIComponent(JSON.stringify(facets.value))}`)
+		if (newFilters.value) {
+			params.push(`new_filters=${encodeURIComponent(newFilters.value)}`)
+		}
 
 		const offset = (currentPage.value - 1) * maxResults.value
 		if (currentPage.value !== 1) {
@@ -716,7 +745,7 @@ export function useSearch(
 		filters,
 
 		// Computed
-		facets,
+		newFilters,
 		requestParams,
 
 		// Functions
@@ -725,22 +754,22 @@ export function useSearch(
 	}
 }
 
-export function createEnvironmentFacets(client: boolean, server: boolean): string[][] {
+function getEnvironmentFilterGroups(client: boolean, server: boolean): string[][] {
-	const facets: string[][] = []
+	const groups: string[][] = []
 	if (client && server) {
-		facets.push(['client_side:required'], ['server_side:required'])
+		groups.push(['client_side:required'], ['server_side:required'])
 	} else if (client) {
-		facets.push(
+		groups.push(
 			['client_side:optional', 'client_side:required'],
 			['server_side:optional', 'server_side:unsupported'],
 		)
 	} else if (server) {
-		facets.push(
+		groups.push(
 			['client_side:optional', 'client_side:unsupported'],
 			['server_side:optional', 'server_side:required'],
 		)
 	}
-	return facets
+	return groups
 }
 
 function getOptionValue(option: FilterOption, negative?: boolean): string {