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>

composables/translate.ts

@@ -0,0 +1,47 @@
+import type { Status } from 'masto'
+
+export interface TranslationResponse {
+  translatedText: string
+  detectedLanguage: {
+    confidence: number
+    language: string
+  }
+}
+
+const config = useRuntimeConfig()
+
+export async function translateText(text: string) {
+  const { translatedText } = await $fetch<TranslationResponse>(config.public.translateApi, {
+    method: 'POST',
+    body: {
+      q: text,
+      source: 'auto',
+      target: navigator.language.replace(/-.*$/, ''),
+      format: 'html',
+      api_key: '',
+    },
+  })
+  return translatedText
+}
+
+const translations = new WeakMap<Status, { visible: boolean; text: string }>()
+
+export function useTranslation(status: Status) {
+  if (!translations.has(status))
+    translations.set(status, reactive({ visible: false, text: '' }))
+
+  const translation = translations.get(status)!
+
+  async function toggle() {
+    if (!translation.text)
+      translation.text = await translateText(status.content)
+
+    translation.visible = !translation.visible
+  }
+
+  return {
+    enabled: !!config.public.translateApi,
+    toggle,
+    translation,
+  }
+}

nuxt.config.ts

@@ -40,5 +40,8 @@ export default defineNuxtConfig({
       namespaceId: '',
       apiToken: '',
     },
+    public: {
+      translateApi: '',
+    },
   },
 })