Tweak search sorting (#5464)

* Tweak search sorting

* Tweak search sorting

* fix ping impl

* remove port field, add server regions

* fix compile

* fix tests

* update frontend banner upload size limit

* feat: use server project region instead of country

* remove java and bedrock port in frontend

* add helper text

* allow filtering by if server is online

* add server status online offline filter

* use region in instance

* pre-collapse status in app discovery

* pnpm prepr

* remove server discovery flag

* add servers into mobile nav tabs

* parse port from address if present

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>

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

@@ -55,10 +55,10 @@
 				</TagItem>
 			</div>
 		</section>
-		<section v-if="props.ping !== undefined || country" class="flex flex-col gap-2">
-			<h3 class="text-primary text-base m-0">Country</h3>
+		<section v-if="props.ping !== undefined || region" class="flex flex-col gap-2">
+			<h3 class="text-primary text-base m-0">Region</h3>
 			<div class="flex flex-wrap gap-1.5 items-center">
-				<ServerRegion v-if="country" :region="country" />
+				<ServerRegion v-if="region" :region="region" />
 				<ServerPing :ping="props.ping" :status-online="props.statusOnline" />
 			</div>
 		</section>
@@ -120,7 +120,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const ipAddress = computed(() => props.projectV3?.minecraft_java_server?.address ?? '')
 const languages = computed(() => props.projectV3?.minecraft_server?.languages ?? [])
-const country = computed(() => props.projectV3?.minecraft_server?.country)
+const region = computed(() => props.projectV3?.minecraft_server?.region)
 
 const recommendedVersions = computed(() => {
 	if (props.recommendedVersion) return [props.recommendedVersion]

packages/ui/src/components/project/card/ProjectCard.vue

@@ -51,7 +51,7 @@
 					<div class="flex items-center gap-1 flex-wrap overflow-hidden">
 						<ServerDetails
 							v-if="isServerProject"
-							:region="serverRegionCode"
+							:region="serverRegion"
 							:online-players="serverOnlinePlayers"
 							:recent-plays="serverRecentPlays"
 							:ping="serverPing"
@@ -136,7 +136,7 @@
 				<div class="flex items-center gap-2 w-full">
 					<ServerDetails
 						v-if="isServerProject"
-						:region="serverRegionCode"
+						:region="serverRegion"
 						:online-players="serverOnlinePlayers"
 						:status-online="serverStatusOnline"
 						:recent-plays="serverRecentPlays"
@@ -216,7 +216,7 @@ const props = defineProps<{
 	dateUpdated?: string
 	datePublished?: string
 	displayedDate?: 'updated' | 'published'
-	serverRegionCode?: string
+	serverRegion?: string
 	serverOnlinePlayers?: number
 	serverStatusOnline?: boolean
 	serverRecentPlays?: number

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

@@ -1,26 +1,25 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { defineMessage, useVIntl } from '../../../composables'
+import { TagItem } from '../../base'
 
 const { region } = defineProps<{
 	region: string
 }>()
 
-const { formatMessage } = useVIntl()
+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 alt = defineMessage({
-	id: 'project.server.region.alt',
-	defaultMessage: 'Region: {regionCode}',
-})
-
-const regionLower = computed(() => region.toLowerCase())
+const regionName = computed(() => regionNames[region] ?? region)
 </script>
 <template>
-	<img
-		v-tooltip="`Server hosted in ${region}`"
-		:src="`https://flagcdn.com/${regionLower}.svg`"
-		:alt="formatMessage(alt, { regionCode: regionLower })"
-		class="h-4 aspect-[3/2] border-[1px] border-surface-5 border-solid shrink-0 rounded-[3px] object-cover smart-clickable:allow-pointer-events"
-	/>
+	<TagItem>{{ regionName }}</TagItem>
 </template>