diff --git a/src/components/TrendingTopics.tsx b/src/components/TrendingTopics.tsx
index a067545369..4f3239b289 100644
--- a/src/components/TrendingTopics.tsx
+++ b/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 (
+
+
+
+ Trending topics
+
+
+
+ Trending topics are based on what people are talking about on the
+ network. Topic titles and descriptions are generated with AI.
+
+
+
+
+
+
+ You can update this later from your settings.
+
+
+
+
+ )
+}
+
export function TrendingTopicLink({
topic: raw,
metricContext,
diff --git a/src/components/interstitials/FeedTrendingTopics.tsx b/src/components/interstitials/FeedTrendingTopics.tsx
index 4d3d9fb0fa..e4e81287b9 100644
--- a/src/components/interstitials/FeedTrendingTopics.tsx
+++ b/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}) {
- {
ax.metric('trendingTopics:hide', {context: 'interstitial'})
setTrendingDisabled(true)
diff --git a/src/screens/Search/modules/ExploreTrendingTopics.tsx b/src/screens/Search/modules/ExploreTrendingTopics.tsx
index 6bbb6e1e54..e8bfeed54a 100644
--- a/src/screens/Search/modules/ExploreTrendingTopics.tsx
+++ b/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() {
})}
- {
ax.metric('trendingTopics:hide', {context: 'explore:trending'})
setTrendingDisabled(true)
diff --git a/src/view/shell/desktop/SidebarTrendingTopics.tsx b/src/view/shell/desktop/SidebarTrendingTopics.tsx
index 7d0c60fbc1..25f2510798 100644
--- a/src/view/shell/desktop/SidebarTrendingTopics.tsx
+++ b/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() {
)}
-
>