Make settings page localizable (#5294)

* make settings localizable

* move plan names to common messages

* unknown -> plan-unknown

* prepr:frontend

apps/frontend/src/pages/settings/index.vue

@@ -59,7 +59,7 @@
 									class="radio shrink-0"
 								/>
 								<RadioButtonIcon v-else class="radio shrink-0" />
-								List
+								{{ formatMessage(layoutMode.rows) }}
 							</div>
 						</button>
 						<button
@@ -88,7 +88,7 @@
 									class="radio shrink-0"
 								/>
 								<RadioButtonIcon v-else class="radio shrink-0" />
-								Grid
+								{{ formatMessage(layoutMode.grid) }}
 							</div>
 						</button>
 					</div>
@@ -194,12 +194,19 @@ import type { DisplayLocation } from '~/plugins/cosmetics'
 import { isDarkTheme, type Theme } from '~/plugins/theme/index.ts'
 
 useHead({
-	title: 'Display settings - Modrinth',
+	title: () => `${formatMessage(messages.headTitle)} - Modrinth`,
 })
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
+const messages = defineMessages({
+	headTitle: {
+		id: 'settings.head-title',
+		defaultMessage: 'Display settings',
+	},
+})
+
 const developerModeBanner = defineMessages({
 	description: {
 		id: 'settings.display.banner.developer-mode.description',
@@ -212,6 +219,32 @@ const developerModeBanner = defineMessages({
 	},
 })
 
+const layoutMode = defineMessages({
+	rows: {
+		id: 'settings.display.project-list-layouts.mode.rows',
+		defaultMessage: 'Rows',
+	},
+	grid: {
+		id: 'settings.display.project-list-layouts.mode.grid',
+		defaultMessage: 'Grid',
+	},
+	gallery: {
+		id: 'settings.display.project-list-layouts.mode.gallery',
+		defaultMessage: 'Gallery',
+	},
+})
+
+const notifications = defineMessages({
+	developerModeDeactivatedTitle: {
+		id: 'settings.display.notification.developer-mode-deactivated.title',
+		defaultMessage: 'Developer mode deactivated',
+	},
+	developerModeDeactivatedText: {
+		id: 'settings.display.notification.developer-mode-deactivated.text',
+		defaultMessage: 'Developer mode has been disabled',
+	},
+})
+
 const colorTheme = defineMessages({
 	title: {
 		id: 'settings.display.theme.title',
@@ -370,8 +403,8 @@ function disableDeveloperMode() {
 	flags.value.developerMode = !flags.value.developerMode
 	saveFeatureFlags()
 	addNotification({
-		title: 'Developer mode deactivated',
-		text: 'Developer mode has been disabled',
+		title: formatMessage(notifications.developerModeDeactivatedTitle),
+		text: formatMessage(notifications.developerModeDeactivatedText),
 		type: 'success',
 	})
 }