feat: adds sponsored post UI

Depends on bluesky-social/atproto#3419. See bluesky-social/atproto#3386.
aendra-rininsland · Jan 20, 2025 · 14e5144 · 14e5144
1 parent 2e8f2d5
commit 14e5144
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx
@@ -9,7 +9,11 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {AppBskyActorDefs, AppBskyEmbedVideo} from '@atproto/api'
+import {
+  AppBskyActorDefs,
+  AppBskyEmbedVideo,
+  AppBskyFeedDefs,
+} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
@@ -618,7 +622,13 @@ let PostFeed = ({
           <PostFeedItem
             post={item.post}
             record={item.record}
-            reason={indexInSlice === 0 ? slice.reason : undefined}
+            reason={
+              (indexInSlice === 0 &&
+                AppBskyFeedDefs.isReasonPin(slice.reason)) ||
+              AppBskyFeedDefs.isReasonSponsored(slice.reason)
+                ? slice.reason
+                : undefined
+            }
             feedContext={slice.feedContext}
             moderation={item.moderation}
             parentAuthor={item.parentAuthor}

diff --git a/src/view/com/posts/PostFeedItem.tsx b/src/view/com/posts/PostFeedItem.tsx
@@ -39,6 +39,7 @@ import {Text} from '#/view/com/util/text/Text'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a} from '#/alf'
 import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
+import {Zap_Stroke2_Corner0_Rounded as SponsoredIcon} from '#/components/icons/Zap'
 import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost'
 import {ContentHider} from '#/components/moderation/ContentHider'
 import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
@@ -55,6 +56,7 @@ interface FeedItemProps {
   reason:
     | AppBskyFeedDefs.ReasonRepost
     | AppBskyFeedDefs.ReasonPin
+    | AppBskyFeedDefs.ReasonSponsored
     | ReasonFeedSource
     | {[k: string]: unknown; $type: string}
     | undefined
@@ -228,6 +230,8 @@ let FeedItemInner = ({
     AppBskyFeedDefs.isReasonRepost(reason) &&
     reason.by.did === currentAccount?.did
 
+  const isSponsored = AppBskyFeedDefs.isReasonSponsored(reason)
+
   /**
    * If `post[0]` in this slice is the actual root post (not an orphan thread),
    * then we may have a threadgate record to reference
@@ -363,6 +367,21 @@ let FeedItemInner = ({
                 <Trans>Pinned</Trans>
               </Text>
             </View>
+          ) : AppBskyFeedDefs.isReasonSponsored(reason) ? (
+            <View style={styles.includeReason}>
+              <SponsoredIcon
+                style={{color: pal.colors.textLight, marginRight: 3}}
+                width={13}
+                height={13}
+              />
+              <Text
+                type="sm-bold"
+                style={pal.textLight}
+                lineHeight={1.2}
+                numberOfLines={1}>
+                <Trans>Sponsored</Trans>
+              </Text>
+            </View>
           ) : null}
         </View>
       </View>