fix: translate posts target language is not current selected language (#1263)

components/status/StatusActionsMore.vue

@@ -27,18 +27,6 @@ const userSettings = useUserSettings()
 
 const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
 
-const {
-  toggle: _toggleTranslation,
-  translation,
-  enabled: isTranslationEnabled,
-} = useTranslation(props.status)
-
-const toggleTranslation = async () => {
-  isLoading.translation = true
-  await _toggleTranslation()
-  isLoading.translation = false
-}
-
 const { client } = $(useMasto())
 
 const getPermalinkUrl = (status: mastodon.v1.Status) => {

components/status/StatusBody.vue

@@ -9,7 +9,7 @@ const {
   withAction?: boolean
 }>()
 
-const { translation } = useTranslation(status)
+const { translation } = useTranslation(status, getLanguageCode())
 
 const emojisObject = useEmojisFallback(() => status.emojis)
 const vnode = $computed(() => {

components/status/StatusTranslation.vue

@@ -9,7 +9,7 @@ const {
   toggle: _toggleTranslation,
   translation,
   enabled: isTranslationEnabled,
-} = useTranslation(status)
+} = useTranslation(status, getLanguageCode())
 
 let translating = $ref(false)
 const toggleTranslation = async () => {
@@ -26,7 +26,7 @@ const toggleTranslation = async () => {
 <template>
   <div>
     <button
-      v-if="isTranslationEnabled && status.language !== languageCode" p-0 flex="~ center" gap-2 text-sm
+      v-if="isTranslationEnabled && status.language !== getLanguageCode()" p-0 flex="~ center" gap-2 text-sm
       :disabled="translating" disabled-bg-transparent btn-text class="disabled-text-$c-text-btn-disabled-deeper" @click="toggleTranslation"
     >
       <span v-if="translating" block animate-spin preserve-3d>

composables/masto/translate.ts

@@ -8,8 +8,23 @@ export interface TranslationResponse {
   }
 }
 
-export const languageCode = process.server ? 'en' : navigator.language.replace(/-.*$/, '')
-export async function translateText(text: string, from?: string | null, to?: string) {
+export const getLanguageCode = () => {
+  let code = 'en'
+  const getCode = (code: string) => code.replace(/-.*$/, '')
+  if (!process.server) {
+    const { locale } = useI18n()
+    code = getCode(locale.value ? locale.value : navigator.language)
+  }
+  return code
+}
+
+interface TranslationErr {
+  data?: {
+    error?: string
+  }
+}
+
+export async function translateText(text: string, from: string | null | undefined, to: string) {
   const config = useRuntimeConfig()
   const status = $ref({
     success: false,
@@ -22,7 +37,7 @@ export async function translateText(text: string, from?: string | null, to?: str
       body: {
         q: text,
         source: from ?? 'auto',
-        target: to ?? languageCode,
+        target: to,
         format: 'html',
         api_key: '',
       },
@@ -32,14 +47,18 @@ export async function translateText(text: string, from?: string | null, to?: str
   }
   catch (err) {
     // TODO: improve type
-    status.error = (err as { data: { error: string } }).data.error
+    if ((err as TranslationErr).data?.error)
+      status.error = (err as TranslationErr).data!.error!
+    else
+      status.error = 'Unknown Error, Please check your console in browser devtool.'
+    console.error('Translate Post Error: ', err)
   }
   return status
 }
 
 const translations = new WeakMap<mastodon.v1.Status | mastodon.v1.StatusEdit, { visible: boolean; text: string; success: boolean; error: string }>()
 
-export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEdit) {
+export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEdit, to: string) {
   if (!translations.has(status))
     translations.set(status, reactive({ visible: false, text: '', success: false, error: '' }))
 
@@ -50,7 +69,7 @@ export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEd
       return
 
     if (!translation.text) {
-      const { success, text, error } = await translateText(status.content, status.language)
+      const { success, text, error } = await translateText(status.content, status.language, to)
       translation.error = error
       translation.text = text
       translation.success = success