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

1 files changed, 57 insertions, 74 deletions

diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx
index 153f08aaa..1da361ef7 100644
--- a/src/components/interstitials/Trending.tsx
+++ b/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 {
-  DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
-  useTrendingTopics,
-} from '#/state/queries/trending/useTrendingTopics'
+import {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 {
-  TrendingTopic,
-  TrendingTopicLink,
-  TrendingTopicSkeleton,
-} from '#/components/TrendingTopics'
+import {TrendingTopicLink} 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
-      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]}>
-            <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 style={[t.atoms.border_contrast_low, a.border_t]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        decelerationRate="fast">
+        <View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}>
+          <View style={{paddingLeft: 4, paddingRight: 2}}>
+            <Graph size="sm" />
           </View>
-        </View>
-
-        <Button
-          label={_(msg`Hide trending topics`)}
-          size="tiny"
-          variant="outline"
-          color="secondary"
-          shape="round"
-          onPress={() => trendingPrompt.open()}>
-          <ButtonIcon icon={X} />
-        </Button>
-      </View>
-
-      <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
+          {isLoading ? (
+            <View style={[a.py_lg]}>
+              <Text
+                style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
+                {' '}
+              </Text>
+            </View>
+          ) : !trending?.topics ? null : (
+            <>
+              {trending.topics.map(topic => (
+                <>
+                  <TrendingTopicLink
+                    key={topic.link}
                     topic={topic}
-                    style={[
-                      hovered && [
-                        t.atoms.border_contrast_high,
-                        t.atoms.bg_contrast_25,
-                      ],
-                    ]}
-                  />
-                )}
-              </TrendingTopicLink>
-            ))}
-          </>
-        )}
-      </View>
+                    onPress={() => {
+                      logEvent('trendingTopic:click', {context: 'interstitial'})
+                    }}>
+                    <View style={[a.py_lg]}>
+                      <Text
+                        style={[
+                          t.atoms.text,
+                          a.text_sm,
+                          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}
+                      </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}