devex: migrate to vue-i18n (#4966)

* sample languages refactor

* feat: consistency + dedupe impl of i18n

* fix: broken imports

* fix: intl formatted component

* fix: use relative imports

* fix: imports

* fix: comment out incomplete locales + fix imports

* feat: cleanup

* fix: ui imports

* fix: lint

* fix: admonition import

* make footer a component, fix language reactivity

* make copyright notice untranslatable

---------

Co-authored-by: Calum H. <contact@cal.engineer>

apps/app-frontend/package.json

@@ -28,7 +28,8 @@
 		"@tauri-apps/plugin-updater": "^2.7.1",
 		"@tauri-apps/plugin-window-state": "^2.2.2",
 		"@types/three": "^0.172.0",
-		"@vintl/vintl": "^4.4.1",
+		"intl-messageformat": "^10.7.7",
+		"vue-i18n": "^9.14.0",
 		"@vueuse/core": "^11.1.0",
 		"dayjs": "^1.11.10",
 		"floating-vue": "^5.2.2",

apps/app-frontend/src/App.vue

@@ -31,6 +31,7 @@ import {
 	Button,
 	ButtonStyled,
 	commonMessages,
+	defineMessages,
 	NewsArticleCard,
 	NotificationPanel,
 	OverflowMenu,
@@ -39,6 +40,7 @@ import {
 	provideNotificationManager,
 	providePageContext,
 	useDebugLogger,
+	useVIntl,
 } from '@modrinth/ui'
 import { renderString } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
@@ -48,7 +50,6 @@ import { getCurrentWindow } from '@tauri-apps/api/window'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { type } from '@tauri-apps/plugin-os'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { $fetch } from 'ofetch'
 import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'

apps/app-frontend/src/components/ui/UpdateToast.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { DownloadIcon, ExternalIcon, RefreshCwIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, ProgressBar } from '@modrinth/ui'
+import { ButtonStyled, commonMessages, defineMessages, ProgressBar, useVIntl } from '@modrinth/ui'
 import { formatBytes } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { ref } from 'vue'
 
 import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -4,11 +4,12 @@ import {
 	Avatar,
 	ButtonStyled,
 	commonMessages,
+	defineMessages,
 	injectNotificationManager,
+	IntlFormatted,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 import { computed, onUnmounted, ref, watch } from 'vue'
 
 import FriendsSection from '@/components/ui/friends/FriendsSection.vue'

apps/app-frontend/src/components/ui/friends/FriendsSection.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
-import { Accordion, Avatar, ButtonStyled, OverflowMenu } from '@modrinth/ui'
+import {
+	Accordion,
+	Avatar,
+	ButtonStyled,
+	defineMessages,
+	OverflowMenu,
+	useVIntl,
+} from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { useTemplateRef } from 'vue'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'

apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue

@@ -4,12 +4,13 @@ import {
 	Avatar,
 	ButtonStyled,
 	Checkbox,
+	defineMessages,
 	injectNotificationManager,
 	OverflowMenu,
+	useVIntl,
 } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, type Ref, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 

apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { Checkbox, injectNotificationManager } from '@modrinth/ui'
+import { Checkbox, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'

apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue

@@ -16,7 +16,9 @@ import {
 	Checkbox,
 	Chips,
 	Combobox,
+	defineMessages,
 	injectNotificationManager,
+	useVIntl,
 } from '@modrinth/ui'
 import {
 	formatCategory,
@@ -25,7 +27,6 @@ import {
 	type Project,
 	type Version,
 } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
 

apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-import { Checkbox, injectNotificationManager, Slider } from '@modrinth/ui'
+import { Checkbox, defineMessages, injectNotificationManager, Slider, useVIntl } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, readonly, ref, watch } from 'vue'
 
 import JavaSelector from '@/components/ui/JavaSelector.vue'

apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { Checkbox, injectNotificationManager, Toggle } from '@modrinth/ui'
+import { Checkbox, defineMessages, injectNotificationManager, Toggle, useVIntl } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, type Ref, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'

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

@@ -9,10 +9,9 @@ import {
 	SettingsIcon,
 	ShieldIcon,
 } from '@modrinth/assets'
-import { ProgressBar, TabbedModal } from '@modrinth/ui'
+import { 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 { defineMessage, defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, ref, watch } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'

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

@@ -7,9 +7,8 @@ import {
 	MonitorIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Avatar, TabbedModal, type TabbedModalTab } from '@modrinth/ui'
+import { Avatar, defineMessage, TabbedModal, type TabbedModalTab, useVIntl } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { defineMessage, useVIntl } from '@vintl/vintl'
 import { ref } from 'vue'
 
 import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'

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

@@ -15,10 +15,10 @@ import {
 	OverflowMenu,
 	SmartClickable,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { useVIntl } from '@vintl/vintl'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'

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

@@ -17,18 +17,19 @@ import {
 	UserIcon,
 	XIcon,
 } from '@modrinth/assets'
+import type { MessageDescriptor } from '@modrinth/ui'
 import {
 	Avatar,
 	ButtonStyled,
 	commonMessages,
+	defineMessages,
 	OverflowMenu,
 	SmartClickable,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
 import { formatNumber, getPingLevel } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import type { MessageDescriptor } from '@vintl/vintl'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
 import type { Component } from 'vue'

apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import {
-import { defineMessages, useVIntl } from '@vintl/vintl'
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
 import { ref } from 'vue'
 
 import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'

apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { SaveIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import {
-import { defineMessage, useVIntl } from '@vintl/vintl'
+	ButtonStyled,
+	commonMessages,
+	defineMessage,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'

apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import {
-import { defineMessages, useVIntl } from '@vintl/vintl'
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'

apps/app-frontend/src/components/ui/world/modal/HideFromHomeOption.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { Checkbox } from '@modrinth/ui'
+import { Checkbox, defineMessage, useVIntl } from '@modrinth/ui'
-import { defineMessage, useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
 
 const { formatMessage } = useVIntl()

apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { Combobox } from '@modrinth/ui'
+import { Combobox, defineMessages, type MessageDescriptor, useVIntl } from '@modrinth/ui'
-import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 
 import type { ServerPackStatus } from '@/helpers/worlds.ts'
 

apps/app-frontend/src/i18n.config.ts

@@ -0,0 +1,18 @@
+import { buildLocaleMessages, createMessageCompiler, type CrowdinMessages } from '@modrinth/ui'
+import { createI18n } from 'vue-i18n'
+
+const localeModules = import.meta.glob<{ default: CrowdinMessages }>('./locales/*/index.json', {
+	eager: true,
+})
+
+const i18n = createI18n({
+	legacy: false,
+	locale: 'en-US',
+	fallbackLocale: 'en-US',
+	messageCompiler: createMessageCompiler(),
+	missingWarn: false,
+	fallbackWarn: false,
+	messages: buildLocaleMessages(localeModules),
+})
+
+export default i18n

apps/app-frontend/src/main.js

@@ -3,31 +3,14 @@ import 'floating-vue/dist/style.css'
 import * as Sentry from '@sentry/vue'
 import { VueScanPlugin } from '@taijased/vue-render-tracker'
 import { VueQueryPlugin } from '@tanstack/vue-query'
-import { createPlugin } from '@vintl/vintl/plugin'
 import FloatingVue from 'floating-vue'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
 import App from '@/App.vue'
+import i18n from '@/i18n.config'
 import router from '@/routes'
 
-const VIntlPlugin = createPlugin({
-	controllerOpts: {
-		defaultLocale: 'en-US',
-		locale: 'en-US',
-		locales: [
-			{
-				tag: 'en-US',
-				meta: {
-					displayName: 'American English',
-				},
-			},
-		],
-	},
-	globalMixin: true,
-	injectInto: [],
-})
-
 const vueScan = new VueScanPlugin({
 	enabled: false, // Enable or disable the tracker
 	showOverlay: true, // Show overlay to visualize renders
@@ -60,6 +43,6 @@ app.use(FloatingVue, {
 		},
 	},
 })
-app.use(VIntlPlugin)
+app.use(i18n)
 
 app.mount('#app')

apps/app-frontend/src/pages/Browse.vue

@@ -4,6 +4,7 @@ import type { Category, GameVersion, Platform, ProjectType, SortType, Tags } fro
 import {
 	Button,
 	Checkbox,
+	defineMessages,
 	DropdownSelect,
 	injectNotificationManager,
 	LoadingIndicator,
@@ -11,9 +12,9 @@ import {
 	SearchFilterControl,
 	SearchSidebarFilter,
 	useSearch,
+	useVIntl,
 } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import type { Ref } from 'vue'
 import { computed, nextTick, ref, shallowRef, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'

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

@@ -274,17 +274,18 @@ import {
 	Button,
 	ButtonStyled,
 	ContentListPanel,
+	defineMessages,
 	injectNotificationManager,
 	OverflowMenu,
 	Pagination,
 	RadialHeader,
 	Toggle,
+	useVIntl,
 } from '@modrinth/ui'
 import type { ContentItem } from '@modrinth/ui/src/components/content/ContentListItem.vue'
 import type { Organization, Project, TeamMember, Version } from '@modrinth/utils'
 import { formatProjectType } from '@modrinth/utils'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { useStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
 import type { ComputedRef } from 'vue'

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

@@ -125,6 +125,7 @@ import { PlusIcon, SearchIcon, SpinnerIcon, UpdatedIcon, XIcon } from '@modrinth
 import {
 	Button,
 	ButtonStyled,
+	defineMessages,
 	FilterBar,
 	type FilterBarOption,
 	GAME_MODES,
@@ -133,7 +134,6 @@ import {
 	RadialHeader,
 } from '@modrinth/ui'
 import type { Version } from '@modrinth/utils'
-import { defineMessages } from '@vintl/vintl'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 

apps/frontend/nuxt.config.ts

@@ -1,13 +1,9 @@
-import { pathToFileURL } from 'node:url'
-
-import { match as matchLocale } from '@formatjs/intl-localematcher'
 import { GenericModrinthClient, type Labrinth } from '@modrinth/api-client'
+// Import directly from utils to avoid loading .vue files at config time
+import { LOCALES } from '@modrinth/ui/src/composables/i18n.ts'
 import serverSidedVue from '@vitejs/plugin-vue'
-import { consola } from 'consola'
 import { promises as fs } from 'fs'
-import { globIterate } from 'glob'
 import { defineNuxtConfig } from 'nuxt/config'
-import { basename, relative } from 'pathe'
 import svgLoader from 'vite-svg-loader'
 
 const STAGING_API_URL = 'https://staging-api.modrinth.com/v2/'
@@ -25,28 +21,6 @@ const favicons = {
 	'(prefers-color-scheme:dark)': '/favicon.ico',
 }
 
-/**
- * Tags of locales that are auto-discovered besides the default locale.
- *
- * Preferably only the locales that reach a certain threshold of complete
- * translations would be included in this array.
- */
-// const enabledLocales: string[] = []
-
-/**
- * Overrides for the categories of the certain locales.
- */
-const localesCategoriesOverrides: Partial<Record<string, 'fun' | 'experimental'>> = {
-	'en-x-pirate': 'fun',
-	'en-x-updown': 'fun',
-	'en-x-lolcat': 'fun',
-	'en-x-uwu': 'fun',
-	'ru-x-bandit': 'fun',
-	ar: 'experimental',
-	he: 'experimental',
-	pes: 'experimental',
-}
-
 export default defineNuxtConfig({
 	srcDir: 'src/',
 	app: {
@@ -176,115 +150,6 @@ export default defineNuxtConfig({
 
 			console.log('Tags generated!')
 		},
-		async 'vintl:extendOptions'(opts) {
-			opts.locales ??= []
-
-			// const isProduction = getDomain() === 'https://modrinth.com'
-
-			const resolveCompactNumberDataImport = await (async () => {
-				const compactNumberLocales: string[] = []
-
-				for await (const localeFile of globIterate(
-					'node_modules/@vintl/compact-number/dist/locale-data/*.mjs',
-					{ ignore: '**/*.data.mjs' },
-				)) {
-					const tag = basename(localeFile, '.mjs')
-					compactNumberLocales.push(tag)
-				}
-
-				function resolveImport(tag: string) {
-					const matchedTag = matchLocale([tag], compactNumberLocales, 'en-x-placeholder')
-					return matchedTag === 'en-x-placeholder'
-						? undefined
-						: `@vintl/compact-number/locale-data/${matchedTag}`
-				}
-
-				return resolveImport
-			})()
-
-			const resolveOmorphiaLocaleImport = await (async () => {
-				const omorphiaLocales: string[] = []
-				const omorphiaLocaleSets = new Map<string, { files: { from: string; format?: string }[] }>()
-
-				for (const pkgLocales of [`node_modules/@modrinth/**/src/locales/*`]) {
-					for await (const localeDir of globIterate(pkgLocales, {
-						posix: true,
-					})) {
-						const tag = basename(localeDir)
-						if (!omorphiaLocales.includes(tag)) {
-							omorphiaLocales.push(tag)
-						}
-
-						const entry = omorphiaLocaleSets.get(tag) ?? { files: [] }
-						omorphiaLocaleSets.set(tag, entry)
-
-						for await (const localeFile of globIterate(`${localeDir}/*`, { posix: true })) {
-							entry.files.push({
-								from: pathToFileURL(localeFile).toString(),
-								format: 'default',
-							})
-						}
-					}
-				}
-
-				return function resolveLocaleImport(tag: string) {
-					return omorphiaLocaleSets.get(matchLocale([tag], omorphiaLocales, 'en-x-placeholder'))
-				}
-			})()
-
-			for await (const localeDir of globIterate('src/locales/*/', { posix: true })) {
-				const tag = basename(localeDir)
-
-				// NOTICE: temporarily disabled all locales except en-US
-				if (opts.defaultLocale !== tag) continue
-
-				const locale =
-					opts.locales.find((locale) => locale.tag === tag) ??
-					opts.locales[opts.locales.push({ tag }) - 1]!
-
-				const localeFiles = (locale.files ??= [])
-
-				for await (const localeFile of globIterate(`${localeDir}/*`, { posix: true })) {
-					const fileName = basename(localeFile)
-					if (fileName === 'index.json') {
-						localeFiles.push({
-							from: `./${relative('./src', localeFile)}`,
-							format: 'crowdin',
-						})
-					} else if (fileName === 'meta.json') {
-						const meta: Record<string, { message: string }> = await fs
-							.readFile(localeFile, 'utf8')
-							.then((date) => JSON.parse(date))
-						const localeMeta = (locale.meta ??= {})
-						for (const key in meta) {
-							const value = meta[key]
-							if (value === undefined) continue
-							localeMeta[key] = value.message
-						}
-					} else {
-						;(locale.resources ??= {})[fileName] = `./${relative('./src', localeFile)}`
-					}
-				}
-
-				const categoryOverride = localesCategoriesOverrides[tag]
-				if (categoryOverride != null) {
-					;(locale.meta ??= {}).category = categoryOverride
-				}
-
-				const omorphiaLocaleData = resolveOmorphiaLocaleImport(tag)
-				if (omorphiaLocaleData != null) {
-					localeFiles.push(...omorphiaLocaleData.files)
-				}
-
-				const cnDataImport = resolveCompactNumberDataImport(tag)
-				if (cnDataImport != null) {
-					;(locale.additionalImports ??= []).push({
-						from: cnDataImport,
-						resolve: false,
-					})
-				}
-			}
-		},
 	},
 	runtimeConfig: {
 		// @ts-ignore
@@ -331,52 +196,19 @@ export default defineNuxtConfig({
 			},
 		},
 	},
-	modules: ['@vintl/nuxt', '@pinia/nuxt'],
+	modules: ['@nuxtjs/i18n', '@pinia/nuxt'],
-	vintl: {
+	i18n: {
 		defaultLocale: 'en-US',
-		locales: [
+		locales: LOCALES,
-			{
+		strategy: 'no_prefix',
-				tag: 'en-US',
+		detectBrowserLanguage: {
-				meta: {
+			useCookie: true,
-					static: {
+			cookieKey: 'locale',
-						iso: 'en',
+			fallbackLocale: 'en-US',
-					},
-				},
-			},
-		],
-		storage: 'cookie',
-		parserless: 'only-prod',
-		seo: {
-			defaultLocaleHasParameter: false,
-		},
-		onParseError({ error, message, messageId, moduleId, parseMessage, parserOptions }) {
-			const errorMessage = String(error)
-			const modulePath = relative(__dirname, moduleId)
-
-			try {
-				const fallback = parseMessage(message, { ...parserOptions, ignoreTag: true })
-
-				consola.warn(
-					`[i18n] ${messageId} in ${modulePath} cannot be parsed normally due to ${errorMessage}. The tags will will not be parsed.`,
-				)
-
-				return fallback
-			} catch (err) {
-				const secondaryErrorMessage = String(err)
-
-				const reason =
-					errorMessage === secondaryErrorMessage
-						? errorMessage
-						: `${errorMessage} and ${secondaryErrorMessage}`
-
-				consola.warn(
-					`[i18n] ${messageId} in ${modulePath} cannot be parsed due to ${reason}. It will be skipped.`,
-				)
-			}
 		},
+		vueI18n: './src/i18n.config.ts',
 	},
 	nitro: {
-		moduleSideEffects: ['@vintl/compact-number/locale-data'],
 		rollupConfig: {
 			// @ts-expect-error it's not infinite.
 			plugins: [serverSidedVue()],

apps/frontend/package.json

@@ -16,12 +16,10 @@
 	"devDependencies": {
 		"@formatjs/cli": "^6.2.12",
 		"@nuxt/devtools": "^1.3.3",
+		"@nuxtjs/i18n": "^8.5.5",
 		"@types/dompurify": "^3.0.5",
 		"@types/iso-3166-2": "^1.0.4",
 		"@types/node": "^20.1.0",
-		"@vintl/compact-number": "^2.0.5",
-		"@vintl/how-ago": "^3.0.1",
-		"@vintl/nuxt": "^1.9.2",
 		"autoprefixer": "^10.4.19",
 		"eslint": "^8.57.0",
 		"glob": "^10.2.7",
@@ -48,7 +46,7 @@
 		"@pinia/nuxt": "^0.5.1",
 		"@tanstack/vue-query": "^5.90.7",
 		"@types/three": "^0.172.0",
-		"@vintl/vintl": "^4.4.1",
+		"intl-messageformat": "^10.7.7",
 		"@vitejs/plugin-vue": "^5.0.4",
 		"@vue-email/components": "^0.0.21",
 		"@vue-email/render": "^0.0.9",

apps/frontend/src/components/ui/ModrinthFooter.vue

@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import { BlueskyIcon, DiscordIcon, GithubIcon, MastodonIcon, TwitterIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	defineMessage,
+	defineMessages,
+	injectNotificationManager,
+	IntlFormatted,
+	type MessageDescriptor,
+	useVIntl,
+} from '@modrinth/ui'
+
+import TextLogo from '~/components/brand/TextLogo.vue'
+
+const flags = useFeatureFlags()
+const { formatMessage } = useVIntl()
+const { addNotification } = injectNotificationManager()
+
+const messages = defineMessages({
+	modrinthInformation: {
+		id: 'layout.footer.modrinth-information',
+		defaultMessage: 'Modrinth information',
+	},
+	openSource: {
+		id: 'layout.footer.open-source',
+		defaultMessage: 'Modrinth is <github-link>open source</github-link>.',
+	},
+	legalDisclaimer: {
+		id: 'layout.footer.legal-disclaimer',
+		defaultMessage:
+			'NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT.',
+	},
+})
+
+const socialLinks: {
+	label: MessageDescriptor
+	href: string
+	icon: Component
+	rel?: string
+}[] = [
+	{
+		label: defineMessage({ id: 'layout.footer.social.discord', defaultMessage: 'Discord' }),
+		href: 'https://discord.modrinth.com',
+		icon: DiscordIcon,
+	},
+	{
+		label: defineMessage({ id: 'layout.footer.social.bluesky', defaultMessage: 'Bluesky' }),
+		href: 'https://bsky.app/profile/modrinth.com',
+		icon: BlueskyIcon,
+	},
+	{
+		label: defineMessage({ id: 'layout.footer.social.mastodon', defaultMessage: 'Mastodon' }),
+		href: 'https://floss.social/@modrinth',
+		icon: MastodonIcon,
+		rel: 'me',
+	},
+	{
+		label: defineMessage({ id: 'layout.footer.social.x', defaultMessage: 'X' }),
+		href: 'https://x.com/modrinth',
+		icon: TwitterIcon,
+	},
+	{
+		label: defineMessage({ id: 'layout.footer.social.github', defaultMessage: 'GitHub' }),
+		href: 'https://github.com/modrinth',
+		icon: GithubIcon,
+	},
+]
+
+const footerLinks: {
+	label: MessageDescriptor
+	links: {
+		href: string
+		label: MessageDescriptor
+	}[]
+}[] = [
+	{
+		label: defineMessage({ id: 'layout.footer.about', defaultMessage: 'About' }),
+		links: [
+			{
+				href: '/news',
+				label: defineMessage({ id: 'layout.footer.about.news', defaultMessage: 'News' }),
+			},
+			{
+				href: '/news/changelog',
+				label: defineMessage({ id: 'layout.footer.about.changelog', defaultMessage: 'Changelog' }),
+			},
+			{
+				href: 'https://status.modrinth.com',
+				label: defineMessage({ id: 'layout.footer.about.status', defaultMessage: 'Status' }),
+			},
+			{
+				href: 'https://careers.modrinth.com',
+				label: defineMessage({ id: 'layout.footer.about.careers', defaultMessage: 'Careers' }),
+			},
+			{
+				href: '/legal/cmp-info',
+				label: defineMessage({
+					id: 'layout.footer.about.rewards-program',
+					defaultMessage: 'Rewards Program',
+				}),
+			},
+		],
+	},
+	{
+		label: defineMessage({ id: 'layout.footer.products', defaultMessage: 'Products' }),
+		links: [
+			{
+				href: '/plus',
+				label: defineMessage({ id: 'layout.footer.products.plus', defaultMessage: 'Modrinth+' }),
+			},
+			{
+				href: '/app',
+				label: defineMessage({ id: 'layout.footer.products.app', defaultMessage: 'Modrinth App' }),
+			},
+			{
+				href: '/hosting',
+				label: defineMessage({
+					id: 'layout.footer.products.servers',
+					defaultMessage: 'Modrinth Hosting',
+				}),
+			},
+		],
+	},
+	{
+		label: defineMessage({ id: 'layout.footer.resources', defaultMessage: 'Resources' }),
+		links: [
+			{
+				href: 'https://support.modrinth.com',
+				label: defineMessage({
+					id: 'layout.footer.resources.help-center',
+					defaultMessage: 'Help Center',
+				}),
+			},
+			{
+				href: 'https://translate.modrinth.com',
+				label: defineMessage({
+					id: 'layout.footer.resources.translate',
+					defaultMessage: 'Translate',
+				}),
+			},
+			{
+				href: 'https://github.com/modrinth/code/issues',
+				label: defineMessage({
+					id: 'layout.footer.resources.report-issues',
+					defaultMessage: 'Report issues',
+				}),
+			},
+			{
+				href: 'https://docs.modrinth.com/api/',
+				label: defineMessage({
+					id: 'layout.footer.resources.api-docs',
+					defaultMessage: 'API documentation',
+				}),
+			},
+		],
+	},
+	{
+		label: defineMessage({ id: 'layout.footer.legal', defaultMessage: 'Legal' }),
+		links: [
+			{
+				href: '/legal/rules',
+				label: defineMessage({ id: 'layout.footer.legal.rules', defaultMessage: 'Content Rules' }),
+			},
+			{
+				href: '/legal/terms',
+				label: defineMessage({
+					id: 'layout.footer.legal.terms-of-use',
+					defaultMessage: 'Terms of Use',
+				}),
+			},
+			{
+				href: '/legal/privacy',
+				label: defineMessage({
+					id: 'layout.footer.legal.privacy-policy',
+					defaultMessage: 'Privacy Policy',
+				}),
+			},
+			{
+				href: '/legal/security',
+				label: defineMessage({
+					id: 'layout.footer.legal.security-notice',
+					defaultMessage: 'Security Notice',
+				}),
+			},
+			{
+				href: '/legal/copyright',
+				label: defineMessage({
+					id: 'layout.footer.legal.copyright-policy',
+					defaultMessage: 'Copyright Policy and DMCA',
+				}),
+			},
+		],
+	},
+]
+
+const developerModeCounter = ref(0)
+
+const state = useGeneratedState()
+
+function developerModeIncrement() {
+	if (developerModeCounter.value >= 5) {
+		flags.value.developerMode = !flags.value.developerMode
+		developerModeCounter.value = 0
+		saveFeatureFlags()
+		if (flags.value.developerMode) {
+			addNotification({
+				title: 'Developer mode activated',
+				text: 'Developer mode has been enabled',
+				type: 'success',
+			})
+		} else {
+			addNotification({
+				title: 'Developer mode deactivated',
+				text: 'Developer mode has been disabled',
+				type: 'success',
+			})
+		}
+	} else {
+		developerModeCounter.value++
+	}
+}
+</script>
+
+<template>
+	<footer
+		class="footer-brand-background experimental-styles-within border-0 border-t-[1px] border-solid"
+	>
+		<div class="mx-auto flex max-w-screen-xl flex-col gap-6 p-6 pb-20 sm:px-12 md:py-12">
+			<div
+				class="grid grid-cols-1 gap-4 text-primary md:grid-cols-[1fr_2fr] lg:grid-cols-[auto_auto_auto_auto_auto]"
+			>
+				<div
+					class="flex flex-col items-center gap-3 md:items-start"
+					role="region"
+					:aria-label="formatMessage(messages.modrinthInformation)"
+				>
+					<TextLogo
+						aria-hidden="true"
+						class="text-logo button-base h-6 w-auto text-contrast lg:h-8"
+						@click="developerModeIncrement()"
+					/>
+					<div class="flex flex-wrap justify-center gap-px sm:-mx-2">
+						<ButtonStyled
+							v-for="(social, index) in socialLinks"
+							:key="`footer-social-${index}`"
+							circular
+							type="transparent"
+						>
+							<a
+								v-tooltip="formatMessage(social.label)"
+								:href="social.href"
+								target="_blank"
+								:rel="`noopener${social.rel ? ` ${social.rel}` : ''}`"
+							>
+								<component :is="social.icon" class="h-5 w-5" />
+							</a>
+						</ButtonStyled>
+					</div>
+					<div class="mt-auto flex flex-wrap justify-center gap-3 md:flex-col">
+						<p class="m-0">
+							<IntlFormatted :message-id="messages.openSource">
+								<template #github-link="{ children }">
+									<a
+										href="https://github.com/modrinth/code"
+										class="text-brand hover:underline"
+										target="_blank"
+										rel="noopener"
+									>
+										<component :is="() => children" />
+									</a>
+								</template>
+							</IntlFormatted>
+						</p>
+						<p class="m-0">© {{ state.buildYear ?? '2025' }} Rinth, Inc.</p>
+					</div>
+				</div>
+				<div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:contents">
+					<div
+						v-for="group in footerLinks"
+						:key="group.label.id"
+						class="flex flex-col items-center gap-3 sm:items-start"
+					>
+						<h3 class="m-0 text-base text-contrast">{{ formatMessage(group.label) }}</h3>
+						<template v-for="item in group.links" :key="item.label">
+							<nuxt-link
+								v-if="item.href.startsWith('/')"
+								:to="item.href"
+								class="w-fit hover:underline"
+							>
+								{{ formatMessage(item.label) }}
+							</nuxt-link>
+							<a
+								v-else
+								:href="item.href"
+								class="w-fit hover:underline"
+								target="_blank"
+								rel="noopener"
+							>
+								{{ formatMessage(item.label) }}
+							</a>
+						</template>
+					</div>
+				</div>
+			</div>
+			<div class="flex justify-center text-center text-xs font-medium text-secondary opacity-50">
+				{{ formatMessage(messages.legalDisclaimer) }}
+			</div>
+		</div>
+	</footer>
+</template>
+<style scoped lang="scss">
+.footer-brand-background {
+	background: var(--brand-gradient-strong-bg);
+	border-color: var(--brand-gradient-border);
+}
+</style>

apps/frontend/src/components/ui/ProjectMemberHeader.vue

@@ -24,9 +24,14 @@
 
 <script setup lang="ts">
 import { CheckIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	type MessageDescriptor,
+	useVIntl,
+} from '@modrinth/ui'
 import type { Project, User, Version } from '@modrinth/utils'
-import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
 
 import { acceptTeamInvite, removeTeamMember } from '~/helpers/teams.js'

apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue

@@ -87,7 +87,13 @@
 
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
-import { Admonition, DropzoneFileInput, injectProjectPageContext } from '@modrinth/ui'
+import {
+	Admonition,
+	defineMessages,
+	DropzoneFileInput,
+	injectProjectPageContext,
+	useVIntl,
+} from '@modrinth/ui'
 import { acceptFileFromProjectType } from '@modrinth/utils'
 
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'

apps/frontend/src/components/ui/create/CollectionCreateModal.vue

@@ -58,8 +58,13 @@
 </template>
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
+import {
-import { defineMessages } from '@vintl/vintl'
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
 
 import CreateLimitAlert from './CreateLimitAlert.vue'
 

apps/frontend/src/components/ui/create/CreateLimitAlert.vue

@@ -42,9 +42,8 @@
 
 <script setup lang="ts">
 import { MessageIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled } from '@modrinth/ui'
+import { Admonition, ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
-import { defineMessages } from '@vintl/vintl'
 import { computed, watch } from 'vue'
 
 const { formatMessage } = useVIntl()

apps/frontend/src/components/ui/create/OrganizationCreateModal.vue

@@ -81,8 +81,13 @@
 
 <script setup lang="ts">
 import { PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
+import {
-import { defineMessages } from '@vintl/vintl'
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
 import { ref } from 'vue'
 
 import CreateLimitAlert from './CreateLimitAlert.vue'

apps/frontend/src/components/ui/create/ProjectCreateModal.vue

@@ -95,8 +95,14 @@
 
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, Chips, injectNotificationManager, NewModal } from '@modrinth/ui'
+import {
-import { defineMessages } from '@vintl/vintl'
+	ButtonStyled,
+	Chips,
+	defineMessages,
+	injectNotificationManager,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
 
 import CreateLimitAlert from './CreateLimitAlert.vue'
 

apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue

@@ -162,12 +162,13 @@ import {
 	Admonition,
 	ButtonStyled,
 	Chips,
+	defineMessages,
 	injectNotificationManager,
+	IntlFormatted,
 	NewModal,
 	normalizeChildren,
+	useVIntl,
 } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 
 import { type FormRequestResponse, useAvalara1099 } from '@/composables/avalara1099'
 

apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue

@@ -116,8 +116,14 @@ import {
 	SpinnerIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, injectNotificationManager, NewModal } from '@modrinth/ui'
+import {
-import { defineMessages, useVIntl } from '@vintl/vintl'
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue'
 
 import {

apps/frontend/src/components/ui/dashboard/RevenueInputField.vue

@@ -49,9 +49,14 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled, Combobox, commonMessages, formFieldPlaceholders } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	Combobox,
+	commonMessages,
+	formFieldPlaceholders,
+	useVIntl,
+} from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
-import { useVIntl } from '@vintl/vintl'
 import { computed, nextTick, ref, watch } from 'vue'
 
 const props = withDefaults(

apps/frontend/src/components/ui/dashboard/WithdrawFeeBreakdown.vue

@@ -57,8 +57,8 @@
 
 <script setup lang="ts">
 import { LoaderCircleIcon } from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
 
 const props = withDefaults(

apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue

@@ -124,10 +124,8 @@
 </template>
 
 <script setup lang="ts">
-import { normalizeChildren } from '@modrinth/ui'
+import { defineMessages, IntlFormatted, normalizeChildren, useVIntl } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 import dayjs from 'dayjs'
 import { computed, onMounted, ref } from 'vue'
 import ConfettiExplosion from 'vue-confetti-explosion'

apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue

@@ -107,12 +107,13 @@ import { CheckIcon, PayPalColorIcon, SaveIcon, XIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
 	Checkbox,
+	defineMessages,
 	financialMessages,
 	formFieldLabels,
+	IntlFormatted,
 	normalizeChildren,
+	useVIntl,
 } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 import { useDebounceFn } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 

apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue

@@ -83,13 +83,14 @@ import {
 	Admonition,
 	ButtonStyled,
 	Combobox,
+	defineMessages,
 	injectNotificationManager,
+	IntlFormatted,
 	normalizeChildren,
 	useDebugLogger,
+	useVIntl,
 } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 import { useGeolocation } from '@vueuse/core'
 
 import { useCountries, useFormattedCountries, useUserCountry } from '@/composables/country.ts'

apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue

@@ -204,6 +204,7 @@ import {
 	Admonition,
 	Checkbox,
 	Combobox,
+	defineMessages,
 	financialMessages,
 	formFieldLabels,
 	formFieldPlaceholders,
@@ -211,10 +212,10 @@ import {
 	getBlockchainIcon,
 	getCurrencyColor,
 	getCurrencyIcon,
+	IntlFormatted,
 	normalizeChildren,
+	useVIntl,
 } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 import { useDebounceFn } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 

apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue

@@ -218,8 +218,14 @@
 </template>
 
 <script setup lang="ts">
-import { Chips, Combobox, formFieldLabels, formFieldPlaceholders } from '@modrinth/ui'
+import {
-import { useVIntl } from '@vintl/vintl'
+	Chips,
+	Combobox,
+	defineMessages,
+	formFieldLabels,
+	formFieldPlaceholders,
+	useVIntl,
+} from '@modrinth/ui'
 // TODO: Switch to using Muralpay's improved endpoint when it's available.
 import iso3166 from 'iso-3166-2'
 

apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue

@@ -74,10 +74,15 @@
 
 <script setup lang="ts">
 import { FileTextIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, normalizeChildren } from '@modrinth/ui'
+import {
+	Admonition,
+	ButtonStyled,
+	defineMessages,
+	IntlFormatted,
+	normalizeChildren,
+	useVIntl,
+} from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 import { computed } from 'vue'
 
 import { TAX_THRESHOLD_ACTUAL } from '@/providers/creator-withdraw.ts'

apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue

@@ -356,16 +356,17 @@ import {
 	Checkbox,
 	Chips,
 	Combobox,
+	defineMessages,
 	financialMessages,
 	formFieldLabels,
 	formFieldPlaceholders,
+	IntlFormatted,
 	normalizeChildren,
 	paymentMethodMessages,
 	useDebugLogger,
+	useVIntl,
 } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 import { useDebounceFn } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 

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

@@ -89,9 +89,8 @@ import {
 } from '@modrinth/assets'
 import type { Nag, NagContext, NagStatus } from '@modrinth/moderation'
 import { nags } from '@modrinth/moderation'
-import { ButtonStyled } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, type MessageDescriptor, useVIntl } from '@modrinth/ui'
 import type { Project, User, Version } from '@modrinth/utils'
-import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import type { Component } from 'vue'
 import { computed } from 'vue'
 

apps/frontend/src/components/ui/news/LatestNewsRow.vue

@@ -29,8 +29,7 @@
 <script setup lang="ts">
 import { NewspaperIcon } from '@modrinth/assets'
 import { articles as rawArticles } from '@modrinth/blog'
-import { ButtonStyled, NewsArticleCard } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, NewsArticleCard, useVIntl } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, ref } from 'vue'
 
 const { formatMessage } = useVIntl()

apps/frontend/src/components/ui/servers/PanelServerActionButton.vue

@@ -120,7 +120,7 @@ import {
 	UpdatedIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Checkbox, NewModal, ServerInfoLabels } from '@modrinth/ui'
+import { ButtonStyled, Checkbox, NewModal, ServerInfoLabels, useVIntl } from '@modrinth/ui'
 import type { PowerAction as ServerPowerAction, ServerState } from '@modrinth/utils'
 import { useStorage } from '@vueuse/core'
 import { computed, ref } from 'vue'

apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue

@@ -213,6 +213,7 @@ import {
 	injectNotificationManager,
 	NewModal,
 	Toggle,
+	useVIntl,
 } from '@modrinth/ui'
 import { type Loaders, ModrinthServersFetchError } from '@modrinth/utils'
 import { $fetch } from 'ofetch'

apps/frontend/src/components/ui/servers/ServerInstallation.vue

@@ -159,7 +159,7 @@
 
 <script setup lang="ts">
 import { CompassIcon, InfoIcon, SettingsIcon, TransferIcon, UploadIcon } from '@modrinth/assets'
-import { ButtonStyled, NewProjectCard } from '@modrinth/ui'
+import { ButtonStyled, NewProjectCard, useVIntl } from '@modrinth/ui'
 import type { Loaders } from '@modrinth/utils'
 
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ButtonStyled, ServersSpecs } from '@modrinth/ui'
+import type { MessageDescriptor } from '@modrinth/ui'
+import { ButtonStyled, defineMessage, ServersSpecs, useVIntl } from '@modrinth/ui'
 import { formatPrice } from '@modrinth/utils'
-import type { MessageDescriptor } from '@vintl/vintl'
 
 const { formatMessage, locale } = useVIntl()
 

apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue

@@ -7,9 +7,9 @@ import {
 	ServerNotice,
 	TagItem,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
 import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
-import { useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 
 const { formatMessage } = useVIntl()

apps/frontend/src/composables/generated.ts

@@ -35,6 +35,7 @@ export interface GeneratedState extends Labrinth.State.GeneratedState {
 	// Metadata
 	lastGenerated?: string
 	apiUrl?: string
+	buildYear: number
 }
 
 /**
@@ -121,4 +122,6 @@ export const useGeneratedState = () =>
 		lastGenerated: generatedState.lastGenerated,
 		apiUrl: generatedState.apiUrl,
 		errors: generatedState.errors,
+
+		buildYear: new Date().getFullYear(),
 	}))

apps/frontend/src/error.vue

@@ -53,13 +53,14 @@
 <script setup>
 import { SadRinthbot } from '@modrinth/assets'
 import {
+	defineMessage,
+	IntlFormatted,
 	NotificationPanel,
 	provideModrinthClient,
 	provideNotificationManager,
 	providePageContext,
+	useVIntl,
 } from '@modrinth/ui'
-import { defineMessage, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 
 import Logo404 from '~/assets/images/404.svg'
 

apps/frontend/src/i18n.config.ts

@@ -0,0 +1,15 @@
+import { buildLocaleMessages, createMessageCompiler, type CrowdinMessages } from '@modrinth/ui'
+
+const localeModules = import.meta.glob<{ default: CrowdinMessages }>('./locales/*/index.json', {
+	eager: true,
+})
+
+export default defineI18nConfig(() => ({
+	legacy: false,
+	locale: 'en-US',
+	fallbackLocale: 'en-US',
+	messageCompiler: createMessageCompiler(),
+	missingWarn: false,
+	fallbackWarn: false,
+	messages: buildLocaleMessages(localeModules),
+}))

apps/frontend/src/layouts/default.vue

@@ -821,93 +821,7 @@
 			<BatchCreditModal v-if="auth.user && isAdmin(auth.user)" ref="modal_batch_credit" />
 			<slot id="main" />
 		</main>
-		<footer
+		<ModrinthFooter />
-			class="footer-brand-background experimental-styles-within border-0 border-t-[1px] border-solid"
-		>
-			<div class="mx-auto flex max-w-screen-xl flex-col gap-6 p-6 pb-20 sm:px-12 md:py-12">
-				<div
-					class="grid grid-cols-1 gap-4 text-primary md:grid-cols-[1fr_2fr] lg:grid-cols-[auto_auto_auto_auto_auto]"
-				>
-					<div
-						class="flex flex-col items-center gap-3 md:items-start"
-						role="region"
-						:aria-label="formatMessage(messages.modrinthInformation)"
-					>
-						<TextLogo
-							aria-hidden="true"
-							class="text-logo button-base h-6 w-auto text-contrast lg:h-8"
-							@click="developerModeIncrement()"
-						/>
-						<div class="flex flex-wrap justify-center gap-px sm:-mx-2">
-							<ButtonStyled
-								v-for="(social, index) in socialLinks"
-								:key="`footer-social-${index}`"
-								circular
-								type="transparent"
-							>
-								<a
-									v-tooltip="social.label"
-									:href="social.href"
-									target="_blank"
-									:rel="`noopener${social.rel ? ` ${social.rel}` : ''}`"
-								>
-									<component :is="social.icon" class="h-5 w-5" />
-								</a>
-							</ButtonStyled>
-						</div>
-						<div class="mt-auto flex flex-wrap justify-center gap-3 md:flex-col">
-							<p class="m-0">
-								<IntlFormatted :message-id="footerMessages.openSource">
-									<template #github-link="{ children }">
-										<a
-											href="https://github.com/modrinth/code"
-											class="text-brand hover:underline"
-											target="_blank"
-											rel="noopener"
-										>
-											<component :is="() => children" />
-										</a>
-									</template>
-								</IntlFormatted>
-							</p>
-							<p class="m-0">
-								{{ formatMessage(footerMessages.copyright, { year: currentYear }) }}
-							</p>
-						</div>
-					</div>
-					<div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:contents">
-						<div
-							v-for="group in footerLinks"
-							:key="group.label"
-							class="flex flex-col items-center gap-3 sm:items-start"
-						>
-							<h3 class="m-0 text-base text-contrast">{{ group.label }}</h3>
-							<template v-for="item in group.links" :key="item.label">
-								<nuxt-link
-									v-if="item.href.startsWith('/')"
-									:to="item.href"
-									class="w-fit hover:underline"
-								>
-									{{ item.label }}
-								</nuxt-link>
-								<a
-									v-else
-									:href="item.href"
-									class="w-fit hover:underline"
-									target="_blank"
-									rel="noopener"
-								>
-									{{ item.label }}
-								</a>
-							</template>
-						</div>
-					</div>
-				</div>
-				<div class="flex justify-center text-center text-xs font-medium text-secondary opacity-50">
-					{{ formatMessage(footerMessages.legalDisclaimer) }}
-				</div>
-			</div>
-		</footer>
 	</div>
 </template>
 <script setup>
@@ -915,7 +829,6 @@ import {
 	AffiliateIcon,
 	ArrowBigUpDashIcon,
 	BellIcon,
-	BlueskyIcon,
 	BookTextIcon,
 	BoxIcon,
 	BracesIcon,
@@ -923,12 +836,10 @@ import {
 	CollectionIcon,
 	CompassIcon,
 	CurrencyIcon,
-	DiscordIcon,
 	DownloadIcon,
 	DropdownIcon,
 	FileIcon,
 	FileTextIcon,
-	GithubIcon,
 	GlassesIcon,
 	HamburgerIcon,
 	HomeIcon,
@@ -936,7 +847,6 @@ import {
 	LibraryIcon,
 	LogInIcon,
 	LogOutIcon,
-	MastodonIcon,
 	MessageIcon,
 	ModrinthIcon,
 	MoonIcon,
@@ -952,7 +862,6 @@ import {
 	SettingsIcon,
 	ShieldAlertIcon,
 	SunIcon,
-	TwitterIcon,
 	UserIcon,
 	UserSearchIcon,
 	XIcon,
@@ -963,12 +872,13 @@ import {
 	ButtonStyled,
 	commonMessages,
 	commonProjectTypeCategoryMessages,
+	defineMessages,
 	injectNotificationManager,
 	OverflowMenu,
 	PagewideBanner,
+	useVIntl,
 } from '@modrinth/ui'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
-import { IntlFormatted } from '@vintl/vintl/components'
 
 import TextLogo from '~/components/brand/TextLogo.vue'
 import BatchCreditModal from '~/components/ui/admin/BatchCreditModal.vue'
@@ -976,6 +886,7 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import CreatorTaxFormModal from '~/components/ui/dashboard/CreatorTaxFormModal.vue'
+import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
 import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
@@ -1196,10 +1107,6 @@ const messages = defineMessages({
 		id: 'layout.nav.modrinth-home-page',
 		defaultMessage: 'Modrinth home page',
 	},
-	modrinthInformation: {
-		id: 'layout.footer.modrinth-information',
-		defaultMessage: 'Modrinth information',
-	},
 	createNew: {
 		id: 'layout.action.create-new',
 		defaultMessage: 'Create new...',
@@ -1294,22 +1201,6 @@ const messages = defineMessages({
 	},
 })
 
-const footerMessages = defineMessages({
-	openSource: {
-		id: 'layout.footer.open-source',
-		defaultMessage: 'Modrinth is <github-link>open source</github-link>.',
-	},
-	legalDisclaimer: {
-		id: 'layout.footer.legal-disclaimer',
-		defaultMessage:
-			'NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT.',
-	},
-	copyright: {
-		id: 'layout.footer.copyright',
-		defaultMessage: '© {year} Rinth, Inc.',
-	},
-})
-
 useHead({
 	link: [
 		{
@@ -1348,10 +1239,6 @@ useSeoMeta({
 	twitterSite: '@modrinth',
 })
 
-const developerModeCounter = ref(0)
-
-const currentYear = new Date().getFullYear()
-
 const isMobileMenuOpen = ref(false)
 const isBrowseMenuOpen = ref(false)
 const navRoutes = computed(() => [
@@ -1547,29 +1434,6 @@ watch(
 	},
 )
 
-function developerModeIncrement() {
-	if (developerModeCounter.value >= 5) {
-		flags.value.developerMode = !flags.value.developerMode
-		developerModeCounter.value = 0
-		saveFeatureFlags()
-		if (flags.value.developerMode) {
-			addNotification({
-				title: 'Developer mode activated',
-				text: 'Developer mode has been enabled',
-				type: 'success',
-			})
-		} else {
-			addNotification({
-				title: 'Developer mode deactivated',
-				text: 'Developer mode has been disabled',
-				type: 'success',
-			})
-		}
-	} else {
-		developerModeCounter.value++
-	}
-}
-
 async function logoutUser() {
 	await logout()
 }
@@ -1620,196 +1484,6 @@ function hideRussiaCensorshipBanner() {
 	flags.value.hideRussiaCensorshipBanner = true
 	saveFeatureFlags()
 }
-
-const socialLinks = [
-	{
-		label: formatMessage(
-			defineMessage({ id: 'layout.footer.social.discord', defaultMessage: 'Discord' }),
-		),
-		href: 'https://discord.modrinth.com',
-		icon: DiscordIcon,
-	},
-	{
-		label: formatMessage(
-			defineMessage({ id: 'layout.footer.social.bluesky', defaultMessage: 'Bluesky' }),
-		),
-		href: 'https://bsky.app/profile/modrinth.com',
-		icon: BlueskyIcon,
-	},
-	{
-		label: formatMessage(
-			defineMessage({ id: 'layout.footer.social.mastodon', defaultMessage: 'Mastodon' }),
-		),
-		href: 'https://floss.social/@modrinth',
-		icon: MastodonIcon,
-		rel: 'me',
-	},
-	{
-		label: formatMessage(defineMessage({ id: 'layout.footer.social.x', defaultMessage: 'X' })),
-		href: 'https://x.com/modrinth',
-		icon: TwitterIcon,
-	},
-	{
-		label: formatMessage(
-			defineMessage({ id: 'layout.footer.social.github', defaultMessage: 'GitHub' }),
-		),
-		href: 'https://github.com/modrinth',
-		icon: GithubIcon,
-	},
-]
-
-const footerLinks = [
-	{
-		label: formatMessage(defineMessage({ id: 'layout.footer.about', defaultMessage: 'About' })),
-		links: [
-			{
-				href: '/news',
-				label: formatMessage(
-					defineMessage({ id: 'layout.footer.about.news', defaultMessage: 'News' }),
-				),
-			},
-			{
-				href: '/news/changelog',
-				label: formatMessage(
-					defineMessage({ id: 'layout.footer.about.changelog', defaultMessage: 'Changelog' }),
-				),
-			},
-			{
-				href: 'https://status.modrinth.com',
-				label: formatMessage(
-					defineMessage({ id: 'layout.footer.about.status', defaultMessage: 'Status' }),
-				),
-			},
-			{
-				href: 'https://careers.modrinth.com',
-				label: formatMessage(
-					defineMessage({ id: 'layout.footer.about.careers', defaultMessage: 'Careers' }),
-				),
-			},
-			{
-				href: '/legal/cmp-info',
-				label: formatMessage(
-					defineMessage({
-						id: 'layout.footer.about.rewards-program',
-						defaultMessage: 'Rewards Program',
-					}),
-				),
-			},
-		],
-	},
-	{
-		label: formatMessage(
-			defineMessage({ id: 'layout.footer.products', defaultMessage: 'Products' }),
-		),
-		links: [
-			{
-				href: '/plus',
-				label: formatMessage(
-					defineMessage({ id: 'layout.footer.products.plus', defaultMessage: 'Modrinth+' }),
-				),
-			},
-			{
-				href: '/app',
-				label: formatMessage(
-					defineMessage({ id: 'layout.footer.products.app', defaultMessage: 'Modrinth App' }),
-				),
-			},
-			{
-				href: '/hosting',
-				label: formatMessage(
-					defineMessage({
-						id: 'layout.footer.products.servers',
-						defaultMessage: 'Modrinth Hosting',
-					}),
-				),
-			},
-		],
-	},
-	{
-		label: formatMessage(
-			defineMessage({ id: 'layout.footer.resources', defaultMessage: 'Resources' }),
-		),
-		links: [
-			{
-				href: 'https://support.modrinth.com',
-				label: formatMessage(
-					defineMessage({
-						id: 'layout.footer.resources.help-center',
-						defaultMessage: 'Help Center',
-					}),
-				),
-			},
-			{
-				href: 'https://translate.modrinth.com',
-				label: formatMessage(
-					defineMessage({ id: 'layout.footer.resources.translate', defaultMessage: 'Translate' }),
-				),
-			},
-			{
-				href: 'https://github.com/modrinth/code/issues',
-				label: formatMessage(
-					defineMessage({
-						id: 'layout.footer.resources.report-issues',
-						defaultMessage: 'Report issues',
-					}),
-				),
-			},
-			{
-				href: 'https://docs.modrinth.com/api/',
-				label: formatMessage(
-					defineMessage({
-						id: 'layout.footer.resources.api-docs',
-						defaultMessage: 'API documentation',
-					}),
-				),
-			},
-		],
-	},
-	{
-		label: formatMessage(defineMessage({ id: 'layout.footer.legal', defaultMessage: 'Legal' })),
-		links: [
-			{
-				href: '/legal/rules',
-				label: formatMessage(
-					defineMessage({ id: 'layout.footer.legal.rules', defaultMessage: 'Content Rules' }),
-				),
-			},
-			{
-				href: '/legal/terms',
-				label: formatMessage(
-					defineMessage({ id: 'layout.footer.legal.terms-of-use', defaultMessage: 'Terms of Use' }),
-				),
-			},
-			{
-				href: '/legal/privacy',
-				label: formatMessage(
-					defineMessage({
-						id: 'layout.footer.legal.privacy-policy',
-						defaultMessage: 'Privacy Policy',
-					}),
-				),
-			},
-			{
-				href: '/legal/security',
-				label: formatMessage(
-					defineMessage({
-						id: 'layout.footer.legal.security-notice',
-						defaultMessage: 'Security Notice',
-					}),
-				),
-			},
-			{
-				href: '/legal/copyright',
-				label: formatMessage(
-					defineMessage({
-						id: 'layout.footer.legal.copyright-policy',
-						defaultMessage: 'Copyright Policy and DMCA',
-					}),
-				),
-			},
-		],
-	},
-]
 </script>
 
 <style lang="scss">
@@ -2050,11 +1724,6 @@ const footerLinks = [
 	}
 }
 
-.footer-brand-background {
-	background: var(--brand-gradient-strong-bg);
-	border-color: var(--brand-gradient-border);
-}
-
 .over-the-top-random-animation {
 	position: fixed;
 	z-index: 100;

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

@@ -1364,9 +1364,6 @@
   "layout.footer.about.status": {
     "message": "Status"
   },
-  "layout.footer.copyright": {
-    "message": "© {year} Rinth, Inc."
-  },
   "layout.footer.legal": {
     "message": "Legal"
   },
@@ -2813,18 +2810,9 @@
   "settings.display.theme.title": {
     "message": "Color theme"
   },
-  "settings.language.categories.auto": {
-    "message": "Automatic"
-  },
   "settings.language.categories.default": {
     "message": "Standard languages"
   },
-  "settings.language.categories.experimental": {
-    "message": "Experimental languages"
-  },
-  "settings.language.categories.fun": {
-    "message": "Fun languages"
-  },
   "settings.language.categories.search-result": {
     "message": "Search results"
   },
@@ -2834,18 +2822,6 @@
   "settings.language.languages.automatic": {
     "message": "Sync with the system language"
   },
-  "settings.language.languages.language-label-applying": {
-    "message": "{label}. Applying..."
-  },
-  "settings.language.languages.language-label-error": {
-    "message": "{label}. Error"
-  },
-  "settings.language.languages.load-failed": {
-    "message": "Cannot load this language. Try again in a bit."
-  },
-  "settings.language.languages.search-field.description": {
-    "message": "Submit to focus the first search result"
-  },
   "settings.language.languages.search-field.placeholder": {
     "message": "Search for a language..."
   },

apps/frontend/src/pages/[type]/[id].vue

@@ -970,7 +970,9 @@ import {
 	ButtonStyled,
 	Checkbox,
 	commonMessages,
+	defineMessages,
 	injectNotificationManager,
+	IntlFormatted,
 	NewModal,
 	OverflowMenu,
 	PopoutMenu,
@@ -985,10 +987,10 @@ import {
 	ServersPromo,
 	TagItem,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
 import VersionSummary from '@modrinth/ui/src/components/version/VersionSummary.vue'
 import { formatCategory, formatPrice, formatProjectType, renderString } from '@modrinth/utils'
-import { IntlFormatted } from '@vintl/vintl/components'
 import { useLocalStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'

apps/frontend/src/pages/[type]/[id]/settings.vue

@@ -14,9 +14,9 @@ import {
 	commonMessages,
 	commonProjectSettingsMessages,
 	injectNotificationManager,
+	useVIntl,
 } from '@modrinth/ui'
 import type { Project, ProjectV3Partial } from '@modrinth/utils'
-import { useVIntl } from '@vintl/vintl'
 import { useLocalStorage, useScroll } from '@vueuse/core'
 import { computed } from 'vue'
 

apps/frontend/src/pages/[type]/[id]/settings/environment.vue

@@ -3,14 +3,15 @@ import { CheckIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	commonProjectSettingsMessages,
+	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
 	ProjectSettingsEnvSelector,
 	UnsavedChangesPopup,
 	useSavable,
+	useVIntl,
 } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 
 const { formatMessage } = useVIntl()
 

apps/frontend/src/pages/[type]/[id]/settings/general.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import {
+	defineMessages,
 	IconSelect,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
+	type MessageDescriptor,
 	SettingsLabel,
 	UnsavedChangesPopup,
 	useSavable,
+	useVIntl,
 } from '@modrinth/ui'
-import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 
 const { formatMessage } = useVIntl()
 

apps/frontend/src/pages/admin/billing/[id].vue

@@ -326,11 +326,13 @@ import {
 	Avatar,
 	ButtonStyled,
 	CopyCode,
+	defineMessages,
 	DropdownSelect,
 	injectNotificationManager,
 	NewModal,
 	Toggle,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
 import { formatCategory, formatPrice } from '@modrinth/utils'
 import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'

apps/frontend/src/pages/admin/servers/notices.vue

@@ -267,16 +267,17 @@ import {
 	Combobox,
 	commonMessages,
 	CopyCode,
+	defineMessages,
 	injectNotificationManager,
 	NewModal,
 	ServerNotice,
 	TagItem,
 	Toggle,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
 import { NOTICE_LEVELS } from '@modrinth/ui/src/utils/notices.ts'
 import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
-import { useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 

apps/frontend/src/pages/app.vue

@@ -8,9 +8,15 @@ import {
 	SendIcon,
 	TrashIcon,
 } from '@modrinth/assets'
-import { Avatar, Badge, Checkbox, commonMessages } from '@modrinth/ui'
+import {
-import { defineMessages, useVIntl } from '@vintl/vintl'
+	Avatar,
-import { IntlFormatted } from '@vintl/vintl/components'
+	Badge,
+	Checkbox,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	useVIntl,
+} from '@modrinth/ui'
 
 import ATLauncher from '~/assets/images/external/atlauncher.svg?component'
 import CurseForge from '~/assets/images/external/curseforge.svg?component'

apps/frontend/src/pages/auth/authorize.vue

@@ -85,10 +85,12 @@ import {
 	Avatar,
 	Button,
 	commonMessages,
+	defineMessages,
 	injectNotificationManager,
+	IntlFormatted,
 	normalizeChildren,
+	useVIntl,
 } from '@modrinth/ui'
-import { IntlFormatted } from '@vintl/vintl/components'
 
 import { useAuth } from '@/composables/auth.js'
 import { useScopes } from '@/composables/auth/scopes.ts'

apps/frontend/src/pages/auth/reset-password.vue

@@ -68,7 +68,7 @@
 </template>
 <script setup>
 import { KeyIcon, MailIcon, SendIcon } from '@modrinth/assets'
-import { commonMessages, injectNotificationManager } from '@modrinth/ui'
+import { commonMessages, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
 
 import HCaptcha from '@/components/ui/HCaptcha.vue'
 

apps/frontend/src/pages/auth/sign-in.vue

@@ -140,8 +140,13 @@ import {
 	RightArrowIcon,
 	SteamColorIcon,
 } from '@modrinth/assets'
-import { commonMessages, injectNotificationManager } from '@modrinth/ui'
+import {
-import { IntlFormatted } from '@vintl/vintl/components'
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	IntlFormatted,
+	useVIntl,
+} from '@modrinth/ui'
 
 import HCaptcha from '@/components/ui/HCaptcha.vue'
 import { getAuthUrl, getLauncherRedirectUrl } from '@/composables/auth.js'

apps/frontend/src/pages/auth/sign-up.vue

@@ -145,8 +145,14 @@ import {
 	SteamColorIcon,
 	UserIcon,
 } from '@modrinth/assets'
-import { Checkbox, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import {
-import { IntlFormatted } from '@vintl/vintl/components'
+	Checkbox,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	IntlFormatted,
+	useVIntl,
+} from '@modrinth/ui'
 
 import HCaptcha from '@/components/ui/HCaptcha.vue'
 import { getAuthUrl } from '@/composables/auth.js'

apps/frontend/src/pages/auth/verify-email.vue

@@ -64,7 +64,7 @@
 </template>
 <script setup>
 import { RightArrowIcon, SettingsIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()

apps/frontend/src/pages/auth/welcome.vue

@@ -49,8 +49,14 @@
 
 <script setup>
 import { RightArrowIcon, WavingRinthbot } from '@modrinth/assets'
-import { Checkbox, commonMessages, normalizeChildren } from '@modrinth/ui'
+import {
-import { IntlFormatted } from '@vintl/vintl/components'
+	Checkbox,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	normalizeChildren,
+	useVIntl,
+} from '@modrinth/ui'
 
 const route = useRoute()
 

apps/frontend/src/pages/collection/[id].vue

@@ -381,10 +381,13 @@ import {
 	commonProjectTypeCategoryMessages,
 	commonProjectTypeSentenceMessages,
 	ConfirmModal,
+	defineMessage,
+	defineMessages,
 	FileInput,
 	HorizontalRule,
 	injectModrinthClient,
 	injectNotificationManager,
+	IntlFormatted,
 	NewModal,
 	normalizeChildren,
 	NormalPage,
@@ -393,10 +396,9 @@ import {
 	SidebarCard,
 	useRelativeTime,
 	useSavable,
+	useVIntl,
 } from '@modrinth/ui'
 import { isAdmin } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 import dayjs from 'dayjs'
 
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'

apps/frontend/src/pages/dashboard.vue

@@ -43,7 +43,7 @@ import {
 	OrganizationIcon,
 	ReportIcon,
 } from '@modrinth/assets'
-import { commonMessages } from '@modrinth/ui'
+import { commonMessages, useVIntl } from '@modrinth/ui'
 import { type User, UserBadge } from '@modrinth/utils'
 
 import NavStack from '~/components/ui/NavStack.vue'

apps/frontend/src/pages/dashboard/affiliate-links.vue

@@ -71,10 +71,11 @@ import {
 	Button,
 	ButtonStyled,
 	ConfirmModal,
+	defineMessages,
 	injectNotificationManager,
+	useVIntl,
 } from '@modrinth/ui'
 import type { AffiliateLink } from '@modrinth/utils'
-import { useVIntl } from '@vintl/vintl'
 
 const createModal = useTemplateRef<typeof AffiliateLinkCreateModal>('createModal')
 const revokeModal = useTemplateRef<typeof ConfirmModal>('revokeModal')

apps/frontend/src/pages/dashboard/collections.vue

@@ -106,7 +106,7 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, commonMessages } from '@modrinth/ui'
+import { Avatar, Button, commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
 
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 

apps/frontend/src/pages/dashboard/projects.vue

@@ -335,6 +335,7 @@ import {
 	injectNotificationManager,
 	NewModal,
 	ProjectStatusBadge,
+	useVIntl,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
 import { Multiselect } from 'vue-multiselect'

apps/frontend/src/pages/dashboard/revenue/index.vue

@@ -260,8 +260,8 @@
 
 <script setup lang="ts">
 import { ArrowUpRightIcon, InProgressIcon, UnknownIcon } from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
 

apps/frontend/src/pages/dashboard/revenue/transfers.vue

@@ -90,9 +90,8 @@ import {
 	GenericListIcon,
 	SpinnerIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Combobox } from '@modrinth/ui'
+import { ButtonStyled, Combobox, defineMessages, useVIntl } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 
 import RevenueTransaction from '~/components/ui/dashboard/RevenueTransaction.vue'

apps/frontend/src/pages/discover.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { commonProjectTypeCategoryMessages } from '@modrinth/ui'
+import { commonProjectTypeCategoryMessages, useVIntl } from '@modrinth/ui'
-import { useVIntl } from '@vintl/vintl'
 
 import NavTabs from '~/components/ui/NavTabs.vue'
+
 const { formatMessage } = useVIntl()
 
 const flags = useFeatureFlags()

apps/frontend/src/pages/discover/[type]/index.vue

@@ -12,6 +12,7 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@modrinth/ui'
 import {
 	Avatar,
 	Button,

apps/frontend/src/pages/frog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRelativeTime } from '@modrinth/ui'
+import { defineMessages, useRelativeTime, useVIntl } from '@modrinth/ui'
 
 const vintl = useVIntl()
 const { formatMessage } = vintl

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

@@ -651,10 +651,10 @@ import {
 	commonMessages,
 	injectNotificationManager,
 	ModrinthServersPurchaseModal,
+	useVIntl,
 } from '@modrinth/ui'
 import { monthsInInterval } from '@modrinth/ui/src/utils/billing.ts'
 import { formatPrice } from '@modrinth/utils'
-import { useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
 
 import { useBaseFetch } from '@/composables/fetch.js'

apps/frontend/src/pages/hosting/manage/[id].vue

@@ -385,8 +385,10 @@ import {
 	SettingsIcon,
 	TransferIcon,
 } from '@modrinth/assets'
+import type { MessageDescriptor } from '@modrinth/ui'
 import {
 	ButtonStyled,
+	defineMessage,
 	ErrorInformationCard,
 	injectModrinthClient,
 	injectNotificationManager,
@@ -397,7 +399,6 @@ import {
 } from '@modrinth/ui'
 import type { PowerAction, Stats } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import type { MessageDescriptor } from '@vintl/vintl'
 import DOMPurify from 'dompurify'
 import { computed, onMounted, onUnmounted, type Reactive, reactive, ref } from 'vue'
 

apps/frontend/src/pages/index.vue

@@ -439,9 +439,15 @@ import {
 	ModrinthIcon,
 	SearchIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages, useRelativeTime } from '@modrinth/ui'
+import {
-import { defineMessages, useVIntl } from '@vintl/vintl'
+	Avatar,
-import { IntlFormatted } from '@vintl/vintl/components'
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	useRelativeTime,
+	useVIntl,
+} from '@modrinth/ui'
 import { ref } from 'vue'
 import { Multiselect } from 'vue-multiselect'
 

apps/frontend/src/pages/moderation.vue

@@ -18,8 +18,7 @@
 
 <script setup lang="ts">
 import { FolderIcon, ReportIcon, ShieldCheckIcon } from '@modrinth/assets'
-import { Chips } from '@modrinth/ui'
+import { Chips, defineMessages, useVIntl } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 
 import NavTabs from '@/components/ui/NavTabs.vue'
 

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

@@ -105,8 +105,15 @@ import {
 	SortDescIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, ButtonStyled, Combobox, type ComboboxOption, Pagination } from '@modrinth/ui'
+import {
-import { defineMessages, useVIntl } from '@vintl/vintl'
+	Button,
+	ButtonStyled,
+	Combobox,
+	type ComboboxOption,
+	defineMessages,
+	Pagination,
+	useVIntl,
+} from '@modrinth/ui'
 import Fuse from 'fuse.js'
 import ConfettiExplosion from 'vue-confetti-explosion'
 

apps/frontend/src/pages/moderation/reports/index.vue

@@ -78,9 +78,15 @@
 <script setup lang="ts">
 import { ListFilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
 import type { ExtendedReport } from '@modrinth/moderation'
-import { Button, Combobox, type ComboboxOption, Pagination } from '@modrinth/ui'
+import {
+	Button,
+	Combobox,
+	type ComboboxOption,
+	defineMessages,
+	Pagination,
+	useVIntl,
+} from '@modrinth/ui'
 import type { Report } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import Fuse from 'fuse.js'
 
 import ReportCard from '~/components/ui/moderation/ModerationReportCard.vue'

apps/frontend/src/pages/moderation/technical-review.vue

@@ -5,11 +5,12 @@ import {
 	Button,
 	Combobox,
 	type ComboboxOption,
+	defineMessages,
 	injectModrinthClient,
 	Pagination,
+	useVIntl,
 } from '@modrinth/ui'
 import { useInfiniteQuery, useQueryClient } from '@tanstack/vue-query'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import Fuse from 'fuse.js'
 
 import MaliciousSummaryModal, {

apps/frontend/src/pages/organization/[id].vue

@@ -261,7 +261,14 @@ import {
 	UsersIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages, ContentPageHeader, OverflowMenu } from '@modrinth/ui'
+import {
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	ContentPageHeader,
+	OverflowMenu,
+	useVIntl,
+} from '@modrinth/ui'
 import type { Organization, ProjectStatus, ProjectType, ProjectV3 } from '@modrinth/utils'
 import { formatNumber } from '@modrinth/utils'
 

apps/frontend/src/pages/organization/[id]/settings/projects.vue

@@ -334,6 +334,7 @@ import {
 	injectNotificationManager,
 	NewModal,
 	ProjectStatusBadge,
+	useVIntl,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
 import { Multiselect } from 'vue-multiselect'

apps/frontend/src/pages/plus.vue

@@ -86,7 +86,7 @@
 </template>
 <script setup>
 import { HeartIcon, ModrinthPlusIcon, SettingsIcon, SparklesIcon, StarIcon } from '@modrinth/assets'
-import { injectNotificationManager, PurchaseModal } from '@modrinth/ui'
+import { injectNotificationManager, PurchaseModal, useVIntl } from '@modrinth/ui'
 import { calculateSavings, formatPrice, getCurrency } from '@modrinth/utils'
 
 import { useBaseFetch } from '@/composables/fetch.js'

apps/frontend/src/pages/report.vue

@@ -281,18 +281,21 @@ import {
 	VersionIcon,
 	XCircleIcon,
 } from '@modrinth/assets'
+import { defineMessage } from '@modrinth/ui'
 import {
 	AutoLink,
 	Avatar,
 	ButtonStyled,
+	defineMessages,
 	injectNotificationManager,
+	IntlFormatted,
 	MarkdownEditor,
+	type MessageDescriptor,
 	RadialHeader,
 	RadioButtons,
+	useVIntl,
 } from '@modrinth/ui'
 import type { Project, Report, User, Version } from '@modrinth/utils'
-import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 
 import { useImageUpload } from '~/composables/image-upload.ts'
 

apps/frontend/src/pages/settings.vue

@@ -95,7 +95,7 @@ import {
 	ShieldIcon,
 	UserIcon,
 } from '@modrinth/assets'
-import { commonMessages, commonSettingsMessages } from '@modrinth/ui'
+import { commonMessages, commonSettingsMessages, useVIntl } from '@modrinth/ui'
 
 import NavStack from '~/components/ui/NavStack.vue'
 

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

@@ -226,6 +226,7 @@ import {
 	CopyCode,
 	FileInput,
 	injectNotificationManager,
+	useVIntl,
 } from '@modrinth/ui'
 
 import Modal from '~/components/ui/Modal.vue'

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

@@ -95,6 +95,7 @@ import {
 	commonSettingsMessages,
 	ConfirmModal,
 	injectNotificationManager,
+	useVIntl,
 } from '@modrinth/ui'
 
 import { useScopes } from '~/composables/auth/scopes.ts'

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

@@ -38,7 +38,7 @@
 	</div>
 </template>
 <script setup>
-import { Badge, Breadcrumbs } from '@modrinth/ui'
+import { Badge, Breadcrumbs, useVIntl } from '@modrinth/ui'
 import { formatPrice } from '@modrinth/utils'
 
 import { products } from '~/generated/state.json'

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

@@ -617,11 +617,13 @@ import {
 	commonMessages,
 	ConfirmModal,
 	CopyCode,
+	defineMessages,
 	getPaymentMethodIcon,
 	injectNotificationManager,
 	OverflowMenu,
 	PurchaseModal,
 	ServerListing,
+	useVIntl,
 } from '@modrinth/ui'
 import { calculateSavings, formatPrice, getCurrency } from '@modrinth/utils'
 import { computed, ref } from 'vue'

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

@@ -205,10 +205,16 @@
 
 <script setup lang="ts">
 import { CodeIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, normalizeChildren, ThemeSelector } from '@modrinth/ui'
+import {
+	Button,
+	defineMessages,
+	injectNotificationManager,
+	IntlFormatted,
+	normalizeChildren,
+	ThemeSelector,
+	useVIntl,
+} from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 
 import MessageBanner from '~/components/ui/MessageBanner.vue'
 import type { DisplayLocation } from '~/plugins/cosmetics'

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

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { IssuesIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
+import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
-import { Admonition, commonSettingsMessages } from '@modrinth/ui'
+import {
-import { IntlFormatted } from '@vintl/vintl/components'
+	Admonition,
+	commonSettingsMessages,
+	defineMessages,
+	IntlFormatted,
+	useVIntl,
+} from '@modrinth/ui'
 import Fuse from 'fuse.js/dist/fuse.basic'
 
 import { isModifierKeyDown } from '~/helpers/events.ts'
 
-const vintl = useVIntl()
+const { formatMessage } = useVIntl()
-const { formatMessage } = vintl
+const { locale, setLocale, locales } = useI18n()
 
 const messages = defineMessages({
 	languagesDescription: {
@@ -23,10 +28,6 @@ const messages = defineMessages({
 		id: 'settings.language.languages.search.no-results',
 		defaultMessage: 'No languages match your search.',
 	},
-	searchFieldDescription: {
-		id: 'settings.language.languages.search-field.description',
-		defaultMessage: 'Submit to focus the first search result',
-	},
 	searchFieldPlaceholder: {
 		id: 'settings.language.languages.search-field.placeholder',
 		defaultMessage: 'Search for a language...',
@@ -36,18 +37,6 @@ const messages = defineMessages({
 		defaultMessage:
 			'{matches, plural, =0 {No languages match} one {# language matches} other {# languages match}} your search.',
 	},
-	loadFailed: {
-		id: 'settings.language.languages.load-failed',
-		defaultMessage: 'Cannot load this language. Try again in a bit.',
-	},
-	languageLabelApplying: {
-		id: 'settings.language.languages.language-label-applying',
-		defaultMessage: '{label}. Applying...',
-	},
-	languageLabelError: {
-		id: 'settings.language.languages.language-label-error',
-		defaultMessage: '{label}. Error',
-	},
 	languageWarning: {
 		id: 'settings.language.warning',
 		defaultMessage:
@@ -56,22 +45,10 @@ const messages = defineMessages({
 })
 
 const categoryNames = defineMessages({
-	auto: {
-		id: 'settings.language.categories.auto',
-		defaultMessage: 'Automatic',
-	},
 	default: {
 		id: 'settings.language.categories.default',
 		defaultMessage: 'Standard languages',
 	},
-	fun: {
-		id: 'settings.language.categories.fun',
-		defaultMessage: 'Fun languages',
-	},
-	experimental: {
-		id: 'settings.language.categories.experimental',
-		defaultMessage: 'Experimental languages',
-	},
 	searchResult: {
 		id: 'settings.language.categories.search-result',
 		defaultMessage: 'Search results',
@@ -80,97 +57,46 @@ const categoryNames = defineMessages({
 
 type Category = keyof typeof categoryNames
 
-const categoryOrder: Category[] = ['auto', 'default', 'fun', 'experimental']
+type LocaleInfo = {
-
-function normalizeCategoryName(name?: string): keyof typeof categoryNames {
-	switch (name) {
-		case 'auto':
-		case 'fun':
-		case 'experimental':
-			return name
-		default:
-			return 'default'
-	}
-}
-
-type LocaleBase = {
 	category: Category
 	tag: string
+	displayName: string
+	nativeName: string
 	searchTerms?: string[]
 }
 
-type AutomaticLocale = LocaleBase & {
+const displayNames = new Intl.DisplayNames(['en'], { type: 'language' })
-	auto: true
-}
-
-type CommonLocale = LocaleBase & {
-	auto?: never
-	displayName: string
-	defaultName: string
-	translatedName: string
-}
-
-type Locale = AutomaticLocale | CommonLocale
-
-const $defaultNames = useDisplayNames(() => vintl.defaultLocale)
-
-const $translatedNames = useDisplayNames(() => vintl.locale)
 
 const $locales = computed(() => {
-	const locales: Locale[] = []
+	const result: LocaleInfo[] = []
 
-	locales.push({
+	const localeList = Array.isArray(locales.value) ? locales.value : Object.keys(locales.value)
-		auto: true,
-		tag: 'auto',
-		category: 'auto',
-		searchTerms: [
-			'automatic',
-			'Sync with the system language',
-			formatMessage(messages.automaticLocale),
-		],
-	})
 
-	for (const locale of vintl.availableLocales) {
+	for (const loc of localeList) {
-		let displayName = locale.meta?.displayName
+		const tag = typeof loc === 'string' ? loc : loc.code
+		const name = typeof loc === 'object' && loc.name ? loc.name : (displayNames.of(tag) ?? tag)
 
-		if (displayName == null) {
+		const nativeDisplayNames = new Intl.DisplayNames([tag], { type: 'language' })
-			displayName = createDisplayNames(locale.tag).of(locale.tag) ?? locale.tag
+		const nativeName = nativeDisplayNames.of(tag) ?? tag
-		}
 
-		let defaultName = vintl.defaultResources['languages.json']?.[locale.tag]
+		result.push({
-
+			tag,
-		if (defaultName == null) {
+			category: 'default',
-			defaultName = $defaultNames.value.of(locale.tag) ?? locale.tag
+			displayName: name,
-		}
+			nativeName,
-
+			searchTerms: [tag, name, nativeName],
-		let translatedName = vintl.resources['languages.json']?.[locale.tag]
-
-		if (translatedName == null) {
-			translatedName = $translatedNames.value.of(locale.tag) ?? locale.tag
-		}
-
-		let searchTerms = locale.meta?.searchTerms
-		if (searchTerms === '-') searchTerms = undefined
-
-		locales.push({
-			tag: locale.tag,
-			category: normalizeCategoryName(locale.meta?.category),
-			displayName,
-			defaultName,
-			translatedName,
-			searchTerms: searchTerms?.split('\n'),
 		})
 	}
 
-	return locales
+	return result
 })
 
 const $query = ref('')
 
 const isQueryEmpty = () => $query.value.trim().length === 0
 
-const fuse = new Fuse<Locale>([], {
+const fuse = new Fuse<LocaleInfo>([], {
-	keys: ['tag', 'displayName', 'translatedName', 'englishName', 'searchTerms'],
+	keys: ['tag', 'displayName', 'nativeName', 'searchTerms'],
 	threshold: 0.4,
 	distance: 100,
 })
@@ -178,32 +104,13 @@ const fuse = new Fuse<Locale>([], {
 watchSyncEffect(() => fuse.setCollection($locales.value))
 
 const $categories = computed(() => {
-	const categories = new Map<Category, Locale[]>()
+	const categories = new Map<Category, LocaleInfo[]>()
-
+	categories.set('default', $locales.value)
-	for (const category of categoryOrder) categories.set(category, [])
-
-	for (const locale of $locales.value) {
-		let categoryLocales = categories.get(locale.category)
-
-		if (categoryLocales == null) {
-			categoryLocales = []
-			categories.set(locale.category, categoryLocales)
-		}
-
-		categoryLocales.push(locale)
-	}
-
-	for (const categoryKey of [...categories.keys()]) {
-		if (categories.get(categoryKey)?.length === 0) {
-			categories.delete(categoryKey)
-		}
-	}
-
 	return categories
 })
 
 const $searchResults = computed(() => {
-	return new Map<Category, Locale[]>([
+	return new Map<Category, LocaleInfo[]>([
 		['searchResult', isQueryEmpty() ? [] : fuse.search($query.value).map(({ item }) => item)],
 	])
 })
@@ -216,11 +123,9 @@ const $changingTo = ref<string | undefined>()
 
 const isChanging = () => $changingTo.value != null
 
-const $failedLocale = ref<string>()
-
 const $activeLocale = computed(() => {
 	if ($changingTo.value != null) return $changingTo.value
-	return vintl.automatic ? 'auto' : vintl.locale
+	return locale.value
 })
 
 async function changeLocale(value: string) {
@@ -229,10 +134,7 @@ async function changeLocale(value: string) {
 	$changingTo.value = value
 
 	try {
-		await vintl.changeLocale(value)
+		await setLocale(value)
-		$failedLocale.value = undefined
-	} catch {
-		$failedLocale.value = value
 	} finally {
 		$changingTo.value = undefined
 	}
@@ -250,7 +152,7 @@ function onSearchKeydown(e: KeyboardEvent) {
 	focusableTarget?.focus()
 }
 
-function onItemKeydown(e: KeyboardEvent, locale: Locale) {
+function onItemKeydown(e: KeyboardEvent, loc: LocaleInfo) {
 	switch (e.key) {
 		case 'Enter':
 		case ' ':
@@ -261,29 +163,17 @@ function onItemKeydown(e: KeyboardEvent, locale: Locale) {
 
 	if (isModifierKeyDown(e) || isChanging()) return
 
-	changeLocale(locale.tag)
+	changeLocale(loc.tag)
 }
 
-function onItemClick(e: MouseEvent, locale: Locale) {
+function onItemClick(e: MouseEvent, loc: LocaleInfo) {
 	if (isModifierKeyDown(e) || isChanging()) return
 
-	changeLocale(locale.tag)
+	changeLocale(loc.tag)
 }
 
-function getItemLabel(locale: Locale) {
+function getItemLabel(loc: LocaleInfo) {
-	const label = locale.auto
+	return `${loc.nativeName}. ${loc.displayName}`
-		? formatMessage(messages.automaticLocale)
-		: `${locale.translatedName}. ${locale.displayName}`
-
-	if ($changingTo.value === locale.tag) {
-		return formatMessage(messages.languageLabelApplying, { label })
-	}
-
-	if ($failedLocale.value === locale.tag) {
-		return formatMessage(messages.languageLabelError, { label })
-	}
-
-	return label
 }
 </script>
 
@@ -298,7 +188,7 @@ function getItemLabel(locale: Locale) {
 
 			<div class="card-description mt-4">
 				<IntlFormatted :message-id="messages.languagesDescription">
-					<template #crowdin-link="{ children }">
+					<template #~crowdin-link="{ children }">
 						<a href="https://translate.modrinth.com">
 							<component :is="() => children" />
 						</a>
@@ -306,7 +196,7 @@ function getItemLabel(locale: Locale) {
 				</IntlFormatted>
 			</div>
 
-			<div class="search-container">
+			<div v-if="$locales.length > 1" class="search-container">
 				<input
 					id="language-search"
 					v-model="$query"
@@ -314,15 +204,10 @@ function getItemLabel(locale: Locale) {
 					type="search"
 					:placeholder="formatMessage(messages.searchFieldPlaceholder)"
 					class="language-search"
-					aria-describedby="language-search-description"
 					:disabled="isChanging()"
 					@keydown="onSearchKeydown"
 				/>
 
-				<div id="language-search-description" class="visually-hidden">
-					{{ formatMessage(messages.searchFieldDescription) }}
-				</div>
-
 				<div id="language-search-results-announcements" class="visually-hidden" aria-live="polite">
 					{{
 						isQueryEmpty()
@@ -335,59 +220,46 @@ function getItemLabel(locale: Locale) {
 			</div>
 
 			<div ref="$languagesList" class="languages-list">
-				<template v-for="[category, locales] in $displayCategories" :key="category">
+				<template v-for="[category, categoryLocales] in $displayCategories" :key="category">
 					<strong class="category-name">
 						{{ formatMessage(categoryNames[category]) }}
 					</strong>
 
 					<div
-						v-if="category === 'searchResult' && locales.length === 0"
+						v-if="category === 'searchResult' && categoryLocales.length === 0"
 						class="no-results"
 						tabindex="0"
 					>
 						{{ formatMessage(messages.noResults) }}
 					</div>
 
-					<template v-for="locale in locales" :key="locale.tag">
+					<template v-for="loc in categoryLocales" :key="loc.tag">
 						<div
 							role="button"
-							:aria-pressed="$activeLocale === locale.tag"
+							:aria-pressed="$activeLocale === loc.tag"
 							:class="{
 								'language-item': true,
-								pending: $changingTo == locale.tag,
+								pending: $changingTo === loc.tag,
-								errored: $failedLocale == locale.tag,
 							}"
-							:aria-describedby="
+							:aria-disabled="isChanging() && $changingTo !== loc.tag"
-								$failedLocale == locale.tag ? `language__${locale.tag}__fail` : undefined
-							"
-							:aria-disabled="isChanging() && $changingTo !== locale.tag"
 							:tabindex="0"
-							:aria-label="getItemLabel(locale)"
+							:aria-label="getItemLabel(loc)"
-							@click="(e) => onItemClick(e, locale)"
+							@click="(e) => onItemClick(e, loc)"
-							@keydown="(e) => onItemKeydown(e, locale)"
+							@keydown="(e) => onItemKeydown(e, loc)"
 						>
-							<RadioButtonCheckedIcon v-if="$activeLocale === locale.tag" class="radio" />
+							<RadioButtonCheckedIcon v-if="$activeLocale === loc.tag" class="radio" />
 							<RadioButtonIcon v-else class="radio" />
 
 							<div class="language-names">
 								<div class="language-name">
-									{{ locale.auto ? formatMessage(messages.automaticLocale) : locale.displayName }}
+									{{ loc.displayName }}
 								</div>
 
-								<div v-if="!locale.auto" class="language-translated-name">
+								<div class="language-translated-name">
-									{{ locale.translatedName }}
+									{{ loc.nativeName }}
 								</div>
 							</div>
 						</div>
-
-						<div
-							v-if="$failedLocale === locale.tag"
-							:id="`language__${locale.tag}__fail`"
-							class="language-load-error"
-						>
-							<IssuesIcon />
-							{{ formatMessage(messages.loadFailed) }}
-						</div>
 					</template>
 				</template>
 			</div>
@@ -423,14 +295,6 @@ function getItemLabel(locale: Locale) {
 		outline: 2px solid var(--color-brand);
 	}
 
-	&.errored {
-		border-color: var(--color-red);
-
-		&:hover {
-			border-color: var(--color-red);
-		}
-	}
-
 	&.pending::after {
 		content: '';
 		position: absolute;
@@ -482,15 +346,6 @@ function getItemLabel(locale: Locale) {
 	}
 }
 
-.language-load-error {
-	color: var(--color-red);
-	font-size: var(--font-size-sm);
-	margin-left: 0.3rem;
-	display: flex;
-	align-items: center;
-	gap: 0.3rem;
-}
-
 .radio {
 	width: 24px;
 	height: 24px;
@@ -534,4 +389,9 @@ function getItemLabel(locale: Locale) {
 .category-name {
 	margin-top: var(--spacing-card-md);
 }
+
+.no-results {
+	padding: var(--spacing-card-md);
+	color: var(--color-text-secondary);
+}
 </style>

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

@@ -209,10 +209,12 @@ import {
 	commonSettingsMessages,
 	ConfirmModal,
 	CopyCode,
+	defineMessages,
 	injectNotificationManager,
+	IntlFormatted,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
-import { IntlFormatted } from '@vintl/vintl/components'
 
 import Modal from '~/components/ui/Modal.vue'
 import {

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

@@ -91,8 +91,16 @@
 
 <script setup>
 import { SaveIcon, TrashIcon, UndoIcon, UploadIcon, UserIcon, XIcon } from '@modrinth/assets'
-import { Avatar, Button, commonMessages, FileInput, injectNotificationManager } from '@modrinth/ui'
+import {
-import { IntlFormatted } from '@vintl/vintl/components'
+	Avatar,
+	Button,
+	commonMessages,
+	defineMessages,
+	FileInput,
+	injectNotificationManager,
+	IntlFormatted,
+	useVIntl,
+} from '@modrinth/ui'
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()

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

@@ -60,8 +60,10 @@ import { XIcon } from '@modrinth/assets'
 import {
 	commonMessages,
 	commonSettingsMessages,
+	defineMessages,
 	injectNotificationManager,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
 
 definePageMeta({