New reply tree layout

src/state/queries/usePostThread/traversal.ts

@@ -114,8 +114,6 @@ export function flatten(
     }
   }
 
-  console.log(flattened)
-
   /*
    * Insert hidden items and buttons to show them
    */
@@ -269,6 +267,9 @@ export function sort(
           uri: item.uri,
           depth: item.depth,
           value: item.value,
+          parent: thread.find(
+            p => p.uri === item.value.post.record.reply.parent.uri,
+          ),
           oneUp,
           oneDown,
           moderationOpts,
@@ -311,6 +312,9 @@ export function sort(
                   uri: child.uri,
                   depth: child.depth,
                   value: child.value,
+                  parent: thread.find(
+                    p => p.uri === child.value.post.record.reply.parent.uri,
+                  ),
                   oneUp: thread[ci - 1],
                   oneDown: thread[ci + 1],
                   moderationOpts,

src/state/queries/usePostThread/types.ts

@@ -49,6 +49,8 @@ export type Slice =
         isAnchor: boolean
         showParentReplyLine: boolean
         showChildReplyLine: boolean
+        indent: number
+        parentHasBranchingReplies: boolean
       }
     }
   | {

src/state/queries/usePostThread/views.ts

@@ -65,17 +65,32 @@ export function threadPost({
   uri,
   depth,
   value,
+  parent: up,
   oneUp,
-  oneDown,
   moderationOpts,
 }: {
   uri: string
   depth: number
   value: $Typed<AppBskyUnspeccedGetPostThreadV2.ThreadItemPost>
+  parent?: AppBskyUnspeccedGetPostThreadV2.OutputSchema['thread'][number]
   oneUp?: AppBskyUnspeccedGetPostThreadV2.OutputSchema['thread'][number]
   oneDown?: AppBskyUnspeccedGetPostThreadV2.OutputSchema['thread'][number]
   moderationOpts: ModerationOpts
 }): Extract<Slice, {type: 'threadPost'}> {
+  const parent = (up && 'post' in up?.value
+    ? up.value
+    : undefined) as unknown as AppBskyUnspeccedGetPostThreadV2.ThreadItemPost
+  const parentReplyCount = parent?.post?.replyCount || 0
+  const parentAdditionalReplies = parent?.moreReplies || 0
+  const parentHasBranchingReplies =
+    parentReplyCount > 1 && parentReplyCount - parentAdditionalReplies > 1
+  // if (!parentHasBranchingReplies) {
+  //   console.log(value.post.record.text, {
+  //     parentReplyCount,
+  //     parentAdditionalReplies,
+  //   })
+  // }
+
   return {
     type: 'threadPost',
     key: uri,
@@ -96,6 +111,8 @@ export function threadPost({
       isAnchor: depth === 0,
       showParentReplyLine: !!oneUp && oneUp.depth !== 0 && oneUp.depth < depth,
       showChildReplyLine: (value.post.replyCount || 0) > 0,
+      indent: parentHasBranchingReplies ? depth : up?.depth || depth,
+      parentHasBranchingReplies,
     },
   }
 }
@@ -108,7 +125,9 @@ export function readMore({
   return {
     type: 'readMore' as const,
     key: `readMore:${parent.uri}`,
-    indent: parent.depth,
+    indent: parent.ui.parentHasBranchingReplies
+      ? parent.depth
+      : parent.depth - 1,
     replyCount: parent.value.moreReplies,
     nextAnchor: parent,
     nextAnchorUri: new AtUri(parent.uri),