ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Rework discover-feed trending interstitial (#7314)
* Rework discover-feed trending interstitial to take one row
* Fix loading state
* Try putting it at the top
* Color consistency
* Tweak some spacing
* Show trending when progress guide is there
authored by
Paul Frazee
and committed by
GitHub
2dc6932f
c6d26a0a
+1
-1
src/components/hooks/useHeaderOffset.ts
+1
-1
src/components/hooks/useHeaderOffset.ts
···
12
12
const tabBarPad = 10 + 10 + 3 // padding + border
13
13
const normalLineHeight = 20 // matches tab bar
14
14
const tabBarText = normalLineHeight * fontScale
15
-
return navBarHeight + tabBarPad + tabBarText
15
+
return navBarHeight + tabBarPad + tabBarText - 4 // for some reason, this calculation is wrong by 4 pixels, which we adjust
16
16
}
+57
-74
src/components/interstitials/Trending.tsx
+57
-74
src/components/interstitials/Trending.tsx
···
1
1
import React from 'react'
2
2
import {View} from 'react-native'
3
-
import {msg, Trans} from '@lingui/macro'
3
+
import {ScrollView} from 'react-native-gesture-handler'
4
+
import {msg} from '@lingui/macro'
4
5
import {useLingui} from '@lingui/react'
5
6
6
7
import {logEvent} from '#/lib/statsig/statsig'
···
8
9
useTrendingSettings,
9
10
useTrendingSettingsApi,
10
11
} from '#/state/preferences/trending'
11
-
import {
12
-
DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
13
-
useTrendingTopics,
14
-
} from '#/state/queries/trending/useTrendingTopics'
12
+
import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
15
13
import {useTrendingConfig} from '#/state/trending-config'
16
-
import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
14
+
import {atoms as a, useGutters, useTheme} from '#/alf'
17
15
import {Button, ButtonIcon} from '#/components/Button'
18
-
import {GradientFill} from '#/components/GradientFill'
19
16
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
20
17
import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
21
18
import * as Prompt from '#/components/Prompt'
22
-
import {
23
-
TrendingTopic,
24
-
TrendingTopicLink,
25
-
TrendingTopicSkeleton,
26
-
} from '#/components/TrendingTopics'
19
+
import {TrendingTopicLink} from '#/components/TrendingTopics'
27
20
import {Text} from '#/components/Typography'
28
21
29
22
export function TrendingInterstitial() {
···
35
28
export function Inner() {
36
29
const t = useTheme()
37
30
const {_} = useLingui()
38
-
const gutters = useGutters(['wide', 'base'])
31
+
const gutters = useGutters([0, 'base', 0, 'base'])
39
32
const trendingPrompt = Prompt.usePromptControl()
40
33
const {setTrendingDisabled} = useTrendingSettingsApi()
41
34
const {data: trending, error, isLoading} = useTrendingTopics()
···
47
40
}, [setTrendingDisabled])
48
41
49
42
return error || noTopics ? null : (
50
-
<View
51
-
style={[
52
-
gutters,
53
-
a.gap_lg,
54
-
a.border_t,
55
-
t.atoms.border_contrast_low,
56
-
t.atoms.bg_contrast_25,
57
-
]}>
58
-
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
59
-
<View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
60
-
<Graph size="lg" />
61
-
<Text style={[a.text_lg, a.font_heavy]}>
62
-
<Trans>Trending</Trans>
63
-
</Text>
64
-
<View style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
65
-
<GradientFill gradient={tokens.gradients.primary} />
66
-
<Text style={[a.text_sm, a.font_heavy, {color: 'white'}]}>
67
-
<Trans>BETA</Trans>
68
-
</Text>
43
+
<View style={[t.atoms.border_contrast_low, a.border_t]}>
44
+
<ScrollView
45
+
horizontal
46
+
showsHorizontalScrollIndicator={false}
47
+
decelerationRate="fast">
48
+
<View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}>
49
+
<View style={{paddingLeft: 4, paddingRight: 2}}>
50
+
<Graph size="sm" />
69
51
</View>
52
+
{isLoading ? (
53
+
<View style={[a.py_lg]}>
54
+
<Text
55
+
style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
56
+
{' '}
57
+
</Text>
58
+
</View>
59
+
) : !trending?.topics ? null : (
60
+
<>
61
+
{trending.topics.map(topic => (
62
+
<>
63
+
<TrendingTopicLink
64
+
key={topic.link}
65
+
topic={topic}
66
+
onPress={() => {
67
+
logEvent('trendingTopic:click', {context: 'interstitial'})
68
+
}}>
69
+
<View style={[a.py_lg]}>
70
+
<Text
71
+
style={[
72
+
t.atoms.text,
73
+
a.text_sm,
74
+
a.font_bold,
75
+
{opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
76
+
]}>
77
+
{topic.topic}
78
+
</Text>
79
+
</View>
80
+
</TrendingTopicLink>
81
+
</>
82
+
))}
83
+
<Button
84
+
label={_(msg`Hide trending topics`)}
85
+
size="tiny"
86
+
variant="ghost"
87
+
color="secondary"
88
+
shape="round"
89
+
onPress={() => trendingPrompt.open()}>
90
+
<ButtonIcon icon={X} />
91
+
</Button>
92
+
</>
93
+
)}
70
94
</View>
71
-
72
-
<Button
73
-
label={_(msg`Hide trending topics`)}
74
-
size="tiny"
75
-
variant="outline"
76
-
color="secondary"
77
-
shape="round"
78
-
onPress={() => trendingPrompt.open()}>
79
-
<ButtonIcon icon={X} />
80
-
</Button>
81
-
</View>
82
-
83
-
<View style={[a.flex_row, a.flex_wrap, {rowGap: 8, columnGap: 6}]}>
84
-
{isLoading ? (
85
-
Array(TRENDING_TOPICS_COUNT)
86
-
.fill(0)
87
-
.map((_n, i) => <TrendingTopicSkeleton key={i} index={i} />)
88
-
) : !trending?.topics ? null : (
89
-
<>
90
-
{trending.topics.map(topic => (
91
-
<TrendingTopicLink
92
-
key={topic.link}
93
-
topic={topic}
94
-
onPress={() => {
95
-
logEvent('trendingTopic:click', {context: 'interstitial'})
96
-
}}>
97
-
{({hovered}) => (
98
-
<TrendingTopic
99
-
topic={topic}
100
-
style={[
101
-
hovered && [
102
-
t.atoms.border_contrast_high,
103
-
t.atoms.bg_contrast_25,
104
-
],
105
-
]}
106
-
/>
107
-
)}
108
-
</TrendingTopicLink>
109
-
))}
110
-
</>
111
-
)}
112
-
</View>
95
+
</ScrollView>
113
96
114
97
<Prompt.Basic
115
98
control={trendingPrompt}
+13
-14
src/view/com/posts/PostFeed.tsx
+13
-14
src/view/com/posts/PostFeed.tsx
···
309
309
310
310
if (hasSession) {
311
311
if (feedKind === 'discover') {
312
-
if (sliceIndex === 0 && showProgressIntersitial) {
313
-
arr.push({
314
-
type: 'interstitialProgressGuide',
315
-
key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
316
-
})
317
-
} else if (
318
-
sliceIndex === 15 &&
319
-
!gtTablet &&
320
-
!trendingDisabled
321
-
) {
322
-
arr.push({
323
-
type: 'interstitialTrending',
324
-
key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
325
-
})
312
+
if (sliceIndex === 0) {
313
+
if (showProgressIntersitial) {
314
+
arr.push({
315
+
type: 'interstitialProgressGuide',
316
+
key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
317
+
})
318
+
}
319
+
if (!gtTablet && !trendingDisabled) {
320
+
arr.push({
321
+
type: 'interstitialTrending',
322
+
key: 'interstitial2-' + sliceIndex + '-' + lastFetchedAt,
323
+
})
324
+
}
326
325
} else if (sliceIndex === 30) {
327
326
arr.push({
328
327
type: 'interstitialFollows',