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/app-frontend/src/components/ui/InstanceIndicator.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 
 type Instance = {
@@ -37,7 +36,8 @@ defineProps<{
 					</span>
 					<span class="text-secondary flex items-center gap-2 font-semibold">
 						<GameIcon class="h-5 w-5 text-secondary" />
-						{{ formatCategory(instance.loader) }} {{ instance.game_version }}
+						<FormattedTag :tag="instance.loader" enforce-type="loader" />
+						{{ instance.game_version }}
 					</span>
 				</span>
 			</span>

apps/app-frontend/src/components/ui/ProjectCard.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import { Avatar, TagItem } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+import { Avatar, FormattedTag, TagItem } from '@modrinth/ui'
+import { formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed } from 'vue'
@@ -107,7 +107,7 @@ const toTransparent = computed(() => {
 				<div class="flex items-center gap-1 pr-2">
 					<TagIcon />
 					<TagItem>
-						{{ formatCategory(featuredCategory) }}
+						<FormattedTag :tag="featuredCategory" />
 					</TagItem>
 				</div>
 			</div>

apps/app-frontend/src/components/ui/SearchCard.vue

@@ -67,7 +67,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.name) }}
+					<FormattedTag :tag="tag.name" />
 				</div>
 			</div>
 		</div>
@@ -118,8 +118,8 @@
 
 <script setup>
 import { CheckIcon, DownloadIcon, HeartIcon, PlusIcon, TagsIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectNotificationManager } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+import { Avatar, ButtonStyled, FormattedTag, injectNotificationManager } from '@modrinth/ui'
+import { formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed, ref } from 'vue'

apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
 	DownloadIcon,
+	getLoaderIcon,
 	HammerIcon,
 	IssuesIcon,
 	SpinnerIcon,
@@ -17,16 +18,11 @@ import {
 	Chips,
 	Combobox,
 	defineMessages,
+	getTagMessageOrDefault,
 	injectNotificationManager,
 	useVIntl,
 } from '@modrinth/ui'
-import {
-	formatCategory,
-	type GameVersionTag,
-	type PlatformTag,
-	type Project,
-	type Version,
-} from '@modrinth/utils'
+import type { GameVersionTag, PlatformTag, Project, Version } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
 
@@ -129,9 +125,7 @@ if (props.instance.linked_data && props.instance.linked_data.project_id && !prop
 	fetching.value = false
 }
 
-const currentLoaderIcon = computed(
-	() => loaders?.value.find((x) => x.name === props.instance.loader)?.icon,
-)
+const currentLoaderIcon = computed(() => getLoaderIcon(props.instance.loader))
 
 const gameVersionsForLoader = computed(() => {
 	return all_game_versions?.value.filter((item) => {
@@ -550,7 +544,7 @@ const messages = defineMessages({
 						v-else
 						class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 [&_svg]:h-full [&_svg]:w-full"
 					>
-						<div v-if="!!currentLoaderIcon" class="contents" v-html="currentLoaderIcon" />
+						<component :is="currentLoaderIcon" v-if="currentLoaderIcon" />
 						<WrenchIcon v-else />
 					</div>
 					<div class="flex flex-col gap-2 justify-center">
@@ -569,7 +563,10 @@ const messages = defineMessages({
 									? modpackVersion
 										? modpackVersion?.version_number
 										: 'Unknown version'
-									: formatCategory(instance.loader)
+									: (() => {
+											const message = getTagMessageOrDefault(instance.loader, 'loader')
+											return typeof message === 'string' ? message : formatMessage(message)
+										})()
 							}}
 							<template v-if="instance.loader !== 'vanilla' && !modpackProject">
 								{{ instance.loader_version || formatMessage(messages.unknownVersion) }}
@@ -677,7 +674,14 @@ const messages = defineMessages({
 			</div>
 			<template v-if="loader !== 'vanilla'">
 				<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
-					{{ formatMessage(messages.loaderVersion, { loader: formatCategory(loader) }) }}
+					{{
+						formatMessage(messages.loaderVersion, {
+							loader: (() => {
+								const message = getTagMessageOrDefault(loader, 'loader')
+								return typeof message === 'string' ? message : formatMessage(message)
+							})(),
+						})
+					}}
 				</h2>
 				<Combobox
 					v-if="selectableLoaderVersions"
@@ -709,7 +713,10 @@ const messages = defineMessages({
 												? messages.alreadyInstalledVanilla
 												: messages.alreadyInstalledModded,
 											{
-												platform: formatCategory(loader),
+												platform: (() => {
+													const message = getTagMessageOrDefault(loader, 'loader')
+													return typeof message === 'string' ? message : formatMessage(message)
+												})(),
 												version: instance.loader_version,
 												game_version: gameVersion,
 											},