use supported languages from service

src/boot/after_store.js

@@ -383,6 +383,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
   store.dispatch('startFetchingAnnouncements')
   getTOS({ store })
   getStickers({ store })
+  store.dispatch('getSupportedTranslationlanguages')
 
   const router = createRouter({
     history: createWebHistory(),

src/components/settings_modal/tabs/general_tab.js

@@ -105,6 +105,9 @@ const GeneralTab = {
         this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     },
+    translationLanguages () {
+      return (this.$store.getters.mergedConfig.supportedTranslationLanguages || []).map(lang => ({ key: lang.code, value: lang.code, label: lang.name }))
+    },
     translationLanguage: {
       get: function () { return this.$store.getters.mergedConfig.translationLanguage },
       set: function (val) {

src/components/settings_modal/tabs/general_tab.vue

@@ -115,14 +115,14 @@
           </BooleanSetting>
         </li>
         <li>
-          <p>
-            <interface-language-switcher
-              :globe-icon="false"
-              :prompt-text="$t('settings.translation_language')"
-              :language="translationLanguage"
-              :set-language="setTranslationLanguage"
-            />
-          </p>
+          <ChoiceSetting
+            v-if="user && (translationLanguages.length > 0)"
+            id="translationLanguage"
+            path="translationLanguage"
+            :options="translationLanguages"
+          >
+            {{ $t('settings.translation_language') }}
+          </ChoiceSetting>
         </li>
         <li>
           <BooleanSetting

src/modules/api.js

@@ -270,6 +270,12 @@ const api = {
       if (!fetcher) return
       store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
     },
+    getSupportedTranslationlanguages (store) {
+      store.state.backendInteractor.getSupportedTranslationlanguages({ store })
+        .then((data) => {
+          store.dispatch('setInstanceOption', { name: 'supportedTranslationLanguages', value: data })
+        })
+    },
 
     // Pleroma websocket
     setWsToken (store, token) {

src/modules/config.js

@@ -124,7 +124,8 @@ export const defaultState = {
   conversationOtherRepliesButton: undefined, // instance default
   conversationTreeFadeAncestors: undefined, // instance default
   maxDepthInThread: undefined, // instance default
-  translationLanguage: undefined // instance default
+  translationLanguage: undefined, // instance default,
+  supportedTranslationLanguages: [] // instance default
 }
 
 // caching the instance default properties

src/services/api/api.service.js

@@ -31,6 +31,7 @@ const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
 const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
 const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
 const MASTODON_USER_NOTIFICATIONS_URL = '/api/v1/notifications'
+const AKKOMA_LANGUAGES_URL = '/api/v1/akkoma/translation/languages'
 const AKKOMA_TRANSLATE_URL = (id, lang) => `/api/v1/statuses/${id}/translations/${lang}`
 const MASTODON_DISMISS_NOTIFICATION_URL = id => `/api/v1/notifications/${id}/dismiss`
 const MASTODON_FAVORITE_URL = id => `/api/v1/statuses/${id}/favourite`
@@ -800,6 +801,10 @@ const unretweet = ({ id, credentials }) => {
     .then((data) => parseStatus(data))
 }
 
+const getSupportedTranslationlanguages = ({ credentials }) => {
+  return promisedRequest({ url: AKKOMA_LANGUAGES_URL, credentials })
+}
+
 const translateStatus = ({ id, credentials, language }) => {
   return promisedRequest({ url: AKKOMA_TRANSLATE_URL(id, language), method: 'GET', credentials })
     .then((data) => {
@@ -1795,7 +1800,8 @@ const apiService = {
   editAnnouncement,
   deleteAnnouncement,
   adminFetchAnnouncements,
-  translateStatus
+  translateStatus,
+  getSupportedTranslationlanguages
 }
 
 export default apiService

src/services/backend_interactor_service/backend_interactor_service.js

@@ -35,6 +35,10 @@ const backendInteractorService = credentials => ({
     return ProcessedWS({ url, id: 'User' })
   },
 
+  getSupportedTranslationlanguages ({ store }) {
+    return apiService.getSupportedTranslationlanguages({ store, credentials })
+  },
+
   ...Object.entries(apiService).reduce((acc, [key, func]) => {
     return {
       ...acc,