quilling.dev
An ATproto social media client -- with an independent Appview.
1import React from 'react'
2import {View} from 'react-native'
3import {
4 type AppBskyActorDefs,
5 type AppBskyFeedDefs,
6 type AppBskyFeedPost,
7 type ComAtprotoLabelDefs,
8 interpretLabelValueDefinition,
9 type LabelPreference,
10 LABELS,
11 mock,
12 moderatePost,
13 moderateProfile,
14 type ModerationBehavior,
15 type ModerationDecision,
16 type ModerationOpts,
17 RichText,
18} from '@atproto/api'
19import {msg} from '@lingui/macro'
20import {useLingui} from '@lingui/react'
21
22import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
23import {
24 type CommonNavigatorParams,
25 type NativeStackScreenProps,
26} from '#/lib/routes/types'
27import {useModerationOpts} from '#/state/preferences/moderation-opts'
28import {moderationOptsOverrideContext} from '#/state/preferences/moderation-opts'
29import {type FeedNotification} from '#/state/queries/notifications/types'
30import {
31 groupNotifications,
32 shouldFilterNotif,
33} from '#/state/queries/notifications/util'
34import {threadPost} from '#/state/queries/usePostThread/views'
35import {useSession} from '#/state/session'
36import {CenteredView, ScrollView} from '#/view/com/util/Views'
37import {ThreadItemAnchor} from '#/screens/PostThread/components/ThreadItemAnchor'
38import {ThreadItemPost} from '#/screens/PostThread/components/ThreadItemPost'
39import {ProfileHeaderStandard} from '#/screens/Profile/Header/ProfileHeaderStandard'
40import {atoms as a, useTheme} from '#/alf'
41import {Button, ButtonIcon, ButtonText} from '#/components/Button'
42import {Divider} from '#/components/Divider'
43import * as Toggle from '#/components/forms/Toggle'
44import * as ToggleButton from '#/components/forms/ToggleButton'
45import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
46import {
47 ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottom,
48 ChevronTop_Stroke2_Corner0_Rounded as ChevronTop,
49} from '#/components/icons/Chevron'
50import * as Layout from '#/components/Layout'
51import * as ProfileCard from '#/components/ProfileCard'
52import {H1, H3, P, Text} from '#/components/Typography'
53import {ScreenHider} from '../../components/moderation/ScreenHider'
54import {NotificationFeedItem} from '../com/notifications/NotificationFeedItem'
55import {PostFeedItem} from '../com/posts/PostFeedItem'
56
57const LABEL_VALUES: (keyof typeof LABELS)[] = Object.keys(
58 LABELS,
59) as (keyof typeof LABELS)[]
60
61export const DebugModScreen = ({}: NativeStackScreenProps<
62 CommonNavigatorParams,
63 'DebugMod'
64>) => {
65 const t = useTheme()
66 const [scenario, setScenario] = React.useState<string[]>(['label'])
67 const [scenarioSwitches, setScenarioSwitches] = React.useState<string[]>([])
68 const [label, setLabel] = React.useState<string[]>([LABEL_VALUES[0]])
69 const [target, setTarget] = React.useState<string[]>(['account'])
70 const [visibility, setVisiblity] = React.useState<string[]>(['warn'])
71 const [customLabelDef, setCustomLabelDef] =
72 React.useState<ComAtprotoLabelDefs.LabelValueDefinition>({
73 identifier: 'custom',
74 blurs: 'content',
75 severity: 'alert',
76 defaultSetting: 'warn',
77 locales: [
78 {
79 lang: 'en',
80 name: 'Custom label',
81 description: 'A custom label created in this test environment',
82 },
83 ],
84 })
85 const [view, setView] = React.useState<string[]>(['post'])
86 const labelStrings = useGlobalLabelStrings()
87 const {currentAccount} = useSession()
88
89 const isTargetMe =
90 scenario[0] === 'label' && scenarioSwitches.includes('targetMe')
91 const isSelfLabel =
92 scenario[0] === 'label' && scenarioSwitches.includes('selfLabel')
93 const noAdult =
94 scenario[0] === 'label' && scenarioSwitches.includes('noAdult')
95 const isLoggedOut =
96 scenario[0] === 'label' && scenarioSwitches.includes('loggedOut')
97 const isFollowing = scenarioSwitches.includes('following')
98
99 const did =
100 isTargetMe && currentAccount ? currentAccount.did : 'did:web:bob.test'
101
102 const profile = React.useMemo(() => {
103 const mockedProfile = mock.profileViewBasic({
104 handle: `bob.test`,
105 displayName: 'Bob Robertson',
106 description: 'User with this as their bio',
107 labels:
108 scenario[0] === 'label' && target[0] === 'account'
109 ? [
110 mock.label({
111 src: isSelfLabel ? did : undefined,
112 val: label[0],
113 uri: `at://${did}/`,
114 }),
115 ]
116 : scenario[0] === 'label' && target[0] === 'profile'
117 ? [
118 mock.label({
119 src: isSelfLabel ? did : undefined,
120 val: label[0],
121 uri: `at://${did}/app.bsky.actor.profile/self`,
122 }),
123 ]
124 : undefined,
125 viewer: mock.actorViewerState({
126 following: isFollowing
127 ? `at://${currentAccount?.did || ''}/app.bsky.graph.follow/1234`
128 : undefined,
129 muted: scenario[0] === 'mute',
130 mutedByList: undefined,
131 blockedBy: undefined,
132 blocking:
133 scenario[0] === 'block'
134 ? `at://did:web:alice.test/app.bsky.actor.block/fake`
135 : undefined,
136 blockingByList: undefined,
137 }),
138 })
139 mockedProfile.did = did
140 mockedProfile.avatar = 'https://bsky.social/about/images/favicon-32x32.png'
141 // @ts-expect-error ProfileViewBasic is close enough -esb
142 mockedProfile.banner =
143 'https://bsky.social/about/images/social-card-default-gradient.png'
144 return mockedProfile
145 }, [scenario, target, label, isSelfLabel, did, isFollowing, currentAccount])
146
147 const post = React.useMemo(() => {
148 return mock.postView({
149 record: mock.post({
150 text: "This is the body of the post. It's where the text goes. You get the idea.",
151 }),
152 author: profile,
153 labels:
154 scenario[0] === 'label' && target[0] === 'post'
155 ? [
156 mock.label({
157 src: isSelfLabel ? did : undefined,
158 val: label[0],
159 uri: `at://${did}/app.bsky.feed.post/fake`,
160 }),
161 ]
162 : undefined,
163 embed:
164 target[0] === 'embed'
165 ? mock.embedRecordView({
166 record: mock.post({
167 text: 'Embed',
168 }),
169 labels:
170 scenario[0] === 'label' && target[0] === 'embed'
171 ? [
172 mock.label({
173 src: isSelfLabel ? did : undefined,
174 val: label[0],
175 uri: `at://${did}/app.bsky.feed.post/fake`,
176 }),
177 ]
178 : undefined,
179 author: profile,
180 })
181 : {
182 $type: 'app.bsky.embed.images#view',
183 images: [
184 {
185 thumb:
186 'https://bsky.social/about/images/social-card-default-gradient.png',
187 fullsize:
188 'https://bsky.social/about/images/social-card-default-gradient.png',
189 alt: '',
190 },
191 ],
192 },
193 })
194 }, [scenario, label, target, profile, isSelfLabel, did])
195
196 const replyNotif = React.useMemo(() => {
197 const notif = mock.replyNotification({
198 record: mock.post({
199 text: "This is the body of the post. It's where the text goes. You get the idea.",
200 reply: {
201 parent: {
202 uri: `at://${did}/app.bsky.feed.post/fake-parent`,
203 cid: 'bafyreiclp443lavogvhj3d2ob2cxbfuscni2k5jk7bebjzg7khl3esabwq',
204 },
205 root: {
206 uri: `at://${did}/app.bsky.feed.post/fake-parent`,
207 cid: 'bafyreiclp443lavogvhj3d2ob2cxbfuscni2k5jk7bebjzg7khl3esabwq',
208 },
209 },
210 }),
211 author: profile,
212 labels:
213 scenario[0] === 'label' && target[0] === 'post'
214 ? [
215 mock.label({
216 src: isSelfLabel ? did : undefined,
217 val: label[0],
218 uri: `at://${did}/app.bsky.feed.post/fake`,
219 }),
220 ]
221 : undefined,
222 })
223 const [item] = groupNotifications([notif])
224 item.subject = mock.postView({
225 record: notif.record as AppBskyFeedPost.Record,
226 author: profile,
227 labels: notif.labels,
228 })
229 return item
230 }, [scenario, label, target, profile, isSelfLabel, did])
231
232 const followNotif = React.useMemo(() => {
233 const notif = mock.followNotification({
234 author: profile,
235 subjectDid: currentAccount?.did || '',
236 })
237 const [item] = groupNotifications([notif])
238 return item
239 }, [profile, currentAccount])
240
241 const modOpts = React.useMemo(() => {
242 return {
243 userDid: isLoggedOut ? '' : isTargetMe ? did : 'did:web:alice.test',
244 prefs: {
245 adultContentEnabled: !noAdult,
246 labels: {
247 [label[0]]: visibility[0] as LabelPreference,
248 },
249 labelers: [
250 {
251 did: 'did:plc:fake-labeler',
252 labels: {[label[0]]: visibility[0] as LabelPreference},
253 },
254 ],
255 mutedWords: [],
256 hiddenPosts: [],
257 },
258 labelDefs: {
259 'did:plc:fake-labeler': [
260 interpretLabelValueDefinition(customLabelDef, 'did:plc:fake-labeler'),
261 ],
262 },
263 }
264 }, [label, visibility, noAdult, isLoggedOut, isTargetMe, did, customLabelDef])
265
266 const profileModeration = React.useMemo(() => {
267 return moderateProfile(profile, modOpts)
268 }, [profile, modOpts])
269 const postModeration = React.useMemo(() => {
270 return moderatePost(post, modOpts)
271 }, [post, modOpts])
272
273 return (
274 <Layout.Screen>
275 <moderationOptsOverrideContext.Provider value={modOpts}>
276 <ScrollView>
277 <CenteredView style={[t.atoms.bg, a.px_lg, a.py_lg]}>
278 <H1 style={[a.text_5xl, a.font_bold, a.pb_lg]}>
279 Moderation states
280 </H1>
281
282 <Heading title="" subtitle="Scenario" />
283 <ToggleButton.Group
284 label="Scenario"
285 values={scenario}
286 onChange={setScenario}>
287 <ToggleButton.Button name="label" label="Label">
288 <ToggleButton.ButtonText>Label</ToggleButton.ButtonText>
289 </ToggleButton.Button>
290 <ToggleButton.Button name="block" label="Block">
291 <ToggleButton.ButtonText>Block</ToggleButton.ButtonText>
292 </ToggleButton.Button>
293 <ToggleButton.Button name="mute" label="Mute">
294 <ToggleButton.ButtonText>Mute</ToggleButton.ButtonText>
295 </ToggleButton.Button>
296 </ToggleButton.Group>
297
298 {scenario[0] === 'label' && (
299 <>
300 <View
301 style={[
302 a.border,
303 a.rounded_sm,
304 a.mt_lg,
305 a.mb_lg,
306 a.p_lg,
307 t.atoms.border_contrast_medium,
308 ]}>
309 <Toggle.Group
310 label="Toggle"
311 type="radio"
312 values={label}
313 onChange={setLabel}>
314 <View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
315 {LABEL_VALUES.map(labelValue => {
316 let targetFixed = target[0]
317 if (
318 targetFixed !== 'account' &&
319 targetFixed !== 'profile'
320 ) {
321 targetFixed = 'content'
322 }
323 const disabled =
324 isSelfLabel &&
325 LABELS[labelValue].flags.includes('no-self')
326 return (
327 <Toggle.Item
328 key={labelValue}
329 name={labelValue}
330 label={labelStrings[labelValue].name}
331 disabled={disabled}
332 style={disabled ? {opacity: 0.5} : undefined}>
333 <Toggle.Radio />
334 <Toggle.LabelText>{labelValue}</Toggle.LabelText>
335 </Toggle.Item>
336 )
337 })}
338 <Toggle.Item
339 name="custom"
340 label="Custom label"
341 disabled={isSelfLabel}
342 style={isSelfLabel ? {opacity: 0.5} : undefined}>
343 <Toggle.Radio />
344 <Toggle.LabelText>Custom label</Toggle.LabelText>
345 </Toggle.Item>
346 </View>
347 </Toggle.Group>
348
349 {label[0] === 'custom' ? (
350 <CustomLabelForm
351 def={customLabelDef}
352 setDef={setCustomLabelDef}
353 />
354 ) : (
355 <>
356 <View style={{height: 10}} />
357 <Divider />
358 </>
359 )}
360
361 <View style={{height: 10}} />
362
363 <SmallToggler label="Advanced">
364 <Toggle.Group
365 label="Toggle"
366 type="checkbox"
367 values={scenarioSwitches}
368 onChange={setScenarioSwitches}>
369 <View
370 style={[a.gap_md, a.flex_row, a.flex_wrap, a.pt_md]}>
371 <Toggle.Item name="targetMe" label="Target is me">
372 <Toggle.Checkbox />
373 <Toggle.LabelText>Target is me</Toggle.LabelText>
374 </Toggle.Item>
375 <Toggle.Item name="following" label="Following target">
376 <Toggle.Checkbox />
377 <Toggle.LabelText>Following target</Toggle.LabelText>
378 </Toggle.Item>
379 <Toggle.Item name="selfLabel" label="Self label">
380 <Toggle.Checkbox />
381 <Toggle.LabelText>Self label</Toggle.LabelText>
382 </Toggle.Item>
383 <Toggle.Item name="noAdult" label="Adult disabled">
384 <Toggle.Checkbox />
385 <Toggle.LabelText>Adult disabled</Toggle.LabelText>
386 </Toggle.Item>
387 <Toggle.Item name="loggedOut" label="Signed out">
388 <Toggle.Checkbox />
389 <Toggle.LabelText>Signed out</Toggle.LabelText>
390 </Toggle.Item>
391 </View>
392 </Toggle.Group>
393
394 {LABELS[label[0] as keyof typeof LABELS]?.configurable !==
395 false && (
396 <View style={[a.mt_md]}>
397 <Text
398 style={[
399 a.font_bold,
400 a.text_xs,
401 t.atoms.text,
402 a.pb_sm,
403 ]}>
404 Preference
405 </Text>
406 <Toggle.Group
407 label="Preference"
408 type="radio"
409 values={visibility}
410 onChange={setVisiblity}>
411 <View
412 style={[
413 a.flex_row,
414 a.gap_md,
415 a.flex_wrap,
416 a.align_center,
417 ]}>
418 <Toggle.Item name="hide" label="Hide">
419 <Toggle.Radio />
420 <Toggle.LabelText>Hide</Toggle.LabelText>
421 </Toggle.Item>
422 <Toggle.Item name="warn" label="Warn">
423 <Toggle.Radio />
424 <Toggle.LabelText>Warn</Toggle.LabelText>
425 </Toggle.Item>
426 <Toggle.Item name="ignore" label="Ignore">
427 <Toggle.Radio />
428 <Toggle.LabelText>Ignore</Toggle.LabelText>
429 </Toggle.Item>
430 </View>
431 </Toggle.Group>
432 </View>
433 )}
434 </SmallToggler>
435 </View>
436
437 <View style={[a.flex_row, a.flex_wrap, a.gap_md]}>
438 <View>
439 <Text
440 style={[
441 a.font_bold,
442 a.text_xs,
443 t.atoms.text,
444 a.pl_md,
445 a.pb_xs,
446 ]}>
447 Target
448 </Text>
449 <View
450 style={[
451 a.border,
452 a.rounded_full,
453 a.px_md,
454 a.py_sm,
455 t.atoms.border_contrast_medium,
456 t.atoms.bg,
457 ]}>
458 <Toggle.Group
459 label="Target"
460 type="radio"
461 values={target}
462 onChange={setTarget}>
463 <View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
464 <Toggle.Item name="account" label="Account">
465 <Toggle.Radio />
466 <Toggle.LabelText>Account</Toggle.LabelText>
467 </Toggle.Item>
468 <Toggle.Item name="profile" label="Profile">
469 <Toggle.Radio />
470 <Toggle.LabelText>Profile</Toggle.LabelText>
471 </Toggle.Item>
472 <Toggle.Item name="post" label="Post">
473 <Toggle.Radio />
474 <Toggle.LabelText>Post</Toggle.LabelText>
475 </Toggle.Item>
476 <Toggle.Item name="embed" label="Embed">
477 <Toggle.Radio />
478 <Toggle.LabelText>Embed</Toggle.LabelText>
479 </Toggle.Item>
480 </View>
481 </Toggle.Group>
482 </View>
483 </View>
484 </View>
485 </>
486 )}
487
488 <Spacer />
489
490 <Heading title="" subtitle="Results" />
491
492 <ToggleButton.Group
493 label="Results"
494 values={view}
495 onChange={setView}>
496 <ToggleButton.Button name="post" label="Post">
497 <ToggleButton.ButtonText>Post</ToggleButton.ButtonText>
498 </ToggleButton.Button>
499 <ToggleButton.Button name="notifications" label="Notifications">
500 <ToggleButton.ButtonText>Notifications</ToggleButton.ButtonText>
501 </ToggleButton.Button>
502 <ToggleButton.Button name="account" label="Account">
503 <ToggleButton.ButtonText>Account</ToggleButton.ButtonText>
504 </ToggleButton.Button>
505 <ToggleButton.Button name="data" label="Data">
506 <ToggleButton.ButtonText>Data</ToggleButton.ButtonText>
507 </ToggleButton.Button>
508 </ToggleButton.Group>
509
510 <View
511 style={[
512 a.border,
513 a.rounded_sm,
514 a.mt_lg,
515 a.p_md,
516 t.atoms.border_contrast_medium,
517 ]}>
518 {view[0] === 'post' && (
519 <>
520 <Heading title="Post" subtitle="in feed" />
521 <MockPostFeedItem post={post} moderation={postModeration} />
522
523 <Heading title="Post" subtitle="viewed directly" />
524 <MockPostThreadItem post={post} moderationOpts={modOpts} />
525
526 <Heading title="Post" subtitle="reply in thread" />
527 <MockPostThreadItem
528 post={post}
529 moderationOpts={modOpts}
530 isReply
531 />
532 </>
533 )}
534
535 {view[0] === 'notifications' && (
536 <>
537 <Heading title="Notification" subtitle="quote or reply" />
538 <MockNotifItem notif={replyNotif} moderationOpts={modOpts} />
539 <View style={{height: 20}} />
540 <Heading title="Notification" subtitle="follow or like" />
541 <MockNotifItem notif={followNotif} moderationOpts={modOpts} />
542 </>
543 )}
544
545 {view[0] === 'account' && (
546 <>
547 <Heading title="Account" subtitle="in listing" />
548 <MockAccountCard
549 profile={profile}
550 moderation={profileModeration}
551 />
552
553 <Heading title="Account" subtitle="viewing directly" />
554 <MockAccountScreen
555 profile={profile}
556 moderation={profileModeration}
557 moderationOpts={modOpts}
558 />
559 </>
560 )}
561
562 {view[0] === 'data' && (
563 <>
564 <ModerationUIView
565 label="Profile Moderation UI"
566 mod={profileModeration}
567 />
568 <ModerationUIView
569 label="Post Moderation UI"
570 mod={postModeration}
571 />
572 <DataView
573 label={label[0]}
574 data={LABELS[label[0] as keyof typeof LABELS]}
575 />
576 <DataView
577 label="Profile Moderation Data"
578 data={profileModeration}
579 />
580 <DataView
581 label="Post Moderation Data"
582 data={postModeration}
583 />
584 </>
585 )}
586 </View>
587
588 <View style={{height: 400}} />
589 </CenteredView>
590 </ScrollView>
591 </moderationOptsOverrideContext.Provider>
592 </Layout.Screen>
593 )
594}
595
596function Heading({title, subtitle}: {title: string; subtitle?: string}) {
597 const t = useTheme()
598 return (
599 <H3 style={[a.text_3xl, a.font_bold, a.pb_md]}>
600 {title}{' '}
601 {!!subtitle && (
602 <H3 style={[t.atoms.text_contrast_medium, a.text_lg]}>{subtitle}</H3>
603 )}
604 </H3>
605 )
606}
607
608function CustomLabelForm({
609 def,
610 setDef,
611}: {
612 def: ComAtprotoLabelDefs.LabelValueDefinition
613 setDef: React.Dispatch<
614 React.SetStateAction<ComAtprotoLabelDefs.LabelValueDefinition>
615 >
616}) {
617 const t = useTheme()
618 return (
619 <View
620 style={[
621 a.flex_row,
622 a.flex_wrap,
623 a.gap_md,
624 t.atoms.bg_contrast_25,
625 a.rounded_md,
626 a.p_md,
627 a.mt_md,
628 ]}>
629 <View>
630 <Text style={[a.font_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}>
631 Blurs
632 </Text>
633 <View
634 style={[
635 a.border,
636 a.rounded_full,
637 a.px_md,
638 a.py_sm,
639 t.atoms.border_contrast_medium,
640 t.atoms.bg,
641 ]}>
642 <Toggle.Group
643 label="Blurs"
644 type="radio"
645 values={[def.blurs]}
646 onChange={values => setDef(v => ({...v, blurs: values[0]}))}>
647 <View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
648 <Toggle.Item name="content" label="Content">
649 <Toggle.Radio />
650 <Toggle.LabelText>Content</Toggle.LabelText>
651 </Toggle.Item>
652 <Toggle.Item name="media" label="Media">
653 <Toggle.Radio />
654 <Toggle.LabelText>Media</Toggle.LabelText>
655 </Toggle.Item>
656 <Toggle.Item name="none" label="None">
657 <Toggle.Radio />
658 <Toggle.LabelText>None</Toggle.LabelText>
659 </Toggle.Item>
660 </View>
661 </Toggle.Group>
662 </View>
663 </View>
664 <View>
665 <Text style={[a.font_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}>
666 Severity
667 </Text>
668 <View
669 style={[
670 a.border,
671 a.rounded_full,
672 a.px_md,
673 a.py_sm,
674 t.atoms.border_contrast_medium,
675 t.atoms.bg,
676 ]}>
677 <Toggle.Group
678 label="Severity"
679 type="radio"
680 values={[def.severity]}
681 onChange={values => setDef(v => ({...v, severity: values[0]}))}>
682 <View style={[a.flex_row, a.gap_md, a.flex_wrap, a.align_center]}>
683 <Toggle.Item name="alert" label="Alert">
684 <Toggle.Radio />
685 <Toggle.LabelText>Alert</Toggle.LabelText>
686 </Toggle.Item>
687 <Toggle.Item name="inform" label="Inform">
688 <Toggle.Radio />
689 <Toggle.LabelText>Inform</Toggle.LabelText>
690 </Toggle.Item>
691 <Toggle.Item name="none" label="None">
692 <Toggle.Radio />
693 <Toggle.LabelText>None</Toggle.LabelText>
694 </Toggle.Item>
695 </View>
696 </Toggle.Group>
697 </View>
698 </View>
699 </View>
700 )
701}
702
703function Toggler({label, children}: React.PropsWithChildren<{label: string}>) {
704 const t = useTheme()
705 const [show, setShow] = React.useState(false)
706 return (
707 <View style={a.mb_md}>
708 <View
709 style={[
710 t.atoms.border_contrast_medium,
711 a.border,
712 a.rounded_sm,
713 a.p_xs,
714 ]}>
715 <Button
716 variant="solid"
717 color="secondary"
718 label="Toggle visibility"
719 size="small"
720 onPress={() => setShow(!show)}>
721 <ButtonText>{label}</ButtonText>
722 <ButtonIcon
723 icon={show ? ChevronTop : ChevronBottom}
724 position="right"
725 />
726 </Button>
727 {show && children}
728 </View>
729 </View>
730 )
731}
732
733function SmallToggler({
734 label,
735 children,
736}: React.PropsWithChildren<{label: string}>) {
737 const [show, setShow] = React.useState(false)
738 return (
739 <View>
740 <View style={[a.flex_row]}>
741 <Button
742 variant="ghost"
743 color="secondary"
744 label="Toggle visibility"
745 size="tiny"
746 onPress={() => setShow(!show)}>
747 <ButtonText>{label}</ButtonText>
748 <ButtonIcon
749 icon={show ? ChevronTop : ChevronBottom}
750 position="right"
751 />
752 </Button>
753 </View>
754 {show && children}
755 </View>
756 )
757}
758
759function DataView({label, data}: {label: string; data: any}) {
760 return (
761 <Toggler label={label}>
762 <Text style={[{fontFamily: 'monospace'}, a.p_md]}>
763 {JSON.stringify(data, null, 2)}
764 </Text>
765 </Toggler>
766 )
767}
768
769function ModerationUIView({
770 mod,
771 label,
772}: {
773 mod: ModerationDecision
774 label: string
775}) {
776 return (
777 <Toggler label={label}>
778 <View style={a.p_lg}>
779 {[
780 'profileList',
781 'profileView',
782 'avatar',
783 'banner',
784 'displayName',
785 'contentList',
786 'contentView',
787 'contentMedia',
788 ].map(key => {
789 const ui = mod.ui(key as keyof ModerationBehavior)
790 return (
791 <View key={key} style={[a.flex_row, a.gap_md]}>
792 <Text style={[a.font_bold, {width: 100}]}>{key}</Text>
793 <Flag v={ui.filter} label="Filter" />
794 <Flag v={ui.blur} label="Blur" />
795 <Flag v={ui.alert} label="Alert" />
796 <Flag v={ui.inform} label="Inform" />
797 <Flag v={ui.noOverride} label="No-override" />
798 </View>
799 )
800 })}
801 </View>
802 </Toggler>
803 )
804}
805
806function Spacer() {
807 return <View style={{height: 30}} />
808}
809
810function MockPostFeedItem({
811 post,
812 moderation,
813}: {
814 post: AppBskyFeedDefs.PostView
815 moderation: ModerationDecision
816}) {
817 const t = useTheme()
818 if (moderation.ui('contentList').filter) {
819 return (
820 <P style={[t.atoms.bg_contrast_25, a.px_lg, a.py_md, a.mb_lg]}>
821 Filtered from the feed
822 </P>
823 )
824 }
825 return (
826 <PostFeedItem
827 post={post}
828 record={post.record as AppBskyFeedPost.Record}
829 moderation={moderation}
830 parentAuthor={undefined}
831 showReplyTo={false}
832 reason={undefined}
833 feedContext={''}
834 reqId={undefined}
835 rootPost={post}
836 />
837 )
838}
839
840function MockPostThreadItem({
841 post,
842 moderationOpts,
843 isReply,
844}: {
845 post: AppBskyFeedDefs.PostView
846 moderationOpts: ModerationOpts
847 isReply?: boolean
848}) {
849 const thread = threadPost({
850 uri: post.uri,
851 depth: isReply ? 1 : 0,
852 value: {
853 $type: 'app.bsky.unspecced.defs#threadItemPost',
854 post,
855 moreParents: false,
856 moreReplies: 0,
857 opThread: false,
858 hiddenByThreadgate: false,
859 mutedByViewer: false,
860 },
861 moderationOpts,
862 threadgateHiddenReplies: new Set<string>(),
863 })
864
865 return isReply ? (
866 <ThreadItemPost item={thread} />
867 ) : (
868 <ThreadItemAnchor item={thread} />
869 )
870}
871
872function MockNotifItem({
873 notif,
874 moderationOpts,
875}: {
876 notif: FeedNotification
877 moderationOpts: ModerationOpts
878}) {
879 const t = useTheme()
880 if (shouldFilterNotif(notif.notification, moderationOpts)) {
881 return (
882 <P style={[t.atoms.bg_contrast_25, a.px_lg, a.py_md]}>
883 Filtered from the feed
884 </P>
885 )
886 }
887 return (
888 <NotificationFeedItem
889 item={notif}
890 moderationOpts={moderationOpts}
891 highlightUnread
892 />
893 )
894}
895
896function MockAccountCard({
897 profile,
898 moderation,
899}: {
900 profile: AppBskyActorDefs.ProfileViewBasic
901 moderation: ModerationDecision
902}) {
903 const t = useTheme()
904 const moderationOpts = useModerationOpts()
905
906 if (!moderationOpts) return null
907
908 if (moderation.ui('profileList').filter) {
909 return (
910 <P style={[t.atoms.bg_contrast_25, a.px_lg, a.py_md, a.mb_lg]}>
911 Filtered from the listing
912 </P>
913 )
914 }
915
916 return <ProfileCard.Card profile={profile} moderationOpts={moderationOpts} />
917}
918
919function MockAccountScreen({
920 profile,
921 moderation,
922 moderationOpts,
923}: {
924 profile: AppBskyActorDefs.ProfileViewBasic
925 moderation: ModerationDecision
926 moderationOpts: ModerationOpts
927}) {
928 const t = useTheme()
929 const {_} = useLingui()
930 return (
931 <View style={[t.atoms.border_contrast_medium, a.border, a.mb_md]}>
932 <ScreenHider
933 style={{}}
934 screenDescription={_(msg`profile`)}
935 modui={moderation.ui('profileView')}>
936 <ProfileHeaderStandard
937 // @ts-ignore ProfileViewBasic is close enough -prf
938 profile={profile}
939 moderationOpts={moderationOpts}
940 // @ts-ignore ProfileViewBasic is close enough -esb
941 descriptionRT={new RichText({text: profile.description as string})}
942 />
943 </ScreenHider>
944 </View>
945 )
946}
947
948function Flag({v, label}: {v: boolean | undefined; label: string}) {
949 const t = useTheme()
950 return (
951 <View style={[a.flex_row, a.align_center, a.gap_xs]}>
952 <View
953 style={[
954 a.justify_center,
955 a.align_center,
956 a.rounded_xs,
957 a.border,
958 t.atoms.border_contrast_medium,
959 {
960 backgroundColor: t.palette.contrast_25,
961 width: 14,
962 height: 14,
963 },
964 ]}>
965 {v && <Check size="xs" fill={t.palette.contrast_900} />}
966 </View>
967 <P style={a.text_xs}>{label}</P>
968 </View>
969 )
970}