From 19d003ab9f774b831fd6ff156070cde75dfc6e8c Mon Sep 17 00:00:00 2001
From: Micah <martinstefanovic043@gmail.com>
Date: Tue, 2 Jun 2026 18:25:08 +0200
Subject: [PATCH] feat: add required dependency list to download modal

---
 apps/frontend/src/pages/[type]/[project].vue  | 198 +++++++++++-------
 .../src/components/version/VersionSummary.vue | 114 +++++++++-
 2 files changed, 236 insertions(+), 76 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index b338886525..2e1815ad10 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -18,12 +18,12 @@
 						</nuxt-link>
 						<ChevronRightIcon />
 						<span class="flex grow font-extrabold text-contrast">{{
-							formatMessage(messages.settingsTitle)
-						}}</span>
+								formatMessage(messages.settingsTitle)
+							}}</span>
 						<div class="flex gap-2">
 							<ButtonStyled>
 								<nuxt-link to="/dashboard/projects"
-									><ListIcon /> {{ formatMessage(messages.visitProjectsDashboard) }}
+								><ListIcon /> {{ formatMessage(messages.visitProjectsDashboard) }}
 								</nuxt-link>
 							</ButtonStyled>
 						</div>
@@ -94,6 +94,7 @@
 					() => {
 						debug('on-show fired')
 						loadVersions()
+						loadDependencies()
 						navigateTo({ query: route.query, hash: '#download' }, { replace: true })
 					}
 				"
@@ -154,9 +155,9 @@
 								<div class="disabled button-like">
 									<GameIcon aria-hidden="true" />
 									{{
-										currentGameVersion
-											? formatMessage(messages.gameVersionLabel, { version: currentGameVersion })
-											: formatMessage(messages.gameVersionError)
+									currentGameVersion
+									? formatMessage(messages.gameVersionLabel, { version: currentGameVersion })
+									: formatMessage(messages.gameVersionError)
 									}}
 									<InfoIcon
 										v-tooltip="
@@ -184,14 +185,14 @@
 								<template #title>
 									<GameIcon aria-hidden="true" />
 									{{
-										currentGameVersion
-											? formatMessage(messages.gameVersionLabel, { version: currentGameVersion })
-											: formatMessage(messages.selectGameVersion)
+									currentGameVersion
+									? formatMessage(messages.gameVersionLabel, { version: currentGameVersion })
+									: formatMessage(messages.selectGameVersion)
 									}}
 								</template>
 								<label for="game-versions-filtering" hidden>{{
 									formatMessage(messages.searchGameVersionsLabel)
-								}}</label>
+									}}</label>
 								<StyledInput
 									id="game-versions-filtering"
 									ref="gameVersionFilterInput"
@@ -274,11 +275,11 @@
 								<div class="disabled button-like">
 									<WrenchIcon aria-hidden="true" />
 									{{
-										currentPlatform
-											? formatMessage(messages.platformLabel, {
-													platform: currentPlatformText,
-												})
-											: formatMessage(messages.platformError)
+									currentPlatform
+									? formatMessage(messages.platformLabel, {
+									platform: currentPlatformText,
+									})
+									: formatMessage(messages.platformError)
 									}}
 									<InfoIcon
 										v-tooltip="
@@ -306,11 +307,11 @@
 								<template #title>
 									<WrenchIcon aria-hidden="true" />
 									{{
-										currentPlatform
-											? formatMessage(messages.platformLabel, {
-													platform: currentPlatformText,
-												})
-											: formatMessage(messages.selectPlatform)
+									currentPlatform
+									? formatMessage(messages.platformLabel, {
+									platform: currentPlatformText,
+									})
+									: formatMessage(messages.selectPlatform)
 									}}
 								</template>
 								<ScrollablePanel :class="project.loaders.length > 4 ? 'h-[15rem]' : ''">
@@ -370,6 +371,8 @@
 							<VersionSummary
 								v-if="filteredRelease"
 								:version="filteredRelease"
+								:required-deps="resolveRequiredDeps(filteredRelease)"
+
 								:decorate-download-url="decorateModalDownloadUrl"
 								@on-download="onDownload"
 								@on-navigate="onVersionNavigate"
@@ -377,6 +380,8 @@
 							<VersionSummary
 								v-if="filteredBeta"
 								:version="filteredBeta"
+								:required-deps="resolveRequiredDeps(filteredBeta)"
+
 								:decorate-download-url="decorateModalDownloadUrl"
 								@on-download="onDownload"
 								@on-navigate="onVersionNavigate"
@@ -384,6 +389,8 @@
 							<VersionSummary
 								v-if="filteredAlpha"
 								:version="filteredAlpha"
+								:required-deps="resolveRequiredDeps(filteredAlpha)"
+
 								:decorate-download-url="decorateModalDownloadUrl"
 								@on-download="onDownload"
 								@on-navigate="onVersionNavigate"
@@ -400,10 +407,10 @@
 								"
 							>
 								{{
-									formatMessage(messages.noVersionsAvailable, {
-										gameVersion: currentGameVersion,
-										platform: currentPlatformText,
-									})
+								formatMessage(messages.noVersionsAvailable, {
+								gameVersion: currentGameVersion,
+								platform: currentPlatformText,
+								})
 								}}
 							</p>
 						</AutomaticAccordion>
@@ -499,7 +506,7 @@
 									>
 										<DownloadIcon aria-hidden="true" />
 										{{
-											auth.user && currentMember ? '' : formatMessage(commonMessages.downloadButton)
+										auth.user && currentMember ? '' : formatMessage(commonMessages.downloadButton)
 										}}
 									</button>
 								</ButtonStyled>
@@ -591,7 +598,7 @@
 														'--_color': 'var(--color-brand)',
 														'--_bg-color': 'var(--color-brand-highlight)',
 													}"
-													>{{ formatMessage(commonMessages.newBadge) }}</TagItem
+												>{{ formatMessage(commonMessages.newBadge) }}</TagItem
 												>
 											</h3>
 											<ButtonStyled size="small" circular>
@@ -844,11 +851,11 @@
 						class="mt-3"
 					>
 						{{
-							formatMessage(
-								hasEditDetailsPermission
-									? messages.environmentMigrationMessage
-									: messages.environmentMigrationNoPermissionMessage,
-							)
+						formatMessage(
+						hasEditDetailsPermission
+						? messages.environmentMigrationMessage
+						: messages.environmentMigrationNoPermissionMessage,
+						)
 						}}
 						<nuxt-link
 							to="/news/article/new-environments"
@@ -947,11 +954,11 @@
 								<HeartIcon aria-hidden="true" />
 								<div>
 									{{
-										capitalizeString(
-											formatMessage(commonMessages.projectFollowers, {
-												count: project.followers,
-											}),
-										)
+									capitalizeString(
+									formatMessage(commonMessages.projectFollowers, {
+									count: project.followers,
+									}),
+									)
 									}}
 								</div>
 							</div>
@@ -963,11 +970,11 @@
 								<CalendarIcon aria-hidden="true" />
 								<div>
 									{{
-										capitalizeString(
-											formatMessage(detailsMessages.published, {
-												date: publishedDate,
-											}),
-										)
+									capitalizeString(
+									formatMessage(detailsMessages.published, {
+									date: publishedDate,
+									}),
+									)
 									}}
 								</div>
 							</div>
@@ -976,7 +983,7 @@
 								<CalendarIcon aria-hidden="true" />
 								<div>
 									{{
-										capitalizeString(formatMessage(detailsMessages.created, { date: createdDate }))
+									capitalizeString(formatMessage(detailsMessages.created, { date: createdDate }))
 									}}
 								</div>
 							</div>
@@ -989,11 +996,11 @@
 								<ScaleIcon aria-hidden="true" />
 								<div>
 									{{
-										capitalizeString(
-											formatMessage(detailsMessages.submitted, {
-												date: submittedDate,
-											}),
-										)
+									capitalizeString(
+									formatMessage(detailsMessages.submitted, {
+									date: submittedDate,
+									}),
+									)
 									}}
 								</div>
 							</div>
@@ -1006,7 +1013,7 @@
 								<VersionIcon aria-hidden="true" />
 								<div>
 									{{
-										capitalizeString(formatMessage(detailsMessages.updated, { date: updatedDate }))
+									capitalizeString(formatMessage(detailsMessages.updated, { date: updatedDate }))
 									}}
 								</div>
 							</div>
@@ -1040,7 +1047,7 @@
 	</template>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
 	BookmarkIcon,
 	BookTextIcon,
@@ -1634,8 +1641,8 @@ const displayCollectionsSearch = ref('')
 const collections = computed(() =>
 	user.value && user.value.collections
 		? user.value.collections.filter((x) =>
-				x.name.toLowerCase().includes(displayCollectionsSearch.value.toLowerCase()),
-			)
+			x.name.toLowerCase().includes(displayCollectionsSearch.value.toLowerCase()),
+		)
 		: [],
 )
 
@@ -1678,8 +1685,8 @@ watch(
 					status === 404
 						? formatMessage(messages.projectNotFound)
 						: formatMessage(messages.errorLoadingProject, {
-								message: error.message ? `: ${error.message}` : '',
-							}),
+							message: error.message ? `: ${error.message}` : '',
+						}),
 			})
 		}
 	},
@@ -1746,26 +1753,26 @@ const serverRequiredContent = computed(() => {
 		onclickName:
 			content.project_id && content.project_id !== projectId.value
 				? () => {
-						navigateTo({
-							path: `/project/${content.project_id}`,
-							query: { ...PROJECT_DEP_MARKER_QUERY },
-						})
-					}
+					navigateTo({
+						path: `/project/${content.project_id}`,
+						query: { ...PROJECT_DEP_MARKER_QUERY },
+					})
+				}
 				: undefined,
 		onclickVersion:
 			content.project_id && content.project_id !== projectId.value
 				? () => {
-						navigateTo({
-							path: `/project/${content.project_id}/version/${serverModpackVersion.value?.id}`,
-							query: { ...PROJECT_DEP_MARKER_QUERY },
-						})
-					}
+					navigateTo({
+						path: `/project/${content.project_id}/version/${serverModpackVersion.value?.id}`,
+						query: { ...PROJECT_DEP_MARKER_QUERY },
+					})
+				}
 				: undefined,
 		onclickDownload: primaryFile?.url
 			? () =>
-					navigateTo(createProjectDownloadUrl(primaryFile.url, { reason: 'dependency' }), {
-						external: true,
-					})
+				navigateTo(createProjectDownloadUrl(primaryFile.url, { reason: 'dependency' }), {
+					external: true,
+				})
 			: undefined,
 		showCustomModpackTooltip: content.project_id === projectId.value,
 	}
@@ -1907,6 +1914,57 @@ function loadDependencies() {
 	dependenciesEnabled.value = true
 }
 
+const { data: depDownloadUrls } = useQuery({
+	queryKey: computed(() => [
+		'dep-versions-unfiltered',
+		(dependenciesRaw.value?.projects ?? []).map((p) => p.id).sort(),
+	]),
+	queryFn: async () => {
+		const map: Record<string, string | null> = {}
+		await Promise.all(
+			(dependenciesRaw.value?.projects ?? []).map(async (p) => {
+				try {
+					const versions = await client.labrinth.versions_v2.getProjectVersions(p.id, {
+						include_changelog: false,
+					})
+					const primaryFile = versions[0]?.files.find((f) => f.primary) ?? versions[0]?.files[0]
+					map[p.id] = primaryFile?.url ?? null
+				} catch {
+					map[p.id] = null
+				}
+			}),
+		)
+		return map
+	},
+	enabled: computed(() => (dependenciesRaw.value?.projects ?? []).length > 0),
+	staleTime: STALE_TIME_LONG,
+})
+
+function resolveRequiredDeps(version: { dependencies: { dependency_type: string; project_id?: string; version_id?: string }[] } | undefined) {
+	if (!version || !dependenciesRaw.value) return []
+	const { projects, versions } = dependenciesRaw.value
+	return version.dependencies
+		.filter(
+			(dep): dep is { dependency_type: string; project_id: string; version_id?: string } =>
+				dep.dependency_type === 'required' && !!dep.project_id,
+		)
+		.flatMap((dep) => {
+			const project = projects.find((p) => p.id === dep.project_id)
+			if (!project) return []
+			const depVersion = dep.version_id
+				? versions.find((v) => v.id === dep.version_id)
+				: versions.find((v) => v.project_id === dep.project_id)
+			const primaryFile = depVersion?.files?.find((f) => f.primary) ?? depVersion?.files?.[0]
+			return [{
+				id: project.id,
+				title: project.title,
+				slug: project.slug,
+				icon_url: project.icon_url ?? null,
+				downloadUrl: primaryFile?.url ?? depDownloadUrls.value?.[dep.project_id] ?? null,
+			}]
+		})
+}
+
 // Check if project has versions using the ID array from the V2 project
 // This allows showing/hiding UI elements without loading full version data
 const hasVersions = computed(() => (project.value?.versions?.length ?? 0) > 0)
@@ -2252,8 +2310,8 @@ const members = computed(() => {
 	const owner = acceptedMembers.find((x) =>
 		organization.value
 			? organization.value.members?.some(
-					(orgMember) => orgMember.user.id === x.user.id && orgMember.is_owner,
-				)
+				(orgMember) => orgMember.user.id === x.user.id && orgMember.is_owner,
+			)
 			: x.is_owner,
 	)
 
@@ -2343,8 +2401,8 @@ const title = computed(() =>
 const description = computed(() =>
 	project.value
 		? `${project.value.description} - Download the Minecraft ${projectTypeDisplay.value} ${
-				project.value.title
-			} by ${members.value.find((x) => x.is_owner)?.user?.username || 'a creator'} on Modrinth`
+			project.value.title
+		} by ${members.value.find((x) => x.is_owner)?.user?.username || 'a creator'} on Modrinth`
 		: '',
 )
 
diff --git a/packages/ui/src/components/version/VersionSummary.vue b/packages/ui/src/components/version/VersionSummary.vue
index 8e26a8ea1c..236ec116b2 100644
--- a/packages/ui/src/components/version/VersionSummary.vue
+++ b/packages/ui/src/components/version/VersionSummary.vue
@@ -3,14 +3,17 @@
 		class="grid grid-cols-[min-content_auto_min-content_min-content] items-center gap-2 rounded-2xl border-[1px] border-divider bg-bg p-2"
 	>
 		<VersionChannelIndicator :channel="version.version_type" />
+
 		<div class="flex min-w-0 flex-col gap-1">
 			<h1 class="my-0 truncate text-nowrap text-base font-extrabold leading-none text-contrast">
 				{{ version.version_number }}
 			</h1>
+
 			<p class="m-0 truncate text-nowrap text-xs font-semibold text-secondary">
 				{{ version.name }}
 			</p>
 		</div>
+
 		<ButtonStyled color="brand">
 			<a
 				:href="downloadUrl"
@@ -18,35 +21,134 @@
 				class="min-w-0"
 				@click="emit('onDownload')"
 			>
-				<DownloadIcon aria-hidden="true" /> Download
+				<DownloadIcon aria-hidden="true" />
+				Download
 			</a>
 		</ButtonStyled>
+
 		<ButtonStyled circular>
-			<button
+			<a
+				:href="`/project/${props.version.project_id}/version/${props.version.id}`"
 				class="min-w-0"
 				aria-label="View version"
-				@click="
-					emit('onNavigate', `/project/${props.version.project_id}/version/${props.version.id}`)
-				"
 			>
 				<ExternalIcon aria-hidden="true" />
-			</button>
+			</a>
 		</ButtonStyled>
+
+		<template v-if="resolvedDeps.length > 0">
+			<div class="col-span-4 mt-1 border-t border-divider pt-2">
+				<p class="m-0 mb-1.5 text-[10px] font-semibold uppercase tracking-widest text-secondary">
+					Also required
+				</p>
+
+				<div class="flex flex-col gap-1">
+					<a
+						v-for="dep in resolvedDeps"
+						:key="dep.slug"
+						:href="`/project/${dep.slug}`"
+						class="flex items-center gap-2 rounded-xl bg-bg-raised px-2 py-1.5 hover:brightness-90"
+					>
+						<img
+							v-if="dep.icon_url"
+							:src="dep.icon_url"
+							:alt="dep.title"
+							class="h-6 w-6 flex-shrink-0 rounded-lg object-cover"
+						/>
+
+						<div
+							v-else
+							class="h-6 w-6 flex-shrink-0 rounded-lg bg-bg"
+						/>
+
+						<span
+							class="min-w-0 flex-1 truncate text-sm font-medium text-primary"
+						>
+							{{ dep.title }}
+						</span>
+
+						<ExternalIcon
+							class="h-4 w-4 flex-shrink-0 text-secondary"
+							aria-hidden="true"
+						/>
+					</a>
+				</div>
+			</div>
+		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { DownloadIcon, ExternalIcon } from '@modrinth/assets'
 import type { Version, VersionFile } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
+import { injectModrinthClient } from '../../providers/api-client'
 import { ButtonStyled, VersionChannelIndicator } from '../index'
 
+export interface ResolvedDep {
+	id: string
+	title: string
+	slug: string
+	icon_url?: string | null
+	downloadUrl?: string | null
+}
+
 const props = defineProps<{
 	version: Version
 	decorateDownloadUrl?: (url: string) => string
+	requiredDeps?: ResolvedDep[]
 }>()
 
+const client = injectModrinthClient()
+
+const depsNeedingUrls = computed(() =>
+	(props.requiredDeps ?? [])
+		.filter((d) => !d.downloadUrl)
+		.map((d) => d.id),
+)
+
+const { data: fetchedUrls } = useQuery({
+	queryKey: computed(() => [
+		'dep-file-urls',
+		[...depsNeedingUrls.value].sort(),
+	]),
+	queryFn: async () => {
+		const map: Record<string, string | null> = {}
+
+		await Promise.all(
+			depsNeedingUrls.value.map(async (id) => {
+				try {
+					const versions =
+						await client.labrinth.versions_v2.getProjectVersions(id, {
+							include_changelog: false,
+						})
+
+					const file =
+						versions[0]?.files.find((f) => f.primary) ??
+						versions[0]?.files[0]
+
+					map[id] = file?.url ?? null
+				} catch {
+					map[id] = null
+				}
+			}),
+		)
+
+		return map
+	},
+	enabled: computed(() => depsNeedingUrls.value.length > 0),
+	staleTime: 60 * 60 * 1000,
+})
+
+const resolvedDeps = computed(() =>
+	(props.requiredDeps ?? []).map((dep) => ({
+		...dep,
+		downloadUrl: dep.downloadUrl ?? fetchedUrls.value?.[dep.id] ?? null,
+	})),
+)
+
 const primaryFile = computed<VersionFile>(
 	() => props.version.files.find((x) => x.primary) || props.version.files[0],
 )