Fix fallback locale

front/package.json

@@ -47,6 +47,7 @@
     "universal-cookie": "4.0.4",
     "vue": "3.2.45",
     "vue-gettext": "2.1.12",
+    "vue-i18n": "9",
     "vue-router": "4.1.6",
     "vue-upload-component": "3.1.6",
     "vue-virtual-scroller": "2.0.0-beta.3",
@@ -59,7 +60,7 @@
   },
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
-    "@intlify/vite-plugin-vue-i18n": "^6.0.1",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.3",
     "@types/diff": "5.0.2",
     "@types/dompurify": "2.4.0",
     "@types/howler": "2.2.7",

front/src/components/Sidebar.vue

@@ -2,7 +2,7 @@
 import type { RouteRecordName } from 'vue-router'
 
 import { computed, ref, watch, watchEffect, onMounted } from 'vue'
-import { SUPPORTED_LOCALES } from '~/init/locale'
+import { setI18nLanguage, SUPPORTED_LOCALES } from '~/init/locale'
 import { useCurrentElement } from '@vueuse/core'
 import { setupDropdown } from '~/utils/fomantic'
 import { useRoute } from 'vue-router'
@@ -32,7 +32,7 @@ defineProps<Props>()
 const store = useStore()
 const { theme } = useTheme()
 const themes = useThemeList()
-const { t } = useI18n()
+const { t, locale: i18nLocale } = useI18n()
 
 const route = useRoute()
 const isCollapsed = ref(true)
@@ -101,9 +101,14 @@ const moderationNotifications = computed(() =>
     + store.state.ui.notifications.pendingReviewRequests
 )
 
+const showLanguageModal = ref(false)
+const locale = ref(i18nLocale.value)
+watch(locale, (locale) => {
+  // setI18nLanguage(locale)
+})
+
 const isProduction = import.meta.env.PROD
 const showUserModal = ref(false)
-const showLanguageModal = ref(false)
 const showThemeModal = ref(false)
 
 const el = useCurrentElement()
@@ -291,7 +296,7 @@ onMounted(() => {
             >
               <input
                 :id="`${key}`"
-                v-model="$i18n.locale"
+                v-model="locale"
                 type="radio"
                 name="language"
                 :value="key"

front/src/components/common/UserMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SUPPORTED_LOCALES } from '~/init/locale'
+import { SUPPORTED_LOCALES, setI18nLanguage } from '~/init/locale'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
@@ -50,7 +50,7 @@ const labels = computed(() => ({
           :key="key"
           :class="[{'active': $i18n.locale === key},'item']"
           :value="key"
-          @click="$i18n.locale = key"
+          @click="setI18nLanguage(key)"
         >{{ language }}</a>
       </div>
     </div>

front/src/init/locale.ts

@@ -9,9 +9,13 @@ import store from '~/store'
 
 import useLogger from '~/composables/useLogger'
 
+import en from '../locales/en.json'
+
+const localeFactory = import.meta.glob('../locales/*.json')
+
 const logger = useLogger()
 
-const defaultLanguage = store.state.ui.currentLanguage ?? 'en_US'
+const defaultLanguage = store.state.ui.currentLanguage ?? 'en'
 export const SUPPORTED_LOCALES = locales.reduce((map: Record<string, string>, locale) => {
   map[locale.code] = locale.label
   return map
@@ -22,22 +26,32 @@ export const i18n = createI18n<false>({
   globalInjection: true,
   fallbackLocale: 'en',
   legacy: false,
-  locale: 'en'
+  locale: 'en',
+  messages: { en }
 })
 
 export const setI18nLanguage = async (locale: string) => {
+  console.debug(0)
+  if (locale === 'en') {
+    return
+  }
+
+  console.debug(1)
   if (!Object.keys(SUPPORTED_LOCALES).includes(locale)) {
     throw new Error(`Unsupported locale: ${locale}`)
   }
 
+  console.debug(2)
   // load locale messages
   if (!i18n.global.availableLocales.includes(locale)) {
     try {
-      const { default: messages } = await import(`./locales/${locale}.json`)
+      console.debug(3)
+      const { default: messages } = await localeFactory[`../locales/${locale}.json`]()
       i18n.global.setLocaleMessage(locale, messages)
       await nextTick()
     } catch (error) {
       logger.warn(`Unsupported locale: ${locale}`)
+      logger.debug(error)
     }
   }
 
@@ -72,6 +86,7 @@ export const install: InitModule = async ({ store, app }) => {
 
   // Handle language change
   watch(() => store.state.ui.currentLanguage, async (locale) => {
+    console.debug(locale)
     await store.dispatch('ui/currentLanguage', locale)
     await setI18nLanguage(locale)
     // TODO (wvffle): Set moment locale

front/src/locales/en.json

@@ -196,7 +196,7 @@
                 "fediverse": {
                     "title": "Fediverse object",
                     "fieldLabel": "Fediverse object",
-                    "fieldPlaceholder": "@username@example.com"
+                    "fieldPlaceholder": "{'@'}username{'@'}example.com"
                 }
             },
             "header": {

front/yarn.lock

@@ -1068,7 +1068,7 @@
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.3.0-beta.10.tgz#e1e6c99b0f0a039e8fadc319b93314056f8e992e"
   integrity sha512-h93uAanbAt/XgjDHclrVB7xix6r7Uz11wx0iGNOCdHP7aA2LCJjUT3uNbekJjjbo+Fl5jzTSJZdm2SexzoqhRA==
 
-"@intlify/vite-plugin-vue-i18n@^6.0.1":
+"@intlify/vite-plugin-vue-i18n@^6.0.3":
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-6.0.3.tgz#57a6900de02a9829e52b16bf072768534c7664ef"
   integrity sha512-6SgNzPAOCR90wvt368lKzi7f/5ZEWJn22UCGvhFsP3XvKqlF3cVzojahgQ6o+LTdCkExeM6wPgd+haFf28E9VQ==
@@ -1849,7 +1849,7 @@
     "@vue/compiler-dom" "3.2.45"
     "@vue/shared" "3.2.45"
 
-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.4.5":
+"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.2.1", "@vue/devtools-api@^6.4.5":
   version "6.4.5"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
   integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
@@ -5223,6 +5223,16 @@ vue-gettext@2.1.12:
   resolved "https://registry.yarnpkg.com/vue-gettext/-/vue-gettext-2.1.12.tgz#444d3220149b17fa4c7caeded3f12d439b698f33"
   integrity sha512-7Kw36xtKvARp8ZafQGPK9WR6EM+dhFUikR5f0+etSkiHuvUM3yf1HsRDLYoLLdJ0AMaXxKwgekumzvCk6KX8rA==
 
+vue-i18n@9:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.2.2.tgz#aeb49d9424923c77e0d6441e3f21dafcecd0e666"
+  integrity sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+    "@vue/devtools-api" "^6.2.1"
+
 vue-observe-visibility@^2.0.0-alpha.1:
   version "2.0.0-alpha.1"
   resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz#1e4eda7b12562161d58984b7e0dea676d83bdb13"