fix: invalid args path (#5467)

* fix port in server address

* fix: invalid args for path

* fix page loading

* hide labels

apps/app-frontend/src/pages/Browse.vue

@@ -812,7 +812,7 @@ previousFilterState.value = JSON.stringify({
 						:link="`/project/${project.slug ?? project.project_id}`"
 						:server-online-players="project.minecraft_java_server?.ping?.data?.players_online ?? 0"
 						:server-region="project.minecraft_server?.region"
-						:server-recent-plays="project.minecraft_java_server?.verified_plays_4w ?? 0"
+						:server-recent-plays="project.minecraft_java_server?.verified_plays_2w ?? 0"
 						:server-modpack-content="getServerModpackContent(project)"
 						:server-ping="serverPings[project.project_id]"
 						:server-status-online="!!project.minecraft_java_server?.ping?.data"

apps/app-frontend/src/pages/instance/Index.vue

@@ -47,7 +47,7 @@
 								/>
 								<router-link
 									:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
-									class="hover:underline text-primary"
+									class="hover:underline text-primary truncate"
 								>
 									{{ linkedProjectV3.name }}
 								</router-link>
@@ -55,10 +55,20 @@
 						</template>
 
 						<template v-else>
-							<ServerOnlinePlayers :online="playersOnline ?? 0" :status-online="statusOnline" />
+							<ServerOnlinePlayers
+								v-if="playersOnline !== undefined"
+								:online="playersOnline"
+								:status-online="statusOnline"
+								hide-label
+							/>
+
+							<ServerRecentPlays :recent-plays="recentPlays ?? 0" hide-label />
 
 							<div
-								v-if="playersOnline !== undefined && (minecraftServer?.region || ping)"
+								v-if="
+									(playersOnline !== undefined || recentPlays !== undefined) &&
+									(minecraftServer?.region || ping)
+								"
 								class="w-1.5 h-1.5 rounded-full bg-surface-5"
 							></div>
 
@@ -84,7 +94,7 @@
 								/>
 								<router-link
 									:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
-									class="hover:underline text-primary"
+									class="hover:underline text-primary truncate"
 								>
 									{{ linkedProjectV3.name }}
 								</router-link>
@@ -297,6 +307,7 @@ import {
 	OverflowMenu,
 	ServerOnlinePlayers,
 	ServerPing,
+	ServerRecentPlays,
 	ServerRegion,
 } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
@@ -354,6 +365,9 @@ const selected = ref<unknown[]>([])
 const minecraftServer = computed(() => linkedProjectV3.value?.minecraft_server)
 const javaServerPingData = computed(() => linkedProjectV3.value?.minecraft_java_server?.ping?.data)
 const statusOnline = computed(() => !!javaServerPingData.value)
+const recentPlays = computed(
+	() => linkedProjectV3.value?.minecraft_java_server?.verified_plays_2w ?? undefined,
+)
 const playersOnline = ref<number | undefined>(undefined)
 const ping = ref<number | undefined>(undefined)
 
@@ -362,6 +376,7 @@ async function fetchInstance() {
 	linkedProjectV3.value = undefined
 	modrinthVersions.value = []
 	ping.value = undefined
+	playersOnline.value = undefined
 
 	instance.value = await get(route.params.id as string).catch(handleError)
 
@@ -372,6 +387,10 @@ async function fetchInstance() {
 				'must_revalidate',
 			)
 
+			if (linkedProjectV3.value?.minecraft_server != null) {
+				isServerInstance.value = true
+			}
+
 			if (linkedProjectV3.value && linkedProjectV3.value.versions) {
 				const versions = await get_version_many(linkedProjectV3.value.versions, 'must_revalidate')
 				modrinthVersions.value = versions.sort(
@@ -379,31 +398,32 @@ async function fetchInstance() {
 						dayjs(b.date_published).valueOf() - dayjs(a.date_published).valueOf(),
 				)
 			}
-
-			if (linkedProjectV3.value?.minecraft_server != null) {
-				isServerInstance.value = true
-
-				const serverAddress = linkedProjectV3.value?.minecraft_java_server?.address
-				if (serverAddress) {
-					try {
-						const status = await get_server_status(serverAddress)
-						const latency = await getServerLatency(serverAddress)
-						ping.value = latency
-						playersOnline.value = status.players?.online
-					} catch (err) {
-						console.error(`Failed to ping server ${serverAddress}:`, err)
-					}
-				}
-			}
 		} catch (error) {
 			handleError(error as Error)
 		}
 	}
 
-	await updatePlayState()
+	fetchDeferredData()
+}
+
+function fetchDeferredData() {
+	const serverAddress = linkedProjectV3.value?.minecraft_java_server?.address
+	if (isServerInstance.value && serverAddress) {
+		Promise.all([get_server_status(serverAddress), getServerLatency(serverAddress)])
+			.then(([status, latency]) => {
+				ping.value = latency
+				playersOnline.value = status.players?.online
+			})
+			.catch((err) => {
+				console.error(`Failed to ping server ${serverAddress}:`, err)
+			})
+	}
+
+	updatePlayState()
 }
 
 async function updatePlayState() {
+	if (!route.params.id) return
 	const runningProcesses = await get_by_profile_path(route.params.id as string).catch(handleError)
 
 	playing.value = Array.isArray(runningProcesses) && runningProcesses.length > 0

apps/app-frontend/src/pages/project/Index.vue

@@ -361,8 +361,11 @@ function handleAddServerToInstance() {
 }
 
 async function fetchProjectData() {
-	const project = await get_project(route.params.id, 'must_revalidate').catch(handleError)
+	const [project, projectV3Result] = await Promise.all([
-	projectV3.value = await get_project_v3(route.params.id, 'must_revalidate').catch(handleError)
+		get_project(route.params.id, 'must_revalidate').catch(handleError),
+		get_project_v3(route.params.id, 'must_revalidate').catch(handleError),
+	])
+	projectV3.value = projectV3Result
 
 	if (!project) {
 		handleError('Error loading project')
@@ -392,67 +395,74 @@ async function fetchProjectData() {
 	}
 
 	isServerProject.value = projectV3.value?.minecraft_server != null
-
-	// Ping server for latency
-	const serverAddress = projectV3.value?.minecraft_java_server?.address
 	serverStatusOnline.value = !!projectV3.value?.minecraft_java_server?.ping?.data
+
+	breadcrumbs.setName('Project', data.value.title)
+
+	fetchDeferredServerData(project)
+}
+
+function fetchDeferredServerData(project) {
+	const serverAddress = projectV3.value?.minecraft_java_server?.address
 	if (serverAddress) {
 		serverPing.value = undefined
-		try {
+		getServerLatency(serverAddress)
-			serverPing.value = await getServerLatency(serverAddress)
+			.then((latency) => {
-		} catch (error) {
+				serverPing.value = latency
-			console.error(`Failed to ping server ${serverAddress}:`, error)
+			})
-		}
+			.catch((error) => {
+				console.error(`Failed to ping server ${serverAddress}:`, error)
+			})
 	}
 
-	// Fetch server sidebar data (modpack version + project)
 	const content = projectV3.value?.minecraft_java_server?.content
 	if (content?.kind === 'modpack' && content.version_id) {
-		const modpackVersion = await get_version(content.version_id, 'bypass').catch(handleError)
+		get_version(content.version_id, 'bypass')
-		if (modpackVersion) {
+			.catch(handleError)
-			serverRecommendedVersion.value = modpackVersion.game_versions?.[0] ?? null
+			.then(async (modpackVersion) => {
-			serverModpackLoaders.value = modpackVersion.mrpack_loaders ?? []
+				if (!modpackVersion) return
-			if (modpackVersion.project_id) {
+				serverRecommendedVersion.value = modpackVersion.game_versions?.[0] ?? null
-				const modpackProject = await get_project_v3(
+				serverModpackLoaders.value = modpackVersion.mrpack_loaders ?? []
-					modpackVersion.project_id,
+				if (modpackVersion.project_id) {
-					'must_revalidate',
+					const modpackProject = await get_project_v3(
-				).catch(handleError)
+						modpackVersion.project_id,
-				if (modpackProject) {
+						'must_revalidate',
-					const primaryFile =
+					).catch(handleError)
-						modpackVersion.files?.find((f) => f.primary) ?? modpackVersion.files?.[0]
+					if (modpackProject) {
+						const primaryFile =
+							modpackVersion.files?.find((f) => f.primary) ?? modpackVersion.files?.[0]
 
-					serverRequiredContent.value = {
+						serverRequiredContent.value = {
-						name: modpackProject.name,
+							name: modpackProject.name,
-						versionNumber: modpackVersion.version_number ?? '',
+							versionNumber: modpackVersion.version_number ?? '',
-						icon: modpackProject.icon_url,
+							icon: modpackProject.icon_url,
-						onclickName:
+							onclickName:
-							modpackProject.id !== project.id
+								modpackProject.id !== project.id
-								? () => router.push(`/project/${modpackProject.id}`)
+									? () => router.push(`/project/${modpackProject.id}`)
-								: undefined,
+									: undefined,
-						onclickVersion:
+							onclickVersion:
-							modpackProject.id !== project.id
+								modpackProject.id !== project.id
-								? () => router.push(`/project/${modpackProject.id}/version/${modpackVersion.id}`)
+									? () => router.push(`/project/${modpackProject.id}/version/${modpackVersion.id}`)
-								: undefined,
+									: undefined,
-						onclickDownload: primaryFile?.url ? () => openUrl(primaryFile.url) : undefined,
+							onclickDownload: primaryFile?.url ? () => openUrl(primaryFile.url) : undefined,
-						showCustomModpackTooltip: modpackProject.id === project.id,
+							showCustomModpackTooltip: modpackProject.id === project.id,
+						}
 					}
 				}
-			}
+			})
-		}
 	} else if (content?.kind === 'vanilla') {
 		serverRecommendedVersion.value = content.recommended_game_version ?? null
 		const supported = content.supported_game_versions ?? []
 		serverSupportedVersions.value = supported.filter((v) => !!v)
 	}
 
-	breadcrumbs.setName('Project', data.value.title)
+	updateServerPlayState()
-
-	await updateServerPlayState()
 }
 
 await fetchProjectData()
 
-const unlistenProcesses = await process_listener((e) => {
+let unlistenProcesses
+process_listener((e) => {
 	if (
 		e.event === 'finished' &&
 		serverInstancePath.value &&
@@ -460,10 +470,12 @@ const unlistenProcesses = await process_listener((e) => {
 	) {
 		serverPlaying.value = false
 	}
+}).then((unlisten) => {
+	unlistenProcesses = unlisten
 })
 
 onUnmounted(() => {
-	unlistenProcesses()
+	unlistenProcesses?.()
 })
 
 watch(

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

@@ -17,7 +17,7 @@
 				<ServerDetails
 					:online-players="playersOnline"
 					:status-online="statusOnline"
-					:recent-plays="javaServer?.verified_plays_4w ?? 0"
+					:recent-plays="javaServer?.verified_plays_2w ?? 0"
 				/>
 				<div v-if="project.categories.length > 0" class="hidden items-center gap-2 md:flex">
 					<div class="flex gap-2">

packages/ui/src/components/project/server/ServerOnlinePlayers.vue

@@ -17,7 +17,7 @@ defineProps<{
 <template>
 	<StatItem
 		v-tooltip="`${formatNumber(online, true)} players online`"
-		class="smart-clickable:allow-pointer-events"
+		class="smart-clickable:allow-pointer-events w-max"
 	>
 		<OnlineIndicatorIcon
 			:style="{

packages/ui/src/components/project/server/ServerRecentPlays.vue

@@ -18,7 +18,7 @@ defineProps<{
 		v-tooltip="
 			`${formatNumber(recentPlays, true)} recent play${recentPlays === 1 ? '' : 's'} from Modrinth in the past 2 weeks`
 		"
-		class="smart-clickable:allow-pointer-events"
+		class="smart-clickable:allow-pointer-events w-max"
 	>
 		<PlayIcon />
 		{{