2 files changed, 52 insertions, 42 deletions

diff --git a/src/components/StarterPack/StarterPackCard.tsx b/src/components/StarterPack/StarterPackCard.tsx
index 22e0a155a..2a9da509d 100644
--- a/src/components/StarterPack/StarterPackCard.tsx
+++ b/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
diff --git a/src/components/TrendingTopics.tsx b/src/components/TrendingTopics.tsx
index 271d83aa6..a1de5d490 100644
--- a/src/components/TrendingTopics.tsx
+++ b/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,
+      }
     }
 
     /*