diff --git a/apps/app-frontend/src/components/ui/InstanceIndicator.vue b/apps/app-frontend/src/components/ui/InstanceIndicator.vue
index a00263bd7..72a7e2151 100644
--- a/apps/app-frontend/src/components/ui/InstanceIndicator.vue
+++ b/apps/app-frontend/src/components/ui/InstanceIndicator.vue
@@ -1,7 +1,6 @@
-
-
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
index a87db5e83..0bfe2ba11 100644
--- a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
+++ b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
@@ -132,17 +132,24 @@
:loader="'Vanilla'"
class="size-5 flex-none"
/>
-
+ />
{{
filtersRef?.selectedPlatforms.length === 0
? 'All platforms'
- : filtersRef?.selectedPlatforms.map((x) => formatCategory(x)).join(', ')
+ : filtersRef?.selectedPlatforms
+ .map((x) => {
+ const message = getTagMessageOrDefault(x, 'loader')
+ return typeof message === 'string' ? message : formatMessage(message)
+ })
+ .join(', ')
}}
@@ -242,6 +249,7 @@ import {
DropdownIcon,
ExternalIcon,
GameIcon,
+ getLoaderIcon,
LockOpenIcon,
XIcon,
} from '@modrinth/assets'
@@ -252,10 +260,12 @@ import {
Checkbox,
Combobox,
CopyCode,
+ getTagMessageOrDefault,
NewModal,
+ TagItem,
+ useVIntl,
} from '@modrinth/ui'
-import TagItem from '@modrinth/ui/src/components/base/TagItem.vue'
-import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from '@modrinth/utils'
+import { formatVersionsForDisplay, type Mod, type Version } from '@modrinth/utils'
import { computed, ref } from 'vue'
import Accordion from '~/components/ui/Accordion.vue'
@@ -265,6 +275,8 @@ import ContentVersionFilter, {
} from '~/components/ui/servers/ContentVersionFilter.vue'
import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
+const { formatMessage } = useVIntl()
+
const props = defineProps<{
type: 'Mod' | 'Plugin'
loader: string
@@ -424,7 +436,10 @@ const formattedVersions = computed(() => {
if (secondLoaderPosition === -1) return -1
return firstLoaderPosition - secondLoaderPosition
})
- .map((loader: string) => formatCategory(loader)),
+ .map((loader: string) => {
+ const message = getTagMessageOrDefault(loader, 'loader')
+ return typeof message === 'string' ? message : formatMessage(message)
+ }),
}
})
diff --git a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
index 4bd494e49..090bb945b 100644
--- a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
+++ b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
@@ -1,22 +1,15 @@
-
+
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index f6bc2767c..fe52b5d86 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -977,7 +977,7 @@ import {
useVIntl,
} from '@modrinth/ui'
import VersionSummary from '@modrinth/ui/src/components/version/VersionSummary.vue'
-import { formatCategory, formatPrice, formatProjectType, renderString } from '@modrinth/utils'
+import { formatPrice, formatProjectType, renderString } from '@modrinth/utils'
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
import { useLocalStorage } from '@vueuse/core'
import dayjs from 'dayjs'
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
index 203730ba7..e705c5ab7 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
@@ -66,18 +66,24 @@
v-for="category in categoryLists[header]"
:key="`category-${header}-${category.name}`"
:model-value="current.selectedTags.includes(category)"
- :description="formatCategory(category.name)"
+ :description="
+ typeof getTagMessageOrDefault(category.name, 'category') === 'string'
+ ? getTagMessageOrDefault(category.name, 'category')
+ : formatMessage(getTagMessageOrDefault(category.name, 'category'))
+ "
class="category-selector"
@update:model-value="toggleCategory(category)"
>
-
-
{{ formatCategory(category.name) }}
+
+
+
@@ -100,18 +106,24 @@
:key="`featured-category-${category.name}`"
class="category-selector"
:model-value="current.featuredTags.includes(category)"
- :description="formatCategory(category.name)"
+ :description="
+ typeof getTagMessageOrDefault(category.name, 'category') === 'string'
+ ? getTagMessageOrDefault(category.name, 'category')
+ : formatMessage(getTagMessageOrDefault(category.name, 'category'))
+ "
:disabled="current.featuredTags.length >= 3 && !current.featuredTags.includes(category)"
@update:model-value="toggleFeaturedCategory(category)"
>
-
-
{{ formatCategory(category.name) }}
+
+
+
@@ -128,14 +140,17 @@
+
+
+ {{ typeof message === 'string' ? message : formatMessage(message) }}
+
diff --git a/packages/ui/src/components/base/ProjectCard.vue b/packages/ui/src/components/base/ProjectCard.vue
index a2dcddd0a..201a1b46a 100644
--- a/packages/ui/src/components/base/ProjectCard.vue
+++ b/packages/ui/src/components/base/ProjectCard.vue
@@ -69,14 +69,13 @@
+
+
+
+
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index ebe2c7901..a0f430b1c 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -28,6 +28,7 @@ export type { FilterBarOption } from './FilterBar.vue'
export { default as FilterBar } from './FilterBar.vue'
export { default as FloatingActionBar } from './FloatingActionBar.vue'
export { default as FloatingPanel } from './FloatingPanel.vue'
+export { default as FormattedTag } from './FormattedTag.vue'
export { default as HeadingLink } from './HeadingLink.vue'
export { default as HorizontalRule } from './HorizontalRule.vue'
export { default as IconSelect } from './IconSelect.vue'
diff --git a/packages/ui/src/components/project/NewProjectCard.vue b/packages/ui/src/components/project/NewProjectCard.vue
index e7491b084..7e8378bdd 100644
--- a/packages/ui/src/components/project/NewProjectCard.vue
+++ b/packages/ui/src/components/project/NewProjectCard.vue
@@ -20,7 +20,7 @@
:key="tag"
class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
>
- {{ formatCategory(tag) }}
+
@@ -65,10 +65,10 @@