Move indent calc to metadata, add ui field to readMore, use indent

src/screens/PostThread/components/ThreadItemReadMore.tsx

@@ -28,7 +28,8 @@ export const ThreadItemReadMore = memo(function ThreadItemReadMore({
   const t = useTheme()
   const {_} = useLingui()
   const isTreeView = view === 'tree'
-  const indent = Math.max(0, item.depth - 1)
+  const indent = Math.max(0, item.ui.indent - 1)
+  console.log({indent, id: item.ui.indent})
 
   const spacers = isTreeView
     ? Array.from(Array(indent)).map((_, n: number) => {

src/state/queries/usePostThread/traversal.ts

@@ -9,6 +9,7 @@ import {
 } from '#/state/queries/usePostThread/types'
 import {
   getPostRecord,
+  getReadMoreUI,
   getThreadPostNoUnauthenticatedUI,
   getThreadPostUI,
   getTraversalMetadata,
@@ -385,7 +386,9 @@ export function sortAndAnnotateThreadItems(
            */
           if (metadata.repliesUnhydrated > 0 && metadata.isLastChild) {
             metadata.precedesChildReadMore = true
-            subset.splice(i + 1, 0, views.readMore(metadata))
+            const view = views.readMore(metadata)
+            view.ui = getReadMoreUI(metadata)
+            subset.splice(i + 1, 0, view)
             i++ // skip next iteration
           }
 
@@ -408,11 +411,9 @@ export function sortAndAnnotateThreadItems(
             (metadata.nextItemDepth === undefined ||
               metadata.nextItemDepth <= metadata.upcomingParentReadMore.depth)
           ) {
-            subset.splice(
-              i + 1,
-              0,
-              views.readMore(metadata.upcomingParentReadMore),
-            )
+            const view = views.readMore(metadata.upcomingParentReadMore)
+            view.ui = getReadMoreUI(metadata.upcomingParentReadMore)
+            subset.splice(i + 1, 0, view)
             i++
           }
 

src/state/queries/usePostThread/types.ts

@@ -106,6 +106,9 @@ export type ThreadItem =
       href: string
       moreReplies: number
       skippedIndentIndices: Set<number>
+      ui: {
+        indent: number
+      }
     }
   | {
       /*
@@ -137,6 +140,12 @@ export type TraversalMetadata = {
    * calculated on the server.
    */
   depth: number
+  /**
+   * The visual indentation level of the post. This is usually the same as
+   * `depth`, except in the case where the post is part of the OP thread,
+   * which is always indented to level 1 (except the root post, which is 0).
+   */
+  indent: number
   /**
    * Indicates if this item is a "read more" link preceding this post that
    * continues the thread upwards.

src/state/queries/usePostThread/utils.ts

@@ -74,6 +74,7 @@ export function getTraversalMetadata({
   const repliesUnhydrated = item.value.moreReplies || 0
   const metadata = {
     depth: item.depth,
+    indent: isPartOfOPThreadFromRoot ? (item.depth < 1 ? 0 : 1) : item.depth,
     /*
      * Unknown until after traversal
      */
@@ -136,10 +137,10 @@ export function storeTraversalMetadata(
 
 export function getThreadPostUI({
   depth,
+  indent,
   repliesCount,
   prevItemDepth,
   isLastChild,
-  isPartOfOPThreadFromRoot,
   skippedIndentIndices,
   repliesSeenCounter,
   repliesUnhydrated,
@@ -157,7 +158,7 @@ export function getThreadPostUI({
       followsReadMoreUp ||
       (!!prevItemDepth && prevItemDepth !== 0 && prevItemDepth < depth),
     showChildReplyLine: depth < 0 || isReplyAndHasReplies,
-    indent: isPartOfOPThreadFromRoot ? (depth < 1 ? 0 : 1) : depth,
+    indent,
     /*
      * If there are no slices below this one, or the next slice has a depth <=
      * than the depth of this post, it's the last child of the reply tree. It
@@ -183,3 +184,11 @@ export function getThreadPostNoUnauthenticatedUI({
     showParentReplyLine: Boolean(prevItemDepth && prevItemDepth < depth),
   }
 }
+
+export function getReadMoreUI({
+  indent,
+}: TraversalMetadata): Extract<ThreadItem, {type: 'readMore'}>['ui'] {
+  return {
+    indent,
+  }
+}

src/state/queries/usePostThread/views.ts

@@ -124,6 +124,8 @@ export function readMore({
     moreReplies: repliesUnhydrated,
     depth,
     skippedIndentIndices,
+    // @ts-ignore populated by the traversal
+    ui: {},
   }
 }