Add new interstitial to Discover

src/components/GradientFill.tsx

@@ -1,10 +1,11 @@
 import {LinearGradient} from 'expo-linear-gradient'
 
-import {atoms as a, tokens} from '#/alf'
+import {atoms as a, tokens, ViewStyleProp} from '#/alf'
 
 export function GradientFill({
   gradient,
-}: {
+  style,
+}: ViewStyleProp & {
   gradient:
     | typeof tokens.gradients.primary
     | typeof tokens.gradients.sky
@@ -27,7 +28,7 @@ export function GradientFill({
       }
       start={{x: 0, y: 0}}
       end={{x: 1, y: 1}}
-      style={[a.absolute, a.inset_0]}
+      style={[a.absolute, a.inset_0, style]}
     />
   )
 }

src/components/TrendingTopics.tsx

@@ -16,6 +16,7 @@ export function TopicLarge({topic, style}: {topic: string} & ViewStyleProp) {
         a.rounded_md,
         a.border,
         t.atoms.border_contrast_medium,
+        t.atoms.bg,
         style,
       ]}>
       <Text
@@ -37,6 +38,7 @@ export function TopicSmall({topic, style}: {topic: string} & ViewStyleProp) {
         a.rounded_sm,
         a.border,
         t.atoms.border_contrast_medium,
+        t.atoms.bg,
         style,
       ]}>
       <Text

src/components/interstitials/Trending.tsx

@@ -0,0 +1,84 @@
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useTrendingSettingsApi} from '#/state/preferences/trending'
+import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {GradientFill} from '#/components/GradientFill'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
+import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
+import * as Prompt from '#/components/Prompt'
+import * as Trending from '#/components/TrendingTopics'
+import {Text} from '#/components/Typography'
+
+export function TrendingInterstitial() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const gutters = useGutters(['base'])
+  const trendingPrompt = Prompt.usePromptControl()
+
+  const {setTrendingDiscoverHidden} = useTrendingSettingsApi()
+
+  return (
+    <View
+      style={[
+        gutters,
+        a.gap_lg,
+        a.border_t,
+        t.atoms.border_contrast_low,
+        t.atoms.bg_contrast_25,
+      ]}>
+      <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+        <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
+          <Graph size="lg" />
+          <Text style={[a.text_lg, a.font_heavy, t.atoms.text_contrast_medium]}>
+            <Trans>Trending</Trans>
+          </Text>
+          <View style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
+            <GradientFill gradient={tokens.gradients.primary} />
+            <Text style={[a.text_md, a.font_heavy]}>BETA</Text>
+          </View>
+        </View>
+
+        <Button
+          label={_(msg`Hide trending topics from your feed`)}
+          size="tiny"
+          variant="outline"
+          color="secondary"
+          shape="round"
+          onPress={() => trendingPrompt.open()}>
+          <ButtonIcon icon={X} />
+        </Button>
+      </View>
+
+      <View style={[a.flex_row, a.flex_wrap, a.gap_sm]}>
+        {Trending.TOPICS.slice(0, 8).map(topic => (
+          <Trending.Link key={topic} topic={topic}>
+            {({hovered}) => (
+              <Trending.TopicLarge
+                topic={topic}
+                style={[
+                  hovered && [
+                    t.atoms.border_contrast_high,
+                    t.atoms.bg_contrast_25,
+                  ],
+                ]}
+              />
+            )}
+          </Trending.Link>
+        ))}
+      </View>
+
+      <Prompt.Basic
+        control={trendingPrompt}
+        title={_(msg`Hide trending topics in your feed?`)}
+        description={_(
+          msg`This is a device setting, and will apply to all accounts on this device. You can update this later from your settings.`,
+        )}
+        confirmButtonCta={_(msg`Hide`)}
+        onConfirm={() => setTrendingDiscoverHidden(true)}
+      />
+    </View>
+  )
+}

src/screens/Settings/ContentAndMediaSettings.tsx

@@ -34,8 +34,9 @@ export function ContentAndMediaSettingsScreen({}: Props) {
   const setAutoplayDisabledPref = useSetAutoplayDisabled()
   const inAppBrowserPref = useInAppBrowser()
   const setUseInAppBrowser = useSetInAppBrowser()
-  const {trendingSidebarHidden} = useTrendingSettings()
-  const {setTrendingSidebarHidden} = useTrendingSettingsApi()
+  const {trendingSidebarHidden, trendingDiscoverHidden} = useTrendingSettings()
+  const {setTrendingSidebarHidden, setTrendingDiscoverHidden} =
+    useTrendingSettingsApi()
 
   return (
     <Layout.Screen>
@@ -111,24 +112,35 @@ export function ContentAndMediaSettingsScreen({}: Props) {
               <Toggle.Platform />
             </SettingsList.Item>
           </Toggle.Item>
+          <SettingsList.Divider />
           {!isNative && (
-            <>
-              <SettingsList.Divider />
-              <Toggle.Item
-                name="show_trending_topics"
-                label={_(msg`Show trending topics in your sidebar`)}
-                value={!trendingSidebarHidden}
-                onChange={value => setTrendingSidebarHidden(!value)}>
-                <SettingsList.Item>
-                  <SettingsList.ItemIcon icon={Graph} />
-                  <SettingsList.ItemText>
-                    <Trans>Show trending topics in your sidebar</Trans>
-                  </SettingsList.ItemText>
-                  <Toggle.Platform />
-                </SettingsList.Item>
-              </Toggle.Item>
-            </>
+            <Toggle.Item
+              name="show_trending_topics_sidebar"
+              label={_(msg`Show trending topics in your sidebar`)}
+              value={!trendingSidebarHidden}
+              onChange={value => setTrendingSidebarHidden(!value)}>
+              <SettingsList.Item>
+                <SettingsList.ItemIcon icon={Graph} />
+                <SettingsList.ItemText>
+                  <Trans>Show trending topics in your sidebar</Trans>
+                </SettingsList.ItemText>
+                <Toggle.Platform />
+              </SettingsList.Item>
+            </Toggle.Item>
           )}
+          <Toggle.Item
+            name="show_trending_topics_discover"
+            label={_(msg`Show trending topics in your feed`)}
+            value={!trendingDiscoverHidden}
+            onChange={value => setTrendingDiscoverHidden(!value)}>
+            <SettingsList.Item>
+              <SettingsList.ItemIcon icon={Graph} />
+              <SettingsList.ItemText>
+                <Trans>Show trending topics in your feed</Trans>
+              </SettingsList.ItemText>
+              <Toggle.Platform />
+            </SettingsList.Item>
+          </Toggle.Item>
         </SettingsList.Container>
       </Layout.Content>
     </Layout.Screen>

src/view/com/posts/PostFeed.tsx

@@ -23,6 +23,7 @@ import {logger} from '#/logger'
 import {isIOS, isWeb} from '#/platform/detection'
 import {listenPostCreated} from '#/state/events'
 import {useFeedFeedbackContext} from '#/state/feed-feedback'
+import {useTrendingSettings} from '#/state/preferences/trending'
 import {STALE} from '#/state/queries'
 import {
   FeedDescriptor,
@@ -35,6 +36,7 @@ import {
 import {useSession} from '#/state/session'
 import {useProgressGuide} from '#/state/shell/progress-guide'
 import {ProgressGuide, SuggestedFollows} from '#/components/FeedInterstitials'
+import {TrendingInterstitial} from '#/components/interstitials/Trending'
 import {List, ListRef} from '../util/List'
 import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
@@ -90,6 +92,10 @@ type FeedRow =
       type: 'interstitialProgressGuide'
       key: string
     }
+  | {
+      type: 'interstitialTrending'
+      key: string
+    }
 
 export function getFeedPostSlice(feedRow: FeedRow): FeedPostSlice | null {
   if (feedRow.type === 'sliceItem') {
@@ -258,6 +264,8 @@ let PostFeed = ({
   const {isDesktop} = useWebMediaQueries()
   const showProgressIntersitial = progressGuide && !isDesktop
 
+  const {trendingDiscoverHidden} = useTrendingSettings()
+
   const feedItems: FeedRow[] = React.useMemo(() => {
     let feedKind: 'following' | 'discover' | 'profile' | undefined
     if (feedType === 'following') {
@@ -303,7 +311,12 @@ let PostFeed = ({
                     type: 'interstitialProgressGuide',
                     key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
                   })
-                } else if (sliceIndex === 20) {
+                } else if (sliceIndex === 15 && !trendingDiscoverHidden) {
+                  arr.push({
+                    type: 'interstitialTrending',
+                    key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
+                  })
+                } else if (sliceIndex === 30) {
                   arr.push({
                     type: 'interstitialFollows',
                     key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
@@ -389,6 +402,7 @@ let PostFeed = ({
     feedTab,
     hasSession,
     showProgressIntersitial,
+    trendingDiscoverHidden,
   ])
 
   // events
@@ -475,6 +489,8 @@ let PostFeed = ({
         return <SuggestedFollows feed={feed} />
       } else if (row.type === 'interstitialProgressGuide') {
         return <ProgressGuide />
+      } else if (row.type === 'interstitialTrending') {
+        return <TrendingInterstitial />
       } else if (row.type === 'sliceItem') {
         const slice = row.slice
         if (slice.isFallbackMarker) {