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

packages/ui/src/components/base/FormattedTag.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useVIntl } from '../../composables'
+import { getTagMessageOrDefault } from '../../utils/tag-messages.ts'
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+	tag: string
+	enforceType?: 'loader' | 'category'
+}>()
+
+const message = computed(() => getTagMessageOrDefault(props.tag, props.enforceType))
+</script>
+
+<template>
+	{{ typeof message === 'string' ? message : formatMessage(message) }}
+</template>

packages/ui/src/components/base/ProjectCard.vue

@@ -69,14 +69,13 @@
 
 <script setup>
 import { CalendarIcon, DownloadIcon, EditIcon, HeartIcon } from '@modrinth/assets'
+import { Avatar, Categories } from '@modrinth/ui'
 import { formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime.js'
 import { computed } from 'vue'
 
 import { useRelativeTime } from '../../composables'
-import Categories from '../search/Categories.vue'
-import Avatar from './Avatar.vue'
 import EnvironmentIndicator from './EnvironmentIndicator.vue'
 import Badge from './SimpleBadge.vue'
 

packages/ui/src/components/base/TagIcon.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { getCategoryIcon, getLoaderIcon, getTagIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+const props = defineProps<{
+	tag: string
+	enforceType?: 'loader' | 'category'
+}>()
+
+const icon = computed(() =>
+	props.enforceType === 'loader'
+		? getLoaderIcon(props.tag)
+		: props.enforceType === 'category'
+			? getCategoryIcon(props.tag)
+			: getTagIcon(props.tag),
+)
+</script>
+
+<template>
+	<component :is="icon" v-if="icon" />
+</template>

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'