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>

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

@@ -992,9 +992,6 @@
   "project.server.ping.ms": {
     "defaultMessage": "{ping} ms"
   },
-  "project.server.region.alt": {
-    "defaultMessage": "Region: {regionCode}"
-  },
   "project.settings.analytics.title": {
     "defaultMessage": "Analytics"
   },

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

@@ -55,25 +55,15 @@ const SERVER_CATEGORY_ICON_MAP: Record<string, string> = {
 	'world-resets': 'refresh-ccw',
 }
 
-export const SERVER_COUNTRIES = [
-	{ code: 'US', name: 'United States' },
-	{ code: 'GB', name: 'United Kingdom' },
-	{ code: 'DE', name: 'Germany' },
-	{ code: 'FR', name: 'France' },
-	{ code: 'NL', name: 'Netherlands' },
-	{ code: 'PL', name: 'Poland' },
-	{ code: 'RU', name: 'Russia' },
-	{ code: 'BR', name: 'Brazil' },
-	{ code: 'CA', name: 'Canada' },
-	{ code: 'AU', name: 'Australia' },
-	{ code: 'SE', name: 'Sweden' },
-	{ code: 'FI', name: 'Finland' },
-	{ code: 'SG', name: 'Singapore' },
-	{ code: 'JP', name: 'Japan' },
-	{ code: 'KR', name: 'South Korea' },
-	{ code: 'TR', name: 'Turkey' },
-	{ code: 'IN', name: 'India' },
-	{ code: 'ZA', name: 'South Africa' },
+export const SERVER_REGIONS = [
+	{ code: 'us_east', name: 'US East' },
+	{ code: 'us_west', name: 'US West' },
+	{ code: 'europe', name: 'Europe' },
+	{ code: 'asia', name: 'Asia' },
+	{ code: 'australia', name: 'Australia' },
+	{ code: 'south_america', name: 'South America' },
+	{ code: 'middle_east', name: 'Middle East' },
+	{ code: 'russia', name: 'Russia' },
 ]
 
 export const SERVER_LANGUAGES = [
@@ -106,7 +96,8 @@ export const SERVER_SORT_TYPES: SortType[] = [
 const FILTER_FIELD_MAP: Record<string, string> = {
 	server_content_type: 'minecraft_java_server.content.kind',
 	server_game_version: 'minecraft_java_server.content.supported_game_versions',
-	server_country: 'minecraft_server.country',
+	server_status: 'minecraft_java_server.ping.data',
+	server_region: 'minecraft_server.region',
 	server_language: 'minecraft_server.languages',
 }
 
@@ -128,7 +119,7 @@ export function useServerSearch(opts: {
 	const route = useRoute()
 
 	const serverCurrentSortType = ref<SortType>(SERVER_SORT_TYPES[0])
-	const serverCurrentFilters = ref<FilterValue[]>([])
+	const serverCurrentFilters = ref<FilterValue[]>([{ type: 'server_status', option: 'online' }])
 	const serverToggledGroups = ref<string[]>([])
 
 	const serverFilterTypes = computed<FilterType[]>(() => {
@@ -206,18 +197,18 @@ export function useServerSearch(opts: {
 				})),
 			},
 			{
-				id: 'server_country',
-				formatted_name: 'Country',
+				id: 'server_region',
+				formatted_name: 'Region',
 				supported_project_types: ['server'],
-				display: 'scrollable',
-				query_param: 'sco',
+				display: 'all',
+				query_param: 'sr',
 				supports_negative_filter: true,
-				searchable: true,
-				options: SERVER_COUNTRIES.map((c) => ({
-					id: c.code,
-					formatted_name: c.name,
+				searchable: false,
+				options: SERVER_REGIONS.map((r) => ({
+					id: r.code,
+					formatted_name: r.name,
 					method: 'or' as const,
-					value: c.code,
+					value: r.code,
 				})),
 			},
 			{
@@ -235,6 +226,19 @@ export function useServerSearch(opts: {
 					value: l.code,
 				})),
 			},
+			{
+				id: 'server_status',
+				formatted_name: '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' },
+				],
+			},
 		]
 	})
 
@@ -245,6 +249,18 @@ export function useServerSearch(opts: {
 			const field = getFilterField(filterType.id)
 			if (!field) continue
 			const matched = serverCurrentFilters.value.filter((f) => f.type === filterType.id)
+			if (matched.length === 0) continue
+
+			if (filterType.id === 'server_status') {
+				const selected = matched[0]?.option
+				if (selected === 'online') {
+					parts.push(`${field} EXISTS`)
+				} else if (selected === 'offline') {
+					parts.push(`${field} NOT EXISTS`)
+				}
+				continue
+			}
+
 			const included = matched.filter((f) => !f.negative)
 			const excluded = matched.filter((f) => f.negative)
 			if (included.length > 0) {