feat: i18n (#182)

* build: add vue-i18n dependency

* feat: add i18n plugin to vue project

* feat: use translations in play button

* feat: translate play view

* feat: translate menu items

* feat: translate local mods view

* feat: translate online mods view

* feat: translate mods menu

* feat: translate thunderstore mod card component

* fix: remove useless "this" keyword

* feat: translate settings view

* fix: remove leftover test invocation

* feat: add language selector component

* feat: using language selector updates interface's language

* feat: save language in persistent store on selector change

* feat: initialize lang on app launch

* refactor: move i18n code into App.mounted callback

* feat: update interface language on app launch

* feat: adjust language selection on language selector load

* fix: this.$root can't be null

* feat: translate store notifications

* fix: add missing parameter to english translation

* feat: translate "by" author keyword

* feat: translate repair window

* feat: translate repair window title

* docs: add some documentation regarding localization

* docs: explain how to add a new language

* feat: translate Northstar release canal selector elements

* docs: describe how to inject variable into translations

* feat: translate "info" word

* feat: translate popconfirm buttons

* fix: remove "this" keyword

* fix: save store when updating interface language

1 files changed, 18 insertions, 7 deletions

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index f740bd2f..86a1bb37 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -6,7 +6,8 @@ import ModsView from './views/ModsView.vue';
 import SettingsView from './views/SettingsView.vue';
 import { appWindow } from '@tauri-apps/api/window';
 import { store } from './plugins/store';
-import { invoke, window as tauriWindow } from "@tauri-apps/api";
+import { Store } from 'tauri-plugin-store-api';
+import { invoke } from "@tauri-apps/api";
 
 export default {
   components: {
@@ -19,8 +20,18 @@ export default {
   data() {
     return {}
   },
-  mounted: () => {
+  mounted: async function() {
     store.commit('initialize');
+
+    // Initialize interface language
+    const persistentStore = new Store('flight-core-settings.json');
+    let lang: string | null = await persistentStore.get('lang');
+    if (lang === null) {
+      lang = navigator.language.substring(0, 2);
+      persistentStore.set('lang', lang);
+      await persistentStore.save();
+    }
+    this.$root!.$i18n.locale = lang;
   },
   methods: {
     async toggleMaximize() {
@@ -56,11 +67,11 @@ export default {
         id="fc__menu_items"
         data-tauri-drag-region
       >
-        <el-menu-item index="/">Play</el-menu-item>
-        <el-menu-item index="/changelog">Changelog</el-menu-item>
-        <el-menu-item index="/mods">Mods</el-menu-item>
-        <el-menu-item index="/settings">Settings</el-menu-item>
-        <el-menu-item index="/dev" v-if="$store.state.developer_mode">Dev</el-menu-item>
+        <el-menu-item index="/">{{ $t('menu.play') }}</el-menu-item>
+        <el-menu-item index="/changelog">{{ $t('menu.changelog') }}</el-menu-item>
+        <el-menu-item index="/mods">{{ $t('menu.mods') }}</el-menu-item>
+        <el-menu-item index="/settings">{{ $t('menu.settings') }}</el-menu-item>
+        <el-menu-item index="/dev" v-if="$store.state.developer_mode">{{ $t('menu.dev') }}</el-menu-item>
       </el-menu>
 
       <!-- Window controls -->