Fix lines on read more items

src/screens/PostThread/components/ThreadReply.tsx

@@ -27,7 +27,12 @@ import {TextLink} from '#/view/com/util/Link'
 import {PostCtrls} from '#/view/com/util/post-ctrls/PostCtrls'
 import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
 import {PostMeta} from '#/view/com/util/PostMeta'
-import {TREE_AVI_WIDTH, TREE_INDENT} from '#/screens/PostThread/const'
+import {
+  OUTER_SPACE,
+  REPLY_LINE_WIDTH,
+  TREE_AVI_WIDTH,
+  TREE_INDENT,
+} from '#/screens/PostThread/const'
 import {atoms as a, useTheme} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
@@ -175,6 +180,8 @@ let PostThreadItemLoaded = ({
     setLimitLines(false)
   }, [setLimitLines])
 
+  const indents = Math.max(0, item.ui.indent - 1)
+
   return (
     <View
       style={[
@@ -185,13 +192,16 @@ let PostThreadItemLoaded = ({
             t.atoms.border_contrast_low,
           ],
       ]}>
-      {Array.from(Array(item.ui.indent - 1)).map((_, n: number) => (
+      {Array.from(Array(indents)).map((_, n: number) => (
         <View
           key={`${post.uri}-padding-${n}`}
           style={[
             t.atoms.border_contrast_low,
             {
-              borderRightWidth: 2,
+              borderRightWidth:
+                item.ui.isDeadEnd && n === indents - 1 && !item.ui.hasReadMore
+                  ? 0
+                  : REPLY_LINE_WIDTH,
               width: TREE_INDENT + TREE_AVI_WIDTH / 2,
               left: 1,
             },
@@ -202,13 +212,35 @@ let PostThreadItemLoaded = ({
         <SubtleHover>
           <View
             style={[
-              a.px_lg,
-              a.pt_sm,
+              {
+                paddingHorizontal: OUTER_SPACE,
+                paddingTop: OUTER_SPACE / 2,
+              },
               item.ui.indent === 1 && [
                 !item.ui.showParentReplyLine && a.pt_lg,
                 !item.ui.showChildReplyLine && a.pb_sm,
               ],
             ]}>
+            {item.ui.indent > 1 && (
+              <View
+                style={[
+                  a.absolute,
+                  t.atoms.border_contrast_low,
+                  {
+                    left: -1,
+                    top: 0,
+                    height:
+                      TREE_AVI_WIDTH / 2 +
+                      REPLY_LINE_WIDTH / 2 +
+                      OUTER_SPACE / 2,
+                    width: OUTER_SPACE,
+                    borderLeftWidth: REPLY_LINE_WIDTH,
+                    borderBottomWidth: REPLY_LINE_WIDTH,
+                    borderBottomLeftRadius: a.rounded_sm.borderRadius,
+                  },
+                ]}
+              />
+            )}
             <PostHider
               testID={`postThreadItem-by-${post.author.handle}`}
               href={postHref}

src/state/queries/usePostThread/traversal.ts

@@ -56,7 +56,19 @@ export function flatten(
         if (item.depth <= deepestParent.depth) {
           for (let pi = parents.length - 1; pi >= 0; pi--) {
             const parent = parents[pi]
+
             if (item.depth <= parent.depth) {
+              /*
+               * Find the previous post item and set the `hasReadMore` flag
+               */
+              for (let ui = i - 1; ui >= 0; ui--) {
+                let prev = flattened[ui]
+                if (prev.type === 'threadPost') {
+                  prev.ui.hasReadMore = true
+                  break
+                }
+              }
+
               flattened.splice(
                 i + 1 + (pi - parents.length),
                 0,
@@ -94,6 +106,17 @@ export function flatten(
             for (let pi = parents.length - 1; pi >= 0; pi--) {
               const parent = parents[pi]
               if (parent.depth <= item.depth) {
+                /*
+                 * Find the previous post item and set the `hasReadMore` flag
+                 */
+                for (let ui = i; ui >= 0; ui--) {
+                  let prev = flattened[ui]
+                  if (prev.type === 'threadPost') {
+                    prev.ui.hasReadMore = true
+                    break
+                  }
+                }
+
                 flattened.splice(
                   i + 2 + (pi - parents.length),
                   0,
@@ -118,7 +141,7 @@ export function flatten(
       }
     }
   }
-  console.log(flattened)
+  // console.log(flattened)
 
   /*
    * Insert hidden items and buttons to show them

src/state/queries/usePostThread/types.ts

@@ -51,6 +51,8 @@ export type Slice =
         showChildReplyLine: boolean
         indent: number
         parentHasBranchingReplies: boolean
+        isDeadEnd: boolean
+        hasReadMore?: boolean
       }
     }
   | {

src/state/queries/usePostThread/views.ts

@@ -69,6 +69,7 @@ export function threadPost({
   depth,
   value,
   oneUp,
+  oneDown,
   moderationOpts,
   traversalMetadata,
 }: {
@@ -104,6 +105,7 @@ export function threadPost({
         ? depth
         : traversalMetadata?.indent || depth,
       parentHasBranchingReplies: !!traversalMetadata?.hasBranchingReplies,
+      isDeadEnd: !oneDown || oneDown?.depth < depth,
     },
   }
 }