fix thread spacing and reply lines

2 files changed, 218 insertions, 177 deletions

diff --git a/src/state/models/content/post-thread-item.ts b/src/state/models/content/post-thread-item.ts
index 141b4f937..942f3acc8 100644
--- a/src/state/models/content/post-thread-item.ts
+++ b/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)
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 41be392a7..cbdd90b86 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -159,171 +159,189 @@ export const PostThreadItem = observer(function PostThreadItem({
 
   if (item._isHighlightedPost) {
     return (
-      <Link
-        testID={`postThreadItem-by-${item.post.author.handle}`}
-        style={[styles.outer, styles.outerHighlighted, pal.border, pal.view]}
-        noFeedback
-        accessible={false}>
-        <PostSandboxWarning />
-        <View style={styles.layout}>
-          <View style={styles.layoutAvi}>
-            <PreviewableUserAvatar
-              size={52}
-              did={item.post.author.did}
-              handle={item.post.author.handle}
-              avatar={item.post.author.avatar}
-              moderation={item.moderation.avatar}
-            />
+      <>
+        {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>
-          <View style={styles.layoutContent}>
-            <View style={[styles.meta, styles.metaExpandedLine1]}>
-              <View style={[s.flexRow]}>
+        )}
+
+        <Link
+          testID={`postThreadItem-by-${item.post.author.handle}`}
+          style={[styles.outer, styles.outerHighlighted, pal.border, pal.view]}
+          noFeedback
+          accessible={false}>
+          <PostSandboxWarning />
+          <View style={styles.layout}>
+            <View style={[styles.layoutAvi, {paddingBottom: 8}]}>
+              <PreviewableUserAvatar
+                size={52}
+                did={item.post.author.did}
+                handle={item.post.author.handle}
+                avatar={item.post.author.avatar}
+                moderation={item.moderation.avatar}
+              />
+            </View>
+            <View style={styles.layoutContent}>
+              <View style={[styles.meta, styles.metaExpandedLine1]}>
+                <View style={[s.flexRow]}>
+                  <Link
+                    style={styles.metaItem}
+                    href={authorHref}
+                    title={authorTitle}>
+                    <Text
+                      type="xl-bold"
+                      style={[pal.text]}
+                      numberOfLines={1}
+                      lineHeight={1.2}>
+                      {sanitizeDisplayName(
+                        item.post.author.displayName ||
+                          sanitizeHandle(item.post.author.handle),
+                      )}
+                    </Text>
+                  </Link>
+                  <Text type="md" style={[styles.metaItem, pal.textLight]}>
+                    &middot;&nbsp;
+                    <TimeElapsed timestamp={item.post.indexedAt}>
+                      {({timeElapsed}) => <>{timeElapsed}</>}
+                    </TimeElapsed>
+                  </Text>
+                </View>
+                <View style={s.flex1} />
+                <PostDropdownBtn
+                  testID="postDropdownBtn"
+                  itemUri={itemUri}
+                  itemCid={itemCid}
+                  itemHref={itemHref}
+                  itemTitle={itemTitle}
+                  isAuthor={item.post.author.did === store.me.did}
+                  isThreadMuted={item.isThreadMuted}
+                  onCopyPostText={onCopyPostText}
+                  onOpenTranslate={onOpenTranslate}
+                  onToggleThreadMute={onToggleThreadMute}
+                  onDeletePost={onDeletePost}
+                />
+              </View>
+              <View style={styles.meta}>
                 <Link
                   style={styles.metaItem}
                   href={authorHref}
                   title={authorTitle}>
-                  <Text
-                    type="xl-bold"
-                    style={[pal.text]}
-                    numberOfLines={1}
-                    lineHeight={1.2}>
-                    {sanitizeDisplayName(
-                      item.post.author.displayName ||
-                        sanitizeHandle(item.post.author.handle),
-                    )}
+                  <Text type="md" style={[pal.textLight]} numberOfLines={1}>
+                    {sanitizeHandle(item.post.author.handle, '@')}
                   </Text>
                 </Link>
-                <Text type="md" style={[styles.metaItem, pal.textLight]}>
-                  &middot;&nbsp;
-                  <TimeElapsed timestamp={item.post.indexedAt}>
-                    {({timeElapsed}) => <>{timeElapsed}</>}
-                  </TimeElapsed>
-                </Text>
               </View>
-              <View style={s.flex1} />
-              <PostDropdownBtn
-                testID="postDropdownBtn"
+            </View>
+          </View>
+          <View style={[s.pl10, s.pr10, s.pb10]}>
+            <ContentHider
+              moderation={item.moderation.content}
+              ignoreMute
+              style={styles.contentHider}
+              childContainerStyle={styles.contentHiderChild}>
+              <PostAlerts
+                moderation={item.moderation.content}
+                includeMute
+                style={styles.alert}
+              />
+              {item.richText?.text ? (
+                <View
+                  style={[
+                    styles.postTextContainer,
+                    styles.postTextLargeContainer,
+                  ]}>
+                  <RichText
+                    type="post-text-lg"
+                    richText={item.richText}
+                    lineHeight={1.3}
+                    style={s.flex1}
+                  />
+                </View>
+              ) : undefined}
+              {item.post.embed && (
+                <ContentHider moderation={item.moderation.embed} style={s.mb10}>
+                  <PostEmbeds embed={item.post.embed} />
+                </ContentHider>
+              )}
+            </ContentHider>
+            <ExpandedPostDetails
+              post={item.post}
+              translatorUrl={translatorUrl}
+              needsTranslation={needsTranslation}
+            />
+            {hasEngagement ? (
+              <View style={[styles.expandedInfo, pal.border]}>
+                {item.post.repostCount ? (
+                  <Link
+                    style={styles.expandedInfoItem}
+                    href={repostsHref}
+                    title={repostsTitle}>
+                    <Text testID="repostCount" type="lg" style={pal.textLight}>
+                      <Text type="xl-bold" style={pal.text}>
+                        {formatCount(item.post.repostCount)}
+                      </Text>{' '}
+                      {pluralize(item.post.repostCount, 'repost')}
+                    </Text>
+                  </Link>
+                ) : (
+                  <></>
+                )}
+                {item.post.likeCount ? (
+                  <Link
+                    style={styles.expandedInfoItem}
+                    href={likesHref}
+                    title={likesTitle}>
+                    <Text testID="likeCount" type="lg" style={pal.textLight}>
+                      <Text type="xl-bold" style={pal.text}>
+                        {formatCount(item.post.likeCount)}
+                      </Text>{' '}
+                      {pluralize(item.post.likeCount, 'like')}
+                    </Text>
+                  </Link>
+                ) : (
+                  <></>
+                )}
+              </View>
+            ) : (
+              <></>
+            )}
+            <View style={[s.pl10, s.pb5]}>
+              <PostCtrls
+                big
                 itemUri={itemUri}
                 itemCid={itemCid}
                 itemHref={itemHref}
                 itemTitle={itemTitle}
+                author={item.post.author}
+                text={item.richText?.text || record.text}
+                indexedAt={item.post.indexedAt}
                 isAuthor={item.post.author.did === store.me.did}
+                isReposted={!!item.post.viewer?.repost}
+                isLiked={!!item.post.viewer?.like}
                 isThreadMuted={item.isThreadMuted}
+                onPressReply={onPressReply}
+                onPressToggleRepost={onPressToggleRepost}
+                onPressToggleLike={onPressToggleLike}
                 onCopyPostText={onCopyPostText}
                 onOpenTranslate={onOpenTranslate}
                 onToggleThreadMute={onToggleThreadMute}
                 onDeletePost={onDeletePost}
               />
             </View>
-            <View style={styles.meta}>
-              <Link
-                style={styles.metaItem}
-                href={authorHref}
-                title={authorTitle}>
-                <Text type="md" style={[pal.textLight]} numberOfLines={1}>
-                  {sanitizeHandle(item.post.author.handle, '@')}
-                </Text>
-              </Link>
-            </View>
-          </View>
-        </View>
-        <View style={[s.pl10, s.pr10, s.pb10]}>
-          <ContentHider
-            moderation={item.moderation.content}
-            ignoreMute
-            style={styles.contentHider}
-            childContainerStyle={styles.contentHiderChild}>
-            <PostAlerts
-              moderation={item.moderation.content}
-              includeMute
-              style={styles.alert}
-            />
-            {item.richText?.text ? (
-              <View
-                style={[
-                  styles.postTextContainer,
-                  styles.postTextLargeContainer,
-                ]}>
-                <RichText
-                  type="post-text-lg"
-                  richText={item.richText}
-                  lineHeight={1.3}
-                  style={s.flex1}
-                />
-              </View>
-            ) : undefined}
-            {item.post.embed && (
-              <ContentHider moderation={item.moderation.embed} style={s.mb10}>
-                <PostEmbeds embed={item.post.embed} />
-              </ContentHider>
-            )}
-          </ContentHider>
-          <ExpandedPostDetails
-            post={item.post}
-            translatorUrl={translatorUrl}
-            needsTranslation={needsTranslation}
-          />
-          {hasEngagement ? (
-            <View style={[styles.expandedInfo, pal.border]}>
-              {item.post.repostCount ? (
-                <Link
-                  style={styles.expandedInfoItem}
-                  href={repostsHref}
-                  title={repostsTitle}>
-                  <Text testID="repostCount" type="lg" style={pal.textLight}>
-                    <Text type="xl-bold" style={pal.text}>
-                      {formatCount(item.post.repostCount)}
-                    </Text>{' '}
-                    {pluralize(item.post.repostCount, 'repost')}
-                  </Text>
-                </Link>
-              ) : (
-                <></>
-              )}
-              {item.post.likeCount ? (
-                <Link
-                  style={styles.expandedInfoItem}
-                  href={likesHref}
-                  title={likesTitle}>
-                  <Text testID="likeCount" type="lg" style={pal.textLight}>
-                    <Text type="xl-bold" style={pal.text}>
-                      {formatCount(item.post.likeCount)}
-                    </Text>{' '}
-                    {pluralize(item.post.likeCount, 'like')}
-                  </Text>
-                </Link>
-              ) : (
-                <></>
-              )}
-            </View>
-          ) : (
-            <></>
-          )}
-          <View style={[s.pl10, s.pb5]}>
-            <PostCtrls
-              big
-              itemUri={itemUri}
-              itemCid={itemCid}
-              itemHref={itemHref}
-              itemTitle={itemTitle}
-              author={item.post.author}
-              text={item.richText?.text || record.text}
-              indexedAt={item.post.indexedAt}
-              isAuthor={item.post.author.did === store.me.did}
-              isReposted={!!item.post.viewer?.repost}
-              isLiked={!!item.post.viewer?.like}
-              isThreadMuted={item.isThreadMuted}
-              onPressReply={onPressReply}
-              onPressToggleRepost={onPressToggleRepost}
-              onPressToggleLike={onPressToggleLike}
-              onCopyPostText={onCopyPostText}
-              onOpenTranslate={onOpenTranslate}
-              onToggleThreadMute={onToggleThreadMute}
-              onDeletePost={onDeletePost}
-            />
           </View>
-        </View>
-      </Link>
+        </Link>
+      </>
     )
   } else {
     return (
@@ -336,26 +354,36 @@ export const PostThreadItem = observer(function PostThreadItem({
             pal.border,
             pal.view,
             item._showParentReplyLine && styles.noTopBorder,
+            !item._showChildReplyLine && {borderBottomWidth: 1},
           ]}
           moderation={item.moderation.content}>
-          {item._showParentReplyLine && (
-            <View
-              style={[
-                styles.parentReplyLine,
-                {borderColor: pal.colors.replyLine},
-              ]}
-            />
-          )}
-          {item._showChildReplyLine && (
-            <View
-              style={[
-                styles.childReplyLine,
-                {borderColor: pal.colors.replyLine},
-              ]}
-            />
-          )}
           <PostSandboxWarning />
-          <View style={styles.layout}>
+
+          <View
+            style={{flexDirection: 'row', gap: 10, paddingLeft: 8, height: 16}}>
+            <View style={{width: 52}}>
+              {item._showParentReplyLine && (
+                <View
+                  style={[
+                    styles.replyLine,
+                    {
+                      flexGrow: 1,
+                      backgroundColor: pal.colors.replyLine,
+                      marginBottom: 4,
+                    },
+                  ]}
+                />
+              )}
+            </View>
+          </View>
+
+          <View
+            style={[
+              styles.layout,
+              {
+                paddingBottom: item._showChildReplyLine ? 0 : 16,
+              },
+            ]}>
             <View style={styles.layoutAvi}>
               <PreviewableUserAvatar
                 size={52}
@@ -364,7 +392,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 +472,7 @@ export const PostThreadItem = observer(function PostThreadItem({
           <Link
             style={[
               styles.loadMore,
-              {borderTopColor: pal.colors.border},
+              {borderBottomColor: pal.colors.border},
               pal.view,
             ]}
             href={itemHref}
@@ -480,9 +522,9 @@ const styles = StyleSheet.create({
     paddingLeft: 10,
   },
   outerHighlighted: {
-    paddingTop: 2,
-    paddingLeft: 6,
-    paddingRight: 6,
+    paddingTop: 16,
+    paddingLeft: 10,
+    paddingRight: 10,
   },
   noTopBorder: {
     borderTopWidth: 0,
@@ -503,18 +545,13 @@ const styles = StyleSheet.create({
   },
   layout: {
     flexDirection: 'row',
+    gap: 10,
+    paddingLeft: 8,
   },
-  layoutAvi: {
-    paddingLeft: 10,
-    paddingTop: 10,
-    paddingBottom: 10,
-    marginRight: 10,
-  },
+  layoutAvi: {},
   layoutContent: {
     flex: 1,
     paddingRight: 10,
-    paddingTop: 10,
-    paddingBottom: 10,
   },
   meta: {
     flexDirection: 'row',
@@ -567,10 +604,14 @@ const styles = StyleSheet.create({
   loadMore: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    borderTopWidth: 1,
+    borderBottomWidth: 1,
     paddingLeft: 80,
     paddingRight: 20,
-    paddingVertical: 10,
-    marginBottom: 8,
+    paddingVertical: 12,
+  },
+  replyLine: {
+    width: 2,
+    marginLeft: 'auto',
+    marginRight: 'auto',
   },
 })