From c9b209c6fd19daf2589bc69afec1c6c5cf20a9ac Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Mon, 19 Dec 2022 19:12:43 -0600
Subject: [PATCH] Tighten up the home feed

---
 src/view/com/post/Post.tsx      |  1 -
 src/view/com/posts/FeedItem.tsx | 66 +++++++++++++++++++++++++--------
 2 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 814ab4cb..a2911162 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -223,7 +223,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     flexWrap: 'wrap',
-    minHeight: 36,
     paddingBottom: 8,
   },
   postText: {
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 12ad6a52..db7b757c 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -2,7 +2,7 @@ import React, {useMemo, useState} from 'react'
 import {observer} from 'mobx-react-lite'
 import {StyleSheet, Text, View} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
-import Svg, {Circle} from 'react-native-svg'
+import Svg, {Circle, Line} from 'react-native-svg'
 import {AtUri} from '../../../third-party/uri'
 import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -19,8 +19,7 @@ import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
 import {useStores} from '../../../state'
 
-const TOP_REPLY_LINE_LENGTH = 12
-const REPLYING_TO_LINE_LENGTH = 8
+const TOP_REPLY_LINE_LENGTH = 8
 
 export const FeedItem = observer(function FeedItem({
   item,
@@ -97,7 +96,11 @@ export const FeedItem = observer(function FeedItem({
     (!item.repostedBy && !item.trendedBy && item.additionalParentPost?.thread)
   const outerStyles = [
     styles.outer,
-    isChild ? styles.outerNoTop : undefined,
+    isChild
+      ? item._isThreadChild
+        ? styles.outerSmallTop
+        : styles.outerNoTop
+      : undefined,
     item._isThreadParent ? styles.outerNoBottom : undefined,
   ]
   return (
@@ -111,7 +114,14 @@ export const FeedItem = observer(function FeedItem({
         />
       ) : undefined}
       <Link style={outerStyles} href={itemHref} title={itemTitle} noFeedback>
-        {isChild && <View style={styles.topReplyLine} />}
+        {isChild && (
+          <View
+            style={[
+              styles.topReplyLine,
+              item._isThreadChild ? styles.topReplyLineSmallAvi : undefined,
+            ]}
+          />
+        )}
         {item._isThreadParent && (
           <View
             style={[
@@ -175,13 +185,18 @@ export const FeedItem = observer(function FeedItem({
                 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>
+            {!isChild && replyHref !== '' && (
+              <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
+                <FontAwesomeIcon
+                  icon="reply"
+                  size={9}
+                  style={[s.gray4, s.mr5]}
+                />
+                <Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
                 <Link href={replyHref} title="Parent post">
                   <UserInfoText
                     did={replyAuthorDid}
-                    style={[s.f15, s.blue3]}
+                    style={[s.f12, s.gray5]}
                     prefix="@"
                   />
                 </Link>
@@ -220,9 +235,17 @@ export const FeedItem = observer(function FeedItem({
           noFeedback>
           <View style={styles.viewFullThreadDots}>
             <Svg width="4" height="30">
-              <Circle x="2" y="5" r="1.5" fill={colors.gray3} />
-              <Circle x="2" y="11" r="1.5" fill={colors.gray3} />
-              <Circle x="2" y="17" r="1.5" fill={colors.gray3} />
+              <Line
+                x1="2"
+                y1="0"
+                x2="2"
+                y2="5"
+                stroke={colors.gray2}
+                strokeWidth="2"
+              />
+              <Circle x="2" y="10" r="1.5" fill={colors.gray3} />
+              <Circle x="2" y="16" r="1.5" fill={colors.gray3} />
+              <Circle x="2" y="22" r="1.5" fill={colors.gray3} />
             </Svg>
           </View>
           <Text style={styles.viewFullThreadText}>View full thread</Text>
@@ -242,26 +265,37 @@ const styles = StyleSheet.create({
   },
   outerNoTop: {
     marginTop: 0,
+    paddingTop: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
+  outerSmallTop: {
+    marginTop: 0,
+    paddingTop: 8,
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
   },
   outerNoBottom: {
     marginBottom: 0,
+    paddingBottom: 0,
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
   },
   topReplyLine: {
     position: 'absolute',
     left: 34,
-    top: -1 * TOP_REPLY_LINE_LENGTH + 10,
+    top: -1 * TOP_REPLY_LINE_LENGTH,
     height: TOP_REPLY_LINE_LENGTH,
     borderLeftWidth: 2,
     borderLeftColor: colors.gray2,
   },
+  topReplyLineSmallAvi: {
+    height: TOP_REPLY_LINE_LENGTH + 10,
+  },
   bottomReplyLine: {
     position: 'absolute',
     left: 34,
-    top: 70,
+    top: 60,
     bottom: 0,
     borderLeftWidth: 2,
     borderLeftColor: colors.gray2,
@@ -292,7 +326,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexWrap: 'wrap',
     paddingBottom: 8,
-    minHeight: 36,
   },
   postText: {
     fontFamily: 'System',
@@ -304,7 +337,8 @@ const styles = StyleSheet.create({
   },
   viewFullThread: {
     backgroundColor: colors.white,
-    paddingTop: 4,
+    paddingTop: 12,
+    paddingBottom: 4,
     paddingLeft: 72,
   },
   viewFullThreadDots: {