diff --git a/src/screens/PostThread/components/ThreadReply.tsx b/src/screens/PostThread/components/ThreadReply.tsx index 51b448652e..fc10ad0862 100644 --- a/src/screens/PostThread/components/ThreadReply.tsx +++ b/src/screens/PostThread/components/ThreadReply.tsx @@ -192,22 +192,27 @@ let PostThreadItemLoaded = ({ t.atoms.border_contrast_low, ], ]}> - {Array.from(Array(indents)).map((_, n: number) => ( - - ))} + {Array.from(Array(indents)).map((_, n: number) => { + const isLastIteration = n === indents - 1 + return ( + + ) + })} {item.ui.indent > 1 && item.ui.parentHasBranchingReplies && ( = 0; ui--) { let prev = flattened[ui] if (prev.type === 'threadPost') { - prev.ui.hasReadMore = true + prev.ui.precedesParentReadMore = + prev.ui.indent - 1 === parent.ui.indent // true + prev.ui.precedesChildReadMore = + prev.ui.indent === item.ui.indent break } } @@ -107,12 +110,15 @@ export function flatten( const parent = parents[pi] if (parent.depth <= item.depth) { /* - * Find the previous post item and set the `hasReadMore` flag + * Find the previous post item and set the read more flags */ for (let ui = i; ui >= 0; ui--) { let prev = flattened[ui] if (prev.type === 'threadPost') { - prev.ui.hasReadMore = true + prev.ui.precedesParentReadMore = + prev.ui.indent - 1 === parent.ui.indent + prev.ui.precedesChildReadMore = + prev.ui.indent === item.ui.indent break } } @@ -141,7 +147,7 @@ export function flatten( } } } - // console.log(flattened) + console.log(flattened) /* * Insert hidden items and buttons to show them diff --git a/src/state/queries/usePostThread/types.ts b/src/state/queries/usePostThread/types.ts index d28707e228..a0ccc24a3b 100644 --- a/src/state/queries/usePostThread/types.ts +++ b/src/state/queries/usePostThread/types.ts @@ -52,7 +52,18 @@ export type Slice = indent: number parentHasBranchingReplies: boolean isDeadEnd: boolean - hasReadMore?: boolean + /** + * Populated during the final traversal of the thread. Denotes whether + * there is a "Read more" link for the parent immediately following + * this item. + */ + precedesParentReadMore?: boolean + /** + * Populated during the final traversal of the thread. Denotes whether + * there is a "Read more" link for this item immediately following + * this item. + */ + precedesChildReadMore?: boolean } } | { diff --git a/src/state/queries/usePostThread/views.ts b/src/state/queries/usePostThread/views.ts index b04afba43e..189c52942a 100644 --- a/src/state/queries/usePostThread/views.ts +++ b/src/state/queries/usePostThread/views.ts @@ -81,6 +81,15 @@ export function threadPost({ moderationOpts: ModerationOpts traversalMetadata?: TraversalMetadata }): Extract { + const parentHasBranchingReplies = !!traversalMetadata?.hasBranchingReplies + /* + * Indent differs from depth in cases where the tree has no branches, and so + * we can maintain the more shallow depth of the parent. + */ + const indent = parentHasBranchingReplies + ? depth + : traversalMetadata?.indent || depth + return { type: 'threadPost', key: uri, @@ -101,11 +110,13 @@ export function threadPost({ isAnchor: depth === 0, showParentReplyLine: !!oneUp && oneUp.depth !== 0 && oneUp.depth < depth, showChildReplyLine: (value.post.replyCount || 0) > 0, - indent: traversalMetadata?.hasBranchingReplies - ? depth - : traversalMetadata?.indent || depth, - parentHasBranchingReplies: !!traversalMetadata?.hasBranchingReplies, - isDeadEnd: !oneDown || oneDown?.depth < depth, + indent, + parentHasBranchingReplies, + /* + * If there are no slices below this one, or the next slice is less + * indented than the computed indent for this post. + */ + isDeadEnd: !oneDown || oneDown?.depth < indent, }, } }