diff options
-rw-r--r-- | src/view/com/post-thread/PostThread.tsx | 21 | ||||
-rw-r--r-- | src/view/com/post-thread/PostThreadItem.tsx | 17 |
2 files changed, 26 insertions, 12 deletions
diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index 22438fc79..cf43d2055 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -141,6 +141,10 @@ function PostThreadLoaded({ ) const [maxVisible, setMaxVisible] = React.useState(100) const [isPTRing, setIsPTRing] = React.useState(false) + const treeView = React.useMemo( + () => !!threadViewPrefs.lab_treeViewEnabled && hasBranchingReplies(thread), + [threadViewPrefs, thread], + ) // construct content const posts = React.useMemo(() => { @@ -289,7 +293,7 @@ function PostThreadLoaded({ <PostThreadItem post={item.post} record={item.record} - treeView={threadViewPrefs.lab_treeViewEnabled || false} + treeView={treeView} depth={item.ctx.depth} prevPost={prev} nextPost={next} @@ -318,7 +322,7 @@ function PostThreadLoaded({ pal.colors.border, posts, onRefresh, - threadViewPrefs.lab_treeViewEnabled, + treeView, _, ], ) @@ -481,6 +485,19 @@ function* flattenThreadSkeleton( } } +function hasBranchingReplies(node: ThreadNode) { + if (node.type !== 'post') { + return false + } + if (!node.replies) { + return false + } + if (node.replies.length === 1) { + return hasBranchingReplies(node.replies[0]) + } + return true +} + const styles = StyleSheet.create({ notFoundContainer: { margin: 10, diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index fdb3657ac..900839015 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -436,13 +436,12 @@ let PostThreadItemLoaded = ({ } else { const isThreadedChild = treeView && depth > 0 const isThreadedChildAdjacentTop = - isThreadedChild && prevPost?.ctx.depth === depth + isThreadedChild && prevPost?.ctx.depth === depth && depth !== 1 const isThreadedChildAdjacentBot = isThreadedChild && nextPost?.ctx.depth === depth return ( <PostOuterWrapper post={post} - prevPost={prevPost} depth={depth} showParentReplyLine={!!showParentReplyLine} treeView={treeView} @@ -525,7 +524,7 @@ let PostThreadItemLoaded = ({ timestamp={post.indexedAt} postHref={postHref} showAvatar={isThreadedChild} - avatarSize={20} + avatarSize={28} displayNameType="md-bold" displayNameStyle={isThreadedChild && s.ml2} style={isThreadedChild && s.mb2} @@ -606,7 +605,6 @@ PostThreadItemLoaded = memo(PostThreadItemLoaded) function PostOuterWrapper({ post, - prevPost, treeView, depth, showParentReplyLine, @@ -614,7 +612,6 @@ function PostOuterWrapper({ children, }: React.PropsWithChildren<{ post: AppBskyFeedDefs.PostView - prevPost: ThreadPost | undefined treeView: boolean depth: number showParentReplyLine: boolean @@ -632,18 +629,18 @@ function PostOuterWrapper({ styles.cursor, { flexDirection: 'row', - paddingLeft: isMobile ? 10 : 6, - borderTopWidth: !prevPost ? 1 : 0, + paddingHorizontal: isMobile ? 10 : 6, + borderTopWidth: depth === 1 ? 1 : 0, }, ]}> - {Array.from(Array(depth)).map((_, n: number) => ( + {Array.from(Array(depth - 1)).map((_, n: number) => ( <View key={`${post.uri}-padding-${n}`} style={{ borderLeftWidth: 2, borderLeftColor: pal.colors.border, - marginLeft: isMobile ? 6 : 14, - paddingLeft: isMobile ? 6 : 12, + marginLeft: isMobile ? 6 : 12, + paddingLeft: isMobile ? 6 : 8, }} /> ))} |