Impove Intl formatting (#5372)

* Improve Intl formatting

* Additional fixes

* Fixed formatters were not updated on locale change

* Fixed formatNumber was not updated on locale change

* Additional formatting and fixes after merge

* Run prepr:frontend

* Remove `'` in icon map

* Run `pnpm install`

* fix: lint + import

* Additional fixes

---------

Co-authored-by: Calum H. <calum@modrinth.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { OnlineIndicatorIcon } from '@modrinth/assets'
 
-import { formatNumber } from '../../../../../utils'
-import { useVIntl } from '../../../composables'
+import { useCompactNumber, useFormatNumber, useVIntl } from '../../../composables'
 import { commonMessages } from '../../../utils'
 import { StatItem } from '../../base'
 
 const { formatMessage } = useVIntl()
+const { formatCompactNumber, formatCompactNumberPlural } = useCompactNumber()
+const formatNumber = useFormatNumber()
 
 defineProps<{
 	online: number
@@ -16,7 +17,12 @@ defineProps<{
 </script>
 <template>
 	<StatItem
-		v-tooltip="`${formatNumber(online, true)} players online`"
+		v-tooltip="
+			formatMessage(commonMessages.projectOnlinePlayerCountTooltip, {
+				count: formatCompactNumber(online),
+				countPlural: formatCompactNumberPlural(online),
+			})
+		"
 		class="smart-clickable:allow-pointer-events w-max"
 	>
 		<OnlineIndicatorIcon
@@ -29,10 +35,8 @@ defineProps<{
 		/>
 		{{
 			hideLabel
-				? formatNumber(online, false)
-				: formatMessage(commonMessages.projectOnlinePlayerCount, {
-						count: formatNumber(online, false),
-					})
+				? formatNumber(online)
+				: formatMessage(commonMessages.projectOnlinePlayerCount, { count: online })
 		}}
 	</StatItem>
 </template>

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

@@ -12,7 +12,7 @@ const props = defineProps<{
 
 const pingMessage = defineMessage({
 	id: 'project.server.ping.ms',
-	defaultMessage: '{ping} ms',
+	defaultMessage: '{ping, number} ms',
 })
 
 const { formatMessage } = useVIntl()

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { PlayIcon } from '@modrinth/assets'
 
-import { formatNumber } from '../../../../../utils'
-import { useVIntl } from '../../../composables'
+import { useCompactNumber, useVIntl } from '../../../composables'
 import { commonMessages } from '../../../utils'
 import { StatItem } from '../../base'
 
 const { formatMessage } = useVIntl()
+const { formatCompactNumber, formatCompactNumberPlural } = useCompactNumber()
 
 defineProps<{
 	recentPlays: number
@@ -16,16 +16,20 @@ defineProps<{
 <template>
 	<StatItem
 		v-tooltip="
-			`${formatNumber(recentPlays, true)} recent play${recentPlays === 1 ? '' : 's'} from Modrinth in the past 2 weeks`
+			formatMessage(commonMessages.projectRecentPlaysTooltip, {
+				count: formatCompactNumber(recentPlays),
+				countPlural: formatCompactNumberPlural(recentPlays),
+			})
 		"
 		class="smart-clickable:allow-pointer-events w-max"
 	>
 		<PlayIcon />
 		{{
 			hideLabel
-				? formatNumber(recentPlays, true)
+				? formatCompactNumber(recentPlays)
 				: formatMessage(commonMessages.projectRecentPlays, {
-						count: formatNumber(recentPlays, true),
+						count: formatCompactNumber(recentPlays),
+						countPlural: formatCompactNumberPlural(recentPlays),
 					})
 		}}
 	</StatItem>