fix: version tags toggling every supported version and freezing the page (#6967)

Fixes #6601.

Clicking any game version tag on the versions tab passed the release's
entire game_versions array to toggleFilters, so clicking 26.x (or even a
single version tag) selected every version the release supports. On
projects supporting many versions this also froze the page for seconds:
toggleFilters awaited a needlessly-async toggleFilter per version, which
let Vue flush a full re-render between every iteration (~90 flushes on
the reported project).

- formatVersionsForDisplay's grouping now also returns the member
  versions per displayed range (getVersionGroupsForDisplay), so version
  tags toggle exactly the versions they represent
- toggleFilters applies the whole batch synchronously in one update, and
  selects the missing versions unless all are already selected (instead
  of blindly inverting each one)

Co-authored-by: Claude <noreply@anthropic.com>

packages/ui/src/components/project/ProjectPageVersions.vue

@@ -120,14 +120,17 @@
 		<template #cell-gameVersions="{ row: version }">
 			<div class="flex min-w-0 w-full max-w-[12rem] flex-wrap gap-1">
 				<TagItem
-					v-for="gameVersion in getDisplayGameVersions(version).slice(0, MAX_GAME_VERSION_TAGS)"
-					:key="`version-tag-${gameVersion}`"
-					v-tooltip="getFilterTooltip(gameVersion)"
+					v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
+						0,
+						MAX_GAME_VERSION_TAGS,
+					)"
+					:key="`version-tag-${gameVersionGroup.label}`"
+					v-tooltip="getFilterTooltip(gameVersionGroup.label)"
 					data-no-row-click
 					class="w-fit max-w-full truncate"
-					:action="() => versionFilters?.toggleFilters('gameVersion', version.game_versions)"
+					:action="() => versionFilters?.toggleFilters('gameVersion', gameVersionGroup.versions)"
 				>
-					<span class="min-w-0 truncate">{{ gameVersion }}</span>
+					<span class="min-w-0 truncate">{{ gameVersionGroup.label }}</span>
 				</TagItem>
 				<Menu
 					v-if="getDisplayGameVersions(version).length > MAX_GAME_VERSION_TAGS"
@@ -144,12 +147,16 @@
 					<template #popper>
 						<div class="flex max-w-[20rem] flex-wrap gap-1">
 							<TagItem
-								v-for="gameVersion in getDisplayGameVersions(version).slice(MAX_GAME_VERSION_TAGS)"
-								:key="`overflow-version-tag-${gameVersion}`"
+								v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
+									MAX_GAME_VERSION_TAGS,
+								)"
+								:key="`overflow-version-tag-${gameVersionGroup.label}`"
 								class="w-fit max-w-full truncate"
-								:action="() => versionFilters?.toggleFilters('gameVersion', version.game_versions)"
+								:action="
+									() => versionFilters?.toggleFilters('gameVersion', gameVersionGroup.versions)
+								"
 							>
-								<span class="min-w-0 truncate">{{ gameVersion }}</span>
+								<span class="min-w-0 truncate">{{ gameVersionGroup.label }}</span>
 							</TagItem>
 						</div>
 					</template>
@@ -316,16 +323,18 @@
 					<div class="flex flex-col justify-center gap-3">
 						<div class="flex flex-row flex-wrap items-center gap-1.5">
 							<TagItem
-								v-for="gameVersion in getDisplayGameVersions(version).slice(
+								v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
 									0,
 									MAX_GAME_VERSION_TAGS,
 								)"
-								:key="`version-tag-${gameVersion}`"
-								v-tooltip="getFilterTooltip(gameVersion)"
+								:key="`version-tag-${gameVersionGroup.label}`"
+								v-tooltip="getFilterTooltip(gameVersionGroup.label)"
 								class="smart-clickable:allow-pointer-events"
-								:action="() => versionFilters?.toggleFilters('gameVersion', version.game_versions)"
+								:action="
+									() => versionFilters?.toggleFilters('gameVersion', gameVersionGroup.versions)
+								"
 							>
-								{{ gameVersion }}
+								{{ gameVersionGroup.label }}
 							</TagItem>
 							<Menu
 								v-if="getDisplayGameVersions(version).length > MAX_GAME_VERSION_TAGS"
@@ -339,15 +348,16 @@
 								<template #popper>
 									<div class="flex max-w-[20rem] flex-wrap gap-1">
 										<TagItem
-											v-for="gameVersion in getDisplayGameVersions(version).slice(
+											v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
 												MAX_GAME_VERSION_TAGS,
 											)"
-											:key="`overflow-version-tag-${gameVersion}`"
+											:key="`overflow-version-tag-${gameVersionGroup.label}`"
 											:action="
-												() => versionFilters?.toggleFilters('gameVersion', version.game_versions)
+												() =>
+													versionFilters?.toggleFilters('gameVersion', gameVersionGroup.versions)
 											"
 										>
-											{{ gameVersion }}
+											{{ gameVersionGroup.label }}
 										</TagItem>
 									</div>
 								</template>
@@ -461,7 +471,12 @@ import {
 	VersionChannelIndicator,
 	VersionFilterControl,
 } from '@modrinth/ui'
-import { formatVersionsForDisplay, type GameVersionTag, type Version } from '@modrinth/utils'
+import {
+	type GameVersionTag,
+	getVersionGroupsForDisplay,
+	type Version,
+	type VersionDisplayGroup,
+} from '@modrinth/utils'
 import { Menu } from 'floating-vue'
 import { computed, type Ref, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -622,8 +637,8 @@ function hasNoModLoader(loaders: string[]): boolean {
 	)
 }
 
-function getDisplayGameVersions(version: DisplayVersion): string[] {
-	return formatVersionsForDisplay(version.game_versions, props.gameVersions)
+function getDisplayGameVersions(version: DisplayVersion): VersionDisplayGroup[] {
+	return getVersionGroupsForDisplay(version.game_versions, props.gameVersions)
 }
 
 function getFilterTooltip(filter: string): string {

packages/ui/src/components/version/VersionFilterControl.vue

@@ -243,31 +243,35 @@ if (selectedGameVersions.value.some((version) => !isReleaseGameVersion(version))
 	showSnapshots.value = true
 }
 
-async function toggleFilters(type: FilterType, filters: Filter[]) {
-	for (const filter of filters) {
-		await toggleFilter(type, filter, true)
+function selectedFiltersOfType(type: FilterType) {
+	if (type === 'channel') {
+		return selectedChannels
+	} else if (type === 'gameVersion') {
+		return selectedGameVersions
+	} else {
+		return selectedPlatforms
 	}
+}
+
+function toggleFilters(type: FilterType, filters: Filter[]) {
+	const selected = selectedFiltersOfType(type)
+	const allSelected = filters.every((filter) => selected.value.includes(filter))
+
+	selected.value = allSelected
+		? selected.value.filter((x) => !filters.includes(x))
+		: [...selected.value, ...filters.filter((filter) => !selected.value.includes(filter))]
 
 	updateFilters()
 }
 
-async function toggleFilter(type: FilterType, filter: Filter, bulk = false) {
-	if (type === 'channel') {
-		selectedChannels.value = selectedChannels.value.includes(filter)
-			? selectedChannels.value.filter((x) => x !== filter)
-			: [...selectedChannels.value, filter]
-	} else if (type === 'gameVersion') {
-		selectedGameVersions.value = selectedGameVersions.value.includes(filter)
-			? selectedGameVersions.value.filter((x) => x !== filter)
-			: [...selectedGameVersions.value, filter]
-	} else if (type === 'platform') {
-		selectedPlatforms.value = selectedPlatforms.value.includes(filter)
-			? selectedPlatforms.value.filter((x) => x !== filter)
-			: [...selectedPlatforms.value, filter]
-	}
-	if (!bulk) {
-		updateFilters()
-	}
+function toggleFilter(type: FilterType, filter: Filter) {
+	const selected = selectedFiltersOfType(type)
+
+	selected.value = selected.value.includes(filter)
+		? selected.value.filter((x) => x !== filter)
+		: [...selected.value, filter]
+
+	updateFilters()
 }
 
 function updateSelectedGameVersions(versions: string[]) {
@@ -302,7 +306,7 @@ function updateShowSnapshots(value: boolean, _event?: MouseEvent) {
 	}
 }
 
-async function clearFilters() {
+function clearFilters() {
 	selectedChannels.value = []
 	selectedGameVersions.value = []
 	selectedPlatforms.value = []

packages/utils/projects.ts

@@ -66,6 +66,11 @@ export type PlatformTag = {
 	supported_project_types: DisplayProjectType[]
 }
 
+export type VersionDisplayGroup = {
+	label: string
+	versions: string[]
+}
+
 export function getVersionsToDisplay(project, allGameVersions: GameVersionTag[]) {
 	return formatVersionsForDisplay(project.game_versions.slice(), allGameVersions)
 }
@@ -74,6 +79,13 @@ export function formatVersionsForDisplay(
 	gameVersions: string[],
 	allGameVersions: GameVersionTag[],
 ) {
+	return getVersionGroupsForDisplay(gameVersions, allGameVersions).map((group) => group.label)
+}
+
+export function getVersionGroupsForDisplay(
+	gameVersions: string[],
+	allGameVersions: GameVersionTag[],
+): VersionDisplayGroup[] {
 	const inputVersions = gameVersions.slice()
 	const allVersions = allGameVersions.slice()
 
@@ -112,26 +124,33 @@ export function formatVersionsForDisplay(
 	)
 	const projectVersionsGrouped = groupVersions(releaseVersions, true)
 
-	const releaseVersionsAsRanges = projectVersionsGrouped.map(({ major, minor }) => {
-		if (minor.length === 1) {
-			return formatMinecraftMinorVersion(major, minor[0])
-		}
+	const releaseVersionsAsRanges: VersionDisplayGroup[] = projectVersionsGrouped.map(
+		({ major, minor }) => {
+			const versions = minor.map((minorVersion) => formatMinecraftMinorVersion(major, minorVersion))
 
-		const range = allReleasesGrouped.find((x) => x.major === major)
+			if (minor.length === 1) {
+				return { label: versions[0], versions }
+			}
 
-		if (range?.minor.every((value, index) => value === minor[index])) {
-			return `${major}.x`
-		}
+			const range = allReleasesGrouped.find((x) => x.major === major)
 
-		return `${formatMinecraftMinorVersion(major, minor[0])}–${formatMinecraftMinorVersion(major, minor[minor.length - 1])}`
-	})
+			if (range?.minor.every((value, index) => value === minor[index])) {
+				return { label: `${major}.x`, versions }
+			}
+
+			return {
+				label: `${formatMinecraftMinorVersion(major, minor[0])}–${formatMinecraftMinorVersion(major, minor[minor.length - 1])}`,
+				versions,
+			}
+		},
+	)
 
 	const legacyVersionsAsRanges = groupConsecutiveIndices(
 		inputVersions.filter((projVer) => allLegacy.some((gameVer) => gameVer.version === projVer)),
 		allLegacy,
 	)
 
-	let output = [...legacyVersionsAsRanges]
+	let output: VersionDisplayGroup[] = [...legacyVersionsAsRanges]
 
 	// show all snapshots if there's no release versions
 	if (releaseVersionsAsRanges.length === 0) {
@@ -141,14 +160,14 @@ export function formatVersionsForDisplay(
 		const snapshotVersionsAsRanges =
 			snapshotVersions.length > 3
 				? groupConsecutiveIndices(snapshotVersions, allSnapshots)
-				: snapshotVersions
+				: snapshotVersions.map((version) => ({ label: version, versions: [version] }))
 		output = [...snapshotVersionsAsRanges, ...output]
 	} else {
 		output = [...releaseVersionsAsRanges, ...output]
 	}
 
 	if (releaseVersionsAsRanges.length > 0 && latestSnapshot) {
-		output = [latestSnapshot, ...output]
+		output = [{ label: latestSnapshot, versions: [latestSnapshot] }, ...output]
 	}
 	return output
 }
@@ -188,7 +207,10 @@ function groupVersions(versions: string[], consecutive = false) {
 		.reverse()
 }
 
-function groupConsecutiveIndices(versions: string[], referenceList: GameVersionTag[]) {
+function groupConsecutiveIndices(
+	versions: string[],
+	referenceList: GameVersionTag[],
+): VersionDisplayGroup[] {
 	if (!versions || versions.length === 0) {
 		return []
 	}
@@ -202,21 +224,23 @@ function groupConsecutiveIndices(versions: string[], referenceList: GameVersionT
 		.slice()
 		.sort((a, b) => referenceMap.get(a) - referenceMap.get(b))
 
-	const ranges: string[] = []
-	let start = sortedList[0]
-	let previous = sortedList[0]
+	const ranges: VersionDisplayGroup[] = []
+	let rangeStartIndex = 0
 
-	for (let i = 1; i < sortedList.length; i++) {
-		const current = sortedList[i]
-		if (referenceMap.get(current) !== referenceMap.get(previous) + 1) {
-			ranges.push(validateRange(`${previous}–${start}`))
-			start = current
+	for (let i = 1; i <= sortedList.length; i++) {
+		if (
+			i === sortedList.length ||
+			referenceMap.get(sortedList[i]) !== referenceMap.get(sortedList[i - 1]) + 1
+		) {
+			const members = sortedList.slice(rangeStartIndex, i)
+			ranges.push({
+				label: validateRange(`${members[members.length - 1]}–${members[0]}`),
+				versions: members,
+			})
+			rangeStartIndex = i
 		}
-		previous = current
 	}
 
-	ranges.push(validateRange(`${previous}–${start}`))
-
 	return ranges
 }