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