Explain trending topics in options menu (#11521)

src/components/TrendingTopics.tsx

@@ -1,16 +1,63 @@
 import {useEffect, useMemo} from 'react'
 import {type AtUri} from '@atproto/syntax'
-import {useLingui} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useCallOnce} from '#/lib/once'
 // import {makeProfileLink} from '#/lib/routes/links'
 // import {feedUriToHref} from '#/lib/strings/url-helpers'
-import {native} from '#/alf'
+import {atoms as a, native, useTheme} from '#/alf'
 import {Link as InternalLink, type LinkProps} from '#/components/Link'
+import * as Prompt from '#/components/Prompt'
+import {Text} from '#/components/Typography'
 import {type Metrics, useAnalytics} from '#/analytics'
+import {IS_WEB} from '#/env'
 import {type app} from '#/lexicons'
 
+export function TrendingTopicsPrompt({
+  control,
+  onConfirm,
+}: {
+  control: Prompt.PromptControlProps
+  onConfirm: () => void
+}) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+
+  return (
+    <Prompt.Outer control={control} testID="trendingTopicsPrompt">
+      <Prompt.Content>
+        <Prompt.TitleText>
+          <Trans>Trending topics</Trans>
+        </Prompt.TitleText>
+        <Prompt.DescriptionText>
+          <Trans>
+            Trending topics are based on what people are talking about on the
+            network. Topic titles and descriptions are generated with AI.
+          </Trans>
+        </Prompt.DescriptionText>
+      </Prompt.Content>
+      <Prompt.Actions>
+        <Prompt.Action
+          cta={l`Hide trending topics`}
+          color="secondary"
+          onPress={onConfirm}
+        />
+        <Text
+          style={[
+            a.text_sm,
+            IS_WEB ? a.text_left : a.text_center,
+            t.atoms.text_contrast_medium,
+            a.py_xs,
+          ]}>
+          <Trans>You can update this later from your settings.</Trans>
+        </Text>
+        <Prompt.Cancel cta={l`Close`} />
+      </Prompt.Actions>
+    </Prompt.Outer>
+  )
+}
+
 export function TrendingTopicLink({
   topic: raw,
   metricContext,

src/components/interstitials/FeedTrendingTopics.tsx

@@ -26,7 +26,10 @@ import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/ic
 import {Link} from '#/components/Link'
 import * as Prompt from '#/components/Prompt'
 import {SubtleHover} from '#/components/SubtleHover'
-import {useTrendingTopicSeen} from '#/components/TrendingTopics'
+import {
+  TrendingTopicsPrompt,
+  useTrendingTopicSeen,
+} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 import {type app} from '#/lexicons'
@@ -162,11 +165,8 @@ function Inner({feedSliceIndex}: {feedSliceIndex: number}) {
           </View>
         </View>
       </View>
-      <Prompt.Basic
+      <TrendingTopicsPrompt
         control={trendingPrompt}
-        title={l`Hide trending topics?`}
-        description={l`You can update this later from your settings.`}
-        confirmButtonCta={l`Hide`}
         onConfirm={() => {
           ax.metric('trendingTopics:hide', {context: 'interstitial'})
           setTrendingDisabled(true)

src/screens/Search/modules/ExploreTrendingTopics.tsx

@@ -24,7 +24,10 @@ import {Link} from '#/components/Link'
 import * as Prompt from '#/components/Prompt'
 import {RichText} from '#/components/RichText'
 import {SubtleHover} from '#/components/SubtleHover'
-import {useTrendingTopicSeen} from '#/components/TrendingTopics'
+import {
+  TrendingTopicsPrompt,
+  useTrendingTopicSeen,
+} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 import {type app} from '#/lexicons'
@@ -97,11 +100,8 @@ function Inner() {
             })}
       </View>
 
-      <Prompt.Basic
+      <TrendingTopicsPrompt
         control={trendingPrompt}
-        title={l`Hide trending topics?`}
-        description={l`You can update this later from your settings.`}
-        confirmButtonCta={l`Hide`}
         onConfirm={() => {
           ax.metric('trendingTopics:hide', {context: 'explore:trending'})
           setTrendingDisabled(true)

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -16,7 +16,10 @@ import {DotGrid3x1_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/i
 import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending'
 import {Link} from '#/components/Link'
 import * as Prompt from '#/components/Prompt'
-import {TrendingTopicLink} from '#/components/TrendingTopics'
+import {
+  TrendingTopicLink,
+  TrendingTopicsPrompt,
+} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 
@@ -166,11 +169,8 @@ function Inner() {
           )}
         </View>
       </View>
-      <Prompt.Basic
+      <TrendingTopicsPrompt
         control={trendingPrompt}
-        title={l`Hide trending topics?`}
-        description={l`You can update this later from your settings.`}
-        confirmButtonCta={l`Hide`}
         onConfirm={onConfirmHide}
       />
     </>