Match feed known likers design

src/components/Post/KnownLikers.tsx

@@ -1,7 +1,7 @@
 import {View} from 'react-native'
 import {AtUri} from '@atproto/syntax'
 import {moderateProfile} from '@bsky/sdk/moderation'
-import {Trans, useLingui} from '@lingui/react/macro'
+import {Plural, Trans, useLingui} from '@lingui/react/macro'
 
 import {makeProfileLink} from '#/lib/routes/links'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
@@ -14,8 +14,6 @@ import {Text} from '#/components/Typography'
 import {type Features, useAnalytics} from '#/analytics'
 import {type app} from '#/lexicons'
 
-const AVI_SIZE = 20
-
 /**
  * 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
@@ -24,9 +22,11 @@ const AVI_SIZE = 20
 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()
@@ -65,10 +65,17 @@ export function KnownLikers({
       ),
     }))
   const rowLabel =
-    names.length >= 2
+    variant === 'feed'
-      ? l`Liked by ${names[0].displayName} and ${names[1].displayName}`
+      ? likeCount > 1
-      : l`Liked by ${names[0].displayName}`
+        ? l`${names[0].displayName} and ${likeCount - 1} others liked this`
-  const textStyle = [a.text_sm, t.atoms.text_contrast_medium]
+        : l`${names[0].displayName} liked this`
+      : names.length >= 2
+        ? l`Liked by ${names[0].displayName} and ${names[1].displayName}`
+        : l`Liked by ${names[0].displayName}`
+  const textStyle = [
+    variant === 'feed' ? a.text_xs : a.text_sm,
+    t.atoms.text_contrast_medium,
+  ]
   const nameStyle = [a.text_sm, a.font_semi_bold, t.atoms.text]
 
   const nameLink = (name: (typeof names)[number]) => (
@@ -89,11 +96,31 @@ export function KnownLikers({
       <Link
         to={likesHref}
         label={rowLabel}
-        style={[a.flex_row, a.align_center, a.gap_sm, a.flex_shrink]}
+        style={[
+          a.flex_row,
+          a.align_center,
+          variant === 'feed' ? a.gap_xs : a.gap_sm,
+          a.flex_shrink,
+        ]}
         onPress={() => ax.metric('post:likedBy:click', {})}>
-        <AvatarStack profiles={aviStackProfiles} size={AVI_SIZE} />
+        <AvatarStack
+          profiles={aviStackProfiles}
+          size={variant === 'feed' ? 16 : 20}
+        />
         <Text testID="knownLikersStat" style={[a.flex_shrink, textStyle]}>
-          {names.length >= 2 ? (
+          {variant === 'feed' ? (
+            likeCount > 1 ? (
+              <Trans comment="Social proof below a feed post; a person the viewer follows and the number of other people who liked the post">
+                {names[0].displayName} and{' '}
+                <Plural value={likeCount - 1} one="1 other" other="# others" />{' '}
+                liked this
+              </Trans>
+            ) : (
+              <Trans comment="Social proof below a feed post; a person the viewer follows who liked the post">
+                {names[0].displayName} liked this
+              </Trans>
+            )
+          ) : 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>

src/view/com/posts/PostFeedItem.tsx

@@ -448,6 +448,7 @@ let FeedItemInner = ({
             <KnownLikers
               post={rootPost}
               feature={Features.PostFeedKnownLikersEnable}
+              variant="feed"
             />
             <PostControls
               post={post}