feat: i18n switcher in app-frontend (#4990)

* feat: app i18n stuff

* feat: locale switching on load

* feat: db migration

* feat: polish + fade indicator impl onto TabbedModal

* fix: prepr checks

* fix: remove staging lock for language switching

* fix: lint

apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue

@@ -3,13 +3,21 @@ import {
 	CoffeeIcon,
 	GameIcon,
 	GaugeIcon,
+	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
 	ReportIcon,
 	SettingsIcon,
 	ShieldIcon,
 } from '@modrinth/assets'
-import { defineMessage, defineMessages, ProgressBar, TabbedModal, useVIntl } from '@modrinth/ui'
+import {
+	commonMessages,
+	defineMessage,
+	defineMessages,
+	ProgressBar,
+	TabbedModal,
+	useVIntl,
+} from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
 import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
 import { computed, ref, watch } from 'vue'
@@ -19,6 +27,7 @@ import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
 import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
 import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
 import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
+import LanguageSettings from '@/components/ui/settings/LanguageSettings.vue'
 import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
 import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
 import { get, set } from '@/helpers/settings.ts'
@@ -45,6 +54,15 @@ const tabs = [
 		icon: PaintbrushIcon,
 		content: AppearanceSettings,
 	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.language',
+			defaultMessage: 'Language',
+		}),
+		icon: LanguagesIcon,
+		content: LanguageSettings,
+		badge: commonMessages.beta,
+	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.privacy',

apps/app-frontend/src/components/ui/settings/LanguageSettings.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import {
+	Admonition,
+	AutoLink,
+	IntlFormatted,
+	LanguageSelector,
+	languageSelectorMessages,
+	LOCALES,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref, watch } from 'vue'
+
+import { get, set } from '@/helpers/settings.ts'
+import i18n from '@/i18n.config'
+
+const { formatMessage } = useVIntl()
+
+const platform = formatMessage(languageSelectorMessages.platformApp)
+
+const settings = ref(await get())
+
+watch(
+	settings,
+	async () => {
+		await set(settings.value)
+	},
+	{ deep: true },
+)
+
+const $isChanging = ref(false)
+
+async function onLocaleChange(newLocale: string) {
+	if (settings.value.locale === newLocale) return
+
+	$isChanging.value = true
+	try {
+		i18n.global.locale.value = newLocale
+		settings.value.locale = newLocale
+	} finally {
+		$isChanging.value = false
+	}
+}
+</script>
+
+<template>
+	<h2 class="m-0 text-lg font-extrabold text-contrast">Language</h2>
+
+	<Admonition type="warning" class="mt-2 mb-4">
+		{{ formatMessage(languageSelectorMessages.languageWarning, { platform }) }}
+	</Admonition>
+
+	<p class="m-0 mb-4">
+		<IntlFormatted
+			:message-id="languageSelectorMessages.languagesDescription"
+			:values="{ platform }"
+		>
+			<template #~crowdin-link="{ children }">
+				<AutoLink to="https://translate.modrinth.com">
+					<component :is="() => children" />
+				</AutoLink>
+			</template>
+		</IntlFormatted>
+	</p>
+
+	<LanguageSelector
+		:current-locale="settings.locale"
+		:locales="LOCALES"
+		:on-locale-change="onLocaleChange"
+		:is-changing="$isChanging"
+	/>
+</template>