feat: allow disabling translation for specific languages (#1371)

components/settings/SettingsTranslations.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import ISO6391 from 'iso-639-1'
+
+const supportedTranslationLanguages = ISO6391.getLanguages([...supportedTranslationCodes])
+const userSettings = useUserSettings()
+
+const language = ref<string | null>(null)
+
+const availableOptions = computed(() => {
+  return Object.values(supportedTranslationLanguages).filter((value) => {
+    return !userSettings.value.disabledTranslationLanguages.includes(value.code)
+  })
+})
+
+function addDisabledTranslation() {
+  if (language.value) {
+    const uniqueValues = new Set(userSettings.value.disabledTranslationLanguages)
+    uniqueValues.add(language.value)
+    userSettings.value.disabledTranslationLanguages = [...uniqueValues]
+    language.value = null
+  }
+}
+function removeDisabledTranslation(code: string) {
+  const uniqueValues = new Set(userSettings.value.disabledTranslationLanguages)
+  uniqueValues.delete(code)
+  userSettings.value.disabledTranslationLanguages = [...uniqueValues]
+}
+</script>
+
+<template>
+  <div>
+    <CommonCheckbox v-model="userSettings.preferences.hideTranslation" :label="$t('settings.preferences.hide_translation')" />
+    <div v-if="!userSettings.preferences.hideTranslation" class="mt-1 ms-2">
+      <p class=" mb-2">
+        {{ $t('settings.language.translations.hide_specific') }}
+      </p>
+      <div class="ms-4">
+        <ul>
+          <li v-for="langCode in userSettings.disabledTranslationLanguages" :key="langCode" class="flex items-center">
+            <div>{{ ISO6391.getNativeName(langCode) }}</div>
+            <button class="btn-text" type="button" :title="$t('settings.language.translations.remove')" @click.prevent="removeDisabledTranslation(langCode)">
+              <span class="block i-ri:close-line" aria-hidden="true" />
+            </button>
+          </li>
+        </ul>
+
+        <div class="flex items-center mt-2">
+          <select v-model="language" class="select-settings">
+            <option disabled selected :value="null">
+              {{ $t('settings.language.translations.choose_language') }}
+            </option>
+            <option v-for="availableOption in availableOptions" :key="availableOption.code" :value="availableOption.code">
+              {{ availableOption.nativeName }}
+            </option>
+          </select>
+          <button class="btn-text" @click="addDisabledTranslation">
+            {{ $t('settings.language.translations.add') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

components/status/StatusTranslation.vue

@@ -12,7 +12,7 @@ const {
 } = useTranslation(status, getLanguageCode())
 const preferenceHideTranslation = usePreferences('hideTranslation')
 
-const showButton = computed(() => !preferenceHideTranslation.value && isTranslationEnabled && status.language !== getLanguageCode())
+const showButton = computed(() => !preferenceHideTranslation.value && isTranslationEnabled)
 
 let translating = $ref(false)
 const toggleTranslation = async () => {