translatable category headers (#5301)

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, [])
 			}

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'
 

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 {

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

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'