Explain trending topics in options menu

src/components/TrendingTopics.tsx

@@ -1,16 +1,62 @@
 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 {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,
+            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/locale/locales/en/messages.po

@@ -2419,15 +2419,15 @@ msgstr ""
 msgid "Browse other feeds"
 msgstr ""
 
-#: src/components/TrendingTopics.tsx:88
+#: src/components/TrendingTopics.tsx:134
 msgid "Browse posts about {displayName}"
 msgstr ""
 
-#: src/components/TrendingTopics.tsx:96
+#: src/components/TrendingTopics.tsx:142
 msgid "Browse posts tagged with {displayName}"
 msgstr ""
 
-#: src/components/TrendingTopics.tsx:105
+#: src/components/TrendingTopics.tsx:151
 msgid "Browse starter pack {displayName}"
 msgstr ""
 
@@ -2437,7 +2437,7 @@ msgstr ""
 msgid "Browse topic {0}"
 msgstr ""
 
-#: src/components/TrendingTopics.tsx:142
+#: src/components/TrendingTopics.tsx:188
 msgid "Browse topic {displayName}"
 msgstr ""
 
@@ -3026,6 +3026,7 @@ msgstr ""
 #: src/components/ProgressGuide/FollowDialog.tsx:462
 #: src/components/StarterPack/Wizard/WizardEditListDialog.tsx:119
 #: src/components/StarterPack/Wizard/WizardEditListDialog.tsx:125
+#: src/components/TrendingTopics.tsx:54
 #: src/components/verification/VerificationsDialog.tsx:146
 #: src/components/verification/VerifierDialog.tsx:147
 #: src/components/WhoCanReply.tsx:229
@@ -6161,7 +6162,6 @@ msgstr ""
 msgid "Hidden list"
 msgstr ""
 
-#: src/components/interstitials/FeedTrendingTopics.tsx:169
 #: src/components/interstitials/Trending.tsx:149
 #: src/components/interstitials/TrendingVideos.tsx:140
 #: src/components/moderation/ContentHider.tsx:217
@@ -6172,8 +6172,6 @@ msgstr ""
 #: src/lib/moderation/useLabelBehaviorDescription.ts:23
 #: src/lib/moderation/useLabelBehaviorDescription.ts:28
 #: src/lib/moderation/useLabelBehaviorDescription.ts:33
-#: src/screens/Search/modules/ExploreTrendingTopics.tsx:104
-#: src/view/shell/desktop/SidebarTrendingTopics.tsx:173
 msgid "Hide"
 msgstr ""
 
@@ -6239,13 +6237,11 @@ msgid "Hide translation"
 msgstr "Hide translation"
 
 #: src/components/interstitials/Trending.tsx:131
+#: src/components/TrendingTopics.tsx:41
 msgid "Hide trending topics"
 msgstr ""
 
-#: src/components/interstitials/FeedTrendingTopics.tsx:167
 #: src/components/interstitials/Trending.tsx:147
-#: src/screens/Search/modules/ExploreTrendingTopics.tsx:102
-#: src/view/shell/desktop/SidebarTrendingTopics.tsx:171
 msgid "Hide trending topics?"
 msgstr ""
 
@@ -10830,8 +10826,8 @@ msgstr ""
 
 #: src/components/FeedInterstitials.tsx:495
 #: src/components/FeedInterstitials.tsx:554
-#: src/components/interstitials/FeedTrendingTopics.tsx:113
+#: src/components/interstitials/FeedTrendingTopics.tsx:116
-#: src/view/shell/desktop/SidebarTrendingTopics.tsx:80
+#: src/view/shell/desktop/SidebarTrendingTopics.tsx:83
 msgid "See more"
 msgstr ""
 
@@ -10839,8 +10835,8 @@ msgstr ""
 msgid "See more suggested profiles"
 msgstr ""
 
-#: src/components/interstitials/FeedTrendingTopics.tsx:99
+#: src/components/interstitials/FeedTrendingTopics.tsx:102
-#: src/view/shell/desktop/SidebarTrendingTopics.tsx:66
+#: src/view/shell/desktop/SidebarTrendingTopics.tsx:69
 msgid "See more trending topics"
 msgstr "See more trending topics"
 
@@ -13083,9 +13079,9 @@ msgstr "Translation to the same language is unavailable on your device."
 msgid "Tree view"
 msgstr ""
 
-#: src/components/interstitials/FeedTrendingTopics.tsx:95
+#: src/components/interstitials/FeedTrendingTopics.tsx:98
-#: src/screens/Search/modules/ExploreTrendingTopics.tsx:69
+#: src/screens/Search/modules/ExploreTrendingTopics.tsx:72
-#: src/view/shell/desktop/SidebarTrendingTopics.tsx:63
+#: src/view/shell/desktop/SidebarTrendingTopics.tsx:66
 msgid "Trending"
 msgstr ""
 
@@ -13094,12 +13090,20 @@ msgstr ""
 msgid "Trending GIFs"
 msgstr "Trending GIFs"
 
-#: src/components/interstitials/FeedTrendingTopics.tsx:122
+#: src/components/interstitials/FeedTrendingTopics.tsx:125
-#: src/screens/Search/modules/ExploreTrendingTopics.tsx:72
+#: src/screens/Search/modules/ExploreTrendingTopics.tsx:75
-#: src/view/shell/desktop/SidebarTrendingTopics.tsx:90
+#: src/view/shell/desktop/SidebarTrendingTopics.tsx:93
 msgid "Trending options"
 msgstr ""
 
+#: src/components/TrendingTopics.tsx:30
+msgid "Trending topics"
+msgstr "Trending topics"
+
+#: src/components/TrendingTopics.tsx:33
+msgid "Trending topics are based on what people are talking about on the network. Topic titles and descriptions are generated with AI."
+msgstr "Trending topics are based on what people are talking about on the network. Topic titles and descriptions are generated with AI."
+
 #: src/components/interstitials/TrendingVideos.tsx:88
 msgid "Trending videos"
 msgstr "Trending videos"
@@ -14658,11 +14662,9 @@ msgstr "You can read chat history but can’t send new messages."
 msgid "You can select up to {MAX_GALLERY_IMAGES, plural, other {# images}} in total."
 msgstr "You can select up to {MAX_GALLERY_IMAGES, plural, other {# images}} in total."
 
-#: src/components/interstitials/FeedTrendingTopics.tsx:168
 #: src/components/interstitials/Trending.tsx:148
 #: src/components/interstitials/TrendingVideos.tsx:139
-#: src/screens/Search/modules/ExploreTrendingTopics.tsx:103
+#: src/components/TrendingTopics.tsx:52
-#: src/view/shell/desktop/SidebarTrendingTopics.tsx:172
 msgid "You can update this later from your settings."
 msgstr ""
 

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}
       />
     </>