Reorg

src/screens/PostThread/components/ReadMore.tsx

@@ -0,0 +1,96 @@
+import {View} from 'react-native'
+import {msg, Trans, Plural} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {makeProfileLink} from '#/lib/routes/links'
+import {type Slice, PostThreadParams} from '#/state/queries/usePostThread'
+import {atoms as a, useTheme} from '#/alf'
+import {CirclePlus_Stroke2_Corner0_Rounded as CirclePlus} from '#/components/icons/CirclePlus'
+import {Link} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+export function ReadMore({
+  item,
+  view,
+}: {
+  item: Extract<Slice, {type: 'readMore'}>
+  view: PostThreadParams['view']
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const isTreeView = view === 'tree'
+  const indentCount = item.indent - 1
+
+  const treeIndents = isTreeView ? (
+    Array.from(Array(indentCount)).map((_, n: number) => (
+      <View
+        key={`${item.key}-padding-${n}`}
+        style={[
+          a.ml_sm,
+          t.atoms.border_contrast_low,
+          {
+            borderLeftWidth: 2,
+            paddingLeft: a.pl_sm.paddingLeft - 2, // minus border
+          },
+        ]}
+      />
+    ))
+  ) : indentCount > 0 ? (
+    <View
+      style={[
+        // avi width minus border, divided by 2
+        {width: (42 - 2) / 2},
+      ]}
+    />
+  ) : null
+
+  return (
+    <View style={[a.flex_row, a.px_sm]}>
+      {treeIndents}
+      <View style={[a.ml_sm]}>
+        <View
+          style={[
+            t.atoms.border_contrast_low,
+            {
+              borderLeftWidth: 2,
+              borderBottomWidth: 2,
+              borderBottomLeftRadius: a.rounded_sm.borderRadius,
+              height: 12,
+              width: isTreeView ? a.pl_sm.paddingLeft * 2 : 42 / 2 + 10,
+            },
+          ]}
+        />
+      </View>
+      <Link
+        label={_(msg`Read more replies`)}
+        to={makeProfileLink(
+          {
+            did: item.nextAnchorUri.host,
+            handle: item.nextAnchor.value.post.author.handle,
+          },
+          'post',
+          item.nextAnchorUri.rkey,
+        )}
+        style={[a.pt_2xs, a.pb_sm, a.gap_xs]}>
+        {({hovered, pressed}) => {
+          return (
+            <>
+              <CirclePlus fill={t.atoms.text_contrast_high.color} width={18} />
+              <Text
+                style={[
+                  a.text_sm,
+                  t.atoms.text_contrast_medium,
+                  (hovered || pressed) && a.underline,
+                ]}>
+                <Trans>
+                  Read {item.replyCount} more{' '}
+                  <Plural one="reply" other="replies" value={item.replyCount} />
+                </Trans>
+              </Text>
+            </>
+          )
+        }}
+      </Link>
+    </View>
+  )
+}

src/state/queries/usePostThread/traversal.ts

@@ -56,8 +56,7 @@ export function flatten(
                 i + 1 + (pi - parents.length),
                 0,
                 views.readMore({
-                  item,
-                  parent: parent,
+                  parent,
                 }),
               )
               parents.pop()
@@ -94,8 +93,7 @@ export function flatten(
                   i + 2 + (pi - parents.length),
                   0,
                   views.readMore({
-                    item,
-                    parent: parent,
+                    parent,
                   }),
                 )
                 parents.pop()
@@ -116,6 +114,8 @@ export function flatten(
     }
   }
 
+  console.log(flattened)
+
   /*
    * Insert hidden items and buttons to show them
    */

src/state/queries/usePostThread/views.ts

@@ -101,16 +101,14 @@ export function threadPost({
 }
 
 export function readMore({
-  item,
   parent,
 }: {
-  item: Extract<Slice, {type: 'threadPost'}>
   parent: Extract<Slice, {type: 'threadPost'}>
 }) {
   return {
     type: 'readMore' as const,
     key: `readMore:${parent.uri}`,
-    indent: parent.depth + (item.depth < parent.depth ? -1 : 0),
+    indent: parent.depth,
     replyCount: parent.value.moreReplies,
     nextAnchor: parent,
     nextAnchorUri: new AtUri(parent.uri),

src/view/screens/PostThread.tsx

@@ -39,6 +39,7 @@ import {Link} from '#/components/Link'
 import {ListFooter} from '#/components/Lists'
 import * as Menu from '#/components/Menu'
 import {Text} from '#/components/Typography'
+import {ReadMore} from '#/screens/PostThread/components/ReadMore'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
 export function PostThreadScreen({route}: Props) {
@@ -499,96 +500,3 @@ function ThreadMenu({
 const keyExtractor = (item: Slice) => {
   return item.key
 }
-
-function ReadMore({
-  item,
-  view,
-}: {
-  item: Extract<Slice, {type: 'readMore'}>
-  view: PostThreadParams['view']
-}) {
-  const t = useTheme()
-  const {_} = useLingui()
-  const isTreeView = view === 'tree'
-  const indentCount = item.indent - 1
-
-  const treeIndents = isTreeView ? (
-    Array.from(Array(indentCount)).map((_, n: number) => (
-      <View
-        key={`${item.key}-padding-${n}`}
-        style={[
-          a.ml_sm,
-          t.atoms.border_contrast_low,
-          {
-            borderLeftWidth: 2,
-            paddingLeft: a.pl_sm.paddingLeft - 2, // minus border
-          },
-        ]}
-      />
-    ))
-  ) : indentCount > 0 ? (
-    <View
-      style={[
-        // avi width minus border, divided by 2
-        {width: (42 - 2) / 2}
-      ]}
-    />
-  ) : null
-
-  return (
-    <View style={[a.flex_row, a.px_sm]}>
-      {treeIndents}
-      <View style={[a.ml_sm]}>
-        <View
-          style={[
-            t.atoms.border_contrast_low,
-            {
-              borderLeftWidth: 2,
-              borderBottomWidth: 2,
-              borderBottomLeftRadius: a.rounded_sm.borderRadius,
-              height: 12,
-              width: isTreeView ? a.pl_sm.paddingLeft * 2 : (42 / 2 + 10),
-            },
-          ]}
-        />
-      </View>
-      <Link
-        label={_(msg`Read more replies`)}
-        to={makeProfileLink(
-          {
-            did: item.nextAnchorUri.host,
-            handle: item.nextAnchor.value.post.author.handle,
-          },
-          'post',
-          item.nextAnchorUri.rkey,
-        )}
-        style={[a.pt_2xs, a.pb_sm, a.gap_xs]}>
-        {({hovered, pressed}) => {
-          return (
-            <>
-              <CirclePlus
-                fill={t.atoms.text_contrast_high.color}
-                width={18}
-              />
-              <Text
-                style={[
-                  a.text_sm,
-                  t.atoms.text_contrast_medium,
-                  (hovered || pressed) && a.underline,
-                ]}>
-                <Trans>
-                  Read {item.replyCount} more{' '}
-                  <Plural
-                    one="reply"
-                    other="replies"
-                    value={item.replyCount}
-                  />
-                </Trans>
-              </Text>
-            </>
-          )
-        }}
-      </Link>
-    </View>
-  )
-}