Merge remote-tracking branch 'upstream/develop' into emoji-selector-update

* upstream/develop: (469 commits)
  Feature/add sticker picker
  guard more secure routes
  guard secure routes by redirecting to root
  closest can returns itself as well
  find inside status-content div only
  try to use the closest a tag as target
  Update es.json
  Also apply keyword filter to subjects
  Remove files I accidentally pushed in
  fix issues caused by merges in usersearch on @
  Add user search at
  fix eslint warnings
  remove vue-popperjs
  fix moderation menu partially hidden by usercard boundary
  migrate popper css
  rewrite ModerationTools using v-tooltip
  make popover position for status action dropdow relative to parent node
  rewrite ExtraButtons using v-tooltip
  install v-tooltip
  i18n/Update pedantic Japanese translation
  ...

1 files changed, 42 insertions, 21 deletions

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 3f58af2c..83df9a0b 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -3,39 +3,60 @@
     <label for="interface-language-switcher">
       {{ $t('settings.interfaceLanguage') }}
     </label>
-    <label for="interface-language-switcher" class='select'>
-      <select id="interface-language-switcher" v-model="language">
-        <option v-for="(langCode, i) in languageCodes" :value="langCode">
+    <label
+      for="interface-language-switcher"
+      class="select"
+    >
+      <select
+        id="interface-language-switcher"
+        v-model="language"
+      >
+        <option
+          v-for="(langCode, i) in languageCodes"
+          :key="langCode"
+          :value="langCode"
+        >
           {{ languageNames[i] }}
         </option>
       </select>
-      <i class="icon-down-open"/>
+      <i class="icon-down-open" />
     </label>
   </div>
 </template>
 
 <script>
-  import languagesObject from '../../i18n/messages'
-  import ISO6391 from 'iso-639-1'
-  import _ from 'lodash'
+import languagesObject from '../../i18n/messages'
+import ISO6391 from 'iso-639-1'
+import _ from 'lodash'
 
-  export default {
-    computed: {
-      languageCodes () {
-        return Object.keys(languagesObject)
-      },
+export default {
+  computed: {
+    languageCodes () {
+      return Object.keys(languagesObject)
+    },
 
-      languageNames () {
-        return _.map(this.languageCodes, ISO6391.getName)
-      },
+    languageNames () {
+      return _.map(this.languageCodes, this.getLanguageName)
+    },
 
-      language: {
-        get: function () { return this.$store.state.config.interfaceLanguage },
-        set: function (val) {
-          this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
-          this.$i18n.locale = val
-        }
+    language: {
+      get: function () { return this.$store.state.config.interfaceLanguage },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+        this.$i18n.locale = val
       }
     }
+  },
+
+  methods: {
+    getLanguageName (code) {
+      const specialLanguageNames = {
+        'ja': 'Japanese (やさしいにほんご)',
+        'ja_pedantic': 'Japanese (日本語)',
+        'zh': 'Chinese (简体中文)'
+      }
+      return specialLanguageNames[code] || ISO6391.getName(code)
+    }
   }
+}
 </script>