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/ProjectCard.vue

@@ -91,10 +91,9 @@
 
 <script>
 import { CalendarIcon, DownloadIcon, HeartIcon, UpdatedIcon } from '@modrinth/assets'
-import { Avatar, ProjectStatusBadge, useRelativeTime } from '@modrinth/ui'
+import { Avatar, Categories, ProjectStatusBadge, useRelativeTime } from '@modrinth/ui'
 
 import EnvironmentIndicator from '~/components/ui/EnvironmentIndicator.vue'
-import Categories from '~/components/ui/search/Categories.vue'
 
 export default {
 	components: {

apps/frontend/src/components/ui/create-project-version/components/LoaderPicker.vue

@@ -27,8 +27,8 @@
 						"
 						:style="`--_color: var(--color-platform-${loader.name})`"
 					>
-						<div v-html="loader.icon"></div>
-						{{ formatCategory(loader.name) }}
+						<component :is="getLoaderIcon(loader.name)" v-if="getLoaderIcon(loader.name)" />
+						<FormattedTag :tag="loader.name" enforce-type="loader" />
 					</TagItem>
 				</div>
 			</div>
@@ -40,8 +40,8 @@
 
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
-import { Chips, TagItem } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { getLoaderIcon } from '@modrinth/assets'
+import { Chips, FormattedTag, TagItem } from '@modrinth/ui'
 
 const selectedLoaders = defineModel<string[]>({ default: [] })
 

apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue

@@ -29,8 +29,8 @@
 							class="border !border-solid border-surface-5 !transition-all hover:bg-button-bgHover hover:no-underline"
 							:style="`--_color: var(--color-platform-${loader.name})`"
 						>
-							<div v-html="loader.icon"></div>
-							{{ formatCategory(loader.name) }}
+							<component :is="getLoaderIcon(loader.name)" v-if="getLoaderIcon(loader.name)" />
+							<FormattedTag :tag="loader.name" enforce-type="loader" />
 							<XIcon class="text-secondary" />
 						</TagItem>
 					</template>
@@ -41,9 +41,8 @@
 </template>
 
 <script lang="ts" setup>
-import { XIcon } from '@modrinth/assets'
-import { ButtonStyled, TagItem } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { getLoaderIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, FormattedTag, TagItem } from '@modrinth/ui'
 
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 

apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue

@@ -72,8 +72,8 @@
 							class="border !border-solid border-surface-5 hover:no-underline"
 							:style="`--_color: var(--color-platform-${loader.name})`"
 						>
-							<div v-html="loader.icon"></div>
-							{{ formatCategory(loader.name) }}
+							<component :is="getLoaderIcon(loader.name)" v-if="getLoaderIcon(loader.name)" />
+							<FormattedTag :tag="loader.name" enforce-type="loader" />
 						</TagItem>
 					</template>
 
@@ -189,16 +189,16 @@
 
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
-import { EditIcon, UnknownIcon } from '@modrinth/assets'
+import { EditIcon, getLoaderIcon, UnknownIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
 	defineMessages,
 	ENVIRONMENTS_COPY,
+	FormattedTag,
 	injectProjectPageContext,
 	TagItem,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
 
 import { useGeneratedState } from '~/composables/generated'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'

apps/frontend/src/components/ui/search/Categories.vue

@@ -1,72 +0,0 @@
-<template>
-	<div class="categories">
-		<slot />
-		<span
-			v-for="category in categoriesFiltered"
-			:key="category.name"
-			v-html="category.icon + formatCategory(category.name)"
-		/>
-	</div>
-</template>
-
-<script>
-import { formatCategory } from '@modrinth/utils'
-
-export default {
-	props: {
-		categories: {
-			type: Array,
-			default() {
-				return []
-			},
-		},
-		type: {
-			type: String,
-			required: true,
-		},
-	},
-	setup() {
-		const tags = useGeneratedState()
-
-		return { tags }
-	},
-	computed: {
-		categoriesFiltered() {
-			return this.tags.categories
-				.concat(this.tags.loaders)
-				.filter(
-					(x) =>
-						this.categories.includes(x.name) && (!x.project_type || x.project_type === this.type),
-				)
-		},
-	},
-	methods: { formatCategory },
-}
-</script>
-
-<style lang="scss" scoped>
-.categories {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-
-	:deep(span) {
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-
-		&:not(:last-child) {
-			margin-right: var(--spacing-card-md);
-		}
-
-		&:not(.badge) {
-			color: var(--color-icon);
-		}
-
-		svg {
-			width: 1rem;
-			margin-right: 0.2rem;
-		}
-	}
-}
-</style>

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>