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

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 orFacets: Record<string, string[]> = {}
+		const parts: 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(':', '!=')])
-				} else {
-					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])
+					if (!negativeByType[field]) {
+						negativeByType[field] = []
 					}
+					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}]`)
+			}
+		}
 
-		/*
-       Add environment facets, separate from the rest because it oddly depends on the combination
-       of filters selected to determine which facets to add.
-       Uses filterValues (merged user + provided filters) so server-provided environment
-       filters are respected.
-     */
+		for (const [field, values] of Object.entries(negativeByType)) {
+			const quoted = values.map((v) => `"${v}"`).join(', ')
+			parts.push(`${field} NOT IN [${quoted}]`)
+		}
+
+		// 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))
-
-		const projectType = projectTypes.value.map((projectType) => `project_type:${projectType}`)
-		if (andFacets.length > 0) {
-			return [projectType, ...andFacets]
-		} else {
-			return [projectType]
+		for (const envGroup of getEnvironmentFilterGroups(client, server)) {
+			if (envGroup.length === 1) {
+				const [field, val] = envGroup[0].split(':')
+				parts.push(`${field} = "${val}"`)
+			} else if (envGroup.length > 1) {
+				const conditions = envGroup.map((f) => {
+					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[][] {
-	const facets: string[][] = []
+function getEnvironmentFilterGroups(client: boolean, server: boolean): 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 {