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/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>