Rework discover-feed trending interstitial (#7314)

* Rework discover-feed trending interstitial to take one row

* Fix loading state

* Try putting it at the top

* Color consistency

* Tweak some spacing

* Show trending when progress guide is there

src/components/hooks/useHeaderOffset.ts

@@ -12,5 +12,5 @@ export function useHeaderOffset() {
   const tabBarPad = 10 + 10 + 3 // padding + border
   const normalLineHeight = 20 // matches tab bar
   const tabBarText = normalLineHeight * fontScale
-  return navBarHeight + tabBarPad + tabBarText
+  return navBarHeight + tabBarPad + tabBarText - 4 // for some reason, this calculation is wrong by 4 pixels, which we adjust
 }

src/components/interstitials/Trending.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
+import {ScrollView} from 'react-native-gesture-handler'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {logEvent} from '#/lib/statsig/statsig'
@@ -8,22 +9,14 @@ import {
   useTrendingSettings,
   useTrendingSettingsApi,
 } from '#/state/preferences/trending'
-import {
+import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
-  DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
-  useTrendingTopics,
-} from '#/state/queries/trending/useTrendingTopics'
 import {useTrendingConfig} from '#/state/trending-config'
-import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
+import {atoms as a, 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 {
+import {TrendingTopicLink} from '#/components/TrendingTopics'
-  TrendingTopic,
-  TrendingTopicLink,
-  TrendingTopicSkeleton,
-} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 
 export function TrendingInterstitial() {
@@ -35,7 +28,7 @@ export function TrendingInterstitial() {
 export function Inner() {
   const t = useTheme()
   const {_} = useLingui()
-  const gutters = useGutters(['wide', 'base'])
+  const gutters = useGutters([0, 'base', 0, 'base'])
   const trendingPrompt = Prompt.usePromptControl()
   const {setTrendingDisabled} = useTrendingSettingsApi()
   const {data: trending, error, isLoading} = useTrendingTopics()
@@ -47,69 +40,59 @@ export function Inner() {
   }, [setTrendingDisabled])
 
   return error || noTopics ? null : (
-    <View
+    <View style={[t.atoms.border_contrast_low, a.border_t]}>
-      style={[
+      <ScrollView
-        gutters,
+        horizontal
-        a.gap_lg,
+        showsHorizontalScrollIndicator={false}
-        a.border_t,
+        decelerationRate="fast">
-        t.atoms.border_contrast_low,
+        <View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}>
-        t.atoms.bg_contrast_25,
+          <View style={{paddingLeft: 4, paddingRight: 2}}>
-      ]}>
+            <Graph size="sm" />
-      <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]}>
-            <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_sm, a.font_heavy, {color: 'white'}]}>
-              <Trans>BETA</Trans>
-            </Text>
           </View>
-        </View>
+          {isLoading ? (
-
+            <View style={[a.py_lg]}>
-        <Button
+              <Text
-          label={_(msg`Hide trending topics`)}
+                style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
-          size="tiny"
+                {' '}
-          variant="outline"
+              </Text>
-          color="secondary"
+            </View>
-          shape="round"
+          ) : !trending?.topics ? null : (
-          onPress={() => trendingPrompt.open()}>
+            <>
-          <ButtonIcon icon={X} />
+              {trending.topics.map(topic => (
-        </Button>
+                <>
-      </View>
+                  <TrendingTopicLink
-
+                    key={topic.link}
-      <View style={[a.flex_row, a.flex_wrap, {rowGap: 8, columnGap: 6}]}>
-        {isLoading ? (
-          Array(TRENDING_TOPICS_COUNT)
-            .fill(0)
-            .map((_n, i) => <TrendingTopicSkeleton key={i} index={i} />)
-        ) : !trending?.topics ? null : (
-          <>
-            {trending.topics.map(topic => (
-              <TrendingTopicLink
-                key={topic.link}
-                topic={topic}
-                onPress={() => {
-                  logEvent('trendingTopic:click', {context: 'interstitial'})
-                }}>
-                {({hovered}) => (
-                  <TrendingTopic
                     topic={topic}
-                    style={[
+                    onPress={() => {
-                      hovered && [
+                      logEvent('trendingTopic:click', {context: 'interstitial'})
-                        t.atoms.border_contrast_high,
+                    }}>
-                        t.atoms.bg_contrast_25,
+                    <View style={[a.py_lg]}>
-                      ],
+                      <Text
-                    ]}
+                        style={[
-                  />
+                          t.atoms.text,
-                )}
+                          a.text_sm,
-              </TrendingTopicLink>
+                          a.font_bold,
-            ))}
+                          {opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
-          </>
+                        ]}>
-        )}
+                        {topic.topic}
-      </View>
+                      </Text>
+                    </View>
+                  </TrendingTopicLink>
+                </>
+              ))}
+              <Button
+                label={_(msg`Hide trending topics`)}
+                size="tiny"
+                variant="ghost"
+                color="secondary"
+                shape="round"
+                onPress={() => trendingPrompt.open()}>
+                <ButtonIcon icon={X} />
+              </Button>
+            </>
+          )}
+        </View>
+      </ScrollView>
 
       <Prompt.Basic
         control={trendingPrompt}

src/view/com/posts/PostFeed.tsx

@@ -309,20 +309,19 @@ let PostFeed = ({
 
             if (hasSession) {
               if (feedKind === 'discover') {
-                if (sliceIndex === 0 && showProgressIntersitial) {
+                if (sliceIndex === 0) {
-                  arr.push({
+                  if (showProgressIntersitial) {
-                    type: 'interstitialProgressGuide',
+                    arr.push({
-                    key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
+                      type: 'interstitialProgressGuide',
-                  })
+                      key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
-                } else if (
+                    })
-                  sliceIndex === 15 &&
+                  }
-                  !gtTablet &&
+                  if (!gtTablet && !trendingDisabled) {
-                  !trendingDisabled
+                    arr.push({
-                ) {
+                      type: 'interstitialTrending',
-                  arr.push({
+                      key: 'interstitial2-' + sliceIndex + '-' + lastFetchedAt,
-                    type: 'interstitialTrending',
+                    })
-                    key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
+                  }
-                  })
                 } else if (sliceIndex === 30) {
                   arr.push({
                     type: 'interstitialFollows',