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/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 { defineMessages, useVIntl } from '@vintl/vintl'
+import {
+	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 { useVIntl } from '@vintl/vintl'
+import {
+	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'