jeanmachine.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Reporting] Add new reporting categories and reasons (#9079)
* start adding new report reasons
* cleanup
* use updated types
* cleanup open/closed logic
* other fix
* state fix
* rename type
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/index.tsx
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Update src/components/moderation/ReportDialog/utils/useReportOptions.ts
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* add mapping
* Replace consts and maps using exported values
* Map to deprecated reason if necessary, send some reports only to Bluesky
* Use only new report reason types
* Cleanup
* Bump package, integrate new reasons
* Adjust sorting, return type, integrate feedback
* Just remove sort
* Finish 'other' handling
* Update descriptions
* Just invert filter logic, no functional change but feels more correct
* Clarify handling
* fix deep imports
* fix type error
* [Reporting] Integrate new `ReportDialog` into DMs (#9213)
* Update types, fork copy for convo vs message
* Integrate in remaining spots
* Replace DoneStep with separate dialog that opens after reporting
* Handle profile error state by just showing a success message
* Delete old dms ReportDialog
* Chats only go to bsky
* Only open block or delete dialog if submitted successfully
* make close button always large
* prevent expansion of blockordelete dialog
* Delete old report dialog (#9214)e
* Skip labeler selection for Bluesky-only cases
* Rename AfterReportDialog
---------
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---------
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
authored by
hailey
surfdude29
Samuel Newman
Eric Bailey
and committed by
GitHub
d6ca9e6b
fd14bbfe
+984
-1368
-85
src/components/ReportDialog/SelectLabelerView.tsx
-85
src/components/ReportDialog/SelectLabelerView.tsx
···
1
-
import {View} from 'react-native'
2
-
import {type AppBskyLabelerDefs} from '@atproto/api'
3
-
import {msg, Trans} from '@lingui/macro'
4
-
import {useLingui} from '@lingui/react'
5
-
6
-
import {getLabelingServiceTitle} from '#/lib/moderation'
7
-
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
8
-
import {Button, useButtonContext} from '#/components/Button'
9
-
import {Divider} from '#/components/Divider'
10
-
import * as LabelingServiceCard from '#/components/LabelingServiceCard'
11
-
import {Text} from '#/components/Typography'
12
-
import {type ReportDialogProps} from './types'
13
-
14
-
export function SelectLabelerView({
15
-
...props
16
-
}: ReportDialogProps & {
17
-
labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
18
-
onSelectLabeler: (v: string) => void
19
-
}) {
20
-
const t = useTheme()
21
-
const {_} = useLingui()
22
-
const {gtMobile} = useBreakpoints()
23
-
24
-
return (
25
-
<View style={[a.gap_lg]}>
26
-
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
27
-
<Text style={[a.text_2xl, a.font_semi_bold]}>
28
-
<Trans>Select moderator</Trans>
29
-
</Text>
30
-
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
31
-
<Trans>To whom would you like to send this report?</Trans>
32
-
</Text>
33
-
</View>
34
-
35
-
<Divider />
36
-
37
-
<View style={[a.gap_sm]}>
38
-
{props.labelers.map(labeler => {
39
-
return (
40
-
<Button
41
-
key={labeler.creator.did}
42
-
label={_(msg`Send report to ${labeler.creator.displayName}`)}
43
-
onPress={() => props.onSelectLabeler(labeler.creator.did)}>
44
-
<LabelerButton labeler={labeler} />
45
-
</Button>
46
-
)
47
-
})}
48
-
</View>
49
-
</View>
50
-
)
51
-
}
52
-
53
-
function LabelerButton({
54
-
labeler,
55
-
}: {
56
-
labeler: AppBskyLabelerDefs.LabelerViewDetailed
57
-
}) {
58
-
const t = useTheme()
59
-
const {hovered, pressed} = useButtonContext()
60
-
const interacted = hovered || pressed
61
-
62
-
return (
63
-
<LabelingServiceCard.Outer
64
-
style={[
65
-
a.p_md,
66
-
a.rounded_sm,
67
-
t.atoms.bg_contrast_25,
68
-
interacted && t.atoms.bg_contrast_50,
69
-
]}>
70
-
<LabelingServiceCard.Avatar avatar={labeler.creator.avatar} />
71
-
<LabelingServiceCard.Content>
72
-
<LabelingServiceCard.Title
73
-
value={getLabelingServiceTitle({
74
-
displayName: labeler.creator.displayName,
75
-
handle: labeler.creator.handle,
76
-
})}
77
-
/>
78
-
<Text
79
-
style={[t.atoms.text_contrast_medium, a.text_sm, a.font_semi_bold]}>
80
-
@{labeler.creator.handle}
81
-
</Text>
82
-
</LabelingServiceCard.Content>
83
-
</LabelingServiceCard.Outer>
84
-
)
85
-
}
-195
src/components/ReportDialog/SelectReportOptionView.tsx
-195
src/components/ReportDialog/SelectReportOptionView.tsx
···
1
-
import React from 'react'
2
-
import {View} from 'react-native'
3
-
import {type AppBskyLabelerDefs} from '@atproto/api'
4
-
import {msg, Trans} from '@lingui/macro'
5
-
import {useLingui} from '@lingui/react'
6
-
7
-
import {
8
-
type ReportOption,
9
-
useReportOptions,
10
-
} from '#/lib/moderation/useReportOptions'
11
-
import {Link} from '#/components/Link'
12
-
import {DMCA_LINK} from '#/components/ReportDialog/const'
13
-
export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
14
-
15
-
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
16
-
import {
17
-
Button,
18
-
ButtonIcon,
19
-
ButtonText,
20
-
useButtonContext,
21
-
} from '#/components/Button'
22
-
import {Divider} from '#/components/Divider'
23
-
import {
24
-
ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft,
25
-
ChevronRight_Stroke2_Corner0_Rounded as ChevronRight,
26
-
} from '#/components/icons/Chevron'
27
-
import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from '#/components/icons/SquareArrowTopRight'
28
-
import {Text} from '#/components/Typography'
29
-
import {type ReportDialogProps} from './types'
30
-
31
-
export function SelectReportOptionView(props: {
32
-
params: ReportDialogProps['params']
33
-
labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
34
-
onSelectReportOption: (reportOption: ReportOption) => void
35
-
goBack: () => void
36
-
}) {
37
-
const t = useTheme()
38
-
const {_} = useLingui()
39
-
const {gtMobile} = useBreakpoints()
40
-
const allReportOptions = useReportOptions()
41
-
const reportOptions = allReportOptions[props.params.type]
42
-
43
-
const i18n = React.useMemo(() => {
44
-
let title = _(msg`Report this content`)
45
-
let description = _(msg`Why should this content be reviewed?`)
46
-
47
-
if (props.params.type === 'account') {
48
-
title = _(msg`Report this user`)
49
-
description = _(msg`Why should this user be reviewed?`)
50
-
} else if (props.params.type === 'post') {
51
-
title = _(msg`Report this post`)
52
-
description = _(msg`Why should this post be reviewed?`)
53
-
} else if (props.params.type === 'list') {
54
-
title = _(msg`Report this list`)
55
-
description = _(msg`Why should this list be reviewed?`)
56
-
} else if (props.params.type === 'feedgen') {
57
-
title = _(msg`Report this feed`)
58
-
description = _(msg`Why should this feed be reviewed?`)
59
-
} else if (props.params.type === 'starterpack') {
60
-
title = _(msg`Report this starter pack`)
61
-
description = _(msg`Why should this starter pack be reviewed?`)
62
-
} else if (props.params.type === 'convoMessage') {
63
-
title = _(msg`Report this message`)
64
-
description = _(msg`Why should this message be reviewed?`)
65
-
}
66
-
67
-
return {
68
-
title,
69
-
description,
70
-
}
71
-
}, [_, props.params.type])
72
-
73
-
return (
74
-
<View style={[a.gap_lg]}>
75
-
{props.labelers?.length > 1 ? (
76
-
<Button
77
-
size="small"
78
-
variant="solid"
79
-
color="secondary"
80
-
shape="round"
81
-
label={_(msg`Go back to previous step`)}
82
-
onPress={props.goBack}>
83
-
<ButtonIcon icon={ChevronLeft} />
84
-
</Button>
85
-
) : null}
86
-
87
-
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
88
-
<Text style={[a.text_2xl, a.font_semi_bold]}>{i18n.title}</Text>
89
-
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
90
-
{i18n.description}
91
-
</Text>
92
-
</View>
93
-
94
-
<Divider />
95
-
96
-
<View style={[a.gap_sm]}>
97
-
{reportOptions.map(reportOption => {
98
-
return (
99
-
<Button
100
-
key={reportOption.reason}
101
-
testID={reportOption.reason}
102
-
label={_(msg`Create report for ${reportOption.title}`)}
103
-
onPress={() => props.onSelectReportOption(reportOption)}>
104
-
<ReportOptionButton
105
-
title={reportOption.title}
106
-
description={reportOption.description}
107
-
/>
108
-
</Button>
109
-
)
110
-
})}
111
-
112
-
{(props.params.type === 'post' || props.params.type === 'account') && (
113
-
<View
114
-
style={[
115
-
a.flex_row,
116
-
a.align_center,
117
-
a.justify_between,
118
-
a.gap_lg,
119
-
a.p_md,
120
-
a.pl_lg,
121
-
a.rounded_md,
122
-
t.atoms.bg_contrast_900,
123
-
]}>
124
-
<Text
125
-
style={[
126
-
a.flex_1,
127
-
t.atoms.text_inverted,
128
-
a.italic,
129
-
a.leading_snug,
130
-
]}>
131
-
<Trans>Need to report a copyright violation?</Trans>
132
-
</Text>
133
-
<Link
134
-
to={DMCA_LINK}
135
-
label={_(msg`View details for reporting a copyright violation`)}
136
-
size="small"
137
-
variant="solid"
138
-
color="secondary">
139
-
<ButtonText>
140
-
<Trans>View details</Trans>
141
-
</ButtonText>
142
-
<ButtonIcon position="right" icon={SquareArrowTopRight} />
143
-
</Link>
144
-
</View>
145
-
)}
146
-
</View>
147
-
</View>
148
-
)
149
-
}
150
-
151
-
function ReportOptionButton({
152
-
title,
153
-
description,
154
-
}: {
155
-
title: string
156
-
description: string
157
-
}) {
158
-
const t = useTheme()
159
-
const {hovered, pressed} = useButtonContext()
160
-
const interacted = hovered || pressed
161
-
162
-
return (
163
-
<View
164
-
style={[
165
-
a.w_full,
166
-
a.flex_row,
167
-
a.align_center,
168
-
a.justify_between,
169
-
a.p_md,
170
-
a.rounded_md,
171
-
{paddingRight: 70},
172
-
t.atoms.bg_contrast_25,
173
-
interacted && t.atoms.bg_contrast_50,
174
-
]}>
175
-
<View style={[a.flex_1, a.gap_xs]}>
176
-
<Text
177
-
style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}>
178
-
{title}
179
-
</Text>
180
-
<Text style={[a.leading_tight, {maxWidth: 400}]}>{description}</Text>
181
-
</View>
182
-
183
-
<View
184
-
style={[
185
-
a.absolute,
186
-
a.inset_0,
187
-
a.justify_center,
188
-
a.pr_md,
189
-
{left: 'auto'},
190
-
]}>
191
-
<ChevronRight size="md" fill={t.atoms.text_contrast_low.color} />
192
-
</View>
193
-
</View>
194
-
)
195
-
}
-274
src/components/ReportDialog/SubmitView.tsx
-274
src/components/ReportDialog/SubmitView.tsx
···
1
-
import React from 'react'
2
-
import {View} from 'react-native'
3
-
import {type AppBskyLabelerDefs} from '@atproto/api'
4
-
import {msg, Trans} from '@lingui/macro'
5
-
import {useLingui} from '@lingui/react'
6
-
7
-
import {getLabelingServiceTitle} from '#/lib/moderation'
8
-
import {type ReportOption} from '#/lib/moderation/useReportOptions'
9
-
import {isAndroid} from '#/platform/detection'
10
-
import {useAgent} from '#/state/session'
11
-
import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
12
-
import * as Toast from '#/view/com/util/Toast'
13
-
import {atoms as a, native, useTheme} from '#/alf'
14
-
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
15
-
import * as Dialog from '#/components/Dialog'
16
-
import * as Toggle from '#/components/forms/Toggle'
17
-
import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
18
-
import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
19
-
import {PaperPlane_Stroke2_Corner0_Rounded as SendIcon} from '#/components/icons/PaperPlane'
20
-
import {Loader} from '#/components/Loader'
21
-
import {Text} from '#/components/Typography'
22
-
import {type ReportDialogProps} from './types'
23
-
24
-
export function SubmitView({
25
-
params,
26
-
labelers,
27
-
selectedLabeler,
28
-
selectedReportOption,
29
-
goBack,
30
-
onSubmitComplete,
31
-
}: ReportDialogProps & {
32
-
labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
33
-
selectedLabeler: string
34
-
selectedReportOption: ReportOption
35
-
goBack: () => void
36
-
onSubmitComplete: () => void
37
-
}) {
38
-
const t = useTheme()
39
-
const {_} = useLingui()
40
-
const agent = useAgent()
41
-
const [details, setDetails] = React.useState<string>('')
42
-
const [submitting, setSubmitting] = React.useState<boolean>(false)
43
-
const [selectedServices, setSelectedServices] = React.useState<string[]>([
44
-
selectedLabeler,
45
-
])
46
-
const [error, setError] = React.useState('')
47
-
48
-
const submit = React.useCallback(async () => {
49
-
setSubmitting(true)
50
-
setError('')
51
-
52
-
const $type =
53
-
params.type === 'account'
54
-
? 'com.atproto.admin.defs#repoRef'
55
-
: 'com.atproto.repo.strongRef'
56
-
const report = {
57
-
reasonType: selectedReportOption.reason,
58
-
subject: {
59
-
$type,
60
-
...params,
61
-
},
62
-
reason: details,
63
-
}
64
-
const results = await Promise.all(
65
-
selectedServices.map(did => {
66
-
return agent
67
-
.createModerationReport(report, {
68
-
encoding: 'application/json',
69
-
headers: {
70
-
'atproto-proxy': `${did}#atproto_labeler`,
71
-
},
72
-
})
73
-
.then(
74
-
_ => true,
75
-
_ => false,
76
-
)
77
-
}),
78
-
)
79
-
80
-
setSubmitting(false)
81
-
82
-
if (results.includes(true)) {
83
-
Toast.show(_(msg`Thank you. Your report has been sent.`))
84
-
onSubmitComplete()
85
-
} else {
86
-
setError(
87
-
_(
88
-
msg`There was an issue sending your report. Please check your internet connection.`,
89
-
),
90
-
)
91
-
}
92
-
}, [
93
-
_,
94
-
params,
95
-
details,
96
-
selectedReportOption,
97
-
selectedServices,
98
-
onSubmitComplete,
99
-
setError,
100
-
agent,
101
-
])
102
-
103
-
return (
104
-
<View style={[a.gap_2xl]}>
105
-
<Button
106
-
size="small"
107
-
variant="solid"
108
-
color="secondary"
109
-
shape="round"
110
-
label={_(msg`Go back to previous step`)}
111
-
onPress={goBack}>
112
-
<ButtonIcon icon={ChevronLeft} />
113
-
</Button>
114
-
115
-
<View
116
-
style={[
117
-
a.w_full,
118
-
a.flex_row,
119
-
a.align_center,
120
-
a.justify_between,
121
-
a.gap_lg,
122
-
a.p_md,
123
-
a.rounded_md,
124
-
a.border,
125
-
t.atoms.border_contrast_low,
126
-
]}>
127
-
<View style={[a.flex_1, a.gap_xs]}>
128
-
<Text style={[a.text_md, a.font_semi_bold]}>
129
-
{selectedReportOption.title}
130
-
</Text>
131
-
<Text style={[a.leading_tight, {maxWidth: 400}]}>
132
-
{selectedReportOption.description}
133
-
</Text>
134
-
</View>
135
-
136
-
<Check size="md" style={[a.pr_sm, t.atoms.text_contrast_low]} />
137
-
</View>
138
-
139
-
<View style={[a.gap_md]}>
140
-
<Text style={[t.atoms.text_contrast_medium]}>
141
-
<Trans>Select the moderation service(s) to report to</Trans>
142
-
</Text>
143
-
144
-
<Toggle.Group
145
-
label="Select mod services"
146
-
values={selectedServices}
147
-
onChange={setSelectedServices}>
148
-
<View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
149
-
{labelers.map(labeler => {
150
-
const title = getLabelingServiceTitle({
151
-
displayName: labeler.creator.displayName,
152
-
handle: labeler.creator.handle,
153
-
})
154
-
return (
155
-
<Toggle.Item
156
-
key={labeler.creator.did}
157
-
name={labeler.creator.did}
158
-
label={title}>
159
-
<LabelerToggle title={title} />
160
-
</Toggle.Item>
161
-
)
162
-
})}
163
-
</View>
164
-
</Toggle.Group>
165
-
</View>
166
-
<View style={[a.gap_md]}>
167
-
<Text style={[t.atoms.text_contrast_medium]}>
168
-
<Trans>Optionally provide additional information below:</Trans>
169
-
</Text>
170
-
171
-
<View style={[a.relative, a.w_full]}>
172
-
<Dialog.Input
173
-
multiline
174
-
value={details}
175
-
onChangeText={setDetails}
176
-
label="Text field"
177
-
style={{paddingRight: 60}}
178
-
numberOfLines={6}
179
-
/>
180
-
181
-
<View
182
-
style={[
183
-
a.absolute,
184
-
a.flex_row,
185
-
a.align_center,
186
-
a.pr_md,
187
-
a.pb_sm,
188
-
{
189
-
bottom: 0,
190
-
right: 0,
191
-
},
192
-
]}>
193
-
<CharProgress count={details?.length || 0} />
194
-
</View>
195
-
</View>
196
-
</View>
197
-
198
-
<View style={[a.flex_row, a.align_center, a.justify_end, a.gap_lg]}>
199
-
{!selectedServices.length ||
200
-
(error && (
201
-
<Text
202
-
style={[
203
-
a.flex_1,
204
-
a.italic,
205
-
a.leading_snug,
206
-
t.atoms.text_contrast_medium,
207
-
]}>
208
-
{error ? (
209
-
error
210
-
) : (
211
-
<Trans>You must select at least one labeler for a report</Trans>
212
-
)}
213
-
</Text>
214
-
))}
215
-
216
-
<Button
217
-
testID="sendReportBtn"
218
-
size="large"
219
-
variant="solid"
220
-
color="negative"
221
-
label={_(msg`Send report`)}
222
-
onPress={submit}
223
-
disabled={!selectedServices.length}>
224
-
<ButtonText>
225
-
<Trans>Send report</Trans>
226
-
</ButtonText>
227
-
<ButtonIcon icon={submitting ? Loader : SendIcon} />
228
-
</Button>
229
-
</View>
230
-
{/* Maybe fix this later -h */}
231
-
{isAndroid ? <View style={{height: 300}} /> : null}
232
-
</View>
233
-
)
234
-
}
235
-
236
-
function LabelerToggle({title}: {title: string}) {
237
-
const t = useTheme()
238
-
const ctx = Toggle.useItemContext()
239
-
240
-
return (
241
-
<View
242
-
style={[
243
-
a.flex_row,
244
-
a.align_center,
245
-
a.gap_md,
246
-
a.p_md,
247
-
a.pr_lg,
248
-
a.rounded_sm,
249
-
a.overflow_hidden,
250
-
t.atoms.bg_contrast_25,
251
-
ctx.selected && [t.atoms.bg_contrast_50],
252
-
]}>
253
-
<Toggle.Checkbox />
254
-
<View
255
-
style={[
256
-
a.flex_row,
257
-
a.align_center,
258
-
a.justify_between,
259
-
a.gap_lg,
260
-
a.z_10,
261
-
]}>
262
-
<Text
263
-
emoji
264
-
style={[
265
-
native({marginTop: 2}),
266
-
t.atoms.text_contrast_medium,
267
-
ctx.selected && t.atoms.text,
268
-
]}>
269
-
{title}
270
-
</Text>
271
-
</View>
272
-
</View>
273
-
)
274
-
}
-1
src/components/ReportDialog/const.ts
-1
src/components/ReportDialog/const.ts
···
1
-
export const DMCA_LINK = 'https://bsky.social/about/support/copyright'
-97
src/components/ReportDialog/index.tsx
-97
src/components/ReportDialog/index.tsx
···
1
-
import React from 'react'
2
-
import {Pressable, View} from 'react-native'
3
-
import {type ScrollView} from 'react-native-gesture-handler'
4
-
import {msg, Trans} from '@lingui/macro'
5
-
import {useLingui} from '@lingui/react'
6
-
7
-
import {type ReportOption} from '#/lib/moderation/useReportOptions'
8
-
import {useMyLabelersQuery} from '#/state/queries/preferences'
9
-
export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
10
-
11
-
import {type AppBskyLabelerDefs} from '@atproto/api'
12
-
13
-
import {atoms as a} from '#/alf'
14
-
import * as Dialog from '#/components/Dialog'
15
-
import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
16
-
import {Loader} from '#/components/Loader'
17
-
import {Text} from '#/components/Typography'
18
-
import {SelectLabelerView} from './SelectLabelerView'
19
-
import {SelectReportOptionView} from './SelectReportOptionView'
20
-
import {SubmitView} from './SubmitView'
21
-
import {type ReportDialogProps} from './types'
22
-
23
-
export function ReportDialog(props: ReportDialogProps) {
24
-
return (
25
-
<Dialog.Outer control={props.control}>
26
-
<Dialog.Handle />
27
-
<ReportDialogInner {...props} />
28
-
</Dialog.Outer>
29
-
)
30
-
}
31
-
32
-
function ReportDialogInner(props: ReportDialogProps) {
33
-
const {_} = useLingui()
34
-
const {
35
-
isLoading: isLabelerLoading,
36
-
data: labelers,
37
-
error,
38
-
} = useMyLabelersQuery({excludeNonConfigurableLabelers: true})
39
-
const isLoading = useDelayedLoading(500, isLabelerLoading)
40
-
41
-
const ref = React.useRef<ScrollView>(null)
42
-
43
-
return (
44
-
<Dialog.ScrollableInner label={_(msg`Report dialog`)} ref={ref}>
45
-
{isLoading ? (
46
-
<View style={[a.align_center, {height: 100}]}>
47
-
<Loader size="xl" />
48
-
{/* Here to capture focus for a hot sec to prevent flash */}
49
-
<Pressable accessible={false} />
50
-
</View>
51
-
) : error || !labelers ? (
52
-
<View>
53
-
<Text style={[a.text_md]}>
54
-
<Trans>Something went wrong, please try again.</Trans>
55
-
</Text>
56
-
</View>
57
-
) : (
58
-
<ReportDialogLoaded labelers={labelers} {...props} />
59
-
)}
60
-
</Dialog.ScrollableInner>
61
-
)
62
-
}
63
-
64
-
function ReportDialogLoaded(
65
-
props: ReportDialogProps & {
66
-
labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
67
-
},
68
-
) {
69
-
const [selectedLabeler, setSelectedLabeler] = React.useState<
70
-
string | undefined
71
-
>(props.labelers.length === 1 ? props.labelers[0].creator.did : undefined)
72
-
const [selectedReportOption, setSelectedReportOption] = React.useState<
73
-
ReportOption | undefined
74
-
>()
75
-
76
-
if (selectedReportOption && selectedLabeler) {
77
-
return (
78
-
<SubmitView
79
-
{...props}
80
-
selectedLabeler={selectedLabeler}
81
-
selectedReportOption={selectedReportOption}
82
-
goBack={() => setSelectedReportOption(undefined)}
83
-
onSubmitComplete={() => props.control.close()}
84
-
/>
85
-
)
86
-
}
87
-
if (selectedLabeler) {
88
-
return (
89
-
<SelectReportOptionView
90
-
{...props}
91
-
goBack={() => setSelectedLabeler(undefined)}
92
-
onSelectReportOption={setSelectedReportOption}
93
-
/>
94
-
)
95
-
}
96
-
return <SelectLabelerView {...props} onSelectLabeler={setSelectedLabeler} />
97
-
}
-16
src/components/ReportDialog/types.ts
-16
src/components/ReportDialog/types.ts
···
1
-
import type * as Dialog from '#/components/Dialog'
2
-
3
-
export type ReportDialogProps = {
4
-
control: Dialog.DialogOuterProps['control']
5
-
params:
6
-
| {
7
-
type: 'post' | 'list' | 'feedgen' | 'starterpack' | 'other'
8
-
uri: string
9
-
cid: string
10
-
}
11
-
| {
12
-
type: 'account'
13
-
did: string
14
-
}
15
-
| {type: 'convoMessage'}
16
-
}
+219
src/components/dms/AfterReportDialog.tsx
+219
src/components/dms/AfterReportDialog.tsx
···
1
+
import {memo, useState} from 'react'
2
+
import {View} from 'react-native'
3
+
import {type AppBskyActorDefs, type ChatBskyConvoDefs} from '@atproto/api'
4
+
import {msg, Trans} from '@lingui/macro'
5
+
import {useLingui} from '@lingui/react'
6
+
import {StackActions, useNavigation} from '@react-navigation/native'
7
+
import type React from 'react'
8
+
9
+
import {type NavigationProp} from '#/lib/routes/types'
10
+
import {isNative} from '#/platform/detection'
11
+
import {useProfileShadow} from '#/state/cache/profile-shadow'
12
+
import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
13
+
import {
14
+
useProfileBlockMutationQueue,
15
+
useProfileQuery,
16
+
} from '#/state/queries/profile'
17
+
import * as Toast from '#/view/com/util/Toast'
18
+
import {atoms as a, platform, useBreakpoints, useTheme, web} from '#/alf'
19
+
import {Button, ButtonText} from '#/components/Button'
20
+
import * as Dialog from '#/components/Dialog'
21
+
import * as Toggle from '#/components/forms/Toggle'
22
+
import {Loader} from '#/components/Loader'
23
+
import {Text} from '#/components/Typography'
24
+
25
+
type ReportDialogParams = {
26
+
convoId: string
27
+
message: ChatBskyConvoDefs.MessageView
28
+
}
29
+
30
+
/**
31
+
* Dialog shown after a report is submitted, allowing the user to block the
32
+
* reporter and/or leave the conversation.
33
+
*/
34
+
export const AfterReportDialog = memo(function BlockOrDeleteDialogInner({
35
+
control,
36
+
params,
37
+
currentScreen,
38
+
}: {
39
+
control: Dialog.DialogControlProps
40
+
params: ReportDialogParams
41
+
currentScreen: 'list' | 'conversation'
42
+
}): React.ReactNode {
43
+
const {_} = useLingui()
44
+
return (
45
+
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
46
+
<Dialog.Handle />
47
+
<Dialog.ScrollableInner
48
+
label={_(
49
+
msg`Would you like to block this account or delete this conversation?`,
50
+
)}
51
+
style={[web({maxWidth: 400})]}>
52
+
<DialogInner params={params} currentScreen={currentScreen} />
53
+
<Dialog.Close />
54
+
</Dialog.ScrollableInner>
55
+
</Dialog.Outer>
56
+
)
57
+
})
58
+
59
+
function DialogInner({
60
+
params,
61
+
currentScreen,
62
+
}: {
63
+
params: ReportDialogParams
64
+
currentScreen: 'list' | 'conversation'
65
+
}) {
66
+
const t = useTheme()
67
+
const {_} = useLingui()
68
+
const control = Dialog.useDialogContext()
69
+
const {
70
+
data: profile,
71
+
isLoading,
72
+
isError,
73
+
} = useProfileQuery({
74
+
did: params.message.sender.did,
75
+
})
76
+
77
+
return isLoading ? (
78
+
<View style={[a.w_full, a.py_5xl, a.align_center]}>
79
+
<Loader size="lg" />
80
+
</View>
81
+
) : isError || !profile ? (
82
+
<View style={[a.w_full, a.gap_lg]}>
83
+
<View style={[a.justify_center, a.gap_sm]}>
84
+
<Text style={[a.text_2xl, a.font_semi_bold]}>
85
+
<Trans>Report submitted</Trans>
86
+
</Text>
87
+
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
88
+
<Trans>Our moderation team has received your report.</Trans>
89
+
</Text>
90
+
</View>
91
+
92
+
<Button
93
+
label={_(msg`Close`)}
94
+
onPress={() => control.close()}
95
+
size={platform({native: 'small', web: 'large'})}
96
+
color="secondary">
97
+
<ButtonText>
98
+
<Trans>Close</Trans>
99
+
</ButtonText>
100
+
</Button>
101
+
</View>
102
+
) : (
103
+
<DoneStep
104
+
convoId={params.convoId}
105
+
currentScreen={currentScreen}
106
+
profile={profile}
107
+
/>
108
+
)
109
+
}
110
+
111
+
function DoneStep({
112
+
convoId,
113
+
currentScreen,
114
+
profile,
115
+
}: {
116
+
convoId: string
117
+
currentScreen: 'list' | 'conversation'
118
+
profile: AppBskyActorDefs.ProfileViewDetailed
119
+
}) {
120
+
const {_} = useLingui()
121
+
const navigation = useNavigation<NavigationProp>()
122
+
const control = Dialog.useDialogContext()
123
+
const {gtMobile} = useBreakpoints()
124
+
const t = useTheme()
125
+
const [actions, setActions] = useState<string[]>(['block', 'leave'])
126
+
const shadow = useProfileShadow(profile)
127
+
const [queueBlock] = useProfileBlockMutationQueue(shadow)
128
+
129
+
const {mutate: leaveConvo} = useLeaveConvo(convoId, {
130
+
onMutate: () => {
131
+
if (currentScreen === 'conversation') {
132
+
navigation.dispatch(
133
+
StackActions.replace('Messages', isNative ? {animation: 'pop'} : {}),
134
+
)
135
+
}
136
+
},
137
+
onError: () => {
138
+
Toast.show(_(msg`Could not leave chat`), 'xmark')
139
+
},
140
+
})
141
+
142
+
let btnText = _(msg`Done`)
143
+
let toastMsg: string | undefined
144
+
if (actions.includes('leave') && actions.includes('block')) {
145
+
btnText = _(msg`Block and Delete`)
146
+
toastMsg = _(msg({message: 'Conversation deleted', context: 'toast'}))
147
+
} else if (actions.includes('leave')) {
148
+
btnText = _(msg`Delete Conversation`)
149
+
toastMsg = _(msg({message: 'Conversation deleted', context: 'toast'}))
150
+
} else if (actions.includes('block')) {
151
+
btnText = _(msg`Block User`)
152
+
toastMsg = _(msg({message: 'User blocked', context: 'toast'}))
153
+
}
154
+
155
+
const onPressPrimaryAction = () => {
156
+
control.close(() => {
157
+
if (actions.includes('block')) {
158
+
queueBlock()
159
+
}
160
+
if (actions.includes('leave')) {
161
+
leaveConvo()
162
+
}
163
+
if (toastMsg) {
164
+
Toast.show(toastMsg, 'check')
165
+
}
166
+
})
167
+
}
168
+
169
+
return (
170
+
<View style={a.gap_2xl}>
171
+
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
172
+
<Text style={[a.text_2xl, a.font_semi_bold]}>
173
+
<Trans>Report submitted</Trans>
174
+
</Text>
175
+
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
176
+
<Trans>Our moderation team has received your report.</Trans>
177
+
</Text>
178
+
</View>
179
+
<Toggle.Group
180
+
label={_(msg`Block and/or delete this conversation`)}
181
+
values={actions}
182
+
onChange={setActions}>
183
+
<View style={[a.gap_md]}>
184
+
<Toggle.Item name="block" label={_(msg`Block user`)}>
185
+
<Toggle.Checkbox />
186
+
<Toggle.LabelText style={[a.text_md]}>
187
+
<Trans>Block user</Trans>
188
+
</Toggle.LabelText>
189
+
</Toggle.Item>
190
+
<Toggle.Item name="leave" label={_(msg`Delete conversation`)}>
191
+
<Toggle.Checkbox />
192
+
<Toggle.LabelText style={[a.text_md]}>
193
+
<Trans>Delete conversation</Trans>
194
+
</Toggle.LabelText>
195
+
</Toggle.Item>
196
+
</View>
197
+
</Toggle.Group>
198
+
199
+
<View style={[a.gap_sm]}>
200
+
<Button
201
+
label={btnText}
202
+
onPress={onPressPrimaryAction}
203
+
size="large"
204
+
color={actions.length > 0 ? 'negative' : 'primary'}>
205
+
<ButtonText>{btnText}</ButtonText>
206
+
</Button>
207
+
<Button
208
+
label={_(msg`Close`)}
209
+
onPress={() => control.close()}
210
+
size="large"
211
+
color="secondary">
212
+
<ButtonText>
213
+
<Trans>Close</Trans>
214
+
</ButtonText>
215
+
</Button>
216
+
</View>
217
+
</View>
218
+
)
219
+
}
+24
-10
src/components/dms/ConvoMenu.tsx
+24
-10
src/components/dms/ConvoMenu.tsx
···
17
17
import {type ViewStyleProp} from '#/alf'
18
18
import {atoms as a} from '#/alf'
19
19
import {Button, ButtonIcon} from '#/components/Button'
20
+
import {AfterReportDialog} from '#/components/dms/AfterReportDialog'
20
21
import {BlockedByListDialog} from '#/components/dms/BlockedByListDialog'
21
22
import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
22
23
import {ReportConversationPrompt} from '#/components/dms/ReportConversationPrompt'
23
-
import {ReportDialog} from '#/components/dms/ReportDialog'
24
24
import {ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeft} from '#/components/icons/ArrowBoxLeft'
25
25
import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
26
26
import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid'
···
33
33
} from '#/components/icons/Person'
34
34
import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
35
35
import * as Menu from '#/components/Menu'
36
+
import {ReportDialog} from '#/components/moderation/ReportDialog'
36
37
import * as Prompt from '#/components/Prompt'
37
38
import type * as bsky from '#/types/bsky'
38
39
···
65
66
const leaveConvoControl = Prompt.usePromptControl()
66
67
const reportControl = Prompt.usePromptControl()
67
68
const blockedByListControl = Prompt.usePromptControl()
69
+
const blockOrDeleteControl = Prompt.usePromptControl()
68
70
69
71
const {listBlocks} = blockInfo
70
72
···
113
115
currentScreen={currentScreen}
114
116
/>
115
117
{latestReportableMessage ? (
116
-
<ReportDialog
117
-
currentScreen={currentScreen}
118
-
params={{
119
-
type: 'convoMessage',
120
-
convoId: convo.id,
121
-
message: latestReportableMessage,
122
-
}}
123
-
control={reportControl}
124
-
/>
118
+
<>
119
+
<ReportDialog
120
+
subject={{
121
+
view: 'convo',
122
+
convoId: convo.id,
123
+
message: latestReportableMessage,
124
+
}}
125
+
control={reportControl}
126
+
onAfterSubmit={() => {
127
+
blockOrDeleteControl.open()
128
+
}}
129
+
/>
130
+
<AfterReportDialog
131
+
control={blockOrDeleteControl}
132
+
currentScreen={currentScreen}
133
+
params={{
134
+
convoId: convo.id,
135
+
message: latestReportableMessage,
136
+
}}
137
+
/>
138
+
</>
125
139
) : (
126
140
<ReportConversationPrompt control={reportControl} />
127
141
)}
+20
-3
src/components/dms/MessageContextMenu.tsx
+20
-3
src/components/dms/MessageContextMenu.tsx
···
15
15
import * as Toast from '#/view/com/util/Toast'
16
16
import * as ContextMenu from '#/components/ContextMenu'
17
17
import {type TriggerProps} from '#/components/ContextMenu/types'
18
-
import {ReportDialog} from '#/components/dms/ReportDialog'
18
+
import {AfterReportDialog} from '#/components/dms/AfterReportDialog'
19
19
import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
20
20
import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
21
21
import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
22
22
import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
23
+
import {ReportDialog} from '#/components/moderation/ReportDialog'
23
24
import * as Prompt from '#/components/Prompt'
24
25
import {usePromptControl} from '#/components/Prompt'
25
26
import {EmojiReactionPicker} from './EmojiReactionPicker'
···
37
38
const convo = useConvoActive()
38
39
const deleteControl = usePromptControl()
39
40
const reportControl = usePromptControl()
41
+
const blockOrDeleteControl = usePromptControl()
40
42
const langPrefs = useLanguagePrefs()
41
43
const translate = useTranslate()
42
44
···
171
173
</ContextMenu.Root>
172
174
173
175
<ReportDialog
176
+
// currentScreen="conversation"
177
+
control={reportControl}
178
+
subject={{
179
+
view: 'message',
180
+
convoId: convo.convo.id,
181
+
message,
182
+
}}
183
+
onAfterSubmit={() => {
184
+
blockOrDeleteControl.open()
185
+
}}
186
+
/>
187
+
<AfterReportDialog
188
+
control={blockOrDeleteControl}
174
189
currentScreen="conversation"
175
-
params={{type: 'convoMessage', convoId: convo.convo.id, message}}
176
-
control={reportControl}
190
+
params={{
191
+
convoId: convo.convo.id,
192
+
message,
193
+
}}
177
194
/>
178
195
179
196
<Prompt.Basic
-444
src/components/dms/ReportDialog.tsx
-444
src/components/dms/ReportDialog.tsx
···
1
-
import {memo, useMemo, useState} from 'react'
2
-
import {View} from 'react-native'
3
-
import {
4
-
type $Typed,
5
-
type AppBskyActorDefs,
6
-
type ChatBskyConvoDefs,
7
-
type ComAtprotoModerationCreateReport,
8
-
RichText as RichTextAPI,
9
-
} from '@atproto/api'
10
-
import {msg, Trans} from '@lingui/macro'
11
-
import {useLingui} from '@lingui/react'
12
-
import {StackActions, useNavigation} from '@react-navigation/native'
13
-
import {useMutation} from '@tanstack/react-query'
14
-
import type React from 'react'
15
-
16
-
import {BLUESKY_MOD_SERVICE_HEADERS} from '#/lib/constants'
17
-
import {type ReportOption} from '#/lib/moderation/useReportOptions'
18
-
import {type NavigationProp} from '#/lib/routes/types'
19
-
import {isNative} from '#/platform/detection'
20
-
import {useProfileShadow} from '#/state/cache/profile-shadow'
21
-
import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
22
-
import {
23
-
useProfileBlockMutationQueue,
24
-
useProfileQuery,
25
-
} from '#/state/queries/profile'
26
-
import {useAgent} from '#/state/session'
27
-
import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
28
-
import * as Toast from '#/view/com/util/Toast'
29
-
import {atoms as a, platform, useBreakpoints, useTheme, web} from '#/alf'
30
-
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
31
-
import * as Dialog from '#/components/Dialog'
32
-
import {Divider} from '#/components/Divider'
33
-
import * as Toggle from '#/components/forms/Toggle'
34
-
import {ChevronLeft_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
35
-
import {PaperPlane_Stroke2_Corner0_Rounded as SendIcon} from '#/components/icons/PaperPlane'
36
-
import {Loader} from '#/components/Loader'
37
-
import {SelectReportOptionView} from '#/components/ReportDialog/SelectReportOptionView'
38
-
import {RichText} from '#/components/RichText'
39
-
import {Text} from '#/components/Typography'
40
-
import {MessageItemMetadata} from './MessageItem'
41
-
42
-
type ReportDialogParams = {
43
-
type: 'convoMessage'
44
-
convoId: string
45
-
message: ChatBskyConvoDefs.MessageView
46
-
}
47
-
48
-
let ReportDialog = ({
49
-
control,
50
-
params,
51
-
currentScreen,
52
-
}: {
53
-
control: Dialog.DialogControlProps
54
-
params: ReportDialogParams
55
-
currentScreen: 'list' | 'conversation'
56
-
}): React.ReactNode => {
57
-
const {_} = useLingui()
58
-
return (
59
-
<Dialog.Outer control={control}>
60
-
<Dialog.Handle />
61
-
<Dialog.ScrollableInner label={_(msg`Report this message`)}>
62
-
<DialogInner params={params} currentScreen={currentScreen} />
63
-
<Dialog.Close />
64
-
</Dialog.ScrollableInner>
65
-
</Dialog.Outer>
66
-
)
67
-
}
68
-
ReportDialog = memo(ReportDialog)
69
-
export {ReportDialog}
70
-
71
-
function DialogInner({
72
-
params,
73
-
currentScreen,
74
-
}: {
75
-
params: ReportDialogParams
76
-
currentScreen: 'list' | 'conversation'
77
-
}) {
78
-
const {data: profile, isError} = useProfileQuery({
79
-
did: params.message.sender.did,
80
-
})
81
-
const [reportOption, setReportOption] = useState<ReportOption | null>(null)
82
-
const [done, setDone] = useState(false)
83
-
const control = Dialog.useDialogContext()
84
-
85
-
return done ? (
86
-
profile ? (
87
-
<DoneStep
88
-
convoId={params.convoId}
89
-
currentScreen={currentScreen}
90
-
profile={profile}
91
-
/>
92
-
) : (
93
-
<View style={[a.w_full, a.py_5xl, a.align_center]}>
94
-
<Loader />
95
-
</View>
96
-
)
97
-
) : reportOption ? (
98
-
<SubmitStep
99
-
params={params}
100
-
reportOption={reportOption}
101
-
goBack={() => setReportOption(null)}
102
-
onComplete={() => {
103
-
if (isError) {
104
-
control.close()
105
-
} else {
106
-
setDone(true)
107
-
}
108
-
}}
109
-
/>
110
-
) : (
111
-
<ReasonStep params={params} setReportOption={setReportOption} />
112
-
)
113
-
}
114
-
115
-
function ReasonStep({
116
-
setReportOption,
117
-
}: {
118
-
setReportOption: (reportOption: ReportOption) => void
119
-
params: ReportDialogParams
120
-
}) {
121
-
const control = Dialog.useDialogContext()
122
-
123
-
return (
124
-
<SelectReportOptionView
125
-
labelers={[]}
126
-
goBack={control.close}
127
-
params={{
128
-
type: 'convoMessage',
129
-
}}
130
-
onSelectReportOption={setReportOption}
131
-
/>
132
-
)
133
-
}
134
-
135
-
function SubmitStep({
136
-
params,
137
-
reportOption,
138
-
goBack,
139
-
onComplete,
140
-
}: {
141
-
params: ReportDialogParams
142
-
reportOption: ReportOption
143
-
goBack: () => void
144
-
onComplete: () => void
145
-
}) {
146
-
const {_} = useLingui()
147
-
const {gtMobile} = useBreakpoints()
148
-
const t = useTheme()
149
-
const [details, setDetails] = useState('')
150
-
const agent = useAgent()
151
-
152
-
const {
153
-
mutate: submit,
154
-
error,
155
-
isPending: submitting,
156
-
} = useMutation({
157
-
mutationFn: async () => {
158
-
if (params.type === 'convoMessage') {
159
-
const {convoId, message} = params
160
-
const subject: $Typed<ChatBskyConvoDefs.MessageRef> = {
161
-
$type: 'chat.bsky.convo.defs#messageRef',
162
-
messageId: message.id,
163
-
convoId,
164
-
did: message.sender.did,
165
-
}
166
-
167
-
const report = {
168
-
reasonType: reportOption.reason,
169
-
subject,
170
-
reason: details,
171
-
} satisfies ComAtprotoModerationCreateReport.InputSchema
172
-
173
-
await agent.createModerationReport(report, {
174
-
encoding: 'application/json',
175
-
headers: BLUESKY_MOD_SERVICE_HEADERS,
176
-
})
177
-
}
178
-
},
179
-
onSuccess: onComplete,
180
-
})
181
-
182
-
const copy = useMemo(() => {
183
-
return {
184
-
convoMessage: {
185
-
title: _(msg`Report this message`),
186
-
},
187
-
}[params.type]
188
-
}, [_, params])
189
-
190
-
return (
191
-
<View style={a.gap_lg}>
192
-
<Button
193
-
size="small"
194
-
variant="solid"
195
-
color="secondary"
196
-
shape="round"
197
-
label={_(msg`Go back to previous step`)}
198
-
onPress={goBack}>
199
-
<ButtonIcon icon={Chevron} />
200
-
</Button>
201
-
202
-
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
203
-
<Text style={[a.text_2xl, a.font_semi_bold]}>{copy.title}</Text>
204
-
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
205
-
<Trans>
206
-
Your report will be sent to the Bluesky Moderation Service
207
-
</Trans>
208
-
</Text>
209
-
</View>
210
-
211
-
{params.type === 'convoMessage' && (
212
-
<PreviewMessage message={params.message} />
213
-
)}
214
-
215
-
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
216
-
<Text
217
-
style={[a.font_semi_bold, a.text_md, t.atoms.text_contrast_medium]}>
218
-
<Trans>Reason:</Trans>
219
-
</Text>{' '}
220
-
<Text style={[a.font_semi_bold, a.text_md]}>{reportOption.title}</Text>
221
-
</Text>
222
-
223
-
<Divider />
224
-
225
-
<View style={[a.gap_md]}>
226
-
<Text style={[t.atoms.text_contrast_medium]}>
227
-
<Trans>Optionally provide additional information below:</Trans>
228
-
</Text>
229
-
230
-
<View style={[a.relative, a.w_full]}>
231
-
<Dialog.Input
232
-
multiline
233
-
defaultValue={details}
234
-
onChangeText={setDetails}
235
-
label={_(msg`Text field`)}
236
-
style={{paddingRight: 60}}
237
-
numberOfLines={5}
238
-
/>
239
-
<View
240
-
style={[
241
-
a.absolute,
242
-
a.flex_row,
243
-
a.align_center,
244
-
a.pr_md,
245
-
a.pb_sm,
246
-
{
247
-
bottom: 0,
248
-
right: 0,
249
-
},
250
-
]}>
251
-
<CharProgress count={details?.length || 0} />
252
-
</View>
253
-
</View>
254
-
</View>
255
-
256
-
<View style={[a.flex_row, a.align_center, a.justify_end, a.gap_lg]}>
257
-
{error && (
258
-
<Text
259
-
style={[
260
-
a.flex_1,
261
-
a.italic,
262
-
a.leading_snug,
263
-
t.atoms.text_contrast_medium,
264
-
]}>
265
-
<Trans>
266
-
There was an issue sending your report. Please check your internet
267
-
connection.
268
-
</Trans>
269
-
</Text>
270
-
)}
271
-
272
-
<Button
273
-
testID="sendReportBtn"
274
-
size="large"
275
-
variant="solid"
276
-
color="negative"
277
-
label={_(msg`Send report`)}
278
-
onPress={() => submit()}>
279
-
<ButtonText>
280
-
<Trans>Send report</Trans>
281
-
</ButtonText>
282
-
<ButtonIcon icon={submitting ? Loader : SendIcon} />
283
-
</Button>
284
-
</View>
285
-
</View>
286
-
)
287
-
}
288
-
289
-
function DoneStep({
290
-
convoId,
291
-
currentScreen,
292
-
profile,
293
-
}: {
294
-
convoId: string
295
-
currentScreen: 'list' | 'conversation'
296
-
profile: AppBskyActorDefs.ProfileViewDetailed
297
-
}) {
298
-
const {_} = useLingui()
299
-
const navigation = useNavigation<NavigationProp>()
300
-
const control = Dialog.useDialogContext()
301
-
const {gtMobile} = useBreakpoints()
302
-
const t = useTheme()
303
-
const [actions, setActions] = useState<string[]>(['block', 'leave'])
304
-
const shadow = useProfileShadow(profile)
305
-
const [queueBlock] = useProfileBlockMutationQueue(shadow)
306
-
307
-
const {mutate: leaveConvo} = useLeaveConvo(convoId, {
308
-
onMutate: () => {
309
-
if (currentScreen === 'conversation') {
310
-
navigation.dispatch(
311
-
StackActions.replace('Messages', isNative ? {animation: 'pop'} : {}),
312
-
)
313
-
}
314
-
},
315
-
onError: () => {
316
-
Toast.show(_(msg`Could not leave chat`), 'xmark')
317
-
},
318
-
})
319
-
320
-
let btnText = _(msg`Done`)
321
-
let toastMsg: string | undefined
322
-
if (actions.includes('leave') && actions.includes('block')) {
323
-
btnText = _(msg`Block and Delete`)
324
-
toastMsg = _(msg({message: 'Conversation deleted', context: 'toast'}))
325
-
} else if (actions.includes('leave')) {
326
-
btnText = _(msg`Delete Conversation`)
327
-
toastMsg = _(msg({message: 'Conversation deleted', context: 'toast'}))
328
-
} else if (actions.includes('block')) {
329
-
btnText = _(msg`Block User`)
330
-
toastMsg = _(msg({message: 'User blocked', context: 'toast'}))
331
-
}
332
-
333
-
const onPressPrimaryAction = () => {
334
-
control.close(() => {
335
-
if (actions.includes('block')) {
336
-
queueBlock()
337
-
}
338
-
if (actions.includes('leave')) {
339
-
leaveConvo()
340
-
}
341
-
if (toastMsg) {
342
-
Toast.show(toastMsg, 'check')
343
-
}
344
-
})
345
-
}
346
-
347
-
return (
348
-
<View style={a.gap_2xl}>
349
-
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
350
-
<Text style={[a.text_2xl, a.font_semi_bold]}>
351
-
<Trans>Report submitted</Trans>
352
-
</Text>
353
-
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
354
-
<Trans>Our moderation team has received your report.</Trans>
355
-
</Text>
356
-
</View>
357
-
<Toggle.Group
358
-
label={_(msg`Block and/or delete this conversation`)}
359
-
values={actions}
360
-
onChange={setActions}>
361
-
<View style={[a.gap_md]}>
362
-
<Toggle.Item name="block" label={_(msg`Block user`)}>
363
-
<Toggle.Checkbox />
364
-
<Toggle.LabelText style={[a.text_md]}>
365
-
<Trans>Block user</Trans>
366
-
</Toggle.LabelText>
367
-
</Toggle.Item>
368
-
<Toggle.Item name="leave" label={_(msg`Delete conversation`)}>
369
-
<Toggle.Checkbox />
370
-
<Toggle.LabelText style={[a.text_md]}>
371
-
<Trans>Delete conversation</Trans>
372
-
</Toggle.LabelText>
373
-
</Toggle.Item>
374
-
</View>
375
-
</Toggle.Group>
376
-
377
-
<View style={[a.gap_md, web([a.flex_row_reverse])]}>
378
-
<Button
379
-
label={btnText}
380
-
onPress={onPressPrimaryAction}
381
-
size="large"
382
-
variant="solid"
383
-
color={actions.length > 0 ? 'negative' : 'primary'}>
384
-
<ButtonText>{btnText}</ButtonText>
385
-
</Button>
386
-
<Button
387
-
label={_(msg`Close`)}
388
-
onPress={() => control.close()}
389
-
size={platform({native: 'small', web: 'large'})}
390
-
variant={platform({
391
-
native: 'ghost',
392
-
web: 'solid',
393
-
})}
394
-
color="secondary">
395
-
<ButtonText>
396
-
<Trans>Close</Trans>
397
-
</ButtonText>
398
-
</Button>
399
-
</View>
400
-
</View>
401
-
)
402
-
}
403
-
404
-
function PreviewMessage({message}: {message: ChatBskyConvoDefs.MessageView}) {
405
-
const t = useTheme()
406
-
const rt = useMemo(() => {
407
-
return new RichTextAPI({text: message.text, facets: message.facets})
408
-
}, [message.text, message.facets])
409
-
410
-
return (
411
-
<View style={a.align_start}>
412
-
<View
413
-
style={[
414
-
a.py_sm,
415
-
a.my_2xs,
416
-
a.rounded_md,
417
-
{
418
-
paddingLeft: 14,
419
-
paddingRight: 14,
420
-
backgroundColor: t.palette.contrast_50,
421
-
borderRadius: 17,
422
-
},
423
-
{borderBottomLeftRadius: 2},
424
-
]}>
425
-
<RichText
426
-
value={rt}
427
-
style={[a.text_md]}
428
-
interactiveStyle={a.underline}
429
-
enableTags
430
-
/>
431
-
</View>
432
-
<MessageItemMetadata
433
-
item={{
434
-
type: 'message',
435
-
message,
436
-
key: '',
437
-
nextMessage: null,
438
-
prevMessage: null,
439
-
}}
440
-
style={[a.text_left, a.mb_0]}
441
-
/>
442
-
</View>
443
-
)
444
-
}
+27
-6
src/components/moderation/ReportDialog/action.ts
+27
-6
src/components/moderation/ReportDialog/action.ts
···
9
9
10
10
import {logger} from '#/logger'
11
11
import {useAgent} from '#/state/session'
12
+
import {NEW_TO_OLD_REASONS_MAP} from './const'
12
13
import {type ReportState} from './state'
13
14
import {type ParsedReportSubject} from './types'
14
15
···
31
32
throw new Error(_(msg`Please select a moderation service`))
32
33
}
33
34
35
+
const labeler = state.selectedLabeler
36
+
const labelerSupportedReasonTypes = labeler.reasonTypes || []
37
+
38
+
let reasonType = state.selectedOption.reason
39
+
const backwardsCompatibleReasonType = NEW_TO_OLD_REASONS_MAP[reasonType]
40
+
const supportsNewReasonType =
41
+
labelerSupportedReasonTypes.includes(reasonType)
42
+
const supportsOldReasonType = labelerSupportedReasonTypes.includes(
43
+
backwardsCompatibleReasonType,
44
+
)
45
+
46
+
/*
47
+
* Only fall back for backwards compatibility if the labeler
48
+
* does not support the new reason type. If the labeler does not declare
49
+
* supported reason types, send the new version.
50
+
*/
51
+
if (supportsOldReasonType && !supportsNewReasonType) {
52
+
reasonType = backwardsCompatibleReasonType
53
+
}
54
+
34
55
let report:
35
56
| ComAtprotoModerationCreateReport.InputSchema
36
57
| (Omit<ComAtprotoModerationCreateReport.InputSchema, 'subject'> & {
···
40
61
switch (subject.type) {
41
62
case 'account': {
42
63
report = {
43
-
reasonType: state.selectedOption.reason,
64
+
reasonType,
44
65
reason: state.details,
45
66
subject: {
46
67
$type: 'com.atproto.admin.defs#repoRef',
···
54
75
case 'feed':
55
76
case 'starterPack': {
56
77
report = {
57
-
reasonType: state.selectedOption.reason,
78
+
reasonType,
58
79
reason: state.details,
59
80
subject: {
60
81
$type: 'com.atproto.repo.strongRef',
···
64
85
}
65
86
break
66
87
}
67
-
case 'chatMessage': {
88
+
case 'convoMessage': {
68
89
report = {
69
-
reasonType: state.selectedOption.reason,
90
+
reasonType,
70
91
reason: state.details,
71
92
subject: {
72
93
$type: 'chat.bsky.convo.defs#messageRef',
···
82
103
if (__DEV__) {
83
104
logger.info('Submitting report', {
84
105
labeler: {
85
-
handle: state.selectedLabeler.creator.handle,
106
+
handle: labeler.creator.handle,
86
107
},
87
108
report,
88
109
})
···
90
111
await agent.createModerationReport(report, {
91
112
encoding: 'application/json',
92
113
headers: {
93
-
'atproto-proxy': `${state.selectedLabeler.creator.did}#atproto_labeler`,
114
+
'atproto-proxy': `${labeler.creator.did}#atproto_labeler`,
94
115
},
95
116
})
96
117
}
+112
src/components/moderation/ReportDialog/const.ts
+112
src/components/moderation/ReportDialog/const.ts
···
1
+
import {
2
+
ComAtprotoModerationDefs as RootReportDefs,
3
+
ToolsOzoneReportDefs as OzoneReportDefs,
4
+
} from '@atproto/api'
5
+
1
6
export const DMCA_LINK = 'https://bsky.social/about/support/copyright'
2
7
export const SUPPORT_PAGE = 'https://bsky.social/about/support'
8
+
9
+
export const NEW_TO_OLD_REASON_MAPPING: Record<string, string> = {}
10
+
11
+
/**
12
+
* Mapping of new (Ozone namespace) reason types to old reason types.
13
+
*
14
+
* Matches the mapping defined in the Ozone codebase:
15
+
* @see https://github.com/bluesky-social/atproto/blob/4c15fb47cec26060bff2e710e95869a90c9d7fdd/packages/ozone/src/mod-service/profile.ts#L16-L64
16
+
*/
17
+
export const NEW_TO_OLD_REASONS_MAP: Record<
18
+
OzoneReportDefs.ReasonType,
19
+
RootReportDefs.ReasonType
20
+
> = {
21
+
[OzoneReportDefs.REASONAPPEAL]: RootReportDefs.REASONAPPEAL,
22
+
[OzoneReportDefs.REASONOTHER]: RootReportDefs.REASONOTHER,
23
+
24
+
[OzoneReportDefs.REASONVIOLENCEANIMAL]: RootReportDefs.REASONVIOLATION,
25
+
[OzoneReportDefs.REASONVIOLENCETHREATS]: RootReportDefs.REASONVIOLATION,
26
+
[OzoneReportDefs.REASONVIOLENCEGRAPHICCONTENT]:
27
+
RootReportDefs.REASONVIOLATION,
28
+
[OzoneReportDefs.REASONVIOLENCEGLORIFICATION]: RootReportDefs.REASONVIOLATION,
29
+
[OzoneReportDefs.REASONVIOLENCEEXTREMISTCONTENT]:
30
+
RootReportDefs.REASONVIOLATION,
31
+
[OzoneReportDefs.REASONVIOLENCETRAFFICKING]: RootReportDefs.REASONVIOLATION,
32
+
[OzoneReportDefs.REASONVIOLENCEOTHER]: RootReportDefs.REASONVIOLATION,
33
+
34
+
[OzoneReportDefs.REASONSEXUALABUSECONTENT]: RootReportDefs.REASONSEXUAL,
35
+
[OzoneReportDefs.REASONSEXUALNCII]: RootReportDefs.REASONSEXUAL,
36
+
[OzoneReportDefs.REASONSEXUALDEEPFAKE]: RootReportDefs.REASONSEXUAL,
37
+
[OzoneReportDefs.REASONSEXUALANIMAL]: RootReportDefs.REASONSEXUAL,
38
+
[OzoneReportDefs.REASONSEXUALUNLABELED]: RootReportDefs.REASONSEXUAL,
39
+
[OzoneReportDefs.REASONSEXUALOTHER]: RootReportDefs.REASONSEXUAL,
40
+
41
+
[OzoneReportDefs.REASONCHILDSAFETYCSAM]: RootReportDefs.REASONVIOLATION,
42
+
[OzoneReportDefs.REASONCHILDSAFETYGROOM]: RootReportDefs.REASONVIOLATION,
43
+
[OzoneReportDefs.REASONCHILDSAFETYPRIVACY]: RootReportDefs.REASONVIOLATION,
44
+
[OzoneReportDefs.REASONCHILDSAFETYHARASSMENT]: RootReportDefs.REASONVIOLATION,
45
+
[OzoneReportDefs.REASONCHILDSAFETYOTHER]: RootReportDefs.REASONVIOLATION,
46
+
47
+
[OzoneReportDefs.REASONHARASSMENTTROLL]: RootReportDefs.REASONRUDE,
48
+
[OzoneReportDefs.REASONHARASSMENTTARGETED]: RootReportDefs.REASONRUDE,
49
+
[OzoneReportDefs.REASONHARASSMENTHATESPEECH]: RootReportDefs.REASONRUDE,
50
+
[OzoneReportDefs.REASONHARASSMENTDOXXING]: RootReportDefs.REASONRUDE,
51
+
[OzoneReportDefs.REASONHARASSMENTOTHER]: RootReportDefs.REASONRUDE,
52
+
53
+
[OzoneReportDefs.REASONMISLEADINGBOT]: RootReportDefs.REASONMISLEADING,
54
+
[OzoneReportDefs.REASONMISLEADINGIMPERSONATION]:
55
+
RootReportDefs.REASONMISLEADING,
56
+
[OzoneReportDefs.REASONMISLEADINGSPAM]: RootReportDefs.REASONSPAM,
57
+
[OzoneReportDefs.REASONMISLEADINGSCAM]: RootReportDefs.REASONMISLEADING,
58
+
[OzoneReportDefs.REASONMISLEADINGELECTIONS]: RootReportDefs.REASONMISLEADING,
59
+
[OzoneReportDefs.REASONMISLEADINGOTHER]: RootReportDefs.REASONMISLEADING,
60
+
61
+
[OzoneReportDefs.REASONRULESITESECURITY]: RootReportDefs.REASONVIOLATION,
62
+
[OzoneReportDefs.REASONRULEPROHIBITEDSALES]: RootReportDefs.REASONVIOLATION,
63
+
[OzoneReportDefs.REASONRULEBANEVASION]: RootReportDefs.REASONVIOLATION,
64
+
[OzoneReportDefs.REASONRULEOTHER]: RootReportDefs.REASONVIOLATION,
65
+
66
+
[OzoneReportDefs.REASONSELFHARMCONTENT]: RootReportDefs.REASONVIOLATION,
67
+
[OzoneReportDefs.REASONSELFHARMED]: RootReportDefs.REASONVIOLATION,
68
+
[OzoneReportDefs.REASONSELFHARMSTUNTS]: RootReportDefs.REASONVIOLATION,
69
+
[OzoneReportDefs.REASONSELFHARMSUBSTANCES]: RootReportDefs.REASONVIOLATION,
70
+
[OzoneReportDefs.REASONSELFHARMOTHER]: RootReportDefs.REASONVIOLATION,
71
+
}
72
+
73
+
/**
74
+
* Mapping of old reason types to new (Ozone namespace) reason types.
75
+
* @see https://github.com/bluesky-social/proposals/tree/main/0009-mod-report-granularity#backwards-compatibility
76
+
*/
77
+
export const OLD_TO_NEW_REASONS_MAP: Record<
78
+
Exclude<RootReportDefs.ReasonType, OzoneReportDefs.ReasonType>,
79
+
OzoneReportDefs.ReasonType
80
+
> = {
81
+
[RootReportDefs.REASONSPAM]: [OzoneReportDefs.REASONMISLEADINGSPAM],
82
+
[RootReportDefs.REASONVIOLATION]: [OzoneReportDefs.REASONRULEOTHER],
83
+
[RootReportDefs.REASONMISLEADING]: [OzoneReportDefs.REASONMISLEADINGOTHER],
84
+
[RootReportDefs.REASONSEXUAL]: [OzoneReportDefs.REASONSEXUALUNLABELED],
85
+
[RootReportDefs.REASONRUDE]: [OzoneReportDefs.REASONHARASSMENTOTHER],
86
+
[RootReportDefs.REASONOTHER]: [OzoneReportDefs.REASONOTHER],
87
+
[RootReportDefs.REASONAPPEAL]: [OzoneReportDefs.REASONAPPEAL],
88
+
}
89
+
90
+
/**
91
+
* Set of report reasons that should optionally include additional details from
92
+
* the reporter.
93
+
*/
94
+
export const OTHER_REPORT_REASONS: Set<OzoneReportDefs.ReasonType> = new Set([
95
+
OzoneReportDefs.REASONVIOLENCEOTHER,
96
+
OzoneReportDefs.REASONSEXUALOTHER,
97
+
OzoneReportDefs.REASONCHILDSAFETYOTHER,
98
+
OzoneReportDefs.REASONHARASSMENTOTHER,
99
+
OzoneReportDefs.REASONMISLEADINGOTHER,
100
+
OzoneReportDefs.REASONRULEOTHER,
101
+
OzoneReportDefs.REASONSELFHARMOTHER,
102
+
OzoneReportDefs.REASONOTHER,
103
+
])
104
+
105
+
/**
106
+
* Set of report reasons that should only be sent to Bluesky's moderation service.
107
+
*/
108
+
export const BSKY_LABELER_ONLY_REPORT_REASONS: Set<OzoneReportDefs.ReasonType> =
109
+
new Set([
110
+
OzoneReportDefs.REASONCHILDSAFETYCSAM,
111
+
OzoneReportDefs.REASONCHILDSAFETYGROOM,
112
+
OzoneReportDefs.REASONCHILDSAFETYOTHER,
113
+
OzoneReportDefs.REASONVIOLENCEEXTREMISTCONTENT,
114
+
])
+14
-4
src/components/moderation/ReportDialog/copy.ts
+14
-4
src/components/moderation/ReportDialog/copy.ts
···
38
38
subtitle: _(msg`Why should this starter pack be reviewed?`),
39
39
}
40
40
}
41
-
case 'chatMessage': {
42
-
return {
43
-
title: _(msg`Report this message`),
44
-
subtitle: _(msg`Why should this message be reviewed?`),
41
+
case 'convoMessage': {
42
+
switch (subject.view) {
43
+
case 'convo': {
44
+
return {
45
+
title: _(msg`Report this conversation`),
46
+
subtitle: _(msg`Why should this conversation be reviewed?`),
47
+
}
48
+
}
49
+
case 'message': {
50
+
return {
51
+
title: _(msg`Report this message`),
52
+
subtitle: _(msg`Why should this message be reviewed?`),
53
+
}
54
+
}
45
55
}
46
56
}
47
57
}
+244
-96
src/components/moderation/ReportDialog/index.tsx
+244
-96
src/components/moderation/ReportDialog/index.tsx
···
1
1
import React from 'react'
2
2
import {Pressable, View} from 'react-native'
3
3
import {type ScrollView} from 'react-native-gesture-handler'
4
-
import {type AppBskyLabelerDefs} from '@atproto/api'
4
+
import {type AppBskyLabelerDefs, BSKY_LABELER_DID} from '@atproto/api'
5
5
import {msg, Trans} from '@lingui/macro'
6
6
import {useLingui} from '@lingui/react'
7
7
···
30
30
import {Loader} from '#/components/Loader'
31
31
import {Text} from '#/components/Typography'
32
32
import {useSubmitReportMutation} from './action'
33
-
import {SUPPORT_PAGE} from './const'
33
+
import {
34
+
BSKY_LABELER_ONLY_REPORT_REASONS,
35
+
NEW_TO_OLD_REASONS_MAP,
36
+
SUPPORT_PAGE,
37
+
} from './const'
34
38
import {useCopyForSubject} from './copy'
35
39
import {initialState, reducer} from './state'
36
40
import {type ReportDialogProps, type ReportSubject} from './types'
37
41
import {parseReportSubject} from './utils/parseReportSubject'
38
-
import {type ReportOption, useReportOptions} from './utils/useReportOptions'
42
+
import {
43
+
type ReportCategoryConfig,
44
+
type ReportOption,
45
+
useReportOptions,
46
+
} from './utils/useReportOptions'
39
47
40
48
export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
41
49
···
95
103
} = useMyLabelersQuery({excludeNonConfigurableLabelers: true})
96
104
const isLoading = useDelayedLoading(500, isLabelerLoading)
97
105
const copy = useCopyForSubject(props.subject)
98
-
const reportOptions = useReportOptions()
106
+
const {categories, getCategory} = useReportOptions()
99
107
const [state, dispatch] = React.useReducer(reducer, initialState)
100
108
101
109
/**
···
105
113
const [isPending, setPending] = React.useState(false)
106
114
const [isSuccess, setSuccess] = React.useState(false)
107
115
116
+
// some reasons ONLY go to Bluesky
117
+
const isBskyOnlyReason = state?.selectedOption?.reason
118
+
? BSKY_LABELER_ONLY_REPORT_REASONS.has(state.selectedOption.reason)
119
+
: false
120
+
// some subjects (chats) only go to Bluesky
121
+
const isBskyOnlySubject = props.subject.type === 'convoMessage'
122
+
108
123
/**
109
124
* Labelers that support this `subject` and its NSID collection
110
125
*/
···
116
131
if (subjectTypes === undefined) return true
117
132
if (props.subject.type === 'account') {
118
133
return subjectTypes.includes('account')
119
-
} else if (props.subject.type === 'chatMessage') {
134
+
} else if (props.subject.type === 'convoMessage') {
120
135
return subjectTypes.includes('chat')
121
136
} else {
122
137
return subjectTypes.includes('record')
···
126
141
const collections: string[] | undefined = l.subjectCollections
127
142
if (collections === undefined) return true
128
143
// all chat collections accepted, since only Bluesky handles chats
129
-
if (props.subject.type === 'chatMessage') return true
144
+
if (props.subject.type === 'convoMessage') return true
130
145
return collections.includes(props.subject.nsid)
131
146
})
132
147
.filter(l => {
133
-
if (!state.selectedOption) return true
134
-
const reasonTypes: string[] | undefined = l.reasonTypes
135
-
if (reasonTypes === undefined) return true
136
-
return reasonTypes.includes(state.selectedOption.reason)
148
+
if (!state.selectedOption) return false
149
+
if (isBskyOnlyReason || isBskyOnlySubject) {
150
+
return l.creator.did === BSKY_LABELER_DID
151
+
}
152
+
const supportedReasonTypes: string[] | undefined = l.reasonTypes
153
+
if (supportedReasonTypes === undefined) return true
154
+
return (
155
+
// supports new reason type
156
+
supportedReasonTypes.includes(state.selectedOption.reason) ||
157
+
// supports old reason type (backwards compat)
158
+
supportedReasonTypes.includes(
159
+
NEW_TO_OLD_REASONS_MAP[state.selectedOption.reason],
160
+
)
161
+
)
137
162
})
138
-
}, [props, allLabelers, state.selectedOption])
163
+
}, [
164
+
props,
165
+
allLabelers,
166
+
state.selectedOption,
167
+
isBskyOnlyReason,
168
+
isBskyOnlySubject,
169
+
])
139
170
const hasSupportedLabelers = !!supportedLabelers.length
140
171
const hasSingleSupportedLabeler = supportedLabelers.length === 1
172
+
173
+
/**
174
+
* We skip the select labeler step if there's only one possible labeler, and
175
+
* that labeler is Bluesky (which is the case for chat reports and certain
176
+
* reason types). We'll use this below to adjust the indexing and skip the
177
+
* step in the UI.
178
+
*/
179
+
const isAlwaysBskyLabeler =
180
+
hasSingleSupportedLabeler && (isBskyOnlyReason || isBskyOnlySubject)
141
181
142
182
const onSubmit = React.useCallback(async () => {
143
183
dispatch({type: 'clearError'})
···
166
206
)
167
207
// give time for user feedback
168
208
setTimeout(() => {
169
-
props.control.close()
209
+
props.control.close(() => {
210
+
props.onAfterSubmit?.()
211
+
})
170
212
}, 1e3)
171
213
} catch (e: any) {
172
214
logger.metric('reportDialog:failure', {}, {statsig: false})
···
237
279
</Admonition.Outer>
238
280
) : (
239
281
<>
240
-
{state.selectedOption ? (
282
+
{state.selectedCategory ? (
241
283
<View style={[a.flex_row, a.align_center, a.gap_md]}>
242
284
<View style={[a.flex_1]}>
243
-
<OptionCard option={state.selectedOption} />
285
+
<CategoryCard option={state.selectedCategory} />
244
286
</View>
245
287
<Button
246
-
testID="report:clearOption"
247
-
label={_(msg`Change report reason`)}
288
+
testID="report:clearCategory"
289
+
label={_(msg`Change report category`)}
248
290
size="tiny"
249
291
variant="solid"
250
292
color="secondary"
251
293
shape="round"
252
294
onPress={() => {
253
-
dispatch({type: 'clearOption'})
295
+
dispatch({type: 'clearCategory'})
254
296
}}>
255
297
<ButtonIcon icon={X} />
256
298
</Button>
257
299
</View>
258
300
) : (
259
301
<View style={[a.gap_sm]}>
260
-
{reportOptions[props.subject.type].map(o => (
261
-
<OptionCard
262
-
key={o.reason}
302
+
{categories.map(o => (
303
+
<CategoryCard
304
+
key={o.key}
263
305
option={o}
264
306
onSelect={() => {
265
-
dispatch({type: 'selectOption', option: o})
307
+
dispatch({
308
+
type: 'selectCategory',
309
+
option: o,
310
+
otherOption: getCategory('other').options[0],
311
+
})
266
312
}}
267
313
/>
268
314
))}
···
310
356
<StepOuter>
311
357
<StepTitle
312
358
index={2}
313
-
title={_(msg`Select moderation service`)}
359
+
title={_(msg`Select a reason`)}
314
360
activeIndex1={state.activeStepIndex1}
315
361
/>
316
-
{state.activeStepIndex1 >= 2 && (
317
-
<>
318
-
{state.selectedLabeler ? (
319
-
<>
320
-
{hasSingleSupportedLabeler ? (
321
-
<LabelerCard labeler={state.selectedLabeler} />
322
-
) : (
323
-
<View style={[a.flex_row, a.align_center, a.gap_md]}>
324
-
<View style={[a.flex_1]}>
325
-
<LabelerCard labeler={state.selectedLabeler} />
362
+
{state.selectedOption ? (
363
+
<View style={[a.flex_row, a.align_center, a.gap_md]}>
364
+
<View style={[a.flex_1]}>
365
+
<OptionCard option={state.selectedOption} />
366
+
</View>
367
+
<Button
368
+
testID="report:clearReportOption"
369
+
label={_(msg`Change report reason`)}
370
+
size="tiny"
371
+
variant="solid"
372
+
color="secondary"
373
+
shape="round"
374
+
onPress={() => {
375
+
dispatch({type: 'clearOption'})
376
+
}}>
377
+
<ButtonIcon icon={X} />
378
+
</Button>
379
+
</View>
380
+
) : state.selectedCategory ? (
381
+
<View style={[a.gap_sm]}>
382
+
{getCategory(state.selectedCategory.key).options.map(o => (
383
+
<OptionCard
384
+
key={o.reason}
385
+
option={o}
386
+
onSelect={() => {
387
+
dispatch({type: 'selectOption', option: o})
388
+
}}
389
+
/>
390
+
))}
391
+
</View>
392
+
) : null}
393
+
</StepOuter>
394
+
395
+
{isAlwaysBskyLabeler ? (
396
+
<ActionOnce
397
+
check={() => !state.selectedLabeler}
398
+
callback={() => {
399
+
dispatch({
400
+
type: 'selectLabeler',
401
+
labeler: supportedLabelers[0],
402
+
})
403
+
}}
404
+
/>
405
+
) : (
406
+
<StepOuter>
407
+
<StepTitle
408
+
index={3}
409
+
title={_(msg`Select moderation service`)}
410
+
activeIndex1={state.activeStepIndex1}
411
+
/>
412
+
{state.activeStepIndex1 >= 3 && (
413
+
<>
414
+
{state.selectedLabeler ? (
415
+
<>
416
+
{hasSingleSupportedLabeler ? (
417
+
<LabelerCard labeler={state.selectedLabeler} />
418
+
) : (
419
+
<View style={[a.flex_row, a.align_center, a.gap_md]}>
420
+
<View style={[a.flex_1]}>
421
+
<LabelerCard labeler={state.selectedLabeler} />
422
+
</View>
423
+
<Button
424
+
label={_(msg`Change moderation service`)}
425
+
size="tiny"
426
+
variant="solid"
427
+
color="secondary"
428
+
shape="round"
429
+
onPress={() => {
430
+
dispatch({type: 'clearLabeler'})
431
+
}}>
432
+
<ButtonIcon icon={X} />
433
+
</Button>
326
434
</View>
327
-
<Button
328
-
label={_(msg`Change moderation service`)}
329
-
size="tiny"
330
-
variant="solid"
331
-
color="secondary"
332
-
shape="round"
333
-
onPress={() => {
334
-
dispatch({type: 'clearLabeler'})
335
-
}}>
336
-
<ButtonIcon icon={X} />
337
-
</Button>
338
-
</View>
339
-
)}
340
-
</>
341
-
) : (
342
-
<>
343
-
{hasSupportedLabelers ? (
344
-
<View style={[a.gap_sm]}>
345
-
{hasSingleSupportedLabeler ? (
346
-
<>
347
-
<LabelerCard labeler={supportedLabelers[0]} />
348
-
<ActionOnce
349
-
check={() => !state.selectedLabeler}
350
-
callback={() => {
351
-
dispatch({
352
-
type: 'selectLabeler',
353
-
labeler: supportedLabelers[0],
354
-
})
355
-
}}
356
-
/>
357
-
</>
358
-
) : (
359
-
<>
360
-
{supportedLabelers.map(l => (
361
-
<LabelerCard
362
-
key={l.creator.did}
363
-
labeler={l}
364
-
onSelect={() => {
365
-
dispatch({type: 'selectLabeler', labeler: l})
435
+
)}
436
+
</>
437
+
) : (
438
+
<>
439
+
{hasSupportedLabelers ? (
440
+
<View style={[a.gap_sm]}>
441
+
{hasSingleSupportedLabeler ? (
442
+
<>
443
+
<LabelerCard labeler={supportedLabelers[0]} />
444
+
<ActionOnce
445
+
check={() => !state.selectedLabeler}
446
+
callback={() => {
447
+
dispatch({
448
+
type: 'selectLabeler',
449
+
labeler: supportedLabelers[0],
450
+
})
366
451
}}
367
452
/>
368
-
))}
369
-
</>
370
-
)}
371
-
</View>
372
-
) : (
373
-
// should never happen in our app
374
-
<Admonition.Admonition type="warning">
375
-
<Trans>
376
-
Unfortunately, none of your subscribed labelers supports
377
-
this report type.
378
-
</Trans>
379
-
</Admonition.Admonition>
380
-
)}
381
-
</>
382
-
)}
383
-
</>
384
-
)}
385
-
</StepOuter>
453
+
</>
454
+
) : (
455
+
<>
456
+
{supportedLabelers.map(l => (
457
+
<LabelerCard
458
+
key={l.creator.did}
459
+
labeler={l}
460
+
onSelect={() => {
461
+
dispatch({type: 'selectLabeler', labeler: l})
462
+
}}
463
+
/>
464
+
))}
465
+
</>
466
+
)}
467
+
</View>
468
+
) : (
469
+
// should never happen in our app
470
+
<Admonition.Admonition type="warning">
471
+
<Trans>
472
+
Unfortunately, none of your subscribed labelers
473
+
supports this report type.
474
+
</Trans>
475
+
</Admonition.Admonition>
476
+
)}
477
+
</>
478
+
)}
479
+
</>
480
+
)}
481
+
</StepOuter>
482
+
)}
386
483
387
484
<StepOuter>
388
485
<StepTitle
389
-
index={3}
486
+
index={isAlwaysBskyLabeler ? 3 : 4}
390
487
title={_(msg`Submit report`)}
391
-
activeIndex1={state.activeStepIndex1}
488
+
activeIndex1={
489
+
isAlwaysBskyLabeler
490
+
? state.activeStepIndex1 - 1
491
+
: state.activeStepIndex1
492
+
}
392
493
/>
393
-
{state.activeStepIndex1 === 3 && (
494
+
{state.activeStepIndex1 === 4 && (
394
495
<>
395
496
<View style={[a.pb_xs, a.gap_xs]}>
396
497
<Text style={[a.leading_snug, a.pb_xs]}>
···
569
670
)
570
671
}
571
672
572
-
function OptionCard({
673
+
function CategoryCard({
573
674
option,
574
675
onSelect,
575
676
}: {
576
-
option: ReportOption
577
-
onSelect?: (option: ReportOption) => void
677
+
option: ReportCategoryConfig
678
+
onSelect?: (option: ReportCategoryConfig) => void
578
679
}) {
579
680
const t = useTheme()
580
681
const {_} = useLingui()
···
584
685
}, [onSelect, option])
585
686
return (
586
687
<Button
587
-
testID={`report:option:${option.reason}`}
688
+
testID={`report:option:${option.title}`}
588
689
label={_(msg`Create report for ${option.title}`)}
589
690
onPress={onPress}
590
691
disabled={!onSelect}>
···
607
708
<Text
608
709
style={[a.text_sm, , a.leading_snug, t.atoms.text_contrast_medium]}>
609
710
{option.description}
711
+
</Text>
712
+
</View>
713
+
)}
714
+
</Button>
715
+
)
716
+
}
717
+
718
+
function OptionCard({
719
+
option,
720
+
onSelect,
721
+
}: {
722
+
option: ReportOption
723
+
onSelect?: (option: ReportOption) => void
724
+
}) {
725
+
const t = useTheme()
726
+
const {_} = useLingui()
727
+
const gutters = useGutters(['compact'])
728
+
const onPress = React.useCallback(() => {
729
+
onSelect?.(option)
730
+
}, [onSelect, option])
731
+
return (
732
+
<Button
733
+
testID={`report:option:${option.title}`}
734
+
label={_(
735
+
msg({
736
+
message: `Create report for ${option.title}`,
737
+
comment:
738
+
'Accessibility label for button to create a moderation report for the selected option',
739
+
}),
740
+
)}
741
+
onPress={onPress}
742
+
disabled={!onSelect}>
743
+
{({hovered, pressed}) => (
744
+
<View
745
+
style={[
746
+
a.w_full,
747
+
gutters,
748
+
a.py_sm,
749
+
a.rounded_sm,
750
+
a.border,
751
+
t.atoms.bg_contrast_25,
752
+
hovered || pressed
753
+
? [t.atoms.border_contrast_high]
754
+
: [t.atoms.border_contrast_low],
755
+
]}>
756
+
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
757
+
{option.title}
610
758
</Text>
611
759
</View>
612
760
)}
+42
-15
src/components/moderation/ReportDialog/state.ts
+42
-15
src/components/moderation/ReportDialog/state.ts
···
1
-
import {type AppBskyLabelerDefs, ComAtprotoModerationDefs} from '@atproto/api'
1
+
import {type AppBskyLabelerDefs} from '@atproto/api'
2
2
3
-
import {type ReportOption} from './utils/useReportOptions'
3
+
import {OTHER_REPORT_REASONS} from '#/components/moderation/ReportDialog/const'
4
+
import {
5
+
type ReportCategoryConfig,
6
+
type ReportOption,
7
+
} from '#/components/moderation/ReportDialog/utils/useReportOptions'
4
8
5
9
export type ReportState = {
10
+
selectedCategory?: ReportCategoryConfig
6
11
selectedOption?: ReportOption
7
12
selectedLabeler?: AppBskyLabelerDefs.LabelerViewDetailed
8
13
details?: string
···
13
18
14
19
export type ReportAction =
15
20
| {
21
+
type: 'selectCategory'
22
+
option: ReportCategoryConfig
23
+
otherOption: ReportOption
24
+
}
25
+
| {
26
+
type: 'clearCategory'
27
+
}
28
+
| {
16
29
type: 'selectOption'
17
30
option: ReportOption
18
31
}
···
42
55
}
43
56
44
57
export const initialState: ReportState = {
58
+
selectedCategory: undefined,
45
59
selectedOption: undefined,
46
60
selectedLabeler: undefined,
47
61
details: undefined,
···
51
65
52
66
export function reducer(state: ReportState, action: ReportAction): ReportState {
53
67
switch (action.type) {
68
+
case 'selectCategory':
69
+
return {
70
+
...state,
71
+
selectedCategory: action.option,
72
+
activeStepIndex1: action.option.key === 'other' ? 3 : 2,
73
+
selectedOption:
74
+
action.option.key === 'other' ? action.otherOption : undefined,
75
+
}
76
+
case 'clearCategory':
77
+
return {
78
+
...state,
79
+
selectedCategory: undefined,
80
+
selectedOption: undefined,
81
+
selectedLabeler: undefined,
82
+
activeStepIndex1: 1,
83
+
detailsOpen: false,
84
+
}
54
85
case 'selectOption':
55
86
return {
56
87
...state,
57
88
selectedOption: action.option,
58
-
activeStepIndex1: 2,
59
-
detailsOpen:
60
-
!!state.details ||
61
-
action.option.reason === ComAtprotoModerationDefs.REASONOTHER,
89
+
activeStepIndex1: 3,
90
+
detailsOpen: OTHER_REPORT_REASONS.has(action.option.reason),
62
91
}
63
92
case 'clearOption':
64
93
return {
65
94
...state,
66
95
selectedOption: undefined,
67
96
selectedLabeler: undefined,
68
-
activeStepIndex1: 1,
69
-
detailsOpen:
70
-
!!state.details ||
71
-
state.selectedOption?.reason === ComAtprotoModerationDefs.REASONOTHER,
97
+
activeStepIndex1: 2,
98
+
detailsOpen: false,
72
99
}
73
100
case 'selectLabeler':
74
101
return {
75
102
...state,
76
103
selectedLabeler: action.labeler,
77
-
activeStepIndex1: 3,
104
+
activeStepIndex1: 4,
105
+
detailsOpen: state.selectedOption
106
+
? OTHER_REPORT_REASONS.has(state.selectedOption?.reason)
107
+
: false,
78
108
}
79
109
case 'clearLabeler':
80
110
return {
81
111
...state,
82
112
selectedLabeler: undefined,
83
-
activeStepIndex1: 2,
84
-
detailsOpen:
85
-
!!state.details ||
86
-
state.selectedOption?.reason === ComAtprotoModerationDefs.REASONOTHER,
113
+
activeStepIndex1: 3,
87
114
}
88
115
case 'setDetails':
89
116
return {
+14
-6
src/components/moderation/ReportDialog/types.ts
+14
-6
src/components/moderation/ReportDialog/types.ts
···
8
8
9
9
import type * as Dialog from '#/components/Dialog'
10
10
11
+
export type ReportSubjectConvo = {
12
+
view: 'convo' | 'message'
13
+
convoId: string
14
+
message: ChatBskyConvoDefs.MessageView
15
+
}
16
+
11
17
export type ReportSubject =
12
18
| $Typed<AppBskyActorDefs.ProfileViewBasic>
13
19
| $Typed<AppBskyActorDefs.ProfileView>
···
16
22
| $Typed<AppBskyFeedDefs.GeneratorView>
17
23
| $Typed<AppBskyGraphDefs.StarterPackView>
18
24
| $Typed<AppBskyFeedDefs.PostView>
19
-
| {convoId: string; message: ChatBskyConvoDefs.MessageView}
25
+
| ReportSubjectConvo
20
26
21
27
export type ParsedReportSubject =
22
28
| {
···
55
61
did: string
56
62
nsid: string
57
63
}
58
-
| {
59
-
type: 'chatMessage'
60
-
convoId: string
61
-
message: ChatBskyConvoDefs.MessageView
62
-
}
64
+
| ({
65
+
type: 'convoMessage'
66
+
} & ReportSubjectConvo)
63
67
64
68
export type ReportDialogProps = {
65
69
control: Dialog.DialogOuterProps['control']
66
70
subject: ParsedReportSubject
71
+
/**
72
+
* Called if the report was successfully submitted.
73
+
*/
74
+
onAfterSubmit?: () => void
67
75
}
+1
-1
src/components/moderation/ReportDialog/utils/parseReportSubject.ts
+1
-1
src/components/moderation/ReportDialog/utils/parseReportSubject.ts
+237
-102
src/components/moderation/ReportDialog/utils/useReportOptions.ts
+237
-102
src/components/moderation/ReportDialog/utils/useReportOptions.ts
···
1
1
import {useMemo} from 'react'
2
-
import {ComAtprotoModerationDefs} from '@atproto/api'
2
+
import {ToolsOzoneReportDefs as OzoneReportDefs} from '@atproto/api'
3
3
import {msg} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
5
5
6
-
export interface ReportOption {
7
-
reason: string
6
+
export type ReportCategory =
7
+
| 'childSafety'
8
+
| 'violencePhysicalHarm'
9
+
| 'sexualAdultContent'
10
+
| 'harassmentHate'
11
+
| 'misleading'
12
+
| 'ruleBreaking'
13
+
| 'selfHarm'
14
+
| 'other'
15
+
16
+
export type ReportCategoryConfig = {
17
+
key: ReportCategory
8
18
title: string
9
19
description: string
20
+
options: ReportOption[]
10
21
}
11
22
12
-
interface ReportOptions {
13
-
account: ReportOption[]
14
-
post: ReportOption[]
15
-
list: ReportOption[]
16
-
starterPack: ReportOption[]
17
-
feed: ReportOption[]
18
-
chatMessage: ReportOption[]
23
+
export type ReportOption = {
24
+
title: string
25
+
reason: OzoneReportDefs.ReasonType
19
26
}
20
27
21
-
export function useReportOptions(): ReportOptions {
28
+
export function useReportOptions() {
22
29
const {_} = useLingui()
23
30
24
31
return useMemo(() => {
25
-
const other = {
26
-
reason: ComAtprotoModerationDefs.REASONOTHER,
27
-
title: _(msg`Other`),
28
-
description: _(msg`An issue not included in these options`),
29
-
}
30
-
const common = [
31
-
{
32
-
reason: ComAtprotoModerationDefs.REASONRUDE,
33
-
title: _(msg`Anti-Social Behavior`),
34
-
description: _(msg`Harassment, trolling, or intolerance`),
32
+
const categories: Record<ReportCategory, ReportCategoryConfig> = {
33
+
misleading: {
34
+
key: 'misleading',
35
+
title: _(msg`Misleading`),
36
+
description: _(msg`Spam or other inauthentic behavior or deception`),
37
+
options: [
38
+
{
39
+
title: _(msg`Spam`),
40
+
reason: OzoneReportDefs.REASONMISLEADINGSPAM,
41
+
},
42
+
{
43
+
title: _(msg`Scam`),
44
+
reason: OzoneReportDefs.REASONMISLEADINGSCAM,
45
+
},
46
+
{
47
+
title: _(msg`Fake account or bot`),
48
+
reason: OzoneReportDefs.REASONMISLEADINGBOT,
49
+
},
50
+
{
51
+
title: _(msg`Impersonation`),
52
+
reason: OzoneReportDefs.REASONMISLEADINGIMPERSONATION,
53
+
},
54
+
{
55
+
title: _(msg`False information about elections`),
56
+
reason: OzoneReportDefs.REASONMISLEADINGELECTIONS,
57
+
},
58
+
{
59
+
title: _(msg`Other misleading content`),
60
+
reason: OzoneReportDefs.REASONMISLEADINGOTHER,
61
+
},
62
+
],
63
+
},
64
+
sexualAdultContent: {
65
+
key: 'sexualAdultContent',
66
+
title: _(msg`Adult content`),
67
+
description: _(
68
+
msg`Unlabeled, abusive, or non-consensual adult content`,
69
+
),
70
+
options: [
71
+
{
72
+
title: _(msg`Unlabeled adult content`),
73
+
reason: OzoneReportDefs.REASONSEXUALUNLABELED,
74
+
},
75
+
{
76
+
title: _(msg`Adult sexual abuse content`),
77
+
reason: OzoneReportDefs.REASONSEXUALABUSECONTENT,
78
+
},
79
+
{
80
+
title: _(msg`Non-consensual intimate imagery`),
81
+
reason: OzoneReportDefs.REASONSEXUALNCII,
82
+
},
83
+
{
84
+
title: _(msg`Deepfake adult content`),
85
+
reason: OzoneReportDefs.REASONSEXUALDEEPFAKE,
86
+
},
87
+
{
88
+
title: _(msg`Animal sexual abuse`),
89
+
reason: OzoneReportDefs.REASONSEXUALANIMAL,
90
+
},
91
+
{
92
+
title: _(msg`Other sexual violence content`),
93
+
reason: OzoneReportDefs.REASONSEXUALOTHER,
94
+
},
95
+
],
96
+
},
97
+
harassmentHate: {
98
+
key: 'harassmentHate',
99
+
title: _(msg`Harassment or hate`),
100
+
description: _(msg`Abusive or discriminatory behavior`),
101
+
options: [
102
+
{
103
+
title: _(msg`Trolling`),
104
+
reason: OzoneReportDefs.REASONHARASSMENTTROLL,
105
+
},
106
+
{
107
+
title: _(msg`Targeted harassment`),
108
+
reason: OzoneReportDefs.REASONHARASSMENTTARGETED,
109
+
},
110
+
{
111
+
title: _(msg`Hate speech`),
112
+
reason: OzoneReportDefs.REASONHARASSMENTHATESPEECH,
113
+
},
114
+
{
115
+
title: _(msg`Doxxing`),
116
+
reason: OzoneReportDefs.REASONHARASSMENTDOXXING,
117
+
},
118
+
{
119
+
title: _(msg`Other harassing or hateful content`),
120
+
reason: OzoneReportDefs.REASONHARASSMENTOTHER,
121
+
},
122
+
],
123
+
},
124
+
violencePhysicalHarm: {
125
+
key: 'violencePhysicalHarm',
126
+
title: _(msg`Violence`),
127
+
description: _(msg`Violent or threatening content`),
128
+
options: [
129
+
{
130
+
title: _(msg`Animal welfare`),
131
+
reason: OzoneReportDefs.REASONVIOLENCEANIMAL,
132
+
},
133
+
{
134
+
title: _(msg`Threats or incitement`),
135
+
reason: OzoneReportDefs.REASONVIOLENCETHREATS,
136
+
},
137
+
{
138
+
title: _(msg`Graphic violent content`),
139
+
reason: OzoneReportDefs.REASONVIOLENCEGRAPHICCONTENT,
140
+
},
141
+
{
142
+
title: _(msg`Glorification of violence`),
143
+
reason: OzoneReportDefs.REASONVIOLENCEGLORIFICATION,
144
+
},
145
+
{
146
+
title: _(msg`Extremist content`),
147
+
reason: OzoneReportDefs.REASONVIOLENCEEXTREMISTCONTENT,
148
+
},
149
+
{
150
+
title: _(msg`Human trafficking`),
151
+
reason: OzoneReportDefs.REASONVIOLENCETRAFFICKING,
152
+
},
153
+
{
154
+
title: _(msg`Other violent content`),
155
+
reason: OzoneReportDefs.REASONVIOLENCEOTHER,
156
+
},
157
+
],
158
+
},
159
+
childSafety: {
160
+
key: 'childSafety',
161
+
title: _(msg`Child safety`),
162
+
description: _(msg`Harming or endangering minors`),
163
+
options: [
164
+
{
165
+
title: _(msg`Child Sexual Abuse Material (CSAM)`),
166
+
reason: OzoneReportDefs.REASONCHILDSAFETYCSAM,
167
+
},
168
+
{
169
+
title: _(msg`Grooming or predatory behavior`),
170
+
reason: OzoneReportDefs.REASONCHILDSAFETYGROOM,
171
+
},
172
+
{
173
+
title: _(msg`Privacy violation of a minor`),
174
+
reason: OzoneReportDefs.REASONCHILDSAFETYPRIVACY,
175
+
},
176
+
{
177
+
title: _(msg`Minor harassment or bullying`),
178
+
reason: OzoneReportDefs.REASONCHILDSAFETYHARASSMENT,
179
+
},
180
+
{
181
+
title: _(msg`Other child safety issue`),
182
+
reason: OzoneReportDefs.REASONCHILDSAFETYOTHER,
183
+
},
184
+
],
185
+
},
186
+
selfHarm: {
187
+
key: 'selfHarm',
188
+
title: _(msg`Self-harm or dangerous behaviors`),
189
+
description: _(msg`Harmful or high-risk activities`),
190
+
options: [
191
+
{
192
+
title: _(msg`Content promoting or depicting self-harm`),
193
+
reason: OzoneReportDefs.REASONSELFHARMCONTENT,
194
+
},
195
+
{
196
+
title: _(msg`Eating disorders`),
197
+
reason: OzoneReportDefs.REASONSELFHARMED,
198
+
},
199
+
{
200
+
title: _(msg`Dangerous challenges or activities`),
201
+
reason: OzoneReportDefs.REASONSELFHARMSTUNTS,
202
+
},
203
+
{
204
+
title: _(msg`Dangerous substances or drug abuse`),
205
+
reason: OzoneReportDefs.REASONSELFHARMSUBSTANCES,
206
+
},
207
+
{
208
+
title: _(msg`Other dangerous content`),
209
+
reason: OzoneReportDefs.REASONSELFHARMOTHER,
210
+
},
211
+
],
212
+
},
213
+
ruleBreaking: {
214
+
key: 'ruleBreaking',
215
+
title: _(msg`Breaking site rules`),
216
+
description: _(msg`Banned activities or security violations`),
217
+
options: [
218
+
{
219
+
title: _(msg`Hacking or system attacks`),
220
+
reason: OzoneReportDefs.REASONRULESITESECURITY,
221
+
},
222
+
{
223
+
title: _(msg`Promoting or selling prohibited items or services`),
224
+
reason: OzoneReportDefs.REASONRULEPROHIBITEDSALES,
225
+
},
226
+
{
227
+
title: _(msg`Banned user returning`),
228
+
reason: OzoneReportDefs.REASONRULEBANEVASION,
229
+
},
230
+
{
231
+
title: _(msg`Other network rule-breaking`),
232
+
reason: OzoneReportDefs.REASONRULEOTHER,
233
+
},
234
+
],
35
235
},
36
-
{
37
-
reason: ComAtprotoModerationDefs.REASONVIOLATION,
38
-
title: _(msg`Illegal and Urgent`),
39
-
description: _(msg`Glaring violations of law or terms of service`),
236
+
other: {
237
+
key: 'other',
238
+
title: _(msg`Other`),
239
+
description: _(msg`An issue not included in these options`),
240
+
options: [
241
+
{
242
+
title: _(msg`Other`),
243
+
reason: OzoneReportDefs.REASONOTHER,
244
+
},
245
+
],
40
246
},
41
-
other,
42
-
]
247
+
}
248
+
43
249
return {
44
-
account: [
45
-
{
46
-
reason: ComAtprotoModerationDefs.REASONMISLEADING,
47
-
title: _(msg`Misleading Account`),
48
-
description: _(
49
-
msg`Impersonation or false claims about identity or affiliation`,
50
-
),
51
-
},
52
-
{
53
-
reason: ComAtprotoModerationDefs.REASONSPAM,
54
-
title: _(msg`Frequently Posts Unwanted Content`),
55
-
description: _(msg`Spam; excessive mentions or replies`),
56
-
},
57
-
{
58
-
reason: ComAtprotoModerationDefs.REASONVIOLATION,
59
-
title: _(msg`Name or Description Violates Community Standards`),
60
-
description: _(msg`Terms used violate community standards`),
61
-
},
62
-
other,
63
-
],
64
-
post: [
65
-
{
66
-
reason: ComAtprotoModerationDefs.REASONMISLEADING,
67
-
title: _(msg`Misleading Post`),
68
-
description: _(msg`Impersonation, misinformation, or false claims`),
69
-
},
70
-
{
71
-
reason: ComAtprotoModerationDefs.REASONSPAM,
72
-
title: _(msg`Spam`),
73
-
description: _(msg`Excessive mentions or replies`),
74
-
},
75
-
{
76
-
reason: ComAtprotoModerationDefs.REASONSEXUAL,
77
-
title: _(msg`Unwanted Sexual Content`),
78
-
description: _(msg`Nudity or adult content not labeled as such`),
79
-
},
80
-
...common,
81
-
],
82
-
chatMessage: [
83
-
{
84
-
reason: ComAtprotoModerationDefs.REASONSPAM,
85
-
title: _(msg`Spam`),
86
-
description: _(msg`Excessive or unwanted messages`),
87
-
},
88
-
{
89
-
reason: ComAtprotoModerationDefs.REASONSEXUAL,
90
-
title: _(msg`Unwanted Sexual Content`),
91
-
description: _(msg`Inappropriate messages or explicit links`),
92
-
},
93
-
...common,
94
-
],
95
-
list: [
96
-
{
97
-
reason: ComAtprotoModerationDefs.REASONVIOLATION,
98
-
title: _(msg`Name or Description Violates Community Standards`),
99
-
description: _(msg`Terms used violate community standards`),
100
-
},
101
-
...common,
102
-
],
103
-
starterPack: [
104
-
{
105
-
reason: ComAtprotoModerationDefs.REASONVIOLATION,
106
-
title: _(msg`Name or Description Violates Community Standards`),
107
-
description: _(msg`Terms used violate community standards`),
108
-
},
109
-
...common,
110
-
],
111
-
feed: [
112
-
{
113
-
reason: ComAtprotoModerationDefs.REASONVIOLATION,
114
-
title: _(msg`Name or Description Violates Community Standards`),
115
-
description: _(msg`Terms used violate community standards`),
116
-
},
117
-
...common,
118
-
],
250
+
categories: Object.values(categories) as ReportCategoryConfig[],
251
+
getCategory(reasonName: ReportCategory) {
252
+
return categories[reasonName]
253
+
},
119
254
}
120
255
}, [_])
121
256
}
+24
-10
src/screens/Messages/components/RequestButtons.tsx
+24
-10
src/screens/Messages/components/RequestButtons.tsx
···
25
25
EmailDialogScreenID,
26
26
useEmailDialogControl,
27
27
} from '#/components/dialogs/EmailDialog'
28
-
import {ReportDialog} from '#/components/dms/ReportDialog'
28
+
import {AfterReportDialog} from '#/components/dms/AfterReportDialog'
29
29
import {CircleX_Stroke2_Corner0_Rounded} from '#/components/icons/CircleX'
30
30
import {Flag_Stroke2_Corner0_Rounded as FlagIcon} from '#/components/icons/Flag'
31
31
import {PersonX_Stroke2_Corner0_Rounded as PersonXIcon} from '#/components/icons/Person'
32
32
import {Loader} from '#/components/Loader'
33
33
import * as Menu from '#/components/Menu'
34
+
import {ReportDialog} from '#/components/moderation/ReportDialog'
34
35
35
36
export function RejectMenu({
36
37
convo,
···
100
101
}, [queueBlock, leaveConvo, _])
101
102
102
103
const reportControl = useDialogControl()
104
+
const blockOrDeleteControl = useDialogControl()
103
105
104
106
const lastMessage = ChatBskyConvoDefs.isMessageView(convo.lastMessage)
105
107
? convo.lastMessage
···
162
164
</Menu.Outer>
163
165
</Menu.Root>
164
166
{lastMessage && (
165
-
<ReportDialog
166
-
currentScreen={currentScreen}
167
-
params={{
168
-
type: 'convoMessage',
169
-
convoId: convo.id,
170
-
message: lastMessage,
171
-
}}
172
-
control={reportControl}
173
-
/>
167
+
<>
168
+
<ReportDialog
169
+
subject={{
170
+
view: 'convo',
171
+
convoId: convo.id,
172
+
message: lastMessage,
173
+
}}
174
+
control={reportControl}
175
+
onAfterSubmit={() => {
176
+
blockOrDeleteControl.open()
177
+
}}
178
+
/>
179
+
<AfterReportDialog
180
+
control={blockOrDeleteControl}
181
+
currentScreen={currentScreen}
182
+
params={{
183
+
convoId: convo.id,
184
+
message: lastMessage,
185
+
}}
186
+
/>
187
+
</>
174
188
)}
175
189
</>
176
190
)
+6
-3
src/screens/Settings/NotificationSettings/components/PreferenceControls.tsx
+6
-3
src/screens/Settings/NotificationSettings/components/PreferenceControls.tsx
···
1
1
import {useMemo} from 'react'
2
2
import {View} from 'react-native'
3
3
import {type AppBskyNotificationDefs} from '@atproto/api'
4
-
import {type FilterablePreference} from '@atproto/api/dist/client/types/app/bsky/notification/defs'
5
4
import {msg, Trans} from '@lingui/macro'
6
5
import {useLingui} from '@lingui/react'
7
6
···
25
24
* which groups starterpack joins + verified + unverified notifications into a single toggle.
26
25
*/
27
26
syncOthers?: Exclude<keyof AppBskyNotificationDefs.Preferences, '$type'>[]
28
-
preference?: AppBskyNotificationDefs.Preference | FilterablePreference
27
+
preference?:
28
+
| AppBskyNotificationDefs.Preference
29
+
| AppBskyNotificationDefs.FilterablePreference
29
30
allowDisableInApp?: boolean
30
31
}) {
31
32
if (!preference)
···
53
54
}: {
54
55
name: Exclude<keyof AppBskyNotificationDefs.Preferences, '$type'>
55
56
syncOthers?: Exclude<keyof AppBskyNotificationDefs.Preferences, '$type'>[]
56
-
preference: AppBskyNotificationDefs.Preference | FilterablePreference
57
+
preference:
58
+
| AppBskyNotificationDefs.Preference
59
+
| AppBskyNotificationDefs.FilterablePreference
57
60
allowDisableInApp: boolean
58
61
}) {
59
62
const t = useTheme()