From 7e0e5be14b6add5919f6e951ba41b1454ceb0c07 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 27 Oct 2026 19:20:49 -0600
Subject: [PATCH 1/4] feat: add more status badges and add user status badges
 in user page, tech rev cards and report cards

---
 .../src/components/CreatorStatusStats.vue     |  28 +++++
 .../src/components/ProjectStatusStats.vue     | 115 ++++++++++++++----
 .../stories/ProjectStatusStats.stories.ts     |  76 ++++++++++++
 .../ui/moderation/ModerationItemHeader.vue    |  22 +++-
 .../ui/moderation/ModerationReportCard.vue    |  10 ++
 .../settings/ModerationSettings.vue           |  22 +++-
 .../src/composables/creator-project-stats.ts  |  53 +++++++-
 apps/frontend/src/pages/[type]/[project].vue  |  11 +-
 apps/frontend/src/pages/settings.vue          |  16 ++-
 .../src/pages/settings/moderation/index.vue   |   9 +-
 .../pages/settings/moderation/keybinds.vue    |  15 +++
 apps/frontend/src/pages/user/[user].vue       |  13 ++
 packages/assets/generated-icons.ts            |   4 +
 packages/assets/icons/user-lock.svg           |  18 +++
 packages/assets/icons/user-round-x.svg        |  18 +++
 packages/moderation/src/data/settings.ts      |   8 ++
 .../ui/src/components/user/UserPageHeader.vue |   3 +-
 .../layouts/shared/user-profile/layout.vue    |   3 +
 18 files changed, 401 insertions(+), 43 deletions(-)
 create mode 100644 apps/frontend/src/components/CreatorStatusStats.vue
 create mode 100644 apps/frontend/src/components/stories/ProjectStatusStats.stories.ts
 create mode 100644 apps/frontend/src/pages/settings/moderation/keybinds.vue
 create mode 100644 packages/assets/icons/user-lock.svg
 create mode 100644 packages/assets/icons/user-round-x.svg

diff --git a/apps/frontend/src/components/CreatorStatusStats.vue b/apps/frontend/src/components/CreatorStatusStats.vue
new file mode 100644
index 00000000000..31b949948a4
--- /dev/null
+++ b/apps/frontend/src/components/CreatorStatusStats.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { isStaff } from '@modrinth/utils'
+import { computed } from 'vue'
+
+import { useAuthState } from '~/composables/auth'
+import { useCreatorProjectStats } from '~/composables/creator-project-stats'
+
+import ProjectStatusStats from './ProjectStatusStats.vue'
+
+const props = defineProps<{
+	id: string
+	kind: 'user' | 'organization'
+}>()
+const auth = useAuthState()
+const enabled = computed(() => isStaff(auth.value.user) && !!props.id)
+const { memberStats, organizationStats } = useCreatorProjectStats(
+	computed(() => (props.kind === 'user' ? [props.id] : [])),
+	computed(() => (props.kind === 'organization' ? props.id : '')),
+	enabled,
+)
+const stats = computed(() =>
+	props.kind === 'user' ? (memberStats.value[props.id] ?? []) : organizationStats.value,
+)
+</script>
+
+<template>
+	<ProjectStatusStats v-if="enabled && stats.some((stat) => stat.count > 0)" :stats="stats" />
+</template>
diff --git a/apps/frontend/src/components/ProjectStatusStats.vue b/apps/frontend/src/components/ProjectStatusStats.vue
index a60e7b96c0e..2ec83a959e6 100644
--- a/apps/frontend/src/components/ProjectStatusStats.vue
+++ b/apps/frontend/src/components/ProjectStatusStats.vue
@@ -3,24 +3,42 @@
 		<Tooltip
 			v-for="stat in statusStats"
 			:key="stat.status"
-			:text="formatMessage(stat.message, { count: stat.count })"
-			:aria-label="formatMessage(stat.message, { count: stat.count })"
+			:text="stat.tooltip"
+			:aria-label="stat.tooltip"
+			:panel-class="
+				stat.status === 'account_locked'
+					? 'max-w-[300px] whitespace-pre-line break-words text-left'
+					: undefined
+			"
+			tabindex="0"
 			class="flex items-center gap-0.5 font-medium tabular-nums"
 			:class="stat.color"
 		>
 			<component :is="stat.icon" class="size-[12px] shrink-0" aria-hidden="true" />
-			<span aria-hidden="true">{{ stat.count }}</span>
+			<span v-if="!stat.account" aria-hidden="true">{{ stat.count }}</span>
+			<template v-if="stat.items.length" #popper>
+				<div v-if="stat.status === 'account_locked'" class="flex flex-col gap-1.5 text-left">
+					<div>Account locked</div>
+					<div>Reason: {{ stat.items.join('; ') }}</div>
+				</div>
+				<div v-else class="text-left">
+					<div>Account restricted</div>
+					<ul class="m-0 mt-1 list-disc pl-4">
+						<li v-for="(item, index) in stat.items" :key="index">{{ item }}</li>
+					</ul>
+				</div>
+			</template>
 		</Tooltip>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { CheckIcon, ShieldAlertIcon } from '@modrinth/assets'
+import { BanIcon, CheckIcon, ShieldAlertIcon, UserLockIcon, UserRoundXIcon } from '@modrinth/assets'
 import { defineMessages, PROJECT_STATUS_ICONS, Tooltip, useVIntl } from '@modrinth/ui'
 import { computed } from 'vue'
 
 const props = defineProps<{
-	stats: { status: string; count: number }[]
+	stats: { status: string; count: number; details?: string | string[] }[]
 }>()
 const { formatMessage } = useVIntl()
 const messages = defineMessages({
@@ -69,6 +87,11 @@ const messages = defineMessages({
 		defaultMessage: '{count} unknown',
 	},
 })
+const accountStatuses = {
+	shared_instances_banned: { label: 'Banned from shared instances', icon: BanIcon },
+	account_locked: { label: 'Account locked', icon: UserLockIcon },
+	account_restricted: { label: 'Account restricted', icon: UserRoundXIcon },
+}
 const statusMessages = {
 	tech_review_failed: messages.techReviewFailedCount,
 	approved: messages.approvedCount,
@@ -95,23 +118,71 @@ const statusColors = {
 	unknown: 'text-orange',
 	tech_review_failed: 'text-red',
 }
+const statusOrder = [
+	'tech_review_failed',
+	'shared_instances_banned',
+	'account_restricted',
+	'account_locked',
+	'approved',
+	'unlisted',
+	'private',
+	'withheld',
+	'rejected',
+	'draft',
+	'processing',
+	'archived',
+	'scheduled',
+	'unknown',
+]
 const statusStats = computed(() =>
-	Object.entries(statusMessages)
-		.map(([key, message]) => {
-			const status = key as keyof typeof statusMessages
-			return {
-				status,
-				message,
-				count: props.stats.find((stat) => stat.status === status)?.count ?? 0,
-				icon:
-					status === 'tech_review_failed'
-						? ShieldAlertIcon
-						: status === 'approved'
-							? CheckIcon
-							: PROJECT_STATUS_ICONS[status],
-				color: statusColors[status],
-			}
-		})
-		.filter((stat) => stat.count > 0),
+	[
+		...Object.entries(statusMessages)
+			.map(([key, message]) => {
+				const status = key as keyof typeof statusMessages
+				const count = props.stats.find((stat) => stat.status === status)?.count ?? 0
+				return {
+					status,
+					tooltip: formatMessage(message, { count }),
+					account: false,
+					items: [] as string[],
+					count,
+					icon:
+						status === 'tech_review_failed'
+							? ShieldAlertIcon
+							: status === 'approved'
+								? CheckIcon
+								: PROJECT_STATUS_ICONS[status],
+					color: statusColors[status],
+				}
+			})
+			.filter((stat) => stat.count > 0),
+		...Object.entries(accountStatuses).flatMap(([status, { label, icon }]) => {
+			const stat = props.stats.find((stat) => stat.status === status && stat.count > 0)
+			const items =
+				(status === 'account_restricted' || status === 'account_locked') && stat?.details
+					? Array.isArray(stat.details)
+						? stat.details
+						: [stat.details]
+					: []
+			const details = Array.isArray(stat?.details) ? stat.details.join('; ') : stat?.details
+			return stat
+				? [
+						{
+							status,
+							count: stat.count,
+							icon,
+							color: 'text-red',
+							account: true,
+							items,
+							tooltip: details
+								? status === 'account_locked'
+									? `${label}\nReason: ${details}`
+									: `${label}: ${details}`
+								: label,
+						},
+					]
+				: []
+		}),
+	].toSorted((a, b) => statusOrder.indexOf(a.status) - statusOrder.indexOf(b.status)),
 )
 </script>
diff --git a/apps/frontend/src/components/stories/ProjectStatusStats.stories.ts b/apps/frontend/src/components/stories/ProjectStatusStats.stories.ts
new file mode 100644
index 00000000000..e9b28b849b1
--- /dev/null
+++ b/apps/frontend/src/components/stories/ProjectStatusStats.stories.ts
@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ProjectStatusStats from '../ProjectStatusStats.vue'
+
+const projectStats = [
+	{ status: 'tech_review_failed', count: 2 },
+	{ status: 'approved', count: 24 },
+	{ status: 'unlisted', count: 3 },
+	{ status: 'private', count: 4 },
+	{ status: 'withheld', count: 2 },
+	{ status: 'rejected', count: 5 },
+	{ status: 'draft', count: 6 },
+	{ status: 'processing', count: 1 },
+	{ status: 'archived', count: 7 },
+	{ status: 'scheduled', count: 1 },
+	{ status: 'unknown', count: 1 },
+]
+const accountStats = [
+	{ status: 'shared_instances_banned', count: 1 },
+	{
+		status: 'account_restricted',
+		count: 1,
+		details: ['Create new projects', 'Upload new versions', 'Repeated policy violations'],
+	},
+	{
+		status: 'account_locked',
+		count: 1,
+		details: 'Account compromised; contact support to restore access.',
+	},
+]
+
+const meta = {
+	title: 'Website/Moderation/ProjectStatusStats',
+	component: ProjectStatusStats,
+	args: {
+		stats: [
+			{ status: 'approved', count: 12 },
+			{ status: 'rejected', count: 2 },
+		],
+	},
+	parameters: { layout: 'centered' },
+} satisfies Meta<typeof ProjectStatusStats>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const AllBadges: StoryObj = {
+	render: () => ({
+		components: { ProjectStatusStats },
+		setup: () => ({ projectStats, accountStats }),
+		template: /* html */ `
+			<div class="flex max-w-sm flex-col gap-4 p-4">
+				<div>
+					<p class="m-0 font-semibold text-contrast">Project statuses</p>
+					<ProjectStatusStats :stats="projectStats" />
+				</div>
+				<div>
+					<p class="m-0 font-semibold text-contrast">Account restrictions</p>
+					<ProjectStatusStats :stats="accountStats" />
+				</div>
+				<div>
+					<p class="m-0 font-semibold text-contrast">Combined</p>
+					<ProjectStatusStats :stats="[...projectStats, ...accountStats]" />
+				</div>
+				<p class="m-0 text-sm text-secondary">Hover or focus a badge to see its label and restriction details.</p>
+			</div>
+		`,
+	}),
+}
+
+export const Empty: Story = { args: { stats: [] } }
+export const ZeroCounts: Story = {
+	args: { stats: [...projectStats, ...accountStats].map((stat) => ({ ...stat, count: 0 })) },
+}
diff --git a/apps/frontend/src/components/ui/moderation/ModerationItemHeader.vue b/apps/frontend/src/components/ui/moderation/ModerationItemHeader.vue
index 5666f690fbc..49f70e957ed 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationItemHeader.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationItemHeader.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import { Avatar } from '@modrinth/ui'
+import { Avatar, CopyCode } from '@modrinth/ui'
+import { computed } from 'vue'
+
+import CreatorStatusStats from '~/components/CreatorStatusStats.vue'
 
 import ModerationOwnerLink, { type ModerationOwner } from './ModerationOwnerLink.vue'
 export type { ModerationOwner }
 
-defineProps<{
+const props = defineProps<{
 	avatarUrl?: string | null
 	title: string
 	titleTo?: string | null
 	owner?: ModerationOwner | null
+	statsOwner?: ModerationOwner | null
 	circle?: boolean
 	padTransparentCorners?: boolean
 }>()
+const statsSubject = computed(() => props.statsOwner ?? props.owner)
 </script>
 
 <template>
@@ -50,7 +55,18 @@ defineProps<{
 				<slot name="badges" />
 			</div>
 
-			<ModerationOwnerLink v-if="owner" :owner="owner" />
+			<div v-if="owner || statsSubject" class="flex flex-wrap items-center gap-2">
+				<ModerationOwnerLink v-if="owner" :owner="owner" />
+				<ClientOnly v-else-if="statsSubject">
+					<CopyCode v-tooltip="'Copy user ID'" :text="statsSubject.id" />
+				</ClientOnly>
+				<CreatorStatusStats
+					v-if="statsSubject"
+					:id="statsSubject.id"
+					:kind="statsSubject.kind"
+					class="!mt-0"
+				/>
+			</div>
 			<slot name="subtitle" />
 		</div>
 	</div>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index 17dc27ca215..f45b42bbcaf 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -54,6 +54,15 @@
 				:title="reportItemTitle"
 				:title-to="reportItemTitleTo"
 				:owner="itemOwner"
+				:stats-owner="
+					report.item_type === 'user' && report.user
+						? {
+								kind: 'user',
+								id: report.user.id,
+								name: report.user.username,
+							}
+						: null
+				"
 				:circle="report.item_type === 'user'"
 				:pad-transparent-corners="report.item_type === 'shared-instance'"
 			>
@@ -888,6 +897,7 @@ async function banSharedInstanceOwner(owner: SharedInstanceReportUser) {
 		await client.sharedinstances.moderation_v1.blacklistUsers({
 			user_ids: [owner.id],
 		})
+		await queryClient.invalidateQueries({ queryKey: ['shared-instance-blacklist', 'v1', owner.id] })
 
 		if (sharedInstanceDetails.value) {
 			sharedInstanceDetails.value = {
diff --git a/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue b/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
index 1e2d6f31fe1..145401e4052 100644
--- a/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
+++ b/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
@@ -14,8 +14,9 @@ import { computed, ref, useId } from 'vue'
 
 import { useModerationSettings } from '~/composables/moderation'
 
-defineProps<{
+const props = defineProps<{
 	embedded?: boolean
+	section?: 'public-pages' | 'general'
 }>()
 
 const localhostHostname = 'localhost:3000'
@@ -113,6 +114,7 @@ const groups = [
 		id: 'project-pages',
 		title: messages.projectPages,
 		settings: [
+			general.ShowCreatorStatsOnPublicPages,
 			general.EnableProjectKeybinds,
 			general.SlicerButtonInVersions,
 			general.AlternativeHostname,
@@ -128,6 +130,11 @@ const groups = [
 const filteredGroups = computed(() => {
 	const query = search.value.trim().toLocaleLowerCase()
 	return groups
+		.filter((group) => {
+			if (props.section === 'public-pages') return group.id === 'project-pages'
+			if (props.section === 'general') return group.id !== 'project-pages'
+			return true
+		})
 		.map((group) => ({
 			...group,
 			settings: group.settings.filter((setting) =>
@@ -154,9 +161,10 @@ const configuredSettings = useModerationSettings()
 <template>
 	<div :class="{ 'universal-card': !embedded }">
 		<h2 class="m-0 mb-2.5 text-2xl">
-			{{ formatMessage(messages.title) }}
+			{{ formatMessage(section === 'public-pages' ? messages.projectPages : messages.title) }}
 		</h2>
 		<Input
+			v-if="section !== 'public-pages'"
 			v-model="search"
 			type="search"
 			:icon="SearchIcon"
@@ -170,10 +178,14 @@ const configuredSettings = useModerationSettings()
 		<section
 			v-for="group in filteredGroups"
 			:key="group.id"
-			:aria-labelledby="`${settingsId}-${group.id}`"
-			class="mt-8"
+			:aria-labelledby="section === 'public-pages' ? undefined : `${settingsId}-${group.id}`"
+			:class="section === 'public-pages' ? 'mt-6' : 'mt-8'"
 		>
-			<h3 :id="`${settingsId}-${group.id}`" class="mb-6 text-xl font-semibold">
+			<h3
+				v-if="section !== 'public-pages'"
+				:id="`${settingsId}-${group.id}`"
+				class="mb-6 text-xl font-semibold"
+			>
 				{{ formatMessage(group.title) }}
 			</h3>
 			<div class="flex flex-col gap-6">
diff --git a/apps/frontend/src/composables/creator-project-stats.ts b/apps/frontend/src/composables/creator-project-stats.ts
index c6e3f2b93de..2a62ced3a74 100644
--- a/apps/frontend/src/composables/creator-project-stats.ts
+++ b/apps/frontend/src/composables/creator-project-stats.ts
@@ -1,9 +1,19 @@
 import type { AbstractModrinthClient } from '@modrinth/api-client'
-import { injectModrinthClient } from '@modrinth/ui'
+import { getRemovedScopes, injectModrinthClient, useVIntl } from '@modrinth/ui'
 import { useQueries, useQuery } from '@tanstack/vue-query'
 import { computed, type Ref } from 'vue'
 
 export const creatorProjectStatsQueryOptions = {
+	memberAccount: (id: string, client: AbstractModrinthClient) => ({
+		queryKey: ['user', id, 'moderation-account'] as const,
+		queryFn: () => client.labrinth.users_v3.get(id),
+		staleTime: 60_000,
+	}),
+	memberBlacklist: (id: string, client: AbstractModrinthClient) => ({
+		queryKey: ['shared-instance-blacklist', 'v1', id] as const,
+		queryFn: () => client.sharedinstances.users_v1.getBlacklistStatus(id),
+		staleTime: 60_000,
+	}),
 	organizationProjects: (id: string, client: AbstractModrinthClient) => ({
 		queryKey: ['organization', id, 'projects'] as const,
 		queryFn: () => client.labrinth.organizations_v3.getProjects(id),
@@ -32,6 +42,7 @@ export function useCreatorProjectStats(
 	enabled: Ref<boolean> = computed(() => true),
 ) {
 	const client = injectModrinthClient()
+	const { formatMessage } = useVIntl()
 	const memberIds = computed(() => (enabled.value ? [...new Set(userIds.value)].toSorted() : []))
 	const organizationProjects = useQuery(
 		computed(() => ({
@@ -68,10 +79,28 @@ export function useCreatorProjectStats(
 			})),
 		),
 	})
+	const memberAccounts = useQueries({
+		queries: computed(() =>
+			memberIds.value.map((id) => ({
+				...creatorProjectStatsQueryOptions.memberAccount(id, client),
+				enabled: enabled.value,
+			})),
+		),
+	})
+	const memberBlacklists = useQueries({
+		queries: computed(() =>
+			memberIds.value.map((id) => ({
+				...creatorProjectStatsQueryOptions.memberBlacklist(id, client),
+				enabled: enabled.value,
+			})),
+		),
+	})
 	const memberStats = computed(() =>
 		Object.fromEntries(
 			memberIds.value.map((userId, index) => {
 				const projects = memberProjects.value[index]?.data
+				const account = memberAccounts.value[index]?.data
+				const restriction = account?.restriction
 				return [
 					userId,
 					[
@@ -85,6 +114,28 @@ export function useCreatorProjectStats(
 							status: 'tech_review_failed',
 							count: memberFlaggedProjects.data.value?.[userId]?.length ?? 0,
 						},
+						{
+							status: 'shared_instances_banned',
+							count: memberBlacklists.value[index]?.data?.blacklisted ? 1 : 0,
+						},
+						{
+							status: 'account_locked',
+							count: account?.lock ? 1 : 0,
+							details: account?.lock?.reason,
+						},
+						{
+							status: 'account_restricted',
+							count: restriction?.removed_perms ? 1 : 0,
+							details: restriction
+								? [
+										...getRemovedScopes(restriction.removed_perms).map((scope) =>
+											formatMessage(scope.label),
+										),
+										restriction.reason,
+										restriction.private_reason,
+									].filter((detail): detail is string => !!detail)
+								: undefined,
+						},
 					],
 				]
 			}),
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 0a4e7e42a8d..c31839a4ed5 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -511,7 +511,7 @@
 						:user-link="(username) => `/user/${username}`"
 						class="card flex-card"
 					>
-						<template v-if="isStaff(auth.user)" #organization-details>
+						<template v-if="showCreatorStats" #organization-details>
 							<ProjectStatusStats
 								v-if="
 									!creatorStats.organizationLoading.value && !creatorStats.organizationError.value
@@ -519,7 +519,7 @@
 								:stats="creatorStats.organizationStats.value"
 							/>
 						</template>
-						<template v-if="isStaff(auth.user)" #member-details="{ member }">
+						<template v-if="showCreatorStats" #member-details="{ member }">
 							<ProjectStatusStats
 								v-if="!creatorStats.membersLoading.value && !creatorStats.membersError.value"
 								:stats="creatorStats.memberStats.value[member.user.id] ?? []"
@@ -1703,10 +1703,15 @@ const members = computed(() => {
 	return owner ? [owner, ...rest] : rest
 })
 
+const showCreatorStats = computed(
+	() =>
+		isStaff(auth.value.user) &&
+		modSettings.value.get(moderationSettings.General.ShowCreatorStatsOnPublicPages),
+)
 const creatorStats = useCreatorProjectStats(
 	computed(() => members.value.map((member) => member.user.id)),
 	computed(() => organization.value?.id ?? ''),
-	computed(() => isStaff(auth.value.user)),
+	showCreatorStats,
 )
 
 const isMember = computed(
diff --git a/apps/frontend/src/pages/settings.vue b/apps/frontend/src/pages/settings.vue
index ef69d5f312b..7ef90d5b87f 100644
--- a/apps/frontend/src/pages/settings.vue
+++ b/apps/frontend/src/pages/settings.vue
@@ -86,12 +86,19 @@
 										icon: ServerIcon,
 									}
 								: null,
-							isStaff(auth.user) ? { type: 'heading', label: 'Staff' } : null,
+							isStaff(auth.user) ? { type: 'heading', label: 'Moderation' } : null,
 							isStaff(auth.user)
 								? {
 										link: '/settings/moderation',
-										label: 'Moderation',
-										icon: ScaleIcon,
+										label: 'Settings',
+										icon: SettingsIcon,
+									}
+								: null,
+							isStaff(auth.user)
+								? {
+										link: '/settings/moderation/keybinds',
+										label: 'Keybinds',
+										icon: KeyboardIcon,
 									}
 								: null,
 						].filter(Boolean)
@@ -107,11 +114,12 @@ import {
 	CardIcon,
 	GridIcon,
 	HeartHandshakeIcon,
+	KeyboardIcon,
 	KeyIcon,
 	LanguagesIcon,
 	MonitorSmartphoneIcon,
 	PaintbrushIcon,
-	ScaleIcon,
+	SettingsIcon,
 	ServerIcon,
 	ShieldIcon,
 	ToggleRightIcon,
diff --git a/apps/frontend/src/pages/settings/moderation/index.vue b/apps/frontend/src/pages/settings/moderation/index.vue
index 9570a7c1513..0453a89c53d 100644
--- a/apps/frontend/src/pages/settings/moderation/index.vue
+++ b/apps/frontend/src/pages/settings/moderation/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import ModerationAppearance from '~/components/ui/moderation/settings/ModerationAppearance.vue'
-import ModerationKeybinds from '~/components/ui/moderation/settings/ModerationKeybinds.vue'
 import ModerationSettings from '~/components/ui/moderation/settings/ModerationSettings.vue'
 
 definePageMeta({
@@ -13,7 +12,9 @@ useSeoMeta({
 </script>
 
 <template>
-	<ModerationKeybinds />
-	<ModerationSettings />
-	<ModerationAppearance />
+	<div class="flex flex-col gap-4">
+		<ModerationSettings section="public-pages" />
+		<ModerationSettings section="general" />
+		<ModerationAppearance />
+	</div>
 </template>
diff --git a/apps/frontend/src/pages/settings/moderation/keybinds.vue b/apps/frontend/src/pages/settings/moderation/keybinds.vue
new file mode 100644
index 00000000000..a0c650a4bf9
--- /dev/null
+++ b/apps/frontend/src/pages/settings/moderation/keybinds.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import ModerationKeybinds from '~/components/ui/moderation/settings/ModerationKeybinds.vue'
+
+definePageMeta({
+	middleware: ['auth', 'staff'],
+})
+
+useSeoMeta({
+	robots: 'noindex',
+})
+</script>
+
+<template>
+	<ModerationKeybinds />
+</template>
diff --git a/apps/frontend/src/pages/user/[user].vue b/apps/frontend/src/pages/user/[user].vue
index 0dc0df06d69..04e7e38e5df 100644
--- a/apps/frontend/src/pages/user/[user].vue
+++ b/apps/frontend/src/pages/user/[user].vue
@@ -10,6 +10,9 @@
 		:on-create-project="openProjectCreateModal"
 		:on-create-collection="openCollectionCreateModal"
 	>
+		<template v-if="showCreatorStats" #header-details="{ user }">
+			<CreatorStatusStats :id="user.id" kind="user" class="!mt-0" />
+		</template>
 		<template #sidebar>
 			<AdPlaceholder v-if="!auth.user" />
 		</template>
@@ -18,12 +21,16 @@
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
+import { moderationSettings } from '@modrinth/moderation'
 import { injectModrinthClient, provideUserProfile, UserProfilePageLayout } from '@modrinth/ui'
+import { isStaff } from '@modrinth/utils'
 import { useQueryClient } from '@tanstack/vue-query'
 
+import CreatorStatusStats from '~/components/CreatorStatusStats.vue'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
+import { useModerationSettings } from '~/composables/moderation'
 import { warmProjectCheckCaches } from '~/composables/queries/project'
 
 const route = useNativeRoute()
@@ -43,6 +50,12 @@ const userProfile = provideUserProfile({
 	unblockUser: (userId) => client.labrinth.blocked_users_v3.unblock(userId),
 })
 const auth = await useAuth()
+const modSettings = useModerationSettings()
+const showCreatorStats = computed(
+	() =>
+		isStaff(auth.value.user) &&
+		modSettings.value.get(moderationSettings.General.ShowCreatorStatsOnPublicPages),
+)
 const cosmetics = useCosmetics()
 const config = useRuntimeConfig()
 
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index ccba8797b8b..30192a820b3 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -473,8 +473,10 @@ import _UploadIcon from './icons/upload.svg?component'
 import _UserIcon from './icons/user.svg?component'
 import _UserCogIcon from './icons/user-cog.svg?component'
 import _UserKeyIcon from './icons/user-key.svg?component'
+import _UserLockIcon from './icons/user-lock.svg?component'
 import _UserPlusIcon from './icons/user-plus.svg?component'
 import _UserRoundIcon from './icons/user-round.svg?component'
+import _UserRoundXIcon from './icons/user-round-x.svg?component'
 import _UserSearchIcon from './icons/user-search.svg?component'
 import _UserXIcon from './icons/user-x.svg?component'
 import _UsersIcon from './icons/users.svg?component'
@@ -960,8 +962,10 @@ export const UploadIcon = _UploadIcon
 export const UserIcon = _UserIcon
 export const UserCogIcon = _UserCogIcon
 export const UserKeyIcon = _UserKeyIcon
+export const UserLockIcon = _UserLockIcon
 export const UserPlusIcon = _UserPlusIcon
 export const UserRoundIcon = _UserRoundIcon
+export const UserRoundXIcon = _UserRoundXIcon
 export const UserSearchIcon = _UserSearchIcon
 export const UserXIcon = _UserXIcon
 export const UsersIcon = _UsersIcon
diff --git a/packages/assets/icons/user-lock.svg b/packages/assets/icons/user-lock.svg
new file mode 100644
index 00000000000..3b70adc8da0
--- /dev/null
+++ b/packages/assets/icons/user-lock.svg
@@ -0,0 +1,18 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-user-lock"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="10" cy="7" r="4" />
+  <path d="M10.3 15H7a4 4 0 0 0-4 4v2" />
+  <path d="M15 15.5V14a2 2 0 0 1 4 0v1.5" />
+  <rect width="8" height="5" x="13" y="16" rx=".899" />
+</svg>
diff --git a/packages/assets/icons/user-round-x.svg b/packages/assets/icons/user-round-x.svg
new file mode 100644
index 00000000000..c9ab4d9d2e2
--- /dev/null
+++ b/packages/assets/icons/user-round-x.svg
@@ -0,0 +1,18 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-user-round-x"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2 21a8 8 0 0 1 11.873-7" />
+  <circle cx="10" cy="8" r="5" />
+  <path d="m17 17 5 5" />
+  <path d="m22 17-5 5" />
+</svg>
diff --git a/packages/moderation/src/data/settings.ts b/packages/moderation/src/data/settings.ts
index 4dc3b250063..96cfe7f13dd 100644
--- a/packages/moderation/src/data/settings.ts
+++ b/packages/moderation/src/data/settings.ts
@@ -2,6 +2,14 @@ import { setting } from '../types/settings.ts'
 
 const settings = {
 	General: {
+		ShowCreatorStatsOnPublicPages: setting.asToggle({
+			type: 'toggle',
+			id: 'show-creator-stats-on-public-pages',
+			title: 'Show creator moderation stats on public pages',
+			description:
+				'Show project status counts and account restrictions on project and profile pages for staff.',
+			default: true,
+		}),
 		GalleryColumns: setting.asEnum({
 			type: 'enum',
 			id: 'gallery-columns',
diff --git a/packages/ui/src/components/user/UserPageHeader.vue b/packages/ui/src/components/user/UserPageHeader.vue
index 05eabb89b2e..455550611b5 100644
--- a/packages/ui/src/components/user/UserPageHeader.vue
+++ b/packages/ui/src/components/user/UserPageHeader.vue
@@ -11,7 +11,8 @@
 			/>
 		</template>
 
-		<template v-if="isOfficialAccount || user.lock || showRestrictedBadge" #badges>
+		<template v-if="$slots.badges || isOfficialAccount || user.lock || showRestrictedBadge" #badges>
+			<slot name="badges" />
 			<PageHeaderBadgeItem
 				v-if="isOfficialAccount"
 				:icon="BadgeCheckIcon"
diff --git a/packages/ui/src/layouts/shared/user-profile/layout.vue b/packages/ui/src/layouts/shared/user-profile/layout.vue
index fca63c94aa6..ef1e8815a24 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/packages/ui/src/layouts/shared/user-profile/layout.vue
@@ -260,6 +260,9 @@
 					@force-password-reset="forcePasswordResetModal?.show()"
 					@reset2fa="reset2faModal?.show()"
 				>
+					<template v-if="$slots['header-details']" #badges>
+						<slot name="header-details" :user="user" />
+					</template>
 					<template v-if="isModrinthUser" #summary>
 						<IntlFormatted :message-id="messages.officialAccountBio">
 							<template #support-link>

From 4282905b1f4d9b09160abdb4e89f99c38d163f1a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 27 Oct 2026 19:21:43 -0600
Subject: [PATCH 2/4] small change

---
 apps/frontend/src/pages/user/[user].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/pages/user/[user].vue b/apps/frontend/src/pages/user/[user].vue
index 04e7e38e5df..9bba8a6ee04 100644
--- a/apps/frontend/src/pages/user/[user].vue
+++ b/apps/frontend/src/pages/user/[user].vue
@@ -11,7 +11,7 @@
 		:on-create-collection="openCollectionCreateModal"
 	>
 		<template v-if="showCreatorStats" #header-details="{ user }">
-			<CreatorStatusStats :id="user.id" kind="user" class="!mt-0" />
+			<CreatorStatusStats :id="user.id" kind="user" class="!mt-0 !text-base" />
 		</template>
 		<template #sidebar>
 			<AdPlaceholder v-if="!auth.user" />

From 5e3148ecf264ee3800723fdd52bedcd15039ab78 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 27 Oct 2026 19:25:09 -0600
Subject: [PATCH 3/4] small fix

---
 .../user-profile/components/lock-user-modal.vue      |  6 +++++-
 .../user-profile/components/restrict-user-modal.vue  | 12 ++++++++++--
 .../ui/src/layouts/shared/user-profile/layout.vue    |  6 +++++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/layouts/shared/user-profile/components/lock-user-modal.vue b/packages/ui/src/layouts/shared/user-profile/components/lock-user-modal.vue
index 0da791f811a..dde82921158 100644
--- a/packages/ui/src/layouts/shared/user-profile/components/lock-user-modal.vue
+++ b/packages/ui/src/layouts/shared/user-profile/components/lock-user-modal.vue
@@ -88,7 +88,11 @@ async function lock(): Promise<void> {
 	isLocking.value = true
 	try {
 		await client.labrinth.moderation_internal.lockUser(props.user.id, reason.value.trim())
-		await queryClient.invalidateQueries({ queryKey: ['user', props.userId] })
+		await Promise.all(
+			[...new Set([props.userId, props.user.id])].map((id) =>
+				queryClient.invalidateQueries({ queryKey: ['user', id] }),
+			),
+		)
 		hide()
 		notificationManager.addNotification({
 			type: 'success',
diff --git a/packages/ui/src/layouts/shared/user-profile/components/restrict-user-modal.vue b/packages/ui/src/layouts/shared/user-profile/components/restrict-user-modal.vue
index 3f06e822a4b..cf1374c17a9 100644
--- a/packages/ui/src/layouts/shared/user-profile/components/restrict-user-modal.vue
+++ b/packages/ui/src/layouts/shared/user-profile/components/restrict-user-modal.vue
@@ -249,7 +249,11 @@ async function save(): Promise<void> {
 			reason: reason.value.trim() || null,
 			private_reason: privateReason.value.trim() || null,
 		})
-		await queryClient.invalidateQueries({ queryKey: ['user', props.userId] })
+		await Promise.all(
+			[...new Set([props.userId, props.user.id])].map((id) =>
+				queryClient.invalidateQueries({ queryKey: ['user', id] }),
+			),
+		)
 		hide()
 		notificationManager.addNotification({
 			type: 'success',
@@ -273,7 +277,11 @@ async function clear(): Promise<void> {
 	isSaving.value = true
 	try {
 		await client.labrinth.moderation_internal.clearUserRestrictions(props.user.id)
-		await queryClient.invalidateQueries({ queryKey: ['user', props.userId] })
+		await Promise.all(
+			[...new Set([props.userId, props.user.id])].map((id) =>
+				queryClient.invalidateQueries({ queryKey: ['user', id] }),
+			),
+		)
 		hide()
 		notificationManager.addNotification({
 			type: 'success',
diff --git a/packages/ui/src/layouts/shared/user-profile/layout.vue b/packages/ui/src/layouts/shared/user-profile/layout.vue
index ef1e8815a24..994bef21a5a 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/packages/ui/src/layouts/shared/user-profile/layout.vue
@@ -1189,7 +1189,11 @@ async function toggleLock(): Promise<void> {
 	const lockedUser = user.value
 	try {
 		await client.labrinth.moderation_internal.unlockUser(lockedUser.id)
-		await queryClient.invalidateQueries({ queryKey: ['user', props.userId] })
+		await Promise.all(
+			[...new Set([props.userId, lockedUser.id])].map((id) =>
+				queryClient.invalidateQueries({ queryKey: ['user', id] }),
+			),
+		)
 		notificationManager.addNotification({
 			type: 'success',
 			title: formatMessage(messages.unlockUserSuccessTitle),

From c67200ba7a4010a04d0db00c206d03a6c45e8aca Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 28 Oct 2026 11:26:50 -0600
Subject: [PATCH 4/4] pnpm prepr

---
 apps/frontend/src/pages/settings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/pages/settings.vue b/apps/frontend/src/pages/settings.vue
index 7ef90d5b87f..7897f4d7e58 100644
--- a/apps/frontend/src/pages/settings.vue
+++ b/apps/frontend/src/pages/settings.vue
@@ -119,8 +119,8 @@ import {
 	LanguagesIcon,
 	MonitorSmartphoneIcon,
 	PaintbrushIcon,
-	SettingsIcon,
 	ServerIcon,
+	SettingsIcon,
 	ShieldIcon,
 	ToggleRightIcon,
 	UserIcon,