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/servers/ServerListing.vue

@@ -122,9 +122,9 @@ import {
 	TriangleAlertIcon,
 } from '@modrinth/assets'
 import { useQuery } from '@tanstack/vue-query'
-import dayjs from 'dayjs'
 import { computed } from 'vue'
 
+import { useFormatDateTime } from '../../composables'
 import { injectModrinthClient } from '../../providers/api-client'
 import Avatar from '../base/Avatar.vue'
 import CopyCode from '../base/CopyCode.vue'
@@ -132,6 +132,8 @@ import ServersSpecs from '../billing/ServersSpecs.vue'
 import ServerIcon from './icons/ServerIcon.vue'
 import ServerInfoLabels from './labels/ServerInfoLabels.vue'
 
+const formatDate = useFormatDateTime({ dateStyle: 'long' })
+
 export type PendingChange = {
 	planSize: string
 	cpu: number
@@ -249,12 +251,4 @@ const { data: image } = useQuery({
 })
 
 const isConfiguring = computed(() => props.flows?.intro)
-
-const formatDate = (d: unknown) => {
-	try {
-		return dayjs(d as string).format('MMMM D, YYYY')
-	} catch {
-		return ''
-	}
-}
 </script>

packages/ui/src/components/servers/backups/BackupItem.vue

@@ -10,9 +10,9 @@ import {
 	UserRoundIcon,
 	XIcon,
 } from '@modrinth/assets'
-import dayjs from 'dayjs'
 import { computed } from 'vue'
 
+import { useFormatDateTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { commonMessages } from '../../../utils'
 import ButtonStyled from '../../base/ButtonStyled.vue'
@@ -20,6 +20,10 @@ import OverflowMenu, { type Option as OverflowOption } from '../../base/Overflow
 import ProgressBar from '../../base/ProgressBar.vue'
 
 const { formatMessage } = useVIntl()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const emit = defineEmits<{
 	(e: 'download' | 'rename' | 'restore' | 'retry'): void
@@ -254,7 +258,7 @@ const messages = defineMessages({
 			</template>
 			<template v-else>
 				<span class="w-full font-medium text-contrast md:text-center">
-					{{ dayjs(backup.created_at).format('MMMM Do YYYY, h:mm A') }}
+					{{ formatDateTime(backup.created_at) }}
 				</span>
 				<!-- TODO: Uncomment when API supports size field -->
 				<!-- <span class="text-secondary">{{ formatBytes(backup.size) }}</span> -->

packages/ui/src/components/servers/files/explorer/FileItem.vue

@@ -81,6 +81,7 @@ import {
 	getFileExtensionIcon,
 	isEditableFile as isEditableFileExt,
 	isImageFile,
+	useFormatDateTime,
 } from '@modrinth/ui'
 import { computed, ref, shallowRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -123,6 +124,14 @@ const units = Object.freeze(['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'])
 const route = shallowRef(useRoute())
 const router = useRouter()
 
+const formatDateTime = useFormatDateTime({
+	year: '2-digit',
+	month: '2-digit',
+	day: '2-digit',
+	hour: 'numeric',
+	minute: 'numeric',
+})
+
 const containerClasses = computed(() => [
 	'group m-0 flex w-full select-none items-center justify-between overflow-hidden border-0 border-t border-solid border-surface-3 px-4 py-3 focus:!outline-none',
 	props.selected ? 'bg-surface-3' : props.index % 2 === 0 ? 'bg-surface-2' : 'file-row-alt',
@@ -179,28 +188,12 @@ const iconComponent = computed(() => {
 
 const formattedModifiedDate = computed(() => {
 	const date = new Date(props.modified * 1000)
-	return `${date.toLocaleDateString('en-US', {
-		month: '2-digit',
-		day: '2-digit',
-		year: '2-digit',
-	})}, ${date.toLocaleTimeString('en-US', {
-		hour: 'numeric',
-		minute: 'numeric',
-		hour12: true,
-	})}`
+	return formatDateTime(date)
 })
 
 const formattedCreationDate = computed(() => {
 	const date = new Date(props.created * 1000)
-	return `${date.toLocaleDateString('en-US', {
-		month: '2-digit',
-		day: '2-digit',
-		year: '2-digit',
-	})}, ${date.toLocaleTimeString('en-US', {
-		hour: 'numeric',
-		minute: 'numeric',
-		hour12: true,
-	})}`
+	return formatDateTime(date)
 })
 
 const isEditableFile = computed(() => {