fix: i18n string problems

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

@@ -244,7 +244,7 @@ const messages = defineMessages({
 					</TagItem>
 					<div
 						v-if="world.type === 'singleplayer'"
-						class="text-sm text-secondary flex items-center gap-1 font-semibold"
+						class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
 					>
 						<UserIcon
 							aria-hidden="true"

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

@@ -200,9 +200,6 @@
   "app.instance.modpack-already-installed.instance": {
     "message": "Instance"
   },
-  "app.instance.mods.content-type-project": {
-    "message": "project"
-  },
   "app.instance.mods.project-was-added": {
     "message": "\"{name}\" was added"
   },
@@ -218,6 +215,15 @@
   "app.instance.mods.successfully-uploaded": {
     "message": "Successfully uploaded"
   },
+  "app.instance.overview.time-played.hours": {
+    "message": "{count, plural, one {# hour} other {# hours}}"
+  },
+  "app.instance.overview.time-played.minutes": {
+    "message": "{count, plural, one {# minute} other {# minutes}}"
+  },
+  "app.instance.overview.time-played.seconds": {
+    "message": "{count, plural, one {# second} other {# seconds}}"
+  },
   "app.instance.worlds.add-server": {
     "message": "Add server"
   },

apps/app-frontend/src/pages/instance/Index.vue

@@ -288,13 +288,15 @@ import {
 	Avatar,
 	ButtonStyled,
 	ContentPageHeader,
+	defineMessages,
 	injectNotificationManager,
 	NavTabs,
 	OverflowMenu,
 	ServerOnlinePlayers,
 	ServerPing,
 	ServerRecentPlays,
 	ServerRegion,
+	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
@@ -321,6 +323,23 @@ import { injectServerInstall } from '@/providers/server-install'
 import { handleSevereError } from '@/store/error.js'
 import { useBreadcrumbs } from '@/store/state'
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	timePlayedHours: {
+		id: 'app.instance.overview.time-played.hours',
+		defaultMessage: '{count, plural, one {# hour} other {# hours}}',
+	},
+	timePlayedMinutes: {
+		id: 'app.instance.overview.time-played.minutes',
+		defaultMessage: '{count, plural, one {# minute} other {# minutes}}',
+	},
+	timePlayedSeconds: {
+		id: 'app.instance.overview.time-played.seconds',
+		defaultMessage: '{count, plural, one {# second} other {# seconds}}',
+	},
+})
+
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
@@ -649,16 +668,16 @@ const timePlayedHumanized = computed(() => {
 	const duration = dayjs.duration(timePlayed.value, 'seconds')
 	const hours = Math.floor(duration.asHours())
 	if (hours >= 1) {
-		return hours + ' hour' + (hours > 1 ? 's' : '')
+		return formatMessage(messages.timePlayedHours, { count: hours })
 	}
 
 	const minutes = Math.floor(duration.asMinutes())
 	if (minutes >= 1) {
-		return minutes + ' minute' + (minutes > 1 ? 's' : '')
+		return formatMessage(messages.timePlayedMinutes, { count: minutes })
 	}
 
 	const seconds = Math.floor(duration.asSeconds())
-	return seconds + ' second' + (seconds > 1 ? 's' : '')
+	return formatMessage(messages.timePlayedSeconds, { count: seconds })
 })
 
 onUnmounted(() => {

apps/app-frontend/src/pages/instance/Mods.vue

@@ -142,10 +142,6 @@ const messages = defineMessages({
 		id: 'app.instance.mods.projects-were-added',
 		defaultMessage: '{count} projects were added',
 	},
-	contentTypeProject: {
-		id: 'app.instance.mods.content-type-project',
-		defaultMessage: 'project',
-	},
 })
 
 let savedModalState: ModpackContentModalState | null = null
@@ -781,7 +777,7 @@ provideContentManager({
 	isPackLocked,
 	isBusy: isInstanceBusy,
 	isBulkOperating,
-	contentTypeLabel: ref(formatMessage(messages.contentTypeProject)),
+	contentTypeLabel: ref('project'),
 	toggleEnabled: toggleDisableDebounced,
 	bulkEnableItems: (items: ContentItem[]) =>
 		Promise.all(items.filter((item) => !item.enabled).map((item) => toggleDisableMod(item))).then(

apps/frontend/src/components/ui/admin/BatchCreditModal.vue

@@ -100,8 +100,7 @@
 						input-class="!bg-surface-3"
 					/>
 					<span>
-						To make up for it, we've added {{ days }} day{{ pluralize(days) }} to your Modrinth
-						Servers subscription.
+						{{ formatMessage(messages.creditEmailSubscriptionDays, { days }) }}
 					</span>
 					<span>
 						Your next charge was scheduled for {credit.previous_due} and will now be on
@@ -133,11 +132,13 @@ import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
 	Combobox,
+	defineMessages,
 	injectNotificationManager,
 	NewModal,
 	StyledInput,
 	TagItem,
 	Toggle,
+	useVIntl,
 } from '@modrinth/ui'
 import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
 import { computed, ref } from 'vue'
@@ -146,6 +147,15 @@ import { useBaseFetch } from '#imports'
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 
 const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	creditEmailSubscriptionDays: {
+		id: 'admin.batch-credit.email-preview.subscription-days',
+		defaultMessage:
+			"To make up for it, we've added {days, plural, one {# day} other {# days}} to your Modrinth Servers subscription.",
+	},
+})
 
 const modal = ref<InstanceType<typeof NewModal>>()
 
@@ -252,10 +262,6 @@ async function apply() {
 	}
 }
 
-function pluralize(n: number): string {
-	return n === 1 ? '' : 's'
-}
-
 defineExpose({
 	show,
 	hide,

apps/frontend/src/components/ui/admin/TransferModal.vue

@@ -34,7 +34,7 @@
 					placeholder="123e4569-e89b-12d3-a456-426614174005
123e9569-e89b-12d3-a456-413678919876"
 				/>
 				<span v-if="parsedServerIds.length" class="text-sm text-secondary">
-					{{ parsedServerIds.length }} server{{ parsedServerIds.length === 1 ? '' : 's' }} selected
+					{{ formatMessage(messages.selectedServers, { count: parsedServerIds.length }) }}
 				</span>
 			</div>
 
@@ -198,11 +198,13 @@ import {
 	ButtonStyled,
 	Chips,
 	Combobox,
+	defineMessages,
 	injectNotificationManager,
 	NewModal,
 	StyledInput,
 	TagItem,
 	Toggle,
+	useVIntl,
 } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
@@ -214,6 +216,18 @@ const emit = defineEmits<{
 }>()
 
 const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	selectedServers: {
+		id: 'admin.transfer-modal.selected-servers',
+		defaultMessage: '{count, plural, one {# server selected} other {# servers selected}}',
+	},
+	unknownNodes: {
+		id: 'admin.transfer-modal.unknown-nodes',
+		defaultMessage: '{count, plural, one {Unknown node} other {Unknown nodes}}',
+	},
+})
 
 const modal = ref<InstanceType<typeof NewModal>>()
 
@@ -303,7 +317,7 @@ function addNodes() {
 
 	if (unknownNodes.length > 0) {
 		addNotification({
-			title: `Unknown node${unknownNodes.length > 1 ? 's' : ''}`,
+			title: formatMessage(messages.unknownNodes, { count: unknownNodes.length }),
 			text: unknownNodes.join(', '),
 			type: 'error',
 		})

apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue

@@ -23,13 +23,15 @@ import {
 	ButtonStyled,
 	Collapsible,
 	CollapsibleRegion,
+	defineMessages,
 	getProjectTypeIcon,
 	injectModrinthClient,
 	injectNotificationManager,
 	OverflowMenu,
 	type OverflowMenuOption,
 	useFormatBytes,
 	useFormatDateTime,
+	useVIntl,
 } from '@modrinth/ui'
 import { NavTabs } from '@modrinth/ui'
 import {
@@ -58,6 +60,15 @@ const formatDateTimeUtc = useFormatDateTime({
 	timeZone: 'UTC',
 })
 const formatBytes = useFormatBytes()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	otherTracesAlsoMarked: {
+		id: 'moderation.tech-review.other-traces-also-marked',
+		defaultMessage:
+			'({count, plural, one {# other trace also marked} other {# other traces also marked}})',
+	},
+})
 
 type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
 	id: string
@@ -531,7 +542,7 @@ async function updateDetailStatus(detailId: string, verdict: 'safe' | 'unsafe')
 
 		const otherText =
 			otherMatchedCount > 0
-				? ` (${otherMatchedCount} other trace${otherMatchedCount === 1 ? '' : 's'} also marked)`
+				? ` ${formatMessage(messages.otherTracesAlsoMarked, { count: otherMatchedCount })}`
 				: ''
 
 		if (verdict === 'safe') {

apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue

@@ -27,6 +27,11 @@ const messages = defineMessages({
 		id: 'hosting.plan.select-plan',
 		defaultMessage: 'Select plan',
 	},
+	billedInterval: {
+		id: 'servers.purchase.step.plan.billed',
+		defaultMessage:
+			'billed {interval, select, monthly {monthly} quarterly {quarterly} yearly {yearly} other {{interval}}}',
+	},
 })
 
 const plans: Record<
@@ -132,7 +137,9 @@ const billingMonths = computed(() => {
 				<span class="m-0 text-2xl font-bold text-contrast">
 					{{ formatPrice(price / billingMonths, currency, true) }}
 					<span class="text-lg font-semibold text-secondary">
-						/ month<template v-if="interval !== 'monthly'">, billed {{ interval }}</template>
+						/ month<template v-if="interval !== 'monthly'"
+							>, {{ formatMessage(messages.billedInterval, { interval }) }}</template
+						>
 					</span>
 				</span>
 				<p class="m-0 max-w-[18rem]">{{ formatMessage(plans[plan].description) }}</p>

apps/frontend/src/composables/auth/scopes.ts

@@ -199,31 +199,31 @@ export const scopeMessages = defineMessages({
 	},
 	patCreateDescription: {
 		id: 'scopes.patCreate.description',
-		defaultMessage: 'Create personal API tokens',
+		defaultMessage: 'Create personal access tokens',
 	},
 	patReadLabel: {
 		id: 'scopes.patRead.label',
 		defaultMessage: 'Read PATs',
 	},
 	patReadDescription: {
 		id: 'scopes.patRead.description',
-		defaultMessage: 'View created API tokens',
+		defaultMessage: 'View created personal access tokens',
 	},
 	patWriteLabel: {
 		id: 'scopes.patWrite.label',
 		defaultMessage: 'Write PATs',
 	},
 	patWriteDescription: {
 		id: 'scopes.patWrite.description',
-		defaultMessage: 'Edit personal API tokens',
+		defaultMessage: 'Edit personal access tokens',
 	},
 	patDeleteLabel: {
 		id: 'scopes.patDelete.label',
 		defaultMessage: 'Delete PATs',
 	},
 	patDeleteDescription: {
 		id: 'scopes.patDelete.description',
-		defaultMessage: 'Delete your personal API tokens',
+		defaultMessage: 'Delete your personal access tokens',
 	},
 	sessionReadLabel: {
 		id: 'scopes.sessionRead.label',

apps/frontend/src/composables/use-server-install-content.ts

@@ -61,7 +61,7 @@ export interface UseServerInstallContentOptions {
 const messages = defineMessages({
 	unsupportedContentType: {
 		id: 'discover.install.error.unsupported-content-type',
-		defaultMessage: 'This content type cannot be installed to a server from browse.',
+		defaultMessage: 'This content type cannot be installed to a server from Discover.',
 	},
 	noServerWorld: {
 		id: 'discover.install.error.no-server-world',