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/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 { defineMessages, useVIntl } from '@vintl/vintl'
+import { Checkbox, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
 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 { defineMessages, useVIntl } from '@vintl/vintl'
+import { Checkbox, defineMessages, injectNotificationManager, Slider, useVIntl } from '@modrinth/ui'
 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 { defineMessages, useVIntl } from '@vintl/vintl'
+import { Checkbox, defineMessages, injectNotificationManager, Toggle, useVIntl } from '@modrinth/ui'
 import { computed, type Ref, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'