forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Special treatment for recommended starter packs (#7706)
* special treatment for recommended starter packs
* update subtitle when SPs in recommended
* fix item height
authored by
Samuel Newman
and committed by
GitHub
66f5e3a8
5a865a50
+72
-45
+2
-2
src/components/StarterPack/StarterPackCard.tsx
+2
-2
src/components/StarterPack/StarterPackCard.tsx
···
12
12
import {precacheStarterPack} from '#/state/queries/starter-packs'
13
13
import {useSession} from '#/state/session'
14
14
import {atoms as a, useTheme} from '#/alf'
15
-
import {StarterPack} from '#/components/icons/StarterPack'
15
+
import {StarterPack as StarterPackIcon} from '#/components/icons/StarterPack'
16
16
import {Link as BaseLink, LinkProps as BaseLinkProps} from '#/components/Link'
17
17
import {Text} from '#/components/Typography'
18
18
···
64
64
return (
65
65
<View style={[a.w_full, a.gap_md]}>
66
66
<View style={[a.flex_row, a.gap_sm, a.w_full]}>
67
-
{!noIcon ? <StarterPack width={40} gradient="sky" /> : null}
67
+
{!noIcon ? <StarterPackIcon width={40} gradient="sky" /> : null}
68
68
<View style={[a.flex_1]}>
69
69
<Text
70
70
emoji
+50
-40
src/components/TrendingTopics.tsx
+50
-40
src/components/TrendingTopics.tsx
···
12
12
// import {UserAvatar} from '#/view/com/util/UserAvatar'
13
13
import type {TrendingTopic} from '#/state/queries/trending/useTrendingTopics'
14
14
import {atoms as a, native, useTheme, ViewStyleProp} from '#/alf'
15
+
import {StarterPack as StarterPackIcon} from '#/components/icons/StarterPack'
15
16
import {Link as InternalLink, LinkProps} from '#/components/Link'
16
17
import {Text} from '#/components/Typography'
17
18
···
24
25
const topic = useTopic(raw)
25
26
26
27
const isSmall = size === 'small'
27
-
// const hasAvi = topic.type === 'feed' || topic.type === 'profile'
28
-
// const aviSize = isSmall ? 16 : 20
29
-
// const iconSize = isSmall ? 16 : 20
28
+
const hasIcon = topic.type === 'starter-pack' && !isSmall
29
+
const iconSize = 20
30
30
31
31
return (
32
32
<View
···
45
45
},
46
46
]
47
47
: [a.py_sm, a.px_md],
48
+
hasIcon && {gap: 6},
48
49
style,
49
-
/*
50
-
{
51
-
padding: 6,
52
-
gap: hasAvi ? 4 : 2,
53
-
},
54
-
a.pr_md,
55
-
*/
56
50
]}>
51
+
{hasIcon && topic.type === 'starter-pack' && (
52
+
<StarterPackIcon
53
+
gradient="sky"
54
+
width={iconSize}
55
+
style={{marginLeft: -3, marginVertical: -1}}
56
+
/>
57
+
)}
58
+
57
59
{/*
58
-
<View
59
-
style={[
60
-
a.align_center,
61
-
a.justify_center,
62
-
a.rounded_full,
63
-
a.overflow_hidden,
64
-
{
65
-
width: aviSize,
66
-
height: aviSize,
67
-
},
68
-
]}>
69
-
{topic.type === 'tag' ? (
70
-
<Hashtag width={iconSize} />
71
-
) : topic.type === 'topic' ? (
72
-
<Quote width={iconSize - 2} />
73
-
) : topic.type === 'feed' ? (
74
-
<UserAvatar
75
-
type="user"
76
-
size={aviSize}
77
-
avatar=""
78
-
/>
79
-
) : (
80
-
<UserAvatar
81
-
type="user"
82
-
size={aviSize}
83
-
avatar=""
84
-
/>
85
-
)}
86
-
</View>
60
+
<View
61
+
style={[
62
+
a.align_center,
63
+
a.justify_center,
64
+
a.rounded_full,
65
+
a.overflow_hidden,
66
+
{
67
+
width: iconSize,
68
+
height: iconSize,
69
+
},
70
+
]}>
71
+
{topic.type === 'tag' ? (
72
+
<Hashtag width={iconSize} />
73
+
) : topic.type === 'topic' ? (
74
+
<Quote width={iconSize - 2} />
75
+
) : topic.type === 'feed' ? (
76
+
<UserAvatar
77
+
type="user"
78
+
size={aviSize}
79
+
avatar=""
80
+
/>
81
+
) : (
82
+
<UserAvatar
83
+
type="user"
84
+
size={aviSize}
85
+
avatar=""
86
+
/>
87
+
)}
88
+
</View>
87
89
*/}
88
90
89
91
<Text
···
151
153
152
154
type ParsedTrendingTopic =
153
155
| {
154
-
type: 'topic' | 'tag' | 'unknown'
156
+
type: 'topic' | 'tag' | 'starter-pack' | 'unknown'
155
157
label: string
156
158
displayName: string
157
159
url: string
···
184
186
label: _(msg`Browse posts tagged with ${displayName}`),
185
187
displayName,
186
188
// displayName: displayName.replace(/^#/, ''),
189
+
uri: undefined,
190
+
url: link,
191
+
}
192
+
} else if (link.startsWith('/starter-pack')) {
193
+
return {
194
+
type: 'starter-pack',
195
+
label: _(msg`Browse starter pack ${displayName}`),
196
+
displayName,
187
197
uri: undefined,
188
198
url: link,
189
199
}
+20
-3
src/screens/Search/components/ExploreRecommendations.tsx
+20
-3
src/screens/Search/components/ExploreRecommendations.tsx
···
1
1
import {View} from 'react-native'
2
+
import {AppBskyUnspeccedDefs} from '@atproto/api'
2
3
import {Trans} from '@lingui/macro'
3
4
4
5
import {logEvent} from '#/lib/statsig/statsig'
···
27
28
const gutters = useGutters([0, 'compact'])
28
29
const {data: trending, error, isLoading} = useTrendingTopics()
29
30
const noRecs = !isLoading && !error && !trending?.suggested?.length
31
+
const allFeeds = trending?.suggested && isAllFeeds(trending.suggested)
30
32
31
33
return error || noRecs ? null : (
32
34
<>
···
50
52
<Trans>Recommended</Trans>
51
53
</Text>
52
54
</View>
53
-
<Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
54
-
<Trans>Feeds we think you might like.</Trans>
55
-
</Text>
55
+
{!allFeeds ? (
56
+
<Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
57
+
<Trans>
58
+
Content from across the network we think you might like.
59
+
</Trans>
60
+
</Text>
61
+
) : (
62
+
<Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
63
+
<Trans>Feeds we think you might like.</Trans>
64
+
</Text>
65
+
)}
56
66
</View>
57
67
</View>
58
68
···
98
108
</>
99
109
)
100
110
}
111
+
112
+
function isAllFeeds(topics: AppBskyUnspeccedDefs.TrendingTopic[]) {
113
+
return topics.every(topic => {
114
+
const segments = topic.link.split('/').slice(1)
115
+
return segments[0] === 'profile' && segments[2] === 'feed'
116
+
})
117
+
}