Improve explore treatment a bit, add some polish to cards

src/components/GradientFill.tsx

@@ -6,6 +6,7 @@ export function GradientFill({
   gradient,
 }: {
   gradient:
+    | typeof tokens.gradients.primary
     | typeof tokens.gradients.sky
     | typeof tokens.gradients.midnight
     | typeof tokens.gradients.sunrise

src/components/TrendingTopics.tsx

@@ -2,42 +2,25 @@ import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useGutters, useTheme, ViewStyleProp} from '#/alf'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
-export function Grid({topics}: {topics: string[]}) {
+export function Topic({topic, style}: {topic: string} & ViewStyleProp) {
-  return (
-    <View style={[a.flex_row, a.flex_wrap, a.gap_sm, a.px_sm, a.py_sm]}>
-      {topics.map(topic => (
-        <Item key={topic} topic={topic} />
-      ))}
-    </View>
-  )
-}
-
-export function Item({topic}: {topic: string}) {
-  return (
-    <Link topic={topic}>
-      <Card topic={topic} />
-    </Link>
-  )
-}
-
-export function Card({topic}: {topic: string}) {
   const t = useTheme()
   return (
     <View
       style={[
-        a.flex_1,
+        a.p_sm,
-        a.gap_xs,
         a.px_md,
-        a.py_md,
+        a.rounded_md,
         a.border,
         t.atoms.border_contrast_medium,
-        a.rounded_md,
+        style,
       ]}>
-      <Topic topic={topic} />
+      <Text style={[a.text_md, a.font_bold, a.leading_snug]} numberOfLines={1}>
+        {topic}
+      </Text>
     </View>
   )
 }
@@ -65,15 +48,26 @@ export function Link({
   )
 }
 
-export function Topic({topic}: {topic: string}) {
+export function Grid({topics}: {topics: string[]}) {
+  const t = useTheme()
+  const gutters = useGutters([0, 'compact'])
   return (
-    <View style={[a.flex_1]}>
+    <View style={[a.flex_row, a.flex_wrap, a.gap_sm, gutters]}>
-      <Text
+      {topics.map(topic => (
-        emoji
+        <Link key={topic} topic={topic}>
-        style={[a.text_md, a.font_bold, a.leading_snug, a.self_start]}
+          {({hovered}) => (
-        numberOfLines={1}>
+            <Topic
-        {topic}
+              topic={topic}
-      </Text>
+              style={[
+                hovered && [
+                  t.atoms.border_contrast_high,
+                  t.atoms.bg_contrast_25,
+                ],
+              ]}
+            />
+          )}
+        </Link>
+      ))}
     </View>
   )
 }

src/view/screens/Search/Explore.tsx

@@ -25,9 +25,10 @@ import {
   ProfileCardFeedLoadingPlaceholder,
 } from '#/view/com/util/LoadingPlaceholder'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
+import {atoms as a, tokens,useTheme, ViewStyleProp} from '#/alf'
 import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
+import {GradientFill} from '#/components/GradientFill'
 import {ArrowBottom_Stroke2_Corner0_Rounded as ArrowBottom} from '#/components/icons/Arrow'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {Props as SVGIconProps} from '#/components/icons/common'
@@ -41,11 +42,13 @@ import {Text} from '#/components/Typography'
 
 function SuggestedItemsHeader({
   title,
+  titleChild,
   description,
   style,
   icon: Icon,
 }: {
   title: string
+  titleChild?: React.ReactNode
   description: string
   icon: React.ComponentType<SVGIconProps>
 } & ViewStyleProp) {
@@ -69,6 +72,7 @@ function SuggestedItemsHeader({
             style={{marginLeft: -2}}
           />
           <Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>{title}</Text>
+          {titleChild}
         </View>
         <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
           {description}
@@ -341,13 +345,6 @@ export function Explore() {
   const items = React.useMemo<ExploreScreenItems[]>(() => {
     const i: ExploreScreenItems[] = []
 
-    i.push({
-      type: 'header',
-      key: 'trending-topics-header',
-      title: _(msg`Trending (beta)`),
-      description: _(msg`What people are posting about now.`),
-      icon: Trending,
-    })
     i.push({
       type: 'trendingTopics',
       key: `trending-topics`,
@@ -598,7 +595,25 @@ export function Explore() {
           )
         }
         case 'trendingTopics': {
-          return <TrendingTopics.Grid topics={item.topics} />
+          return (
+            <>
+              <SuggestedItemsHeader
+                title={_(msg`Trending`)}
+                description={_(msg`What people are posting about now.`)}
+                icon={Trending}
+                titleChild={
+                  <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 style={[a.pt_md, a.pb_lg]}>
+                <TrendingTopics.Grid topics={item.topics} />
+              </View>
+            </>
+          )
         }
         case 'suggestedStarterPacks': {
           return (
@@ -680,7 +695,7 @@ export function Explore() {
         }
       }
     },
-    [t, moderationOpts],
+    [_, t, moderationOpts],
   )
 
   // note: actually not a screen, instead it's nested within