robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
callie.on-her.computer
1import {View} from 'react-native'
2import {type AppBskyNotificationDeclaration} from '@atproto/api'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {
7 type AllNavigatorParams,
8 type NativeStackScreenProps,
9} from '#/lib/routes/types'
10import {
11 useNotificationDeclarationMutation,
12 useNotificationDeclarationQuery,
13} from '#/state/queries/activity-subscriptions'
14import {atoms as a, useTheme} from '#/alf'
15import {Admonition} from '#/components/Admonition'
16import * as Toggle from '#/components/forms/Toggle'
17import {BellRinging_Stroke2_Corner0_Rounded as BellRingingIcon} from '#/components/icons/BellRinging'
18import * as Layout from '#/components/Layout'
19import {Loader} from '#/components/Loader'
20import * as SettingsList from './components/SettingsList'
21import {ItemTextWithSubtitle} from './NotificationSettings/components/ItemTextWithSubtitle'
22
23type Props = NativeStackScreenProps<
24 AllNavigatorParams,
25 'ActivityPrivacySettings'
26>
27export function ActivityPrivacySettingsScreen({}: Props) {
28 const {
29 data: notificationDeclaration,
30 isPending,
31 isError,
32 } = useNotificationDeclarationQuery()
33
34 return (
35 <Layout.Screen>
36 <Layout.Header.Outer>
37 <Layout.Header.BackButton />
38 <Layout.Header.Content>
39 <Layout.Header.TitleText>
40 <Trans>Privacy and Security</Trans>
41 </Layout.Header.TitleText>
42 </Layout.Header.Content>
43 <Layout.Header.Slot />
44 </Layout.Header.Outer>
45 <Layout.Content>
46 <SettingsList.Container>
47 <SettingsList.Item style={[a.align_start]}>
48 <SettingsList.ItemIcon icon={BellRingingIcon} />
49 <ItemTextWithSubtitle
50 bold
51 titleText={
52 <Trans>Allow others to be notified of your posts</Trans>
53 }
54 subtitleText={
55 <Trans>
56 This feature allows users to receive notifications for your
57 new posts and replies. Who do you want to enable this for?
58 </Trans>
59 }
60 />
61 </SettingsList.Item>
62 <View style={[a.px_xl, a.pt_md]}>
63 {isError ? (
64 <Admonition type="error">
65 <Trans>Failed to load preference.</Trans>
66 </Admonition>
67 ) : isPending ? (
68 <View style={[a.w_full, a.pt_5xl, a.align_center]}>
69 <Loader size="xl" />
70 </View>
71 ) : (
72 <Inner notificationDeclaration={notificationDeclaration} />
73 )}
74 </View>
75 </SettingsList.Container>
76 </Layout.Content>
77 </Layout.Screen>
78 )
79}
80
81export function Inner({
82 notificationDeclaration,
83}: {
84 notificationDeclaration: {
85 uri?: string
86 cid?: string
87 value: AppBskyNotificationDeclaration.Record
88 }
89}) {
90 const t = useTheme()
91 const {_} = useLingui()
92 const {mutate} = useNotificationDeclarationMutation()
93
94 const onChangeFilter = ([declaration]: string[]) => {
95 mutate({
96 $type: 'app.bsky.notification.declaration',
97 allowSubscriptions: declaration,
98 })
99 }
100
101 return (
102 <Toggle.Group
103 type="radio"
104 label={_(
105 msg`Filter who can opt to receive notifications for your activity`,
106 )}
107 values={[notificationDeclaration.value.allowSubscriptions]}
108 onChange={onChangeFilter}>
109 <View style={[a.gap_sm]}>
110 <Toggle.Item
111 label={_(msg`Anyone who follows me`)}
112 name="followers"
113 style={[a.flex_row, a.py_xs, a.gap_sm]}>
114 <Toggle.Radio />
115 <Toggle.LabelText style={[t.atoms.text, a.font_normal, a.text_md]}>
116 <Trans>Anyone who follows me</Trans>
117 </Toggle.LabelText>
118 </Toggle.Item>
119 <Toggle.Item
120 label={_(msg`Only followers who I follow`)}
121 name="mutuals"
122 style={[a.flex_row, a.py_xs, a.gap_sm]}>
123 <Toggle.Radio />
124 <Toggle.LabelText style={[t.atoms.text, a.font_normal, a.text_md]}>
125 <Trans>Only followers who I follow</Trans>
126 </Toggle.LabelText>
127 </Toggle.Item>
128 <Toggle.Item
129 label={_(msg`No one`)}
130 name="none"
131 style={[a.flex_row, a.py_xs, a.gap_sm]}>
132 <Toggle.Radio />
133 <Toggle.LabelText style={[t.atoms.text, a.font_normal, a.text_md]}>
134 <Trans>No one</Trans>
135 </Toggle.LabelText>
136 </Toggle.Item>
137 </View>
138 </Toggle.Group>
139 )
140}