Exploration

src/components/TrendingTopics.tsx

@@ -1,10 +1,17 @@
+import React from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {AtUri} from '@atproto/api'
 
 import {atoms as a, useGutters, useTheme, ViewStyleProp} from '#/alf'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
+import {BSKY_APP_HOST, feedUriToHref} from '#/lib/strings/url-helpers'
+import {makeProfileLink, makeSearchLink} from '#/lib/routes/links'
+import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
+import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
 
 export function TopicLarge({topic, style}: {topic: string} & ViewStyleProp) {
   const t = useTheme()
@@ -50,6 +57,58 @@ export function TopicSmall({topic, style}: {topic: string} & ViewStyleProp) {
   )
 }
 
+export function Topic({
+  topic: raw,
+  size,
+  style,
+}: {topic: RawTopic; size?: 'large' | 'small'} & ViewStyleProp) {
+  const t = useTheme()
+  const topic = useTopic(raw)
+
+  if (!topic) return null
+
+  const hasAvi = topic.type === 'feed' || topic.type === 'profile'
+
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.align_center,
+        {
+          padding: 6,
+          gap: hasAvi ? 6 : 2,
+        },
+        a.pr_md,
+        a.rounded_full,
+        a.border,
+        t.atoms.border_contrast_medium,
+        t.atoms.bg,
+        style,
+      ]}>
+      <View style={[a.align_center, a.justify_center, a.rounded_full, a.overflow_hidden, {
+        width: 20,
+        height: 20,
+      }]}>
+        {topic.type === 'tag' ? (
+          <Hashtag size='sm' />
+        ) : topic.type === 'topic' ? (
+          <Search size='sm' />
+        ) : topic.type === 'feed' ? (
+          <UserAvatar type='user' size={20} avatar='https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:vpkhqolt662uhesyj6nxm7ys/bafkreigpxhbzcwowt3fu6zrhdlen5hdw4onza2lnzg4rv7h5oddvhy4rpq@jpeg' />
+        ) : (
+          <UserAvatar type='user' size={20} avatar='https://cdn.bsky.app/img/avatar/plain/did:plc:ragtjsm2j2vknwkz3zp4oxrd/bafkreihhpqdyntku66himwor5wlhtdo44hllmngj2ofmbqnm25bdm454wq@jpeg' />
+        )}
+      </View>
+
+      <Text
+        style={[a.flex_1, a.text_md, a.font_bold, a.leading_tight, { paddingBottom: 1 }]}
+        numberOfLines={1}>
+        {topic.name}
+      </Text>
+    </View>
+  )
+}
+
 export function Link({
   topic,
   children,
@@ -110,3 +169,91 @@ export const TOPICS = [
   '#FCF',
   'Open Web',
 ]
+
+export const TOP = [
+  {
+    name: '#atproto',
+    uri: 'https://bsky.app/hashtag/atproto',
+  },
+  {
+    name: 'South Korea',
+    uri: BSKY_APP_HOST + makeSearchLink({query: 'South Korea'}),
+  },
+  {
+    name: 'Paul Frazee',
+    uri: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.actor.profile/self'
+  },
+  {
+    name: 'Wired',
+    uri: BSKY_APP_HOST + makeSearchLink({query: 'Wired'}),
+  },
+  {
+    name: 'Quiet Posters',
+    uri: 'at://did:plc:vpkhqolt662uhesyj6nxm7ys/app.bsky.feed.generator/infreq',
+  },
+]
+
+type RawTopic = {
+  name: string
+  uri: string
+}
+
+type Topic =
+  | {
+      type: 'topic' | 'tag'
+      name: string
+      url: string
+      uri: undefined
+    }
+  | {
+      type: 'profile' | 'feed'
+      name: string
+      url: string
+      uri: AtUri
+    }
+
+export function useTopic(topic: RawTopic): Topic | undefined {
+  return React.useMemo(() => {
+    const {name, uri} = topic
+
+    if (uri.startsWith('https')) {
+      const url = new URL(uri)
+      if (url.origin !== BSKY_APP_HOST) return
+      if (url.pathname.startsWith('/search')) {
+        return {
+          type: 'topic',
+          name,
+          url: url.pathname,
+          uri: undefined,
+        }
+      } else if (url.pathname.startsWith('/hashtag')) {
+        return {
+          type: 'tag',
+          name: name.replace(/^#/, ''),
+          url: url.pathname,
+          uri: undefined,
+        }
+      }
+    } else {
+      const urip = new AtUri(uri)
+      switch (urip.collection) {
+        case 'app.bsky.actor.profile': {
+          return {
+            type: 'profile',
+            name,
+            uri: urip,
+            url: makeProfileLink({did: urip.host, handle: urip.host}),
+          }
+        }
+        case 'app.bsky.feed.generator': {
+          return {
+            type: 'feed',
+            name,
+            uri: urip,
+            url: feedUriToHref(uri),
+          }
+        }
+      }
+    }
+  }, [topic])
+}

src/components/interstitials/Trending.tsx

@@ -53,7 +53,12 @@ export function TrendingInterstitial() {
       </View>
 
       <View style={[a.flex_row, a.flex_wrap, a.gap_sm]}>
-        {Trending.TOPICS.slice(0, 8).map(topic => (
+        {Trending.TOP.slice(0, 8).map(topic => (
+          <Trending.Topic
+            topic={topic}
+          />
+        ))}
+        {/*Trending.TOPICS.slice(0, 8).map(topic => (
           <Trending.Link key={topic} topic={topic}>
             {({hovered}) => (
               <Trending.TopicLarge
@@ -67,7 +72,7 @@ export function TrendingInterstitial() {
               />
             )}
           </Trending.Link>
-        ))}
+        ))*/}
       </View>
 
       <Prompt.Basic