dabric.xyz
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import React from 'react'
2import {View} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {logEvent} from '#/lib/statsig/statsig'
7import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
8import {
9 useTrendingSettings,
10 useTrendingSettingsApi,
11} from '#/state/preferences/trending'
12import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
13import {useTrendingConfig} from '#/state/service-config'
14import {atoms as a, useTheme} from '#/alf'
15import {Button, ButtonIcon} from '#/components/Button'
16import {Divider} from '#/components/Divider'
17import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
18import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending'
19import * as Prompt from '#/components/Prompt'
20import {
21 TrendingTopic,
22 TrendingTopicLink,
23 TrendingTopicSkeleton,
24} from '#/components/TrendingTopics'
25import {Text} from '#/components/Typography'
26
27const TRENDING_LIMIT = 6
28
29export function SidebarTrendingTopics() {
30 const {enabled} = useTrendingConfig()
31 const {trendingDisabled} = useTrendingSettings()
32 return !enabled ? null : trendingDisabled ? null : <Inner />
33}
34
35function Inner() {
36 const t = useTheme()
37 const {_} = useLingui()
38 const trendingPrompt = Prompt.usePromptControl()
39 const {setTrendingDisabled} = useTrendingSettingsApi()
40 const {data: trending, error, isLoading} = useTrendingTopics()
41 const noTopics = !isLoading && !error && !trending?.topics?.length
42
43 const enableSquareButtons = useEnableSquareButtons()
44
45 const onConfirmHide = React.useCallback(() => {
46 logEvent('trendingTopics:hide', {context: 'sidebar'})
47 setTrendingDisabled(true)
48 }, [setTrendingDisabled])
49
50 return error || noTopics ? null : (
51 <>
52 <View style={[a.gap_sm, {paddingBottom: 2}]}>
53 <View style={[a.flex_row, a.align_center, a.gap_xs]}>
54 <Graph size="sm" />
55 <Text
56 style={[
57 a.flex_1,
58 a.text_sm,
59 a.font_semi_bold,
60 t.atoms.text_contrast_medium,
61 ]}>
62 <Trans>Trending</Trans>
63 </Text>
64 <Button
65 label={_(msg`Hide trending topics`)}
66 size="tiny"
67 variant="ghost"
68 color="secondary"
69 shape={enableSquareButtons ? 'square' : 'round'}
70 onPress={() => trendingPrompt.open()}>
71 <ButtonIcon icon={X} />
72 </Button>
73 </View>
74
75 <View style={[a.flex_row, a.flex_wrap, {gap: '6px 4px'}]}>
76 {isLoading ? (
77 Array(TRENDING_LIMIT)
78 .fill(0)
79 .map((_n, i) => (
80 <TrendingTopicSkeleton key={i} size="small" index={i} />
81 ))
82 ) : !trending?.topics ? null : (
83 <>
84 {trending.topics.slice(0, TRENDING_LIMIT).map(topic => (
85 <TrendingTopicLink
86 key={topic.link}
87 topic={topic}
88 style={enableSquareButtons ? a.rounded_sm : a.rounded_full}
89 onPress={() => {
90 logEvent('trendingTopic:click', {context: 'sidebar'})
91 }}>
92 {({hovered}) => (
93 <TrendingTopic
94 size="small"
95 topic={topic}
96 style={[
97 hovered && [
98 t.atoms.border_contrast_high,
99 t.atoms.bg_contrast_25,
100 ],
101 ]}
102 />
103 )}
104 </TrendingTopicLink>
105 ))}
106 </>
107 )}
108 </View>
109 </View>
110 <Prompt.Basic
111 control={trendingPrompt}
112 title={_(msg`Hide trending topics?`)}
113 description={_(msg`You can update this later from your settings.`)}
114 confirmButtonCta={_(msg`Hide`)}
115 onConfirm={onConfirmHide}
116 />
117 <Divider />
118 </>
119 )
120}