From c428568b0caa3e7fec5a6771e7867f6c17ef8b4a Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 14 Oct 2025 15:08:33 -0500
Subject: [PATCH] Move indent calc to metadata, add ui field to readMore, use
 indent

---
 .../PostThread/components/ThreadItemReadMore.tsx    |  3 ++-
 src/state/queries/usePostThread/traversal.ts        | 13 +++++++------
 src/state/queries/usePostThread/types.ts            |  9 +++++++++
 src/state/queries/usePostThread/utils.ts            | 13 +++++++++++--
 src/state/queries/usePostThread/views.ts            |  2 ++
 5 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/screens/PostThread/components/ThreadItemReadMore.tsx b/src/screens/PostThread/components/ThreadItemReadMore.tsx
index 66ec11cb78..ba1230f263 100644
--- a/src/screens/PostThread/components/ThreadItemReadMore.tsx
+++ b/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) => {
diff --git a/src/state/queries/usePostThread/traversal.ts b/src/state/queries/usePostThread/traversal.ts
index 5a854e11d9..59e98589f5 100644
--- a/src/state/queries/usePostThread/traversal.ts
+++ b/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++
           }
 
diff --git a/src/state/queries/usePostThread/types.ts b/src/state/queries/usePostThread/types.ts
index 1c1eab87e0..6c88317c59 100644
--- a/src/state/queries/usePostThread/types.ts
+++ b/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.
diff --git a/src/state/queries/usePostThread/utils.ts b/src/state/queries/usePostThread/utils.ts
index e1e981176d..7bd6ac63ee 100644
--- a/src/state/queries/usePostThread/utils.ts
+++ b/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,
+  }
+}
diff --git a/src/state/queries/usePostThread/views.ts b/src/state/queries/usePostThread/views.ts
index 4e7140eab0..a76bf96790 100644
--- a/src/state/queries/usePostThread/views.ts
+++ b/src/state/queries/usePostThread/views.ts
@@ -124,6 +124,8 @@ export function readMore({
     moreReplies: repliesUnhydrated,
     depth,
     skippedIndentIndices,
+    // @ts-ignore populated by the traversal
+    ui: {},
   }
 }