Local translation works

src/components/Timeline/Shared/Actions.tsx

@@ -340,7 +340,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    minHeight: StyleConstants.Font.Size.L + StyleConstants.Spacing.S * 4,
+    minHeight: StyleConstants.Font.Size.L + StyleConstants.Spacing.S * 3,
     marginHorizontal: StyleConstants.Spacing.S
   }
 })

src/components/Timeline/Shared/ActionsUsers.tsx

@@ -38,7 +38,7 @@ const TimelineActionsUsers = React.memo(
               'shared.actionsUsers.reblogged_by.accessibilityHint'
             )}
             accessibilityRole='button'
-            style={[styles.text, { color: theme.secondary }]}
+            style={[styles.text, { color: theme.blue }]}
             onPress={() => {
               analytics('timeline_shared_actionsusers_press_boosted', {
                 count: status.reblogs_count
@@ -68,7 +68,7 @@ const TimelineActionsUsers = React.memo(
               'shared.actionsUsers.favourited_by.accessibilityHint'
             )}
             accessibilityRole='button'
-            style={[styles.text, { color: theme.secondary }]}
+            style={[styles.text, { color: theme.blue }]}
             onPress={() => {
               analytics('timeline_shared_actionsusers_press_boosted', {
                 count: status.favourites_count
@@ -98,10 +98,9 @@ const styles = StyleSheet.create({
   base: {
     flexDirection: 'row'
   },
-  pressable: { margin: StyleConstants.Spacing.M },
   text: {
-    ...StyleConstants.FontStyle.S,
-    padding: StyleConstants.Spacing.S * 1.5,
+    ...StyleConstants.FontStyle.M,
+    padding: StyleConstants.Spacing.S,
     paddingLeft: 0,
     marginRight: StyleConstants.Spacing.S
   }

src/components/Timeline/Shared/Content.tsx

@@ -30,6 +30,7 @@ const TimelineContent = React.memo(
               mentions={status.mentions}
               tags={status.tags}
               numberOfLines={999}
+              highlighted={highlighted}
               disableDetails={disableDetails}
             />
             <ParseHTML
@@ -41,6 +42,7 @@ const TimelineContent = React.memo(
               tags={status.tags}
               numberOfLines={1}
               expandHint={t('shared.content.expandHint')}
+              highlighted={highlighted}
               disableDetails={disableDetails}
             />
           </>

src/components/Timeline/Shared/FullConversation.tsx

@@ -26,7 +26,7 @@ const TimelineFullConversation = React.memo(
         style={{
           ...StyleConstants.FontStyle.S,
           color: theme.blue,
-          marginTop: StyleConstants.Font.Size.S
+          marginTop: StyleConstants.Spacing.S
         }}
       >
         {t('shared.fullConversation')}

src/components/Timeline/Shared/Translate.tsx

@@ -1,13 +1,32 @@
-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 htmlparser2 from 'htmlparser2-without-node-native'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Text } from 'react-native'
+import { Pressable, StyleSheet, Text } from 'react-native'
+import { Circle } from 'react-native-animated-spinkit'
 import { useSelector } from 'react-redux'
 
+const availableLanguages = [
+  'en',
+  'ar',
+  'zh',
+  'fr',
+  'de',
+  'hi',
+  'ga',
+  'it',
+  'ja',
+  'ko',
+  'pl',
+  'pt',
+  'ru',
+  'es',
+  'tr'
+]
+
 export interface Props {
   highlighted: boolean
   status: Mastodon.Status
@@ -22,38 +41,113 @@ const TimelineTranslate = React.memo(
       return null
     }
 
-    const settingsLanguage = useSelector(getSettingsLanguage, () => true)
+    const { t } = useTranslation('componentTimeline')
+    const { theme } = useTheme()
+
     const tootLanguage = status.language.slice(0, 2)
+    if (!availableLanguages.includes(tootLanguage)) {
+      return (
+        <Text
+          style={{
+            ...StyleConstants.FontStyle.M,
+            color: theme.disabled
+          }}
+        >
+          {t('shared.translate.unavailable')}
+        </Text>
+      )
+    }
+
+    const settingsLanguage = useSelector(getSettingsLanguage, () => true)
 
     if (settingsLanguage.includes(tootLanguage)) {
       return null
     }
 
-    const { t } = useTranslation('componentTimeline')
-    const { theme } = useTheme()
+    let emojisRemoved = status.spoiler_text
+      ? status.spoiler_text.concat(status.content)
+      : status.content
+    if (status.emojis) {
+      for (const emoji of status.emojis) {
+        emojisRemoved = emojisRemoved.replaceAll(`:${emoji.shortcode}:`, '')
+      }
+    }
 
-    const { data } = useTranslateQuery({
-      toot: status.content,
+    let cleaned = ''
+    const parser = new htmlparser2.Parser({
+      ontext (text: string) {
+        cleaned = cleaned.concat(text)
+      }
+    })
+    parser.write(emojisRemoved)
+    parser.end()
+
+    const [enabled, setEnabled] = useState(false)
+    const { refetch, data, isLoading, isSuccess, isError } = useTranslateQuery({
+      toot: cleaned,
       source: status.language,
-      target: settingsLanguage.slice(0, 2)
+      target: settingsLanguage.slice(0, 2),
+      options: { enabled }
     })
 
     return (
       <>
-        <Text
-          style={{
-            ...StyleConstants.FontStyle.S,
-            color: theme.blue,
-            marginTop: StyleConstants.Font.Size.S
+        <Pressable
+          style={[styles.button, { paddingBottom: isSuccess ? 0 : undefined }]}
+          onPress={() => {
+            if (enabled) {
+              if (!isSuccess) {
+                refetch()
+              }
+            } else {
+              setEnabled(true)
+            }
           }}
         >
-          {t('shared.translate')}
-        </Text>
-        {data ? <Text children={data} /> : null}
+          <Text
+            style={{
+              ...StyleConstants.FontStyle.M,
+              color:
+                isLoading || isSuccess
+                  ? theme.disabled
+                  : isError
+                  ? theme.red
+                  : theme.blue
+            }}
+          >
+            {isError
+              ? t('shared.translate.error')
+              : t('shared.translate.default')}
+          </Text>
+          {isLoading ? (
+            <Circle
+              size={StyleConstants.Font.Size.M}
+              color={theme.disabled}
+              style={{ marginLeft: StyleConstants.Spacing.S }}
+            />
+          ) : null}
+        </Pressable>
+        {data ? (
+          <Text
+            style={{
+              ...StyleConstants.FontStyle.M,
+              color: theme.primaryDefault
+            }}
+            children={data}
+          />
+        ) : null}
       </>
     )
   },
   () => true
 )
 
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: StyleConstants.Spacing.S
+  }
+})
+
 export default TimelineTranslate