Special treatment for recommended starter packs (#7706)

* special treatment for recommended starter packs

* update subtitle when SPs in recommended

* fix item height

src/components/StarterPack/StarterPackCard.tsx

@@ -12,7 +12,7 @@ import {precacheResolvedUri} from '#/state/queries/resolve-uri'
 import {precacheStarterPack} from '#/state/queries/starter-packs'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {StarterPack} from '#/components/icons/StarterPack'
+import {StarterPack as StarterPackIcon} from '#/components/icons/StarterPack'
 import {Link as BaseLink, LinkProps as BaseLinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
@@ -64,7 +64,7 @@ export function Card({
   return (
     <View style={[a.w_full, a.gap_md]}>
       <View style={[a.flex_row, a.gap_sm, a.w_full]}>
-        {!noIcon ? <StarterPack width={40} gradient="sky" /> : null}
+        {!noIcon ? <StarterPackIcon width={40} gradient="sky" /> : null}
         <View style={[a.flex_1]}>
           <Text
             emoji

src/components/TrendingTopics.tsx

@@ -12,6 +12,7 @@ import {PressableScale} from '#/lib/custom-animations/PressableScale'
 // import {UserAvatar} from '#/view/com/util/UserAvatar'
 import type {TrendingTopic} from '#/state/queries/trending/useTrendingTopics'
 import {atoms as a, native, useTheme, ViewStyleProp} from '#/alf'
+import {StarterPack as StarterPackIcon} from '#/components/icons/StarterPack'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
@@ -24,9 +25,8 @@ export function TrendingTopic({
   const topic = useTopic(raw)
 
   const isSmall = size === 'small'
-  // const hasAvi = topic.type === 'feed' || topic.type === 'profile'
-  // const aviSize = isSmall ? 16 : 20
-  // const iconSize = isSmall ? 16 : 20
+  const hasIcon = topic.type === 'starter-pack' && !isSmall
+  const iconSize = 20
 
   return (
     <View
@@ -45,45 +45,47 @@ export function TrendingTopic({
               },
             ]
           : [a.py_sm, a.px_md],
+        hasIcon && {gap: 6},
         style,
-        /*
-        {
-          padding: 6,
-          gap: hasAvi ? 4 : 2,
-        },
-        a.pr_md,
-       */
       ]}>
+      {hasIcon && topic.type === 'starter-pack' && (
+        <StarterPackIcon
+          gradient="sky"
+          width={iconSize}
+          style={{marginLeft: -3, marginVertical: -1}}
+        />
+      )}
+
       {/*
-      <View
-        style={[
-          a.align_center,
-          a.justify_center,
-          a.rounded_full,
-          a.overflow_hidden,
-          {
-            width: aviSize,
-            height: aviSize,
-          },
-        ]}>
-        {topic.type === 'tag' ? (
-          <Hashtag width={iconSize} />
-        ) : topic.type === 'topic' ? (
-          <Quote width={iconSize - 2} />
-        ) : topic.type === 'feed' ? (
-          <UserAvatar
-            type="user"
-            size={aviSize}
-            avatar=""
-          />
-        ) : (
-          <UserAvatar
-            type="user"
-            size={aviSize}
-            avatar=""
-          />
-        )}
-      </View>
+        <View
+          style={[
+            a.align_center,
+            a.justify_center,
+            a.rounded_full,
+            a.overflow_hidden,
+            {
+              width: iconSize,
+              height: iconSize,
+            },
+          ]}>
+          {topic.type === 'tag' ? (
+            <Hashtag width={iconSize} />
+          ) : topic.type === 'topic' ? (
+            <Quote width={iconSize - 2} />
+          ) : topic.type === 'feed' ? (
+            <UserAvatar
+              type="user"
+              size={aviSize}
+              avatar=""
+            />
+          ) : (
+            <UserAvatar
+              type="user"
+              size={aviSize}
+              avatar=""
+            />
+          )}
+        </View>
         */}
 
       <Text
@@ -151,7 +153,7 @@ export function TrendingTopicLink({
 
 type ParsedTrendingTopic =
   | {
-      type: 'topic' | 'tag' | 'unknown'
+      type: 'topic' | 'tag' | 'starter-pack' | 'unknown'
       label: string
       displayName: string
       url: string
@@ -187,6 +189,14 @@ export function useTopic(raw: TrendingTopic): ParsedTrendingTopic {
         uri: undefined,
         url: link,
       }
+    } else if (link.startsWith('/starter-pack')) {
+      return {
+        type: 'starter-pack',
+        label: _(msg`Browse starter pack ${displayName}`),
+        displayName,
+        uri: undefined,
+        url: link,
+      }
     }
 
     /*

src/screens/Search/components/ExploreRecommendations.tsx

@@ -1,4 +1,5 @@
 import {View} from 'react-native'
+import {AppBskyUnspeccedDefs} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
 import {logEvent} from '#/lib/statsig/statsig'
@@ -27,6 +28,7 @@ function Inner() {
   const gutters = useGutters([0, 'compact'])
   const {data: trending, error, isLoading} = useTrendingTopics()
   const noRecs = !isLoading && !error && !trending?.suggested?.length
+  const allFeeds = trending?.suggested && isAllFeeds(trending.suggested)
 
   return error || noRecs ? null : (
     <>
@@ -50,9 +52,17 @@ function Inner() {
               <Trans>Recommended</Trans>
             </Text>
           </View>
-          <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
-            <Trans>Feeds we think you might like.</Trans>
-          </Text>
+          {!allFeeds ? (
+            <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
+              <Trans>
+                Content from across the network we think you might like.
+              </Trans>
+            </Text>
+          ) : (
+            <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
+              <Trans>Feeds we think you might like.</Trans>
+            </Text>
+          )}
         </View>
       </View>
 
@@ -98,3 +108,10 @@ function Inner() {
     </>
   )
 }
+
+function isAllFeeds(topics: AppBskyUnspeccedDefs.TrendingTopic[]) {
+  return topics.every(topic => {
+    const segments = topic.link.split('/').slice(1)
+    return segments[0] === 'profile' && segments[2] === 'feed'
+  })
+}