Refine UX for on-device translation for posts (#9987)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
Co-authored-by: Eric Bailey <git@esb.lol>

src/view/com/post/Post.tsx

@@ -33,6 +33,7 @@ import {PostAlerts} from '#/components/moderation/PostAlerts'
 import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
 import {PostRepliedTo} from '#/components/Post/PostRepliedTo'
 import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
+import {TranslatedPost} from '#/components/Post/Translated'
 import {PostControls} from '#/components/PostControls'
 import {RichText} from '#/components/RichText'
 import {SubtleHover} from '#/components/SubtleHover'
@@ -152,6 +153,7 @@ function PostInner({
   }, [queryClient, post.author, outerOnBeforePress])
 
   const [hover, setHover] = useState(false)
+
   return (
     <Link
       href={itemHref}
@@ -217,6 +219,11 @@ function PostInner({
                 )}
               </View>
             ) : undefined}
+            <TranslatedPost
+              hideTranslateLink={true}
+              post={post}
+              postText={record.text}
+            />
             {post.embed ? (
               <Embed
                 embed={post.embed}

src/view/com/posts/PostFeedItem.tsx

@@ -42,6 +42,7 @@ import {Embed} from '#/components/Post/Embed'
 import {PostEmbedViewContext} from '#/components/Post/Embed/types'
 import {PostRepliedTo} from '#/components/Post/PostRepliedTo'
 import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
+import {TranslatedPost} from '#/components/Post/Translated'
 import {PostControls} from '#/components/PostControls'
 import {DiscoverDebug} from '#/components/PostControls/DiscoverDebug'
 import {RichText} from '#/components/RichText'
@@ -450,6 +451,14 @@ let PostContent = ({
       : []
   }, [post, currentAccount?.did, threadgateHiddenReplies])
 
+  const record = useMemo<AppBskyFeedPost.Record | undefined>(
+    () =>
+      bsky.validate(post.record, AppBskyFeedPost.validateRecord)
+        ? post.record
+        : undefined,
+    [post],
+  )
+
   const onPressShowMore = useCallback(() => {
     setLimitLines(false)
   }, [setLimitLines])
@@ -481,6 +490,13 @@ let PostContent = ({
           )}
         </View>
       ) : undefined}
+      {record && (
+        <TranslatedPost
+          hideTranslateLink={true}
+          post={post}
+          postText={record.text}
+        />
+      )}
       {postEmbed ? (
         <View style={[a.pb_xs]}>
           <Embed