From ddb013e02438432cc17ac1bb74b315ef9280bf99 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 4 Feb 2026 14:47:35 -0800
Subject: [PATCH] translatable category headers (#5301)

---
 .../src/components/GridDisplay.vue            | 13 +++++++--
 .../src/components/ui/charts/ChartDisplay.vue |  4 +--
 .../src/pages/[type]/[id]/settings/tags.vue   |  5 ++--
 packages/ui/src/locales/en-US/index.json      | 12 ++++++++
 packages/ui/src/utils/search.ts               |  6 ++--
 packages/ui/src/utils/tag-messages.ts         | 28 +++++++++++++++++++
 packages/utils/utils.ts                       |  4 ---
 7 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/apps/app-frontend/src/components/GridDisplay.vue b/apps/app-frontend/src/components/GridDisplay.vue
index c0e7fe7f1..0019c78cf 100644
--- a/apps/app-frontend/src/components/GridDisplay.vue
+++ b/apps/app-frontend/src/components/GridDisplay.vue
@@ -10,8 +10,13 @@ import {
 	TrashIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
-import { formatCategoryHeader } from '@modrinth/utils'
+import {
+	Button,
+	DropdownSelect,
+	formatLoader,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
@@ -23,6 +28,8 @@ import { duplicate, remove } from '@/helpers/profile.js'
 
 const { handleError } = injectNotificationManager()
 
+const { formatMessage } = useVIntl()
+
 const props = defineProps({
 	instances: {
 		type: Array,
@@ -175,7 +182,7 @@ const filteredResults = computed(() => {
 
 	if (group === 'Loader') {
 		instances.forEach((instance) => {
-			const loader = formatCategoryHeader(instance.loader)
+			const loader = formatLoader(formatMessage, instance.loader)
 			if (!instanceMap.has(loader)) {
 				instanceMap.set(loader, [])
 			}
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index 24676e213..2d4f7d58f 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -74,7 +74,7 @@
 					<div class="chart-controls">
 						<h2>
 							<span class="label__title">
-								{{ formatCategoryHeader(selectedChart) }}
+								{{ capitalizeString(selectedChart) }}
 							</span>
 							<span class="label__subtitle">
 								{{ formattedCategorySubtitle }}
@@ -311,7 +311,7 @@
 <script setup lang="ts">
 import { DownloadIcon, PaletteIcon, UpdatedIcon } from '@modrinth/assets'
 import { Button, Card, DropdownSelect } from '@modrinth/ui'
-import { formatCategoryHeader, formatMoney, formatNumber } from '@modrinth/utils'
+import { capitalizeString, formatMoney, formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
index 1755b77c9..a4299c508 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
@@ -38,7 +38,7 @@
 				<template v-for="header in Object.keys(categoryLists)" :key="`categories-${header}`">
 					<div class="label mb-3">
 						<h4>
-							<span class="label__title">{{ formatCategoryHeader(header) }}</span>
+							<span class="label__title">{{ formatCategoryHeader(formatMessage, header) }}</span>
 						</h4>
 						<span class="label__description">
 							<template v-if="header === 'categories'">
@@ -136,13 +136,14 @@ import { getCategoryIcon, StarIcon, TriangleAlertIcon } from '@modrinth/assets'
 import {
 	Checkbox,
 	formatCategory,
+	formatCategoryHeader,
 	FormattedTag,
 	injectProjectPageContext,
 	UnsavedChangesPopup,
 	useSavable,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatCategoryHeader, formatProjectType, sortedCategories } from '@modrinth/utils'
+import { formatProjectType, sortedCategories } from '@modrinth/utils'
 import { computed } from 'vue'
 
 interface Category {
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 023dd3e02..679e92eeb 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -248,6 +248,18 @@
   "form.placeholder.state": {
     "defaultMessage": "Enter state/province"
   },
+  "header.category.category": {
+    "defaultMessage": "Category"
+  },
+  "header.category.feature": {
+    "defaultMessage": "Feature"
+  },
+  "header.category.performance-impact": {
+    "defaultMessage": "Performance impact"
+  },
+  "header.category.resolutions": {
+    "defaultMessage": "Resolutions"
+  },
   "hosting.specs.burst": {
     "defaultMessage": "Bursts up to {cpus} CPUs"
   },
diff --git a/packages/ui/src/utils/search.ts b/packages/ui/src/utils/search.ts
index 799c87ec0..1252a7eb4 100644
--- a/packages/ui/src/utils/search.ts
+++ b/packages/ui/src/utils/search.ts
@@ -1,11 +1,11 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { ClientIcon, getCategoryIcon, getLoaderIcon, ServerIcon } from '@modrinth/assets'
-import { formatCategoryHeader, sortByNameOrNumber } from '@modrinth/utils'
+import { sortByNameOrNumber } from '@modrinth/utils'
 import { type Component, computed, readonly, type Ref, ref } from 'vue'
 import { type LocationQueryRaw, type LocationQueryValue, useRoute } from 'vue-router'
 
 import { defineMessage, useVIntl } from '../composables/i18n'
-import { formatCategory, formatLoader } from './tag-messages.ts'
+import { formatCategory, formatCategoryHeader, formatLoader } from './tag-messages.ts'
 
 type BaseOption = {
 	id: string
@@ -132,7 +132,7 @@ export function useSearch(
 			if (!categoryFilters[filterTypeId]) {
 				categoryFilters[filterTypeId] = {
 					id: filterTypeId,
-					formatted_name: formatCategoryHeader(category.header),
+					formatted_name: formatCategoryHeader(formatMessage, category.header),
 					supported_project_types:
 						category.project_type === 'mod'
 							? ['mod', 'plugin', 'datapack']
diff --git a/packages/ui/src/utils/tag-messages.ts b/packages/ui/src/utils/tag-messages.ts
index 167b6d4b3..85c45e308 100644
--- a/packages/ui/src/utils/tag-messages.ts
+++ b/packages/ui/src/utils/tag-messages.ts
@@ -388,6 +388,25 @@ export const categoryMessages = defineMessages({
 	},
 })
 
+export const categoryHeaderMessages = defineMessages({
+	resolutions: {
+		id: 'header.category.resolutions',
+		defaultMessage: 'Resolutions',
+	},
+	categories: {
+		id: 'header.category.category',
+		defaultMessage: 'Category',
+	},
+	features: {
+		id: 'header.category.feature',
+		defaultMessage: 'Feature',
+	},
+	'performance impact': {
+		id: 'header.category.performance-impact',
+		defaultMessage: 'Performance impact',
+	},
+})
+
 export function getTagMessage(
 	tag: string,
 	enforceType?: 'loader' | 'category',
@@ -409,6 +428,10 @@ export function getCategoryMessage(category: string) {
 	return getTagMessage(category, 'category')
 }
 
+export function getCategoryHeaderMessage(header: string): MessageDescriptor | undefined {
+	return categoryHeaderMessages[header]
+}
+
 export function formatTag(
 	formatter: VIntlFormatters['formatMessage'],
 	tag: string,
@@ -425,3 +448,8 @@ export function formatCategory(formatter: VIntlFormatters['formatMessage'], cate
 export function formatLoader(formatter: VIntlFormatters['formatMessage'], category: string) {
 	return formatTag(formatter, category, 'loader')
 }
+
+export function formatCategoryHeader(formatter: VIntlFormatters['formatMessage'], header: string) {
+	const message = getCategoryHeaderMessage(header)
+	return message ? formatter(message) : capitalizeString(header)
+}
diff --git a/packages/utils/utils.ts b/packages/utils/utils.ts
index 63b542f41..d15ee0a4b 100644
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -162,10 +162,6 @@ export const formatProjectType = (name, short = false) => {
 	return capitalizeString(name)
 }
 
-export const formatCategoryHeader = (name) => {
-	return capitalizeString(name)
-}
-
 export const formatProjectStatus = (name) => {
 	if (name === 'approved') {
 		return 'Public'