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

+71 -89
+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
··· 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
··· 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',