feat: improve posts translation logic (#1211)

components/status/StatusActionsMore.vue

@@ -206,14 +206,6 @@ const showFavoritedAndBoostedBy = () => {
           />
         </NuxtLink>
 
-        <CommonDropdownItem
-          v-if="isTranslationEnabled && status.language !== languageCode"
-          :text="translation.visible ? $t('menu.show_untranslated') : $t('menu.translate_post')"
-          icon="i-ri:translate"
-          :command="command"
-          @click="toggleTranslation"
-        />
-
         <template v-if="isHydrated && currentUser">
           <template v-if="isAuthor">
             <CommonDropdownItem

components/status/StatusBody.vue

@@ -37,7 +37,10 @@ const vnode = $computed(() => {
     <div v-else />
     <template v-if="translation.visible">
       <div my2 h-px border="b base" bg-base />
-      <ContentRich class="line-compact" :content="translation.text" :emojis="status.emojis" />
+      <ContentRich v-if="translation.success" class="line-compact" :content="translation.text" :emojis="status.emojis" />
+      <div v-else text-red-4>
+        Error: {{ translation.error }}
+      </div>
     </template>
   </div>
 </template>

components/status/StatusContent.vue

@@ -34,6 +34,7 @@ const isFiltered = $computed(() => filterPhrase && (context && context !== 'deta
         <p>{{ status.spoilerText }}</p>
       </template>
       <StatusBody v-if="!status.sensitive || status.spoilerText" :status="status" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
+      <StatusTranslation :status="status" />
       <StatusPoll v-if="status.poll" :status="status" />
       <StatusMedia
         v-if="status.mediaAttachments?.length"

components/status/StatusTranslation.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const { status } = defineProps<{
+  status: mastodon.v1.Status
+}>()
+
+const {
+  toggle: _toggleTranslation,
+  translation,
+  enabled: isTranslationEnabled,
+} = useTranslation(status)
+
+let translating = $ref(false)
+const toggleTranslation = async () => {
+  translating = true
+  try {
+    await _toggleTranslation()
+  }
+  finally {
+    translating = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <button
+      v-if="isTranslationEnabled && status.language !== languageCode" pl-0 flex="~ center" gap-2
+      :disabled="translating" disabled-bg-transparent btn-text @click="toggleTranslation"
+    >
+      <span v-if="translating" block animate-spin preserve-3d>
+        <span block i-ri:loader-2-fill />
+      </span>
+      <div v-else i-ri:translate />
+      {{ translation.visible ? $t('menu.show_untranslated') : $t('menu.translate_post') }}
+    </button>
+  </div>
+</template>
+
+<style scoped></style>