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/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()