Make tags translatable, move icons to frontend, a few other things (#5229)

* Make tags translatable, move icons to frontend, a few other things

* Migrate more things

* fix import

* more import fixes

* export tag-messages

* lint

apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue

@@ -132,17 +132,24 @@
 							:loader="'Vanilla'"
 							class="size-5 flex-none"
 						/>
-						<svg
-							v-else
+						<component
+							:is="getLoaderIcon(filtersRef.selectedPlatforms[0])"
+							v-else-if="
+								filtersRef?.selectedPlatforms[0] && getLoaderIcon(filtersRef.selectedPlatforms[0])
+							"
 							class="size-5 flex-none"
-							v-html="tags.loaders.find((x) => x.name === filtersRef?.selectedPlatforms[0])?.icon"
-						></svg>
+						/>
 
 						<div class="w-full truncate text-left">
 							{{
 								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(', ')
 							}}
 						</div>
 					</template>
@@ -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)
+			}),
 	}
 })
 

apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue

@@ -1,22 +1,15 @@
 <template>
-	<div v-if="loaderData?.icon" v-html="loaderData.icon" />
+	<component :is="icon" v-if="icon" />
 	<LoaderIcon v-else />
 </template>
 
 <script setup lang="ts">
-import { LoaderIcon } from '@modrinth/assets'
+import { getLoaderIcon, LoaderIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
-import { useGeneratedState } from '~/composables/generated'
-
 const props = defineProps<{
 	loader: string
 }>()
 
-const tags = useGeneratedState()
-
-// Find the loader by name (case-insensitive comparison)
-const loaderData = computed(() =>
-	tags.value.loaders.find((l) => l.name.toLowerCase() === props.loader.toLowerCase()),
-)
+const icon = computed(() => getLoaderIcon(props.loader))
 </script>