Optimize UI

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -3,29 +3,34 @@
     <label>
       {{ promptText }}
     </label>
-    <ol>
+    <ul class="setting-list">
       <li
         v-for="index of controlledLanguage.keys()"
         :key="index"
       >
-        <Select
+        <label>
-          class="language-select"
+          {{ index === 0 ? $t('settings.primary_language') : $tc('settings.fallback_language', index, { index }) }}
-          :model-value="controlledLanguage[index]"
+          <Select
-          @update:modelValue="val => setLanguageAt(index, val)"
+            class="language-select"
-        >
+            :model-value="controlledLanguage[index]"
-          <option
+            @update:modelValue="val => setLanguageAt(index, val)"
-            v-for="lang in languages"
-            :key="lang.code"
-            :value="lang.code"
           >
-            {{ lang.name }}
+            <option
-          </option>
+              v-for="lang in languages"
-        </Select>
+              :key="lang.code"
+              :value="lang.code"
+            >
+              {{ lang.name }}
+            </option>
+          </Select>
+        </label>
         <button
-          v-if="controlledLanguage.length > 1"
+          v-if="controlledLanguage.length > 1 && index !== 0"
           class="button-default btn"
           @click="() => removeLanguageAt(index)"
-        >{{ $t('settings.remove_language') }}</button>
+        >
+          {{ $t('settings.remove_language') }}
+        </button>
       </li>
       <li>
         <button
@@ -33,7 +38,7 @@
           @click="addLanguage"
         >{{ $t('settings.add_language') }}</button>
       </li>
-    </ol>
+    </ul>
   </div>
 </template>
 

src/i18n/en.json

@@ -334,8 +334,10 @@
     "select_all": "Select all"
   },
   "settings": {
-    "add_language": "Add another language",
+    "add_language": "Add fallback language",
     "remove_language": "Remove",
+    "primary_language": "Primary language:",
+    "fallback_language": "Fallback language {index}:",
     "app_name": "App name",
     "expert_mode": "Show advanced",
     "save": "Save changes",

src/modules/instance.js

@@ -273,8 +273,13 @@ const instance = {
         langList
           .map(async lang => {
             if (!state.unicodeEmojiAnnotations[lang]) {
-              const annotations = await loadAnnotations(lang)
+              try {
-              commit('setUnicodeEmojiAnnotations', { lang, annotations })
+                const annotations = await loadAnnotations(lang)
+                commit('setUnicodeEmojiAnnotations', { lang, annotations })
+              } catch (e) {
+                console.warn(`Error loading unicode emoji annotations for ${lang}: `, e)
+                // ignore
+              }
             }
           }))
     },