Sort filters and add translations for servers

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

@@ -170,13 +170,16 @@ import {
 	SERVER_REGIONS,
 	StyledInput,
 	UnsavedChangesPopup,
+	useVIntl,
 } from '@modrinth/ui'
 import { Multiselect } from 'vue-multiselect'
 
 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()
@@ -264,15 +267,31 @@ if (projectV3.value) {
 	)
 }
 
-const regionOptions = SERVER_REGIONS.map((region) => ({
-	value: region.code,
-	label: region.name,
-}))
-
-const languageOptions = SERVER_LANGUAGES.map((language) => ({
-	value: language.code,
-	label: language.name,
-}))
+const regionOptions = computed(() =>
+	Object.entries(SERVER_REGIONS)
+		.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 = computed(() =>
+	Object.entries(SERVER_LANGUAGES)
+		.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/instances/modals/ModpackContentModal.vue

@@ -68,10 +68,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/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,64 +174,42 @@ 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`,
 		defaultMessage: 'Copied!',
 	},
 	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: {
-		id: `project.about.server.latency`,
-		defaultMessage: 'Latency',
+	addressTooltip: {
+		id: `project.about.server.address.tooltip`,
+		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>