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, 47 insertions, 0 deletions

diff --git a/src-vue/src/components/LanguageSelector.vue b/src-vue/src/components/LanguageSelector.vue
new file mode 100644
index 00000000..c09f6c05
--- /dev/null
+++ b/src-vue/src/components/LanguageSelector.vue
@@ -0,0 +1,47 @@
+<template>
+    <el-select v-model="value" class="m-2" 
+        :placeholder="$t('settings.language_select')" size="large"
+        @change="onChange"
+    >
+        <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+        />
+  </el-select>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Store } from 'tauri-plugin-store-api';
+const persistentStore = new Store('flight-core-settings.json');
+
+export default defineComponent({
+    name: 'LanguageSelector',
+    data: () => ({
+        value: '',
+        options: [
+            {
+                value: 'en',
+                label: 'English'
+            },
+            {
+                value: 'fr',
+                label: 'Français'
+            }
+        ]
+    }),
+    mounted: async function() {
+        const lang: string = await persistentStore.get('lang') as string;
+        this.value = lang;
+    },
+    methods: {
+        async onChange(value: string) {
+            this.$root!.$i18n.locale = value;
+            persistentStore.set('lang', value);
+            await persistentStore.save();
+        }
+    }
+})
+</script>