Remove some confusing horizontal lines in threads (#566)

src/state/models/content/post-thread.ts

@@ -125,7 +125,7 @@ export class PostThreadItemModel {
         parentModel._depth = this._depth - 1
         parentModel._showChildReplyLine = true
         if (v.parent.parent) {
-          parentModel._showParentReplyLine = true //parentModel.uri !== higlightedPostUri
+          parentModel._showParentReplyLine = true
           parentModel.assignTreeModels(v.parent, higlightedPostUri, true, false)
         }
         this.parent = parentModel
@@ -143,7 +143,7 @@ export class PostThreadItemModel {
           const itemModel = new PostThreadItemModel(this.rootStore, item)
           itemModel._depth = this._depth + 1
           itemModel._showParentReplyLine =
-            itemModel.parentUri !== higlightedPostUri
+            itemModel.parentUri !== higlightedPostUri && replies.length === 0
           if (item.replies?.length) {
             itemModel._showChildReplyLine = true
             itemModel.assignTreeModels(item, higlightedPostUri, false, true)

src/view/com/post-thread/PostThreadItem.tsx

@@ -310,7 +310,12 @@ export const PostThreadItem = observer(function PostThreadItem({
         <PostHider
           testID={`postThreadItem-by-${item.post.author.handle}`}
           href={itemHref}
-          style={[styles.outer, {borderColor: pal.colors.border}, pal.view]}
+          style={[
+            styles.outer,
+            pal.border,
+            pal.view,
+            item._showParentReplyLine && styles.noTopBorder,
+          ]}
           moderation={item.moderation.thread}>
           {item._showParentReplyLine && (
             <View
@@ -425,6 +430,9 @@ const styles = StyleSheet.create({
     paddingLeft: 6,
     paddingRight: 6,
   },
+  noTopBorder: {
+    borderTopWidth: 0,
+  },
   parentReplyLine: {
     position: 'absolute',
     left: 44,