Merge server project header into project header (#5500)

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

@@ -52,14 +52,14 @@
 				>
 					<ProjectBackgroundGradient :project="data" />
 				</Teleport>
-				<ServerProjectHeader
-					v-if="isServerProject"
+				<ProjectHeader
+					v-else
 					:project="data"
 					:project-v3="projectV3"
 					:ping="serverPing"
 					@contextmenu.prevent.stop="handleRightClick"
 				>
-					<template #actions>
+					<template v-if="isServerProject" #actions>
 						<ButtonStyled v-if="serverPlaying" size="large" color="red">
 							<button @click="handleStopServer">
 								<StopCircleIcon />
@@ -111,9 +111,7 @@
 							</OverflowMenu>
 						</ButtonStyled>
 					</template>
-				</ServerProjectHeader>
-				<ProjectHeader v-else :project="data" @contextmenu.prevent.stop="handleRightClick">
-					<template #actions>
+					<template v-else #actions>
 						<ButtonStyled size="large" color="brand">
 							<button
 								v-tooltip="installed ? `This project is already installed` : null"
@@ -238,7 +236,6 @@ import {
 	ProjectSidebarLinks,
 	ProjectSidebarServerInfo,
 	ProjectSidebarTags,
-	ServerProjectHeader,
 } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'

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

@@ -433,14 +433,11 @@
 				}"
 			>
 				<div class="normal-page__header relative my-4">
-					<component
-						:is="isServerProject ? ServerProjectHeader : ProjectHeader"
+					<ProjectHeader
 						v-if="projectV3Loaded"
-						v-bind="
-							isServerProject
-								? { project, projectV3, member: !!currentMember }
-								: { project, member: !!currentMember }
-						"
+						:project="project"
+						:project-v3="projectV3"
+						:member="!!currentMember"
 					>
 						<template #actions>
 							<ButtonStyled
@@ -800,7 +797,7 @@
 								</OverflowMenu>
 							</ButtonStyled>
 						</template>
-					</component>
+					</ProjectHeader>
 					<ProjectMemberHeader
 						v-if="currentMember"
 						:project="project"
@@ -1071,7 +1068,6 @@ import {
 	ProjectSidebarTags,
 	provideProjectPageContext,
 	ScrollablePanel,
-	ServerProjectHeader,
 	ServersPromo,
 	StyledInput,
 	TagItem,

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'
@@ -378,8 +380,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/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>

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

@@ -1,67 +0,0 @@
-<template>
-	<ContentPageHeader disable-line-clamp>
-		<template #icon>
-			<Avatar :src="project.icon_url" :alt="project.title" size="108px" />
-		</template>
-		<template #title>
-			{{ project.title }}
-		</template>
-		<template #title-suffix>
-			<ProjectStatusBadge v-if="member || project.status !== 'approved'" :status="project.status" />
-		</template>
-		<template #summary>
-			{{ project.description }}
-		</template>
-		<template #stats>
-			<div class="flex items-center gap-3 gap-y-1 flex-wrap">
-				<ServerDetails
-					v-if="projectV3?.status !== 'draft'"
-					:online-players="playersOnline"
-					:status-online="statusOnline"
-					: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">
-						<TagItem
-							v-for="(category, index) in project.categories"
-							:key="index"
-							:action="() => router.push(`/discover/servers?sc=${category}`)"
-						>
-							<FormattedTag :tag="category" />
-						</TagItem>
-					</div>
-				</div>
-			</div>
-		</template>
-		<template #actions>
-			<slot name="actions" />
-		</template>
-	</ContentPageHeader>
-</template>
-<script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import type { Project } from '@modrinth/utils'
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-
-import Avatar from '../base/Avatar.vue'
-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 { project, projectV3, member } = defineProps<{
-	project: Project
-	projectV3: Labrinth.Projects.v3.Project | null
-	member?: boolean
-	ping?: number
-}>()
-
-const javaServer = computed(() => projectV3?.minecraft_java_server)
-const javaServerPingData = computed(() => projectV3?.minecraft_java_server?.ping?.data)
-const playersOnline = computed(() => javaServerPingData.value?.players_online ?? 0)
-const statusOnline = computed(() => !!javaServerPingData.value)
-</script>

packages/ui/src/components/project/index.ts

@@ -16,5 +16,4 @@ export { default as ProjectSidebarLinks } from './ProjectSidebarLinks.vue'
 export { default as ProjectSidebarServerInfo } from './ProjectSidebarServerInfo.vue'
 export { default as ProjectSidebarTags } from './ProjectSidebarTags.vue'
 export { default as ProjectStatusBadge } from './ProjectStatusBadge.vue'
-export { default as ServerProjectHeader } from './ServerProjectHeader.vue'
 export { default as TagsOverflow } from './TagsOverflow.vue'