translatable category headers (#5301)

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"
   },

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']

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)
+}