diff --git a/src/components/PostControls/index.tsx b/src/components/PostControls/index.tsx index f91bcd8a5d..aea4649cff 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, flatten, 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,11 +189,11 @@ let PostControls = ({ }) } - const secondaryControlSpacingStyles = flatten([ - {gap: 0}, // default, we want `gap` to be defined on the resulting object - variant !== 'compact' && a.gap_xs, - (big || gtPhone) && a.gap_sm, - ]) + const secondaryControlSpacingStyles = getSecondaryControlSpacingStyles({ + 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 = getSecondaryControlSpacingStyles({ + variant, + big, + gtPhone, + }) + + const itemStyles = { + padding, + } + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +function getSecondaryControlSpacingStyles({ + variant, + big, + gtPhone, +}: { + variant?: 'compact' | 'normal' | 'large' + big?: boolean + gtPhone: boolean +}) { + return flatten([ + {gap: 0}, // default, we want `gap` to be defined on the resulting object + variant !== 'compact' && a.gap_xs, + (big || gtPhone) && a.gap_sm, + ]) +} diff --git a/src/screens/PostThread/components/ThreadItemAnchor.tsx b/src/screens/PostThread/components/ThreadItemAnchor.tsx index 301124aaa8..9524e9ac18 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' @@ -732,13 +732,7 @@ export function ThreadItemAnchorSkeleton() { - - - - - - - + ) } diff --git a/src/screens/PostThread/components/ThreadItemPost.tsx b/src/screens/PostThread/components/ThreadItemPost.tsx index 5590bf625a..6fc198071c 100644 --- a/src/screens/PostThread/components/ThreadItemPost.tsx +++ b/src/screens/PostThread/components/ThreadItemPost.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 {SubtleWebHover} from '#/components/SubtleWebHover' @@ -389,13 +389,7 @@ export function ThreadItemPostSkeleton({index}: {index: number}) { )} - - - - - - - + diff --git a/src/screens/PostThread/components/ThreadItemTreePost.tsx b/src/screens/PostThread/components/ThreadItemTreePost.tsx index 5d31233585..f10217bd38 100644 --- a/src/screens/PostThread/components/ThreadItemTreePost.tsx +++ b/src/screens/PostThread/components/ThreadItemTreePost.tsx @@ -37,7 +37,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 {SubtleWebHover} from '#/components/SubtleWebHover' @@ -434,13 +434,7 @@ export function ThreadItemTreePostSkeleton({index}: {index: number}) { )} - - - - - - - +