forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {View} from 'react-native'
2import {msg, Trans} from '@lingui/macro'
3import {useLingui} from '@lingui/react'
4
5import {urls} from '#/lib/constants'
6import {logger} from '#/logger'
7import {
8 usePreferencesQuery,
9 type UsePreferencesQueryResponse,
10} from '#/state/queries/preferences'
11import {useSetVerificationPrefsMutation} from '#/state/queries/preferences'
12import * as SettingsList from '#/screens/Settings/components/SettingsList'
13import {atoms as a, useGutters} from '#/alf'
14import {Admonition} from '#/components/Admonition'
15import * as Toggle from '#/components/forms/Toggle'
16import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '#/components/icons/CircleCheck'
17import * as Layout from '#/components/Layout'
18import {InlineLinkText} from '#/components/Link'
19import {Loader} from '#/components/Loader'
20
21export function Screen() {
22 const {_} = useLingui()
23 const gutters = useGutters(['base'])
24 const {data: preferences} = usePreferencesQuery()
25
26 return (
27 <Layout.Screen testID="ModerationVerificationSettingsScreen">
28 <Layout.Header.Outer>
29 <Layout.Header.BackButton />
30 <Layout.Header.Content>
31 <Layout.Header.TitleText>
32 <Trans>Verification Settings</Trans>
33 </Layout.Header.TitleText>
34 </Layout.Header.Content>
35 <Layout.Header.Slot />
36 </Layout.Header.Outer>
37 <Layout.Content>
38 <SettingsList.Container>
39 <SettingsList.Item>
40 <Admonition type="tip" style={[a.flex_1]}>
41 <Trans>
42 Verifications on Bluesky work differently than on other
43 platforms.{' '}
44 <InlineLinkText
45 overridePresentation
46 to={urls.website.blog.initialVerificationAnnouncement}
47 label={_(
48 msg({
49 message: `Learn more`,
50 context: `english-only-resource`,
51 }),
52 )}
53 onPress={() => {
54 logger.metric(
55 'verification:learn-more',
56 {
57 location: 'verificationSettings',
58 },
59 {statsig: true},
60 )
61 }}>
62 Learn more here.
63 </InlineLinkText>
64 </Trans>
65 </Admonition>
66 </SettingsList.Item>
67 {preferences ? (
68 <Inner preferences={preferences} />
69 ) : (
70 <View style={[gutters, a.justify_center, a.align_center]}>
71 <Loader size="xl" />
72 </View>
73 )}
74 </SettingsList.Container>
75 </Layout.Content>
76 </Layout.Screen>
77 )
78}
79
80function Inner({preferences}: {preferences: UsePreferencesQueryResponse}) {
81 const {_} = useLingui()
82 const {hideBadges} = preferences.verificationPrefs
83 const {mutate: setVerificationPrefs, isPending} =
84 useSetVerificationPrefsMutation()
85
86 return (
87 <Toggle.Item
88 type="checkbox"
89 name="hideBadges"
90 label={_(msg`Hide verification badges`)}
91 value={hideBadges}
92 disabled={isPending}
93 onChange={value => {
94 setVerificationPrefs({hideBadges: value})
95 }}>
96 <SettingsList.Item>
97 <SettingsList.ItemIcon icon={CircleCheck} />
98 <SettingsList.ItemText>
99 <Trans>Hide verification badges</Trans>
100 </SettingsList.ItemText>
101 <Toggle.Platform />
102 </SettingsList.Item>
103 </Toggle.Item>
104 )
105}