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/project/ProjectPageVersions.vue

@@ -206,11 +206,11 @@ import {
 	type GameVersionTag,
 	type Version,
 } from '@modrinth/utils'
-import { useVIntl } from '@vintl/vintl'
 import { computed, type Ref, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useRelativeTime } from '../../composables'
+import { useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
 import AutoLink from '../base/AutoLink.vue'
 import TagItem from '../base/TagItem.vue'

packages/ui/src/components/project/ProjectSidebarCompatibility.vue

@@ -87,10 +87,15 @@
 import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
 import type { EnvironmentV3, GameVersionTag, PlatformTag, ProjectV3Partial } from '@modrinth/utils'
 import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
-import { defineMessage, defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import { type Component, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
+import {
+	defineMessage,
+	defineMessages,
+	type MessageDescriptor,
+	useVIntl,
+} from '../../composables/i18n'
 import TagItem from '../base/TagItem.vue'
 
 const { formatMessage } = useVIntl()

packages/ui/src/components/project/ProjectSidebarCreators.vue

@@ -48,9 +48,9 @@
 </template>
 <script setup lang="ts">
 import { CrownIcon, ExternalIcon, OrganizationIcon } from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
 
+import { defineMessages, useVIntl } from '../../composables/i18n'
 import AutoLink from '../base/AutoLink.vue'
 import Avatar from '../base/Avatar.vue'
 

packages/ui/src/components/project/ProjectSidebarDetails.vue

@@ -65,11 +65,11 @@
 </template>
 <script setup lang="ts">
 import { BookTextIcon, CalendarIcon, ExternalIcon, ScaleIcon, VersionIcon } from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 
 import { useRelativeTime } from '../../composables'
+import { defineMessages, useVIntl } from '../../composables/i18n'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()

packages/ui/src/components/project/ProjectSidebarLinks.vue

@@ -102,7 +102,8 @@ import {
 	PayPalIcon,
 	WikiIcon,
 } from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+
+import { defineMessages, useVIntl } from '../../composables/i18n'
 
 const { formatMessage } = useVIntl()
 

packages/ui/src/components/project/ProjectStatusBadge.vue

@@ -4,9 +4,9 @@
 
 <script setup lang="ts">
 import type { ProjectStatus } from '@modrinth/utils'
-import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
 
+import { defineMessage, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { PROJECT_STATUS_ICONS } from '../../utils'
 import Badge from '../base/SimpleBadge.vue'
 

packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import { computed, ref, watch } from 'vue'
 
+import { defineMessage, type MessageDescriptor, useVIntl } from '../../../../composables/i18n'
 import { commonProjectSettingsMessages } from '../../../../utils'
 import LargeRadioButton from '../../../base/LargeRadioButton.vue'