fix: clean up user page, add verification on modrinth user, fix collection sidebar width

apps/frontend/src/locales/en-US/index.json

@@ -2450,6 +2450,12 @@
   "profile.meta.description-with-bio": {
     "message": "{bio} - Download {username}'s projects on Modrinth"
   },
+  "profile.official-account": {
+    "message": "Official Modrinth account"
+  },
+  "profile.official-account.bio": {
+    "message": "The official user account of Modrinth. Get support at {support-link} or via email at {email}"
+  },
   "profile.stats.projects-followers": {
     "message": "{count, plural, one {<stat>{count}</stat> project follower} other {<stat>{count}</stat> project followers}}"
   },

apps/frontend/src/pages/user/[user].vue

@@ -122,11 +122,22 @@
 			<div class="normal-page__header py-4">
 				<ContentPageHeader>
 					<template #icon>
-						<Avatar :src="user.avatar_url" :alt="user.username" size="96px" circle />
+						<Avatar
+							:src="user.avatar_url"
+							:alt="user.username"
+							:size="isModrinthUser ? '64px' : '96px'"
+							circle
+						/>
 					</template>
 					<template #title>
 						<span class="flex items-center gap-2">
 							{{ user.username }}
+							<BadgeCheckIcon
+								v-if="isModrinthUser"
+								v-tooltip="formatMessage(messages.officialAccount)"
+								class="size-5 text-brand"
+								fill="var(--color-brand-highlight)"
+							/>
 							<TagItem
 								v-if="isAdminViewing && isAffiliate"
 								:style="{
@@ -138,7 +149,31 @@
 							</TagItem>
 						</span>
 					</template>
-					<template #summary>
+					<template v-if="isModrinthUser" #summary>
+						<IntlFormatted :message-id="messages.officialAccountBio">
+							<template #support-link>
+								<a
+									href="https://support.modrinth.com"
+									class="text-link"
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									https://support.modrinth.com
+								</a>
+							</template>
+							<template #email>
+								<a
+									href="mailto:support@modrinth.com"
+									class="text-link"
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									support@modrinth.com
+								</a>
+							</template>
+						</IntlFormatted>
+					</template>
+					<template v-else #summary>
 						{{
 							user.bio
 								? user.bio
@@ -147,7 +182,7 @@
 									: formatMessage(messages.bioFallbackCreator)
 						}}
 					</template>
-					<template #stats>
+					<template v-if="!isModrinthUser" #stats>
 						<div
 							class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
 						>
@@ -352,6 +387,7 @@
 				<div
 					v-if="!route.params.projectType || route.params.projectType === 'collections'"
 					class="collections-grid"
+					:class="{ 'mt-3': projects?.length > 0 }"
 				>
 					<nuxt-link
 						v-for="collection in sortedCollections"
@@ -466,6 +502,7 @@
 <script setup>
 import {
 	AffiliateIcon,
+	BadgeCheckIcon,
 	BoxIcon,
 	CalendarIcon,
 	CheckIcon,
@@ -681,6 +718,15 @@ const messages = defineMessages({
 		id: 'profile.error.not-found',
 		defaultMessage: 'User not found',
 	},
+	officialAccount: {
+		id: 'profile.official-account',
+		defaultMessage: 'Official Modrinth account',
+	},
+	officialAccountBio: {
+		id: 'profile.official-account.bio',
+		defaultMessage:
+			'The official user account of Modrinth. Get support at {support-link} or via email at {email}',
+	},
 })
 
 const client = injectModrinthClient()
@@ -750,6 +796,8 @@ const sortedOrgs = computed(() =>
 	organizations.value ? [...organizations.value].sort((a, b) => a.name.localeCompare(b.name)) : [],
 )
 
+const isModrinthUser = computed(() => user.value?.id === '2REoufqX')
+
 const sortedCollections = computed(() => {
 	const list = collections.value
 	if (!list?.length) return []
@@ -951,7 +999,6 @@ export default defineNuxtComponent({
 	}
 
 	gap: var(--gap-md);
-	margin-top: var(--gap-md);
 
 	.collection-item {
 		display: flex;

packages/ui/src/components/page/NormalPage.vue

@@ -52,7 +52,7 @@ const { hierarchicalSidebarAvailable } = injectPageContext()
 			'header header'
 			'sidebar content'
 			'sidebar dummy'
-			/ 20rem 1fr;
+			/ 300px 1fr;
 	}
 
 	.ui-normal-page--sidebar-right {
@@ -60,7 +60,7 @@ const { hierarchicalSidebarAvailable } = injectPageContext()
 			'header header'
 			'content sidebar'
 			'dummy sidebar'
-			/ 1fr 20rem;
+			/ 1fr 300px;
 	}
 }