diff --git a/src/screens/PostThread/components/ReadMore.tsx b/src/screens/PostThread/components/ReadMore.tsx index b848395d05..a6b6564db3 100644 --- a/src/screens/PostThread/components/ReadMore.tsx +++ b/src/screens/PostThread/components/ReadMore.tsx @@ -4,7 +4,12 @@ import {useLingui} from '@lingui/react' import {makeProfileLink} from '#/lib/routes/links' import {type PostThreadParams, type Slice} from '#/state/queries/usePostThread' -import {TREE_AVI_WIDTH, TREE_INDENT} from '#/screens/PostThread/const' +import { + LINEAR_AVI_WIDTH, + REPLY_LINE_WIDTH, + TREE_AVI_WIDTH, + TREE_INDENT, +} from '#/screens/PostThread/const' import {atoms as a, useTheme} from '#/alf' import {CirclePlus_Stroke2_Corner0_Rounded as CirclePlus} from '#/components/icons/CirclePlus' import {Link} from '#/components/Link' @@ -20,46 +25,39 @@ export function ReadMore({ const t = useTheme() const {_} = useLingui() const isTreeView = view === 'tree' - const indentCount = Math.max(0, item.indent - 1) + const indent = Math.max(0, item.indent - 1) - const treeIndents = isTreeView ? ( - Array.from(Array(indentCount)).map((_, n: number) => ( - - )) - ) : indentCount > 0 ? ( - - ) : null + const spacers = isTreeView + ? Array.from(Array(indent)).map((_, n: number) => ( + + )) + : null return ( - {treeIndents} + {spacers} diff --git a/src/screens/PostThread/components/ThreadPost.tsx b/src/screens/PostThread/components/ThreadPost.tsx index a7766f6a78..2039fc6e34 100644 --- a/src/screens/PostThread/components/ThreadPost.tsx +++ b/src/screens/PostThread/components/ThreadPost.tsx @@ -29,6 +29,11 @@ import {PostCtrls} from '#/view/com/util/post-ctrls/PostCtrls' import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds' import {PostMeta} from '#/view/com/util/PostMeta' import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' +import { + LINEAR_AVI_WIDTH, + OUTER_SPACE, + REPLY_LINE_WIDTH, +} from '#/screens/PostThread/const' import {atoms as a, useTheme} from '#/alf' import {useInteractionState} from '#/components/hooks/useInteractionState' import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash' @@ -180,37 +185,37 @@ let PostThreadItemLoaded = ({ - - + {/* Provides some space between posts as well as contains the reply line */} + + {item.ui.showParentReplyLine && ( @@ -218,19 +223,10 @@ let PostThreadItemLoaded = ({ - - {/* If we are in threaded mode, the avatar is rendered in PostMeta */} + @@ -259,7 +254,6 @@ let PostThreadItemLoaded = ({ moderation={moderation} timestamp={post.indexedAt} postHref={postHref} - avatarSize={24} style={[a.pb_xs]} /> @@ -269,16 +263,14 @@ let PostThreadItemLoaded = ({ additionalCauses={additionalPostAlerts} /> {richText?.text ? ( - - - + ) : undefined} {limitLines ? (