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 {