Add server project follower count to details (#5502)

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

@@ -40,6 +40,7 @@
 				:has-versions="versions.length > 0"
 				:link-target="`_blank`"
 				:hide-license="isServerProject"
+				:show-followers="isServerProject"
 				class="project-sidebar-section"
 			/>
 		</Teleport>

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

@@ -898,6 +898,7 @@
 						:project="project"
 						:has-versions="versions.length > 0"
 						:link-target="$external()"
+						:show-followers="isServerProject"
 						class="card flex-card experimental-styles-within"
 					/>
 					<div class="card flex-card experimental-styles-within">
@@ -932,6 +933,18 @@
 								</div>
 							</div>
 
+							<div v-if="isServerProject" class="details-list__item">
+								<HeartIcon aria-hidden="true" />
+								<div>
+									{{
+										capitalizeString(
+											formatMessage(commonMessages.projectFollowers, {
+												count: formatNumber(project.followers, false),
+											}),
+										)
+									}}
+								</div>
+							</div>
 							<div
 								v-if="project.approved"
 								v-tooltip="$dayjs(project.approved).format('MMMM D, YYYY [at] h:mm A')"
@@ -940,9 +953,11 @@
 								<CalendarIcon aria-hidden="true" />
 								<div>
 									{{
-										formatMessage(detailsMessages.published, {
-											date: publishedDate,
-										})
+										capitalizeString(
+											formatMessage(detailsMessages.published, {
+												date: publishedDate,
+											}),
+										)
 									}}
 								</div>
 							</div>
@@ -954,7 +969,9 @@
 							>
 								<CalendarIcon aria-hidden="true" />
 								<div>
-									{{ formatMessage(detailsMessages.created, { date: createdDate }) }}
+									{{
+										capitalizeString(formatMessage(detailsMessages.created, { date: createdDate }))
+									}}
 								</div>
 							</div>
 
@@ -966,9 +983,11 @@
 								<ScaleIcon aria-hidden="true" />
 								<div>
 									{{
-										formatMessage(detailsMessages.submitted, {
-											date: submittedDate,
-										})
+										capitalizeString(
+											formatMessage(detailsMessages.submitted, {
+												date: submittedDate,
+											}),
+										)
 									}}
 								</div>
 							</div>
@@ -980,7 +999,9 @@
 							>
 								<VersionIcon aria-hidden="true" />
 								<div>
-									{{ formatMessage(detailsMessages.updated, { date: updatedDate }) }}
+									{{
+										capitalizeString(formatMessage(detailsMessages.updated, { date: updatedDate }))
+									}}
 								</div>
 							</div>
 						</div>
@@ -1076,7 +1097,13 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import VersionSummary from '@modrinth/ui/src/components/version/VersionSummary.vue'
-import { formatPrice, formatProjectType, renderString } from '@modrinth/utils'
+import {
+	capitalizeString,
+	formatNumber,
+	formatPrice,
+	formatProjectType,
+	renderString,
+} from '@modrinth/utils'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useLocalStorage } from '@vueuse/core'
 import dayjs from 'dayjs'

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

@@ -2,7 +2,7 @@
 	<div class="flex flex-col gap-3">
 		<h2 class="text-lg m-0">{{ formatMessage(commonMessages.detailsLabel) }}</h2>
 		<div class="flex flex-col gap-3 font-semibold [&>div]:flex [&>div]:gap-2 [&>div]:items-center">
-			<div v-if="!props.hideLicense">
+			<div v-if="!hideLicense">
 				<BookTextIcon aria-hidden="true" />
 				<div>
 					<IntlFormatted :message-id="messages.licensed">
@@ -30,6 +30,12 @@
 					</IntlFormatted>
 				</div>
 			</div>
+			<div v-if="showFollowers">
+				<HeartIcon aria-hidden="true" />
+				<div>
+					{{ formatMessage(commonMessages.projectFollowers, { count: project.followers }) }}
+				</div>
+			</div>
 			<div
 				v-if="project.approved"
 				v-tooltip="dayjs(project.approved).format('MMMM D, YYYY [at] h:mm A')"
@@ -79,7 +85,15 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { BookTextIcon, CalendarIcon, ExternalIcon, ScaleIcon, VersionIcon } from '@modrinth/assets'
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	BookTextIcon,
+	CalendarIcon,
+	ExternalIcon,
+	HeartIcon,
+	ScaleIcon,
+	VersionIcon,
+} from '@modrinth/assets'
 import { capitalizeString } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
@@ -93,21 +107,11 @@ const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 
 const props = defineProps<{
-	project: {
-		id: string
-		published: string
-		updated: string
-		approved: string
-		queued: string
-		status: string
-		license: {
-			id: string
-			url: string
-		}
-	}
+	project: Labrinth.Projects.v2.Project
 	linkTarget: string
 	hasVersions: boolean
 	hideLicense?: boolean
+	showFollowers?: boolean
 }>()
 
 const createdDate = computed(() =>