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

apps/frontend/src/components/ui/create/ProjectCreateModal.vue

@@ -229,10 +229,6 @@ const messages = defineMessages({
 		id: 'create.project.create-project',
 		defaultMessage: 'Create project',
 	},
-	createServerProject: {
-		id: 'create.project.create-server-project',
-		defaultMessage: 'Create server',
-	},
 	visibilityPublic: {
 		id: 'create.project.visibility-public',
 		defaultMessage: 'Public',

apps/frontend/src/locales/en-US/index.json

@@ -497,9 +497,6 @@
   "create.project.create-project": {
     "message": "Create project"
   },
-  "create.project.create-server-project": {
-    "message": "Create server"
-  },
   "create.project.missing-fields-tooltip": {
     "message": "Missing fields: {fields}"
   },

apps/frontend/src/pages/[type]/[id]/settings/server.vue

@@ -169,12 +169,15 @@ import {
 	SERVER_REGIONS,
 	StyledInput,
 	UnsavedChangesPopup,
+	useVIntl,
 } from '@modrinth/ui'
 
 import CompatibilityCard from '~/components/ui/project-settings/CompatibilityCard.vue'
 
 const PING_TIMEOUT_MS = 5000
 
+const { formatMessage, locale } = useVIntl()
+
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 const { projectV3, currentMember, patchProjectV3 } = injectProjectPageContext()
@@ -262,15 +265,31 @@ if (projectV3.value) {
 	)
 }
 
-const regionOptions = SERVER_REGIONS.map((region) => ({
+const regionOptions = computed(() =>
-	value: region.code,
+	Object.entries(SERVER_REGIONS)
-	label: region.name,
+		.sort(([_, a], [__, b]) => {
-}))
+			const aFormatted = formatMessage(a)
+			const bFormatted = formatMessage(b)
+			return aFormatted.localeCompare(bFormatted, locale.value)
+		})
+		.map(([code, name]) => ({
+			value: code,
+			label: formatMessage(name),
+		})),
+)
 
-const languageOptions = SERVER_LANGUAGES.map((language) => ({
+const languageOptions = computed(() =>
-	value: language.code,
+	Object.entries(SERVER_LANGUAGES)
-	label: language.name,
+		.sort(([_, a], [__, b]) => {
-}))
+			const aFormatted = formatMessage(a)
+			const bFormatted = formatMessage(b)
+			return aFormatted.localeCompare(bFormatted, locale.value)
+		})
+		.map(([code, name]) => ({
+			value: code,
+			label: formatMessage(name),
+		})),
+)
 
 const javaServerPatchData = computed(() => {
 	const addressChanged =

packages/ui/src/components/modal/OpenInAppModal.vue

@@ -91,7 +91,7 @@
 					<ButtonStyled class="flex-1">
 						<button @click="hide">
 							<XIcon />
-							{{ formatMessage(messages.close) }}
+							{{ formatMessage(commonMessages.closeButton) }}
 						</button>
 					</ButtonStyled>
 					<ButtonStyled color="green" class="flex-1">
@@ -108,6 +108,7 @@
 
 <script setup lang="ts">
 import { CheckIcon, DownloadIcon, XIcon } from '@modrinth/assets'
+import { commonMessages } from '@modrinth/ui'
 import { computed, nextTick, onUnmounted, ref } from 'vue'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
@@ -142,10 +143,6 @@ const messages = defineMessages({
 		id: 'modal.open-in-app.opening-automatically',
 		defaultMessage: 'The Modrinth App will open automatically...',
 	},
-	close: {
-		id: 'modal.open-in-app.close',
-		defaultMessage: 'Close',
-	},
 	getApp: {
 		id: 'modal.open-in-app.get-app',
 		defaultMessage: 'Get Modrinth App',

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

@@ -14,7 +14,7 @@
 							{{ organization.name }}
 						</span>
 						<span class="text-secondary text-sm font-medium flex items-center gap-1"
-							><OrganizationIcon /> Organization</span
+							><OrganizationIcon /> {{ formatMessage(messages.organization) }}</span
 						>
 					</div>
 				</AutoLink>
@@ -117,5 +117,9 @@ const messages = defineMessages({
 		id: 'project.about.creators.owner',
 		defaultMessage: 'Project owner',
 	},
+	organization: {
+		id: 'project.about.creators.organization',
+		defaultMessage: 'Organization',
+	},
 })
 </script>

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

@@ -4,7 +4,7 @@
 
 		<div
 			v-if="ipAddress"
-			v-tooltip="`Copy Java IP: ${ipAddress}`"
+			v-tooltip="formatMessage(messages.addressTooltip)"
 			class="bg-button-bg flex gap-2 justify-between rounded-2xl items-center px-3 pr-1.5 h-12 cursor-pointer hover:bg-button-bg-hover hover:brightness-125 transition-all active:scale-95"
 			@click="handleCopyIP"
 		>
@@ -17,7 +17,7 @@
 		</div>
 
 		<section v-if="requiredContent" class="flex flex-col gap-2">
-			<h3 class="text-primary text-base m-0">Required content</h3>
+			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.requiredContent) }}</h3>
 			<ServerModpackContentCard
 				:name="requiredContent.name"
 				:version-number="requiredContent.versionNumber ?? ''"
@@ -29,14 +29,16 @@
 			/>
 		</section>
 		<section v-if="recommendedVersions.length" class="flex flex-col gap-2">
-			<h3 class="text-primary text-base m-0">Minecraft: Java Edition</h3>
+			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.minecraftJava) }}</h3>
 			<div class="flex flex-wrap gap-1.5">
 				<TagItem
 					v-for="version in formatVersionsForDisplay(recommendedVersions, tags.gameVersions)"
 					:key="`recommended-tag-${version}`"
 				>
 					{{ version }}
-					<template v-if="supportedVersions.length > 0"> (Recommended) </template>
+					<template v-if="supportedVersions.length > 0">
+						{{ formatMessage(messages.recommendedVersion) }}
+					</template>
 				</TagItem>
 				<TagItem
 					v-for="version in formatVersionsForDisplay(supportedVersionsList, tags.gameVersions)"
@@ -56,7 +58,7 @@
 			</div>
 		</section>
 		<section v-if="props.ping !== undefined || region" class="flex flex-col gap-2">
-			<h3 class="text-primary text-base m-0">Region</h3>
+			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.region) }}</h3>
 			<div class="flex flex-wrap gap-1.5 items-center">
 				<ServerPing
 					v-if="projectV3?.status !== 'draft'"
@@ -67,10 +69,10 @@
 			</div>
 		</section>
 		<section v-if="languages.length > 0" class="flex flex-col gap-2">
-			<h3 class="text-primary text-base m-0">Languages</h3>
+			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.languages) }}</h3>
 			<div class="flex flex-wrap gap-1.5">
 				<TagItem v-for="language in languages" :key="`${language}`">
-					{{ languageDisplay.find((l) => l.value === language)?.label ?? language }}
+					{{ SERVER_LANGUAGES[language] ? formatMessage(SERVER_LANGUAGES[language]) : language }}
 				</TagItem>
 			</div>
 		</section>
@@ -79,6 +81,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { CopyIcon, getLoaderIcon } from '@modrinth/assets'
+import { SERVER_LANGUAGES } from '@modrinth/ui'
 import { formatVersionsForDisplay, type GameVersionTag, type PlatformTag } from '@modrinth/utils'
 import { computed } from 'vue'
 
@@ -171,48 +174,6 @@ function handleCopyIP() {
 	})
 }
 
-const languageDisplay = [
-	{ value: 'en', label: 'English' },
-	{ value: 'es', label: 'Spanish' },
-	{ value: 'pt', label: 'Portuguese' },
-	{ value: 'fr', label: 'French' },
-	{ value: 'de', label: 'German' },
-	{ value: 'it', label: 'Italian' },
-	{ value: 'nl', label: 'Dutch' },
-	{ value: 'ru', label: 'Russian' },
-	{ value: 'uk', label: 'Ukrainian' },
-	{ value: 'pl', label: 'Polish' },
-	{ value: 'cs', label: 'Czech' },
-	{ value: 'sk', label: 'Slovak' },
-	{ value: 'hu', label: 'Hungarian' },
-	{ value: 'ro', label: 'Romanian' },
-	{ value: 'bg', label: 'Bulgarian' },
-	{ value: 'hr', label: 'Croatian' },
-	{ value: 'sr', label: 'Serbian' },
-	{ value: 'el', label: 'Greek' },
-	{ value: 'tr', label: 'Turkish' },
-	{ value: 'ar', label: 'Arabic' },
-	{ value: 'he', label: 'Hebrew' },
-	{ value: 'hi', label: 'Hindi' },
-	{ value: 'bn', label: 'Bengali' },
-	{ value: 'ur', label: 'Urdu' },
-	{ value: 'zh', label: 'Chinese' },
-	{ value: 'ja', label: 'Japanese' },
-	{ value: 'ko', label: 'Korean' },
-	{ value: 'th', label: 'Thai' },
-	{ value: 'vi', label: 'Vietnamese' },
-	{ value: 'id', label: 'Indonesian' },
-	{ value: 'ms', label: 'Malay' },
-	{ value: 'tl', label: 'Filipino' },
-	{ value: 'sv', label: 'Swedish' },
-	{ value: 'no', label: 'Norwegian' },
-	{ value: 'da', label: 'Danish' },
-	{ value: 'fi', label: 'Finnish' },
-	{ value: 'lt', label: 'Lithuanian' },
-	{ value: 'lv', label: 'Latvian' },
-	{ value: 'et', label: 'Estonian' },
-]
-
 const messages = defineMessages({
 	copied: {
 		id: `project.about.server.copied`,
@@ -220,15 +181,35 @@ const messages = defineMessages({
 	},
 	copiedText: {
 		id: `project.about.server.copiedText`,
-		defaultMessage: 'IP address copied to clipboard',
+		defaultMessage: 'Server address copied to clipboard',
 	},
 	title: {
 		id: `project.about.server.title`,
 		defaultMessage: 'Server details',
 	},
-	latency: {
+	addressTooltip: {
-		id: `project.about.server.latency`,
+		id: `project.about.server.address.tooltip`,
-		defaultMessage: 'Latency',
+		defaultMessage: 'Copy Java server address',
+	},
+	requiredContent: {
+		id: `project.about.server.requiredContent`,
+		defaultMessage: 'Required content',
+	},
+	minecraftJava: {
+		id: `project.about.compatibility.game.minecraftJava`,
+		defaultMessage: 'Minecraft: Java Edition',
+	},
+	recommendedVersion: {
+		id: `project.about.server.recommendedVersion`,
+		defaultMessage: '(Recommended)',
+	},
+	region: {
+		id: `project.about.server.region`,
+		defaultMessage: 'Region',
+	},
+	languages: {
+		id: `project.about.server.languages`,
+		defaultMessage: 'Languages',
 	},
 })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
 	<div v-if="allTags.length > 0" class="flex flex-col gap-3">
-		<h2 class="text-lg m-0">Tags</h2>
+		<h2 class="text-lg m-0">{{ formatMessage(messages.title) }}</h2>
 		<div class="flex flex-wrap gap-1">
 			<TagItem
 				v-for="tag in allTags"
@@ -16,6 +16,7 @@
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { defineMessages, useVIntl } from '../../composables'
 import FormattedTag from '../base/FormattedTag.vue'
 import TagItem from '../base/TagItem.vue'
 
@@ -42,6 +43,15 @@ const props = defineProps<{
 	}
 }>()
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	title: {
+		id: 'project.about.tags.title',
+		defaultMessage: 'Tags',
+	},
+})
+
 const allTags = computed(() => [
 	...props.project.categories,
 	...props.project.additional_categories,

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({
+const messages = defineMessages({
-	id: 'project.server.ping.ms',
+	ping: {
-	defaultMessage: '{ping, number} ms',
+		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> = {
+const { formatMessage } = useVIntl()
-	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 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>

packages/ui/src/composables/i18n.ts

@@ -31,8 +31,7 @@ export interface LocaleDefinition {
 	translatedName: MessageDescriptor
 	numeric?: Intl.RelativeTimeFormatNumeric
 	dir?: 'ltr' | 'rtl'
-	iso?: string
+	serverLanguageCode?: string
-	file?: string
 }
 
 export const LOCALES: LocaleDefinition[] = [
@@ -93,6 +92,7 @@ export const LOCALES: LocaleDefinition[] = [
 		code: 'fil-PH',
 		name: 'Filipino',
 		translatedName: defineMessage({ id: 'locale.fil-PH', defaultMessage: 'Filipino' }),
+		serverLanguageCode: 'tl',
 	},
 	{
 		code: 'fr-FR',

packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue

@@ -72,10 +72,6 @@ const messages = defineMessages({
 		id: 'instances.modpack-content-modal.no-results',
 		defaultMessage: 'No projects match your search.',
 	},
-	backButton: {
-		id: 'instances.modpack-content-modal.back-button',
-		defaultMessage: 'Back',
-	},
 	allFilter: {
 		id: 'instances.modpack-content-modal.filter-all',
 		defaultMessage: 'All',

packages/ui/src/locales/en-US/index.json

@@ -779,9 +779,6 @@
   "instances.content-install.show-all-versions": {
     "defaultMessage": "Show all versions"
   },
-  "instances.modpack-content-modal.back-button": {
-    "defaultMessage": "Back"
-  },
   "instances.modpack-content-modal.copy-link": {
     "defaultMessage": "Copy link"
   },
@@ -1142,9 +1139,6 @@
   "modal.open-in-app.benefit.update": {
     "defaultMessage": "Keep files updated when the server changes"
   },
-  "modal.open-in-app.close": {
-    "defaultMessage": "Close"
-  },
   "modal.open-in-app.get-app": {
     "defaultMessage": "Get Modrinth App"
   },
@@ -1430,6 +1424,9 @@
   "project.about.compatibility.title": {
     "defaultMessage": "Compatibility"
   },
+  "project.about.creators.organization": {
+    "defaultMessage": "Organization"
+  },
   "project.about.creators.owner": {
     "defaultMessage": "Project owner"
   },
@@ -1490,18 +1487,36 @@
   "project.about.links.wiki": {
     "defaultMessage": "Visit wiki"
   },
+  "project.about.server.address.tooltip": {
+    "defaultMessage": "Copy Java server address"
+  },
   "project.about.server.copied": {
     "defaultMessage": "Copied!"
   },
   "project.about.server.copiedText": {
-    "defaultMessage": "IP address copied to clipboard"
+    "defaultMessage": "Server address copied to clipboard"
   },
-  "project.about.server.latency": {
+  "project.about.server.downloadModpack": {
-    "defaultMessage": "Latency"
+    "defaultMessage": "Download modpack"
+  },
+  "project.about.server.languages": {
+    "defaultMessage": "Languages"
+  },
+  "project.about.server.recommendedVersion": {
+    "defaultMessage": "(Recommended)"
+  },
+  "project.about.server.region": {
+    "defaultMessage": "Region"
+  },
+  "project.about.server.requiredContent": {
+    "defaultMessage": "Required content"
   },
   "project.about.server.title": {
     "defaultMessage": "Server details"
   },
+  "project.about.tags.title": {
+    "defaultMessage": "Tags"
+  },
   "project.download-count-tooltip": {
     "defaultMessage": "{count, number} {count, plural, one {download} other {downloads}}"
   },
@@ -1586,9 +1601,267 @@
   "project.recent-plays.tooltip": {
     "defaultMessage": "{count} {countPlural, plural, one {recent play} other {recent plays}} from Modrinth in the past 2 weeks"
   },
+  "project.server.customModpackTooltip": {
+    "defaultMessage": "This project uses a custom modpack"
+  },
+  "project.server.language.af": {
+    "defaultMessage": "Afrikaans"
+  },
+  "project.server.language.am": {
+    "defaultMessage": "Amharic"
+  },
+  "project.server.language.ar": {
+    "defaultMessage": "Arabic"
+  },
+  "project.server.language.az": {
+    "defaultMessage": "Azerbaijani"
+  },
+  "project.server.language.be": {
+    "defaultMessage": "Belarusian"
+  },
+  "project.server.language.bg": {
+    "defaultMessage": "Bulgarian"
+  },
+  "project.server.language.bn": {
+    "defaultMessage": "Bengali"
+  },
+  "project.server.language.bs": {
+    "defaultMessage": "Bosnian"
+  },
+  "project.server.language.ca": {
+    "defaultMessage": "Catalan"
+  },
+  "project.server.language.cs": {
+    "defaultMessage": "Czech"
+  },
+  "project.server.language.da": {
+    "defaultMessage": "Danish"
+  },
+  "project.server.language.de": {
+    "defaultMessage": "German"
+  },
+  "project.server.language.el": {
+    "defaultMessage": "Greek"
+  },
+  "project.server.language.en": {
+    "defaultMessage": "English"
+  },
+  "project.server.language.eo": {
+    "defaultMessage": "Esperanto"
+  },
+  "project.server.language.es": {
+    "defaultMessage": "Spanish"
+  },
+  "project.server.language.et": {
+    "defaultMessage": "Estonian"
+  },
+  "project.server.language.eu": {
+    "defaultMessage": "Basque"
+  },
+  "project.server.language.fa": {
+    "defaultMessage": "Persian"
+  },
+  "project.server.language.fi": {
+    "defaultMessage": "Finnish"
+  },
+  "project.server.language.fr": {
+    "defaultMessage": "French"
+  },
+  "project.server.language.ga": {
+    "defaultMessage": "Irish"
+  },
+  "project.server.language.gl": {
+    "defaultMessage": "Galician"
+  },
+  "project.server.language.he": {
+    "defaultMessage": "Hebrew"
+  },
+  "project.server.language.hi": {
+    "defaultMessage": "Hindi"
+  },
+  "project.server.language.hr": {
+    "defaultMessage": "Croatian"
+  },
+  "project.server.language.hu": {
+    "defaultMessage": "Hungarian"
+  },
+  "project.server.language.hy": {
+    "defaultMessage": "Armenian"
+  },
+  "project.server.language.id": {
+    "defaultMessage": "Indonesian"
+  },
+  "project.server.language.is": {
+    "defaultMessage": "Icelandic"
+  },
+  "project.server.language.it": {
+    "defaultMessage": "Italian"
+  },
+  "project.server.language.ja": {
+    "defaultMessage": "Japanese"
+  },
+  "project.server.language.ka": {
+    "defaultMessage": "Georgian"
+  },
+  "project.server.language.kk": {
+    "defaultMessage": "Kazakh"
+  },
+  "project.server.language.km": {
+    "defaultMessage": "Khmer"
+  },
+  "project.server.language.kn": {
+    "defaultMessage": "Kannada"
+  },
+  "project.server.language.ko": {
+    "defaultMessage": "Korean"
+  },
+  "project.server.language.lo": {
+    "defaultMessage": "Lao"
+  },
+  "project.server.language.lt": {
+    "defaultMessage": "Lithuanian"
+  },
+  "project.server.language.lv": {
+    "defaultMessage": "Latvian"
+  },
+  "project.server.language.mk": {
+    "defaultMessage": "Macedonian"
+  },
+  "project.server.language.ml": {
+    "defaultMessage": "Malayalam"
+  },
+  "project.server.language.mn": {
+    "defaultMessage": "Mongolian"
+  },
+  "project.server.language.mr": {
+    "defaultMessage": "Marathi"
+  },
+  "project.server.language.ms": {
+    "defaultMessage": "Malay"
+  },
+  "project.server.language.my": {
+    "defaultMessage": "Burmese"
+  },
+  "project.server.language.ne": {
+    "defaultMessage": "Nepali"
+  },
+  "project.server.language.nl": {
+    "defaultMessage": "Dutch"
+  },
+  "project.server.language.no": {
+    "defaultMessage": "Norwegian"
+  },
+  "project.server.language.pa": {
+    "defaultMessage": "Punjabi"
+  },
+  "project.server.language.pl": {
+    "defaultMessage": "Polish"
+  },
+  "project.server.language.pt": {
+    "defaultMessage": "Portuguese"
+  },
+  "project.server.language.ro": {
+    "defaultMessage": "Romanian"
+  },
+  "project.server.language.ru": {
+    "defaultMessage": "Russian"
+  },
+  "project.server.language.si": {
+    "defaultMessage": "Sinhala"
+  },
+  "project.server.language.sk": {
+    "defaultMessage": "Slovak"
+  },
+  "project.server.language.sl": {
+    "defaultMessage": "Slovenian"
+  },
+  "project.server.language.sq": {
+    "defaultMessage": "Albanian"
+  },
+  "project.server.language.sr": {
+    "defaultMessage": "Serbian"
+  },
+  "project.server.language.sv": {
+    "defaultMessage": "Swedish"
+  },
+  "project.server.language.sw": {
+    "defaultMessage": "Swahili"
+  },
+  "project.server.language.ta": {
+    "defaultMessage": "Tamil"
+  },
+  "project.server.language.te": {
+    "defaultMessage": "Telugu"
+  },
+  "project.server.language.th": {
+    "defaultMessage": "Thai"
+  },
+  "project.server.language.tl": {
+    "defaultMessage": "Filipino"
+  },
+  "project.server.language.tr": {
+    "defaultMessage": "Turkish"
+  },
+  "project.server.language.uk": {
+    "defaultMessage": "Ukrainian"
+  },
+  "project.server.language.ur": {
+    "defaultMessage": "Urdu"
+  },
+  "project.server.language.uz": {
+    "defaultMessage": "Uzbek"
+  },
+  "project.server.language.vi": {
+    "defaultMessage": "Vietnamese"
+  },
+  "project.server.language.yo": {
+    "defaultMessage": "Yoruba"
+  },
+  "project.server.language.zh": {
+    "defaultMessage": "Chinese"
+  },
+  "project.server.language.zu": {
+    "defaultMessage": "Zulu"
+  },
   "project.server.ping.ms": {
     "defaultMessage": "{ping, number} ms"
   },
+  "project.server.region.asia": {
+    "defaultMessage": "Asia"
+  },
+  "project.server.region.australia": {
+    "defaultMessage": "Australia"
+  },
+  "project.server.region.europe": {
+    "defaultMessage": "Europe"
+  },
+  "project.server.region.middle_east": {
+    "defaultMessage": "Middle East"
+  },
+  "project.server.region.russia": {
+    "defaultMessage": "Russia"
+  },
+  "project.server.region.south_america": {
+    "defaultMessage": "South America"
+  },
+  "project.server.region.tooltip": {
+    "defaultMessage": "Server hosted in {regionName}"
+  },
+  "project.server.region.us_east": {
+    "defaultMessage": "US East"
+  },
+  "project.server.region.us_west": {
+    "defaultMessage": "US West"
+  },
+  "project.server.status.offline": {
+    "defaultMessage": "Offline"
+  },
+  "project.server.status.offline.tooltip": {
+    "defaultMessage": "Server is offline"
+  },
+  "project.server.status.online": {
+    "defaultMessage": "Online"
+  },
   "project.settings.analytics.title": {
     "defaultMessage": "Analytics"
   },
@@ -1823,9 +2096,27 @@
   "search.filter_type.project_id": {
     "defaultMessage": "Project ID"
   },
+  "search.filter_type.server_content_type": {
+    "defaultMessage": "Type"
+  },
+  "search.filter_type.server_language": {
+    "defaultMessage": "Language"
+  },
+  "search.filter_type.server_region": {
+    "defaultMessage": "Region"
+  },
+  "search.filter_type.server_status": {
+    "defaultMessage": "Status"
+  },
   "search.filter_type.shader_loader": {
     "defaultMessage": "Loader"
   },
+  "search.server_content_type.modpack": {
+    "defaultMessage": "Modded"
+  },
+  "search.server_content_type.vanilla": {
+    "defaultMessage": "Vanilla"
+  },
   "servers.backups.admonition.backup-failed.description": {
     "defaultMessage": "Something went wrong while creating {backupName}. Please try again or contact support if the issue continues."
   },
@@ -2235,7 +2526,7 @@
     "defaultMessage": "Kitchen Sink"
   },
   "tag.category.kitpvp": {
-    "defaultMessage": "Kit PVP"
+    "defaultMessage": "Kit PvP"
   },
   "tag.category.library": {
     "defaultMessage": "Library"
@@ -2319,7 +2610,7 @@
     "defaultMessage": "Plots"
   },
   "tag.category.pokemon": {
-    "defaultMessage": "Pokemon"
+    "defaultMessage": "Pokémon"
   },
   "tag.category.potato": {
     "defaultMessage": "Potato"
@@ -2328,10 +2619,10 @@
     "defaultMessage": "Prison"
   },
   "tag.category.pve": {
-    "defaultMessage": "PVE"
+    "defaultMessage": "PvE"
   },
   "tag.category.pvp": {
-    "defaultMessage": "PVP"
+    "defaultMessage": "PvP"
   },
   "tag.category.questing": {
     "defaultMessage": "Questing"

packages/ui/src/utils/server-search.ts

@@ -1,97 +1,105 @@
-import { getCategoryIcon, SERVER_CATEGORY_ICON_MAP } from '@modrinth/assets'
+import type { Labrinth } from '@modrinth/api-client'
+import { getCategoryIcon, GlobeIcon, SERVER_CATEGORY_ICON_MAP, UserIcon } from '@modrinth/assets'
+import { sortedCategories } from '@modrinth/utils'
 import { computed, type Ref, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-import { useVIntl } from '../composables/i18n'
+import { defineMessage, LOCALES, useVIntl } from '../composables/i18n'
 import type { FilterType, FilterValue, SortType, Tags } from './search'
 import { formatCategory, formatCategoryHeader } from './tag-messages'
 
-export const SERVER_REGIONS = [
+export const SERVER_REGIONS = {
-	{ code: 'us_east', name: 'US East' },
+	us_east: defineMessage({ id: 'project.server.region.us_east', defaultMessage: 'US East' }),
-	{ code: 'us_west', name: 'US West' },
+	us_west: defineMessage({ id: 'project.server.region.us_west', defaultMessage: 'US West' }),
-	{ code: 'europe', name: 'Europe' },
+	europe: defineMessage({ id: 'project.server.region.europe', defaultMessage: 'Europe' }),
-	{ code: 'asia', name: 'Asia' },
+	asia: defineMessage({ id: 'project.server.region.asia', defaultMessage: 'Asia' }),
-	{ code: 'australia', name: 'Australia' },
+	australia: defineMessage({ id: 'project.server.region.australia', defaultMessage: 'Australia' }),
-	{ code: 'south_america', name: 'South America' },
+	south_america: defineMessage({
-	{ code: 'middle_east', name: 'Middle East' },
+		id: 'project.server.region.south_america',
-	{ code: 'russia', name: 'Russia' },
+		defaultMessage: 'South America',
-]
+	}),
+	middle_east: defineMessage({
+		id: 'project.server.region.middle_east',
+		defaultMessage: 'Middle East',
+	}),
+	russia: defineMessage({ id: 'project.server.region.russia', defaultMessage: 'Russia' }),
+}
 
-export const SERVER_LANGUAGES = [
+export const SERVER_LANGUAGES = {
-	{ code: 'en', name: 'English' },
+	en: defineMessage({ id: 'project.server.language.en', defaultMessage: 'English' }),
-	{ code: 'es', name: 'Spanish' },
+	es: defineMessage({ id: 'project.server.language.es', defaultMessage: 'Spanish' }),
-	{ code: 'pt', name: 'Portuguese' },
+	pt: defineMessage({ id: 'project.server.language.pt', defaultMessage: 'Portuguese' }),
-	{ code: 'fr', name: 'French' },
+	fr: defineMessage({ id: 'project.server.language.fr', defaultMessage: 'French' }),
-	{ code: 'de', name: 'German' },
+	de: defineMessage({ id: 'project.server.language.de', defaultMessage: 'German' }),
-	{ code: 'it', name: 'Italian' },
+	it: defineMessage({ id: 'project.server.language.it', defaultMessage: 'Italian' }),
-	{ code: 'nl', name: 'Dutch' },
+	nl: defineMessage({ id: 'project.server.language.nl', defaultMessage: 'Dutch' }),
-	{ code: 'ru', name: 'Russian' },
+	ru: defineMessage({ id: 'project.server.language.ru', defaultMessage: 'Russian' }),
-	{ code: 'uk', name: 'Ukrainian' },
+	uk: defineMessage({ id: 'project.server.language.uk', defaultMessage: 'Ukrainian' }),
-	{ code: 'pl', name: 'Polish' },
+	pl: defineMessage({ id: 'project.server.language.pl', defaultMessage: 'Polish' }),
-	{ code: 'cs', name: 'Czech' },
+	cs: defineMessage({ id: 'project.server.language.cs', defaultMessage: 'Czech' }),
-	{ code: 'sk', name: 'Slovak' },
+	sk: defineMessage({ id: 'project.server.language.sk', defaultMessage: 'Slovak' }),
-	{ code: 'hu', name: 'Hungarian' },
+	hu: defineMessage({ id: 'project.server.language.hu', defaultMessage: 'Hungarian' }),
-	{ code: 'ro', name: 'Romanian' },
+	ro: defineMessage({ id: 'project.server.language.ro', defaultMessage: 'Romanian' }),
-	{ code: 'bg', name: 'Bulgarian' },
+	bg: defineMessage({ id: 'project.server.language.bg', defaultMessage: 'Bulgarian' }),
-	{ code: 'hr', name: 'Croatian' },
+	hr: defineMessage({ id: 'project.server.language.hr', defaultMessage: 'Croatian' }),
-	{ code: 'sr', name: 'Serbian' },
+	sr: defineMessage({ id: 'project.server.language.sr', defaultMessage: 'Serbian' }),
-	{ code: 'el', name: 'Greek' },
+	el: defineMessage({ id: 'project.server.language.el', defaultMessage: 'Greek' }),
-	{ code: 'tr', name: 'Turkish' },
+	tr: defineMessage({ id: 'project.server.language.tr', defaultMessage: 'Turkish' }),
-	{ code: 'ar', name: 'Arabic' },
+	ar: defineMessage({ id: 'project.server.language.ar', defaultMessage: 'Arabic' }),
-	{ code: 'he', name: 'Hebrew' },
+	he: defineMessage({ id: 'project.server.language.he', defaultMessage: 'Hebrew' }),
-	{ code: 'hi', name: 'Hindi' },
+	hi: defineMessage({ id: 'project.server.language.hi', defaultMessage: 'Hindi' }),
-	{ code: 'bn', name: 'Bengali' },
+	bn: defineMessage({ id: 'project.server.language.bn', defaultMessage: 'Bengali' }),
-	{ code: 'ur', name: 'Urdu' },
+	ur: defineMessage({ id: 'project.server.language.ur', defaultMessage: 'Urdu' }),
-	{ code: 'zh', name: 'Chinese' },
+	zh: defineMessage({ id: 'project.server.language.zh', defaultMessage: 'Chinese' }),
-	{ code: 'ja', name: 'Japanese' },
+	ja: defineMessage({ id: 'project.server.language.ja', defaultMessage: 'Japanese' }),
-	{ code: 'ko', name: 'Korean' },
+	ko: defineMessage({ id: 'project.server.language.ko', defaultMessage: 'Korean' }),
-	{ code: 'th', name: 'Thai' },
+	th: defineMessage({ id: 'project.server.language.th', defaultMessage: 'Thai' }),
-	{ code: 'vi', name: 'Vietnamese' },
+	vi: defineMessage({ id: 'project.server.language.vi', defaultMessage: 'Vietnamese' }),
-	{ code: 'id', name: 'Indonesian' },
+	id: defineMessage({ id: 'project.server.language.id', defaultMessage: 'Indonesian' }),
-	{ code: 'ms', name: 'Malay' },
+	ms: defineMessage({ id: 'project.server.language.ms', defaultMessage: 'Malay' }),
-	{ code: 'tl', name: 'Filipino' },
+	tl: defineMessage({ id: 'project.server.language.tl', defaultMessage: 'Filipino' }),
-	{ code: 'sv', name: 'Swedish' },
+	sv: defineMessage({ id: 'project.server.language.sv', defaultMessage: 'Swedish' }),
-	{ code: 'no', name: 'Norwegian' },
+	no: defineMessage({ id: 'project.server.language.no', defaultMessage: 'Norwegian' }),
-	{ code: 'da', name: 'Danish' },
+	da: defineMessage({ id: 'project.server.language.da', defaultMessage: 'Danish' }),
-	{ code: 'fi', name: 'Finnish' },
+	fi: defineMessage({ id: 'project.server.language.fi', defaultMessage: 'Finnish' }),
-	{ code: 'lt', name: 'Lithuanian' },
+	lt: defineMessage({ id: 'project.server.language.lt', defaultMessage: 'Lithuanian' }),
-	{ code: 'lv', name: 'Latvian' },
+	lv: defineMessage({ id: 'project.server.language.lv', defaultMessage: 'Latvian' }),
-	{ code: 'et', name: 'Estonian' },
+	et: defineMessage({ id: 'project.server.language.et', defaultMessage: 'Estonian' }),
-	{ code: 'af', name: 'Afrikaans' },
+	af: defineMessage({ id: 'project.server.language.af', defaultMessage: 'Afrikaans' }),
-	{ code: 'am', name: 'Amharic' },
+	am: defineMessage({ id: 'project.server.language.am', defaultMessage: 'Amharic' }),
-	{ code: 'az', name: 'Azerbaijani' },
+	az: defineMessage({ id: 'project.server.language.az', defaultMessage: 'Azerbaijani' }),
-	{ code: 'be', name: 'Belarusian' },
+	be: defineMessage({ id: 'project.server.language.be', defaultMessage: 'Belarusian' }),
-	{ code: 'bs', name: 'Bosnian' },
+	bs: defineMessage({ id: 'project.server.language.bs', defaultMessage: 'Bosnian' }),
-	{ code: 'ca', name: 'Catalan' },
+	ca: defineMessage({ id: 'project.server.language.ca', defaultMessage: 'Catalan' }),
-	{ code: 'eo', name: 'Esperanto' },
+	eo: defineMessage({ id: 'project.server.language.eo', defaultMessage: 'Esperanto' }),
-	{ code: 'eu', name: 'Basque' },
+	eu: defineMessage({ id: 'project.server.language.eu', defaultMessage: 'Basque' }),
-	{ code: 'fa', name: 'Persian' },
+	fa: defineMessage({ id: 'project.server.language.fa', defaultMessage: 'Persian' }),
-	{ code: 'ga', name: 'Irish' },
+	ga: defineMessage({ id: 'project.server.language.ga', defaultMessage: 'Irish' }),
-	{ code: 'gl', name: 'Galician' },
+	gl: defineMessage({ id: 'project.server.language.gl', defaultMessage: 'Galician' }),
-	{ code: 'hy', name: 'Armenian' },
+	hy: defineMessage({ id: 'project.server.language.hy', defaultMessage: 'Armenian' }),
-	{ code: 'is', name: 'Icelandic' },
+	is: defineMessage({ id: 'project.server.language.is', defaultMessage: 'Icelandic' }),
-	{ code: 'ka', name: 'Georgian' },
+	ka: defineMessage({ id: 'project.server.language.ka', defaultMessage: 'Georgian' }),
-	{ code: 'kk', name: 'Kazakh' },
+	kk: defineMessage({ id: 'project.server.language.kk', defaultMessage: 'Kazakh' }),
-	{ code: 'km', name: 'Khmer' },
+	km: defineMessage({ id: 'project.server.language.km', defaultMessage: 'Khmer' }),
-	{ code: 'kn', name: 'Kannada' },
+	kn: defineMessage({ id: 'project.server.language.kn', defaultMessage: 'Kannada' }),
-	{ code: 'lo', name: 'Lao' },
+	lo: defineMessage({ id: 'project.server.language.lo', defaultMessage: 'Lao' }),
-	{ code: 'mk', name: 'Macedonian' },
+	mk: defineMessage({ id: 'project.server.language.mk', defaultMessage: 'Macedonian' }),
-	{ code: 'ml', name: 'Malayalam' },
+	ml: defineMessage({ id: 'project.server.language.ml', defaultMessage: 'Malayalam' }),
-	{ code: 'mn', name: 'Mongolian' },
+	mn: defineMessage({ id: 'project.server.language.mn', defaultMessage: 'Mongolian' }),
-	{ code: 'mr', name: 'Marathi' },
+	mr: defineMessage({ id: 'project.server.language.mr', defaultMessage: 'Marathi' }),
-	{ code: 'my', name: 'Burmese' },
+	my: defineMessage({ id: 'project.server.language.my', defaultMessage: 'Burmese' }),
-	{ code: 'ne', name: 'Nepali' },
+	ne: defineMessage({ id: 'project.server.language.ne', defaultMessage: 'Nepali' }),
-	{ code: 'pa', name: 'Punjabi' },
+	pa: defineMessage({ id: 'project.server.language.pa', defaultMessage: 'Punjabi' }),
-	{ code: 'si', name: 'Sinhala' },
+	si: defineMessage({ id: 'project.server.language.si', defaultMessage: 'Sinhala' }),
-	{ code: 'sl', name: 'Slovenian' },
+	sl: defineMessage({ id: 'project.server.language.sl', defaultMessage: 'Slovenian' }),
-	{ code: 'sq', name: 'Albanian' },
+	sq: defineMessage({ id: 'project.server.language.sq', defaultMessage: 'Albanian' }),
-	{ code: 'sw', name: 'Swahili' },
+	sw: defineMessage({ id: 'project.server.language.sw', defaultMessage: 'Swahili' }),
-	{ code: 'ta', name: 'Tamil' },
+	ta: defineMessage({ id: 'project.server.language.ta', defaultMessage: 'Tamil' }),
-	{ code: 'te', name: 'Telugu' },
+	te: defineMessage({ id: 'project.server.language.te', defaultMessage: 'Telugu' }),
-	{ code: 'uz', name: 'Uzbek' },
+	uz: defineMessage({ id: 'project.server.language.uz', defaultMessage: 'Uzbek' }),
-	{ code: 'yo', name: 'Yoruba' },
+	yo: defineMessage({ id: 'project.server.language.yo', defaultMessage: 'Yoruba' }),
-	{ code: 'zu', name: 'Zulu' },
+	zu: defineMessage({ id: 'project.server.language.zu', defaultMessage: 'Zulu' }),
-]
+}
 
 export const SERVER_SORT_TYPES: SortType[] = [
 	{ display: 'Relevance', name: 'relevance' },
@@ -123,7 +131,10 @@ export function useServerSearch(opts: {
 }) {
 	const { tags, query, maxResults, currentPage } = opts
 
-	const { formatMessage } = useVIntl()
+	const { formatMessage, locale } = useVIntl()
+	const formatCategoryName = (categoryName: string) => {
+		return formatCategory(formatMessage, categoryName)
+	}
 
 	const route = useRoute()
 
@@ -133,8 +144,8 @@ export function useServerSearch(opts: {
 
 	const serverFilterTypes = computed<FilterType[]>(() => {
 		const categoryFilters: Record<string, FilterType> = {}
-		for (const c of (tags.value?.categories ?? []).filter(
+		for (const c of sortedCategories(tags.value, formatCategoryName, locale.value).filter(
-			(c) => c.project_type === 'minecraft_java_server',
+			(c: Labrinth.Tags.v2.Category) => c.project_type === 'minecraft_java_server',
 		)) {
 			const filterTypeId = `server_category_${c.header}`
 			if (!categoryFilters[filterTypeId]) {
@@ -158,27 +169,64 @@ export function useServerSearch(opts: {
 			})
 		}
 
-		const featuresFilter = categoryFilters['server_category_minecraft_server_features']
+		const sortedRegions = Object.entries(SERVER_REGIONS).sort(([_, a], [__, b]) => {
-		if (featuresFilter) {
+			const aFormatted = formatMessage(a)
-			featuresFilter.options.sort((a, b) => {
+			const bFormatted = formatMessage(b)
-				if (a.id === 'pokemon') return -1
+			return aFormatted.localeCompare(bFormatted, locale.value)
-				if (b.id === 'pokemon') return 1
+		})
-				return 0
+
-			})
+		const localeDefinition = LOCALES.find((l) => l.code === locale.value)
-		}
+		const userLanguageCode =
+			localeDefinition?.serverLanguageCode ?? locale.value.substring(0, locale.value.indexOf('-'))
+		const sortedLanguages = Object.entries(SERVER_LANGUAGES).sort(([aCode, a], [bCode, b]) => {
+			if (aCode === 'en') return -1
+			if (bCode === 'en') return 1
+
+			if (aCode === userLanguageCode) return -1
+			if (bCode === userLanguageCode) return 1
+
+			const aFormatted = formatMessage(a)
+			const bFormatted = formatMessage(b)
+			return aFormatted.localeCompare(bFormatted, locale.value)
+		})
 
 		return [
 			{
 				id: 'server_content_type',
-				formatted_name: 'Type',
+				formatted_name: formatMessage(
+					defineMessage({
+						id: 'search.filter_type.server_content_type',
+						defaultMessage: 'Type',
+					}),
+				),
 				supported_project_types: ['server'],
 				display: 'all',
 				query_param: 'sct',
 				supports_negative_filter: false,
 				searchable: false,
 				options: [
-					{ id: 'vanilla', formatted_name: 'Vanilla', method: 'or', value: 'vanilla' },
+					{
-					{ id: 'modpack', formatted_name: 'Modded', method: 'or', value: 'modpack' },
+						id: 'vanilla',
+						formatted_name: formatMessage(
+							defineMessage({
+								id: 'search.server_content_type.vanilla',
+								defaultMessage: 'Vanilla',
+							}),
+						),
+						method: 'or',
+						value: 'vanilla',
+					},
+					{
+						id: 'modpack',
+						formatted_name: formatMessage(
+							defineMessage({
+								id: 'search.server_content_type.modpack',
+								defaultMessage: 'Modded',
+							}),
+						),
+						method: 'or',
+						value: 'modpack',
+					},
 				],
 			},
 			...[
@@ -191,7 +239,12 @@ export function useServerSearch(opts: {
 				.filter(Boolean),
 			{
 				id: 'server_game_version',
-				formatted_name: 'Game Version',
+				formatted_name: formatMessage(
+					defineMessage({
+						id: 'search.filter_type.game_version',
+						defaultMessage: 'Game version',
+					}),
+				),
 				supported_project_types: ['server'],
 				display: 'scrollable',
 				query_param: 'sgv',
@@ -207,45 +260,81 @@ export function useServerSearch(opts: {
 			},
 			{
 				id: 'server_region',
-				formatted_name: 'Region',
+				formatted_name: formatMessage(
+					defineMessage({
+						id: 'search.filter_type.server_region',
+						defaultMessage: 'Region',
+					}),
+				),
 				supported_project_types: ['server'],
 				display: 'all',
 				query_param: 'sr',
 				supports_negative_filter: true,
 				searchable: false,
-				options: SERVER_REGIONS.map((r) => ({
+				options: sortedRegions.map(([code, name]) => ({
-					id: r.code,
+					id: code,
-					formatted_name: r.name,
+					formatted_name: formatMessage(name),
 					method: 'or' as const,
-					value: r.code,
+					value: code,
 				})),
 			},
 			{
 				id: 'server_language',
-				formatted_name: 'Language',
+				formatted_name: formatMessage(
+					defineMessage({
+						id: 'search.filter_type.server_language',
+						defaultMessage: 'Language',
+					}),
+				),
 				supported_project_types: ['server'],
 				display: 'scrollable',
 				query_param: 'sl',
 				supports_negative_filter: false,
 				searchable: true,
-				options: SERVER_LANGUAGES.map((l) => ({
+				options: sortedLanguages.map(([code, name]) => ({
-					id: l.code,
+					id: code,
-					formatted_name: l.name,
+					formatted_name: formatMessage(name),
+					icon: code === 'en' ? GlobeIcon : code === userLanguageCode ? UserIcon : undefined,
 					method: 'or' as const,
-					value: l.code,
+					value: code,
 				})),
 			},
 			{
 				id: 'server_status',
-				formatted_name: 'Status',
+				formatted_name: formatMessage(
+					defineMessage({
+						id: 'search.filter_type.server_status',
+						defaultMessage: 'Status',
+					}),
+				),
 				supported_project_types: ['server'],
 				display: 'all',
 				query_param: 'sst',
 				supports_negative_filter: false,
 				searchable: false,
 				options: [
-					{ id: 'online', formatted_name: 'Online', method: 'or', value: 'online' },
+					{
-					{ id: 'offline', formatted_name: 'Offline', method: 'or', value: 'offline' },
+						id: 'online',
+						formatted_name: formatMessage(
+							defineMessage({
+								id: 'project.server.status.online',
+								defaultMessage: 'Online',
+							}),
+						),
+						method: 'or',
+						value: 'online',
+					},
+					{
+						id: 'offline',
+						formatted_name: formatMessage(
+							defineMessage({
+								id: 'project.server.status.offline',
+								defaultMessage: 'Offline',
+							}),
+						),
+						method: 'or',
+						value: 'offline',
+					},
 				],
 			},
 		]

packages/ui/src/utils/tag-messages.ts

@@ -324,7 +324,7 @@ export const categoryMessages = defineMessages({
 	},
 	kitpvp: {
 		id: 'tag.category.kitpvp',
-		defaultMessage: 'Kit PVP',
+		defaultMessage: 'Kit PvP',
 	},
 	library: {
 		id: 'tag.category.library',
@@ -436,7 +436,7 @@ export const categoryMessages = defineMessages({
 	},
 	pokemon: {
 		id: 'tag.category.pokemon',
-		defaultMessage: 'Pokemon',
+		defaultMessage: 'Pokémon',
 	},
 	potato: {
 		id: 'tag.category.potato',
@@ -448,11 +448,11 @@ export const categoryMessages = defineMessages({
 	},
 	pve: {
 		id: 'tag.category.pve',
-		defaultMessage: 'PVE',
+		defaultMessage: 'PvE',
 	},
 	pvp: {
 		id: 'tag.category.pvp',
-		defaultMessage: 'PVP',
+		defaultMessage: 'PvP',
 	},
 	questing: {
 		id: 'tag.category.questing',

packages/utils/utils.ts

@@ -69,16 +69,14 @@ const SERVER_HEADER_ORDER = [
 
 export const sortedCategories = (tags, formatCategoryName, locale) => {
 	return tags.categories.slice().sort((a, b) => {
-		const aServerIdx = SERVER_HEADER_ORDER.indexOf(a.header)
-		const bServerIdx = SERVER_HEADER_ORDER.indexOf(b.header)
-		if (aServerIdx !== -1 || bServerIdx !== -1) {
-			return (
-				(aServerIdx === -1 ? Infinity : aServerIdx) - (bServerIdx === -1 ? Infinity : bServerIdx)
-			)
-		}
-
 		const headerCompare = a.header.localeCompare(b.header)
 		if (headerCompare !== 0) {
+			const aServerIdx = SERVER_HEADER_ORDER.indexOf(a.header)
+			const bServerIdx = SERVER_HEADER_ORDER.indexOf(b.header)
+			if (aServerIdx !== -1 && bServerIdx !== -1) {
+				return aServerIdx - bServerIdx
+			}
+
 			return headerCompare
 		}
 
@@ -87,6 +85,9 @@ export const sortedCategories = (tags, formatCategoryName, locale) => {
 			return x.indexOf(a.name) - x.indexOf(b.name)
 		}
 
+		if (a.name === 'pokemon') return -1
+		if (b.name === 'pokemon') return 1
+
 		const aFormatted = formatCategoryName(a.name)
 		const bFormatted = formatCategoryName(b.name)
 		return aFormatted.localeCompare(bFormatted, locale, { numeric: true })