diff options
Diffstat (limited to 'src/screens/Onboarding/StepAlgoFeeds')
| -rw-r--r-- | src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx | 378 | ||||
| -rw-r--r-- | src/screens/Onboarding/StepAlgoFeeds/index.tsx | 160 |
2 files changed, 538 insertions, 0 deletions
diff --git a/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx b/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx new file mode 100644 index 000000000..c7f1e6e4d --- /dev/null +++ b/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx @@ -0,0 +1,378 @@ +import React from 'react' +import {View} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' +import {Image} from 'expo-image' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' + +import {useTheme, atoms as a} from '#/alf' +import * as Toggle from '#/components/forms/Toggle' +import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed' +import {Text, H3} from '#/components/Typography' +import {RichText} from '#/components/RichText' + +import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' +import {FeedConfig} from '#/screens/Onboarding/StepAlgoFeeds' + +function PrimaryFeedCardInner({ + feed, + config, +}: { + feed: FeedSourceInfo + config: FeedConfig +}) { + const t = useTheme() + const ctx = Toggle.useItemContext() + + const styles = React.useMemo( + () => ({ + active: [t.atoms.bg_contrast_25], + selected: [ + a.shadow_md, + { + backgroundColor: + t.name === 'light' ? t.palette.primary_50 : t.palette.primary_950, + }, + ], + selectedHover: [ + { + backgroundColor: + t.name === 'light' ? t.palette.primary_25 : t.palette.primary_975, + }, + ], + textSelected: [{color: t.palette.white}], + checkboxSelected: [ + { + borderColor: t.palette.white, + }, + ], + }), + [t], + ) + + return ( + <View + style={[ + a.relative, + a.w_full, + a.p_lg, + a.rounded_md, + a.overflow_hidden, + t.atoms.bg_contrast_50, + (ctx.hovered || ctx.focused || ctx.pressed) && styles.active, + ctx.selected && styles.selected, + ctx.selected && + (ctx.hovered || ctx.focused || ctx.pressed) && + styles.selectedHover, + ]}> + {ctx.selected && config.gradient && ( + <LinearGradient + colors={config.gradient.values.map(v => v[1])} + locations={config.gradient.values.map(v => v[0])} + start={{x: 0, y: 0}} + end={{x: 1, y: 1}} + style={[a.absolute, a.inset_0]} + /> + )} + + <View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}> + <View + style={[ + { + width: 64, + height: 64, + }, + a.rounded_sm, + a.overflow_hidden, + t.atoms.bg, + ]}> + <Image + source={{uri: feed.avatar}} + style={[a.w_full, a.h_full]} + accessibilityIgnoresInvertColors + /> + </View> + + <View style={[a.pt_xs, a.flex_grow]}> + <H3 + style={[ + a.text_lg, + a.font_bold, + ctx.selected && styles.textSelected, + ]}> + {feed.displayName} + </H3> + + <Text + style={[ + {opacity: 0.6}, + a.text_md, + a.py_xs, + ctx.selected && styles.textSelected, + ]}> + by @{feed.creatorHandle} + </Text> + </View> + + <View + style={[ + { + width: 28, + height: 28, + }, + a.justify_center, + a.align_center, + a.rounded_sm, + ctx.selected ? [a.border, styles.checkboxSelected] : t.atoms.bg, + ]}> + {ctx.selected && <Check size="sm" fill={t.palette.white} />} + </View> + </View> + + <View + style={[ + { + opacity: ctx.selected ? 0.3 : 1, + borderTopWidth: 1, + }, + a.mt_md, + a.w_full, + t.name === 'light' ? t.atoms.border : t.atoms.border_contrast, + ctx.selected && { + borderTopColor: t.palette.white, + }, + ]} + /> + + <View style={[a.pt_md]}> + <RichText + value={feed.description} + style={[ + a.text_md, + ctx.selected && + (t.name === 'light' + ? t.atoms.text_inverted + : {color: t.palette.white}), + ]} + disableLinks + /> + </View> + </View> + ) +} + +export function PrimaryFeedCard({config}: {config: FeedConfig}) { + const {_} = useLingui() + const {data: feed} = useFeedSourceInfoQuery({uri: config.uri}) + + return !feed ? ( + <FeedCardPlaceholder primary /> + ) : ( + <Toggle.Item + name={feed.uri} + label={_(msg`Subscribe to the ${feed.displayName} feed`)}> + <PrimaryFeedCardInner config={config} feed={feed} /> + </Toggle.Item> + ) +} + +function FeedCardInner({feed}: {feed: FeedSourceInfo; config: FeedConfig}) { + const t = useTheme() + const ctx = Toggle.useItemContext() + + const styles = React.useMemo( + () => ({ + active: [t.atoms.bg_contrast_25], + selected: [ + { + backgroundColor: + t.name === 'light' ? t.palette.primary_50 : t.palette.primary_950, + }, + ], + selectedHover: [ + { + backgroundColor: + t.name === 'light' ? t.palette.primary_25 : t.palette.primary_975, + }, + ], + textSelected: [], + checkboxSelected: [ + { + backgroundColor: t.palette.primary_500, + }, + ], + }), + [t], + ) + + return ( + <View + style={[ + a.relative, + a.w_full, + a.p_md, + a.rounded_md, + a.overflow_hidden, + t.atoms.bg_contrast_50, + (ctx.hovered || ctx.focused || ctx.pressed) && styles.active, + ctx.selected && styles.selected, + ctx.selected && + (ctx.hovered || ctx.focused || ctx.pressed) && + styles.selectedHover, + ]}> + <View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}> + <View + style={[ + { + width: 44, + height: 44, + }, + a.rounded_sm, + a.overflow_hidden, + t.atoms.bg, + ]}> + <Image + source={{uri: feed.avatar}} + style={[a.w_full, a.h_full]} + accessibilityIgnoresInvertColors + /> + </View> + + <View style={[a.pt_2xs, a.flex_grow]}> + <H3 + style={[ + a.text_md, + a.font_bold, + ctx.selected && styles.textSelected, + ]}> + {feed.displayName} + </H3> + <Text + style={[ + {opacity: 0.8}, + a.pt_xs, + ctx.selected && styles.textSelected, + ]}> + @{feed.creatorHandle} + </Text> + </View> + + <View + style={[ + a.justify_center, + a.align_center, + a.rounded_sm, + t.atoms.bg, + ctx.selected && styles.checkboxSelected, + { + width: 28, + height: 28, + }, + ]}> + {ctx.selected && <Check size="sm" fill={t.palette.white} />} + </View> + </View> + + <View + style={[ + { + opacity: ctx.selected ? 0.3 : 1, + borderTopWidth: 1, + }, + a.mt_md, + a.w_full, + t.name === 'light' ? t.atoms.border : t.atoms.border_contrast, + ctx.selected && { + borderTopColor: t.palette.primary_200, + }, + ]} + /> + + <View style={[a.pt_md]}> + <RichText value={feed.description} disableLinks /> + </View> + </View> + ) +} + +export function FeedCard({config}: {config: FeedConfig}) { + const {_} = useLingui() + const {data: feed} = useFeedSourceInfoQuery({uri: config.uri}) + + return !feed ? ( + <FeedCardPlaceholder /> + ) : feed.avatar ? ( + <Toggle.Item + name={feed.uri} + label={_(msg`Subscribe to the ${feed.displayName} feed`)}> + <FeedCardInner config={config} feed={feed} /> + </Toggle.Item> + ) : null +} + +export function FeedCardPlaceholder({primary}: {primary?: boolean}) { + const t = useTheme() + return ( + <View + style={[ + a.relative, + a.w_full, + a.p_md, + a.rounded_md, + a.overflow_hidden, + t.atoms.bg_contrast_25, + ]}> + <View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}> + <View + style={[ + { + width: primary ? 64 : 44, + height: primary ? 64 : 44, + }, + a.rounded_sm, + a.overflow_hidden, + t.atoms.bg_contrast_100, + ]} + /> + + <View style={[a.pt_2xs, a.flex_grow, a.gap_sm]}> + <View + style={[ + {width: 100, height: primary ? 20 : 16}, + a.rounded_sm, + t.atoms.bg_contrast_100, + ]} + /> + <View + style={[ + {width: 60, height: 12}, + a.rounded_sm, + t.atoms.bg_contrast_100, + ]} + /> + </View> + </View> + + <View + style={[ + { + borderTopWidth: 1, + }, + a.mt_md, + a.w_full, + t.atoms.border, + ]} + /> + + <View style={[a.pt_md, a.gap_xs]}> + <View + style={[ + {width: '60%', height: 12}, + a.rounded_sm, + t.atoms.bg_contrast_100, + ]} + /> + </View> + </View> + ) +} diff --git a/src/screens/Onboarding/StepAlgoFeeds/index.tsx b/src/screens/Onboarding/StepAlgoFeeds/index.tsx new file mode 100644 index 000000000..4920c5ad7 --- /dev/null +++ b/src/screens/Onboarding/StepAlgoFeeds/index.tsx @@ -0,0 +1,160 @@ +import React from 'react' +import {View} from 'react-native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' + +import {atoms as a, tokens, useTheme} from '#/alf' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import * as Toggle from '#/components/forms/Toggle' +import {Text} from '#/components/Typography' +import {Loader} from '#/components/Loader' +import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle' +import {useAnalytics} from '#/lib/analytics/analytics' + +import {Context} from '#/screens/Onboarding/state' +import { + Title, + Description, + OnboardingControls, +} from '#/screens/Onboarding/Layout' +import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard' +import {IconCircle} from '#/screens/Onboarding/IconCircle' + +export type FeedConfig = { + default: boolean + uri: string + gradient?: typeof tokens.gradients.midnight | typeof tokens.gradients.nordic +} + +const PRIMARY_FEEDS: FeedConfig[] = [ + { + default: true, + uri: 'at://did:plc:wqowuobffl66jv3kpsvo7ak4/app.bsky.feed.generator/the-algorithm', + gradient: tokens.gradients.midnight, + }, + { + default: false, + uri: 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot', + gradient: tokens.gradients.midnight, + }, +] + +const SECONDARY_FEEDS: FeedConfig[] = [ + { + default: false, + uri: 'at://did:plc:vpkhqolt662uhesyj6nxm7ys/app.bsky.feed.generator/infreq', + }, + { + default: false, + uri: 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/with-friends', + }, + { + default: false, + uri: 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/best-of-follows', + }, + { + default: false, + uri: 'at://did:plc:tenurhgjptubkk5zf5qhi3og/app.bsky.feed.generator/catch-up', + }, + { + default: false, + uri: 'at://did:plc:q6gjnaw2blty4crticxkmujt/app.bsky.feed.generator/at-bangers', + }, +] + +export function StepAlgoFeeds() { + const {_} = useLingui() + const {track} = useAnalytics() + const t = useTheme() + const {state, dispatch} = React.useContext(Context) + const [primaryFeedUris, setPrimaryFeedUris] = React.useState<string[]>( + PRIMARY_FEEDS.map(f => (f.default ? f.uri : '')).filter(Boolean), + ) + const [secondaryFeedUris, setSeconaryFeedUris] = React.useState<string[]>([]) + const [saving, setSaving] = React.useState(false) + + const saveFeeds = React.useCallback(async () => { + setSaving(true) + + const uris = primaryFeedUris.concat(secondaryFeedUris) + dispatch({type: 'setAlgoFeedsStepResults', feedUris: uris}) + + setSaving(false) + dispatch({type: 'next'}) + track('OnboardingV2:StepAlgoFeeds:End', { + selectedPrimaryFeeds: primaryFeedUris, + selectedPrimaryFeedsLength: primaryFeedUris.length, + selectedSecondaryFeeds: secondaryFeedUris, + selectedSecondaryFeedsLength: secondaryFeedUris.length, + }) + }, [primaryFeedUris, secondaryFeedUris, dispatch, track]) + + React.useEffect(() => { + track('OnboardingV2:StepAlgoFeeds:Start') + }, [track]) + + return ( + <View style={[a.align_start]}> + <IconCircle icon={ListSparkle} style={[a.mb_2xl]} /> + + <Title> + <Trans>Choose your algorithmic feeds</Trans> + </Title> + <Description> + <Trans> + Feeds are created by users and can give you entirely new experiences. + </Trans> + </Description> + + <View style={[a.w_full, a.pb_2xl]}> + <Toggle.Group + values={primaryFeedUris} + onChange={setPrimaryFeedUris} + label={_(msg`Select your primary algorithmic feeds`)}> + <Text + style={[a.text_md, a.pt_4xl, a.pb_md, t.atoms.text_contrast_700]}> + <Trans>We recommend "For You" by Skygaze:</Trans> + </Text> + <FeedCard config={PRIMARY_FEEDS[0]} /> + <Text + style={[a.text_md, a.pt_4xl, a.pb_lg, t.atoms.text_contrast_700]}> + <Trans>Or you can try our "Discover" algorithm:</Trans> + </Text> + <FeedCard config={PRIMARY_FEEDS[1]} /> + </Toggle.Group> + + <Toggle.Group + values={secondaryFeedUris} + onChange={setSeconaryFeedUris} + label={_(msg`Select your secondary algorithmic feeds`)}> + <Text + style={[a.text_md, a.pt_4xl, a.pb_lg, t.atoms.text_contrast_700]}> + <Trans>There are many feeds to try:</Trans> + </Text> + <View style={[a.gap_md]}> + {SECONDARY_FEEDS.map(config => ( + <FeedCard key={config.uri} config={config} /> + ))} + </View> + </Toggle.Group> + </View> + + <OnboardingControls.Portal> + <Button + disabled={saving} + key={state.activeStep} // remove focus state on nav + variant="gradient" + color="gradient_sky" + size="large" + label={_(msg`Continue to the next step`)} + onPress={saveFeeds}> + <ButtonText> + <Trans>Continue</Trans> + </ButtonText> + <ButtonIcon icon={saving ? Loader : ChevronRight} position="right" /> + </Button> + </OnboardingControls.Portal> + </View> + ) +} |