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/frontend/src/pages/collection/[id].vue

@@ -180,9 +180,11 @@
 										count: formatCompactNumber(projects?.length || 0),
 										type: formatMessage(
 											commonProjectTypeSentenceMessages[
-												projectTypes.length === 1 ? projectTypes[0] : 'project'
+												projectTypes.length === 1 && projects?.length > 1
+													? projectTypes[0]
+													: 'project'
 											],
-											{ count: projects?.length || 0 },
+											{ count: formatCompactNumberPlural(projects?.length || 0) },
 										),
 									}"
 								>
@@ -247,7 +249,7 @@
 			>
 				<div class="flex flex-col gap-2">
 					<span
-						v-tooltip="dayjs(collection.created).format('MMMM D, YYYY [at] h:mm A')"
+						v-tooltip="formatDateTime(collection.created)"
 						class="flex w-fit items-center gap-2"
 					>
 						<CalendarIcon aria-hidden="true" />
@@ -259,7 +261,7 @@
 					</span>
 					<span
 						v-if="showUpdatedDate"
-						v-tooltip="dayjs(collection.updated).format('MMMM D, YYYY [at] h:mm A')"
+						v-tooltip="formatDateTime(collection.updated)"
 						class="flex w-fit items-center gap-2"
 					>
 						<UpdatedIcon aria-hidden="true" />
@@ -410,6 +412,8 @@ import {
 	RadioButtons,
 	SidebarCard,
 	StyledInput,
+	useCompactNumber,
+	useFormatDateTime,
 	useRelativeTime,
 	useSavable,
 	useVIntl,
@@ -425,7 +429,11 @@ const { handleError } = injectNotificationManager()
 const api = injectModrinthClient()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
-const formatCompactNumber = useCompactNumber()
+const { formatCompactNumber, formatCompactNumberPlural } = useCompactNumber()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const route = useNativeRoute()
 const router = useRouter()
@@ -491,8 +499,7 @@ const messages = defineMessages({
 	},
 	projectsCountLabel: {
 		id: 'collection.label.projects-count',
-		defaultMessage:
-			'{count, plural, =0 {No projects yet} one {<stat>{count}</stat> project} other {<stat>{count}</stat> {type}}}',
+		defaultMessage: '{count, plural, =0 {No projects yet} other {<stat>{count}</stat> {type}}}',
 	},
 	removeProjectButton: {
 		id: 'collection.button.remove-project',