From b88341e3a84d78fc58010842cb952ac91b4ca92c Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Thu, 28 May 2026 18:44:17 -0700
Subject: [PATCH] fix: clean up user page, add verification on modrinth user,
 fix collection sidebar width

---
 apps/frontend/src/locales/en-US/index.json    |  6 ++
 apps/frontend/src/pages/user/[user].vue       | 55 +++++++++++++++++--
 .../ui/src/components/page/NormalPage.vue     |  4 +-
 3 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 34cb88792..c38aee976 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/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}}"
   },
diff --git a/apps/frontend/src/pages/user/[user].vue b/apps/frontend/src/pages/user/[user].vue
index 50aa7fd4e..db1632711 100644
--- a/apps/frontend/src/pages/user/[user].vue
+++ b/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;
diff --git a/packages/ui/src/components/page/NormalPage.vue b/packages/ui/src/components/page/NormalPage.vue
index ef3f89f84..d80498ef8 100644
--- a/packages/ui/src/components/page/NormalPage.vue
+++ b/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;
 	}
 }