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