From 3b5b226f1038309eba010d0f74d26e6878ca8231 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 18 Dec 2024 19:39:00 +0000
Subject: [PATCH 1/2] Move

(cherry picked from commit bfb96f4ce287b140d25f36c678c0ac21bdb11b3d)
---
 .../components/ExploreTrendingTopics.tsx      | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/screens/Search/components/ExploreTrendingTopics.tsx b/src/screens/Search/components/ExploreTrendingTopics.tsx
index a4766a0f41..194efddb17 100644
--- a/src/screens/Search/components/ExploreTrendingTopics.tsx
+++ b/src/screens/Search/components/ExploreTrendingTopics.tsx
@@ -57,6 +57,15 @@ function Inner() {
           a.border_b,
           t.atoms.border_contrast_low,
         ]}>
+        <Button
+          label={_(msg`Hide trending topics`)}
+          size="small"
+          variant="ghost"
+          color="secondary"
+          shape="round"
+          onPress={() => trendingPrompt.open()}>
+          <ButtonIcon icon={X} />
+        </Button>
         <View style={[a.flex_1, a.gap_sm]}>
           <View style={[a.flex_row, a.align_center, a.gap_sm]}>
             <Trending
@@ -78,16 +87,6 @@ function Inner() {
             <Trans>What people are posting about.</Trans>
           </Text>
         </View>
-
-        <Button
-          label={_(msg`Hide trending tpoics`)}
-          size="small"
-          variant="ghost"
-          color="secondary"
-          shape="round"
-          onPress={() => trendingPrompt.open()}>
-          <ButtonIcon icon={X} />
-        </Button>
       </View>
 
       <View style={[a.pt_md, a.pb_lg]}>

From 117dd6013f70a9650065a4174f7428182cccee5b Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 18 Dec 2024 13:47:38 -0600
Subject: [PATCH 2/2] Add to recommeded too

(cherry picked from commit e6844883a6c0dfeb1a36837d70c09e1240c32a06)
---
 src/lib/statsig/events.ts                     |  6 ++-
 .../components/ExploreRecommendations.tsx     | 43 +++++++++++++++++--
 .../components/ExploreTrendingTopics.tsx      | 25 +++++------
 3 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/src/lib/statsig/events.ts b/src/lib/statsig/events.ts
index 76ba3257fa..8d684a4e7c 100644
--- a/src/lib/statsig/events.ts
+++ b/src/lib/statsig/events.ts
@@ -239,6 +239,10 @@ export type LogEvents = {
 
   'trendingTopics:show': {}
   'trendingTopics:hide': {
-    context: 'sidebar' | 'interstitial' | 'explore'
+    context:
+      | 'sidebar'
+      | 'interstitial'
+      | 'explore:trending'
+      | 'explore:recommendations'
   }
 }
diff --git a/src/screens/Search/components/ExploreRecommendations.tsx b/src/screens/Search/components/ExploreRecommendations.tsx
index e253cfb5ab..b7dd9f1331 100644
--- a/src/screens/Search/components/ExploreRecommendations.tsx
+++ b/src/screens/Search/components/ExploreRecommendations.tsx
@@ -1,15 +1,24 @@
+import React from 'react'
 import {View} from 'react-native'
-import {Trans} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
+import {logEvent} from '#/lib/statsig/statsig'
 import {isWeb} from '#/platform/detection'
-import {useTrendingSettings} from '#/state/preferences/trending'
+import {
+  useTrendingSettings,
+  useTrendingSettingsApi,
+} from '#/state/preferences/trending'
 import {
   DEFAULT_LIMIT as RECOMMENDATIONS_COUNT,
   useTrendingTopics,
 } from '#/state/queries/trending/useTrendingTopics'
 import {useTrendingConfig} from '#/state/trending-config'
 import {atoms as a, useGutters, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
 import {Hashtag_Stroke2_Corner0_Rounded} from '#/components/icons/Hashtag'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
+import * as Prompt from '#/components/Prompt'
 import {
   TrendingTopic,
   TrendingTopicLink,
@@ -25,17 +34,26 @@ export function ExploreRecommendations() {
 
 function Inner() {
   const t = useTheme()
+  const {_} = useLingui()
   const gutters = useGutters([0, 'compact'])
   const {data: trending, error, isLoading} = useTrendingTopics()
   const noRecs = !isLoading && !error && !trending?.suggested?.length
+  const {setTrendingDisabled} = useTrendingSettingsApi()
+  const trendingPrompt = Prompt.usePromptControl()
+
+  const onConfirmHide = React.useCallback(() => {
+    logEvent('trendingTopics:hide', {context: 'explore:recommendations'})
+    setTrendingDisabled(true)
+  }, [setTrendingDisabled])
 
   return error || noRecs ? null : (
     <>
       <View
         style={[
+          a.flex_row,
           isWeb
-            ? [a.flex_row, a.px_lg, a.py_lg, a.pt_2xl, a.gap_md]
-            : [{flexDirection: 'row-reverse'}, a.p_lg, a.pt_2xl, a.gap_md],
+            ? [a.px_lg, a.py_lg, a.pt_2xl, a.gap_md]
+            : [a.p_lg, a.pt_2xl, a.gap_md],
           a.border_b,
           t.atoms.border_contrast_low,
         ]}>
@@ -54,6 +72,15 @@ function Inner() {
             <Trans>Feeds we think you might like.</Trans>
           </Text>
         </View>
+        <Button
+          label={_(msg`Hide trending topics`)}
+          size="small"
+          variant="ghost"
+          color="secondary"
+          shape="round"
+          onPress={() => trendingPrompt.open()}>
+          <ButtonIcon icon={X} />
+        </Button>
       </View>
 
       <View style={[a.pt_md, a.pb_lg]}>
@@ -90,6 +117,14 @@ function Inner() {
           )}
         </View>
       </View>
+
+      <Prompt.Basic
+        control={trendingPrompt}
+        title={_(msg`Hide trending topics?`)}
+        description={_(msg`You can update this later from your settings.`)}
+        confirmButtonCta={_(msg`Hide`)}
+        onConfirm={onConfirmHide}
+      />
     </>
   )
 }
diff --git a/src/screens/Search/components/ExploreTrendingTopics.tsx b/src/screens/Search/components/ExploreTrendingTopics.tsx
index 194efddb17..ca4fa6e5ea 100644
--- a/src/screens/Search/components/ExploreTrendingTopics.tsx
+++ b/src/screens/Search/components/ExploreTrendingTopics.tsx
@@ -43,7 +43,7 @@ function Inner() {
   const trendingPrompt = Prompt.usePromptControl()
 
   const onConfirmHide = React.useCallback(() => {
-    logEvent('trendingTopics:hide', {context: 'explore'})
+    logEvent('trendingTopics:hide', {context: 'explore:trending'})
     setTrendingDisabled(true)
   }, [setTrendingDisabled])
 
@@ -51,21 +51,13 @@ function Inner() {
     <>
       <View
         style={[
+          a.flex_row,
           isWeb
-            ? [a.flex_row, a.px_lg, a.py_lg, a.pt_2xl, a.gap_md]
-            : [{flexDirection: 'row-reverse'}, a.p_lg, a.pt_2xl, a.gap_md],
+            ? [a.px_lg, a.py_lg, a.pt_2xl, a.gap_md]
+            : [a.p_lg, a.pt_2xl, a.gap_md],
           a.border_b,
           t.atoms.border_contrast_low,
         ]}>
-        <Button
-          label={_(msg`Hide trending topics`)}
-          size="small"
-          variant="ghost"
-          color="secondary"
-          shape="round"
-          onPress={() => trendingPrompt.open()}>
-          <ButtonIcon icon={X} />
-        </Button>
         <View style={[a.flex_1, a.gap_sm]}>
           <View style={[a.flex_row, a.align_center, a.gap_sm]}>
             <Trending
@@ -87,6 +79,15 @@ function Inner() {
             <Trans>What people are posting about.</Trans>
           </Text>
         </View>
+        <Button
+          label={_(msg`Hide trending topics`)}
+          size="small"
+          variant="ghost"
+          color="secondary"
+          shape="round"
+          onPress={() => trendingPrompt.open()}>
+          <ButtonIcon icon={X} />
+        </Button>
       </View>
 
       <View style={[a.pt_md, a.pb_lg]}>