Implement FeedFeedback API (#3498)

* Implement onViewableItemsChanged on List.web.tsx

* Introduce onItemSeen to List API

* Add FeedFeedback tracker

* Add clickthrough interaction tracking

* Add engagement interaction tracking

* Reduce duplicate sends, introduce a flushAndReset to be triggered on refreshes, and modify the api design a bit

* Wire up SDK types and feedContext

* Avoid needless function allocations

* Fix schema usage

* Add show more / show less buttons

* Fix minor rendering issue on mobile menu

* Wire up sendInteractions()

* Fix logic error

* Fix: it's item not uri

* Update 'seen' to mean 3 seconds on-screen with some significant portion visible

* Fix non-reactive debounce

* Move methods out

* Use a WeakSet for deduping

* Reset timeout

* 3 -> 2 seconds

* Oopsie

* Throttle instead

* Fix divider

* Remove explicit flush calls

* Rm unused

---------

Co-authored-by: dan <dan.abramov@gmail.com>

1 files changed, 49 insertions, 2 deletions

diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx
index ac97f3da2..7a62ce7cb 100644
--- a/src/view/com/util/forms/PostDropdownBtn.tsx
+++ b/src/view/com/util/forms/PostDropdownBtn.tsx
@@ -18,6 +18,7 @@ import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {getTranslatorLink} from '#/locale/helpers'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
+import {useFeedFeedbackContext} from '#/state/feed-feedback'
 import {useMutedThreads, useToggleThreadMute} from '#/state/muted-threads'
 import {useLanguagePrefs} from '#/state/preferences'
 import {useHiddenPosts, useHiddenPostsApi} from '#/state/preferences'
@@ -36,6 +37,10 @@ import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons
 import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
 import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
 import {CodeBrackets_Stroke2_Corner0_Rounded as CodeBrackets} from '#/components/icons/CodeBrackets'
+import {
+  EmojiSad_Stroke2_Corner0_Rounded as EmojiSad,
+  EmojiSmile_Stroke2_Corner0_Rounded as EmojiSmile,
+} from '#/components/icons/Emoji'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
 import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
 import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
@@ -53,6 +58,7 @@ let PostDropdownBtn = ({
   postAuthor,
   postCid,
   postUri,
+  postFeedContext,
   record,
   richText,
   style,
@@ -63,6 +69,7 @@ let PostDropdownBtn = ({
   postAuthor: AppBskyActorDefs.ProfileViewBasic
   postCid: string
   postUri: string
+  postFeedContext: string | undefined
   record: AppBskyFeedPost.Record
   richText: RichTextAPI
   style?: StyleProp<ViewStyle>
@@ -81,6 +88,7 @@ let PostDropdownBtn = ({
   const postDeleteMutation = usePostDeleteMutation()
   const hiddenPosts = useHiddenPosts()
   const {hidePost} = useHiddenPostsApi()
+  const feedFeedback = useFeedFeedbackContext()
   const openLink = useOpenLink()
   const navigation = useNavigation()
   const {mutedWordsDialogControl} = useGlobalDialogsControlContext()
@@ -183,6 +191,24 @@ let PostDropdownBtn = ({
     shareUrl(url)
   }, [href])
 
+  const onPressShowMore = React.useCallback(() => {
+    feedFeedback.sendInteraction({
+      event: 'app.bsky.feed.defs#requestMore',
+      item: postUri,
+      feedContext: postFeedContext,
+    })
+    Toast.show('Feedback sent!')
+  }, [feedFeedback, postUri, postFeedContext])
+
+  const onPressShowLess = React.useCallback(() => {
+    feedFeedback.sendInteraction({
+      event: 'app.bsky.feed.defs#requestLess',
+      item: postUri,
+      feedContext: postFeedContext,
+    })
+    Toast.show('Feedback sent!')
+  }, [feedFeedback, postUri, postFeedContext])
+
   const canEmbed = isWeb && gtMobile && !hideInPWI
 
   return (
@@ -262,10 +288,32 @@ let PostDropdownBtn = ({
             )}
           </Menu.Group>
 
-          {hasSession && (
+          {hasSession && feedFeedback.enabled && (
             <>
               <Menu.Divider />
+              <Menu.Group>
+                <Menu.Item
+                  testID="postDropdownShowMoreBtn"
+                  label={_(msg`Show more like this`)}
+                  onPress={onPressShowMore}>
+                  <Menu.ItemText>{_(msg`Show more like this`)}</Menu.ItemText>
+                  <Menu.ItemIcon icon={EmojiSmile} position="right" />
+                </Menu.Item>
+
+                <Menu.Item
+                  testID="postDropdownShowLessBtn"
+                  label={_(msg`Show less like this`)}
+                  onPress={onPressShowLess}>
+                  <Menu.ItemText>{_(msg`Show less like this`)}</Menu.ItemText>
+                  <Menu.ItemIcon icon={EmojiSad} position="right" />
+                </Menu.Item>
+              </Menu.Group>
+            </>
+          )}
 
+          {hasSession && (
+            <>
+              <Menu.Divider />
               <Menu.Group>
                 <Menu.Item
                   testID="postDropdownMuteThreadBtn"
@@ -308,7 +356,6 @@ let PostDropdownBtn = ({
           {hasSession && (
             <>
               <Menu.Divider />
-
               <Menu.Group>
                 {!isAuthor && (
                   <Menu.Item