MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge server project header into project header (#5500)

Browse Source
This commit is contained in:
Prospector
2026-03-09 12:19:55 -07:00
committed by GitHub
parent 97051cc64d
commit c9c8079853
6 changed files with 68 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
packages/ui/src/components/project/ProjectHeader.vue
View File

@@ -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>

67
packages/ui/src/components/project/ServerProjectHeader.vue
View File

@@ -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>

1
packages/ui/src/components/project/index.ts
View File

@@ -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'