acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Update presentation of trending topics in Explore (#11227)

Browse Source
This commit is contained in:
DS Boyce
2026-07-22 13:58:26 -07:00
committed by GitHub
parent 933ba1c373
commit b2de086c3b
4 changed files with 207 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Search/Explore.tsx
+34 -39
View File
@@ -5,9 +5,7 @@ import {
type AppBskyFeedDefs,
type AppBskyGraphDefs,
} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {useQueryClient} from '@tanstack/react-query'
import * as bcp47Match from 'bcp-47-match'
@@ -78,7 +76,7 @@ import {
function LoadMore({item}: {item: ExploreScreenItems & {type: 'loadMore'}}) {
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const handleOnPress = () => {
void item.onLoadMore()
@@ -86,7 +84,7 @@ function LoadMore({item}: {item: ExploreScreenItems & {type: 'loadMore'}}) {
return (
<Button
label={_(msg`Load more`)}
label={l`Load more`}
onPress={handleOnPress}
style={[a.relative, a.w_full]}>
{({hovered, pressed}) => (
@@ -138,6 +136,7 @@ type ExploreScreenItems =
key: string
title: string
icon: React.ComponentType<SVGIconProps>
iconSize?: IcoProps['size']
searchButton?: {
label: string
metricsTag: Metrics['explore:module:searchButtonPress']['module']
@@ -215,7 +214,7 @@ export function Explore({
headerHeight: number
}) {
const ax = useAnalytics()
const {_} = useLingui()
const {t: l} = useLingui()
const t = useTheme()
const {data: preferences, error: preferencesError} = usePreferencesQuery()
const moderationOpts = useModerationOpts()
@@ -367,10 +366,11 @@ export function Explore({
i.push({
type: 'tabbedHeader',
key: 'suggested-accounts-header',
title: _(msg`Suggested accounts`),
title: l`Suggested accounts`,
icon: Person,
iconSize: 'md',
searchButton: {
label: _(msg`Search for more accounts`),
label: l`Search for more accounts`,
metricsTag: 'suggestedAccounts',
tab: 'user',
},
@@ -383,7 +383,7 @@ export function Explore({
i.push({
type: 'error',
key: 'suggestedUsersError',
message: _(msg`Failed to load suggested follows`),
message: l`Failed to load suggested follows`,
error: cleanError(suggestedUsersError),
})
} else {
@@ -431,7 +431,7 @@ export function Explore({
}
return i
}, [
_,
l,
moderationOpts,
suggestedUsers,
suggestedUsersIsLoading,
@@ -445,10 +445,11 @@ export function Explore({
i.push({
type: 'header',
key: 'suggested-feeds-header',
title: _(msg`Discover new feeds`),
title: l`Discover feeds`,
icon: ListSparkle,
iconSize: 'md',
searchButton: {
label: _(msg`Search for more feeds`),
label: l`Search for more feeds`,
metricsTag: 'suggestedFeeds',
tab: 'feed',
},
@@ -474,14 +475,14 @@ export function Explore({
i.push({
type: 'error',
key: 'suggestedFeedsError',
message: _(msg`Failed to load suggested feeds`),
message: l`Failed to load suggested feeds`,
error: cleanError(suggestedFeedsError),
})
} else if (preferencesError) {
i.push({
type: 'error',
key: 'preferencesError',
message: _(msg`Failed to load feeds preferences`),
message: l`Failed to load feeds preferences`,
error: cleanError(preferencesError),
})
} else {
@@ -511,7 +512,7 @@ export function Explore({
i.push({
type: 'loadMore',
key: 'loadMoreFeeds',
message: _(msg`Load more suggested feeds`),
message: l`Load more suggested feeds`,
isLoadingMore: isLoadingMoreFeeds,
onLoadMore: onLoadMoreFeeds,
})
@@ -522,21 +523,21 @@ export function Explore({
i.push({
type: 'error',
key: 'feedsError',
message: _(msg`Failed to load feeds`),
message: l`Failed to load feeds`,
error: cleanError(feedsError),
})
} else if (suggestedFeedsError) {
i.push({
type: 'error',
key: 'suggestedFeedsError',
message: _(msg`Failed to load suggested feeds`),
message: l`Failed to load suggested feeds`,
error: cleanError(suggestedFeedsError),
})
} else if (preferencesError) {
i.push({
type: 'error',
key: 'preferencesError',
message: _(msg`Failed to load feeds preferences`),
message: l`Failed to load feeds preferences`,
error: cleanError(preferencesError),
})
} else {
@@ -567,21 +568,21 @@ export function Explore({
i.push({
type: 'error',
key: 'feedsError',
message: _(msg`Failed to load feeds`),
message: l`Failed to load feeds`,
error: cleanError(feedsError),
})
} else if (suggestedFeedsError) {
i.push({
type: 'error',
key: 'suggestedFeedsError',
message: _(msg`Failed to load suggested feeds`),
message: l`Failed to load suggested feeds`,
error: cleanError(suggestedFeedsError),
})
} else if (preferencesError) {
i.push({
type: 'error',
key: 'preferencesError',
message: _(msg`Failed to load feeds preferences`),
message: l`Failed to load feeds preferences`,
error: cleanError(preferencesError),
})
} else {
@@ -602,7 +603,7 @@ export function Explore({
i.push({
type: 'loadMore',
key: 'loadMoreFeeds',
message: _(msg`Load more suggested feeds`),
message: l`Load more suggested feeds`,
isLoadingMore: isLoadingMoreFeeds,
onLoadMore: onLoadMoreFeeds,
})
@@ -613,21 +614,21 @@ export function Explore({
i.push({
type: 'error',
key: 'feedsError',
message: _(msg`Failed to load feeds`),
message: l`Failed to load feeds`,
error: cleanError(feedsError),
})
} else if (suggestedFeedsError) {
i.push({
type: 'error',
key: 'feedsError',
message: _(msg`Failed to load suggested feeds`),
message: l`Failed to load suggested feeds`,
error: cleanError(suggestedFeedsError),
})
} else if (preferencesError) {
i.push({
type: 'error',
key: 'preferencesError',
message: _(msg`Failed to load feeds preferences`),
message: l`Failed to load feeds preferences`,
error: cleanError(preferencesError),
})
} else {
@@ -637,7 +638,7 @@ export function Explore({
}
return i
}, [
_,
l,
ax,
useFullExperience,
suggestedFeeds,
@@ -657,9 +658,9 @@ export function Explore({
i.push({
type: 'header',
key: 'suggested-starterPacks-header',
title: _(msg`Starter Packs`),
title: l`Starter Packs`,
icon: StarterPack,
iconSize: 'xl',
iconSize: 'md',
})
if (isLoadingSuggestedSPs || isRefetchingSuggestedSPs) {
@@ -684,7 +685,7 @@ export function Explore({
return i
}, [
suggestedSPs,
_,
l,
isLoadingSuggestedSPs,
suggestedSPsError,
isRefetchingSuggestedSPs,
@@ -773,7 +774,7 @@ export function Explore({
return (
<View style={[a.pb_md]}>
<ModuleHeader.Container style={[a.pb_xs]}>
<ModuleHeader.Icon icon={item.icon} />
<ModuleHeader.Icon icon={item.icon} size={item.iconSize} />
<ModuleHeader.TitleText>{item.title}</ModuleHeader.TitleText>
{item.searchButton && (
<ModuleHeader.SearchButton
@@ -793,11 +794,7 @@ export function Explore({
)
}
case 'trendingTopics': {
return (
<View style={[a.pb_md]}>
<ExploreTrendingTopics />
</View>
)
return <ExploreTrendingTopics />
}
case 'trendingVideos': {
return <ExploreTrendingVideos />
@@ -1015,9 +1012,7 @@ export function Explore({
case 'preview:loadMoreError': {
return (
<LoadMoreRetryBtn
label={_(
msg`There was an issue fetching posts. Tap here to try again.`,
)}
label={l`There was an issue fetching posts. Tap here to try again.`}
onPress={handleOnPressRetry}
/>
)
@@ -1042,7 +1037,7 @@ export function Explore({
moderationOpts,
interestsDisplayNames,
useFullExperience,
_,
l,
fetchNextPageFeedPreviews,
],
)
src/screens/Search/components/ModuleHeader.tsx
+5 -3
View File
@@ -31,7 +31,7 @@ export function Container({
a.px_lg,
a.pt_2xl,
a.pb_md,
a.gap_sm,
a.gap_xs,
t.atoms.bg,
bottomBorder && [a.border_b, t.atoms.border_contrast_low],
style,
@@ -82,11 +82,13 @@ export function Icon({
icon: Comp,
size = 'lg',
}: Pick<React.ComponentProps<typeof ButtonIcon>, 'icon' | 'size'>) {
const t = useTheme()
const iconSize = iconSizes[size]
return (
<View style={[a.z_20, {width: iconSize, height: iconSize, marginLeft: -2}]}>
<Comp width={iconSize} />
<Comp width={iconSize} fill={t.atoms.text.color} />
</View>
)
}
@@ -94,7 +96,7 @@ export function Icon({
export function TitleText({style, ...props}: TextProps) {
return (
<Text
style={[a.font_semi_bold, a.flex_1, a.text_xl, style]}
style={[a.font_semi_bold, a.flex_1, a.text_lg, style]}
emoji
{...props}
/>
src/screens/Search/modules/ExploreInterestsCard.tsx
+13 -19
View File
@@ -1,15 +1,13 @@
import {useState} from 'react'
import {View} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {useInterestsDisplayNames} from '#/lib/interests'
import {Nux, useSaveNux} from '#/state/queries/nuxs'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {Shapes_Stroke2_Corner0_Rounded as Shapes} from '#/components/icons/Shapes'
import {Shapes_Stroke2_Corner0_Rounded as ShapesIcon} from '#/components/icons/Shapes'
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
import {Link} from '#/components/Link'
import * as Prompt from '#/components/Prompt'
@@ -17,7 +15,7 @@ import {Text} from '#/components/Typography'
export function ExploreInterestsCard() {
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const {data: preferences} = usePreferencesQuery()
const interestsDisplayNames = useInterestsDisplayNames()
const {mutateAsync: saveNux} = useSaveNux()
@@ -41,16 +39,12 @@ export function ExploreInterestsCard() {
<>
<Prompt.Basic
control={trendingPrompt}
title={_(msg`Dismiss interests`)}
description={_(
msg`You can adjust your interests at any time from "Content and media" settings.`,
)}
confirmButtonCta={_(
msg({
message: `OK`,
comment: `Confirm button text.`,
}),
)}
title={l`Dismiss interests`}
description={l`You can adjust your interests at any time from "Content and media" settings.`}
confirmButtonCta={l({
message: `OK`,
comment: `Confirm button text.`,
})}
onConfirm={onConfirmClose}
/>
@@ -63,8 +57,8 @@ export function ExploreInterestsCard() {
t.atoms.border_contrast_medium,
]}>
<View style={[a.flex_row, a.gap_sm, a.align_center]}>
<Shapes />
<Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
<ShapesIcon fill={t.atoms.text.color} />
<Text style={[a.text_lg, a.font_semi_bold]}>
<Trans>Your interests</Trans>
</Text>
</View>
@@ -96,7 +90,7 @@ export function ExploreInterestsCard() {
</Text>
<Link
label={_(msg`Edit interests`)}
label={l`Edit interests`}
to="/settings/interests"
size="small"
variant="solid"
@@ -108,7 +102,7 @@ export function ExploreInterestsCard() {
</Link>
<Button
label={_(msg`Hide this card`)}
label={l`Hide this card`}
size="small"
variant="ghost"
color="secondary"
src/screens/Search/modules/ExploreTrendingTopics.tsx
+155 -173
View File
@@ -1,27 +1,34 @@
import {useMemo} from 'react'
import {Pressable, View} from 'react-native'
import {type AppBskyUnspeccedDefs, moderateProfile} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {Image} from 'expo-image'
import {
type AppBskyUnspeccedDefs,
moderateProfile,
RichText as RichTextApi,
} from '@atproto/api'
import {plural} from '@lingui/core/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useTrendingSettings} from '#/state/preferences/trending'
import {useGetTrendsQuery} from '#/state/queries/trending/useGetTrendsQuery'
import {useTrendingConfig} from '#/state/service-config'
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {atoms as a, useGutters, useTheme, type ViewStyleProp, web} from '#/alf'
import {formatCount} from '#/view/com/util/numeric/format'
import {atoms as a, useGutters, useTheme, type ViewStyleProp} from '#/alf'
import {AvatarStack} from '#/components/AvatarStack'
import {type Props as SVGIconProps} from '#/components/icons/common'
import {Flame_Stroke2_Corner1_Rounded as FlameIcon} from '#/components/icons/Flame'
import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending'
import {Link} from '#/components/Link'
import {RichText} from '#/components/RichText'
import {SubtleHover} from '#/components/SubtleHover'
import {Text} from '#/components/Typography'
import {useAnalytics} from '#/analytics'
import * as ModuleHeader from '../components/ModuleHeader'
const TOPIC_COUNT = 5
const IMAGE_SIZE = 56
export function ExploreTrendingTopics() {
const {enabled} = useTrendingConfig()
const {trendingDisabled} = useTrendingSettings()
@@ -32,27 +39,36 @@ function Inner() {
const ax = useAnalytics()
const {data: trending, error, isLoading, isRefetching} = useGetTrendsQuery()
const noTopics = !isLoading && !error && !trending?.trends?.length
const showLoading = isLoading || isRefetching
return isLoading || isRefetching ? (
Array.from({length: TOPIC_COUNT}).map((__, i) => (
<TrendingTopicRowSkeleton key={i} withPosts={i === 0} />
))
) : error || !trending?.trends || noTopics ? null : (
<>
{trending.trends.map((trend, index) => (
<TrendRow
key={trend.link}
trend={trend}
rank={index + 1}
onPress={() => {
ax.metric('trendingTopic:click', {
context: 'explore',
recId: trending.recId,
})
}}
/>
))}
</>
if (!showLoading && (error || !trending?.trends || noTopics)) return null
return (
<View style={[a.pb_md]}>
<ModuleHeader.Container bottomBorder>
<ModuleHeader.Icon icon={TrendingIcon} size="md" />
<ModuleHeader.TitleText>
<Trans>Trending</Trans>
</ModuleHeader.TitleText>
</ModuleHeader.Container>
{showLoading
? Array.from({length: TOPIC_COUNT}).map((__, i) => (
<TrendingTopicRowSkeleton key={i} />
))
: trending?.trends.map((trend, index) => (
<TrendRow
key={trend.link}
trend={trend}
rank={index + 1}
onPress={() => {
ax.metric('trendingTopic:click', {
context: 'explore',
recId: trending.recId,
})
}}
/>
))}
</View>
)
}
@@ -68,22 +84,24 @@ export function TrendRow({
onPress?: () => void
}) {
const t = useTheme()
const {_} = useLingui()
const {t: l, i18n} = useLingui()
const gutters = useGutters([0, 'base'])
const category = useCategoryDisplayName(trend?.category || 'other')
const age = Math.floor(
(Date.now() - new Date(trend.startedAt || Date.now()).getTime()) /
(1000 * 60 * 60),
)
const badgeType = trend.status === 'hot' ? 'hot' : age < 2 ? 'new' : age
const actors = useModerateTrendingActors(trend.actors)
const description = useMemo(() => {
if (!trend.description) return
const rt = new RichTextApi({text: trend.description})
rt.detectFacetsWithoutResolution()
return rt
}, [trend.description])
let imageUrl = null // TODO Image URL goes here when available. -dsb
return (
<Link
testID={trend.link}
label={_(msg`Browse topic ${trend.displayName}`)}
label={l`Browse topic ${trend.displayName}`}
to={trend.link}
onPress={onPress}
style={[a.border_b, t.atoms.border_contrast_low]}
@@ -91,52 +109,75 @@ export function TrendRow({
{({hovered, pressed}) => (
<>
<SubtleHover hover={hovered || pressed} native />
<View style={[gutters, a.w_full, a.py_lg, a.flex_row, a.gap_2xs]}>
<View style={[a.flex_1, a.gap_xs]}>
<View style={[a.flex_row]}>
<Text
style={[
a.text_md,
a.font_semi_bold,
a.leading_tight,
{width: 20},
]}>
<Trans comment='The trending topic rank, i.e. "1. March Madness", "2. The Bachelor"'>
{rank}.
</Trans>
</Text>
<Text
style={[a.text_md, a.font_semi_bold, a.leading_tight]}
numberOfLines={1}>
{trend.displayName}
</Text>
</View>
<View
style={[
a.flex_row,
a.gap_sm,
a.align_center,
{paddingLeft: 20},
]}>
{actors.length > 0 && (
<AvatarStack size={20} profiles={actors} />
)}
<Text
style={[
a.text_sm,
t.atoms.text_contrast_medium,
web(a.leading_snug),
]}
numberOfLines={1}>
{category}
</Text>
</View>
</View>
<View style={[a.flex_shrink_0]}>
<TrendingIndicator type={badgeType} />
</View>
</View>
<View style={[gutters, a.w_full, a.flex_row, a.py_md, a.gap_sm]}>
<Text
style={[
a.text_sm,
a.font_medium,
t.atoms.text_contrast_low,
{
fontVariant: ['tabular-nums'],
},
]}>
<Trans comment='The trending topic rank, i.e. "1. March Madness", "2. The Bachelor"'>
{rank}.
</Trans>
</Text>
<View style={[a.flex_1, a.gap_2xs]}>
<Text
style={[a.text_sm, a.font_semi_bold, a.leading_snug]}
numberOfLines={1}>
{trend.displayName}
</Text>
{description ? (
<RichText
value={description}
disableLinks
style={[a.text_sm, t.atoms.text_contrast_medium]}
numberOfLines={2}
/>
) : null}
<View style={[a.mt_xs, a.flex_row, a.gap_sm, a.align_center]}>
{actors.length > 0 ? (
<AvatarStack size={24} profiles={actors} />
) : null}
<Text
style={[a.text_sm, t.atoms.text_contrast_medium]}
numberOfLines={1}>
{trend.postCount >= 1000 ? (
<Trans comment="Over 1,000 posts">1K+ posts</Trans>
) : (
<Trans comment="'{postCount} {posts}', e.g., '1.2K posts'">
{formatCount(i18n, trend.postCount)}{' '}
{plural(trend.postCount, {one: 'post', other: 'posts'})}
</Trans>
)}
</Text>
</View>
</View>
{imageUrl ? (
<Image
source={{
uri: imageUrl,
}}
alt={trend.topic}
style={[
a.flex_0,
a.rounded_md,
t.atoms.bg_contrast_25,
{
width: IMAGE_SIZE,
height: IMAGE_SIZE,
},
]}
contentFit="cover"
accessible={true}
accessibilityIgnoresInvertColors
useAppleWebpCodec
/>
) : null}
</View>
{children}
</>
)}
@@ -144,96 +185,30 @@ export function TrendRow({
)
}
type TrendingIndicatorType = 'hot' | 'new' | number
function TrendingIndicator({type}: {type: TrendingIndicatorType | 'skeleton'}) {
const t = useTheme()
const {_} = useLingui()
const pillStyles = [
a.flex_row,
a.align_center,
a.gap_xs,
a.rounded_full,
{height: 28, paddingHorizontal: 10},
]
let Icon: React.ComponentType<SVGIconProps> | null = null
let text: string | null = null
let color: string | null = null
let backgroundColor: string | null = null
switch (type) {
case 'skeleton': {
return (
<View
style={[
pillStyles,
{backgroundColor: t.palette.contrast_25, width: 65, height: 28},
]}
/>
)
}
case 'hot': {
Icon = FlameIcon
color =
t.scheme === 'light' ? t.palette.negative_500 : t.palette.negative_950
backgroundColor =
t.scheme === 'light' ? t.palette.negative_50 : t.palette.negative_200
text = _(msg`Hot`)
break
}
case 'new': {
Icon = TrendingIcon
text = _(msg`New`)
color = t.palette.positive_600
backgroundColor = t.palette.positive_50
break
}
default: {
text = _(
msg({
message: `${type}h ago`,
comment:
'trending topic time spent trending. should be as short as possible to fit in a pill',
}),
)
color = t.atoms.text_contrast_medium.color
backgroundColor = t.atoms.bg_contrast_25.backgroundColor
break
}
}
return (
<View style={[pillStyles, {backgroundColor}]}>
{Icon && <Icon size="sm" style={{color}} />}
<Text style={[a.text_sm, a.font_medium, {color}]}>{text}</Text>
</View>
)
}
function useCategoryDisplayName(
// Unused atm, but leaving here so we don't lose localization. -dsb
export function useCategoryDisplayName(
category: AppBskyUnspeccedDefs.TrendView['category'],
) {
const {_} = useLingui()
const {t: l} = useLingui()
switch (category) {
case 'sports':
return _(msg`Sports`)
return l`Sports`
case 'politics':
return _(msg`Politics`)
return l`Politics`
case 'video-games':
return _(msg`Video Games`)
return l`Video Games`
case 'pop-culture':
return _(msg`Entertainment`)
return l`Entertainment`
case 'news':
return _(msg`News`)
return l`News`
case 'other':
default:
return null
}
}
export function TrendingTopicRowSkeleton({}: {withPosts: boolean}) {
export function TrendingTopicRowSkeleton() {
const t = useTheme()
const gutters = useGutters([0, 'base'])
@@ -242,32 +217,39 @@ export function TrendingTopicRowSkeleton({}: {withPosts: boolean}) {
style={[
gutters,
a.w_full,
a.py_lg,
a.py_md,
a.flex_row,
a.gap_2xs,
a.gap_sm,
a.border_b,
t.atoms.border_contrast_low,
]}>
<View style={[a.flex_1, a.gap_sm]}>
<View style={[a.flex_row, a.align_center]}>
<View style={[{width: 20}]}>
<LoadingPlaceholder
width={12}
height={12}
style={[a.rounded_full]}
/>
</View>
<LoadingPlaceholder width={90} height={17} />
</View>
<View style={[a.flex_row, a.gap_sm, a.align_center, {paddingLeft: 20}]}>
<View style={[{width: 20}]}>
<LoadingPlaceholder width={17} height={17} style={[a.rounded_full]} />
</View>
<View style={[a.flex_1, a.gap_2xs]}>
<LoadingPlaceholder width={90} height={17} />
<View style={[a.flex_row, a.gap_sm, a.align_center]}>
<LoadingPlaceholder width={70} height={16} />
<LoadingPlaceholder width={40} height={16} />
<LoadingPlaceholder width={60} height={16} />
</View>
<View style={[a.flex_row, a.gap_sm, a.align_center]}>
<LoadingPlaceholder width={50} height={16} />
<LoadingPlaceholder width={70} height={16} />
<LoadingPlaceholder width={30} height={16} />
</View>
<View style={[a.flex_1, a.gap_sm]}>
<View style={[a.mt_xs, a.flex_row, a.gap_sm, a.align_center]}>
<LoadingPlaceholder
width={24}
height={24}
style={[a.rounded_full]}
/>
<LoadingPlaceholder width={60} height={16} />
</View>
</View>
</View>
<View style={[a.flex_shrink_0]}>
<TrendingIndicator type="skeleton" />
</View>
{/* TODO Image placeholder goes here when images are available. -dsb */}
</View>
)
}