fix: single loader projects download button not showing (#5391)

* fix: single loader projects downlaod button not showing

* pnpm prepr

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>

apps/frontend/src/pages/[type]/[id].vue

@@ -97,6 +97,8 @@
 				ref="downloadModal"
 				:on-show="
 					() => {
+						debug('on-show fired')
+						loadVersions()
 						navigateTo({ query: route.query, hash: '#download' })
 					}
 				"
@@ -388,7 +390,9 @@
 									currentGameVersion &&
 									!filteredRelease &&
 									!filteredBeta &&
-									!filteredAlpha
+									!filteredAlpha &&
+									!versionsLoading &&
+									versions.length > 0
 								"
 							>
 								{{
@@ -986,6 +990,7 @@ import {
 	ServersPromo,
 	StyledInput,
 	TagItem,
+	useDebugLogger,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -1032,6 +1037,8 @@ const cosmetics = useCosmetics()
 
 const { locale, formatMessage } = useVIntl()
 
+const debug = useDebugLogger('DownloadModal')
+
 const settingsModal = ref()
 const downloadModal = ref()
 const overTheTopDownloadAnimation = ref()
@@ -1410,11 +1417,21 @@ async function getLicenseData(event) {
 }
 
 const filteredVersions = computed(() => {
-	return versions.value.filter(
+	const result = versions.value.filter(
 		(x) =>
-			x.game_versions.includes(currentGameVersion.value) &&
-			(x.loaders.includes(currentPlatform.value) || project.value.project_type === 'resourcepack'),
+			x.game_versions?.includes(currentGameVersion.value) &&
+			(x.loaders?.includes(currentPlatform.value) || project.value.project_type === 'resourcepack'),
 	)
+	debug('filteredVersions', {
+		total: versions.value.length,
+		filtered: result.length,
+		currentGameVersion: currentGameVersion.value,
+		currentPlatform: currentPlatform.value,
+		versionsEnabled: versionsEnabled.value,
+		versionsLoading: versionsV3Loading.value,
+		sampleLoaders: versions.value.slice(0, 3).map((v) => v.loaders),
+	})
+	return result
 })
 
 const filteredRelease = computed(() => {
@@ -1607,6 +1624,10 @@ const versionsLoading = computed(() => versionsV3Loading.value)
 
 // Load versions on demand (client-side only)
 function loadVersions() {
+	debug('loadVersions called', {
+		projectId: projectId.value,
+		alreadyEnabled: versionsEnabled.value,
+	})
 	versionsEnabled.value = true
 }
 
@@ -2070,15 +2091,35 @@ if (project.value && loader !== undefined && project.value.loaders.includes(load
 	userSelectedPlatform.value = loader
 }
 
+if (route.hash === '#download' || version !== undefined || loader !== undefined) {
+	debug('eager loadVersions from setup', { hash: route.hash, version, loader })
+	loadVersions()
+}
+
 watch(downloadModal, (modal) => {
 	if (!modal) return
 
 	// route.hash returns everything in the hash string, including the # itself
 	if (route.hash === '#download') {
+		debug('hash #download watch fired, opening modal')
+		loadVersions()
 		modal.show()
 	}
 })
 
+watch(
+	[versionsV3, _versionsV3Error],
+	([data, error]) => {
+		debug('versionsV3 query changed', {
+			hasData: !!data,
+			count: data?.length ?? 0,
+			error: error?.message ?? null,
+			projectId: projectId.value,
+		})
+	},
+	{ immediate: true },
+)
+
 async function setProcessing() {
 	// Guard against multiple submissions while mutation is pending
 	if (patchStatusMutation.isPending.value) return

packages/assets/generated-icons.ts

@@ -3,6 +3,8 @@
 
 import type { FunctionalComponent, SVGAttributes } from 'vue'
 
+export type IconComponent = FunctionalComponent<SVGAttributes>
+
 import _AffiliateIcon from './icons/affiliate.svg?component'
 import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
@@ -325,8 +327,6 @@ import _XCircleIcon from './icons/x-circle.svg?component'
 import _ZoomInIcon from './icons/zoom-in.svg?component'
 import _ZoomOutIcon from './icons/zoom-out.svg?component'
 
-export type IconComponent = FunctionalComponent<SVGAttributes>
-
 export const AffiliateIcon = _AffiliateIcon
 export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon

packages/ui/src/composables/debug-logger.ts

@@ -22,7 +22,7 @@ export function useDebugLogger(namespace: string) {
 	// eslint-disable-next-line
 	return (...args: any[]) => {
 		const location = getCallerLocation()
-		const prefix = location ? `[${namespace}] [${location}]` : `[${namespace}]`
+		const prefix = location ? `[${namespace}] ${location}` : `[${namespace}]`
 		console.debug(prefix, ...args)
 	}
 }