Basic translation working

src/components/Timeline/Default.tsx

@@ -19,6 +19,7 @@ import { Pressable, StyleSheet, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import TimelineActionsUsers from './Shared/ActionsUsers'
 import TimelineFullConversation from './Shared/FullConversation'
+import TimelineTranslate from './Shared/Translate'
 
 export interface Props {
   item: Mastodon.Status & { _pinned?: boolean } // For account page, internal property
@@ -129,6 +130,7 @@ const TimelineDefault: React.FC<Props> = ({
           <TimelineCard card={actualStatus.card} />
         )}
         <TimelineFullConversation queryKey={queryKey} status={actualStatus} />
+        <TimelineTranslate status={actualStatus} highlighted={highlighted} />
       </View>
 
       <TimelineActionsUsers status={actualStatus} highlighted={highlighted} />

src/components/Timeline/Shared/Translate.tsx

@@ -0,0 +1,59 @@
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { useTranslateQuery } from '@utils/queryHooks/translate'
+import { getSettingsLanguage } from '@utils/slices/settingsSlice'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Text } from 'react-native'
+import { useSelector } from 'react-redux'
+
+export interface Props {
+  highlighted: boolean
+  status: Mastodon.Status
+}
+
+const TimelineTranslate = React.memo(
+  ({ highlighted, status }: Props) => {
+    if (!highlighted) {
+      return null
+    }
+    if (!status.language) {
+      return null
+    }
+
+    const settingsLanguage = useSelector(getSettingsLanguage, () => true)
+    const tootLanguage = status.language.slice(0, 2)
+
+    if (settingsLanguage.includes(tootLanguage)) {
+      return null
+    }
+
+    const { t } = useTranslation('componentTimeline')
+    const { theme } = useTheme()
+
+    const { data } = useTranslateQuery({
+      toot: status.content,
+      source: status.language,
+      target: settingsLanguage.slice(0, 2)
+    })
+
+    return (
+      <>
+        <Text
+          style={{
+            ...StyleConstants.FontStyle.S,
+            color: theme.blue,
+            marginTop: StyleConstants.Font.Size.S
+          }}
+        >
+          {t('shared.translate')}
+        </Text>
+        {data ? <Text children={data} /> : null}
+      </>
+    )
+  },
+  () => true
+)
+
+export default TimelineTranslate