Treeview: more UI tweaks (#2125)

* Treeview: more UI tweaks

* Only show treeview when there are branching replies

* Fix types

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,

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,
+            paddingHorizontal: isMobile ? 10 : 6,
-            borderTopWidth: !prevPost ? 1 : 0,
+            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,
+              marginLeft: isMobile ? 6 : 12,
-              paddingLeft: isMobile ? 6 : 12,
+              paddingLeft: isMobile ? 6 : 8,
             }}
           />
         ))}