diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/StarterPack/StarterPackCard.tsx | 4 | ||||
| -rw-r--r-- | src/components/TrendingTopics.tsx | 90 | ||||
| -rw-r--r-- | src/screens/Search/components/ExploreRecommendations.tsx | 23 |
3 files changed, 72 insertions, 45 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, + } } /* diff --git a/src/screens/Search/components/ExploreRecommendations.tsx b/src/screens/Search/components/ExploreRecommendations.tsx index 7070c44ac..602bab87d 100644 --- a/src/screens/Search/components/ExploreRecommendations.tsx +++ b/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' + }) +} |