Add WIP UIs for trending topics and suggested starterpacks

src/components/StarterPack/Suggestions.tsx

@@ -0,0 +1,64 @@
+import {View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
+import {AppBskyGraphDefs} from '@atproto/api'
+
+import {logger} from '#/logger'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {atoms as a, useBreakpoints, web} from '#/alf'
+import {Embed} from './StarterPackCard'
+
+const DESKTOP_CARD_WIDTH = 400
+const MOBILE_CARD_WIDTH = 300
+
+export function Grid({
+  isSuggestionsLoading,
+  error,
+  starterPacks,
+}: {
+  isSuggestionsLoading: boolean
+  starterPacks: AppBskyGraphDefs.StarterPackViewBasic[]
+  error: Error | null
+}) {
+  const moderationOpts = useModerationOpts()
+  const {gtMobile} = useBreakpoints()
+  const width = gtMobile ? DESKTOP_CARD_WIDTH : MOBILE_CARD_WIDTH
+  const isLoading = isSuggestionsLoading || !moderationOpts
+  const maxLength = gtMobile ? 4 : 6
+
+  const content = isLoading ? (
+    Array(maxLength)
+      .fill(0)
+      .map((_, i) => (
+        <View
+          key={i}
+          style={[gtMobile && web([a.flex_0, {width: 'calc(50% - 6px)'}])]}>
+          {/* TODO <SuggestedFollowPlaceholder /> */}
+        </View>
+      ))
+  ) : error || !starterPacks.length ? null : (
+    <>
+      {starterPacks.slice(0, maxLength).map(starterPack => (
+        <View key={starterPack.uri} style={[{width}]}>
+          <Embed starterPack={starterPack} />
+        </View>
+      ))}
+    </>
+  )
+
+  if (error || (!isLoading && !starterPacks.length)) {
+    logger.debug(`Not enough starter packs to show suggested starter packs`)
+    return null
+  }
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      snapToInterval={width + a.gap_md.gap}
+      decelerationRate="fast">
+      <View style={[a.px_md, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}>
+        {content}
+      </View>
+    </ScrollView>
+  )
+}

src/components/TrendingTopics.tsx

@@ -0,0 +1,79 @@
+import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Link as InternalLink, LinkProps} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+export function Grid({topics}: {topics: string[]}) {
+  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.gap_xs,
+        a.px_md,
+        a.py_md,
+        a.border,
+        t.atoms.border_contrast_medium,
+        a.rounded_md,
+      ]}>
+      <Topic topic={topic} />
+    </View>
+  )
+}
+
+export function Link({
+  topic,
+  children,
+  style,
+  ...rest
+}: {
+  topic: string
+} & Omit<LinkProps, 'to' | 'label'>) {
+  const {_} = useLingui()
+  return (
+    <InternalLink
+      label={_(msg`Search posts that include ${topic}`)}
+      to={{
+        screen: 'Search',
+        params: {q: topic},
+      }}
+      style={[a.flex_col, style]}
+      {...rest}>
+      {children}
+    </InternalLink>
+  )
+}
+
+export function Topic({topic}: {topic: string}) {
+  return (
+    <View style={[a.flex_1]}>
+      <Text
+        emoji
+        style={[a.text_md, a.font_bold, a.leading_snug, a.self_start]}
+        numberOfLines={1}>
+        {topic}
+      </Text>
+    </View>
+  )
+}

src/view/screens/Search/Explore.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native'
 import {
   AppBskyActorDefs,
   AppBskyFeedDefs,
+  AppBskyGraphDefs,
   moderateProfile,
   ModerationDecision,
   ModerationOpts,
@@ -31,8 +32,12 @@ import {ArrowBottom_Stroke2_Corner0_Rounded as ArrowBottom} from '#/components/i
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
+import {PersonGroup_Stroke2_Corner2_Rounded as PersonGroup} from '#/components/icons/Person'
+import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending2'
 import {UserCircle_Stroke2_Corner0_Rounded as Person} from '#/components/icons/UserCircle'
 import {Loader} from '#/components/Loader'
+import * as StarterPackSuggestions from '#/components/StarterPack/Suggestions'
+import * as TrendingTopics from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 
 function SuggestedItemsHeader({
@@ -239,6 +244,16 @@ type ExploreScreenItems =
       style?: ViewStyleProp['style']
       icon: React.ComponentType<SVGIconProps>
     }
+  | {
+      type: 'trendingTopics'
+      key: string
+      topics: string[]
+    }
+  | {
+      type: 'suggestedStarterPacks'
+      key: string
+      starterPacks: AppBskyGraphDefs.StarterPackViewBasic[]
+    }
   | {
       type: 'profile'
       key: string
@@ -325,17 +340,108 @@ export function Explore() {
   ])
 
   const items = React.useMemo<ExploreScreenItems[]>(() => {
-    const i: ExploreScreenItems[] = [
-      {
-        type: 'header',
-        key: 'suggested-follows-header',
-        title: _(msg`Suggested accounts`),
-        description: _(
-          msg`Follow more accounts to get connected to your interests and build your network.`,
-        ),
-        icon: Person,
-      },
-    ]
+    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`,
+      topics: [
+        '#atproto',
+        'South Korea',
+        'Wired',
+        'Basket Weaving',
+        'Coup',
+        'Chappel Roan',
+        'the juice',
+        'Superman',
+        '#FCF',
+        'Open Web',
+      ],
+    })
+
+    i.push({
+      type: 'header',
+      key: 'starter-packs-header',
+      title: _(msg`Starter packs`),
+      description: _(msg`Find accounts to follow based on your interests.`),
+      icon: PersonGroup,
+    })
+    i.push({
+      type: 'suggestedStarterPacks',
+      key: 'suggested-starter-packs',
+      starterPacks: [
+        {
+          uri: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.graph.starterpack/3kvaphb2hpf2u',
+          cid: '',
+          indexedAt: '',
+          record: {
+            $type: 'app.bsky.graph.starterpack',
+            description:
+              'Engineers who work on or discuss the ATProtocol, both at Bluesky and in the community',
+            list: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.graph.list/3kvaphagg4e2l',
+            name: 'ATProtocol Hackers',
+          },
+          creator: {
+            did: 'did:plc:ragtjsm2j2vknwkz3zp4oxrd',
+            handle: 'pfrazee.com',
+            displayName: 'Paul Frazee',
+          },
+        },
+        {
+          uri: 'at://did:plc:qrllvid7s54k4hnwtqxwetrf/app.bsky.graph.starterpack/3kvuh7u324m2c',
+          cid: '',
+          indexedAt: '',
+          record: {
+            $type: 'app.bsky.graph.starterpack',
+            createdAt: '2024-06-26T23:23:01.073Z',
+            description:
+              'Legal practice, scholarship, journalism, and argument',
+            feeds: [],
+            list: 'at://did:plc:qrllvid7s54k4hnwtqxwetrf/app.bsky.graph.list/3kvuh7twnjc2m',
+            name: 'Bluesky for Law',
+          },
+          creator: {
+            did: 'did:plc:qrllvid7s54k4hnwtqxwetrf',
+            handle: 'joshuajfriedman.com',
+            displayName: 'Joshua J. Friedman',
+          },
+        },
+        {
+          uri: 'at://did:plc:7exlcsle4mjfhu3wnhcgizz6/app.bsky.graph.starterpack/3laotg2fqva2h',
+          cid: '',
+          indexedAt: '',
+          record: {
+            $type: 'app.bsky.graph.starterpack',
+            createdAt: '2024-11-11T17:22:22.743Z',
+            description: 'people who work at the website, the verge dot com',
+            list: 'at://did:plc:7exlcsle4mjfhu3wnhcgizz6/app.bsky.graph.list/3laotg2bjok2d',
+            name: 'The Verge staff',
+          },
+          creator: {
+            did: 'did:plc:7exlcsle4mjfhu3wnhcgizz6',
+            handle: 'theverge.com',
+            displayName: 'The Verge',
+          },
+        },
+      ],
+    })
+
+    i.push({
+      type: 'header',
+      key: 'suggested-follows-header',
+      title: _(msg`Suggested accounts`),
+      description: _(
+        msg`Follow more accounts to get connected to your interests and build your network.`,
+      ),
+      icon: Person,
+    })
 
     if (profiles) {
       // Currently the responses contain duplicate items.
@@ -490,6 +596,18 @@ export function Explore() {
             />
           )
         }
+        case 'trendingTopics': {
+          return <TrendingTopics.Grid topics={item.topics} />
+        }
+        case 'suggestedStarterPacks': {
+          return (
+            <StarterPackSuggestions.Grid
+              isSuggestionsLoading={false}
+              error={null}
+              starterPacks={item.starterPacks}
+            />
+          )
+        }
         case 'profile': {
           return (
             <View style={[a.border_b, t.atoms.border_contrast_low]}>