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, 20 insertions, 7 deletions

diff --git a/src-vue/src/views/RepairView.vue b/src-vue/src/views/RepairView.vue
index e7cd479a..12224524 100644
--- a/src-vue/src/views/RepairView.vue
+++ b/src-vue/src/views/RepairView.vue
@@ -1,30 +1,30 @@
 <template>
     <div class="fc-container">
         <el-scrollbar>
-            <el-alert title="Info" type="info" :closable="false" show-icon>
-                This window contains various functionality to repair common issues with Northstar and FlightCore.
+            <el-alert :title="$t('generic.informationShort')" type="info" :closable="false" show-icon>
+                {{ $t('settings.repair.window.warning') }}
             </el-alert>
 
-            <h1>Repair</h1>
+            <h1>{{ $t('settings.repair.title') }}</h1>
 
             <h2>Northstar</h2>
 
             <el-button type="primary" @click="disableAllModsButCore">
-                Disable all but core mods
+                {{ $t('settings.repair.window.disable_all_but_core') }}
             </el-button>
 
             <el-button type="primary" @click="forceInstallNorthstar">
-                Force reinstall Northstar
+                {{ $t('settings.repair.window.force_reinstall_ns') }}
             </el-button>
 
             <h2>FlightCore</h2>
 
             <el-button type="primary" @click="cleanUpDownloadFolder">
-                Force delete temp download folder
+                {{ $t('settings.repair.window.force_delete_temp_dl') }}
             </el-button>
 
             <el-button type="primary" @click="clearFlightCorePersistentStore">
-                Delete FlightCore persistent store
+                {{ $t('settings.repair.window.delete_persistent_store') }}
             </el-button>
         </el-scrollbar>
     </div>
@@ -37,10 +37,16 @@ import { GameInstall } from "../utils/GameInstall";
 import { invoke } from "@tauri-apps/api";
 import { ReleaseCanal } from "../utils/ReleaseCanal";
 import { Store } from 'tauri-plugin-store-api';
+import { appWindow } from "@tauri-apps/api/window";
 const persistentStore = new Store('flight-core-settings.json');
 
 export default defineComponent({
     name: "RepairView",
+    computed: {
+        lang(): string {
+            return this.$root!.$i18n.locale;
+        }
+    },
     methods: {
         async disableAllModsButCore() {
             let game_install = {
@@ -135,6 +141,13 @@ export default defineComponent({
             // ...and save
             await persistentStore.save();
         },
+    },
+    watch: {
+        // Lang value is propagated to repair view after it's mounted, so we need to watch
+        // its value, and update window title accordingly.
+        lang(newv: string) {
+            appWindow.setTitle( this.$t('settings.repair.window.title') );
+        }
     }
 });
 </script>