diff --git a/src/state/models/content/post-thread-item.ts b/src/state/models/content/post-thread-item.ts index 141b4f9376..942f3acc81 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 41be392a76..c7b5711c05 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/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,171 +157,189 @@ export const PostThreadItem = observer(function PostThreadItem({ if (item._isHighlightedPost) { return ( - - - - - + <> + {item.rootUri !== item.uri && ( + + + + - - - + )} + + + + + + + + + + + + + {sanitizeDisplayName( + item.post.author.displayName || + sanitizeHandle(item.post.author.handle), + )} + + + + ·  + + {({timeElapsed}) => <>{timeElapsed}} + + + + + + + - - {sanitizeDisplayName( - item.post.author.displayName || - sanitizeHandle(item.post.author.handle), - )} + + {sanitizeHandle(item.post.author.handle, '@')} - - ·  - - {({timeElapsed}) => <>{timeElapsed}} - - - - + + + + + {item.richText?.text ? ( + + + + ) : undefined} + {item.post.embed && ( + + + + )} + + + {hasEngagement ? ( + + {item.post.repostCount ? ( + + + + {formatCount(item.post.repostCount)} + {' '} + {pluralize(item.post.repostCount, 'repost')} + + + ) : ( + <> + )} + {item.post.likeCount ? ( + + + + {formatCount(item.post.likeCount)} + {' '} + {pluralize(item.post.likeCount, 'like')} + + + ) : ( + <> + )} + + ) : ( + <> + )} + + - - - - {sanitizeHandle(item.post.author.handle, '@')} - - - - - - - - {item.richText?.text ? ( - - - - ) : undefined} - {item.post.embed && ( - - - - )} - - - {hasEngagement ? ( - - {item.post.repostCount ? ( - - - - {formatCount(item.post.repostCount)} - {' '} - {pluralize(item.post.repostCount, 'repost')} - - - ) : ( - <> - )} - {item.post.likeCount ? ( - - - - {formatCount(item.post.likeCount)} - {' '} - {pluralize(item.post.likeCount, 'like')} - - - ) : ( - <> - )} - - ) : ( - <> - )} - - - - - + + ) } 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}> - {item._showParentReplyLine && ( - - )} - {item._showChildReplyLine && ( - - )} - + + + + {item._showParentReplyLine && ( + + )} + + + + + + {item._showChildReplyLine && ( + + )} +