Merge pull request #1133 from bluesky-social/eric/fix-thread-ui

fix thread spacing and reply lines

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

@@ -107,7 +107,7 @@ export class PostThreadItemModel {
           const itemModel = new PostThreadItemModel(this.rootStore, item)
           itemModel._depth = this._depth + 1
           itemModel._showParentReplyLine =
-            itemModel.parentUri !== highlightedPostUri && replies.length === 0
+            itemModel.parentUri !== highlightedPostUri
           if (item.replies?.length) {
             itemModel._showChildReplyLine = true
             itemModel.assignTreeModels(item, highlightedPostUri, false, true)

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

@@ -34,8 +34,6 @@ import {formatCount} from '../util/numeric/format'
 import {TimeElapsed} from 'view/com/util/TimeElapsed'
 import {makeProfileLink} from 'lib/routes/links'
 
-const PARENT_REPLY_LINE_LENGTH = 8
-
 export const PostThreadItem = observer(function PostThreadItem({
   item,
   onPostReply,
@@ -159,6 +157,23 @@ export const PostThreadItem = observer(function PostThreadItem({
 
   if (item._isHighlightedPost) {
     return (
+      <>
+        {item.rootUri !== item.uri && (
+          <View style={{paddingLeft: 18, flexDirection: 'row', height: 16}}>
+            <View style={{width: 52}}>
+              <View
+                style={[
+                  styles.replyLine,
+                  {
+                    flexGrow: 1,
+                    backgroundColor: pal.colors.replyLine,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        )}
+
         <Link
           testID={`postThreadItem-by-${item.post.author.handle}`}
           style={[styles.outer, styles.outerHighlighted, pal.border, pal.view]}
@@ -166,7 +181,7 @@ export const PostThreadItem = observer(function PostThreadItem({
           accessible={false}>
           <PostSandboxWarning />
           <View style={styles.layout}>
-          <View style={styles.layoutAvi}>
+            <View style={[styles.layoutAvi, {paddingBottom: 8}]}>
               <PreviewableUserAvatar
                 size={52}
                 did={item.post.author.did}
@@ -324,6 +339,7 @@ export const PostThreadItem = observer(function PostThreadItem({
             </View>
           </View>
         </Link>
+      </>
     )
   } else {
     return (
@@ -336,26 +352,36 @@ export const PostThreadItem = observer(function PostThreadItem({
             pal.border,
             pal.view,
             item._showParentReplyLine && styles.noTopBorder,
+            !item._showChildReplyLine && {borderBottomWidth: 1},
           ]}
           moderation={item.moderation.content}>
+          <PostSandboxWarning />
+
+          <View
+            style={{flexDirection: 'row', gap: 10, paddingLeft: 8, height: 16}}>
+            <View style={{width: 52}}>
               {item._showParentReplyLine && (
                 <View
                   style={[
-                styles.parentReplyLine,
+                    styles.replyLine,
-                {borderColor: pal.colors.replyLine},
+                    {
+                      flexGrow: 1,
+                      backgroundColor: pal.colors.replyLine,
+                      marginBottom: 4,
+                    },
                   ]}
                 />
               )}
-          {item._showChildReplyLine && (
+            </View>
+          </View>
+
           <View
             style={[
-                styles.childReplyLine,
+              styles.layout,
-                {borderColor: pal.colors.replyLine},
+              {
-              ]}
+                paddingBottom: item._showChildReplyLine ? 0 : 16,
-            />
+              },
-          )}
+            ]}>
-          <PostSandboxWarning />
-          <View style={styles.layout}>
             <View style={styles.layoutAvi}>
               <PreviewableUserAvatar
                 size={52}
@@ -364,7 +390,21 @@ export const PostThreadItem = observer(function PostThreadItem({
                 avatar={item.post.author.avatar}
                 moderation={item.moderation.avatar}
               />
+
+              {item._showChildReplyLine && (
+                <View
+                  style={[
+                    styles.replyLine,
+                    {
+                      flexGrow: 1,
+                      backgroundColor: pal.colors.replyLine,
+                      marginTop: 4,
+                    },
+                  ]}
+                />
+              )}
             </View>
+
             <View style={styles.layoutContent}>
               <PostMeta
                 author={item.post.author}
@@ -430,7 +470,7 @@ export const PostThreadItem = observer(function PostThreadItem({
           <Link
             style={[
               styles.loadMore,
-              {borderTopColor: pal.colors.border},
+              {borderBottomColor: pal.colors.border},
               pal.view,
             ]}
             href={itemHref}
@@ -480,41 +520,22 @@ const styles = StyleSheet.create({
     paddingLeft: 10,
   },
   outerHighlighted: {
-    paddingTop: 2,
+    paddingTop: 16,
-    paddingLeft: 6,
+    paddingLeft: 10,
-    paddingRight: 6,
+    paddingRight: 10,
   },
   noTopBorder: {
     borderTopWidth: 0,
   },
-  parentReplyLine: {
-    position: 'absolute',
-    left: 44,
-    top: -1 * PARENT_REPLY_LINE_LENGTH + 6,
-    height: PARENT_REPLY_LINE_LENGTH,
-    borderLeftWidth: 2,
-  },
-  childReplyLine: {
-    position: 'absolute',
-    left: 44,
-    top: 65,
-    bottom: 0,
-    borderLeftWidth: 2,
-  },
   layout: {
     flexDirection: 'row',
+    gap: 10,
+    paddingLeft: 8,
   },
-  layoutAvi: {
+  layoutAvi: {},
-    paddingLeft: 10,
-    paddingTop: 10,
-    paddingBottom: 10,
-    marginRight: 10,
-  },
   layoutContent: {
     flex: 1,
     paddingRight: 10,
-    paddingTop: 10,
-    paddingBottom: 10,
   },
   meta: {
     flexDirection: 'row',
@@ -567,10 +588,14 @@ const styles = StyleSheet.create({
   loadMore: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    borderTopWidth: 1,
+    borderBottomWidth: 1,
     paddingLeft: 80,
     paddingRight: 20,
-    paddingVertical: 10,
+    paddingVertical: 12,
-    marginBottom: 8,
+  },
+  replyLine: {
+    width: 2,
+    marginLeft: 'auto',
+    marginRight: 'auto',
   },
 })