fix: respect source language of post and move translation UI into menu

components/status/StatusActions.vue

@@ -175,16 +175,6 @@ 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">
         <StatusActionButton
@@ -203,6 +193,15 @@ function mention() {
             Open in original site
           </CommonDropdownItem>
 
+          <CommonDropdownItem v-if="isTranslationEnabled && status.language !== languageCode" icon="i-ri:translate" @click="toggleTranslation">
+            <template v-if="!translation.visible">
+              Translate post
+            </template>
+            <template v-else>
+              Show original post
+            </template>
+          </CommonDropdownItem>
+
           <template v-if="isAuthor">
             <CommonDropdownItem
               icon="i-ri:pushpin-line"

composables/translate.ts

@@ -10,13 +10,14 @@ export interface TranslationResponse {
 
 const config = useRuntimeConfig()
 
-export async function translateText(text: string) {
+export const languageCode = process.server ? 'en' : navigator.language.replace(/-.*$/, '')
+export async function translateText(text: string, from?: string | null, to?: string) {
   const { translatedText } = await $fetch<TranslationResponse>(config.public.translateApi, {
     method: 'POST',
     body: {
       q: text,
-      source: 'auto',
+      source: from ?? 'auto',
-      target: navigator.language.replace(/-.*$/, ''),
+      target: to ?? languageCode,
       format: 'html',
       api_key: '',
     },
@@ -34,7 +35,7 @@ export function useTranslation(status: Status) {
 
   async function toggle() {
     if (!translation.text)
-      translation.text = await translateText(status.content)
+      translation.text = await translateText(status.content, status.language)
 
     translation.visible = !translation.visible
   }
@@ -45,3 +46,4 @@ export function useTranslation(status: Status) {
     translation,
   }
 }
+