Update presentation of trending topics in Explore (#11227)

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
+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,
],
)