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/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) }}
+					<FormattedTag :tag="tag" />
 				</div>
 			</div>
 		</div>
@@ -65,10 +65,10 @@
 
 <script setup>
 import { DownloadIcon, HeartIcon, HistoryIcon, TagsIcon } from '@modrinth/assets'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+import { Avatar, FormattedTag } from '@modrinth/ui'
+import { formatNumber } from '@modrinth/utils'
 
 import { useRelativeTime } from '../../composables'
-import Avatar from '../base/Avatar.vue'
 
 const formatRelativeTime = useRelativeTime()
 

packages/ui/src/components/project/ProjectHeader.vue

@@ -42,7 +42,7 @@
 						:key="index"
 						:action="() => router.push(`/${project.project_type}s?f=categories:${category}`)"
 					>
-						{{ formatCategory(category) }}
+						<FormattedTag :tag="category" />
 					</TagItem>
 				</div>
 			</div>
@@ -54,11 +54,12 @@
 </template>
 <script setup lang="ts">
 import { DownloadIcon, HeartIcon, TagsIcon } from '@modrinth/assets'
-import { formatCategory, formatNumber, type Project } from '@modrinth/utils'
+import { formatNumber, type Project } from '@modrinth/utils'
 import { useRouter } from 'vue-router'
 
 import Avatar from '../base/Avatar.vue'
 import ContentPageHeader from '../base/ContentPageHeader.vue'
+import FormattedTag from '../base/FormattedTag.vue'
 import TagItem from '../base/TagItem.vue'
 import ProjectStatusBadge from './ProjectStatusBadge.vue'
 

packages/ui/src/components/project/ProjectPageVersions.vue

@@ -149,9 +149,8 @@
 										:style="`--_color: var(--color-platform-${platform})`"
 										:action="() => versionFilters?.toggleFilter('platform', platform)"
 									>
-										<!-- eslint-disable-next-line vue/no-v-html -->
-										<svg v-html="loaders.find((x) => x.name === platform)?.icon"></svg>
-										{{ formatCategory(platform) }}
+										<component :is="getLoaderIcon(platform)" v-if="getLoaderIcon(platform)" />
+										<FormattedTag :tag="platform" enforce-type="loader" />
 									</TagItem>
 								</div>
 							</div>
@@ -221,11 +220,18 @@
 </template>
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { CalendarIcon, DownloadIcon, PlusIcon, StarIcon } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
+import { CalendarIcon, DownloadIcon, getLoaderIcon, PlusIcon, StarIcon } from '@modrinth/assets'
+import {
+	AutoLink,
+	ButtonStyled,
+	FormattedTag,
+	Pagination,
+	TagItem,
+	VersionChannelIndicator,
+	VersionFilterControl,
+} from '@modrinth/ui'
 import {
 	formatBytes,
-	formatCategory,
 	formatNumber,
 	formatVersionsForDisplay,
 	type GameVersionTag,
@@ -237,9 +243,6 @@ import { useRoute, useRouter } from 'vue-router'
 import { useRelativeTime } from '../../composables'
 import { useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
-import AutoLink from '../base/AutoLink.vue'
-import TagItem from '../base/TagItem.vue'
-import { Pagination, VersionChannelIndicator, VersionFilterControl } from '../index'
 import { getEnvironmentTags } from './settings/environment/environments'
 
 const { formatMessage } = useVIntl()

packages/ui/src/components/project/ProjectSidebarCompatibility.vue

@@ -21,8 +21,8 @@
 					:action="() => router.push(`/${project.project_type}s?g=categories:${platform}`)"
 					:style="`--_color: var(--color-platform-${platform})`"
 				>
-					<svg v-html="tags.loaders.find((x) => x.name === platform)?.icon"></svg>
-					{{ formatCategory(platform) }}
+					<component :is="getLoaderIcon(platform)" v-if="getLoaderIcon(platform)" />
+					<FormattedTag :tag="platform" enforce-type="loader" />
 				</TagItem>
 			</div>
 		</section>
@@ -85,9 +85,16 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
+import {
+	ClientIcon,
+	getLoaderIcon,
+	MonitorSmartphoneIcon,
+	ServerIcon,
+	UserIcon,
+} from '@modrinth/assets'
+import { FormattedTag, TagItem } from '@modrinth/ui'
 import type { EnvironmentV3, GameVersionTag, PlatformTag, ProjectV3Partial } from '@modrinth/utils'
-import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
+import { getVersionsToDisplay } from '@modrinth/utils'
 import { type Component, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -97,7 +104,6 @@ import {
 	type MessageDescriptor,
 	useVIntl,
 } from '../../composables/i18n'
-import TagItem from '../base/TagItem.vue'
 
 const { formatMessage } = useVIntl()
 const router = useRouter()

packages/ui/src/components/project/ProjectSidebarDetails.vue

@@ -33,13 +33,13 @@
 			>
 				<CalendarIcon aria-hidden="true" />
 				<div>
-					{{ formatMessage(messages.published, { date: publishedDate }) }}
+					{{ capitalizeString(formatMessage(messages.published, { date: publishedDate })) }}
 				</div>
 			</div>
 			<div v-else v-tooltip="dayjs(project.published).format('MMMM D, YYYY [at] h:mm A')">
 				<CalendarIcon aria-hidden="true" />
 				<div>
-					{{ formatMessage(messages.created, { date: createdDate }) }}
+					{{ capitalizeString(formatMessage(messages.created, { date: createdDate })) }}
 				</div>
 			</div>
 			<div
@@ -48,7 +48,7 @@
 			>
 				<ScaleIcon aria-hidden="true" />
 				<div>
-					{{ formatMessage(messages.submitted, { date: submittedDate }) }}
+					{{ capitalizeString(formatMessage(messages.submitted, { date: submittedDate })) }}
 				</div>
 			</div>
 			<div
@@ -57,7 +57,7 @@
 			>
 				<VersionIcon aria-hidden="true" />
 				<div>
-					{{ formatMessage(messages.updated, { date: updatedDate }) }}
+					{{ capitalizeString(formatMessage(messages.updated, { date: updatedDate })) }}
 				</div>
 			</div>
 		</div>
@@ -65,6 +65,7 @@
 </template>
 <script setup lang="ts">
 import { BookTextIcon, CalendarIcon, ExternalIcon, ScaleIcon, VersionIcon } from '@modrinth/assets'
+import { capitalizeString } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'