Clean up formatters from prev PR (#5254)

packages/ui/src/components/base/FormattedTag.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 import { useVIntl } from '../../composables'
-import { getTagMessageOrDefault } from '../../utils/tag-messages.ts'
+import { formatTag } from '../../utils/tag-messages.ts'
 
 const { formatMessage } = useVIntl()
 
@@ -11,9 +11,9 @@ const props = defineProps<{
 	enforceType?: 'loader' | 'category'
 }>()
 
-const message = computed(() => getTagMessageOrDefault(props.tag, props.enforceType))
+const message = computed(() => formatTag(formatMessage, props.tag, props.enforceType))
 </script>
 
 <template>
-	{{ typeof message === 'string' ? message : formatMessage(message) }}
+	{{ message }}
 </template>

packages/ui/src/components/search/Categories.vue

@@ -3,7 +3,7 @@
 		<slot />
 		<span v-for="category in categories.filter((x) => !!x)" :key="category">
 			<component :is="getTagIcon(category)" v-if="getTagIcon(category)" />
-			{{ getFormattedMessage(category) }}
+			{{ formatTag(formatMessage, category) }}
 		</span>
 	</div>
 </template>
@@ -11,18 +11,13 @@
 import { getTagIcon } from '@modrinth/assets'
 
 import { useVIntl } from '../../composables'
-import { getTagMessageOrDefault } from '../../utils/tag-messages.ts'
+import { formatTag } from '../../utils/tag-messages.ts'
 
 const { formatMessage } = useVIntl()
 
 defineProps<{
 	categories: string[]
 }>()
-
-const getFormattedMessage = (tag: string) => {
-	const message = getTagMessageOrDefault(tag)
-	return typeof message === 'string' ? message : formatMessage(message)
-}
 </script>
 
 <style lang="scss" scoped>

packages/ui/src/utils/search.ts

@@ -5,7 +5,7 @@ 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 { getTagMessageOrDefault } from './tag-messages.ts'
+import { formatCategory, formatLoader } from './tag-messages.ts'
 
 type BaseOption = {
 	id: string
@@ -144,10 +144,9 @@ export function useSearch(
 					options: [],
 				}
 			}
-			const message = getTagMessageOrDefault(category.name, 'category')
 			categoryFilters[filterTypeId].options.push({
 				id: category.name,
-				formatted_name: typeof message === 'string' ? message : formatMessage(message),
+				formatted_name: formatCategory(formatMessage, category.name),
 				icon: getCategoryIcon(category.name),
 				value: `categories:${category.name}`,
 				method: category.header === 'resolutions' ? 'or' : 'and',
@@ -256,10 +255,9 @@ export function useSearch(
 							!loader.supported_project_types.includes('datapack'),
 					)
 					.map((loader) => {
-						const message = getTagMessageOrDefault(loader.name, 'loader')
 						return {
 							id: loader.name,
-							formatted_name: typeof message === 'string' ? message : formatMessage(message),
+							formatted_name: formatLoader(formatMessage, loader.name),
 							icon: getLoaderIcon(loader.name),
 							method: 'or',
 							value: `categories:${loader.name}`,
@@ -283,10 +281,9 @@ export function useSearch(
 				options: tags.value.loaders
 					.filter((loader) => loader.supported_project_types.includes('modpack'))
 					.map((loader) => {
-						const message = getTagMessageOrDefault(loader.name, 'loader')
 						return {
 							id: loader.name,
-							formatted_name: typeof message === 'string' ? message : formatMessage(message),
+							formatted_name: formatLoader(formatMessage, loader.name),
 							icon: getLoaderIcon(loader.name),
 							method: 'or',
 							value: `categories:${loader.name}`,
@@ -313,10 +310,9 @@ export function useSearch(
 							!PLUGIN_PLATFORMS.includes(loader.name),
 					)
 					.map((loader) => {
-						const message = getTagMessageOrDefault(loader.name, 'loader')
 						return {
 							id: loader.name,
-							formatted_name: typeof message === 'string' ? message : formatMessage(message),
+							formatted_name: formatLoader(formatMessage, loader.name),
 							icon: getLoaderIcon(loader.name),
 							method: 'or',
 							value: `categories:${loader.name}`,
@@ -339,10 +335,9 @@ export function useSearch(
 				options: tags.value.loaders
 					.filter((loader) => PLUGIN_PLATFORMS.includes(loader.name))
 					.map((loader) => {
-						const message = getTagMessageOrDefault(loader.name, 'loader')
 						return {
 							id: loader.name,
-							formatted_name: typeof message === 'string' ? message : formatMessage(message),
+							formatted_name: formatLoader(formatMessage, loader.name),
 							icon: getLoaderIcon(loader.name),
 							method: 'or',
 							value: `categories:${loader.name}`,
@@ -366,10 +361,9 @@ export function useSearch(
 				options: tags.value.loaders
 					.filter((loader) => loader.supported_project_types.includes('shader'))
 					.map((loader) => {
-						const message = getTagMessageOrDefault(loader.name, 'loader')
 						return {
 							id: loader.name,
-							formatted_name: typeof message === 'string' ? message : formatMessage(message),
+							formatted_name: formatLoader(formatMessage, loader.name),
 							icon: getLoaderIcon(loader.name),
 							method: 'or',
 							value: `categories:${loader.name}`,

packages/ui/src/utils/tag-messages.ts

@@ -1,6 +1,6 @@
 import { capitalizeString } from '@modrinth/utils'
 
-import { defineMessages, type MessageDescriptor } from '../composables/i18n'
+import { defineMessages, type MessageDescriptor, type VIntlFormatters } from '../composables/i18n'
 
 export const loaderMessages = defineMessages({
 	babric: {
@@ -401,9 +401,27 @@ export function getTagMessage(
 	}
 }
 
-export function getTagMessageOrDefault(
+export function getLoaderMessage(loader: string) {
+	return getTagMessage(loader, 'loader')
+}
+
+export function getCategoryMessage(category: string) {
+	return getTagMessage(category, 'category')
+}
+
+export function formatTag(
+	formatter: VIntlFormatters['formatMessage'],
 	tag: string,
 	enforceType?: 'loader' | 'category',
-): MessageDescriptor | string {
-	return getTagMessage(tag, enforceType) ?? capitalizeString(tag)
+) {
+	const message = getTagMessage(tag, enforceType)
+	return message ? formatter(message) : capitalizeString(tag)
+}
+
+export function formatCategory(formatter: VIntlFormatters['formatMessage'], category: string) {
+	return formatTag(formatter, category, 'category')
+}
+
+export function formatLoader(formatter: VIntlFormatters['formatMessage'], category: string) {
+	return formatTag(formatter, category, 'category')
 }