Add server project follower count to details (#5502)

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(() =>