diff --git a/src/components/PostControls/index.tsx b/src/components/PostControls/index.tsx index 4f9b9a3759..ec0016815f 100644 --- a/src/components/PostControls/index.tsx +++ b/src/components/PostControls/index.tsx @@ -28,6 +28,7 @@ import * as Toast from '#/view/com/util/Toast' import {atoms as a, useBreakpoints} from '#/alf' import {Reply as Bubble} from '#/components/icons/Reply' import {useFormatPostStatCount} from '#/components/PostControls/util' +import * as Skele from '#/components/Skeleton' import {BookmarkButton} from './BookmarkButton' import { PostControlButton, @@ -188,12 +189,11 @@ let PostControls = ({ }) } - const secondaryControlSpacingStyles = useMemo(() => { - let gap = 0 // default, we want `gap` to be defined on the resulting object - if (variant !== 'compact') gap = a.gap_xs.gap - if (big || gtPhone) gap = a.gap_sm.gap - return {gap} - }, [variant, big, gtPhone]) + const secondaryControlSpacingStyles = useSecondaryControlSpacingStyles({ + variant, + big, + gtPhone, + }) return ( + variant?: 'compact' | 'normal' | 'large' +}) { + const {gtPhone} = useBreakpoints() + + const rowHeight = big ? 32 : 28 + const padding = 4 + const size = rowHeight - padding * 2 + + const secondaryControlSpacingStyles = useSecondaryControlSpacingStyles({ + variant, + big, + gtPhone, + }) + + const itemStyles = { + padding, + } + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +function useSecondaryControlSpacingStyles({ + variant, + big, + gtPhone, +}: { + variant?: 'compact' | 'normal' | 'large' + big?: boolean + gtPhone: boolean +}) { + return useMemo(() => { + let gap = 0 // default, we want `gap` to be defined on the resulting object + if (variant !== 'compact') gap = a.gap_xs.gap + if (big || gtPhone) gap = a.gap_sm.gap + return {gap} + }, [variant, big, gtPhone]) +} diff --git a/src/screens/PostThread/components/ThreadItemAnchor.tsx b/src/screens/PostThread/components/ThreadItemAnchor.tsx index aca8591e9c..9ea828af2d 100644 --- a/src/screens/PostThread/components/ThreadItemAnchor.tsx +++ b/src/screens/PostThread/components/ThreadItemAnchor.tsx @@ -51,7 +51,7 @@ import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe' import {PostAlerts} from '#/components/moderation/PostAlerts' import {type AppModerationCause} from '#/components/Pills' import {Embed, PostEmbedViewContext} from '#/components/Post/Embed' -import {PostControls} from '#/components/PostControls' +import {PostControls, PostControlsSkeleton} from '#/components/PostControls' import {useFormatPostStatCount} from '#/components/PostControls/util' import {ProfileHoverCard} from '#/components/ProfileHoverCard' import * as Prompt from '#/components/Prompt' @@ -730,13 +730,7 @@ export function ThreadItemAnchorSkeleton() { - - - - - - - + ) } diff --git a/src/screens/PostThread/components/ThreadItemPost.tsx b/src/screens/PostThread/components/ThreadItemPost.tsx index 7e336b14a2..eccc7be2cb 100644 --- a/src/screens/PostThread/components/ThreadItemPost.tsx +++ b/src/screens/PostThread/components/ThreadItemPost.tsx @@ -39,7 +39,7 @@ import {PostHider} from '#/components/moderation/PostHider' import {type AppModerationCause} from '#/components/Pills' import {Embed, PostEmbedViewContext} from '#/components/Post/Embed' import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton' -import {PostControls} from '#/components/PostControls' +import {PostControls, PostControlsSkeleton} from '#/components/PostControls' import {RichText} from '#/components/RichText' import * as Skele from '#/components/Skeleton' import {SubtleHover} from '#/components/SubtleHover' @@ -390,13 +390,7 @@ export function ThreadItemPostSkeleton({index}: {index: number}) { )} - - - - - - - + diff --git a/src/screens/PostThread/components/ThreadItemTreePost.tsx b/src/screens/PostThread/components/ThreadItemTreePost.tsx index 33bbe7fe74..d77ef469c0 100644 --- a/src/screens/PostThread/components/ThreadItemTreePost.tsx +++ b/src/screens/PostThread/components/ThreadItemTreePost.tsx @@ -38,7 +38,7 @@ import {PostHider} from '#/components/moderation/PostHider' import {type AppModerationCause} from '#/components/Pills' import {Embed, PostEmbedViewContext} from '#/components/Post/Embed' import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton' -import {PostControls} from '#/components/PostControls' +import {PostControls, PostControlsSkeleton} from '#/components/PostControls' import {RichText} from '#/components/RichText' import * as Skele from '#/components/Skeleton' import {SubtleHover} from '#/components/SubtleHover' @@ -177,7 +177,7 @@ const ThreadItemTreePostInnerWrapper = memo( paddingTop: OUTER_SPACE / 2, }, item.ui.indent === 1 && [ - !item.ui.showParentReplyLine && a.pt_lg, + !item.ui.showParentReplyLine && {paddingTop: OUTER_SPACE / 1.5}, !item.ui.showChildReplyLine && a.pb_sm, ], item.ui.isLastChild && @@ -412,11 +412,10 @@ export function ThreadItemTreePostSkeleton({index}: {index: number}) { - + @@ -436,13 +435,7 @@ export function ThreadItemTreePostSkeleton({index}: {index: number}) { )} - - - - - - - +