Just do full renders of parent posts in the feed

3 files changed, 119 insertions, 139 deletions

diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 97bec92ea..6faae3ddd 100644
--- a/src/view/com/post/Post.tsx
+++ b/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,
+  },
 })
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 2feb71a98..e66858ff6 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/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,128 +91,123 @@ 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 (
-    <Link style={outerStyles} href={itemHref} title={itemTitle}>
-      {item._isThreadChild && <View style={styles.topReplyLine} />}
-      {item._isThreadParent && (
-        <View
-          style={[
-            styles.bottomReplyLine,
-            item._isThreadChild ? styles.bottomReplyLineSmallAvi : undefined,
-          ]}
+    <>
+      {isChild && item.additionalParentPost?.thread ? (
+        <Post
+          uri={item.additionalParentPost.thread.uri}
+          initView={item.additionalParentPost}
+          showReplyLine
+          style={{marginTop: 2}}
         />
-      )}
-      {item.repostedBy && (
-        <Link
-          style={styles.includeReason}
-          href={`/profile/${item.repostedBy.handle}`}
-          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}
-          </Text>
-        </Link>
-      )}
-      {item.trendedBy && (
-        <Link
-          style={styles.includeReason}
-          href={`/profile/${item.trendedBy.handle}`}
-          title={item.trendedBy.displayName || item.trendedBy.handle}>
-          <FontAwesomeIcon
-            icon="arrow-trend-up"
-            style={styles.includeReasonIcon}
+      ) : undefined}
+      <Link style={outerStyles} href={itemHref} title={itemTitle}>
+        {isChild && <View style={styles.topReplyLine} />}
+        {item._isThreadParent && (
+          <View
+            style={[
+              styles.bottomReplyLine,
+              item._isThreadChild ? styles.bottomReplyLineSmallAvi : undefined,
+            ]}
           />
-          <Text style={[s.gray4, s.bold, s.f13]}>
-            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}
+        )}
+        {item.repostedBy && (
+          <Link
+            style={styles.includeReason}
+            href={`/profile/${item.repostedBy.handle}`}
+            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}
             </Text>
-          </View>
-        </View>
-      ) : undefined}
-      <View style={styles.layout}>
-        <View style={styles.layoutAvi}>
+          </Link>
+        )}
+        {item.trendedBy && (
           <Link
-            href={authorHref}
-            title={item.author.handle}
-            style={item._isThreadChild ? {marginLeft: 10} : undefined}>
-            <UserAvatar
-              size={item._isThreadChild ? 30 : 52}
-              displayName={item.author.displayName}
-              handle={item.author.handle}
-              avatar={item.author.avatar}
+            style={styles.includeReason}
+            href={`/profile/${item.trendedBy.handle}`}
+            title={item.trendedBy.displayName || item.trendedBy.handle}>
+            <FontAwesomeIcon
+              icon="arrow-trend-up"
+              style={styles.includeReasonIcon}
             />
+            <Text style={[s.gray4, s.bold, s.f13]}>
+              Trending with{' '}
+              {item.trendedBy.displayName || item.trendedBy.handle}
+            </Text>
           </Link>
-        </View>
-        <View style={styles.layoutContent}>
-          {!item._isThreadChild ? (
-            <PostMeta
-              itemHref={itemHref}
-              itemTitle={itemTitle}
-              authorHref={authorHref}
-              authorHandle={item.author.handle}
-              authorDisplayName={item.author.displayName}
-              timestamp={item.indexedAt}
-              isAuthor={item.author.did === store.me.did}
-              onCopyPostText={onCopyPostText}
-              onDeletePost={onDeletePost}
-            />
-          ) : undefined}
-          {!item._isThreadChild && replyHref !== '' && (
-            <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
-              <Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
-              <Link href={replyHref} title="Parent post">
-                <UserInfoText
-                  did={replyAuthorDid}
-                  style={[s.f15, s.blue3]}
-                  prefix="@"
-                />
-              </Link>
+        )}
+        <View style={styles.layout}>
+          <View style={styles.layoutAvi}>
+            <Link
+              href={authorHref}
+              title={item.author.handle}
+              style={item._isThreadChild ? {marginLeft: 10} : undefined}>
+              <UserAvatar
+                size={item._isThreadChild ? 30 : 52}
+                displayName={item.author.displayName}
+                handle={item.author.handle}
+                avatar={item.author.avatar}
+              />
+            </Link>
+          </View>
+          <View style={styles.layoutContent}>
+            {!item._isThreadChild ? (
+              <PostMeta
+                itemHref={itemHref}
+                itemTitle={itemTitle}
+                authorHref={authorHref}
+                authorHandle={item.author.handle}
+                authorDisplayName={item.author.displayName}
+                timestamp={item.indexedAt}
+                isAuthor={item.author.did === store.me.did}
+                onCopyPostText={onCopyPostText}
+                onDeletePost={onDeletePost}
+              />
+            ) : undefined}
+            {!item._isThreadChild && replyHref !== '' && (
+              <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
+                <Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
+                <Link href={replyHref} title="Parent post">
+                  <UserInfoText
+                    did={replyAuthorDid}
+                    style={[s.f15, s.blue3]}
+                    prefix="@"
+                  />
+                </Link>
+              </View>
+            )}
+            <View style={styles.postTextContainer}>
+              <RichText
+                text={record.text}
+                entities={record.entities}
+                style={styles.postText}
+              />
             </View>
-          )}
-          <View style={styles.postTextContainer}>
-            <RichText
-              text={record.text}
-              entities={record.entities}
-              style={styles.postText}
+            <PostEmbeds embed={item.embed} style={{marginBottom: 10}} />
+            <PostCtrls
+              replyCount={item.replyCount}
+              repostCount={item.repostCount}
+              upvoteCount={item.upvoteCount}
+              isReposted={!!item.myState.repost}
+              isUpvoted={!!item.myState.upvote}
+              onPressReply={onPressReply}
+              onPressToggleRepost={onPressToggleRepost}
+              onPressToggleUpvote={onPressToggleUpvote}
             />
           </View>
-          <PostEmbeds embed={item.embed} style={{marginBottom: 10}} />
-          <PostCtrls
-            replyCount={item.replyCount}
-            repostCount={item.repostCount}
-            upvoteCount={item.upvoteCount}
-            isReposted={!!item.myState.repost}
-            isUpvoted={!!item.myState.upvote}
-            onPressReply={onPressReply}
-            onPressToggleRepost={onPressToggleRepost}
-            onPressToggleUpvote={onPressToggleUpvote}
-          />
         </View>
-      </View>
-    </Link>
+      </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',
   },
diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx
index ea15dc9ca..5e886409e 100644
--- a/src/view/com/util/PostEmbeds.tsx
+++ b/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,