From 11f00be6064bf05aad9adc4091daea26fe5f80cd Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Mon, 2 Feb 2026 01:38:36 -0800
Subject: [PATCH] Clean up formatters from prev PR (#5254)

---
 .../InstallationSettings.vue                  | 17 +++---------
 .../ui/servers/ContentVersionEditModal.vue    | 10 +++----
 .../src/pages/[type]/[id]/settings/tags.vue   | 14 +++-------
 .../ui/src/components/base/FormattedTag.vue   |  6 ++---
 .../ui/src/components/search/Categories.vue   |  9 ++-----
 packages/ui/src/utils/search.ts               | 20 +++++---------
 packages/ui/src/utils/tag-messages.ts         | 26 ++++++++++++++++---
 packages/utils/utils.ts                       |  2 +-
 8 files changed, 45 insertions(+), 59 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
index ed6adef3d..93cf9bc55 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
@@ -18,7 +18,7 @@ import {
 	Chips,
 	Combobox,
 	defineMessages,
-	getTagMessageOrDefault,
+	formatLoader,
 	injectNotificationManager,
 	useVIntl,
 } from '@modrinth/ui'
@@ -563,10 +563,7 @@ const messages = defineMessages({
 									? modpackVersion
 										? modpackVersion?.version_number
 										: 'Unknown version'
-									: (() => {
-											const message = getTagMessageOrDefault(instance.loader, 'loader')
-											return typeof message === 'string' ? message : formatMessage(message)
-										})()
+									: formatLoader(formatMessage, instance.loader)
 							}}
 							<template v-if="instance.loader !== 'vanilla' && !modpackProject">
 								{{ instance.loader_version || formatMessage(messages.unknownVersion) }}
@@ -676,10 +673,7 @@ const messages = defineMessages({
 				<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
 					{{
 						formatMessage(messages.loaderVersion, {
-							loader: (() => {
-								const message = getTagMessageOrDefault(loader, 'loader')
-								return typeof message === 'string' ? message : formatMessage(message)
-							})(),
+							loader: formatLoader(formatMessage, loader),
 						})
 					}}
 				</h2>
@@ -713,10 +707,7 @@ const messages = defineMessages({
 												? messages.alreadyInstalledVanilla
 												: messages.alreadyInstalledModded,
 											{
-												platform: (() => {
-													const message = getTagMessageOrDefault(loader, 'loader')
-													return typeof message === 'string' ? message : formatMessage(message)
-												})(),
+												platform: formatLoader(formatMessage, loader),
 												version: instance.loader_version,
 												game_version: gameVersion,
 											},
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
index 0bfe2ba11..21fa2e22f 100644
--- a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
+++ b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
@@ -146,8 +146,7 @@
 									? 'All platforms'
 									: filtersRef?.selectedPlatforms
 											.map((x) => {
-												const message = getTagMessageOrDefault(x, 'loader')
-												return typeof message === 'string' ? message : formatMessage(message)
+												return formatLoader(formatMessage, x)
 											})
 											.join(', ')
 							}}
@@ -260,7 +259,7 @@ import {
 	Checkbox,
 	Combobox,
 	CopyCode,
-	getTagMessageOrDefault,
+	formatLoader,
 	NewModal,
 	TagItem,
 	useVIntl,
@@ -436,10 +435,7 @@ const formattedVersions = computed(() => {
 				if (secondLoaderPosition === -1) return -1
 				return firstLoaderPosition - secondLoaderPosition
 			})
-			.map((loader: string) => {
-				const message = getTagMessageOrDefault(loader, 'loader')
-				return typeof message === 'string' ? message : formatMessage(message)
-			}),
+			.map((loader: string) => formatLoader(formatMessage, loader)),
 	}
 })
 
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
index e705c5ab7..1755b77c9 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
@@ -66,11 +66,7 @@
 							v-for="category in categoryLists[header]"
 							:key="`category-${header}-${category.name}`"
 							:model-value="current.selectedTags.includes(category)"
-							:description="
-								typeof getTagMessageOrDefault(category.name, 'category') === 'string'
-									? getTagMessageOrDefault(category.name, 'category')
-									: formatMessage(getTagMessageOrDefault(category.name, 'category'))
-							"
+							:description="formatCategory(formatMessage, category.name)"
 							class="category-selector"
 							@update:model-value="toggleCategory(category)"
 						>
@@ -106,11 +102,7 @@
 						:key="`featured-category-${category.name}`"
 						class="category-selector"
 						:model-value="current.featuredTags.includes(category)"
-						:description="
-							typeof getTagMessageOrDefault(category.name, 'category') === 'string'
-								? getTagMessageOrDefault(category.name, 'category')
-								: formatMessage(getTagMessageOrDefault(category.name, 'category'))
-						"
+						:description="formatCategory(formatMessage, category.name)"
 						:disabled="current.featuredTags.length >= 3 && !current.featuredTags.includes(category)"
 						@update:model-value="toggleFeaturedCategory(category)"
 					>
@@ -143,8 +135,8 @@
 import { getCategoryIcon, StarIcon, TriangleAlertIcon } from '@modrinth/assets'
 import {
 	Checkbox,
+	formatCategory,
 	FormattedTag,
-	getTagMessageOrDefault,
 	injectProjectPageContext,
 	UnsavedChangesPopup,
 	useSavable,
diff --git a/packages/ui/src/components/base/FormattedTag.vue b/packages/ui/src/components/base/FormattedTag.vue
index 87d9fb7ab..b2ea48597 100644
--- a/packages/ui/src/components/base/FormattedTag.vue
+++ b/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>
diff --git a/packages/ui/src/components/search/Categories.vue b/packages/ui/src/components/search/Categories.vue
index e0aa1e728..09faa65ac 100644
--- a/packages/ui/src/components/search/Categories.vue
+++ b/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>
diff --git a/packages/ui/src/utils/search.ts b/packages/ui/src/utils/search.ts
index b9cb0bb86..799c87ec0 100644
--- a/packages/ui/src/utils/search.ts
+++ b/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}`,
diff --git a/packages/ui/src/utils/tag-messages.ts b/packages/ui/src/utils/tag-messages.ts
index cae6b138b..87e40611e 100644
--- a/packages/ui/src/utils/tag-messages.ts
+++ b/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')
 }
diff --git a/packages/utils/utils.ts b/packages/utils/utils.ts
index b96364687..f0ec9cc0f 100644
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -163,7 +163,7 @@ export const formatProjectType = (name, short = false) => {
 }
 
 /**
- * @deprecated Use tag-messages.ts' `getTagMessageOrDefault(tag)` instead.
+ * @deprecated Use tag-messages.ts' `formatTag(tag)` instead.
  */
 export const formatCategory = (name) => {
 	if (name === 'modloader') {