From 62748137aabb53056cf7cd5f3171d9d4a2391e04 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 2 Jul 2026 12:29:26 -0700
Subject: [PATCH] feat: handle download project dependencies recursively and
 properly pass all game versions/platforms compatible on the selected version

---
 .../DownloadDependencies.vue                  | 165 ++++++++++--------
 .../DownloadDependency.vue                    |  82 +++++++++
 2 files changed, 170 insertions(+), 77 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue

diff --git a/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependencies.vue b/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependencies.vue
index 88f705995c..adf3640686 100644
--- a/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependencies.vue
+++ b/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependencies.vue
@@ -4,75 +4,23 @@
 			{{ formatMessage(messages.dependenciesTitle) }}
 		</h3>
 		<div class="flex flex-col gap-2">
-			<div v-for="dependency in dependencyRows" :key="dependency.key" class="flex flex-col gap-1.5">
-				<div
-					class="grid min-h-9 grid-cols-[minmax(0,1fr)_min-content] items-center gap-2 rounded-xl bg-button-bg px-3 py-2 text-primary"
-				>
-					<span class="flex min-w-0 items-center gap-2">
-						<Avatar
-							v-if="dependency.icon"
-							:src="dependency.icon"
-							:alt="dependency.name"
-							size="20px"
-						/>
-						<PackageIcon v-else aria-hidden="true" class="size-5 flex-shrink-0 text-secondary" />
-						<a
-							v-if="dependency.projectHref"
-							:href="dependency.projectHref"
-							target="_blank"
-							rel="noopener noreferrer"
-							class="min-w-0 truncate font-semibold text-contrast no-underline hover:underline"
-						>
-							{{ dependency.name }}
-						</a>
-						<span v-else class="min-w-0 truncate font-semibold text-contrast">
-							{{ dependency.name }}
-						</span>
-						<TagItem class="shrink-0 border !border-solid border-surface-5">
-							{{ dependency.typeLabel }}
-						</TagItem>
-					</span>
-					<ButtonStyled v-if="dependency.downloadHref" circular type="transparent">
-						<a
-							v-tooltip="'Download'"
-							:href="dependency.downloadHref"
-							:download="dependency.filename"
-							:aria-label="`Download ${dependency.name}`"
-							@click="emit('download')"
-						>
-							<DownloadIcon aria-hidden="true" class="size-5 text-secondary" />
-						</a>
-					</ButtonStyled>
-				</div>
-				<div
-					v-if="dependency.subDependencies.length > 0"
-					class="grid grid-cols-[1.5rem_minmax(0,1fr)] items-start gap-1 pl-5"
-				>
-					<RightArrowIcon aria-hidden="true" class="mt-2.5 size-4 text-secondary" />
-					<DownloadDependencies
-						:dependencies="dependency.subDependencies"
-						:show-title="false"
-						@download="emit('download')"
-					/>
-				</div>
-			</div>
+			<DownloadDependency
+				v-for="dependency in dependencyRows"
+				:key="dependency.key"
+				:dependency="dependency"
+				@download="emit('download')"
+			/>
 		</div>
 	</div>
 </template>
 
 <script setup>
-import { DownloadIcon, PackageIcon, RightArrowIcon } from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	defineMessages,
-	injectModrinthClient,
-	TagItem,
-	useVIntl,
-} from '@modrinth/ui'
+import { defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
+import DownloadDependency from './DownloadDependency.vue'
+
 defineOptions({
 	name: 'DownloadDependencies',
 })
@@ -113,9 +61,13 @@ const client = injectModrinthClient()
 const { createProjectDownloadUrl } = useCdnDownloadContext()
 const { formatMessage } = useVIntl()
 
+const shouldResolveDependencies = computed(
+	() => !props.dependencies && !!props.project && !!props.selectedVersion,
+)
+
 const dependencyResolutionPreferences = computed(() => ({
-	game_versions: props.currentGameVersion ? [props.currentGameVersion] : [],
-	loaders: props.currentPlatform ? [props.currentPlatform] : [],
+	game_versions: props.selectedVersion?.game_versions || [],
+	loaders: props.selectedVersion?.loaders || [],
 }))
 
 const { data: dependencyResolution } = useQuery({
@@ -135,13 +87,18 @@ const { data: dependencyResolution } = useQuery({
 			selected: dependencyResolutionPreferences.value,
 			target: dependencyResolutionPreferences.value,
 		}),
-	enabled: computed(() => !!props.project && !!props.selectedVersion),
+	enabled: shouldResolveDependencies,
 })
 
 const dependencyVersionIds = computed(() => {
 	return [
 		...new Set(
-			(dependencyResolution.value?.dependencies || []).map((dependency) => dependency.version_id),
+			[
+				...(dependencyResolution.value?.dependencies || []),
+				...(dependencyResolution.value?.skipped || []),
+			]
+				.map((dependency) => dependency.version_id)
+				.filter(Boolean),
 		),
 	]
 })
@@ -153,7 +110,7 @@ const { data: dependencyVersions } = useQuery({
 		dependencyVersionIds.value,
 	]),
 	queryFn: () => client.labrinth.versions_v3.getVersions(dependencyVersionIds.value),
-	enabled: computed(() => dependencyVersionIds.value.length > 0),
+	enabled: computed(() => shouldResolveDependencies.value && dependencyVersionIds.value.length > 0),
 })
 
 const dependencyVersionById = computed(() => {
@@ -168,7 +125,12 @@ const dependencyVersionById = computed(() => {
 const dependencyProjectIds = computed(() => {
 	return [
 		...new Set(
-			(dependencyResolution.value?.dependencies || []).map((dependency) => dependency.project_id),
+			[
+				...(dependencyResolution.value?.dependencies || []),
+				...(dependencyResolution.value?.skipped || []),
+			]
+				.map((dependency) => dependency.project_id)
+				.filter(Boolean),
 		),
 	]
 })
@@ -180,7 +142,7 @@ const { data: dependencyProjects } = useQuery({
 		dependencyProjectIds.value,
 	]),
 	queryFn: () => client.labrinth.projects_v2.getMultiple(dependencyProjectIds.value),
-	enabled: computed(() => dependencyProjectIds.value.length > 0),
+	enabled: computed(() => shouldResolveDependencies.value && dependencyProjectIds.value.length > 0),
 })
 
 const dependencyProjectById = computed(() => {
@@ -194,7 +156,10 @@ const dependencyProjectById = computed(() => {
 const dependenciesByParentVersionId = computed(() => {
 	const map = new Map()
 
-	for (const dependency of dependencyResolution.value?.dependencies || []) {
+	for (const dependency of [
+		...(dependencyResolution.value?.dependencies || []),
+		...(dependencyResolution.value?.skipped || []),
+	]) {
 		if (!dependency.dependent_on_version_id) continue
 
 		const dependencies = map.get(dependency.dependent_on_version_id) || []
@@ -210,9 +175,9 @@ const resolvedDependencyRows = computed(() => {
 		dependencyResolution.value?.primary.version_id || props.selectedVersion?.id
 	if (!primaryVersionId) return []
 
-	return (dependenciesByParentVersionId.value.get(primaryVersionId) || []).map((dependency) =>
-		createDependencyRow(dependency),
-	)
+	const dependencies = dependenciesByParentVersionId.value.get(primaryVersionId) || []
+
+	return dependencies.map((dependency) => createDependencyRow(dependency))
 })
 
 const dependencyRows = computed(() => props.dependencies || resolvedDependencyRows.value)
@@ -225,6 +190,9 @@ function createDependencyRow(dependency) {
 	const version = dependencyVersionById.value.get(dependency.version_id)
 	const project = dependencyProjectById.value.get(dependency.project_id)
 	const primaryFile = primaryFileForVersion(version)
+	const unavailableTooltip = dependency.reason
+		? skippedReasonLabel(dependency.reason)
+		: formatMessage(messages.unavailableDependency)
 	const name =
 		project?.title ||
 		version?.name ||
@@ -234,19 +202,34 @@ function createDependencyRow(dependency) {
 		'Dependency'
 
 	return {
-		key: `${dependency.project_id}-${dependency.version_id}`,
+		key: `${dependency.project_id}-${dependency.version_id ?? 'unresolved'}-${dependency.reason ?? 'resolved'}`,
 		name,
 		icon: project?.icon_url,
 		projectHref: project ? `/${project.project_type}/${project.slug || project.id}` : undefined,
-		downloadHref: primaryFile ? getDownloadUrl(primaryFile.url) : undefined,
+		downloadHref: dependency.reason || !primaryFile ? undefined : getDownloadUrl(primaryFile.url),
 		filename: primaryFile?.filename,
 		typeLabel: 'Required',
-		subDependencies: (dependenciesByParentVersionId.value.get(dependency.version_id) || []).map(
-			(subDependency) => createDependencyRow(subDependency),
-		),
+		unavailableTooltip,
+		dependencies: (
+			(dependency.version_id && dependenciesByParentVersionId.value.get(dependency.version_id)) ||
+			[]
+		).map((subDependency) => createDependencyRow(subDependency)),
 	}
 }
 
+function skippedReasonLabel(reason) {
+	return (
+		{
+			already_installed: formatMessage(messages.alreadyInstalledDependency),
+			duplicate_project: formatMessage(messages.duplicateDependency),
+			conflicting_dependency: formatMessage(messages.conflictingDependency),
+			no_compatible_version: formatMessage(messages.noCompatibleDependency),
+			missing_version: formatMessage(messages.missingDependencyVersion),
+			quilt_fabric_api: formatMessage(messages.quiltFabricApiDependency),
+		}[reason] || formatMessage(messages.unavailableDependency)
+	)
+}
+
 function resolveContentType(projectType) {
 	return ['mod', 'plugin', 'datapack', 'resourcepack', 'shader', 'modpack'].includes(projectType)
 		? projectType
@@ -266,5 +249,33 @@ const messages = defineMessages({
 		id: 'project.download.dependencies-title',
 		defaultMessage: 'Dependencies',
 	},
+	alreadyInstalledDependency: {
+		id: 'project.download.dependency-already-installed',
+		defaultMessage: 'This dependency is already installed',
+	},
+	conflictingDependency: {
+		id: 'project.download.dependency-conflicting',
+		defaultMessage: 'This dependency conflicts with another dependency',
+	},
+	duplicateDependency: {
+		id: 'project.download.dependency-duplicate',
+		defaultMessage: 'This dependency is already included',
+	},
+	missingDependencyVersion: {
+		id: 'project.download.dependency-missing-version',
+		defaultMessage: 'This dependency version is unavailable',
+	},
+	noCompatibleDependency: {
+		id: 'project.download.dependency-no-compatible-version',
+		defaultMessage: 'No compatible version is available for this dependency',
+	},
+	quiltFabricApiDependency: {
+		id: 'project.download.dependency-quilt-fabric-api',
+		defaultMessage: 'Fabric API is skipped for Quilt',
+	},
+	unavailableDependency: {
+		id: 'project.download.dependency-unavailable',
+		defaultMessage: 'This dependency cannot be downloaded',
+	},
 })
 </script>
diff --git a/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue b/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue
new file mode 100644
index 0000000000..6568724ba1
--- /dev/null
+++ b/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue
@@ -0,0 +1,82 @@
+<template>
+	<div class="flex min-w-0 flex-col gap-2">
+		<div
+			class="grid min-h-[3.75rem] grid-cols-[minmax(0,1fr)_min-content] items-center gap-3 rounded-2xl bg-button-bg px-4 py-3 text-primary"
+		>
+			<span class="flex min-w-0 items-center gap-3">
+				<Avatar v-if="dependency.icon" :src="dependency.icon" :alt="dependency.name" size="32px" />
+				<span
+					v-else
+					class="flex size-8 flex-shrink-0 items-center justify-center rounded-xl border border-solid border-surface-5 text-secondary"
+				>
+					<PackageIcon aria-hidden="true" class="size-5" />
+				</span>
+				<a
+					v-if="dependency.projectHref"
+					:href="dependency.projectHref"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="min-w-0 truncate text-lg font-bold text-contrast no-underline hover:underline"
+				>
+					{{ dependency.name }}
+				</a>
+				<span v-else class="min-w-0 truncate text-lg font-bold text-contrast">
+					{{ dependency.name }}
+				</span>
+				<TagItem class="shrink-0 border !border-solid border-surface-5 !px-3 !py-1 text-base">
+					{{ dependency.typeLabel }}
+				</TagItem>
+			</span>
+			<ButtonStyled v-if="dependency.downloadHref" circular type="transparent">
+				<a
+					v-tooltip="'Download'"
+					:href="dependency.downloadHref"
+					:download="dependency.filename"
+					:aria-label="`Download ${dependency.name}`"
+					@click="emit('download')"
+				>
+					<DownloadIcon aria-hidden="true" class="size-6 text-secondary" />
+				</a>
+			</ButtonStyled>
+			<ButtonStyled v-else circular type="transparent">
+				<button
+					v-tooltip="dependency.unavailableTooltip"
+					disabled
+					:aria-label="dependency.unavailableTooltip"
+				>
+					<DownloadIcon aria-hidden="true" class="size-6 text-secondary" />
+				</button>
+			</ButtonStyled>
+		</div>
+		<div
+			v-for="childDependency in dependency.dependencies"
+			:key="childDependency.key"
+			class="group/dependency relative pl-10"
+		>
+			<div
+				aria-hidden="true"
+				class="absolute -top-2 left-6 h-20 w-0.5 bg-surface-5 group-last/dependency:h-10"
+			/>
+			<div aria-hidden="true" class="absolute left-6 top-[1.875rem] h-0.5 w-4 bg-surface-5" />
+			<DownloadDependency :dependency="childDependency" @download="emit('download')" />
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { DownloadIcon, PackageIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled, TagItem } from '@modrinth/ui'
+
+defineOptions({
+	name: 'DownloadDependency',
+})
+
+defineProps({
+	dependency: {
+		type: Object,
+		required: true,
+	},
+})
+
+const emit = defineEmits(['download'])
+</script>