fix: privacy popup in app bounded to tiny webview

apps/app/build.rs

@@ -276,6 +276,8 @@ fn main() {
                         "hide_ads_window",
                         "scroll_ads_window",
                         "show_ads_window",
+                        "show_ads_consent_overlay",
+                        "hide_ads_consent_overlay",
                         "record_ads_click",
                         "open_link",
                         "get_ads_personalization",

apps/app/src/api/ads-init.js

@@ -1,14 +1,16 @@
+const MODRINTH_ORIGIN = 'https://modrinth.com'
+
 document.addEventListener(
 	'click',
 	function (e) {
-		window.top.postMessage({ modrinthAdClick: true }, 'https://modrinth.com')
+		window.top.postMessage({ modrinthAdClick: true }, MODRINTH_ORIGIN)
 
 		let target = e.target
 		while (target != null) {
 			if (target.matches('a')) {
 				e.preventDefault()
 				if (target.href) {
-					window.top.postMessage({ modrinthOpenUrl: target.href }, 'https://modrinth.com')
+					window.top.postMessage({ modrinthOpenUrl: target.href }, MODRINTH_ORIGIN)
 				}
 				break
 			}
@@ -19,7 +21,93 @@ document.addEventListener(
 )
 
 window.open = (url, target, features) => {
-	window.top.postMessage({ modrinthOpenUrl: url }, 'https://modrinth.com')
+	window.top.postMessage({ modrinthOpenUrl: url }, MODRINTH_ORIGIN)
+}
+
+let modrinthAdsConsentOverlayShown = false
+let modrinthTcfListenerInstalled = false
+let modrinthTcfListenerAttempts = 0
+
+function installAdsConsentOverlayStyle() {
+	if (document.getElementById('modrinth-ads-consent-overlay-style')) {
+		return
+	}
+	const style = document.createElement('style')
+	style.id = 'modrinth-ads-consent-overlay-style'
+	style.textContent = `
+		html.modrinth-ads-consent-overlay #modrinth-rail-1 {
+			visibility: hidden !important;
+		}
+	`
+	document.documentElement.appendChild(style)
+}
+
+function getTauriInvoke() {
+	return window.__TAURI__?.core?.invoke ?? window.__TAURI_INTERNALS__?.invoke
+}
+
+function invokeAdsConsentOverlayCommand(shown) {
+	const invoke = getTauriInvoke()
+
+	if (typeof invoke !== 'function') {
+		return
+	}
+
+	const command = shown ? 'show_ads_consent_overlay' : 'hide_ads_consent_overlay'
+	const args = shown ? {} : { dpr: window.devicePixelRatio }
+
+	invoke(`plugin:ads|${command}`, args).catch(() => {})
+}
+
+function setAdsConsentOverlay(shown) {
+	if (modrinthAdsConsentOverlayShown === shown) return
+
+	modrinthAdsConsentOverlayShown = shown
+	installAdsConsentOverlayStyle()
+	document.documentElement.classList.toggle('modrinth-ads-consent-overlay', shown)
+
+	if (window.top === window) {
+		invokeAdsConsentOverlayCommand(shown)
+	} else {
+		window.top.postMessage({ modrinthAdsConsentOverlay: shown }, MODRINTH_ORIGIN)
+	}
+}
+
+if (window.top === window) {
+	window.addEventListener('message', (event) => {
+		if (
+			event.origin === MODRINTH_ORIGIN &&
+			typeof event.data?.modrinthAdsConsentOverlay === 'boolean'
+		) {
+			setAdsConsentOverlay(event.data.modrinthAdsConsentOverlay)
+		}
+	})
+}
+
+function handleTcfConsentEvent(tcData, success) {
+	if (!success || !tcData) return
+
+	if (tcData.eventStatus === 'cmpuishown') {
+		setAdsConsentOverlay(true)
+	} else if (tcData.eventStatus === 'useractioncomplete' || tcData.eventStatus === 'tcloaded') {
+		setAdsConsentOverlay(false)
+	}
+}
+
+// polling to install listener on tcf api
+function installTcfConsentListener() {
+	if (modrinthTcfListenerInstalled) return
+
+	if (typeof window.__tcfapi === 'function') {
+		modrinthTcfListenerInstalled = true
+		window.__tcfapi('addEventListener', 2, handleTcfConsentEvent)
+		return
+	}
+
+	if (modrinthTcfListenerAttempts < 60) {
+		modrinthTcfListenerAttempts += 1
+		setTimeout(installTcfConsentListener, 500)
+	}
 }
 
 function muteAudioContext() {
@@ -100,7 +188,10 @@ function muteVideos() {
 document.addEventListener('DOMContentLoaded', () => {
 	muteVideos()
 	muteAudioContext()
+	installTcfConsentListener()
 
 	const observer = new MutationObserver(muteVideos)
 	observer.observe(document.body, { childList: true, subtree: true })
 })
+
+installTcfConsentListener()

apps/app/src/api/ads.rs

@@ -11,12 +11,14 @@ use tokio::sync::RwLock;
 pub struct AdsState {
     pub shown: bool,
     pub modal_shown: bool,
+    pub consent_overlay_shown: bool,
     pub occluded: bool,
     pub last_click: Option<Instant>,
     pub malicious_origins: HashSet<String>,
 }
 
 const AD_LINK: &str = "https://modrinth.com/wrapper/app-ads-cookie";
+const APP_TITLE_BAR_HEIGHT: f32 = 48.0;
 #[cfg(any(windows, target_os = "macos"))]
 pub(super) const OCCLUDED_AREA_THRESHOLD: f64 = 0.5;
 #[cfg(not(target_os = "linux"))]
@@ -131,13 +133,16 @@ fn set_webview_visible_for_window<R: Runtime>(
         .and_then(|window| window.is_minimized().ok())
         .unwrap_or(false);
 
-    let is_occluded = app
+    let (is_occluded, consent_overlay_shown) = app
         .state::<RwLock<AdsState>>()
         .try_read()
-        .map(|state| state.occluded)
-        .unwrap_or(false);
+        .map(|state| (state.occluded, state.consent_overlay_shown))
+        .unwrap_or((false, false));
 
-    set_webview_visible(webview, visible && !is_minimized && !is_occluded);
+    set_webview_visible(
+        webview,
+        visible && !is_minimized && (!is_occluded || consent_overlay_shown),
+    );
 }
 
 #[cfg(any(windows, target_os = "macos"))]
@@ -195,7 +200,8 @@ async fn sync_ads_occlusion<R: Runtime>(app: &tauri::AppHandle<R>) {
     }
 
     state.occluded = occluded;
-    let visible = state.shown && !state.modal_shown;
+    let visible =
+        state.shown && (!state.modal_shown || state.consent_overlay_shown);
     drop(state);
 
     if let Some(webview) = app.webviews().get("ads-window") {
@@ -211,21 +217,36 @@ fn sync_webview_visibility_for_main_window<R: Runtime>(
     let is_minimized = main_window.is_minimized().unwrap_or(false);
     let was = was_minimized.load(Ordering::SeqCst);
 
+    let ads_state = if is_minimized {
+        None
+    } else {
+        match app.state::<RwLock<AdsState>>().try_read() {
+            Ok(state) => Some((
+                state.shown
+                    && (!state.modal_shown || state.consent_overlay_shown)
+                    && (!state.occluded || state.consent_overlay_shown),
+                state.consent_overlay_shown,
+            )),
+            Err(_) => None,
+        }
+    };
+    let ads_visible = ads_state.map(|state| state.0).unwrap_or(false);
+
+    if ads_state.map(|state| state.1).unwrap_or(false)
+        && let Some(webview) = app.webviews().get("ads-window")
+        && let Ok((position, size)) =
+            get_overlay_webview_position_for_window(main_window)
+    {
+        webview.set_position(position).ok();
+        webview.set_size(size).ok();
+    }
+
     if is_minimized == was {
         return;
     }
 
     was_minimized.store(is_minimized, Ordering::SeqCst);
 
-    let ads_visible = if is_minimized {
-        false
-    } else {
-        match app.state::<RwLock<AdsState>>().try_read() {
-            Ok(state) => state.shown && !state.modal_shown && !state.occluded,
-            Err(_) => false,
-        }
-    };
-
     let mut webviews = Vec::new();
     let mut seen_webviews = HashSet::new();
 
@@ -254,6 +275,7 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
             app.manage(RwLock::new(AdsState {
                 shown: true,
                 modal_shown: false,
+                consent_overlay_shown: false,
                 occluded: false,
                 last_click: None,
                 malicious_origins: HashSet::new(),
@@ -269,7 +291,10 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
                         .state::<RwLock<AdsState>>()
                         .try_read()
                         .map(|state| {
-                            state.shown && !state.modal_shown && !state.occluded
+                            state.shown
+                                && !state.modal_shown
+                                && !state.consent_overlay_shown
+                                && !state.occluded
                         })
                         .unwrap_or(false);
 
@@ -332,6 +357,8 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
             init_ads_window,
             hide_ads_window,
             show_ads_window,
+            show_ads_consent_overlay,
+            hide_ads_consent_overlay,
             record_ads_click,
             open_link,
             get_ads_personalization,
@@ -358,6 +385,42 @@ fn get_webview_position<R: Runtime>(
     ))
 }
 
+fn get_overlay_webview_position_for_window<R: Runtime>(
+    main_window: &tauri::Window<R>,
+) -> crate::api::Result<(PhysicalPosition<f32>, PhysicalSize<f32>)> {
+    let main_window_size = main_window.outer_size()?;
+    let title_bar_height =
+        APP_TITLE_BAR_HEIGHT * main_window.scale_factor()? as f32;
+
+    Ok((
+        PhysicalPosition::new(0.0, title_bar_height),
+        PhysicalSize::new(
+            main_window_size.width as f32,
+            (main_window_size.height as f32 - title_bar_height).max(0.0),
+        ),
+    ))
+}
+
+fn get_overlay_webview_position<R: Runtime>(
+    app: &tauri::AppHandle<R>,
+) -> crate::api::Result<(PhysicalPosition<f32>, PhysicalSize<f32>)> {
+    let main_window = app.get_window("main").unwrap();
+
+    get_overlay_webview_position_for_window(&main_window)
+}
+
+fn get_device_pixel_ratio<R: Runtime>(
+    app: &tauri::AppHandle<R>,
+    dpr: Option<f32>,
+) -> f32 {
+    dpr.unwrap_or_else(|| {
+        app.get_window("main")
+            .and_then(|window| window.scale_factor().ok())
+            .map(|scale_factor| scale_factor as f32)
+            .unwrap_or(1.0)
+    })
+}
+
 #[tauri::command]
 #[cfg(not(target_os = "linux"))]
 pub async fn init_ads_window<R: Runtime>(
@@ -374,11 +437,17 @@ pub async fn init_ads_window<R: Runtime>(
         state.shown = true;
     }
 
-    if state.modal_shown {
+    if state.modal_shown && !state.consent_overlay_shown {
         return Ok(());
     }
 
-    if let Ok((position, size)) = get_webview_position(&app, dpr) {
+    let layout = if state.consent_overlay_shown {
+        get_overlay_webview_position(&app)
+    } else {
+        get_webview_position(&app, dpr)
+    };
+
+    if let Ok((position, size)) = layout {
         let webview = if let Some(webview) = app.webviews().get("ads-window") {
             // set both the `hide`/`show` state and `position`,
             // to ensure that the webview is actually shown/hidden
@@ -586,7 +655,11 @@ pub async fn show_ads_window<R: Runtime>(
         state.modal_shown = false;
 
         if state.shown {
-            let (position, size) = get_webview_position(&app, dpr)?;
+            let (position, size) = if state.consent_overlay_shown {
+                get_overlay_webview_position(&app)?
+            } else {
+                get_webview_position(&app, dpr)?
+            };
             // set both the `hide`/`show` state and `position`,
             // to ensure that the webview is actually shown/hidden
             webview.set_size(size).ok();
@@ -610,8 +683,19 @@ pub async fn hide_ads_window<R: Runtime>(
 
         if reset.unwrap_or(false) {
             state.shown = false;
+            state.consent_overlay_shown = false;
         } else {
             state.modal_shown = true;
+
+            if state.consent_overlay_shown {
+                let (position, size) = get_overlay_webview_position(&app)?;
+                webview.set_size(size).ok();
+                webview.set_position(position).ok();
+                webview.show().ok();
+                set_webview_visible_for_window(&app, webview, true);
+
+                return Ok(());
+            }
         }
 
         // set both the `hide`/`show` state and `position`,
@@ -625,6 +709,61 @@ pub async fn hide_ads_window<R: Runtime>(
     Ok(())
 }
 
+#[tauri::command]
+pub async fn show_ads_consent_overlay<R: Runtime>(
+    app: tauri::AppHandle<R>,
+) -> crate::api::Result<()> {
+    if let Some(webview) = app.webviews().get("ads-window") {
+        let state = app.state::<RwLock<AdsState>>();
+        let mut state = state.write().await;
+
+        // dont show for hidden ads so consent events cannot re-enable the webview.
+        if !state.shown {
+            return Ok(());
+        }
+
+        state.consent_overlay_shown = true;
+
+        let (position, size) = get_overlay_webview_position(&app)?;
+        webview.set_size(size).ok();
+        webview.set_position(position).ok();
+        webview.show().ok();
+        set_webview_visible_for_window(&app, webview, true);
+    }
+
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn hide_ads_consent_overlay<R: Runtime>(
+    app: tauri::AppHandle<R>,
+    dpr: Option<f32>,
+) -> crate::api::Result<()> {
+    if let Some(webview) = app.webviews().get("ads-window") {
+        let state = app.state::<RwLock<AdsState>>();
+        let mut state = state.write().await;
+
+        state.consent_overlay_shown = false;
+
+        if state.shown && !state.modal_shown {
+            let dpr = get_device_pixel_ratio(&app, dpr);
+            let (position, size) = get_webview_position(&app, dpr)?;
+
+            webview.set_size(size).ok();
+            webview.set_position(position).ok();
+            webview.show().ok();
+            set_webview_visible_for_window(&app, webview, true);
+        } else {
+            webview
+                .set_position(PhysicalPosition::new(-1000, -1000))
+                .ok();
+            webview.hide().ok();
+        }
+    }
+
+    Ok(())
+}
+
 #[tauri::command]
 pub async fn record_ads_click<R: Runtime>(
     app: tauri::AppHandle<R>,

apps/frontend/src/assets/styles/global.scss

@@ -482,3 +482,8 @@ input {
 .button-transparent {
 	box-shadow: none;
 }
+
+.qc-cmp2-close-tooltip {
+	background-color: transparent;
+	color: hsl(145, 78%, 28%);
+}

apps/frontend/src/components/ui/ProjectDownloadModal/CompatibleVersionCard.vue

@@ -0,0 +1,182 @@
+<template>
+	<div
+		:role="selectable ? 'radio' : undefined"
+		:aria-checked="selectable ? selected : undefined"
+		:tabindex="selectable ? 0 : undefined"
+		class="grid items-center gap-3 rounded-2xl border border-solid px-3 py-3 transition-all"
+		:class="{
+			'grid-cols-[min-content_minmax(0,1fr)_min-content]': selectable,
+			'grid-cols-[minmax(0,1fr)_min-content]': !selectable,
+			'cursor-pointer border-brand bg-surface-4 text-contrast': selectable && selected,
+			'cursor-pointer border-surface-5 bg-surface-4 hover:brightness-[115%]':
+				selectable && !selected,
+			'border-transparent bg-surface-2': !selectable,
+		}"
+		@click="select"
+		@keydown.enter.self.prevent="select"
+		@keydown.space.self.prevent="select"
+	>
+		<template v-if="selectable">
+			<RadioButtonCheckedIcon v-if="selected" aria-hidden="true" class="size-5 text-brand" />
+			<RadioButtonIcon v-else aria-hidden="true" class="size-5 text-secondary" />
+		</template>
+		<div class="flex min-w-0 flex-col gap-1">
+			<div class="flex min-w-0 items-center gap-2">
+				<nuxt-link
+					v-tooltip="truncatedTooltip(versionNumberRef, version.version_number)"
+					:to="`/${project.project_type}/${project.slug || project.id}/version/${version.id}`"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="block min-w-0 text-contrast no-underline hover:underline"
+				>
+					<span ref="versionNumberRef" class="block truncate font-semibold">
+						{{ version.version_number }}
+					</span>
+				</nuxt-link>
+				<VersionChannelTag :channel="version.version_type" class="relative -top-px !py-1" />
+			</div>
+			<div class="flex min-w-0 items-center gap-1.5 text-sm text-secondary">
+				<span v-tooltip="publishedTooltip" class="min-w-0 truncate capitalize">
+					{{ publishedLabel }}
+				</span>
+				<div
+					v-if="primaryFile"
+					class="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-primary opacity-30"
+				></div>
+				<span v-if="primaryFile" class="flex-shrink-0">
+					{{ primaryFileSizeLabel }}
+				</span>
+			</div>
+		</div>
+		<ButtonStyled
+			v-if="primaryFile && showDownload"
+			:color="color"
+			:type="type"
+			:circular="circular"
+		>
+			<a
+				v-tooltip="circular ? formatMessage(messages.download) : null"
+				:href="primaryFileDownloadUrl"
+				:download="primaryFile.filename"
+				:aria-label="
+					formatMessage(messages.downloadVersion, {
+						version: version.version_number,
+					})
+				"
+				@click="emit('download')"
+			>
+				<DownloadIcon aria-hidden="true" />
+				<template v-if="!circular">
+					{{ formatMessage(messages.download) }}
+				</template>
+			</a>
+		</ButtonStyled>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	type CdnDownloadReason,
+	defineMessages,
+	truncatedTooltip,
+	useFormatBytes,
+	useFormatDateTime,
+	useRelativeTime,
+	useVIntl,
+} from '@modrinth/ui'
+import VersionChannelTag from '@modrinth/ui/src/components/version/VersionChannelTag.vue'
+import type { DisplayProjectType } from '@modrinth/utils'
+import { computed, ref } from 'vue'
+
+defineOptions({
+	name: 'CompatibleVersionCard',
+})
+
+type DownloadModalProject = Omit<Labrinth.Projects.v2.Project, 'project_type'> & {
+	project_type: DisplayProjectType
+	actualProjectType: Labrinth.Projects.v2.ProjectType
+}
+
+const props = withDefaults(
+	defineProps<{
+		project: DownloadModalProject
+		version: Labrinth.Versions.v3.Version
+		downloadReason?: CdnDownloadReason
+		currentGameVersion?: string | null
+		currentPlatform?: string | null
+		color?: 'brand' | 'standard'
+		type?: 'standard' | 'transparent'
+		circular?: boolean
+		selectable?: boolean
+		selected?: boolean
+		showDownload?: boolean
+	}>(),
+	{
+		downloadReason: 'standalone',
+		currentGameVersion: null,
+		currentPlatform: null,
+		color: 'brand',
+		type: 'standard',
+		circular: false,
+		selectable: false,
+		selected: false,
+		showDownload: true,
+	},
+)
+
+const emit = defineEmits<{
+	download: []
+	select: []
+}>()
+
+const { createProjectDownloadUrl } = useCdnDownloadContext()
+const { formatMessage } = useVIntl()
+const formatBytes = useFormatBytes()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
+const formatRelativeTime = useRelativeTime()
+
+const versionNumberRef = ref<HTMLElement | null>(null)
+
+const primaryFile = computed<Labrinth.Versions.v3.VersionFile | null>(() => {
+	return props.version.files?.find((file) => file.primary) || props.version.files?.[0] || null
+})
+
+const primaryFileDownloadUrl = computed(() => {
+	if (!primaryFile.value) return '#'
+
+	return createProjectDownloadUrl(primaryFile.value.url, {
+		reason: props.downloadReason,
+		gameVersion: props.currentGameVersion ?? undefined,
+		loader: props.currentPlatform ?? undefined,
+	})
+})
+
+const publishedLabel = computed(() => formatRelativeTime(props.version.date_published))
+const publishedTooltip = computed(() => formatDateTime(props.version.date_published))
+const primaryFileSizeLabel = computed(() => {
+	if (!primaryFile.value) return ''
+	return formatBytes(primaryFile.value.size)
+})
+
+function select() {
+	if (!props.selectable) return
+	emit('select')
+}
+
+const messages = defineMessages({
+	downloadVersion: {
+		id: 'project.download.download-version',
+		defaultMessage: 'Download {version}',
+	},
+	download: {
+		id: 'project.download.download',
+		defaultMessage: 'Download',
+	},
+})
+</script>

apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependencies.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="downloadRows.length > 0" class="flex flex-col gap-1">
+	<div v-if="downloadRows.length > 0" class="flex flex-col gap-2.5">
 		<div v-if="showTitle" class="flex flex-wrap items-center justify-between gap-2">
 			<h3 class="m-0 flex items-center gap-1.5 text-base font-semibold text-contrast">
 				{{ sectionTitle }}
@@ -11,7 +11,7 @@
 				/>
 			</h3>
 		</div>
-		<div class="flex flex-col gap-2">
+		<div class="rounded-2xl bg-surface-2 p-2 pl-4 pr-3">
 			<DownloadDependency
 				v-for="dependency in downloadRows"
 				:key="dependency.key"
@@ -23,258 +23,32 @@
 </template>
 
 <script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import { FileIcon, InfoIcon } from '@modrinth/assets'
-import {
-	type CdnDownloadReason,
-	defineMessages,
-	fileTypeMessages,
-	injectModrinthClient,
-	useVIntl,
-} from '@modrinth/ui'
-import type { DisplayProjectType } from '@modrinth/utils'
-import { useQuery } from '@tanstack/vue-query'
-import { type Component, computed, watch } from 'vue'
+import { InfoIcon } from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@modrinth/ui'
+import { computed } from 'vue'
 
+import { injectDownloadModalProvider } from './download-modal-provider'
 import DownloadDependency from './DownloadDependency.vue'
 
 defineOptions({
 	name: 'DownloadDependencies',
 })
 
-type DownloadModalProject = Omit<Labrinth.Projects.v2.Project, 'project_type'> & {
-	project_type: DisplayProjectType
-	actualProjectType: Labrinth.Projects.v2.ProjectType
-}
-
-type ResolvedContent = Labrinth.Content.v3.ResolvedContent | Labrinth.Content.v3.SkippedContent
-
-interface DownloadDependencyRow {
-	key: string
-	name: string
-	icon?: string
-	fallbackIcon?: Component
-	projectHref?: string
-	downloadHref?: string
-	filename?: string
-	fileSize?: number
-	typeLabel: string
-	unavailableTooltip: string
-	dependencies: DownloadDependencyRow[]
-}
-
-interface DownloadableDependencyFile {
-	href: string
-	filename: string
-	name: string
-}
-
-const props = withDefaults(
+withDefaults(
 	defineProps<{
-		dependencies?: DownloadDependencyRow[] | null
-		project?: DownloadModalProject | null
-		selectedVersion?: Labrinth.Versions.v3.Version | null
-		currentGameVersion?: string | null
-		currentPlatform?: string | null
-		downloadReason?: CdnDownloadReason
-		additionalFiles?: Labrinth.Versions.v3.VersionFile[]
 		showTitle?: boolean
 	}>(),
 	{
-		dependencies: null,
-		project: null,
-		selectedVersion: null,
-		currentGameVersion: null,
-		currentPlatform: null,
-		downloadReason: 'standalone',
-		additionalFiles: () => [],
 		showTitle: true,
 	},
 )
 
 const emit = defineEmits<{
 	download: []
-	'update:downloadable-files': [files: DownloadableDependencyFile[]]
 }>()
-const client = injectModrinthClient()
-const { createProjectDownloadUrl } = useCdnDownloadContext()
 const { formatMessage } = useVIntl()
-
-const shouldResolveDependencies = computed(
-	() => !props.dependencies && !!props.project && !!props.selectedVersion,
-)
-
-const dependencyResolutionPreferences = computed<Labrinth.Content.v3.ResolutionPreferences>(() => ({
-	game_versions: props.selectedVersion?.game_versions || [],
-	loaders: props.currentPlatform ? [props.currentPlatform] : props.selectedVersion?.loaders || [],
-}))
-
-const { data: dependencyResolution } = useQuery({
-	queryKey: computed(() => [
-		'project-download-modal',
-		'content-resolve',
-		props.project?.id,
-		props.selectedVersion?.id,
-		props.project?.project_type,
-		dependencyResolutionPreferences.value,
-	]),
-	queryFn: () =>
-		client.labrinth.content_v3.resolve({
-			project_id: props.project!.id,
-			version_id: props.selectedVersion!.id,
-			content_type: resolveContentType(props.project!.project_type),
-			selected: dependencyResolutionPreferences.value,
-			target: dependencyResolutionPreferences.value,
-		}),
-	enabled: shouldResolveDependencies,
-})
-
-const visibleResolvedDependencies = computed<ResolvedContent[]>(() => {
-	return [
-		...(dependencyResolution.value?.dependencies || []),
-		...(dependencyResolution.value?.skipped || []),
-	].filter(shouldShowDependency)
-})
-
-const dependencyVersionIds = computed<string[]>(() => {
-	return [
-		...new Set(
-			visibleResolvedDependencies.value
-				.filter((dependency) => !('reason' in dependency))
-				.map((dependency) => dependency.version_id)
-				.filter((versionId): versionId is string => !!versionId),
-		),
-	]
-})
-
-const { data: dependencyVersions } = useQuery({
-	queryKey: computed(() => [
-		'project-download-modal',
-		'resolved-versions',
-		dependencyVersionIds.value,
-	]),
-	queryFn: () => client.labrinth.versions_v3.getVersions(dependencyVersionIds.value),
-	enabled: computed(() => shouldResolveDependencies.value && dependencyVersionIds.value.length > 0),
-})
-
-const dependencyVersionById = computed(() => {
-	const map = new Map<string, Labrinth.Versions.v3.Version>()
-	for (const version of dependencyVersions.value || []) {
-		if (!version) continue
-		map.set(version.id, version)
-	}
-	return map
-})
-
-const dependencyProjectIds = computed<string[]>(() => {
-	return [
-		...new Set(
-			visibleResolvedDependencies.value
-				.map((dependency) => dependency.project_id)
-				.filter((projectId): projectId is string => !!projectId),
-		),
-	]
-})
-
-const { data: dependencyProjects } = useQuery({
-	queryKey: computed(() => [
-		'project-download-modal',
-		'resolved-projects',
-		dependencyProjectIds.value,
-	]),
-	queryFn: () => client.labrinth.projects_v2.getMultiple(dependencyProjectIds.value),
-	enabled: computed(() => shouldResolveDependencies.value && dependencyProjectIds.value.length > 0),
-})
-
-const dependencyProjectById = computed(() => {
-	const map = new Map<string, Labrinth.Projects.v2.Project>()
-	for (const project of dependencyProjects.value || []) {
-		map.set(project.id, project)
-	}
-	return map
-})
-
-const dependenciesByParentVersionId = computed(() => {
-	const map = new Map<string, ResolvedContent[]>()
-
-	for (const dependency of visibleResolvedDependencies.value) {
-		if (!dependency.dependent_on_version_id) continue
-
-		const dependencies = map.get(dependency.dependent_on_version_id) || []
-		dependencies.push(dependency)
-		map.set(dependency.dependent_on_version_id, dependencies)
-	}
-
-	return map
-})
-
-const dependenciesLoaded = computed(() => {
-	if (!shouldResolveDependencies.value) return false
-	if (!dependencyResolution.value) return false
-	if (
-		dependencyResolution.value.primary.version_id &&
-		dependencyResolution.value.primary.version_id !== props.selectedVersion?.id
-	) {
-		return false
-	}
-	if (
-		!dependencyVersionIds.value.every((versionId) => dependencyVersionById.value.has(versionId))
-	) {
-		return false
-	}
-	if (
-		!dependencyProjectIds.value.every((projectId) => dependencyProjectById.value.has(projectId))
-	) {
-		return false
-	}
-	return true
-})
-
-const resolvedDependencyRows = computed<DownloadDependencyRow[]>(() => {
-	if (!dependenciesLoaded.value) return []
-
-	const primaryVersionId =
-		dependencyResolution.value?.primary.version_id || props.selectedVersion?.id
-	if (!primaryVersionId) return []
-
-	const dependencies = dependenciesByParentVersionId.value.get(primaryVersionId) || []
-
-	return dependencies.flatMap((dependency) => {
-		const row = createDependencyRow(dependency)
-		return row ? [row] : []
-	})
-})
-
-const dependencyRows = computed<DownloadDependencyRow[]>(
-	() => props.dependencies || resolvedDependencyRows.value,
-)
-
-const visibleDependencyRows = computed<DownloadDependencyRow[]>(() =>
-	dedupeDependencyRows(dependencyRows.value),
-)
-
-const duplicateDependencyRowsHidden = computed(() =>
-	hasDuplicateDependencyRows(dependencyRows.value),
-)
-
-const additionalFileRows = computed<DownloadDependencyRow[]>(() =>
-	props.additionalFiles.map((file) => ({
-		key: `additional-file-${additionalFileKey(file)}`,
-		name: file.filename,
-		fallbackIcon: FileIcon,
-		downloadHref: getDownloadUrl(file.url),
-		filename: file.filename,
-		fileSize: file.size,
-		typeLabel: fileTypeLabel(file.file_type),
-		unavailableTooltip: formatMessage(messages.unavailableFile),
-		dependencies: [],
-	})),
-)
-
-const downloadRows = computed<DownloadDependencyRow[]>(() => [
-	...visibleDependencyRows.value,
-	...additionalFileRows.value,
-])
+const { visibleDependencyRows, duplicateDependencyRowsHidden, downloadRows } =
+	injectDownloadModalProvider()
 
 const sectionTitle = computed(() =>
 	formatMessage(
@@ -284,167 +58,6 @@ const sectionTitle = computed(() =>
 	),
 )
 
-const downloadableDependencyFiles = computed<DownloadableDependencyFile[]>(() =>
-	collectDownloadableDependencyFiles(visibleDependencyRows.value),
-)
-
-watch(
-	downloadableDependencyFiles,
-	(files) => {
-		emit('update:downloadable-files', files)
-	},
-	{ immediate: true },
-)
-
-function primaryFileForVersion(version?: Labrinth.Versions.v3.Version) {
-	return version?.files?.find((file) => file.primary) || version?.files?.[0]
-}
-
-function shouldShowDependency(dependency: ResolvedContent) {
-	return !(
-		'reason' in dependency && ['duplicate_project', 'quilt_fabric_api'].includes(dependency.reason)
-	)
-}
-
-function createDependencyRow(dependency: ResolvedContent): DownloadDependencyRow | null {
-	const versionId = dependency.version_id ?? undefined
-	const version = versionId ? dependencyVersionById.value.get(versionId) : undefined
-	const project = dependencyProjectById.value.get(dependency.project_id)
-	if (!project) return null
-
-	const primaryFile = primaryFileForVersion(version)
-	const unavailableTooltip =
-		'reason' in dependency && dependency.reason
-			? skippedReasonLabel(dependency.reason)
-			: formatMessage(messages.unavailableDependency)
-	const name = project.title
-
-	return {
-		key: `${dependency.project_id}-${versionId ?? 'unresolved'}-${
-			'reason' in dependency ? dependency.reason : 'resolved'
-		}`,
-		name,
-		icon: project.icon_url ?? undefined,
-		projectHref: `/${project.project_type}/${project.slug || project.id}`,
-		downloadHref:
-			'reason' in dependency || !primaryFile ? undefined : getDownloadUrl(primaryFile.url),
-		filename: primaryFile?.filename,
-		fileSize: primaryFile?.size,
-		typeLabel: 'Required',
-		unavailableTooltip,
-		dependencies: (versionId && dependenciesByParentVersionId.value.get(versionId)
-			? dependenciesByParentVersionId.value.get(versionId)!
-			: []
-		).flatMap((subDependency) => {
-			const row = createDependencyRow(subDependency)
-			return row ? [row] : []
-		}),
-	}
-}
-
-function skippedReasonLabel(reason: Labrinth.Content.v3.SkippedContent['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: DisplayProjectType): Labrinth.Content.v3.ContentType {
-	return ['mod', 'plugin', 'datapack', 'resourcepack', 'shader', 'modpack'].includes(projectType)
-		? (projectType as Labrinth.Content.v3.ContentType)
-		: 'mod'
-}
-
-function getDownloadUrl(url: string) {
-	return createProjectDownloadUrl(url, {
-		reason: props.downloadReason,
-		gameVersion: props.currentGameVersion ?? undefined,
-		loader: props.currentPlatform ?? undefined,
-	})
-}
-
-function fileTypeLabel(type?: Labrinth.Versions.v3.FileType | null) {
-	return formatMessage(fileTypeMessages[type ?? 'unknown'] ?? fileTypeMessages.unknown)
-}
-
-function additionalFileKey(file: Labrinth.Versions.v3.VersionFile) {
-	return file.hashes?.sha1 ?? file.filename
-}
-
-function dedupeDependencyRows(
-	rows: DownloadDependencyRow[],
-	seenDependencies = new Set<string>(),
-): DownloadDependencyRow[] {
-	return rows.flatMap((row) => {
-		const identity = dependencyRowIdentity(row)
-		if (seenDependencies.has(identity)) return []
-
-		seenDependencies.add(identity)
-
-		return [
-			{
-				...row,
-				dependencies: dedupeDependencyRows(row.dependencies, seenDependencies),
-			},
-		]
-	})
-}
-
-function dependencyRowIdentity(row: DownloadDependencyRow) {
-	return row.projectHref ?? row.downloadHref ?? row.key
-}
-
-function hasDuplicateDependencyRows(
-	rows: DownloadDependencyRow[],
-	seenDependencies = new Set<string>(),
-): boolean {
-	for (const row of rows) {
-		const rowId = dependencyRowIdentity(row)
-		if (seenDependencies.has(rowId)) return true
-		seenDependencies.add(rowId)
-		if (hasDuplicateDependencyRows(row.dependencies, seenDependencies)) return true
-	}
-
-	return false
-}
-
-function collectDownloadableDependencyFiles(
-	rows: DownloadDependencyRow[],
-	seenHrefs = new Set<string>(),
-): DownloadableDependencyFile[] {
-	const files: DownloadableDependencyFile[] = []
-
-	for (const row of rows) {
-		if (row.downloadHref && !seenHrefs.has(row.downloadHref)) {
-			seenHrefs.add(row.downloadHref)
-			files.push({
-				href: row.downloadHref,
-				filename: row.filename || filenameFromUrl(row.downloadHref),
-				name: row.name,
-			})
-		}
-
-		files.push(...collectDownloadableDependencyFiles(row.dependencies, seenHrefs))
-	}
-
-	return files
-}
-
-function filenameFromUrl(url: string) {
-	try {
-		const filename = new URL(url).pathname.split('/').pop()
-		return filename ? decodeURIComponent(filename) : 'dependency.jar'
-	} catch {
-		return 'dependency.jar'
-	}
-}
-
 const messages = defineMessages({
 	dependenciesTitle: {
 		id: 'project.download.dependencies-title',
@@ -458,37 +71,5 @@ const messages = defineMessages({
 		id: 'project.download.additional-files-title',
 		defaultMessage: 'Additional files',
 	},
-	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',
-	},
-	unavailableFile: {
-		id: 'project.download.file-unavailable',
-		defaultMessage: 'This file cannot be downloaded',
-	},
 })
 </script>

apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue

@@ -1,9 +1,9 @@
 <template>
-	<div class="flex min-w-0 flex-col gap-2">
+	<div class="flex min-w-0 flex-col">
 		<div
-			class="grid min-h-10 grid-cols-[minmax(0,1fr)_min-content] items-center gap-3 rounded-xl bg-button-bg py-0 pl-3.5 pr-2 text-primary"
+			class="z-10 grid h-11 grid-cols-[minmax(0,1fr)_min-content] items-center gap-3 text-primary"
 		>
-			<span class="flex min-w-0 items-center gap-3">
+			<span class="flex min-w-0 items-center gap-2">
 				<Avatar
 					v-if="dependency.icon"
 					:src="dependency.icon"
@@ -13,12 +13,12 @@
 				/>
 				<span
 					v-else
-					class="flex size-4 flex-shrink-0 items-center justify-center rounded-lg border border-solid border-surface-5 text-secondary"
+					class="flex size-6 flex-shrink-0 items-center justify-center rounded-lg border border-solid border-surface-5 text-secondary"
 				>
 					<component
 						:is="dependency.fallbackIcon ?? PackageIcon"
 						aria-hidden="true"
-						class="size-5"
+						class="size-4"
 					/>
 				</span>
 				<a
@@ -28,7 +28,7 @@
 					:href="dependency.projectHref"
 					target="_blank"
 					rel="noopener noreferrer"
-					class="min-w-0 truncate text-base font-semibold text-contrast no-underline hover:underline"
+					class="min-w-0 truncate text-base font-semibold text-contrast hover:underline"
 				>
 					{{ dependency.name }}
 				</a>
@@ -40,9 +40,12 @@
 				>
 					{{ dependency.name }}
 				</span>
-				<TagItem class="shrink-0 border !border-solid border-surface-5 !px-3 !py-1 text-base">
-					{{ dependency.typeLabel }}
-				</TagItem>
+				<span
+					v-tooltip="metadataTooltip"
+					class="min-w-0 max-w-[50%] truncate text-sm text-secondary"
+				>
+					{{ metadataLabel }}
+				</span>
 			</span>
 			<ButtonStyled v-if="dependency.downloadHref" circular type="transparent">
 				<a
@@ -68,14 +71,18 @@
 		<div
 			v-for="childDependency in dependency.dependencies"
 			:key="childDependency.key"
-			class="group/dependency relative pl-10"
+			class="group/dependency relative pl-8"
 		>
-			<DownloadDependency :dependency="childDependency" class="z-1" @download="emit('download')" />
+			<DownloadDependency
+				:dependency="childDependency"
+				class="relative z-10"
+				@download="emit('download')"
+			/>
 			<div
 				aria-hidden="true"
-				class="absolute -top-2 left-6 z-0 h-[calc(100%+1rem)] w-0.5 bg-surface-5 group-first/dependency:-top-2 group-first/dependency:h-20 group-last/dependency:h-7"
+				class="absolute -top-2.5 left-3 z-0 h-full w-0.5 bg-surface-5 group-last/dependency:h-8"
 			/>
-			<div aria-hidden="true" class="absolute left-6 top-5 z-0 h-0.5 w-4 bg-surface-5" />
+			<div aria-hidden="true" class="absolute left-3 top-[21px] z-0 h-0.5 w-7 bg-surface-5" />
 		</div>
 	</div>
 </template>
@@ -86,7 +93,6 @@ import {
 	Avatar,
 	ButtonStyled,
 	defineMessages,
-	TagItem,
 	truncatedTooltip,
 	useFormatBytes,
 	useVIntl,
@@ -106,6 +112,7 @@ interface DownloadDependencyRow {
 	downloadHref?: string
 	filename?: string
 	fileSize?: number
+	metadataLabel?: string
 	typeLabel: string
 	unavailableTooltip: string
 	dependencies: DownloadDependencyRow[]
@@ -123,6 +130,11 @@ const { formatMessage } = useVIntl()
 const formatBytes = useFormatBytes()
 const dependencyNameRef = ref<HTMLElement | null>(null)
 
+const metadataLabel = computed(() => props.dependency.metadataLabel ?? props.dependency.typeLabel)
+const metadataTooltip = computed(() =>
+	metadataLabel.value === props.dependency.typeLabel ? null : metadataLabel.value,
+)
+
 const downloadTooltip = computed(() => {
 	const filename = props.dependency.filename || props.dependency.name
 

apps/frontend/src/components/ui/ProjectDownloadModal/DownloadProject.vue

@@ -80,107 +80,73 @@
 		</Combobox>
 	</div>
 
-	<div v-if="selectedVersion" class="flex flex-col gap-1">
-		<div class="flex flex-wrap items-center justify-between gap-2">
-			<h3 class="relative top-0.5 m-0 text-base font-semibold text-contrast">
-				{{ formatMessage(messages.compatibleVersionTitle) }}
-			</h3>
-			<ButtonStyled v-if="downloadAllFiles.length > 1" type="transparent">
-				<button :disabled="downloadingSelectedVersion" @click="downloadSelectedVersionFiles">
-					<SpinnerIcon v-if="downloadingSelectedVersion" aria-hidden="true" class="animate-spin" />
-					<DownloadIcon v-else aria-hidden="true" />
-					{{
-						formatMessage(
-							downloadingSelectedVersion
-								? messages.downloadingSelectedVersion
-								: messages.downloadAllSelectedVersion,
-							{
-								current: selectedVersionDownloadProgress.current,
-								total: selectedVersionDownloadProgress.total,
-							},
-						)
-					}}
-				</button>
-			</ButtonStyled>
-		</div>
-		<div
-			class="grid grid-cols-[1fr_min-content] items-center gap-3 rounded-2xl bg-surface-2 px-3 py-3"
+	<div
+		v-if="selectedVersion && downloadDataLoaded"
+		:role="compatibleVersions.length > 1 ? 'radiogroup' : undefined"
+		:aria-label="
+			compatibleVersions.length > 1 ? formatMessage(messages.compatibleVersionTitle) : undefined
+		"
+		class="flex flex-col gap-2.5"
+	>
+		<h3
+			v-if="compatibleVersions.length > 1"
+			class="relative top-0.5 m-0 text-base font-semibold text-contrast"
 		>
-			<div class="flex min-w-0 flex-col gap-1">
-				<div class="flex min-w-0 items-center gap-2">
-					<nuxt-link
-						v-tooltip="truncatedTooltip(versionNumberRef, selectedVersion.version_number)"
-						:to="`/${project.project_type}/${project.slug || project.id}/version/${selectedVersion.id}`"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="block min-w-0 text-contrast no-underline hover:underline"
-					>
-						<span ref="versionNumberRef" class="block truncate font-semibold">
-							{{ selectedVersion.version_number }}
-						</span>
-					</nuxt-link>
-					<VersionChannelTag
-						:channel="selectedVersion.version_type"
-						class="relative -top-px !py-0.5"
-					/>
-				</div>
-				<p
-					ref="versionNameRef"
-					v-tooltip="truncatedTooltip(versionNameRef, selectedVersion.name)"
-					class="m-0 w-fit max-w-full truncate text-sm text-secondary"
-				>
-					{{ selectedVersion.name }}
-				</p>
-			</div>
-			<ButtonStyled v-if="selectedPrimaryFile" color="brand" circular>
-				<a
-					v-tooltip="'Download'"
-					:href="selectedPrimaryFileDownloadUrl"
-					:download="selectedPrimaryFile.filename"
-					:aria-label="
-						formatMessage(messages.downloadVersion, {
-							version: selectedVersion.version_number,
-						})
-					"
-					@click="emit('download')"
-				>
-					<DownloadIcon aria-hidden="true" />
-				</a>
-			</ButtonStyled>
-		</div>
+			{{ formatMessage(messages.compatibleVersionTitle) }}
+		</h3>
+		<CompatibleVersionCard
+			v-for="compatibleVersion in compatibleVersions"
+			:key="compatibleVersion.id"
+			:project="project"
+			:version="compatibleVersion"
+			:download-reason="downloadReason"
+			:current-game-version="currentGameVersion"
+			:current-platform="currentPlatform"
+			:selectable="compatibleVersions.length > 1"
+			:selected="compatibleVersion.id === selectedVersion.id"
+			:show-download="
+				compatibleVersions.length === 1 || compatibleVersion.id === selectedVersion.id
+			"
+			:color="
+				compatibleVersion.id === selectedVersion.id &&
+				compatibleVersions.length === 1 &&
+				!hasAdditionalDownloads
+					? 'brand'
+					: 'standard'
+			"
+			:type="
+				compatibleVersion.id === selectedVersion.id &&
+				compatibleVersions.length === 1 &&
+				!hasAdditionalDownloads
+					? 'standard'
+					: 'transparent'
+			"
+			:circular="hasAdditionalDownloads || compatibleVersions.length > 1"
+			@select="selectCompatibleVersion(compatibleVersion)"
+			@download="emit('download')"
+		/>
 	</div>
-	<p v-else-if="currentPlatform && currentGameVersion && versions.length > 0">
-		{{
-			formatMessage(messages.noVersionsAvailable, {
-				gameVersion: currentGameVersion,
-				platform: currentPlatformText,
-			})
-		}}
-	</p>
 </template>
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { DownloadIcon, SpinnerIcon, TriangleAlertIcon } from '@modrinth/assets'
+import { TriangleAlertIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	type CdnDownloadReason,
 	Checkbox,
 	Combobox,
 	type ComboboxOption,
 	defineMessages,
 	getTagMessage,
-	injectNotificationManager,
-	truncatedTooltip,
 	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
-import VersionChannelTag from '@modrinth/ui/src/components/version/VersionChannelTag.vue'
 import type { DisplayProjectType } from '@modrinth/utils'
 import dayjs from 'dayjs'
-import JSZip from 'jszip'
 import { computed, ref, watch } from 'vue'
 
+import CompatibleVersionCard from './CompatibleVersionCard.vue'
+
 defineOptions({
 	name: 'DownloadProject',
 })
@@ -207,6 +173,7 @@ const props = withDefaults(
 		project: DownloadModalProject
 		versions?: Labrinth.Versions.v3.Version[]
 		dependencyDownloadFiles?: DownloadableFile[]
+		downloadDataLoaded?: boolean
 		downloadReason?: CdnDownloadReason
 		initialGameVersion?: string | null
 		initialPlatform?: string | null
@@ -217,6 +184,7 @@ const props = withDefaults(
 	{
 		versions: () => [],
 		dependencyDownloadFiles: () => [],
+		downloadDataLoaded: false,
 		downloadReason: 'standalone',
 		initialGameVersion: null,
 		initialPlatform: null,
@@ -233,22 +201,19 @@ const emit = defineEmits<{
 	'update:selection': [selection: ProjectDownloadSelection]
 }>()
 const { formatMessage } = useVIntl()
-const { createProjectDownloadUrl } = useCdnDownloadContext()
-const { addNotification } = injectNotificationManager()
 const debug = useDebugLogger('DownloadProject')
 const tags = useGeneratedState()
 
 const userSelectedGameVersion = ref<string | null>(props.initialGameVersion)
 const userSelectedPlatform = ref<string | null>(props.initialPlatform)
+const userSelectedCompatibleVersionId = ref<string | null>(null)
 const showAllVersions = ref(defaultShowAllVersions())
 const versionFilter = ref('')
-const versionNumberRef = ref<HTMLElement | null>(null)
-const versionNameRef = ref<HTMLElement | null>(null)
-const downloadingSelectedVersion = ref(false)
-const selectedVersionDownloadProgress = ref({
-	current: 0,
-	total: 0,
-})
+const preferredPlatformRanks = new Map([
+	['fabric', 0],
+	['forge', 1],
+	['neoforge', 2],
+])
 
 const incompatibleGameVersionsSet = computed(() => new Set(props.incompatibleGameVersions))
 const incompatibleLoadersSet = computed(() => new Set(props.incompatibleLoaders))
@@ -376,13 +341,12 @@ const gameVersionOptions = computed<ComboboxOption<string>[]>(() => {
 
 const platformOptions = computed<ComboboxOption<string>[]>(() => {
 	return props.project.loaders
-		.slice()
-		.reverse()
 		.map((platform) => ({
 			value: platform,
 			label: loaderLabel(platform),
 			class: '!px-0 !py-1',
 		}))
+		.sort(comparePlatformOptions)
 })
 
 const filteredVersions = computed<Labrinth.Versions.v3.Version[]>(() => {
@@ -407,31 +371,52 @@ const filteredVersions = computed<Labrinth.Versions.v3.Version[]>(() => {
 })
 
 const filteredRelease = computed<Labrinth.Versions.v3.Version | undefined>(() => {
-	return filteredVersions.value.find((x) => x.version_type === 'release')
+	return latestVersionByType('release')
 })
 
 const filteredBeta = computed<Labrinth.Versions.v3.Version | undefined>(() => {
-	return filteredVersions.value.find(
-		(x) =>
-			x.version_type === 'beta' &&
-			(!filteredRelease.value ||
-				dayjs(x.date_published).isAfter(dayjs(filteredRelease.value.date_published))),
-	)
+	return latestVersionByType('beta')
 })
 
 const filteredAlpha = computed<Labrinth.Versions.v3.Version | undefined>(() => {
-	return filteredVersions.value.find(
-		(x) =>
-			x.version_type === 'alpha' &&
-			(!filteredRelease.value ||
-				dayjs(x.date_published).isAfter(dayjs(filteredRelease.value.date_published))) &&
-			(!filteredBeta.value ||
-				dayjs(x.date_published).isAfter(dayjs(filteredBeta.value.date_published))),
-	)
+	return latestVersionByType('alpha')
+})
+
+const defaultSelectedVersion = computed<Labrinth.Versions.v3.Version | null>(() => {
+	return filteredRelease.value || filteredBeta.value || filteredAlpha.value || null
+})
+
+const suggestedPreReleaseVersions = computed<Labrinth.Versions.v3.Version[]>(() => {
+	if (!defaultSelectedVersion.value || defaultSelectedVersion.value.version_type !== 'release')
+		return []
+
+	const versions: Labrinth.Versions.v3.Version[] = []
+	const beta = filteredBeta.value
+	if (beta && isNewerThan(beta, defaultSelectedVersion.value)) {
+		versions.push(beta)
+	}
+
+	const alpha = filteredAlpha.value
+	if (alpha && isNewerThan(alpha, defaultSelectedVersion.value)) {
+		versions.push(alpha)
+	}
+
+	return versions
+})
+
+const compatibleVersions = computed<Labrinth.Versions.v3.Version[]>(() => {
+	if (!defaultSelectedVersion.value) return []
+	return [defaultSelectedVersion.value, ...suggestedPreReleaseVersions.value]
 })
 
 const selectedVersion = computed<Labrinth.Versions.v3.Version | null>(() => {
-	return filteredRelease.value || filteredBeta.value || filteredAlpha.value || null
+	return (
+		compatibleVersions.value.find(
+			(version) => version.id === userSelectedCompatibleVersionId.value,
+		) ||
+		defaultSelectedVersion.value ||
+		null
+	)
 })
 
 const selectedPrimaryFile = computed<Labrinth.Versions.v3.VersionFile | null>(() => {
@@ -442,39 +427,19 @@ const selectedPrimaryFile = computed<Labrinth.Versions.v3.VersionFile | null>(()
 	)
 })
 
-const selectedPrimaryFileDownloadUrl = computed(() => {
-	if (!selectedPrimaryFile.value) return '#'
-	return getDownloadUrl(selectedPrimaryFile.value.url)
-})
-
-const selectedVersionDownloadFiles = computed(() => {
-	if (!selectedVersion.value) return []
-
-	return selectedVersion.value.files.map((file) => ({
-		href: getDownloadUrl(file.url),
-		filename: file.filename,
-	}))
-})
-
-const downloadAllFiles = computed(() => {
-	const files: DownloadableFile[] = []
+const hasAdditionalDownloads = computed(() => {
 	const hrefs = new Set<string>()
 
-	for (const file of [...selectedVersionDownloadFiles.value, ...props.dependencyDownloadFiles]) {
-		if (hrefs.has(file.href)) continue
-		hrefs.add(file.href)
-		files.push(file)
+	for (const file of selectedVersion.value?.files ?? []) {
+		hrefs.add(file.url)
 	}
 
-	return files
-})
+	for (const file of props.dependencyDownloadFiles) {
+		if (hrefs.has(file.href)) continue
+		hrefs.add(file.href)
+	}
 
-const selectedVersionZipFilename = computed(() => {
-	if (!selectedVersion.value) return `${sanitizeFilename(props.project.title)}.zip`
-
-	return `${sanitizeFilename(props.project.title)} ${sanitizeFilename(
-		selectedVersion.value.version_number,
-	)}.zip`
+	return hrefs.size > 1
 })
 
 watch(
@@ -490,11 +455,16 @@ watch(
 	{ immediate: true },
 )
 
+watch([currentGameVersion, currentPlatform], () => {
+	userSelectedCompatibleVersionId.value = null
+})
+
 watch(
 	() => props.resetKey,
 	() => {
 		userSelectedGameVersion.value = props.initialGameVersion
 		userSelectedPlatform.value = props.initialPlatform
+		userSelectedCompatibleVersionId.value = null
 		showAllVersions.value = defaultShowAllVersions()
 		versionFilter.value = ''
 	},
@@ -513,115 +483,39 @@ function selectPlatform(platform?: string) {
 	emit('selectPlatform', platform)
 }
 
-function getDownloadUrl(url: string) {
-	return createProjectDownloadUrl(url, {
-		reason: props.downloadReason,
-		gameVersion: currentGameVersion.value ?? undefined,
-		loader: currentPlatform.value ?? undefined,
-	})
+function selectCompatibleVersion(version: Labrinth.Versions.v3.Version) {
+	userSelectedCompatibleVersionId.value = version.id
 }
 
-async function downloadSelectedVersionFiles() {
-	if (downloadingSelectedVersion.value || downloadAllFiles.value.length <= 1) return
-
-	downloadingSelectedVersion.value = true
-	const files = [...downloadAllFiles.value]
-	selectedVersionDownloadProgress.value = {
-		current: 0,
-		total: files.length,
-	}
-
-	try {
-		const zip = new JSZip()
-		const usedFilenames = new Set<string>()
-
-		for (const [index, file] of files.entries()) {
-			selectedVersionDownloadProgress.value = {
-				current: index + 1,
-				total: files.length,
-			}
-			const response = await fetch(file.href)
-
-			if (!response.ok) {
-				throw new Error(`Failed to download ${file.filename}`)
-			}
-
-			zip.file(uniqueFilename(file.filename, usedFilenames), await response.blob())
-		}
-
-		downloadBlob(
-			await zip.generateAsync({
-				type: 'blob',
-				mimeType: 'application/zip',
-			}),
-			selectedVersionZipFilename.value,
-		)
-		emit('download')
-	} catch (error) {
-		console.error('Failed to download selected version files:', error)
-		addNotification({
-			title: formatMessage(messages.downloadSelectedVersionFailedTitle),
-			text: formatMessage(messages.downloadSelectedVersionFailedText),
-			type: 'error',
-		})
-	} finally {
-		downloadingSelectedVersion.value = false
-		selectedVersionDownloadProgress.value = {
-			current: 0,
-			total: 0,
-		}
-	}
+function latestVersionByType(type: Labrinth.Versions.v3.VersionChannel) {
+	return filteredVersions.value
+		.filter((version) => version.version_type === type)
+		.reduce<Labrinth.Versions.v3.Version | undefined>((latest, version) => {
+			if (!latest || isNewerThan(version, latest)) return version
+			return latest
+		}, undefined)
 }
 
-function downloadBlob(blob: Blob, filename: string) {
-	const url = URL.createObjectURL(blob)
-	const link = document.createElement('a')
-
-	link.href = url
-	link.download = filename
-	document.body.appendChild(link)
-	link.click()
-	link.remove()
-	window.setTimeout(() => URL.revokeObjectURL(url), 0)
-}
-
-function sanitizeFilename(value: string) {
-	const sanitized = value
-		.replace(/[<>:"/\\|?*]/g, '')
-		.replace(/\s+/g, ' ')
-		.trim()
-
-	return sanitized || 'download'
-}
-
-function uniqueFilename(filename: string, usedFilenames: Set<string>) {
-	const sanitizedFilename = sanitizeFilename(filename)
-
-	if (!usedFilenames.has(sanitizedFilename)) {
-		usedFilenames.add(sanitizedFilename)
-		return sanitizedFilename
-	}
-
-	const extensionIndex = sanitizedFilename.lastIndexOf('.')
-	const basename =
-		extensionIndex > 0 ? sanitizedFilename.slice(0, extensionIndex) : sanitizedFilename
-	const extension = extensionIndex > 0 ? sanitizedFilename.slice(extensionIndex) : ''
-	let index = 2
-	let candidate = `${basename} (${index})${extension}`
-
-	while (usedFilenames.has(candidate)) {
-		index += 1
-		candidate = `${basename} (${index})${extension}`
-	}
-
-	usedFilenames.add(candidate)
-	return candidate
+function isNewerThan(
+	version: Labrinth.Versions.v3.Version,
+	comparison: Labrinth.Versions.v3.Version,
+) {
+	return dayjs(version.date_published).isAfter(dayjs(comparison.date_published))
 }
 
 function loaderLabel(loader: string) {
 	return formatMessage(getTagMessage(loader, 'loader') ?? messages.unknownLoader)
 }
 
+function comparePlatformOptions(a: ComboboxOption<string>, b: ComboboxOption<string>) {
+	const aRank = preferredPlatformRanks.get(a.value) ?? Number.MAX_SAFE_INTEGER
+	const bRank = preferredPlatformRanks.get(b.value) ?? Number.MAX_SAFE_INTEGER
+
+	if (aRank !== bRank) return aRank - bRank
+
+	return a.label.localeCompare(b.label)
+}
+
 function isReleaseGameVersion(version: string) {
 	if (releaseVersions.value.has(version)) return true
 	if (nonReleaseVersions.value.has(version)) return false
@@ -706,38 +600,14 @@ const messages = defineMessages({
 		id: 'project.download.game-version-unsupported-tooltip',
 		defaultMessage: '{title} does not support {gameVersion} for {platform}',
 	},
-	downloadVersion: {
-		id: 'project.download.download-version',
-		defaultMessage: 'Download {version}',
-	},
 	compatibleVersionTitle: {
 		id: 'project.download.compatible-version-title',
-		defaultMessage: 'Compatible version',
-	},
-	downloadAllSelectedVersion: {
-		id: 'project.download.selected-version-download-all',
-		defaultMessage: 'Download all (.zip)',
-	},
-	downloadingSelectedVersion: {
-		id: 'project.download.selected-version-downloading',
-		defaultMessage: 'Downloading... ({current}/{total})',
-	},
-	downloadSelectedVersionFailedTitle: {
-		id: 'project.download.selected-version-failed-title',
-		defaultMessage: 'Could not download version',
-	},
-	downloadSelectedVersionFailedText: {
-		id: 'project.download.selected-version-failed-text',
-		defaultMessage: 'One or more version files could not be downloaded. Please try again.',
+		defaultMessage: 'Compatible versions',
 	},
 	noGameVersionsFound: {
 		id: 'project.download.no-game-versions-found',
 		defaultMessage: 'No game versions found',
 	},
-	noVersionsAvailable: {
-		id: 'project.download.no-versions-available',
-		defaultMessage: 'No versions available for {gameVersion} and {platform}.',
-	},
 	platformUnsupportedTooltip: {
 		id: 'project.download.platform-unsupported-tooltip',
 		defaultMessage: '{title} does not support {platform} for {gameVersion}',

apps/frontend/src/components/ui/ProjectDownloadModal/InstallWithModrinthApp.vue

@@ -6,29 +6,19 @@
 		"
 		class="modrinth-app-section contents"
 	>
-		<div class="flex flex-col">
-			<a
-				class="modrinth-app-install-card flex items-center justify-between gap-3 rounded-2xl border border-solid border-brand-highlight bg-surface-1 px-4 py-3 text-primary no-underline transition-[filter] hover:brightness-110"
-				:href="`modrinth://mod/${project.slug}`"
-				@click="installWithApp"
-			>
-				<span class="flex w-full min-w-0 flex-col gap-1">
-					<div class="flex items-center justify-between">
-						<span class="flex min-w-0 items-center gap-1.5 font-medium text-contrast">
-							Install with
-							<span class="text-brand">Modrinth App</span>
-							<ModrinthIcon aria-hidden="true" class="size-4 flex-shrink-0 text-brand" />
-						</span>
-						<ExternalIcon
-							aria-hidden="true"
-							class="size-4 flex-shrink-0 text-contrast transition-colors"
-						/>
-					</div>
-					<span class="truncate text-base text-contrast opacity-80">
-						{{ formatMessage(messages.installWithModrinthAppDescription) }}
+		<div class="flex flex-col items-center">
+			<ButtonStyled color="brand">
+				<a
+					class="!min-h-10 w-fit no-underline"
+					:href="`modrinth://mod/${project.slug}`"
+					@click="installWithApp"
+				>
+					<ModrinthIcon aria-hidden="true" />
+					<span class="min-w-0 text-center">
+						{{ formatMessage(messages.installWithModrinthApp) }}
 					</span>
-				</span>
-			</a>
+				</a>
+			</ButtonStyled>
 			<Accordion ref="getModrinthAppAccordion">
 				<nuxt-link class="mt-2 flex justify-center text-brand-blue hover:underline" to="/app">
 					{{ formatMessage(messages.dontHaveModrinthApp) }}
@@ -48,8 +38,8 @@
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { ExternalIcon, ModrinthIcon } from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@modrinth/ui'
+import { ModrinthIcon } from '@modrinth/assets'
+import { ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
 import type { DisplayProjectType } from '@modrinth/utils'
 import { ref } from 'vue'
 
@@ -73,6 +63,10 @@ const tags = useGeneratedState()
 const getModrinthAppAccordion = ref<InstanceType<typeof Accordion> | null>(null)
 
 const messages = defineMessages({
+	installWithModrinthApp: {
+		id: 'project.download.install-with-app',
+		defaultMessage: 'Install with Modrinth App',
+	},
 	dontHaveModrinthApp: {
 		id: 'project.download.no-app',
 		defaultMessage: "Don't have Modrinth App?",
@@ -81,10 +75,6 @@ const messages = defineMessages({
 		id: 'project.download.manually',
 		defaultMessage: 'Download manually',
 	},
-	installWithModrinthAppDescription: {
-		id: 'project.download.install-with-app-description',
-		defaultMessage: 'Automatically install the correct version and dependencies.',
-	},
 })
 
 function installWithApp() {
@@ -95,14 +85,6 @@ function installWithApp() {
 </script>
 
 <style lang="scss" scoped>
-.modrinth-app-install-card {
-	background: radial-gradient(
-		ellipse 90% 250% at 50% 200%,
-		color-mix(in srgb, var(--color-brand-shadow) 50%, var(--surface-1)) -30%,
-		var(--surface-1) 72%
-	);
-}
-
 @media (hover: none) and (max-width: 767px) {
 	.modrinth-app-section {
 		display: none;

apps/frontend/src/components/ui/ProjectDownloadModal/download-modal-provider.ts

@@ -0,0 +1,611 @@
+import type { AbstractModrinthClient, Labrinth } from '@modrinth/api-client'
+import { FileIcon } from '@modrinth/assets'
+import {
+	type CdnDownloadReason,
+	createContext,
+	defineMessages,
+	fileTypeMessages,
+	injectModrinthClient,
+	useVIntl,
+} from '@modrinth/ui'
+import type { DisplayProjectType } from '@modrinth/utils'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { type Component, computed, type ComputedRef } from 'vue'
+
+import { STALE_TIME } from '~/composables/queries/project'
+
+type DownloadModalProject = Omit<Labrinth.Projects.v2.Project, 'project_type'> & {
+	project_type: DisplayProjectType
+	actualProjectType: Labrinth.Projects.v2.ProjectType
+}
+
+type ResolvedContent = Labrinth.Content.v3.ResolvedContent | Labrinth.Content.v3.SkippedContent
+
+export interface DownloadDependencyRow {
+	key: string
+	name: string
+	icon?: string
+	fallbackIcon?: Component
+	projectHref?: string
+	downloadHref?: string
+	filename?: string
+	fileSize?: number
+	metadataLabel?: string
+	typeLabel: string
+	unavailableTooltip: string
+	dependencies: DownloadDependencyRow[]
+}
+
+export interface DownloadableDependencyFile {
+	href: string
+	filename: string
+	name: string
+}
+
+export interface ProjectDownloadSelection {
+	currentGameVersion: string | null
+	currentPlatform: string | null
+	selectedVersion: Labrinth.Versions.v3.Version | null
+	selectedPrimaryFile: Labrinth.Versions.v3.VersionFile | null
+}
+
+interface DownloadModalProviderOptions {
+	project: ComputedRef<DownloadModalProject | null>
+	selectedVersion: ComputedRef<Labrinth.Versions.v3.Version | null>
+	selectedPrimaryFile: ComputedRef<Labrinth.Versions.v3.VersionFile | null>
+	currentGameVersion: ComputedRef<string | null>
+	currentPlatform: ComputedRef<string | null>
+	downloadReason: ComputedRef<CdnDownloadReason>
+	additionalFiles: ComputedRef<Labrinth.Versions.v3.VersionFile[]>
+}
+
+export interface DownloadModalProvider {
+	visibleDependencyRows: ComputedRef<DownloadDependencyRow[]>
+	duplicateDependencyRowsHidden: ComputedRef<boolean>
+	downloadRows: ComputedRef<DownloadDependencyRow[]>
+	downloadRowsLoaded: ComputedRef<boolean>
+	downloadableDependencyFiles: ComputedRef<DownloadableDependencyFile[]>
+	downloadableDependencyFilesLoaded: ComputedRef<boolean>
+	preloadDependenciesForSelection: (selection: ProjectDownloadSelection) => Promise<void>
+}
+
+export const [injectDownloadModalProvider, provideDownloadModalContext] =
+	createContext<DownloadModalProvider>('DownloadModal')
+
+export function provideDownloadModalProvider(
+	options: DownloadModalProviderOptions,
+): DownloadModalProvider {
+	const client = injectModrinthClient()
+	const queryClient = useQueryClient()
+	const { createProjectDownloadUrl } = useCdnDownloadContext()
+	const { formatMessage } = useVIntl()
+
+	const shouldResolveDependencies = computed(
+		() => !!options.project.value && !!options.selectedVersion.value,
+	)
+
+	const dependencyResolutionPreferences = computed(() =>
+		createResolutionPreferences(options.selectedVersion.value, options.currentPlatform.value),
+	)
+
+	const { data: dependencyResolution, isFetching: dependencyResolutionFetching } = useQuery({
+		...dependencyResolutionQueryOptions(
+			client,
+			options.project,
+			options.selectedVersion,
+			dependencyResolutionPreferences,
+		),
+		enabled: shouldResolveDependencies,
+	})
+
+	const visibleResolvedDependencies = computed<ResolvedContent[]>(() =>
+		visibleDependencies(dependencyResolution.value),
+	)
+
+	const dependencyVersionIds = computed(() =>
+		sortedUnique(
+			visibleResolvedDependencies.value
+				.filter((dependency) => !('reason' in dependency))
+				.map((dependency) => dependency.version_id)
+				.filter((versionId): versionId is string => !!versionId),
+		),
+	)
+
+	const { data: dependencyVersions, isFetching: dependencyVersionsFetching } = useQuery({
+		...dependencyVersionsQueryOptions(client, dependencyVersionIds),
+		enabled: computed(
+			() => shouldResolveDependencies.value && dependencyVersionIds.value.length > 0,
+		),
+	})
+
+	const dependencyVersionById = computed(() => {
+		const map = new Map<string, Labrinth.Versions.v3.Version>()
+		for (const version of dependencyVersions.value || []) {
+			if (!version) continue
+			map.set(version.id, version)
+		}
+		return map
+	})
+
+	const dependencyProjectIds = computed(() =>
+		sortedUnique(
+			visibleResolvedDependencies.value
+				.map((dependency) => dependency.project_id)
+				.filter((projectId): projectId is string => !!projectId),
+		),
+	)
+
+	const { data: dependencyProjects, isFetching: dependencyProjectsFetching } = useQuery({
+		...dependencyProjectsQueryOptions(client, dependencyProjectIds),
+		enabled: computed(
+			() => shouldResolveDependencies.value && dependencyProjectIds.value.length > 0,
+		),
+	})
+
+	const dependencyProjectById = computed(() => {
+		const map = new Map<string, Labrinth.Projects.v2.Project>()
+		for (const project of dependencyProjects.value || []) {
+			map.set(project.id, project)
+		}
+		return map
+	})
+
+	const dependenciesByParentVersionId = computed(() => {
+		const map = new Map<string, ResolvedContent[]>()
+
+		for (const dependency of visibleResolvedDependencies.value) {
+			if (!dependency.dependent_on_version_id) continue
+
+			const dependencies = map.get(dependency.dependent_on_version_id) || []
+			dependencies.push(dependency)
+			map.set(dependency.dependent_on_version_id, dependencies)
+		}
+
+		return map
+	})
+
+	const dependenciesLoaded = computed(() => {
+		if (!shouldResolveDependencies.value) return false
+		if (dependencyResolutionFetching.value) return false
+		if (!dependencyResolution.value) return false
+		if (
+			dependencyResolution.value.primary.version_id &&
+			dependencyResolution.value.primary.version_id !== options.selectedVersion.value?.id
+		) {
+			return false
+		}
+		if (
+			dependencyVersionsFetching.value ||
+			!dependencyVersionIds.value.every((versionId) => dependencyVersionById.value.has(versionId))
+		) {
+			return false
+		}
+		if (
+			dependencyProjectsFetching.value ||
+			!dependencyProjectIds.value.every((projectId) => dependencyProjectById.value.has(projectId))
+		) {
+			return false
+		}
+		return true
+	})
+
+	const downloadRowsLoaded = computed(() => {
+		if (!options.selectedPrimaryFile.value) return false
+		return dependenciesLoaded.value
+	})
+
+	const resolvedDependencyRows = computed<DownloadDependencyRow[]>(() => {
+		if (!dependenciesLoaded.value) return []
+
+		const primaryVersionId =
+			dependencyResolution.value?.primary.version_id || options.selectedVersion.value?.id
+		if (!primaryVersionId) return []
+
+		const dependencies = dependenciesByParentVersionId.value.get(primaryVersionId) || []
+
+		return dependencies.flatMap((dependency) => {
+			const row = createDependencyRow(dependency)
+			return row ? [row] : []
+		})
+	})
+
+	const visibleDependencyRows = computed<DownloadDependencyRow[]>(() =>
+		dedupeDependencyRows(resolvedDependencyRows.value),
+	)
+
+	const duplicateDependencyRowsHidden = computed(
+		() =>
+			downloadRowsLoaded.value &&
+			(hasSkippedDuplicateDependency(dependencyResolution.value) ||
+				hasDuplicateDependencyRows(resolvedDependencyRows.value)),
+	)
+
+	const additionalFileRows = computed<DownloadDependencyRow[]>(() =>
+		downloadRowsLoaded.value
+			? options.additionalFiles.value.map((file) => ({
+					key: `additional-file-${additionalFileKey(file)}`,
+					name: file.filename,
+					fallbackIcon: FileIcon,
+					downloadHref: getDownloadUrl(file.url),
+					filename: file.filename,
+					fileSize: file.size,
+					metadataLabel: fileTypeLabel(file.file_type),
+					typeLabel: fileTypeLabel(file.file_type),
+					unavailableTooltip: formatMessage(messages.unavailableFile),
+					dependencies: [],
+				}))
+			: [],
+	)
+
+	const downloadRows = computed<DownloadDependencyRow[]>(() =>
+		downloadRowsLoaded.value ? [...visibleDependencyRows.value, ...additionalFileRows.value] : [],
+	)
+
+	const downloadableDependencyFiles = computed<DownloadableDependencyFile[]>(() =>
+		collectDownloadableDependencyFiles(visibleDependencyRows.value),
+	)
+
+	const downloadableDependencyFilesLoaded = computed(() => {
+		return downloadRowsLoaded.value
+	})
+
+	async function preloadDependenciesForSelection(selection: ProjectDownloadSelection) {
+		if (!options.project.value || !selection.selectedVersion) return
+
+		const preferences = createResolutionPreferences(
+			selection.selectedVersion,
+			selection.currentPlatform,
+		)
+
+		const resolution = await queryClient.ensureQueryData({
+			queryKey: [
+				'project-download-modal',
+				'content-resolve',
+				options.project.value.id,
+				selection.selectedVersion.id,
+				options.project.value.project_type,
+				preferences,
+			],
+			queryFn: () =>
+				client.labrinth.content_v3.resolve({
+					project_id: options.project.value!.id,
+					version_id: selection.selectedVersion!.id,
+					content_type: resolveContentType(options.project.value!.project_type),
+					selected: preferences,
+					target: preferences,
+				}),
+			staleTime: STALE_TIME,
+		})
+		const visible = visibleDependencies(resolution)
+		const versionIds = getDependencyVersionIds(visible)
+		const projectIds = getDependencyProjectIds(visible)
+
+		await Promise.all([
+			versionIds.length > 0
+				? queryClient.ensureQueryData({
+						queryKey: ['project-download-modal', 'resolved-versions', versionIds],
+						queryFn: () => client.labrinth.versions_v3.getVersions(versionIds),
+						staleTime: STALE_TIME,
+					})
+				: Promise.resolve(),
+			projectIds.length > 0
+				? queryClient.ensureQueryData({
+						queryKey: ['project-download-modal', 'resolved-projects', projectIds],
+						queryFn: () => client.labrinth.projects_v2.getMultiple(projectIds),
+						staleTime: STALE_TIME,
+					})
+				: Promise.resolve(),
+		])
+	}
+
+	function createDependencyRow(dependency: ResolvedContent): DownloadDependencyRow | null {
+		const versionId = dependency.version_id ?? undefined
+		const version = versionId ? dependencyVersionById.value.get(versionId) : undefined
+		const project = dependencyProjectById.value.get(dependency.project_id)
+		if (!project) return null
+
+		const primaryFile = primaryFileForVersion(version)
+		const unavailableTooltip =
+			'reason' in dependency && dependency.reason
+				? skippedReasonLabel(dependency.reason)
+				: formatMessage(messages.unavailableDependency)
+		const name = project.title
+		const metadataLabel = isProjectOnlyDependencyReference(dependency)
+			? formatMessage(messages.anyCompatibleDependency)
+			: (version?.version_number ?? formatMessage(messages.anyCompatibleDependency))
+
+		return {
+			key: `${dependency.project_id}-${versionId ?? 'unresolved'}-${
+				'reason' in dependency ? dependency.reason : 'resolved'
+			}`,
+			name,
+			icon: project.icon_url ?? undefined,
+			projectHref: `/${project.project_type}/${project.slug || project.id}`,
+			downloadHref:
+				'reason' in dependency || !primaryFile ? undefined : getDownloadUrl(primaryFile.url),
+			filename: primaryFile?.filename,
+			fileSize: primaryFile?.size,
+			metadataLabel,
+			typeLabel: 'Required',
+			unavailableTooltip,
+			dependencies: (versionId && dependenciesByParentVersionId.value.get(versionId)
+				? dependenciesByParentVersionId.value.get(versionId)!
+				: []
+			).flatMap((subDependency) => {
+				const row = createDependencyRow(subDependency)
+				return row ? [row] : []
+			}),
+		}
+	}
+
+	function isProjectOnlyDependencyReference(dependency: ResolvedContent) {
+		const parentVersionId = dependency.dependent_on_version_id
+		const parentVersion =
+			parentVersionId === options.selectedVersion.value?.id
+				? options.selectedVersion.value
+				: parentVersionId
+					? dependencyVersionById.value.get(parentVersionId)
+					: undefined
+
+		return !!parentVersion?.dependencies?.some(
+			(parentDependency) =>
+				parentDependency.project_id === dependency.project_id && !parentDependency.version_id,
+		)
+	}
+
+	function skippedReasonLabel(reason: Labrinth.Content.v3.SkippedContent['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 getDownloadUrl(url: string) {
+		return createProjectDownloadUrl(url, {
+			reason: options.downloadReason.value,
+			gameVersion: options.currentGameVersion.value ?? undefined,
+			loader: options.currentPlatform.value ?? undefined,
+		})
+	}
+
+	function fileTypeLabel(type?: Labrinth.Versions.v3.FileType | null) {
+		return formatMessage(fileTypeMessages[type ?? 'unknown'] ?? fileTypeMessages.unknown)
+	}
+
+	const provider = {
+		visibleDependencyRows,
+		duplicateDependencyRowsHidden,
+		downloadRows,
+		downloadRowsLoaded,
+		downloadableDependencyFiles,
+		downloadableDependencyFilesLoaded,
+		preloadDependenciesForSelection,
+	}
+
+	provideDownloadModalContext(provider)
+
+	return provider
+}
+
+function dependencyResolutionQueryOptions(
+	client: AbstractModrinthClient,
+	project: ComputedRef<DownloadModalProject | null>,
+	selectedVersion: ComputedRef<Labrinth.Versions.v3.Version | null>,
+	preferences: ComputedRef<Labrinth.Content.v3.ResolutionPreferences>,
+) {
+	return {
+		queryKey: computed(() => [
+			'project-download-modal',
+			'content-resolve',
+			project.value?.id,
+			selectedVersion.value?.id,
+			project.value?.project_type,
+			preferences.value,
+		]),
+		queryFn: () =>
+			client.labrinth.content_v3.resolve({
+				project_id: project.value!.id,
+				version_id: selectedVersion.value!.id,
+				content_type: resolveContentType(project.value!.project_type),
+				selected: preferences.value,
+				target: preferences.value,
+			}),
+		staleTime: STALE_TIME,
+	}
+}
+
+function dependencyVersionsQueryOptions(
+	client: AbstractModrinthClient,
+	versionIds: ComputedRef<string[]>,
+) {
+	return {
+		queryKey: computed(() => ['project-download-modal', 'resolved-versions', versionIds.value]),
+		queryFn: () => client.labrinth.versions_v3.getVersions(versionIds.value),
+		staleTime: STALE_TIME,
+	}
+}
+
+function dependencyProjectsQueryOptions(
+	client: AbstractModrinthClient,
+	projectIds: ComputedRef<string[]>,
+) {
+	return {
+		queryKey: computed(() => ['project-download-modal', 'resolved-projects', projectIds.value]),
+		queryFn: () => client.labrinth.projects_v2.getMultiple(projectIds.value),
+		staleTime: STALE_TIME,
+	}
+}
+
+function createResolutionPreferences(
+	version: Labrinth.Versions.v3.Version | null,
+	currentPlatform: string | null,
+): Labrinth.Content.v3.ResolutionPreferences {
+	return {
+		game_versions: version?.game_versions || [],
+		loaders: currentPlatform ? [currentPlatform] : version?.loaders || [],
+	}
+}
+
+function visibleDependencies(resolution?: Labrinth.Content.v3.ResolveContentPlan) {
+	return [...(resolution?.dependencies || []), ...(resolution?.skipped || [])].filter(
+		shouldShowDependency,
+	)
+}
+
+function getDependencyVersionIds(dependencies: ResolvedContent[]) {
+	return sortedUnique(
+		dependencies
+			.filter((dependency) => !('reason' in dependency))
+			.map((dependency) => dependency.version_id)
+			.filter((versionId): versionId is string => !!versionId),
+	)
+}
+
+function getDependencyProjectIds(dependencies: ResolvedContent[]) {
+	return sortedUnique(
+		dependencies
+			.map((dependency) => dependency.project_id)
+			.filter((projectId): projectId is string => !!projectId),
+	)
+}
+
+function primaryFileForVersion(version?: Labrinth.Versions.v3.Version) {
+	return version?.files?.find((file) => file.primary) || version?.files?.[0]
+}
+
+function shouldShowDependency(dependency: ResolvedContent) {
+	return !(
+		'reason' in dependency && ['duplicate_project', 'quilt_fabric_api'].includes(dependency.reason)
+	)
+}
+
+function hasSkippedDuplicateDependency(resolution?: Labrinth.Content.v3.ResolveContentPlan) {
+	return (resolution?.skipped || []).some((dependency) => dependency.reason === 'duplicate_project')
+}
+
+function resolveContentType(projectType: DisplayProjectType): Labrinth.Content.v3.ContentType {
+	return ['mod', 'plugin', 'datapack', 'resourcepack', 'shader', 'modpack'].includes(projectType)
+		? (projectType as Labrinth.Content.v3.ContentType)
+		: 'mod'
+}
+
+function additionalFileKey(file: Labrinth.Versions.v3.VersionFile) {
+	return file.hashes?.sha1 ?? file.filename
+}
+
+function dedupeDependencyRows(
+	rows: DownloadDependencyRow[],
+	seenDependencies = new Set<string>(),
+): DownloadDependencyRow[] {
+	return rows.flatMap((row) => {
+		const identity = dependencyRowIdentity(row)
+		if (seenDependencies.has(identity)) return []
+
+		seenDependencies.add(identity)
+
+		return [
+			{
+				...row,
+				dependencies: dedupeDependencyRows(row.dependencies, seenDependencies),
+			},
+		]
+	})
+}
+
+function dependencyRowIdentity(row: DownloadDependencyRow) {
+	return row.projectHref ?? row.downloadHref ?? row.key
+}
+
+function hasDuplicateDependencyRows(
+	rows: DownloadDependencyRow[],
+	seenDependencies = new Set<string>(),
+): boolean {
+	for (const row of rows) {
+		const rowId = dependencyRowIdentity(row)
+		if (seenDependencies.has(rowId)) return true
+		seenDependencies.add(rowId)
+		if (hasDuplicateDependencyRows(row.dependencies, seenDependencies)) return true
+	}
+
+	return false
+}
+
+function collectDownloadableDependencyFiles(
+	rows: DownloadDependencyRow[],
+	seenHrefs = new Set<string>(),
+): DownloadableDependencyFile[] {
+	const files: DownloadableDependencyFile[] = []
+
+	for (const row of rows) {
+		if (row.downloadHref && !seenHrefs.has(row.downloadHref)) {
+			seenHrefs.add(row.downloadHref)
+			files.push({
+				href: row.downloadHref,
+				filename: row.filename || filenameFromUrl(row.downloadHref),
+				name: row.name,
+			})
+		}
+
+		files.push(...collectDownloadableDependencyFiles(row.dependencies, seenHrefs))
+	}
+
+	return files
+}
+
+function filenameFromUrl(url: string) {
+	try {
+		const filename = new URL(url).pathname.split('/').pop()
+		return filename ? decodeURIComponent(filename) : 'dependency.jar'
+	} catch {
+		return 'dependency.jar'
+	}
+}
+
+function sortedUnique(values: string[]) {
+	return [...new Set(values)].sort()
+}
+
+const messages = defineMessages({
+	anyCompatibleDependency: {
+		id: 'project.download.dependency-any-compatible',
+		defaultMessage: 'Any compatible',
+	},
+	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',
+	},
+	unavailableFile: {
+		id: 'project.download.file-unavailable',
+		defaultMessage: 'This file cannot be downloaded',
+	},
+})

apps/frontend/src/components/ui/ProjectDownloadModal/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :on-show="onShow" :on-hide="onHide" width="544px">
+	<NewModal ref="modal" :on-show="onShow" :on-hide="onHide" width="544px" actions-divider>
 		<template #title>
 			<template v-if="project">
 				<Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" />
@@ -19,6 +19,7 @@
 					:project="project"
 					:versions="versions"
 					:dependency-download-files="dependencyDownloadFiles"
+					:download-data-loaded="downloadRowsLoaded"
 					:download-reason="downloadReason"
 					:initial-game-version="initialGameVersion"
 					:initial-platform="initialPlatform"
@@ -27,20 +28,11 @@
 					:reset-key="downloadProjectResetKey"
 					@select-game-version="selectGameVersion"
 					@select-platform="selectPlatform"
-					@update:selection="projectDownloadSelection = $event"
+					@update:selection="updateProjectDownloadSelection"
 					@download="onDownload"
 				/>
 				<div class="flex flex-col gap-4">
-					<DownloadDependencies
-						:project="project"
-						:selected-version="selectedVersion"
-						:current-game-version="currentGameVersion"
-						:current-platform="currentPlatform"
-						:download-reason="downloadReason"
-						:additional-files="additionalFiles"
-						@update:downloadable-files="dependencyDownloadFiles = $event"
-						@download="onDownload"
-					/>
+					<DownloadDependencies @download="onDownload" />
 				</div>
 				<ServersPromo
 					v-if="flags.showProjectPageDownloadModalServersPromo"
@@ -54,16 +46,53 @@
 				/>
 			</div>
 		</template>
+		<template v-if="showDependencyDownloadActions" #actions>
+			<div class="flex flex-wrap justify-end gap-2">
+				<ButtonStyled>
+					<button
+						class="!shadow-none"
+						:disabled="!!downloadingActionType"
+						@click="downloadSelectedVersionZip"
+					>
+						<SpinnerIcon
+							v-if="downloadingActionType === 'zip'"
+							aria-hidden="true"
+							class="animate-spin"
+						/>
+						<DownloadIcon v-else aria-hidden="true" />
+						{{ formatMessage(messages.downloadAsZip) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button
+						class="!shadow-none"
+						:disabled="!!downloadingActionType || !dependencyDownloadFilesLoaded"
+						@click="downloadSelectedVersionFilesWithDependencies"
+					>
+						<SpinnerIcon
+							v-if="downloadingActionType === 'dependencies'"
+							aria-hidden="true"
+							class="animate-spin"
+						/>
+						<DownloadIcon v-else aria-hidden="true" />
+						{{ formatMessage(messages.downloadWithDependencies) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
 	</NewModal>
 </template>
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon, SpinnerIcon } from '@modrinth/assets'
 import {
 	Avatar,
+	ButtonStyled,
 	type CdnDownloadReason,
 	defineMessages,
 	injectModrinthClient,
+	injectNotificationManager,
 	NewModal,
 	ServersPromo,
 	truncatedTooltip,
@@ -71,13 +100,16 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import type { DisplayProjectType } from '@modrinth/utils'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import dayjs from 'dayjs'
+import JSZip from 'jszip'
 import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
 
 import { navigateTo } from '#app'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
 import { STALE_TIME, STALE_TIME_LONG } from '~/composables/queries/project'
 
+import { provideDownloadModalProvider } from './download-modal-provider'
 import DownloadDependencies from './DownloadDependencies.vue'
 import DownloadProject from './DownloadProject.vue'
 import InstallWithModrinthApp from './InstallWithModrinthApp.vue'
@@ -99,6 +131,12 @@ type DownloadableFile = {
 	filename: string
 }
 
+type DownloadedFile = DownloadableFile & {
+	blob: Blob
+}
+
+type DownloadActionType = 'zip' | 'dependencies'
+
 type NewModalRef = {
 	show: (event?: MouseEvent) => void
 	hide: () => void
@@ -138,19 +176,31 @@ const route = useRoute()
 const flags = useFeatureFlags()
 const tags = useGeneratedState()
 const client = injectModrinthClient()
+const queryClient = useQueryClient()
+const { createProjectDownloadUrl } = useCdnDownloadContext()
+const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const debug = useDebugLogger('DownloadModal')
 
 const modal = ref<NewModalRef | null>(null)
 const downloadTitleRef = ref<HTMLElement | null>(null)
+const modalOpening = ref(false)
 const modalOpen = ref(false)
 const showProjectId = ref<string | null>(null)
 const showOptions = ref<ResolvedProjectDownloadModalShowOptions>(getDefaultShowOptions())
 const downloadProjectResetKey = ref(0)
 const projectDownloadSelection = ref<ProjectDownloadSelection>(getDefaultProjectDownloadSelection())
-const dependencyDownloadFiles = ref<DownloadableFile[]>([])
+const pendingRouteSelection = ref({
+	gameVersion: getStringQueryValue(route.query.version),
+	platform: getStringQueryValue(route.query.loader),
+})
+const downloadingActionType = ref<DownloadActionType | null>(null)
 const MODAL_CLOSE_STATE_RESET_MS = 350
+const DOWNLOAD_URL_REVOKE_MS = 60000
+const DOWNLOAD_STAGGER_MS = 500
 let closeStateResetTimeout: ReturnType<typeof setTimeout> | null = null
+let modalShowRequestId = 0
+let unmounted = false
 
 const routeProjectId = computed(() => showProjectId.value ?? props.projectId ?? null)
 
@@ -183,11 +233,7 @@ const downloadTitle = computed(() => {
 })
 
 const versionsEnabled = ref(false)
-const {
-	data: versionsV3,
-	error: _versionsV3Error,
-	isFetching: versionsV3Loading,
-} = useQuery({
+const { data: versionsV3, isFetching: versionsV3Loading } = useQuery({
 	queryKey: computed(() => ['project', resolvedProjectId.value, 'versions', 'v3']),
 	queryFn: () =>
 		client.labrinth.versions_v3.getProjectVersions(resolvedProjectId.value!, {
@@ -198,24 +244,9 @@ const {
 	enabled: computed(() => !!resolvedProjectId.value && versionsEnabled.value),
 })
 
-const versions = computed<Labrinth.Versions.v3.Version[]>(() => {
-	const isModpack =
-		project.value?.actualProjectType === 'modpack' || project.value?.project_type === 'modpack'
-
-	return (versionsV3.value ?? []).map((version) => {
-		const files = Array.isArray(version.files) ? version.files : []
-		const gameVersions = Array.isArray(version.game_versions) ? version.game_versions : []
-		const loaders = Array.isArray(version.loaders) ? version.loaders : []
-		const mrpackLoaders = Array.isArray(version.mrpack_loaders) ? version.mrpack_loaders : []
-
-		return {
-			...version,
-			files,
-			game_versions: gameVersions,
-			loaders: isModpack && mrpackLoaders.length ? mrpackLoaders : loaders,
-		}
-	})
-})
+const versions = computed<Labrinth.Versions.v3.Version[]>(() =>
+	normalizeVersionsForDownload(versionsV3.value ?? []),
+)
 
 const initialGameVersion = computed(() => {
 	const version = route.query.version
@@ -238,6 +269,36 @@ const additionalFiles = computed(() => {
 	return selectedVersion.value.files.filter((file) => file !== selectedPrimaryFile.value)
 })
 
+const downloadModalProvider = provideDownloadModalProvider({
+	project,
+	selectedVersion,
+	selectedPrimaryFile,
+	currentGameVersion,
+	currentPlatform,
+	downloadReason: computed(() => props.downloadReason),
+	additionalFiles,
+})
+const dependencyDownloadFiles = downloadModalProvider.downloadableDependencyFiles
+const dependencyDownloadFilesLoaded = downloadModalProvider.downloadableDependencyFilesLoaded
+const downloadRowsLoaded = downloadModalProvider.downloadRowsLoaded
+
+const selectedVersionDownloadFiles = computed<DownloadableFile[]>(() => {
+	if (!selectedVersion.value) return []
+
+	return selectedVersion.value.files.map((file) => ({
+		href: createProjectDownloadUrl(file.url, {
+			reason: props.downloadReason,
+			gameVersion: currentGameVersion.value ?? undefined,
+			loader: currentPlatform.value ?? undefined,
+		}),
+		filename: file.filename,
+	}))
+})
+
+const showDependencyDownloadActions = computed(
+	() => dependencyDownloadFiles.value.length > 0 && selectedVersionDownloadFiles.value.length > 0,
+)
+
 watch(projectV2Error, (error) => {
 	if (error) {
 		debug('project query failed', error)
@@ -249,6 +310,22 @@ const messages = defineMessages({
 		id: 'project.download.title',
 		defaultMessage: 'Download {title}',
 	},
+	downloadAsZip: {
+		id: 'project.download.download-as-zip',
+		defaultMessage: 'Download as .zip',
+	},
+	downloadWithDependencies: {
+		id: 'project.download.download-with-dependencies',
+		defaultMessage: 'Download with deps',
+	},
+	downloadZipFailedTitle: {
+		id: 'project.download.zip-failed-title',
+		defaultMessage: 'Could not download files',
+	},
+	downloadZipFailedText: {
+		id: 'project.download.zip-failed-text',
+		defaultMessage: 'One or more files could not be downloaded. Please try again.',
+	},
 })
 
 function getProjectTypeForUrl(
@@ -278,15 +355,27 @@ function updateDownloadQuery({
 	platform: string | null
 }) {
 	if (!props.updateRouteSelection) return
+	const nextGameVersion =
+		gameVersion ??
+		pendingRouteSelection.value.gameVersion ??
+		getStringQueryValue(route.query.version)
+	const nextPlatform =
+		platform ?? pendingRouteSelection.value.platform ?? getStringQueryValue(route.query.loader)
+
+	pendingRouteSelection.value = {
+		gameVersion: nextGameVersion,
+		platform: nextPlatform,
+	}
+
 	navigateTo(
 		{
 			query: {
 				...route.query,
-				...(gameVersion && {
-					version: gameVersion,
+				...(nextGameVersion && {
+					version: nextGameVersion,
 				}),
-				...(platform && {
-					loader: platform,
+				...(nextPlatform && {
+					loader: nextPlatform,
 				}),
 			},
 			hash: route.hash,
@@ -298,17 +387,25 @@ function updateDownloadQuery({
 function selectGameVersion(gameVersion: string) {
 	updateDownloadQuery({
 		gameVersion,
-		platform: currentPlatform.value,
+		platform: null,
 	})
 }
 
 function selectPlatform(platform: string) {
 	updateDownloadQuery({
-		gameVersion: currentGameVersion.value,
+		gameVersion: null,
 		platform,
 	})
 }
 
+function updateProjectDownloadSelection(selection: ProjectDownloadSelection) {
+	projectDownloadSelection.value = selection
+	pendingRouteSelection.value = {
+		gameVersion: selection.currentGameVersion,
+		platform: selection.currentPlatform,
+	}
+}
+
 function onShow() {
 	clearCloseStateResetTimeout()
 	modalOpen.value = true
@@ -337,22 +434,37 @@ async function show(
 	event?: MouseEvent,
 	options: ProjectDownloadModalShowOptions = {},
 ): Promise<void> {
-	if (!modal.value || modalOpen.value) return
-	await waitForCloseStateReset()
-	if (!modal.value || modalOpen.value) return
-	showOptions.value = {
-		...getDefaultShowOptions(),
-		...options,
+	if (!modal.value || modalOpening.value || modalOpen.value) return
+	const showRequestId = ++modalShowRequestId
+	modalOpening.value = true
+
+	try {
+		await waitForCloseStateReset()
+		if (!isActiveShowRequest(showRequestId)) return
+		showOptions.value = {
+			...getDefaultShowOptions(),
+			...options,
+		}
+		showProjectId.value = showOptions.value.projectId ?? null
+		await nextTick()
+		if (!isActiveShowRequest(showRequestId)) return
+		if (!(await loadProjectForModal(!!showOptions.value.projectId))) return
+		if (!isActiveShowRequest(showRequestId)) return
+		resetDownloadState()
+		await preloadRouteSelectedDownload()
+		if (!isActiveShowRequest(showRequestId)) return
+		modalOpen.value = true
+		modal.value.show(event)
+	} finally {
+		if (modalShowRequestId === showRequestId) {
+			modalOpening.value = false
+		}
 	}
-	showProjectId.value = showOptions.value.projectId ?? null
-	await nextTick()
-	if (!(await loadProjectForModal(!!showOptions.value.projectId))) return
-	resetDownloadState()
-	modalOpen.value = true
-	modal.value.show(event)
 }
 
 function hide() {
+	modalShowRequestId += 1
+	modalOpening.value = false
 	if (!modal.value || !modalOpen.value) return
 	modal.value?.hide()
 }
@@ -361,6 +473,171 @@ function onDownload() {
 	emit('download')
 }
 
+async function downloadSelectedVersionZip() {
+	if (downloadingActionType.value) return
+
+	downloadingActionType.value = 'zip'
+	const files = dedupeDownloadFiles([
+		...selectedVersionDownloadFiles.value,
+		...dependencyDownloadFiles.value,
+	])
+
+	try {
+		const zip = new JSZip()
+		const usedFilenames = new Set<string>()
+		const downloadedFiles = await downloadFileBlobs(files)
+
+		for (const file of downloadedFiles) {
+			zip.file(uniqueFilename(file.filename, usedFilenames), file.blob)
+		}
+
+		downloadBlob(
+			await zip.generateAsync({
+				type: 'blob',
+				mimeType: 'application/zip',
+			}),
+			selectedVersionZipFilename(),
+		)
+		emit('download')
+	} catch (error) {
+		console.error('Failed to download selected version files:', error)
+		addNotification({
+			title: formatMessage(messages.downloadZipFailedTitle),
+			text: formatMessage(messages.downloadZipFailedText),
+			type: 'error',
+		})
+	} finally {
+		downloadingActionType.value = null
+	}
+}
+
+async function downloadSelectedVersionFilesWithDependencies() {
+	if (downloadingActionType.value || !dependencyDownloadFilesLoaded.value) return
+
+	downloadingActionType.value = 'dependencies'
+
+	try {
+		const files = dedupeDownloadFiles([
+			...selectedVersionDownloadFiles.value,
+			...dependencyDownloadFiles.value,
+		])
+
+		await downloadFiles(files)
+
+		emit('download')
+	} catch (error) {
+		console.error('Failed to download selected version files:', error)
+		addNotification({
+			title: formatMessage(messages.downloadZipFailedTitle),
+			text: formatMessage(messages.downloadZipFailedText),
+			type: 'error',
+		})
+	} finally {
+		downloadingActionType.value = null
+	}
+}
+
+async function downloadFileBlobs(files: DownloadableFile[]): Promise<DownloadedFile[]> {
+	return Promise.all(files.map((file) => downloadFileBlob(file)))
+}
+
+async function downloadFileBlob(file: DownloadableFile): Promise<DownloadedFile> {
+	const response = await fetch(file.href)
+
+	if (!response.ok) {
+		throw new Error(`Failed to download ${file.filename}`)
+	}
+
+	return {
+		...file,
+		blob: await response.blob(),
+	}
+}
+
+async function downloadFiles(files: DownloadableFile[]) {
+	await Promise.all(
+		files.map(async (file, index) => {
+			await delay(DOWNLOAD_STAGGER_MS * index)
+			downloadFileLink(file)
+		}),
+	)
+}
+
+function dedupeDownloadFiles(files: DownloadableFile[]) {
+	const result: DownloadableFile[] = []
+	const hrefs = new Set<string>()
+
+	for (const file of files) {
+		if (hrefs.has(file.href)) continue
+		hrefs.add(file.href)
+		result.push(file)
+	}
+
+	return result
+}
+
+function downloadBlob(blob: Blob, filename: string) {
+	const url = URL.createObjectURL(blob)
+	const link = document.createElement('a')
+
+	link.href = url
+	link.download = filename
+	document.body.appendChild(link)
+	link.click()
+	link.remove()
+	window.setTimeout(() => URL.revokeObjectURL(url), DOWNLOAD_URL_REVOKE_MS)
+}
+
+function downloadFileLink(file: DownloadableFile) {
+	const link = document.createElement('a')
+	link.href = file.href
+	link.download = file.filename
+	document.body.appendChild(link)
+	link.click()
+	link.remove()
+}
+
+function selectedVersionZipFilename() {
+	if (!project.value || !selectedVersion.value) return 'download.zip'
+
+	return `${sanitizeFilename(project.value.title)} ${sanitizeFilename(
+		selectedVersion.value.version_number,
+	)}.zip`
+}
+
+function sanitizeFilename(value: string) {
+	const sanitized = value
+		.replace(/[<>:"/\\|?*]/g, '')
+		.replace(/\s+/g, ' ')
+		.trim()
+
+	return sanitized || 'download'
+}
+
+function uniqueFilename(filename: string, usedFilenames: Set<string>) {
+	const sanitizedFilename = sanitizeFilename(filename)
+
+	if (!usedFilenames.has(sanitizedFilename)) {
+		usedFilenames.add(sanitizedFilename)
+		return sanitizedFilename
+	}
+
+	const extensionIndex = sanitizedFilename.lastIndexOf('.')
+	const basename =
+		extensionIndex > 0 ? sanitizedFilename.slice(0, extensionIndex) : sanitizedFilename
+	const extension = extensionIndex > 0 ? sanitizedFilename.slice(extensionIndex) : ''
+	let index = 2
+	let candidate = `${basename} (${index})${extension}`
+
+	while (usedFilenames.has(candidate)) {
+		index += 1
+		candidate = `${basename} (${index})${extension}`
+	}
+
+	usedFilenames.add(candidate)
+	return candidate
+}
+
 function getDefaultProjectDownloadSelection(): ProjectDownloadSelection {
 	return {
 		currentGameVersion: null,
@@ -378,6 +655,19 @@ function getDefaultShowOptions(): ResolvedProjectDownloadModalShowOptions {
 	}
 }
 
+function getStringQueryValue(value: unknown) {
+	return typeof value === 'string' ? value : null
+}
+
+function shouldPreloadRouteSelectedDownload() {
+	return (
+		props.useRouteHash &&
+		!showOptions.value.projectId &&
+		!!getStringQueryValue(route.query.version) &&
+		!!getStringQueryValue(route.query.loader)
+	)
+}
+
 function clearCloseStateResetTimeout() {
 	if (!closeStateResetTimeout) return
 	clearTimeout(closeStateResetTimeout)
@@ -386,7 +676,11 @@ function clearCloseStateResetTimeout() {
 
 async function waitForCloseStateReset() {
 	if (!closeStateResetTimeout) return
-	await new Promise((resolve) => setTimeout(resolve, MODAL_CLOSE_STATE_RESET_MS))
+	await delay(MODAL_CLOSE_STATE_RESET_MS)
+}
+
+async function delay(ms: number) {
+	await new Promise((resolve) => setTimeout(resolve, ms))
 }
 
 async function loadProjectForModal(forceRefetch: boolean) {
@@ -397,9 +691,127 @@ async function loadProjectForModal(forceRefetch: boolean) {
 	return !!data
 }
 
+async function loadVersionsForModal() {
+	if (!resolvedProjectId.value) return null
+	versionsEnabled.value = true
+	if (versionsV3.value) return versions.value
+
+	const data = await queryClient.ensureQueryData({
+		queryKey: ['project', resolvedProjectId.value, 'versions', 'v3'],
+		queryFn: () =>
+			client.labrinth.versions_v3.getProjectVersions(resolvedProjectId.value!, {
+				include_changelog: false,
+				apiVersion: 3,
+			}),
+		staleTime: STALE_TIME_LONG,
+	})
+
+	return Array.isArray(data) ? normalizeVersionsForDownload(data) : null
+}
+
+async function preloadRouteSelectedDownload() {
+	if (!shouldPreloadRouteSelectedDownload()) return
+
+	try {
+		const routeVersions = await loadVersionsForModal()
+		if (!routeVersions) return
+
+		const selection = getRouteSelectedDownloadSelection(routeVersions)
+		if (!selection) return
+
+		await preloadDependenciesForSelection(selection)
+	} catch (error) {
+		debug('failed to preload selected route download', error)
+	}
+}
+
+function getRouteSelectedDownloadSelection(
+	versionList: Labrinth.Versions.v3.Version[] = versions.value,
+): ProjectDownloadSelection | null {
+	const gameVersion = initialGameVersion.value
+	const platform = initialPlatform.value
+	const version = getSelectedRouteVersion(gameVersion, platform, versionList)
+	const primaryFile = version?.files?.find((file) => file.primary) || version?.files?.[0] || null
+
+	if (!gameVersion || !platform || !version || !primaryFile) return null
+
+	return {
+		currentGameVersion: gameVersion,
+		currentPlatform: platform,
+		selectedVersion: version,
+		selectedPrimaryFile: primaryFile,
+	}
+}
+
+function getSelectedRouteVersion(
+	gameVersion: string | null,
+	platform: string | null,
+	versionList: Labrinth.Versions.v3.Version[],
+) {
+	if (!gameVersion || !platform || !project.value) return null
+
+	const filteredVersions = versionList.filter((version) => {
+		const matchesPlatform =
+			project.value?.project_type === 'resourcepack' ||
+			(!!platform && version.loaders.includes(platform))
+
+		return version.game_versions.includes(gameVersion) && matchesPlatform
+	})
+
+	return (
+		latestVersionByType(filteredVersions, 'release') ||
+		latestVersionByType(filteredVersions, 'beta') ||
+		latestVersionByType(filteredVersions, 'alpha') ||
+		null
+	)
+}
+
+function normalizeVersionsForDownload(
+	versionList: Labrinth.Versions.v3.Version[],
+): Labrinth.Versions.v3.Version[] {
+	const isModpack =
+		project.value?.actualProjectType === 'modpack' || project.value?.project_type === 'modpack'
+
+	return versionList.map((version) => {
+		const files = Array.isArray(version.files) ? version.files : []
+		const gameVersions = Array.isArray(version.game_versions) ? version.game_versions : []
+		const loaders = Array.isArray(version.loaders) ? version.loaders : []
+		const mrpackLoaders = Array.isArray(version.mrpack_loaders) ? version.mrpack_loaders : []
+
+		return {
+			...version,
+			files,
+			game_versions: gameVersions,
+			loaders: isModpack && mrpackLoaders.length ? mrpackLoaders : loaders,
+		}
+	})
+}
+
+function latestVersionByType(
+	versionList: Labrinth.Versions.v3.Version[],
+	type: Labrinth.Versions.v3.VersionChannel,
+) {
+	return versionList
+		.filter((version) => version.version_type === type)
+		.reduce<Labrinth.Versions.v3.Version | undefined>((latest, version) => {
+			if (!latest || dayjs(version.date_published).isAfter(dayjs(latest.date_published))) {
+				return version
+			}
+
+			return latest
+		}, undefined)
+}
+
+async function preloadDependenciesForSelection(selection: ProjectDownloadSelection) {
+	await downloadModalProvider.preloadDependenciesForSelection(selection)
+}
+
+function isActiveShowRequest(showRequestId: number) {
+	return !unmounted && modalShowRequestId === showRequestId && !!modal.value && !modalOpen.value
+}
+
 function resetDownloadState() {
 	projectDownloadSelection.value = getDefaultProjectDownloadSelection()
-	dependencyDownloadFiles.value = []
 	downloadProjectResetKey.value += 1
 }
 
@@ -407,6 +819,7 @@ function openFromHash() {
 	if (
 		!props.useRouteHash ||
 		!modal.value ||
+		modalOpening.value ||
 		modalOpen.value ||
 		showProjectId.value ||
 		route.hash !== '#download'
@@ -437,11 +850,14 @@ watch(modal, openFromHash)
 watch(() => route.hash, openFromHash)
 watch(routeProjectId, () => {
 	projectDownloadSelection.value = getDefaultProjectDownloadSelection()
-	dependencyDownloadFiles.value = []
 	downloadProjectResetKey.value += 1
 })
 
-onUnmounted(clearCloseStateResetTimeout)
+onUnmounted(() => {
+	unmounted = true
+	modalShowRequestId += 1
+	clearCloseStateResetTimeout()
+})
 
 defineExpose({ show, hide })
 </script>

apps/frontend/src/locales/da-DK/index.json

@@ -1766,9 +1766,6 @@
   "project.download.no-app": {
     "message": "Har ikke Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Ingen versioner tilgængelig til {gameVersion} og {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} understøtter ikke {platform} til {gameVersion}"
   },

apps/frontend/src/locales/de-CH/index.json

@@ -3227,9 +3227,6 @@
   "project.download.no-app": {
     "message": "Du hast die Modrinth App nicht?"
   },
-  "project.download.no-versions-available": {
-    "message": "Keinen versionen verfügbar für {gameVersion} und {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} unterstützt {platform} für {gameVersion} nicht"
   },

apps/frontend/src/locales/de-DE/index.json

@@ -3227,9 +3227,6 @@
   "project.download.no-app": {
     "message": "Du hast die Modrinth App nicht?"
   },
-  "project.download.no-versions-available": {
-    "message": "Keine Versionen für {gameVersion} und {platform} verfügbar."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} unterstützt {platform} für die {gameVersion} nicht"
   },

apps/frontend/src/locales/en-US/index.json

@@ -3285,7 +3285,7 @@
     "message": "This loader is incompatible with the base project."
   },
   "project.download.compatible-version-title": {
-    "message": "Compatible version"
+    "message": "Compatible versions"
   },
   "project.download.dependencies-title": {
     "message": "Dependencies"
@@ -3293,6 +3293,9 @@
   "project.download.dependency-already-installed": {
     "message": "This dependency is already installed"
   },
+  "project.download.dependency-any-compatible": {
+    "message": "Any compatible"
+  },
   "project.download.dependency-conflicting": {
     "message": "This dependency conflicts with another dependency"
   },
@@ -3317,9 +3320,18 @@
   "project.download.dependency-unavailable": {
     "message": "This dependency cannot be downloaded"
   },
+  "project.download.download": {
+    "message": "Download"
+  },
+  "project.download.download-as-zip": {
+    "message": "Download as .zip"
+  },
   "project.download.download-version": {
     "message": "Download {version}"
   },
+  "project.download.download-with-dependencies": {
+    "message": "Download with deps"
+  },
   "project.download.duplicate-dependencies-hidden": {
     "message": "Duplicate dependencies are hidden"
   },
@@ -3329,8 +3341,8 @@
   "project.download.game-version-unsupported-tooltip": {
     "message": "{title} does not support {gameVersion} for {platform}"
   },
-  "project.download.install-with-app-description": {
-    "message": "Automatically install the correct version and dependencies."
+  "project.download.install-with-app": {
+    "message": "Install with Modrinth App"
   },
   "project.download.manually": {
     "message": "Download manually"
@@ -3341,9 +3353,6 @@
   "project.download.no-game-versions-found": {
     "message": "No game versions found"
   },
-  "project.download.no-versions-available": {
-    "message": "No versions available for {gameVersion} and {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} does not support {platform} for {gameVersion}"
   },
@@ -3356,18 +3365,6 @@
   "project.download.select-platform": {
     "message": "Select platform"
   },
-  "project.download.selected-version-download-all": {
-    "message": "Download all (.zip)"
-  },
-  "project.download.selected-version-downloading": {
-    "message": "Downloading... ({current}/{total})"
-  },
-  "project.download.selected-version-failed-text": {
-    "message": "One or more version files could not be downloaded. Please try again."
-  },
-  "project.download.selected-version-failed-title": {
-    "message": "Could not download version"
-  },
   "project.download.show-all-versions": {
     "message": "Show all versions"
   },
@@ -3377,6 +3374,12 @@
   "project.download.unknown-loader": {
     "message": "Unknown loader"
   },
+  "project.download.zip-failed-text": {
+    "message": "One or more files could not be downloaded. Please try again."
+  },
+  "project.download.zip-failed-title": {
+    "message": "Could not download files"
+  },
   "project.environment.migration-no-permission.message": {
     "message": "We've just overhauled the Environments system on Modrinth and new options are now available. You don't have permission to modify these settings, but please let another member of the project know that the environment metadata needs to be verified."
   },

apps/frontend/src/locales/es-419/index.json

@@ -3227,9 +3227,6 @@
   "project.download.no-app": {
     "message": "¿No tienes la Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "No hay versiones disponibles para {gameVersion} y {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} no soporta {platform} para {gameVersion}"
   },

apps/frontend/src/locales/es-ES/index.json

@@ -3107,9 +3107,6 @@
   "project.download.no-app": {
     "message": "¿No tienes la aplicación Modrinth?"
   },
-  "project.download.no-versions-available": {
-    "message": "No hay versiones disponibles para {gameVersion} y {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} no está soportado para {platform} en la {gameVersion}"
   },

apps/frontend/src/locales/fil-PH/index.json

@@ -2414,9 +2414,6 @@
   "project.download.no-app": {
     "message": "Wala kang Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Walang bersiyong magagamit para sa {gameVersion} at {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "Hindi masuport ng {title} ang {platform} para sa {gameVersion}"
   },

apps/frontend/src/locales/fr-FR/index.json

@@ -3227,9 +3227,6 @@
   "project.download.no-app": {
     "message": "Vous n'avez pas Modrinth App ?"
   },
-  "project.download.no-versions-available": {
-    "message": "Aucune version disponible pour {gameVersion} et {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} ne supporte pas {platform} pour {gameVersion}"
   },

apps/frontend/src/locales/he-IL/index.json

@@ -2033,9 +2033,6 @@
   "project.download.no-app": {
     "message": "אין לכם את אפליקציית Modrinth?"
   },
-  "project.download.no-versions-available": {
-    "message": "אין גרסאות זמינות עבור {gameVersion} ו-{platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} אינו תומך ב-{platform} עבור {gameVersion}"
   },

apps/frontend/src/locales/hu-HU/index.json

@@ -2924,9 +2924,6 @@
   "project.download.no-app": {
     "message": "Nincs meg a Modrinth App? "
   },
-  "project.download.no-versions-available": {
-    "message": "Nem érhető el verzió ehhez: {platform} {gameVersion}"
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "A(z) {title} nem támogatja ezt a verziót: {platform} {gameVersion}"
   },

apps/frontend/src/locales/id-ID/index.json

@@ -2429,9 +2429,6 @@
   "project.download.no-app": {
     "message": "Tidak memiliki Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Tidak ada versi tersedia untuk {gameVersion} dan {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} tidak mendukung {platform} untuk {gameVersion}"
   },

apps/frontend/src/locales/it-IT/index.json

@@ -3218,9 +3218,6 @@
   "project.download.no-app": {
     "message": "Non hai Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Nessuna versione disponibile per {gameVersion} e {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} non supporta {platform} per {gameVersion}"
   },

apps/frontend/src/locales/ja-JP/index.json

@@ -2735,9 +2735,6 @@
   "project.download.no-app": {
     "message": "Modrinth Appをお持ちでないですか？"
   },
-  "project.download.no-versions-available": {
-    "message": "{gameVersion}および{platform}向けのバージョンは利用できません。"
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title}は{gameVersion}の{platform}に対応していません"
   },

apps/frontend/src/locales/ko-KR/index.json

@@ -2549,9 +2549,6 @@
   "project.download.no-app": {
     "message": "Modrinth 앱을 설치하지 않으셨나요?"
   },
-  "project.download.no-versions-available": {
-    "message": "{gameVersion} 및 {platform}용 버전이 없습니다."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} 은(는) {gameVersion} 용 {platform} 을(를) 지원하지 않습니다."
   },

apps/frontend/src/locales/ms-MY/index.json

@@ -2924,9 +2924,6 @@
   "project.download.no-app": {
     "message": "Tidak ada Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Tiada versi tersedia untuk {gameVersion} dan {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} tidak menyokong {platform} untuk {gameVersion}"
   },

apps/frontend/src/locales/nl-NL/index.json

@@ -2798,9 +2798,6 @@
   "project.download.no-app": {
     "message": "Heb je de Modrinth App niet?"
   },
-  "project.download.no-versions-available": {
-    "message": "Geen versies beschikbaar voor {gameVersion} en {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} steunt niet {platform} voor {gameVersion}"
   },

apps/frontend/src/locales/no-NO/index.json

@@ -2255,9 +2255,6 @@
   "project.download.no-app": {
     "message": "Har du ikke en Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Ingen versjoner tilgjengelige for {gameVersion} og {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} støtter ikke {platform} for {gameVersion}"
   },

apps/frontend/src/locales/pl-PL/index.json

@@ -3221,9 +3221,6 @@
   "project.download.no-app": {
     "message": "Nie masz Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Brak dostępnych wersji dla {gameVersion} i {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} nie obsługuje {platform} dla {gameVersion}"
   },

apps/frontend/src/locales/pt-BR/index.json

@@ -3218,9 +3218,6 @@
   "project.download.no-app": {
     "message": "Não tem o Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Nenhuma versão disponível para {gameVersion} e {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} não suporta {platform} para {gameVersion}"
   },

apps/frontend/src/locales/pt-PT/index.json

@@ -2228,9 +2228,6 @@
   "project.download.no-app": {
     "message": "Não tens a Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Nenhuma versão disponível para {gameVersion} e {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} não suporta {platform} para {gameVersion}"
   },

apps/frontend/src/locales/ro-RO/index.json

@@ -1421,9 +1421,6 @@
   "project.download.no-app": {
     "message": "Nu ai Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Nu există versiuni disponibile pentru {gameVersion} și {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} nu este compatibil cu {platform} pentru {gameVersion}"
   },

apps/frontend/src/locales/ru-RU/index.json

@@ -3221,9 +3221,6 @@
   "project.download.no-app": {
     "message": "У вас нет Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Нет версий, доступных для {gameVersion} и {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} не поддерживает {platform} для {gameVersion}"
   },

apps/frontend/src/locales/sv-SE/index.json

@@ -2810,9 +2810,6 @@
   "project.download.no-app": {
     "message": "Har du inte Modrinth appen?"
   },
-  "project.download.no-versions-available": {
-    "message": "Inga versioner finns tillgängliga för {gameVersion} och {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} stöttar inte {platform} för {gameVersion}"
   },

apps/frontend/src/locales/tr-TR/index.json

@@ -3167,9 +3167,6 @@
   "project.download.no-app": {
     "message": "Modrinth App Yok Mu?"
   },
-  "project.download.no-versions-available": {
-    "message": "{gameVersion} ve {platform} için sürüm mevcut değil."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title}, {gameVersion} sürümünde {platform} desteklemiyor"
   },

apps/frontend/src/locales/uk-UA/index.json

@@ -2855,9 +2855,6 @@
   "project.download.no-app": {
     "message": "Не маєте Modrinth App?"
   },
-  "project.download.no-versions-available": {
-    "message": "Немає доступних версій для {gameVersion} та {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} не підтримує {platform} для {gameVersion}"
   },

apps/frontend/src/locales/vi-VN/index.json

@@ -3071,9 +3071,6 @@
   "project.download.no-app": {
     "message": "Chưa có Ứng dụng Modrinth?"
   },
-  "project.download.no-versions-available": {
-    "message": "Không có phiên bản khả dụng cho {gameVersion} và {platform}."
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} không hỗ trợ {platform} cho {gameVersion}"
   },

apps/frontend/src/locales/zh-CN/index.json

@@ -3221,9 +3221,6 @@
   "project.download.no-app": {
     "message": "还没有 Modrinth App 吗？"
   },
-  "project.download.no-versions-available": {
-    "message": "没有支持 {platform} {gameVersion} 的版本。"
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} 不支持 {gameVersion} 的 {platform}"
   },

apps/frontend/src/locales/zh-TW/index.json

@@ -3227,9 +3227,6 @@
   "project.download.no-app": {
     "message": "還沒有 Modrinth App 嗎？"
   },
-  "project.download.no-versions-available": {
-    "message": "{platform} {gameVersion} 沒有可用的版本。"
-  },
   "project.download.platform-unsupported-tooltip": {
     "message": "{title} 不支援 {platform} {gameVersion}"
   },