Samuel Newman
0cbb03cd14
* new follow-10 progress guide * find follows dialog * wip tabs * flatlist version with search * hardcode out jake gold * lazy load followup suggestions * Update src/components/ProgressGuide/FollowDialog.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * comment out replacing, enable paging * rm autofocus * find shadow profiles in paginated search * clear search when press tabs * better tab a11y * fix label * adjust scroll indicator insets * do the same scroll indicator adjustment for searchable people list * hardcode jake to just be 'tech' * Retain state on close/reopen * only change follow btn color when not followed * add guide to inside dialog * fix task alignment * Enable contextual suggestions * WIP: show multiple suggestions * Rework so it animates well * Show more items * remove card style * move tabs to own component * split out header top * scroll active tab into view * rm log * Improve perf a bit * boost popular interests over alphabetical ones * scroll active tab into view * revert back to round buttons * Fix overrenders of the tab bar items * Fix unintended animation * Scroll initial into view if needed * Unlift state, the dialog thing breaks lifting * Persist simply * Fix empty state * Fix incorrect gate exposure * Fix another bad useGate * Nit --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import {StyleProp, View, ViewStyle} from 'react-native'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {
|
|
useProgressGuide,
|
|
useProgressGuideControls,
|
|
} from '#/state/shell/progress-guide'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Button, ButtonIcon} from '#/components/Button'
|
|
import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times'
|
|
import {Text} from '#/components/Typography'
|
|
import {FollowDialog} from './FollowDialog'
|
|
import {ProgressGuideTask} from './Task'
|
|
|
|
export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
const followProgressGuide = useProgressGuide('follow-10')
|
|
const followAndLikeProgressGuide = useProgressGuide('like-10-and-follow-7')
|
|
const guide = followProgressGuide || followAndLikeProgressGuide
|
|
const {endProgressGuide} = useProgressGuideControls()
|
|
|
|
if (guide) {
|
|
return (
|
|
<View style={[a.flex_col, a.gap_md, style]}>
|
|
<View style={[a.flex_row, a.align_center, a.justify_between]}>
|
|
<Text
|
|
style={[
|
|
t.atoms.text_contrast_medium,
|
|
a.font_bold,
|
|
a.text_sm,
|
|
{textTransform: 'uppercase'},
|
|
]}>
|
|
<Trans>Getting started</Trans>
|
|
</Text>
|
|
<Button
|
|
variant="ghost"
|
|
size="tiny"
|
|
color="secondary"
|
|
shape="round"
|
|
label={_(msg`Dismiss getting started guide`)}
|
|
onPress={endProgressGuide}>
|
|
<ButtonIcon icon={Times} size="sm" />
|
|
</Button>
|
|
</View>
|
|
{guide.guide === 'follow-10' && (
|
|
<>
|
|
<ProgressGuideTask
|
|
current={guide.numFollows + 1}
|
|
total={10 + 1}
|
|
title={_(msg`Follow 10 accounts`)}
|
|
subtitle={_(msg`Bluesky is better with friends!`)}
|
|
/>
|
|
<FollowDialog guide={guide} />
|
|
</>
|
|
)}
|
|
{guide.guide === 'like-10-and-follow-7' && (
|
|
<>
|
|
<ProgressGuideTask
|
|
current={guide.numLikes + 1}
|
|
total={10 + 1}
|
|
title={_(msg`Like 10 posts`)}
|
|
subtitle={_(msg`Teach our algorithm what you like`)}
|
|
/>
|
|
<ProgressGuideTask
|
|
current={guide.numFollows + 1}
|
|
total={7 + 1}
|
|
title={_(msg`Follow 7 accounts`)}
|
|
subtitle={_(msg`Bluesky is better with friends!`)}
|
|
/>
|
|
</>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
return null
|
|
}
|