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>

apps/app-frontend/src/components/ui/LegacyProjectCard.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import { Avatar, FormattedTag, TagItem } from '@modrinth/ui'
-import { formatNumber } from '@modrinth/utils'
+import { Avatar, FormattedTag, TagItem, useCompactNumber } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed } from 'vue'
@@ -11,6 +10,8 @@ dayjs.extend(relativeTime)
 
 const router = useRouter()
 
+const { formatCompactNumber } = useCompactNumber()
+
 const props = defineProps({
 	project: {
 		type: Object,
@@ -96,13 +97,13 @@ const toTransparent = computed(() => {
 					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
 				>
 					<DownloadIcon />
-					{{ formatNumber(project.downloads) }}
+					{{ formatCompactNumber(project.downloads) }}
 				</div>
 				<div
 					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
 				>
 					<HeartIcon />
-					{{ formatNumber(project.follows) }}
+					{{ formatCompactNumber(project.follows) }}
 				</div>
 				<div class="flex items-center gap-1 pr-2">
 					<TagIcon />

apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue

@@ -14,7 +14,7 @@
 
 				<div v-if="diffs.length" class="flex flex-col gap-2">
 					<span v-if="publishedDate" class="text-contrast font-semibold">{{
-						formatMessage(messages.publishedDate, { date: publishedDate })
+						formatDate(publishedDate)
 					}}</span>
 					<div class="flex gap-2">
 						<div v-if="removedCount" class="flex gap-1 items-center">
@@ -136,6 +136,7 @@ import {
 	commonMessages,
 	defineMessages,
 	NewModal,
+	useFormatDateTime,
 	useVIntl,
 } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
@@ -186,6 +187,7 @@ type ProjectInfo = {
 }
 
 const { formatMessage } = useVIntl()
+const formatDate = useFormatDateTime({ dateStyle: 'long' })
 const installStore = useInstall()
 type UpdateCompleteCallback = () => void | Promise<void>
 
@@ -409,10 +411,6 @@ const messages = defineMessages({
 		defaultMessage:
 			'An update is required to play {name}. Please update to the latest version to launch the game.',
 	},
-	publishedDate: {
-		id: 'app.modal.update-to-play.published-date',
-		defaultMessage: '{date, date, long}',
-	},
 	removedCount: {
 		id: 'app.modal.update-to-play.removed-count',
 		defaultMessage: '{count} removed',

apps/app-frontend/src/components/ui/world/InstanceItem.vue

@@ -14,13 +14,13 @@ import {
 	injectNotificationManager,
 	OverflowMenu,
 	SmartClickable,
+	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import type { Dayjs } from 'dayjs'
-import dayjs from 'dayjs'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -36,6 +36,10 @@ import { handleSevereError } from '@/store/error'
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const router = useRouter()
 
@@ -145,11 +149,7 @@ onUnmounted(() => {
 				</div>
 				<div class="flex items-center gap-2 text-sm text-secondary">
 					<div
-						v-tooltip="
-							instance.last_played
-								? dayjs(instance.last_played).format('MMMM D, YYYY [at] h:mm A')
-								: null
-						"
+						v-tooltip="instance.last_played ? formatDateTime(instance.last_played) : null"
 						class="w-fit shrink-0"
 						:class="{ 'cursor-help smart-clickable:allow-pointer-events': last_played }"
 					>

apps/app-frontend/src/components/ui/world/WorldItem.vue

@@ -26,10 +26,12 @@ import {
 	OverflowMenu,
 	SmartClickable,
 	TagItem,
+	useFormatDateTime,
+	useFormatNumber,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatNumber, getPingLevel } from '@modrinth/utils'
+import { getPingLevel } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
@@ -51,6 +53,11 @@ import { LockIcon } from '../../../../../../packages/assets/generated-icons'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatNumber = useFormatNumber()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const router = useRouter()
 
@@ -258,7 +265,7 @@ const messages = defineMessages({
 								/>
 								<Tooltip :disabled="!hasPlayersTooltip">
 									<span :class="{ 'cursor-help': hasPlayersTooltip }">
-										{{ formatNumber(serverStatus.players?.online, false) }}
+										{{ formatNumber(serverStatus.players?.online) }}
 										online
 									</span>
 									<template #popper>
@@ -279,9 +286,7 @@ const messages = defineMessages({
 				</div>
 				<div class="flex items-center gap-2 text-sm text-secondary">
 					<div
-						v-tooltip="
-							world.last_played ? dayjs(world.last_played).format('MMMM D, YYYY [at] h:mm A') : null
-						"
+						v-tooltip="world.last_played ? formatDateTime(world.last_played) : null"
 						class="w-fit shrink-0"
 						:class="{
 							'cursor-help smart-clickable:allow-pointer-events': world.last_played,

apps/app-frontend/src/locales/en-US/index.json

@@ -47,9 +47,6 @@
   "app.modal.update-to-play.header": {
     "message": "Update to play"
   },
-  "app.modal.update-to-play.published-date": {
-    "message": "{date, date, long}"
-  },
   "app.modal.update-to-play.removed-count": {
     "message": "{count} removed"
   },

apps/app-frontend/src/pages/project/Gallery.vue

@@ -10,13 +10,7 @@
 			</div>
 			<span class="gallery-time">
 				<CalendarIcon />
-				{{
-					new Date(image.created).toLocaleDateString('en-US', {
-						year: 'numeric',
-						month: 'long',
-						day: 'numeric',
-					})
-				}}
+				{{ formatDate(new Date(image.created)) }}
 			</span>
 		</Card>
 	</div>
@@ -91,7 +85,7 @@ import {
 	RightArrowIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, Card } from '@modrinth/ui'
+import { Button, Card, useFormatDateTime } from '@modrinth/ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
@@ -99,6 +93,12 @@ import { trackEvent } from '@/helpers/analytics'
 
 const MC_SERVER_BANNER_NAME = '__mc_server_banner__'
 
+const formatDate = useFormatDateTime({
+	year: 'numeric',
+	month: 'long',
+	day: 'numeric',
+})
+
 const props = defineProps({
 	project: {
 		type: Object,

apps/app-frontend/src/pages/project/Version.vue

@@ -136,22 +136,7 @@
 					<div class="metadata-item">
 						<span class="metadata-label">Publication Date</span>
 						<span class="metadata-value">
-							{{
-								new Date(version.date_published).toLocaleString('en-US', {
-									month: 'long',
-									day: 'numeric',
-									year: 'numeric',
-								})
-							}}
-							at
-							{{
-								new Date(version.date_published).toLocaleString('en-US', {
-									hour: 'numeric',
-									minute: 'numeric',
-									second: 'numeric',
-									hour12: true,
-								})
-							}}
+							{{ formatDateTime(version.date_published) }}
 						</span>
 					</div>
 					<div v-if="author" class="metadata-item">
@@ -183,7 +168,7 @@
 
 <script setup>
 import { CheckIcon, DownloadIcon, ExternalIcon, FileIcon, ReportIcon } from '@modrinth/assets'
-import { Avatar, Badge, Breadcrumbs, Button, Card, CopyCode } from '@modrinth/ui'
+import { Avatar, Badge, Breadcrumbs, Button, Card, CopyCode, useFormatDateTime } from '@modrinth/ui'
 import { formatBytes, renderString } from '@modrinth/utils'
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
@@ -193,6 +178,11 @@ import { get_project_many, get_version_many } from '@/helpers/cache.js'
 import { releaseColor } from '@/helpers/utils'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
+
 const breadcrumbs = useBreadcrumbs()
 
 const route = useRoute()