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>

packages/ui/src/components/billing/AddPaymentMethodModal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { PlusIcon, XIcon } from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import { nextTick, ref, useTemplateRef } from 'vue'
 
+import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils'
 import { ButtonStyled, NewModal } from '../index'
 import type { AddPaymentMethodProps } from './AddPaymentMethod.vue'

packages/ui/src/components/billing/ExpandableInvoiceTotal.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { SpinnerIcon } from '@modrinth/assets'
 import { formatPrice } from '@modrinth/utils'
-import { useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
 
+import { useVIntl } from '../../composables/i18n'
 import Accordion from '../base/Accordion.vue'
 
 const { locale } = useVIntl()

packages/ui/src/components/billing/FormattedPaymentMethod.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useVIntl } from '@vintl/vintl'
 import type Stripe from 'stripe'
 
+import { useVIntl } from '../../composables/i18n'
 import { commonMessages, getPaymentMethodIcon, paymentMethodMessages } from '../../utils'
 
 const { formatMessage } = useVIntl()

packages/ui/src/components/billing/ModalBasedServerPlan.vue

@@ -2,10 +2,10 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { InfoIcon } from '@modrinth/assets'
 import { formatPrice } from '@modrinth/utils'
-import { type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import { Menu } from 'floating-vue'
 import { computed, inject, type Ref } from 'vue'
 
+import { type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
 import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
 import ServersSpecs from './ServersSpecs.vue'

packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue

@@ -8,10 +8,10 @@ import {
 	SpinnerIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import type Stripe from 'stripe'
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 
+import { defineMessage, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { useStripe } from '../../composables/stripe'
 import { commonMessages } from '../../utils'
 import { ButtonStyled } from '../index'

packages/ui/src/components/billing/PurchaseModal.vue

@@ -542,11 +542,11 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import { calculateSavings, createStripeElements, formatPrice, getCurrency } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 import { computed, nextTick, reactive, ref, watch } from 'vue'
 import { Multiselect } from 'vue-multiselect'
 
+import { defineMessages, useVIntl } from '../../composables/i18n'
 import Admonition from '../base/Admonition.vue'
 import Checkbox from '../base/Checkbox.vue'
 import Slider from '../base/Slider.vue'

packages/ui/src/components/billing/ServersPurchase0Plan.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { formatPrice } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, provide } from 'vue'
 
+import { defineMessages, useVIntl } from '../../composables/i18n'
 import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
 import OptionGroup from '../base/OptionGroup.vue'
 import ModalBasedServerPlan from './ModalBasedServerPlan.vue'

packages/ui/src/components/billing/ServersPurchase1Region.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { Archon, Labrinth } from '@modrinth/api-client'
 import { InfoIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import { formatPrice } from '../../../../utils'
+import { defineMessages, useVIntl } from '../../composables/i18n'
 import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils.ts'
 import { regionOverrides } from '../../utils/regions.ts'
+import IntlFormatted from '../base/IntlFormatted.vue'
 import Slider from '../base/Slider.vue'
 import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 import type { RegionPing, ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'

packages/ui/src/components/billing/ServersPurchase2PaymentMethod.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import type Stripe from 'stripe'
 
+import { defineMessages, useVIntl } from '../../composables/i18n'
 import PaymentMethodOption from './PaymentMethodOption.vue'
 
 const { formatMessage } = useVIntl()

packages/ui/src/components/billing/ServersPurchase3Review.vue

@@ -11,11 +11,11 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import { formatPrice, getPingLevel } from '@modrinth/utils'
-import { useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 import type Stripe from 'stripe'
 import { computed } from 'vue'
 
+import { useVIntl } from '../../composables/i18n'
 import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
 import { regionOverrides } from '../../utils/regions'
 import ButtonStyled from '../base/ButtonStyled.vue'

packages/ui/src/components/billing/ServersRegionButton.vue

@@ -2,11 +2,10 @@
 import type { Archon } from '@modrinth/api-client'
 import { SignalIcon, SpinnerIcon } from '@modrinth/assets'
 import { getPingLevel } from '@modrinth/utils'
-import { useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
 
+import { useVIntl } from '../../composables/i18n'
 import { regionOverrides } from '../../utils/regions'
-
 const { formatMessage } = useVIntl()
 
 const currentRegion = defineModel<string | undefined>({ required: true })