Add auto to languages select

src/components/MainToolbar.vue

@@ -6,9 +6,17 @@
     class="app-bar pl-2"
   >
     <v-app-bar-nav-icon @click="toggle" />
-    <v-toolbar-title class="bar-title" v-class:sm-and-down="$vuetify.breakpoint.smAndDown">
-      <img class="icon" src="/favicon.ico">
-      <span class="title hidden-sm-and-down ml-3 mr-5">qBittorrent Web UI</span>
+    <v-toolbar-title
+      class="bar-title"
+      v-class:sm-and-down="$vuetify.breakpoint.smAndDown"
+    >
+      <img
+        class="icon"
+        src="/favicon.ico"
+      >
+      <span class="title hidden-sm-and-down ml-3 mr-5">
+        qBittorrent Web UI
+      </span>
     </v-toolbar-title>
     <v-spacer />
     <v-select
@@ -27,7 +35,7 @@
 import Vue from 'vue';
 import { mapMutations } from 'vuex';
 
-import i18n, { tr, locales } from '@/locale';
+import i18n, { tr, translations, defaultLocale } from '@/locale';
 import { DialogType } from '@/store/types';
 
 export default Vue.extend({
@@ -35,17 +43,25 @@ export default Vue.extend({
     value: Boolean,
   },
   data() {
-    const locales_ = Object.entries(locales).map(([key, value]) => {
+    let locales: {}[] = Object.entries(translations).map(([lang, translation]) => {
       return {
-        text: value,
-        value: key,
+        text: translation.lang,
+        value: lang,
       };
     });
 
+    locales = [
+      {
+        text: tr('auto'),
+        value: null,
+      },
+      ...locales
+    ]
+
     const locale = i18n.locale();
 
     return {
-      locales: locales_,
+      locales,
       oldLocale: locale,
       currentLocale: locale,
     };
@@ -58,15 +74,16 @@ export default Vue.extend({
     toggle() {
       this.$emit('input', !this.value);
     },
-    async switchLocale(locale: string) {
+    async switchLocale(locale: keyof typeof translations | null) {
       if (locale === this.oldLocale) {
         return;
       }
 
       const confirm = await new Promise((resolve) => {
+        const localeKey = !locale ? defaultLocale : locale
         this.showDialog({
           content: {
-            text: tr('dialog.switch_locale.msg', { lang: locales[locale] }),
+            text: tr('dialog.switch_locale.msg', { lang: translations[localeKey].lang }),
             type: DialogType.OkCancel,
             callback: resolve,
           },

src/locale/en.ts

@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/camelcase */
 export default {
   lang: 'English',
+  auto: 'Auto',
 
   close: 'Close',
   no: 'No',

src/locale/index.ts

@@ -1,38 +1,45 @@
 import Polyglot from 'node-polyglot';
 import en from './en';
+import zhCn from './zh-CN';
 
 import { loadConfig } from '@/store/config';
 
+export const translations = {
+  en: en,
+  'zh-CN': zhCn,
+}
+
 const polyglot = new Polyglot({
-  phrases: en,
+  phrases: translations.en
 });
 
-export const locales: {[key: string]: string} = {
-  en: 'English',
-  'zh-CN': '中文',
-};
+function matchLocale() {
+  const { languages } = navigator;
 
-function updateLocale() {
-  let locale: string | undefined = loadConfig()['locale'];
-  if (!locale) {
-    const { languages } = navigator;
-
-    for (const code of languages) {
-      if (code in locales) {
-        locale = code;
-        break;
-      }
+  for (const code of languages) {
+    if (code in translations) {
+      return code as keyof typeof translations;
     }
   }
 
-  if (!locale || locale === 'en') {
+  return 'en'
+}
+
+export const defaultLocale = matchLocale()
+
+function updateLocale() {
+  let locale: keyof typeof translations | null = loadConfig()['locale'];
+
+  if (!locale) {
+    locale = defaultLocale;
+  }
+
+  if (locale === polyglot.locale()) {
     return;
   }
 
   polyglot.locale(locale);
-
-  const { default: translation } = require('./' + locale);
-  polyglot.extend(translation);
+  polyglot.extend(translations[locale]);
 }
 
 updateLocale();

src/locale/zh-CN.ts

@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/camelcase */
 export default {
   lang: '中文',
+  auto: '自动',
 
   close: '关闭',
   no: '否',