Language UI option, auto choose language when none selected

html/src/app.js

@@ -9,7 +9,7 @@ import '@fontsource/noto-sans-jp';
 import Noty from 'noty';
 import Vue from 'vue';
 import VueLazyload from 'vue-lazyload';
-import VueI18n from 'vue-i18n'
+import VueI18n from 'vue-i18n';
 import {DataTables} from 'vue-data-tables';
 import ElementUI from 'element-ui';
 import locale from 'element-ui/lib/locale/lang/en';
@@ -211,8 +211,9 @@ speechSynthesis.getVoices();
 
     var i18n = new VueI18n({
         locale: 'en',
-        messages: localizedStrings,
-    })
+        fallbackLocale: 'en',
+        messages: localizedStrings
+    });
 
     var $appDarkStyle = document.createElement('link');
     $appDarkStyle.disabled = true;
@@ -24096,6 +24097,36 @@ speechSynthesis.getVoices();
         );
     };
 
+    // App: Language
+
+    $app.data.appLanguage = 'en';
+    if (configRepository.getString('VRCX_appLanguage')) {
+        $app.data.appLanguage = configRepository.getString('VRCX_appLanguage');
+        i18n.locale = $app.data.appLanguage;
+    } else {
+        AppApi.CurrentLanguage().then((result) => {
+            if (!result) {
+                console.error('Failed to get current language');
+                $app.changeAppLanguage('en');
+                return;
+            }
+            var lang = result.split('-')[0];
+            i18n.availableLocales.forEach((ref) => {
+                var refLang = ref.split('_')[0];
+                if (refLang === lang) {
+                    $app.changeAppLanguage(ref);
+                }
+            });
+        });
+    }
+
+    $app.methods.changeAppLanguage = function (language) {
+        console.log('Language changed:', language);
+        this.appLanguage = language;
+        i18n.locale = language;
+        configRepository.setString('VRCX_appLanguage', language);
+    };
+
     $app = new Vue($app);
     window.$app = $app;
 })();

html/src/index.pug

@@ -1121,6 +1121,13 @@ html
                     el-tab-pane(:label="$t('view.settings.category.appearance')")
                         div.options-container(style="margin-top:0")
                             span.header {{ $t("view.settings.appearance.appearance.header") }}
+                            div.options-container-item
+                                span.name {{ $t('view.settings.appearance.appearance.language') }} 
+                                el-dropdown(@click.native.stop trigger="click" size="small")
+                                    el-button(size="mini")
+                                        span {{ $i18n.messages[appLanguage]?.language }} #[i.el-icon-arrow-down.el-icon--right]
+                                    el-dropdown-menu(#default="dropdown")
+                                        el-dropdown-item(v-for="(obj, language) in $i18n.messages" v-text="obj.language" @click.native="changeAppLanguage(language)") 
                             div.options-container-item
                                 span.name {{ $t('view.settings.appearance.appearance.theme_mode') }}
                                 el-radio-group(v-model="themeMode" size="mini")

html/src/localization/strings/en.json

@@ -227,7 +227,8 @@
                     "sort_instance_users_by_time": "time",
                     "sort_instance_users_by_alphabet": "alphabetical",
                     "table_max_size": "Table Max Size",
-                    "page_size": "Page Size:"
+                    "page_size": "Page Size:",
+                    "language": "Language"
                 },
                 "timedate": {
                     "header": "Time/Date",