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/ProjectHeader.vue

@@ -27,20 +27,20 @@
 						v-tooltip="
 							capitalizeString(
 								formatMessage(commonMessages.projectDownloads, {
-									count: formatNumber(project.downloads, false),
+									count: project.downloads,
 								}),
 							)
 						"
 						class="flex items-center gap-2 font-semibold cursor-help"
 					>
 						<DownloadIcon class="h-6 w-6 text-secondary" />
-						{{ formatNumber(project.downloads) }}
+						{{ formatCompactNumber(project.downloads) }}
 					</div>
 					<div
 						v-tooltip="
 							capitalizeString(
 								formatMessage(commonMessages.projectFollowers, {
-									count: formatNumber(project.followers, false),
+									count: project.followers,
 								}),
 							)
 						"
@@ -49,7 +49,7 @@
 					>
 						<HeartIcon class="h-6 w-6 text-secondary" />
 						<span class="font-semibold">
-							{{ formatNumber(project.followers) }}
+							{{ formatCompactNumber(project.followers) }}
 						</span>
 					</div>
 				</template>
@@ -74,11 +74,11 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { DownloadIcon, HeartIcon } from '@modrinth/assets'
-import { capitalizeString, formatNumber, type Project } from '@modrinth/utils'
+import { capitalizeString, type Project } from '@modrinth/utils'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { useVIntl } from '../../composables'
+import { useCompactNumber, useVIntl } from '../../composables'
 import { commonMessages } from '../../utils'
 import Avatar from '../base/Avatar.vue'
 import ContentPageHeader from '../base/ContentPageHeader.vue'
@@ -89,6 +89,7 @@ import ServerDetails from './server/ServerDetails.vue'
 
 const router = useRouter()
 const { formatMessage } = useVIntl()
+const { formatCompactNumber } = useCompactNumber()
 
 const props = withDefaults(
 	defineProps<{

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

@@ -171,12 +171,7 @@
 							class="flex flex-col justify-center gap-1 max-sm:flex-row max-sm:justify-start max-sm:gap-3 xl:contents"
 						>
 							<div
-								v-tooltip="
-									formatMessage(commonMessages.dateAtTimeTooltip, {
-										date: new Date(version.date_published),
-										time: new Date(version.date_published),
-									})
-								"
+								v-tooltip="formatDateTime(version.date_published)"
 								class="z-[1] flex cursor-help items-center gap-1 text-nowrap font-medium xl:self-center"
 							>
 								<CalendarIcon class="xl:hidden" />
@@ -186,7 +181,7 @@
 								class="pointer-events-none z-[1] flex items-center gap-1 font-medium xl:self-center"
 							>
 								<DownloadIcon class="xl:hidden" />
-								{{ formatNumber(version.downloads) }}
+								{{ formatCompactNumber(version.downloads) }}
 							</div>
 						</div>
 					</div>
@@ -227,12 +222,13 @@ import {
 	FormattedTag,
 	Pagination,
 	TagItem,
+	useCompactNumber,
+	useFormatDateTime,
 	VersionChannelIndicator,
 	VersionFilterControl,
 } from '@modrinth/ui'
 import {
 	formatBytes,
-	formatNumber,
 	formatVersionsForDisplay,
 	type GameVersionTag,
 	type Version,
@@ -242,11 +238,15 @@ import { useRoute, useRouter } from 'vue-router'
 
 import { useRelativeTime } from '../../composables'
 import { useVIntl } from '../../composables/i18n'
-import { commonMessages } from '../../utils/common-messages'
 import { getEnvironmentTags } from './settings/environment/environments'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const { formatCompactNumber } = useCompactNumber()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 type VersionWithDisplayUrlEnding = Version & {
 	displayUrlEnding: string

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

@@ -36,10 +36,7 @@
 					{{ formatMessage(commonMessages.projectFollowers, { count: project.followers }) }}
 				</div>
 			</div>
-			<div
-				v-if="project.approved"
-				v-tooltip="dayjs(project.approved).format('MMMM D, YYYY [at] h:mm A')"
-			>
+			<div v-if="project.approved" v-tooltip="formatDateTime(project.approved)">
 				<CalendarIcon aria-hidden="true" />
 				<div>
 					{{
@@ -49,7 +46,7 @@
 					}}
 				</div>
 			</div>
-			<div v-else v-tooltip="dayjs(project.published).format('MMMM D, YYYY [at] h:mm A')">
+			<div v-else v-tooltip="formatDateTime(project.published)">
 				<CalendarIcon aria-hidden="true" />
 				<div>
 					{{
@@ -59,7 +56,7 @@
 			</div>
 			<div
 				v-if="project.status === 'processing' && project.queued"
-				v-tooltip="dayjs(project.queued).format('MMMM D, YYYY [at] h:mm A')"
+				v-tooltip="formatDateTime(project.queued)"
 			>
 				<ScaleIcon aria-hidden="true" />
 				<div>
@@ -70,10 +67,7 @@
 					}}
 				</div>
 			</div>
-			<div
-				v-if="hasVersions && project.updated"
-				v-tooltip="dayjs(project.updated).format('MMMM D, YYYY [at] h:mm A')"
-			>
+			<div v-if="hasVersions && project.updated" v-tooltip="formatDateTime(project.updated)">
 				<VersionIcon aria-hidden="true" />
 				<div>
 					{{
@@ -95,16 +89,19 @@ import {
 	VersionIcon,
 } from '@modrinth/assets'
 import { capitalizeString } from '@modrinth/utils'
-import dayjs from 'dayjs'
 import { computed } from 'vue'
 
-import { useRelativeTime } from '../../composables'
+import { useFormatDateTime, useRelativeTime } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
 import { IntlFormatted } from '../base'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const props = defineProps<{
 	project: Labrinth.Projects.v2.Project

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

@@ -1,36 +1,39 @@
 <script setup lang="ts">
 import { CalendarIcon, HistoryIcon } from '@modrinth/assets'
 import { capitalizeString } from '@modrinth/utils'
-import dayjs from 'dayjs'
 import { computed } from 'vue'
 
-import { useRelativeTime, useVIntl } from '../../../composables'
+import { defineMessage, useFormatDateTime, useRelativeTime, useVIntl } from '../../../composables'
 
 const { formatMessage } = useVIntl()
 
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const props = defineProps<{
 	date: Date
 	type: 'updated' | 'published'
 }>()
 
-const formattedDate = computed(() => dayjs(props.date).format('MMMM D, YYYY [at] h:mm A'))
+const formattedDate = computed(() => formatDateTime(props.date))
 
 const types = {
 	updated: {
 		icon: HistoryIcon,
-		tooltip: {
+		tooltip: defineMessage({
 			id: 'project-card.date.updated.tooltip',
 			defaultMessage: 'Updated {date}',
-		},
+		}),
 	},
 	published: {
 		icon: CalendarIcon,
-		tooltip: {
+		tooltip: defineMessage({
 			id: 'project-card.date.published.tooltip',
 			defaultMessage: 'Published {date}',
-		},
+		}),
 	},
 }
 

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

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { DownloadIcon, HeartIcon } from '@modrinth/assets'
 
-import { capitalizeString, formatNumber } from '../../../../../utils'
-import { useVIntl } from '../../../composables'
+import { capitalizeString } from '../../../../../utils'
+import { useCompactNumber, useVIntl } from '../../../composables'
 import { commonMessages } from '../../../utils'
 
 const { formatMessage } = useVIntl()
+const { formatCompactNumber } = useCompactNumber()
 
 defineProps<{
 	downloads?: number
@@ -19,7 +20,7 @@ defineProps<{
 		v-tooltip="
 			capitalizeString(
 				formatMessage(commonMessages.projectDownloads, {
-					count: formatNumber(downloads, false),
+					count: downloads,
 				}),
 			)
 		"
@@ -27,7 +28,7 @@ defineProps<{
 	>
 		<DownloadIcon class="size-5 shrink-0" />
 		<span class="font-medium">
-			{{ formatNumber(downloads) }}
+			{{ formatCompactNumber(downloads) }}
 		</span>
 	</div>
 	<div
@@ -35,7 +36,7 @@ defineProps<{
 		v-tooltip="
 			capitalizeString(
 				formatMessage(commonMessages.projectFollowers, {
-					count: formatNumber(followers, false),
+					count: followers,
 				}),
 			)
 		"
@@ -43,7 +44,7 @@ defineProps<{
 	>
 		<HeartIcon class="size-5 shrink-0" />
 		<span class="font-medium">
-			{{ formatNumber(followers) }}
+			{{ formatCompactNumber(followers) }}
 		</span>
 	</div>
 </template>

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>