Add moreParents handling

src/screens/PostThread/components/ThreadItemReadMoreUp.tsx

@@ -0,0 +1,90 @@
+import {memo} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {type ThreadItem} from '#/state/queries/usePostThread'
+import {
+  LINEAR_AVI_WIDTH,
+  OUTER_SPACE,
+  REPLY_LINE_WIDTH,
+} from '#/screens/PostThread/const'
+import {atoms as a, useTheme} from '#/alf'
+import {ArrowTopCircle_Stroke2_Corner0_Rounded as UpIcon} from '#/components/icons/ArrowTopCircle'
+import {Link} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+export const ThreadItemReadMoreUp = memo(function ThreadItemReadMoreUp({
+  item,
+}: {
+  item: Extract<ThreadItem, {type: 'readMoreUp'}>
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  return (
+    <Link
+      label={_(msg`Continue thread`)}
+      to={item.href}
+      style={[
+        a.gap_xs,
+        {
+          paddingTop: OUTER_SPACE,
+          paddingHorizontal: OUTER_SPACE,
+        },
+      ]}>
+      {({hovered, pressed}) => {
+        const interacted = hovered || pressed
+        return (
+          <View>
+            <View style={[a.flex_row, a.align_center, a.gap_md]}>
+              <View
+                style={[
+                  a.align_center,
+                  {
+                    width: LINEAR_AVI_WIDTH,
+                  },
+                ]}>
+                <UpIcon
+                  fill="currentColor"
+                  width={24}
+                  style={[
+                    t.atoms.text_contrast_low,
+                    a.transition_all,
+                    interacted && [t.atoms.text_contrast_high],
+                  ]}
+                />
+              </View>
+              <Text
+                style={[
+                  a.text_sm,
+                  t.atoms.text_contrast_medium,
+                  interacted && [a.underline],
+                ]}>
+                <Trans>Continue thread...</Trans>
+              </Text>
+            </View>
+            <View
+              style={[
+                a.align_center,
+                {
+                  width: LINEAR_AVI_WIDTH,
+                },
+              ]}>
+              <View
+                style={[
+                  a.mt_xs,
+                  {
+                    height: OUTER_SPACE / 2,
+                    width: REPLY_LINE_WIDTH,
+                    backgroundColor: t.atoms.border_contrast_low.borderColor,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        )
+      }}
+    </Link>
+  )
+})

src/screens/PostThread/index.tsx

@@ -24,6 +24,7 @@ import {
 } from '#/screens/PostThread/components/ThreadItemPost'
 import {ThreadItemPostTombstone} from '#/screens/PostThread/components/ThreadItemPostTombstone'
 import {ThreadItemReadMore} from '#/screens/PostThread/components/ThreadItemReadMore'
+import {ThreadItemReadMoreUp} from '#/screens/PostThread/components/ThreadItemReadMoreUp'
 import {ThreadItemTreePost} from '#/screens/PostThread/components/ThreadItemTreePost'
 import {useBreakpoints, web} from '#/alf'
 import * as Layout from '#/components/Layout'
@@ -191,8 +192,8 @@ export function Inner({uri}: {uri: string | undefined}) {
           }
         }
       } else {
-        // ignore parents
-        if (hasDepth && item.depth < 0) continue
+        // ignore any parent items
+        if (item.type === 'readMoreUp' || (hasDepth && item.depth < 0)) continue
         // can exit early if we've reached the max children count
         if (childrenCount > maxChildrenCount) break
 
@@ -271,6 +272,8 @@ export function Inner({uri}: {uri: string | undefined}) {
           view={thread.state.view === 'tree' ? 'tree' : 'linear'}
         />
       )
+    } else if (item.type === 'readMoreUp') {
+      return <ThreadItemReadMoreUp item={item} />
     } else if (item.type === 'threadPostBlocked') {
       return <ThreadItemPostTombstone type="blocked" />
     } else if (item.type === 'threadPostNotFound') {