diff --git a/src/screens/PostThread/components/ThreadPost.tsx b/src/screens/PostThread/components/ThreadPost.tsx index 55b1105a53..4cd45deeaa 100644 --- a/src/screens/PostThread/components/ThreadPost.tsx +++ b/src/screens/PostThread/components/ThreadPost.tsx @@ -46,12 +46,7 @@ import * as Skele from '#/components/Skeleton' import {SubtleWebHover} from '#/components/SubtleWebHover' import {Text} from '#/components/Typography' -export function ThreadPost({ - item, - overrides, - onPostSuccess, - threadgateRecord, -}: { +export type ThreadItemPostProps = { item: Extract overrides?: { moderation?: boolean @@ -59,11 +54,18 @@ export function ThreadPost({ } onPostSuccess?: (data: OnPostSuccessData) => void threadgateRecord?: AppBskyFeedThreadgate.Record -}) { +} + +export function ThreadPost({ + item, + overrides, + onPostSuccess, + threadgateRecord, +}: ThreadItemPostProps) { const postShadow = usePostShadow(item.value.post) if (postShadow === POST_TOMBSTONE) { - return + return } return ( @@ -79,26 +81,104 @@ export function ThreadPost({ ) } -function PostThreadItemDeleted({hideTopBorder}: {hideTopBorder?: boolean}) { +function PostThreadItemDeleted({ + item, + overrides, +}: Pick) { const t = useTheme() + + return ( + + + + + + + + + This post has been deleted. + + + + + + ) +} + +const ThreadItemPostOuterWrapper = memo(function ThreadItemPostOuterWrapper({ + item, + overrides, + children, +}: Pick & { + children: React.ReactNode +}) { + const t = useTheme() + const showTopBorder = + !item.ui.showParentReplyLine && overrides?.topBorder !== true + return ( - - - This post has been deleted. - + {children} ) -} +}) + +/** + * Provides some space between posts as well as contains the reply line + */ +const ThreadItemPostParentReplyLine = memo( + function ThreadItemPostParentReplyLine({ + item, + }: Pick) { + const t = useTheme() + return ( + + + {item.ui.showParentReplyLine && ( + + )} + + + ) + }, +) const ThreadPostInner = memo(function ThreadPostInner({ item, @@ -106,15 +186,8 @@ const ThreadPostInner = memo(function ThreadPostInner({ overrides, onPostSuccess, threadgateRecord, -}: { - item: Extract +}: ThreadItemPostProps & { postShadow: Shadow - overrides?: { - moderation?: boolean - topBorder?: boolean - } - onPostSuccess?: (data: OnPostSuccessData) => void - threadgateRecord?: AppBskyFeedThreadgate.Record }): React.ReactNode { const t = useTheme() const pal = usePalette('default') @@ -179,24 +252,9 @@ const ThreadPostInner = memo(function ThreadPostInner({ const {isActive: live} = useActorStatus(post.author) - const showTopBorder = - !item.ui.showParentReplyLine && overrides?.topBorder !== true - return ( - + - {/* Provides some space between posts as well as contains the reply line */} - - - {item.ui.showParentReplyLine && ( - - )} - - + @@ -303,7 +344,7 @@ const ThreadPostInner = memo(function ThreadPostInner({ - + ) }) @@ -315,7 +356,10 @@ function SubtleHover({children}: {children: React.ReactNode}) { onOut: onHoverOut, } = useInteractionState() return ( - + {children}