diff --git a/src/analytics/features/types.ts b/src/analytics/features/types.ts index 22cf07ad85..b7c70fa9a7 100644 --- a/src/analytics/features/types.ts +++ b/src/analytics/features/types.ts @@ -25,6 +25,7 @@ export enum Features { // values TrendingDiscoverValues = 'trending_discover:values', + TrendingExploreTopicsCountValue = 'trending_explore_topics_count:value', AATest = 'aa-test', } diff --git a/src/screens/Search/modules/ExploreTrendingTopics.tsx b/src/screens/Search/modules/ExploreTrendingTopics.tsx index e1caf61ffe..b20caf7066 100644 --- a/src/screens/Search/modules/ExploreTrendingTopics.tsx +++ b/src/screens/Search/modules/ExploreTrendingTopics.tsx @@ -13,7 +13,10 @@ import { useTrendingSettings, useTrendingSettingsApi, } from '#/state/preferences/trending' -import {useGetTrendsQuery} from '#/state/queries/trending/useGetTrendsQuery' +import { + DEFAULT_LIMIT, + useGetTrendsQuery, +} from '#/state/queries/trending/useGetTrendsQuery' import {useTrendingConfig} from '#/state/service-config' import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' import {formatCount} from '#/view/com/util/numeric/format' @@ -29,8 +32,6 @@ 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() { @@ -42,9 +43,20 @@ export function ExploreTrendingTopics() { function Inner() { const ax = useAnalytics() const {t: l} = useLingui() + + const topicCount = ax.features.getValue( + ax.features.TrendingExploreTopicsCountValue, + DEFAULT_LIMIT, + ) + const trendingPrompt = Prompt.usePromptControl() const {setTrendingDisabled} = useTrendingSettingsApi() - const {data: trending, error, isLoading, isRefetching} = useGetTrendsQuery() + const { + data: trending, + error, + isLoading, + isRefetching, + } = useGetTrendsQuery({limit: topicCount}) const noTopics = !isLoading && !error && !trending?.trends?.length const showLoading = isLoading || isRefetching @@ -64,7 +76,7 @@ function Inner() { /> {showLoading - ? Array.from({length: TOPIC_COUNT}).map((__, i) => ( + ? Array.from({length: topicCount}).map((__, i) => ( )) : trending?.trends.map((trend, index) => ( @@ -143,7 +155,6 @@ export function TrendRow({ style={[ a.text_md, a.font_medium, - t.atoms.text_contrast_low, { fontVariant: ['tabular-nums'], diff --git a/src/view/shell/desktop/SidebarTrendingTopics.tsx b/src/view/shell/desktop/SidebarTrendingTopics.tsx index 7a8e45208a..b7f25b8f1d 100644 --- a/src/view/shell/desktop/SidebarTrendingTopics.tsx +++ b/src/view/shell/desktop/SidebarTrendingTopics.tsx @@ -5,19 +5,21 @@ import { useTrendingSettings, useTrendingSettingsApi, } from '#/state/preferences/trending' -import {useGetTrendsQuery} from '#/state/queries/trending/useGetTrendsQuery' +import { + DEFAULT_LIMIT, + useGetTrendsQuery, +} from '#/state/queries/trending/useGetTrendsQuery' import {useTrendingConfig} from '#/state/service-config' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonIcon} from '#/components/Button' import {DotGrid3x1_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid' import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending' +import {Link} from '#/components/Link' import * as Prompt from '#/components/Prompt' import {TrendingTopicLink} from '#/components/TrendingTopics' import {Text} from '#/components/Typography' import {useAnalytics} from '#/analytics' -const TRENDING_LIMIT = 5 - export function SidebarTrendingTopics() { const {enabled} = useTrendingConfig() const {trendingDisabled} = useTrendingSettings() @@ -28,6 +30,12 @@ function Inner() { const t = useTheme() const {t: l} = useLingui() const ax = useAnalytics() + + const exploreTopicCount = ax.features.getValue( + ax.features.TrendingExploreTopicsCountValue, + DEFAULT_LIMIT, + ) + const trendingPrompt = Prompt.usePromptControl() const {setTrendingDisabled} = useTrendingSettingsApi() const { @@ -35,6 +43,7 @@ function Inner() { error, isLoading, } = useGetTrendsQuery({ + limit: DEFAULT_LIMIT, refetchOnWindowFocus: true, }) const noTopics = !isLoading && !error && !trending?.trends?.length @@ -53,6 +62,26 @@ function Inner() { Trending + {exploreTopicCount > DEFAULT_LIMIT ? ( + + {({hovered, pressed}) => ( + + See more + + )} + + ) : null}