Merge server project header into project header (#5500)

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

@@ -14,42 +14,51 @@
 		</template>
 		<template #stats>
 			<div class="flex items-center gap-3 flex-wrap gap-y-0">
-				<div
-					v-tooltip="
-						capitalizeString(
-							formatMessage(commonMessages.projectDownloads, {
-								count: formatNumber(project.downloads, false),
-							}),
-						)
-					"
-					class="flex items-center gap-2 font-semibold cursor-help"
-				>
-					<DownloadIcon class="h-6 w-6 text-secondary" />
-					{{ formatNumber(project.downloads) }}
-				</div>
-				<div
-					v-tooltip="
-						capitalizeString(
-							formatMessage(commonMessages.projectFollowers, {
-								count: formatNumber(project.followers, false),
-							}),
-						)
-					"
-					class="flex items-center gap-2 cursor-help"
-					:class="{ 'md:border-r': project.categories.length > 0 }"
-				>
-					<HeartIcon class="h-6 w-6 text-secondary" />
-					<span class="font-semibold">
-						{{ formatNumber(project.followers) }}
-					</span>
-				</div>
+				<template v-if="isServerProject">
+					<ServerDetails
+						v-if="projectV3?.status !== 'draft'"
+						:online-players="playersOnline"
+						:status-online="statusOnline"
+						:recent-plays="javaServer?.verified_plays_2w ?? 0"
+					/>
+				</template>
+				<template v-else>
+					<div
+						v-tooltip="
+							capitalizeString(
+								formatMessage(commonMessages.projectDownloads, {
+									count: formatNumber(project.downloads, false),
+								}),
+							)
+						"
+						class="flex items-center gap-2 font-semibold cursor-help"
+					>
+						<DownloadIcon class="h-6 w-6 text-secondary" />
+						{{ formatNumber(project.downloads) }}
+					</div>
+					<div
+						v-tooltip="
+							capitalizeString(
+								formatMessage(commonMessages.projectFollowers, {
+									count: formatNumber(project.followers, false),
+								}),
+							)
+						"
+						class="flex items-center gap-2 cursor-help"
+						:class="{ 'md:border-r': project.categories.length > 0 }"
+					>
+						<HeartIcon class="h-6 w-6 text-secondary" />
+						<span class="font-semibold">
+							{{ formatNumber(project.followers) }}
+						</span>
+					</div>
+				</template>
 				<div v-if="project.categories.length > 0" class="hidden items-center gap-2 md:flex">
-					<TagsIcon class="h-6 w-6 text-secondary" />
 					<div class="flex flex-wrap gap-2">
 						<TagItem
 							v-for="(category, index) in project.categories"
 							:key="index"
-							:action="() => router.push(`/${project.project_type}s?f=categories:${category}`)"
+							:action="() => router.push(`${searchUrl}?f=categories:${category}`)"
 						>
 							<FormattedTag :tag="category" />
 						</TagItem>
@@ -63,8 +72,10 @@
 	</ContentPageHeader>
 </template>
 <script setup lang="ts">
-import { DownloadIcon, HeartIcon, TagsIcon } from '@modrinth/assets'
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon, HeartIcon } from '@modrinth/assets'
 import { capitalizeString, formatNumber, type Project } from '@modrinth/utils'
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useVIntl } from '../../composables'
@@ -74,17 +85,30 @@ import ContentPageHeader from '../base/ContentPageHeader.vue'
 import FormattedTag from '../base/FormattedTag.vue'
 import TagItem from '../base/TagItem.vue'
 import ProjectStatusBadge from './ProjectStatusBadge.vue'
+import ServerDetails from './server/ServerDetails.vue'
 
 const router = useRouter()
 const { formatMessage } = useVIntl()
 
-withDefaults(
+const props = withDefaults(
 	defineProps<{
 		project: Project
 		member?: boolean
+		projectV3?: Labrinth.Projects.v3.Project | null
+		ping?: number
 	}>(),
 	{
 		member: false,
 	},
 )
+
+const searchUrl = computed(
+	() => `/discover/${isServerProject.value ? 'servers' : `${props.project.project_type}s`}`,
+)
+
+const isServerProject = computed(() => !!props.projectV3?.minecraft_server)
+const javaServer = computed(() => props.projectV3?.minecraft_java_server)
+const javaServerPingData = computed(() => props.projectV3?.minecraft_java_server?.ping?.data)
+const playersOnline = computed(() => javaServerPingData.value?.players_online ?? 0)
+const statusOnline = computed(() => !!javaServerPingData.value)
 </script>