Make settings page localizable (#5294)

* make settings localizable

* move plan names to common messages

* unknown -> plan-unknown

* prepr:frontend

apps/frontend/src/pages/settings/billing/charges.vue

@@ -2,11 +2,13 @@
 	<div>
 		<section class="card">
 			<Breadcrumbs
-				current-title="Past charges"
-				:link-stack="[{ href: '/settings/billing', label: 'Billing and subscriptions' }]"
+				:current-title="formatMessage(messages.title)"
+				:link-stack="[
+					{ href: '/settings/billing', label: formatMessage(commonSettingsMessages.billing) },
+				]"
 			/>
-			<h2>Past charges</h2>
-			<p>All of your past charges to your Modrinth account will be listed here:</p>
+			<h2>{{ formatMessage(messages.title) }}</h2>
+			<p>{{ formatMessage(messages.description) }}</p>
 			<div
 				v-for="charge in charges"
 				:key="charge.id"
@@ -15,11 +17,13 @@
 				<div class="flex flex-col gap-1">
 					<div class="flex items-center gap-1">
 						<span class="font-bold text-primary">
-							<template v-if="charge.product?.metadata?.type === 'midas'"> Modrinth Plus </template>
-							<template v-else-if="charge.product?.metadata?.type === 'pyro'">
-								Modrinth Hosting
+							<template v-if="charge.product?.metadata?.type === 'midas'">
+								{{ formatMessage(messages.productMidas) }}
 							</template>
-							<template v-else> Medal Server Trial </template>
+							<template v-else-if="charge.product?.metadata?.type === 'pyro'">
+								{{ formatMessage(messages.productPyro) }}
+							</template>
+							<template v-else> {{ formatMessage(messages.productMedalTrial) }} </template>
 							<template v-if="charge.subscription_interval">
 								{{ charge.subscription_interval }}
 							</template>
@@ -41,6 +45,8 @@
 import {
 	Badge,
 	Breadcrumbs,
+	commonSettingsMessages,
+	defineMessages,
 	injectModrinthClient,
 	useFormatDateTime,
 	useFormatPrice,
@@ -53,6 +59,7 @@ definePageMeta({
 	middleware: 'auth',
 })
 
+const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
 
 const formatPrice = useFormatPrice()
@@ -62,6 +69,25 @@ const formatDate = useFormatDateTime({
 	day: '2-digit',
 })
 
+const messages = defineMessages({
+	description: {
+		id: 'settings.billing.charges.description',
+		defaultMessage: 'All of your past charges to your Modrinth account will be listed here:',
+	},
+	productMidas: {
+		id: 'settings.billing.charges.product.midas',
+		defaultMessage: 'Modrinth Plus',
+	},
+	productPyro: {
+		id: 'settings.billing.charges.product.pyro',
+		defaultMessage: 'Modrinth Hosting',
+	},
+	productMedalTrial: {
+		id: 'settings.billing.charges.product.medal-trial',
+		defaultMessage: 'Medal Server Trial',
+	},
+})
+
 const { data: charges } = useQuery({
 	queryKey: ['billing', 'payments'],
 	queryFn: async () => {