diff --git a/src/screens/PostThread/components/ThreadReply.tsx b/src/screens/PostThread/components/ThreadItemTreePost.tsx
similarity index 76%
rename from src/screens/PostThread/components/ThreadReply.tsx
rename to src/screens/PostThread/components/ThreadItemTreePost.tsx
index 0e087325c6..e0f4e198a7 100644
--- a/src/screens/PostThread/components/ThreadReply.tsx
+++ b/src/screens/PostThread/components/ThreadItemTreePost.tsx
@@ -49,7 +49,7 @@ import {Text} from '#/components/Typography'
*/
const TREE_AVI_PLUS_SPACE = TREE_AVI_WIDTH + a.gap_xs.gap
-export function ThreadReply({
+export function ThreadItemTreePost({
item,
overrides,
onPostSuccess,
@@ -66,11 +66,11 @@ export function ThreadReply({
const postShadow = usePostShadow(item.value.post)
if (postShadow === POST_TOMBSTONE) {
- return
+ return
}
return (
-
}) {
const t = useTheme()
return (
-
-
+
+
)}
-
-
+
+
)
}
-const ThreadItemTreeReplyOuter = memo(function ThreadItemTreeReplyOuter({
- item,
- children,
-}: {
- item: Extract
- children: React.ReactNode
-}) {
- const t = useTheme()
- const indents = Math.max(0, item.ui.indent - 1)
+const ThreadItemTreePostOuterWrapper = memo(
+ function ThreadItemTreePostOuterWrapper({
+ item,
+ children,
+ }: {
+ item: Extract
+ children: React.ReactNode
+ }) {
+ const t = useTheme()
+ const indents = Math.max(0, item.ui.indent - 1)
- return (
-
+ {Array.from(Array(indents)).map((_, n: number) => {
+ const isSkipped = item.ui.skippedIndentIndices.has(n)
+ return (
+
+ )
+ })}
+ {children}
+
+ )
+ },
+)
+
+const ThreadItemTreePostInnerWrapper = memo(
+ function ThreadItemTreePostInnerWrapper({
+ item,
+ children,
+ }: {
+ item: Extract
+ children: React.ReactNode
+ }) {
+ const t = useTheme()
+ return (
+
- {Array.from(Array(indents)).map((_, n: number) => {
- const isSkipped = item.ui.skippedIndentIndices.has(n)
- return (
+ item.ui.isLastChild &&
+ !item.ui.precedesChildReadMore && [
+ {
+ paddingBottom: OUTER_SPACE / 2,
+ },
+ ],
+ ]}>
+ {item.ui.indent > 1 && (
- )
- })}
- {children}
-
- )
-})
-
-const ThreadItemTreeReplyInner = memo(function ThreadItemTreeReplyInner({
- item,
- children,
-}: {
- item: Extract
- children: React.ReactNode
-}) {
- const t = useTheme()
- return (
-
- {item.ui.indent > 1 && (
-
- )}
- {children}
-
- )
-})
+ )}
+ {children}
+
+ )
+ },
+)
const ThreadItemTreeReplyChildReplyLine = memo(
function ThreadItemTreeReplyChildReplyLine({
@@ -234,7 +238,7 @@ const ThreadItemTreeReplyChildReplyLine = memo(
},
)
-const ThreadReplyInner = memo(function ThreadReplyInner({
+const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
item,
postShadow,
overrides,
@@ -311,7 +315,7 @@ const ThreadReplyInner = memo(function ThreadReplyInner({
}, [setLimitLines])
return (
-
+
-
+
-
+
-
+
)
})
diff --git a/src/screens/PostThread/index.tsx b/src/screens/PostThread/index.tsx
index 06b6856ce9..723a9d59bb 100644
--- a/src/screens/PostThread/index.tsx
+++ b/src/screens/PostThread/index.tsx
@@ -19,11 +19,11 @@ import {
ThreadAnchor,
ThreadAnchorSkeleton,
} from '#/screens/PostThread/components/ThreadAnchor'
+import {ThreadItemTreePost} from '#/screens/PostThread/components/ThreadItemTreePost'
import {
ThreadPost,
ThreadPostSkeleton,
} from '#/screens/PostThread/components/ThreadPost'
-import {ThreadReply} from '#/screens/PostThread/components/ThreadReply'
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
import * as Layout from '#/components/Layout'
import {ListFooter} from '#/components/Lists'
@@ -234,7 +234,7 @@ export function Inner({uri}: {uri: string | undefined}) {
} else {
if (thread.state.view === 'tree') {
return (
-