Just do full renders of parent posts in the feed

src/view/com/post/Post.tsx

@@ -16,6 +16,7 @@ import {PostThreadViewModel} from '../../../state/models/post-thread-view'
 import {Link} from '../util/Link'
 import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
+import {PostEmbeds} from '../util/PostEmbeds'
 import {PostCtrls} from '../util/PostCtrls'
 import {RichText} from '../util/RichText'
 import * as Toast from '../util/Toast'
@@ -26,10 +27,12 @@ import {s, colors} from '../../lib/styles'
 export const Post = observer(function Post({
   uri,
   initView,
+  showReplyLine,
   style,
 }: {
   uri: string
   initView?: PostThreadViewModel
+  showReplyLine?: boolean
   style?: StyleProp<ViewStyle>
 }) {
   const store = useStores()
@@ -131,11 +134,12 @@ export const Post = observer(function Post({
 
   return (
     <Link style={[styles.outer, style]} href={itemHref} title={itemTitle}>
+      {showReplyLine && <View style={styles.replyLine} />}
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <Link href={authorHref} title={authorTitle}>
             <UserAvatar
-              size={50}
+              size={52}
               displayName={item.author.displayName}
               handle={item.author.handle}
               avatar={item.author.avatar}
@@ -174,6 +178,7 @@ export const Post = observer(function Post({
               style={styles.postText}
             />
           </View>
+          <PostEmbeds embed={item.embed} style={{marginBottom: 10}} />
           <PostCtrls
             replyCount={item.replyCount}
             repostCount={item.repostCount}
@@ -218,4 +223,12 @@ const styles = StyleSheet.create({
     fontSize: 16,
     lineHeight: 20.8, // 1.3 of 16px
   },
+  replyLine: {
+    position: 'absolute',
+    left: 36,
+    top: 70,
+    bottom: 0,
+    borderLeftWidth: 2,
+    borderLeftColor: colors.gray2,
+  },
 })

src/view/com/posts/FeedItem.tsx

@@ -8,6 +8,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FeedItemModel} from '../../../state/models/feed-view'
 import {Link} from '../util/Link'
 import {UserInfoText} from '../util/UserInfoText'
+import {Post} from '../post/Post'
 import {PostMeta} from '../util/PostMeta'
 import {PostCtrls} from '../util/PostCtrls'
 import {PostEmbeds} from '../util/PostEmbeds'
@@ -90,14 +91,26 @@ export const FeedItem = observer(function FeedItem({
     return <View />
   }
 
+  const isChild =
+    item._isThreadChild ||
+    (!item.repostedBy && !item.trendedBy && item.additionalParentPost?.thread)
   const outerStyles = [
     styles.outer,
-    item._isThreadChild ? styles.outerNoTop : undefined,
+    isChild ? styles.outerNoTop : undefined,
     item._isThreadParent ? styles.outerNoBottom : undefined,
   ]
   return (
+    <>
+      {isChild && item.additionalParentPost?.thread ? (
+        <Post
+          uri={item.additionalParentPost.thread.uri}
+          initView={item.additionalParentPost}
+          showReplyLine
+          style={{marginTop: 2}}
+        />
+      ) : undefined}
       <Link style={outerStyles} href={itemHref} title={itemTitle}>
-      {item._isThreadChild && <View style={styles.topReplyLine} />}
+        {isChild && <View style={styles.topReplyLine} />}
         {item._isThreadParent && (
           <View
             style={[
@@ -113,7 +126,8 @@ export const FeedItem = observer(function FeedItem({
             title={item.repostedBy.displayName || item.repostedBy.handle}>
             <FontAwesomeIcon icon="retweet" style={styles.includeReasonIcon} />
             <Text style={[s.gray4, s.bold, s.f13]}>
-            Reposted by {item.repostedBy.displayName || item.repostedBy.handle}
+              Reposted by{' '}
+              {item.repostedBy.displayName || item.repostedBy.handle}
             </Text>
           </Link>
         )}
@@ -127,30 +141,11 @@ export const FeedItem = observer(function FeedItem({
               style={styles.includeReasonIcon}
             />
             <Text style={[s.gray4, s.bold, s.f13]}>
-            Trending with {item.trendedBy.displayName || item.trendedBy.handle}
+              Trending with{' '}
+              {item.trendedBy.displayName || item.trendedBy.handle}
             </Text>
           </Link>
         )}
-      {item.additionalParentPost ? (
-        <View style={styles.replyingTo}>
-          <View style={styles.replyingToLine} />
-          <View style={styles.replyingToAvatar}>
-            <UserAvatar
-              handle={item.additionalParentPost?.thread?.author.handle}
-              displayName={
-                item.additionalParentPost?.thread?.author.displayName
-              }
-              avatar={item.additionalParentPost?.thread?.author.avatar}
-              size={32}
-            />
-          </View>
-          <View style={styles.replyingToTextContainer}>
-            <Text style={styles.replyingToText} numberOfLines={2}>
-              {item.additionalParentPost?.thread?.record.text}
-            </Text>
-          </View>
-        </View>
-      ) : undefined}
         <View style={styles.layout}>
           <View style={styles.layoutAvi}>
             <Link
@@ -212,6 +207,7 @@ export const FeedItem = observer(function FeedItem({
           </View>
         </View>
       </Link>
+    </>
   )
 })
 
@@ -224,7 +220,7 @@ const styles = StyleSheet.create({
     padding: 10,
   },
   outerNoTop: {
-    marginTop: 1,
+    marginTop: 0,
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
   },
@@ -260,35 +256,6 @@ const styles = StyleSheet.create({
     marginRight: 4,
     color: colors.gray4,
   },
-  replyingToLine: {
-    position: 'absolute',
-    left: 24,
-    bottom: -1 * REPLYING_TO_LINE_LENGTH + 6,
-    height: REPLYING_TO_LINE_LENGTH,
-    borderLeftWidth: 2,
-    borderLeftColor: colors.gray2,
-  },
-  replyingTo: {
-    flexDirection: 'row',
-    backgroundColor: colors.white,
-    paddingBottom: 8,
-    paddingRight: 24,
-  },
-  replyingToAvatar: {
-    marginLeft: 9,
-    marginRight: 19,
-    marginTop: 1,
-  },
-  replyingToTextContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    height: 34,
-    alignItems: 'center',
-  },
-  replyingToText: {
-    flex: 1,
-    color: colors.gray5,
-  },
   layout: {
     flexDirection: 'row',
   },

src/view/com/util/PostEmbeds.tsx

@@ -121,7 +121,7 @@ export function PostEmbeds({
 
 const styles = StyleSheet.create({
   imagesContainer: {
-    marginBottom: 20,
+    marginBottom: 10,
   },
   imagesWidthSpacer: {
     width: 5,