Impove Intl formatting

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

@@ -25,10 +25,12 @@ import {
 	defineMessages,
 	OverflowMenu,
 	SmartClickable,
+	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'
@@ -48,6 +50,11 @@ import { getWorldIdentifier, set_world_display_status } from '@/helpers/worlds.t
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatNumber = useFormatNumber()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const router = useRouter()
 
@@ -239,7 +246,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>
@@ -260,9 +267,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/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,12 +85,18 @@ import {
 	RightArrowIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, Card } from '@modrinth/ui'
+import { Button, Card, useFormatDateTime } from '@modrinth/ui'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { trackEvent } from '@/helpers/analytics'
 
+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()

apps/frontend/src/components/ui/NotificationItem.vue

@@ -178,12 +178,7 @@
 							class="categories"
 						/>
 						{{ $formatVersion(notif.extra_data.version.game_versions) }}
-						<span
-							v-tooltip="
-								$dayjs(notif.extra_data.version.date_published).format('MMMM D, YYYY [at] h:mm A')
-							"
-							class="date"
-						>
+						<span v-tooltip="formatDateTime(notif.extra_data.version.date_published)" class="date">
 							{{ formatRelativeTime(notif.extra_data.version.date_published) }}
 						</span>
 					</span>
@@ -197,10 +192,7 @@
 			<span v-if="notification.read" class="read-badge inline-flex">
 				<CheckCircleIcon /> Read
 			</span>
-			<span
-				v-tooltip="$dayjs(notification.created).format('MMMM D, YYYY [at] h:mm A')"
-				class="inline-flex"
-			>
+			<span v-tooltip="formatDateTime(notification.created)" class="inline-flex">
 				<CalendarIcon class="mr-1" /> Received
 				{{ formatRelativeTime(notification.created) }}
 			</span>
@@ -338,6 +330,7 @@ import {
 	DoubleIcon,
 	injectNotificationManager,
 	ProjectStatusBadge,
+	useFormatDateTime,
 	useRelativeTime,
 } from '@modrinth/ui'
 import { getUserLink, renderString } from '@modrinth/utils'
@@ -351,6 +344,10 @@ import ThreadSummary from './thread/ThreadSummary.vue'
 const { addNotification } = injectNotificationManager()
 const emit = defineEmits(['update:notifications'])
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const props = defineProps({
 	notification: {

apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { FileTextIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
+import {ButtonStyled, defineMessages, PagewideBanner, useFormatMoney, useVIntl} from '@modrinth/ui'
 import { computed } from 'vue'
 
 import { getTaxThreshold } from '@/providers/creator-withdraw.ts'
 import CreatorTaxFormModal from '~/components/ui/dashboard/CreatorTaxFormModal.vue'
 import { useGeneratedState } from '~/composables/generated'
 
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
 
 const generatedState = useGeneratedState()
 const taxThreshold = computed(() => getTaxThreshold(generatedState.value?.taxComplianceThresholds))

apps/frontend/src/components/ui/charts/Chart.client.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { formatMoney, formatNumber } from '@modrinth/utils'
-import dayjs from 'dayjs'
+import { useFormatDateTime, useFormatMoney, useFormatNumber } from '@modrinth/ui'
 import VueApexCharts from 'vue3-apexcharts'
 
 const props = defineProps({
@@ -18,7 +17,6 @@ const props = defineProps({
 	},
 	formatLabels: {
 		type: Function,
-		default: (label) => dayjs(label).format('MMM D'),
 	},
 	colors: {
 		type: Array,
@@ -78,8 +76,15 @@ const props = defineProps({
 	},
 })
 
+const formatNumber = useFormatNumber()
+const formatMoney = useFormatMoney()
+const formatDate = useFormatDateTime({
+	month: 'short',
+	day: 'numeric',
+})
+
 function formatTooltipValue(value, props) {
-	return props.isMoney ? formatMoney(value, false) : formatNumber(value, false)
+	return props.isMoney ? formatMoney(value) : formatNumber(value)
 }
 
 function generateListEntry(value, index, _, w, props) {
@@ -99,7 +104,7 @@ function generateListEntry(value, index, _, w, props) {
 function generateTooltip({ series, seriesIndex, dataPointIndex, w }, props) {
 	const label = w.globals.lastXAxis.categories?.[dataPointIndex]
 
-	const formattedLabel = props.formatLabels(label)
+	const formattedLabel = props.formatLabels ? props.formatLabels(label) : formatDate(label)
 
 	let tooltip = `<div class="bar-tooltip">
     <div class="seperated-entry title">

apps/frontend/src/components/ui/charts/ChartDisplay.vue

@@ -21,7 +21,7 @@
 						ref="tinyDownloadChart"
 						:title="`Downloads`"
 						color="var(--color-brand)"
-						:value="formatNumber(analytics.formattedData.value.downloads.sum, false)"
+						:value="formatNumber(analytics.formattedData.value.downloads.sum)"
 						:data="analytics.formattedData.value.downloads.chart.sumData"
 						:labels="analytics.formattedData.value.downloads.chart.labels"
 						suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
@@ -40,7 +40,7 @@
 						ref="tinyViewChart"
 						:title="`Views`"
 						color="var(--color-blue)"
-						:value="formatNumber(analytics.formattedData.value.views.sum, false)"
+						:value="formatNumber(analytics.formattedData.value.views.sum)"
 						:data="analytics.formattedData.value.views.chart.sumData"
 						:labels="analytics.formattedData.value.views.chart.labels"
 						suffix="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>"
@@ -57,7 +57,7 @@
 						ref="tinyRevenueChart"
 						:title="`Revenue`"
 						color="var(--color-purple)"
-						:value="formatMoney(analytics.formattedData.value.revenue.sum, false)"
+						:value="formatMoney(analytics.formattedData.value.revenue.sum)"
 						:data="analytics.formattedData.value.revenue.chart.sumData"
 						:labels="analytics.formattedData.value.revenue.chart.labels"
 						is-money
@@ -221,7 +221,7 @@
 										><template v-if="name.toLowerCase() === 'xx' || !name">Other</template>
 										<template v-else>{{ countryCodeToName(name) }}</template>
 									</strong>
-									<span class="data-point">{{ formatNumber(count) }}</span>
+									<span class="data-point">{{ formatCompactNumber(count) }}</span>
 								</div>
 								<div
 									v-tooltip="
@@ -280,7 +280,7 @@
 										<template v-if="name.toLowerCase() === 'xx' || !name">Other</template>
 										<template v-else>{{ countryCodeToName(name) }}</template>
 									</strong>
-									<span class="data-point">{{ formatNumber(count) }}</span>
+									<span class="data-point">{{ formatCompactNumber(count) }}</span>
 								</div>
 								<div
 									v-tooltip="
@@ -310,8 +310,15 @@
 
 <script setup lang="ts">
 import { DownloadIcon, PaletteIcon, UpdatedIcon } from '@modrinth/assets'
-import { Button, Card, DropdownSelect } from '@modrinth/ui'
-import { capitalizeString, formatMoney, formatNumber } from '@modrinth/utils'
+import {
+	Button,
+	Card,
+	DropdownSelect,
+	useCompactNumber,
+	useFormatMoney,
+	useFormatNumber,
+} from '@modrinth/ui'
+import { capitalizeString } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 
@@ -325,6 +332,10 @@ import {
 	intToRgba,
 } from '~/utils/analytics.js'
 
+const formatNumber = useFormatNumber()
+const { formatCompactNumber } = useCompactNumber()
+const formatMoney = useFormatMoney()
+
 const router = useNativeRouter()
 const theme = useTheme()
 

apps/frontend/src/components/ui/dashboard/RevenueInputField.vue

@@ -55,9 +55,9 @@ import {
 	commonMessages,
 	formFieldPlaceholders,
 	StyledInput,
+	useFormatMoney,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
 import { computed, ref, watch } from 'vue'
 
 const props = withDefaults(
@@ -82,6 +82,7 @@ const emit = defineEmits<{
 }>()
 
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
 const amountInput = ref<InstanceType<typeof StyledInput> | null>(null)
 
 const safeMaxAmount = computed(() => {