Sort filters and add translations for servers (#5493)

* Translate and sort server filters

* Set team_members to unknown[]

* Additional fixes after merge

* Additional translations

* Replace "IP" with "server address"

* Prioritize English and user language

packages/ui/src/components/project/server/ServerModpackContent.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		v-tooltip="showCustomModpackTooltip ? 'This project uses a custom modpack' : name"
+		v-tooltip="showCustomModpackTooltip ? formatMessage(messages.customModpackTooltip) : name"
 		class="flex gap-1.5 items-center flex-shrink overflow-hidden smart-clickable:allow-pointer-events"
 		:class="[onclick ? 'hover:underline cursor-pointer' : '']"
 		@click="onclick"
@@ -13,6 +13,7 @@
 </template>
 
 <script setup lang="ts">
+import { defineMessages, useVIntl } from '../../../composables'
 import Avatar from '../../base/Avatar.vue'
 
 defineProps<{
@@ -21,4 +22,13 @@ defineProps<{
 	onclick?: () => void
 	showCustomModpackTooltip?: boolean
 }>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	customModpackTooltip: {
+		id: `project.server.customModpackTooltip`,
+		defaultMessage: 'This project uses a custom modpack',
+	},
+})
 </script>

packages/ui/src/components/project/server/ServerModpackContentCard.vue

@@ -4,7 +4,7 @@
 			<Avatar :src="icon" size="34px" class="!rounded-xl !shadow-none" />
 			<div class="flex flex-col items-start overflow-hidden">
 				<div
-					v-tooltip="showCustomModpackTooltip ? 'This project uses a custom modpack' : name"
+					v-tooltip="showCustomModpackTooltip ? formatMessage(messages.customModpackTooltip) : name"
 					class="truncate font-semibold text-sm max-w-full"
 					:class="onclickName ? 'hover:underline cursor-pointer' : ''"
 					@click="onclickName"
@@ -22,7 +22,7 @@
 			</div>
 		</div>
 		<ButtonStyled v-if="onclickDownload" circular type="transparent">
-			<button v-tooltip="'Download modpack'" @click="onclickDownload">
+			<button v-tooltip="formatMessage(messages.downloadModpack)" @click="onclickDownload">
 				<DownloadIcon />
 			</button>
 		</ButtonStyled>
@@ -32,6 +32,7 @@
 <script setup lang="ts">
 import { DownloadIcon } from '@modrinth/assets/generated-icons'
 
+import { defineMessages, useVIntl } from '../../../composables'
 import Avatar from '../../base/Avatar.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 
@@ -44,4 +45,17 @@ defineProps<{
 	onclickDownload?: () => void
 	showCustomModpackTooltip?: boolean
 }>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	customModpackTooltip: {
+		id: `project.server.customModpackTooltip`,
+		defaultMessage: 'This project uses a custom modpack',
+	},
+	downloadModpack: {
+		id: `project.about.server.downloadModpack`,
+		defaultMessage: 'Download modpack',
+	},
+})
 </script>

packages/ui/src/components/project/server/ServerPing.vue

@@ -2,7 +2,7 @@
 import { SignalIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
-import { defineMessage, useVIntl } from '../../../composables'
+import { defineMessages, useVIntl } from '../../../composables'
 import { TagItem } from '../../base'
 
 const props = defineProps<{
@@ -10,9 +10,23 @@ const props = defineProps<{
 	statusOnline?: boolean
 }>()
 
-const pingMessage = defineMessage({
-	id: 'project.server.ping.ms',
-	defaultMessage: '{ping, number} ms',
+const messages = defineMessages({
+	ping: {
+		id: 'project.server.ping.ms',
+		defaultMessage: '{ping, number} ms',
+	},
+	online: {
+		id: 'project.server.status.online',
+		defaultMessage: 'Online',
+	},
+	offline: {
+		id: 'project.server.status.offline',
+		defaultMessage: 'Offline',
+	},
+	offlineTooltip: {
+		id: 'project.server.status.offline.tooltip',
+		defaultMessage: 'Server is offline',
+	},
 })
 
 const { formatMessage } = useVIntl()
@@ -37,19 +51,19 @@ const pingClass = computed(() => {
 		:class="pingClass"
 	>
 		<template v-if="ping !== undefined">
-			{{ formatMessage(pingMessage, { ping }) }}
+			{{ formatMessage(messages.ping, { ping }) }}
 		</template>
 		<template v-else>
 			<SignalIcon />
-			Online
+			{{ formatMessage(messages.online) }}
 		</template>
 	</TagItem>
 	<TagItem
 		v-else
-		v-tooltip="'Server is offline'"
+		v-tooltip="formatMessage(messages.offlineTooltip)"
 		class="border !border-solid border-red bg-highlight-red text-red smart-clickable:allow-pointer-events w-max"
 	>
 		<SignalIcon />
-		Offline
+		{{ formatMessage(messages.offline) }}
 	</TagItem>
 </template>

packages/ui/src/components/project/server/ServerRegion.vue

@@ -1,25 +1,28 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { defineMessage, useVIntl } from '../../../composables'
+import { SERVER_REGIONS } from '../../../utils'
 import { TagItem } from '../../base'
 
 const { region } = defineProps<{
 	region: string
 }>()
 
-const regionNames: Record<string, string> = {
-	us_east: 'US East',
-	us_west: 'US West',
-	europe: 'Europe',
-	asia: 'Asia',
-	australia: 'Australia',
-	south_america: 'South America',
-	middle_east: 'Middle East',
-	russia: 'Russia',
-}
+const { formatMessage } = useVIntl()
 
-const regionName = computed(() => regionNames[region] ?? region)
+const tooltip = defineMessage({
+	id: 'project.server.region.tooltip',
+	defaultMessage: 'Server hosted in {regionName}',
+})
+
+const regionName = computed(() => {
+	const name = SERVER_REGIONS[region]
+	if (name) return formatMessage(name)
+
+	return region
+})
 </script>
 <template>
-	<TagItem v-tooltip="`Server hosted in ${regionName}`">{{ regionName }}</TagItem>
+	<TagItem v-tooltip="formatMessage(tooltip, { regionName })">{{ regionName }}</TagItem>
 </template>