feat: allow translation of statuses (#76)

components/status/StatusActions.vue

@@ -22,6 +22,7 @@ const isLoading = $ref({
   favourited: false,
   bookmarked: false,
   pinned: false,
+  translation: false,
 })
 async function toggleStatusAction(action: 'reblogged' | 'favourited' | 'bookmarked' | 'pinned', newStatus: Promise<Status>) {
   // Optimistic update
@@ -59,6 +60,13 @@ const togglePin = async () => toggleStatusAction(
   masto.statuses[status.pinned ? 'unpin' : 'pin'](status.id),
 )
 
+const { toggle: _toggleTranslation, translation, enabled: isTranslationEnabled } = useTranslation(_status)
+const toggleTranslation = async () => {
+  isLoading.translation = true
+  await _toggleTranslation()
+  isLoading.translation = false
+}
+
 const copyLink = async () => {
   await clipboard.copy(`${location.origin}${getStatusPath(status)}`)
 }
@@ -160,6 +168,16 @@ function mention() {
       />
     </CommonTooltip>
 
+    <CommonTooltip v-if="isTranslationEnabled" placement="bottom" content="Translate">
+      <StatusActionButton
+        color="text-pink" hover="text-pink" group-hover="bg-pink/10"
+        icon="i-ri:translate"
+        :active="translation.visible"
+        :disabled="isLoading.translation"
+        @click="toggleTranslation()"
+      />
+    </CommonTooltip>
+
     <CommonDropdown placement="bottom">
       <CommonTooltip placement="bottom" content="More">
         <button flex gap-1 items-center rounded op50 hover="op100 text-purple" group>

components/status/StatusBody.vue

@@ -4,10 +4,11 @@ import type { Status } from 'masto'
 const { status } = defineProps<{
   status: Status
 }>()
+const { translation } = useTranslation(status)
 </script>
 
 <template>
   <div class="status-body">
-    <ContentRich :content="status.content" :emojis="status.emojis" />
+    <ContentRich :content="translation.visible ? translation.text : status.content" :emojis="status.emojis" />
   </div>
 </template>