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, 30 insertions, 17 deletions

diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index 4e816740..9a92865d 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -3,11 +3,11 @@
         <el-scrollbar>
             <div class="fc_settings__container">
                 <!-- Game folder location -->
-                <h3>Manage installation</h3>
+                <h3>{{ $t('settings.manage_install') }}</h3>
                 <el-input
                     v-model="$store.state.game_path"
                     class="w-50 m-2"
-                    placeholder="Choose installation folder"
+                    :placeholder="$t('settings.choose_folder')"
                     @click="updateGamePath"
                 >
                     <template #prepend>
@@ -17,37 +17,46 @@
 
                 <!-- Thunderstore mods per page configuration -->
                 <div class="fc_parameter__panel">
-                    <h3>Number of Thunderstore mods per page</h3>
+                    <h3>{{ $t('settings.nb_ts_mods_per_page') }}</h3>
                     <h6>
-                        This has an impact on display performances when browsing Thunderstore mods.<br>
-                        Set this value to 0 to disable pagination.
+                        {{ $t('settings.nb_ts_mods_per_page_desc1') }}<br>
+                        {{ $t('settings.nb_ts_mods_per_page_desc2') }}
                     </h6>
-                    <el-input 
-                        v-model="modsPerPage" 
+                    <el-input
+                        v-model="modsPerPage"
                         type="number"
                     >
                         <template #append>
-                            <el-button @click="modsPerPage = 20">Reset to default</el-button>
+                            <el-button @click="modsPerPage = 20">
+                                {{ $t('settings.nb_ts_mods_reset') }}
+                            </el-button>
                         </template>
                     </el-input>
                 </div>
 
-                <h3>Repair</h3>
+                <!-- Interface localization -->
+                <div class="fc_parameter__panel">
+                    <h3>{{ $t('settings.language') }}</h3>
+                    <language-selector/>
+                </div>
+
+                <h3>{{ $t('settings.repair.title') }}</h3>
                 <el-button type="primary" @click="openRepairWindow">
-                    Open Repair window
+                    {{ $t('settings.repair.open_window') }}
                 </el-button>
 
-                <h3>About:</h3>
+                <h3>{{ $t('settings.about') }}</h3>
+
                 <div class="fc_northstar__version" @click="activateDeveloperMode">
-                    FlightCore Version: {{ flightcoreVersion === '' ? 'Unknown version' : `${flightcoreVersion}` }}
+                    {{ $t('settings.flightcore_version') }} {{ flightcoreVersion === '' ? 'Unknown version' : `${flightcoreVersion}` }}
                 </div>
                 <br />
                 <br />
                 UI design inspired by <el-link :underline="false" target="_blank" href="https://github.com/TFORevive/tforevive_launcher/" type="primary">TFORevive Launcher</el-link> (not yet public)
 
-                <h3>Testing:</h3>
+                <h3>{{ $t('settings.testing') }}</h3>
                 <span>
-                    Enable testing release channels
+                    {{ $t('settings.enable_test_channels') }}
                     <el-switch v-model="enableReleasesSwitch"></el-switch>
                 </span>
             </div>
@@ -61,10 +70,14 @@ import { ElNotification } from 'element-plus';
 import { invoke } from "@tauri-apps/api";
 import { ReleaseCanal } from "../utils/ReleaseCanal";
 import { Store } from 'tauri-plugin-store-api';
+import LanguageSelector from "../components/LanguageSelector.vue";
 const persistentStore = new Store('flight-core-settings.json');
 
 export default defineComponent({
     name: "SettingsView",
+    components: {
+        LanguageSelector
+    },
     data() {
         return {
             developerModeClicks: 0
@@ -107,8 +120,8 @@ export default defineComponent({
             if (this.developerModeClicks >= 6) {
                 this.$store.state.developer_mode = true;
                 ElNotification({
-                    title: 'Watch out!',
-                    message: 'Developer mode enabled.',
+                    title: this.$t('settings.dev_mode_enabled_title'),
+                    message: this.$t('settings.dev_mode_enabled_text'),
                     type: 'info',
                     position: 'bottom-right'
                 });
@@ -156,7 +169,7 @@ h3:first-of-type {
     font-weight: unset;
 }
 
-.el-input {
+.el-input, .el-select {
     width: 50%;
 }