acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Add known likers to feed posts (#11595)

Browse Source
This commit is contained in:
Spence Pope
2026-08-31 10:56:30 -04:00
committed by GitHub
parent 89c8e1cb70
commit 4495462f84
9 changed files with 189 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/analytics/features/index.ts
+16
View File
@@ -77,6 +77,22 @@ export function getFeatures() {
export function getFeatureDescription(feature: Features, i18n: I18n) {
switch (feature) {
case Features.PostFeedKnownLikersEnable:
return {
key: feature,
name: i18n._(
msg({
message: 'Social proofing on posts',
comment: 'Name for a feature flag',
}),
),
description: i18n._(
msg({
message: 'Spot posts your friends and follows have liked.',
comment: 'Description of a feature flag (Social proofing on posts)',
}),
),
}
case Features.CanonicalPostNumberingEnable:
return {
key: feature,
src/analytics/features/types.ts
+1
View File
@@ -16,6 +16,7 @@ export enum Features {
GroupChatsDisable = 'group_chats:disable',
ComposerLanguageDetectionEnable = 'composer:language_detection:enable',
PostGalleryEmbedEnable = 'post_gallery_embed:enable',
PostFeedKnownLikersEnable = 'post_feed:known_likers:enable',
PostThreadKnownLikersEnable = 'post_thread:known_likers:enable',
CustomLogoJapanEnable = 'custom_logo:japan:enable',
SearchStarterPacksV2Enable = 'search_starter_packs_v2:enable',
src/components/AvatarStack.tsx
+7 -3
View File
@@ -13,13 +13,17 @@ export function AvatarStack({
size = 26,
numPending,
backgroundColor,
borderWidth = 1,
overlap,
}: {
profiles: bsky.profile.AnyProfileView[]
size?: number
numPending?: number
backgroundColor?: string
borderWidth?: number
overlap?: number
}) {
const translation = size / 3 // overlap by 1/3
const translation = overlap ?? size / 3
const t = useTheme()
const moderationOpts = useModerationOpts()
@@ -55,7 +59,7 @@ export function AvatarStack({
width: size,
height: size,
left: i * -translation,
borderWidth: 1,
borderWidth,
borderColor: backgroundColor ?? t.atoms.bg.backgroundColor,
borderRadius: 999,
zIndex: 3 - i,
@@ -63,7 +67,7 @@ export function AvatarStack({
]}>
{item.profile && (
<UserAvatar
size={size - 2}
size={size - borderWidth * 2}
avatar={item.profile.avatar}
type={item.profile.associated?.labeler ? 'labeler' : 'user'}
moderation={item.moderation.ui('avatar')}
src/components/Post/KnownLikers.tsx
+113
View File
@@ -0,0 +1,113 @@
import {View} from 'react-native'
import {AtUri} from '@atproto/syntax'
import {moderateProfile} from '@bsky/sdk/moderation'
import {Trans, useLingui} from '@lingui/react/macro'
import {makeProfileLink} from '#/lib/routes/links'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {atoms as a, useTheme} from '#/alf'
import {AvatarStack} from '#/components/AvatarStack'
import {InlineLinkText, Link} from '#/components/Link'
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
import {Text} from '#/components/Typography'
import {type Features, useAnalytics} from '#/analytics'
import {type app} from '#/lexicons'
/**
* Social proof for a post. When the viewer follows some of the post's recent
* likers, renders a face pile plus "Liked by A and B". Renders nothing when
* the feature is disabled or no visible known likers are available.
*/
export function KnownLikers({
post,
feature,
variant = 'thread',
}: {
post: app.bsky.feed.defs.PostView
feature: Features
variant?: 'feed' | 'thread'
}) {
const t = useTheme()
const {t: l} = useLingui()
const moderationOpts = useModerationOpts()
const ax = useAnalytics()
const knownLikersAndModeration = moderationOpts
? (post.viewer?.knownLikers?.actors ?? [])
.map(actor => ({
actor,
moderation: moderateProfile(actor, moderationOpts),
}))
.filter(({moderation}) => !moderation.ui('profileList').filter)
: []
if (knownLikersAndModeration.length === 0 || !ax.features.enabled(feature)) {
return null
}
const urip = new AtUri(post.uri)
const likesHref = makeProfileLink(post.author, 'post', urip.rkey, 'liked-by')
const aviStackProfiles = knownLikersAndModeration
.slice(0, 3)
.map(({actor}) => actor)
const names = knownLikersAndModeration
.slice(0, 2)
.map(({actor, moderation}) => ({
did: actor.did,
href: makeProfileLink(actor),
displayName: sanitizeDisplayName(
actor.displayName || actor.handle,
moderation.ui('displayName'),
),
}))
const isFeed = variant === 'feed'
const rowLabel =
names.length >= 2
? l`Liked by ${names[0].displayName} and ${names[1].displayName}`
: l`Liked by ${names[0].displayName}`
const textStyle = [a.text_sm, t.atoms.text_contrast_medium]
const nameStyle = [a.text_sm, a.font_medium, t.atoms.text_contrast_medium]
const nameLink = (name: (typeof names)[number]) => (
<ProfileHoverCard key={name.did} did={name.did} inline>
<InlineLinkText
to={name.href}
label={l`Go to ${name.displayName}'s profile`}
disableMismatchWarning
emoji
style={nameStyle}>
{name.displayName}
</InlineLinkText>
</ProfileHoverCard>
)
return (
<View style={[a.w_full, a.flex_row, isFeed && a.mt_sm]}>
<Link
to={likesHref}
label={rowLabel}
style={[a.flex_row, a.align_center, a.gap_xs, a.flex_shrink]}
onPress={() => ax.metric('post:likedBy:click', {})}>
<AvatarStack
profiles={aviStackProfiles}
size={16}
overlap={4}
borderWidth={0.5}
backgroundColor={t.atoms.bg_contrast_25.backgroundColor}
/>
<Text testID="knownLikersStat" style={[a.flex_shrink, textStyle]}>
{names.length >= 2 ? (
<Trans comment="Social proof below a post; the bolded names are people the viewer follows who liked the post">
Liked by {nameLink(names[0])} and {nameLink(names[1])}
</Trans>
) : (
<Trans comment="Social proof below a post; the bolded name is a person the viewer follows who liked the post">
Liked by {nameLink(names[0])}
</Trans>
)}
</Text>
</Link>
</View>
)
}
src/components/WhoCanReply.tsx
+4 -4
View File
@@ -114,7 +114,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
style={[
a.flex_row,
a.align_center,
a.gap_xs,
{gap: 3},
(hovered || focused || pressed) && native({opacity: 0.5}),
style,
]}>
@@ -122,16 +122,16 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
color={
isThreadAuthor ? t.palette.primary_500 : t.palette.contrast_400
}
width={16}
width={12}
settings={settings}
/>
<Text
style={[
a.text_sm,
a.text_xs,
a.leading_tight,
isThreadAuthor
? {color: t.palette.primary_500}
: t.atoms.text_contrast_medium,
: t.atoms.text_contrast_high,
(hovered || focused || pressed) && web(a.underline),
]}>
{description}
src/screens/PostThread/components/LikesStat.tsx
+3 -123
View File
@@ -1,22 +1,14 @@
import {View} from 'react-native'
import {AtUri} from '@atproto/syntax'
import {moderateProfile} from '@bsky/sdk/moderation'
import {Plural, Trans, useLingui} from '@lingui/react/macro'
import {makeProfileLink} from '#/lib/routes/links'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {atoms as a, useTheme} from '#/alf'
import {AvatarStack} from '#/components/AvatarStack'
import {InlineLinkText, Link} from '#/components/Link'
import {Link} from '#/components/Link'
import {useFormatPostStatCount} from '#/components/PostControls/util'
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
import {Text} from '#/components/Typography'
import {useAnalytics} from '#/analytics'
import {type app} from '#/lexicons'
const AVI_SIZE = 20
/**
* The plain "N likes" stat for the expanded anchor post, linking to the likes
* list. Renders nothing when the post has no likes.
@@ -40,9 +32,9 @@ export function LikesStat({post}: {post: app.bsky.feed.defs.PostView}) {
onPress={() => ax.metric('post:likedBy:click', {})}>
<Text
testID="likeCount-expanded"
style={[a.text_md, t.atoms.text_contrast_medium]}>
style={[a.text_sm, t.atoms.text_contrast_high]}>
<Trans comment="Like count display, the <0> tags enclose the number of likes in bold (will never be 0)">
<Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
<Text style={[a.text_sm, a.font_semi_bold, t.atoms.text]}>
{formatPostStatCount(likeCount)}
</Text>{' '}
<Plural value={likeCount} one="like" other="likes" />
@@ -51,115 +43,3 @@ export function LikesStat({post}: {post: app.bsky.feed.defs.PostView}) {
</Link>
)
}
/**
* Social proof for the expanded anchor post. When the viewer follows some of
* the post's recent likers, renders a face pile plus "Liked by A and B" on
* its own row below the interaction stats line. Renders nothing otherwise.
*
* Known likers are included in the post viewer state so this can render with
* the rest of the thread, without a separate request or layout shift.
*/
export function KnownLikers({post}: {post: app.bsky.feed.defs.PostView}) {
const t = useTheme()
const {t: l} = useLingui()
const moderationOpts = useModerationOpts()
const ax = useAnalytics()
const likeCount = post.likeCount ?? 0
if (likeCount === 0) return null
const urip = new AtUri(post.uri)
const likesHref = makeProfileLink(post.author, 'post', urip.rkey, 'liked-by')
const onPressLikedBy = () => ax.metric('post:likedBy:click', {})
const knownLikersAndModeration = moderationOpts
? (post.viewer?.knownLikers?.actors ?? [])
.map(actor => ({
actor,
moderation: moderateProfile(actor, moderationOpts),
}))
.filter(({moderation}) => {
const modui = moderation.ui('profileList')
return !modui.filter
})
: []
const showKnownLikers =
knownLikersAndModeration.length > 0 &&
ax.features.enabled(ax.features.PostThreadKnownLikersEnable)
if (!showKnownLikers) return null
const aviStackProfiles = knownLikersAndModeration
.slice(0, 3)
.map(({actor}) => actor)
const names = knownLikersAndModeration
.slice(0, 2)
.map(({actor, moderation}) => {
return {
did: actor.did,
href: makeProfileLink(actor),
displayName: sanitizeDisplayName(
actor.displayName || actor.handle,
moderation.ui('displayName'),
),
}
})
/*
* The row link's a11y label mirrors the visible sentence so screen readers
* announce the social proof.
*/
const rowLabel =
names.length >= 2
? l`Liked by ${names[0].displayName} and ${names[1].displayName}`
: l`Liked by ${names[0].displayName}`
const textStyle = [a.text_sm, t.atoms.text_contrast_medium]
const nameStyle = [a.text_sm, a.font_semi_bold, t.atoms.text]
/*
* Nested inside the row link, but the deepest link claims the press, so
* tapping a name goes to that profile while the rest of the row goes to
* the likes list. Same pattern as NotificationFeedItem's author links.
*/
const nameLink = (name: (typeof names)[number]) => (
<ProfileHoverCard key={name.did} did={name.did} inline>
<InlineLinkText
to={name.href}
label={l`Go to ${name.displayName}'s profile`}
disableMismatchWarning
emoji
style={nameStyle}>
{name.displayName}
</InlineLinkText>
</ProfileHoverCard>
)
return (
/*
* The full-width wrapper forces the social proof onto its own line below
* the count stats within the wrapping stats row.
*/
<View style={[a.w_full, a.flex_row]}>
<Link
to={likesHref}
label={rowLabel}
style={[a.flex_row, a.align_center, a.gap_sm, a.flex_shrink]}
onPress={onPressLikedBy}>
<AvatarStack profiles={aviStackProfiles} size={AVI_SIZE} />
<Text testID="knownLikersStat" style={[a.flex_shrink, textStyle]}>
{names.length >= 2 ? (
<Trans comment="Social proof below the post stats; the bolded names are people the viewer follows who liked the post">
Liked by {nameLink(names[0])} and {nameLink(names[1])}
</Trans>
) : (
<Trans comment="Social proof below the post stats; the bolded name is a person the viewer follows who liked the post">
Liked by {nameLink(names[0])}
</Trans>
)}
</Text>
</Link>
</View>
)
}
src/screens/PostThread/components/ThreadItemAnchor.tsx
+14 -11
View File
@@ -23,7 +23,7 @@ import {type OnPostSuccessData} from '#/state/shell/composer'
import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
import {type PostSource} from '#/state/unstable-post-source'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {KnownLikers, LikesStat} from '#/screens/PostThread/components/LikesStat'
import {LikesStat} from '#/screens/PostThread/components/LikesStat'
import {ThreadItemAnchorFollowButton} from '#/screens/PostThread/components/ThreadItemAnchorFollowButton'
import {
POST_NUMBER_INLINE_OFFSET,
@@ -47,6 +47,7 @@ import {PostAlerts} from '#/components/moderation/PostAlerts'
import * as ReportDialogMetadataContext from '#/components/moderation/ReportDialog/ReportDialogMetadataContext'
import {type AppModerationCause} from '#/components/Pills'
import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
import {KnownLikers} from '#/components/Post/KnownLikers'
import {TranslatedPost} from '#/components/Post/Translated'
import {PostControls, PostControlsSkeleton} from '#/components/PostControls'
import {useFormatPostStatCount} from '#/components/PostControls/util'
@@ -57,7 +58,7 @@ import {RichText} from '#/components/RichText'
import * as Skele from '#/components/Skeleton'
import {Text} from '#/components/Typography'
import {WhoCanReply} from '#/components/WhoCanReply'
import {useAnalytics} from '#/analytics'
import {Features, useAnalytics} from '#/analytics'
import {useActorStatus} from '#/features/liveNow'
import {app} from '#/lexicons'
import * as bsky from '#/types/bsky'
@@ -451,7 +452,6 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
columnGap: a.gap_lg.gap,
},
a.border_t,
a.border_b,
a.mt_md,
a.py_md,
t.atoms.border_contrast_low,
@@ -460,10 +460,10 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
<Link to={repostsHref} label={l`Reposts of this post`}>
<Text
testID="repostCount-expanded"
style={[a.text_md, t.atoms.text_contrast_medium]}>
style={[a.text_sm, t.atoms.text_contrast_high]}>
<Trans comment="Repost count display, the <0> tags enclose the number of reposts in bold (will never be 0)">
<Text
style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
style={[a.text_sm, a.font_semi_bold, t.atoms.text]}>
{formatPostStatCount(post.repostCount)}
</Text>{' '}
<Plural
@@ -481,10 +481,10 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
<Link to={quotesHref} label={l`Quotes of this post`}>
<Text
testID="quoteCount-expanded"
style={[a.text_md, t.atoms.text_contrast_medium]}>
style={[a.text_sm, t.atoms.text_contrast_high]}>
<Trans comment="Quote count display, the <0> tags enclose the number of quotes in bold (will never be 0)">
<Text
style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
style={[a.text_sm, a.font_semi_bold, t.atoms.text]}>
{formatPostStatCount(post.quoteCount)}
</Text>{' '}
<Plural
@@ -500,9 +500,9 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
{post.bookmarkCount != null && post.bookmarkCount !== 0 ? (
<Text
testID="bookmarkCount-expanded"
style={[a.text_md, t.atoms.text_contrast_medium]}>
style={[a.text_sm, t.atoms.text_contrast_high]}>
<Trans comment="Save count display, the <0> tags enclose the number of saves in bold (will never be 0)">
<Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
<Text style={[a.text_sm, a.font_semi_bold, t.atoms.text]}>
{formatPostStatCount(post.bookmarkCount)}
</Text>{' '}
<Plural
@@ -513,9 +513,12 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
</Trans>
</Text>
) : null}
<KnownLikers post={post} />
</View>
) : null}
<KnownLikers
post={post}
feature={Features.PostThreadKnownLikersEnable}
/>
<View
style={[
a.pt_sm,
@@ -562,7 +565,7 @@ function ExpandedPostDetails({
<View style={[a.gap_md, a.pt_md, a.align_start]}>
<BackdatedPostIndicator post={post} />
<View style={[a.flex_row, a.align_center, a.flex_wrap, a.gap_sm]}>
<Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
<Text style={[a.text_xs, t.atoms.text_contrast_high]}>
{niceDate(i18n, post.indexedAt, 'dot separated')}
</Text>
{isRootPost && (
src/state/queries/usePostThread/index.ts
+24
View File
@@ -33,6 +33,7 @@ import {useMergeThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies
import {useBreakpoints} from '#/alf'
import {IS_WEB} from '#/env'
import {app} from '#/lexicons'
import * as bsky from '#/types/bsky'
export * from '#/state/queries/usePostThread/context'
export {useUpdatePostThreadThreadgateQueryCache} from '#/state/queries/usePostThread/queryCache'
@@ -73,6 +74,7 @@ export function usePostThread({anchor}: {anchor?: string}) {
enabled: isThreadPreferencesLoaded && !!anchor && !!moderationOpts,
queryKey: postThreadQueryKey,
async queryFn(ctx) {
const placeholder = getThreadPlaceholder(qc, anchor!)
const data = await client.call(app.bsky.unspecced.getPostThreadV2, {
anchor: anchor! as AtUriString,
branchingFactor: view === 'linear' ? LINEAR_VIEW_BF : TREE_VIEW_BF,
@@ -80,6 +82,28 @@ export function usePostThread({anchor}: {anchor?: string}) {
sort: sort,
})
const cachedKnownLikers =
placeholder &&
bsky.isType(app.bsky.unspecced.defs.threadItemPost, placeholder.value)
? placeholder.value.post.viewer?.knownLikers
: undefined
if (cachedKnownLikers?.actors.length) {
const anchorItem = data.thread?.find(item => item.uri === anchor)
if (
anchorItem &&
bsky.isType(
app.bsky.unspecced.defs.threadItemPost,
anchorItem.value,
) &&
!anchorItem.value.post.viewer?.knownLikers?.actors.length
) {
anchorItem.value.post.viewer = {
...anchorItem.value.post.viewer,
knownLikers: cachedKnownLikers,
}
}
}
/*
* Initialize `ctx.meta` to track if we know we have additional replies
* we could fetch once we hit the end.
src/view/com/posts/PostFeedItem.tsx
+7 -1
View File
@@ -44,6 +44,7 @@ import * as ReportDialogMetadataContext from '#/components/moderation/ReportDial
import {type AppModerationCause} from '#/components/Pills'
import {Embed} from '#/components/Post/Embed'
import {PostEmbedViewContext} from '#/components/Post/Embed/types'
import {KnownLikers} from '#/components/Post/KnownLikers'
import {PostRepliedTo} from '#/components/Post/PostRepliedTo'
import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
import {TranslatedPost} from '#/components/Post/Translated'
@@ -51,7 +52,7 @@ import {PostControls} from '#/components/PostControls'
import {DiscoverDebug} from '#/components/PostControls/DiscoverDebug'
import {RichText} from '#/components/RichText'
import {SubtleHover} from '#/components/SubtleHover'
import {useAnalytics} from '#/analytics'
import {Features, useAnalytics} from '#/analytics'
import {useActorStatus} from '#/features/liveNow'
import {app} from '#/lexicons'
import * as bsky from '#/types/bsky'
@@ -456,6 +457,11 @@ let FeedItemInner = ({
onShowLess={onShowLess}
viaRepost={viaRepost}
/>
<KnownLikers
post={post}
feature={Features.PostFeedKnownLikersEnable}
variant="feed"
/>
</View>
<DiscoverDebug feedContext={feedContext} />