diff options
Diffstat (limited to 'src/view/screens/DebugMod.tsx')
| -rw-r--r-- | src/view/screens/DebugMod.tsx | 577 |
1 files changed, 297 insertions, 280 deletions
diff --git a/src/view/screens/DebugMod.tsx b/src/view/screens/DebugMod.tsx index d83623adc..b87fc8683 100644 --- a/src/view/screens/DebugMod.tsx +++ b/src/view/screens/DebugMod.tsx @@ -21,6 +21,7 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {moderationOptsOverrideContext} from '#/state/preferences/moderation-opts' import {FeedNotification} from '#/state/queries/notifications/types' import { @@ -28,7 +29,6 @@ import { shouldFilterNotif, } from '#/state/queries/notifications/util' import {useSession} from '#/state/session' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {CenteredView, ScrollView} from '#/view/com/util/Views' import {ProfileHeaderStandard} from '#/screens/Profile/Header/ProfileHeaderStandard' import {atoms as a, useTheme} from '#/alf' @@ -41,6 +41,7 @@ import { ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottom, ChevronTop_Stroke2_Corner0_Rounded as ChevronTop, } from '#/components/icons/Chevron' +import * as Layout from '#/components/Layout' import {H1, H3, P, Text} from '#/components/Typography' import {ScreenHider} from '../../components/moderation/ScreenHider' import {FeedItem as NotifFeedItem} from '../com/notifications/FeedItem' @@ -264,309 +265,325 @@ export const DebugModScreen = ({}: NativeStackScreenProps< }, [post, modOpts]) return ( - <moderationOptsOverrideContext.Provider value={modOpts}> - <ScrollView> - <CenteredView style={[t.atoms.bg, a.px_lg, a.py_lg]}> - <H1 style={[a.text_5xl, a.font_bold, a.pb_lg]}>Moderation states</H1> - - <Heading title="" subtitle="Scenario" /> - <ToggleButton.Group - label="Scenario" - values={scenario} - onChange={setScenario}> - <ToggleButton.Button name="label" label="Label"> - <ToggleButton.ButtonText>Label</ToggleButton.ButtonText> - </ToggleButton.Button> - <ToggleButton.Button name="block" label="Block"> - <ToggleButton.ButtonText>Block</ToggleButton.ButtonText> - </ToggleButton.Button> - <ToggleButton.Button name="mute" label="Mute"> - <ToggleButton.ButtonText>Mute</ToggleButton.ButtonText> - </ToggleButton.Button> - </ToggleButton.Group> - - {scenario[0] === 'label' && ( - <> - <View - style={[ - a.border, - a.rounded_sm, - a.mt_lg, - a.mb_lg, - a.p_lg, - t.atoms.border_contrast_medium, - ]}> - <Toggle.Group - label="Toggle" - type="radio" - values={label} - onChange={setLabel}> - <View style={[a.flex_row, a.gap_md, a.flex_wrap]}> - {LABEL_VALUES.map(labelValue => { - let targetFixed = target[0] - if ( - targetFixed !== 'account' && - targetFixed !== 'profile' - ) { - targetFixed = 'content' - } - const disabled = - isSelfLabel && - LABELS[labelValue].flags.includes('no-self') - return ( - <Toggle.Item - key={labelValue} - name={labelValue} - label={labelStrings[labelValue].name} - disabled={disabled} - style={disabled ? {opacity: 0.5} : undefined}> - <Toggle.Radio /> - <Toggle.LabelText>{labelValue}</Toggle.LabelText> - </Toggle.Item> - ) - })} - <Toggle.Item - name="custom" - label="Custom label" - disabled={isSelfLabel} - style={isSelfLabel ? {opacity: 0.5} : undefined}> - <Toggle.Radio /> - <Toggle.LabelText>Custom label</Toggle.LabelText> - </Toggle.Item> - </View> - </Toggle.Group> - - {label[0] === 'custom' ? ( - <CustomLabelForm - def={customLabelDef} - setDef={setCustomLabelDef} - /> - ) : ( - <> - <View style={{height: 10}} /> - <Divider /> - </> - )} - - <View style={{height: 10}} /> - - <SmallToggler label="Advanced"> + <Layout.Screen> + <moderationOptsOverrideContext.Provider value={modOpts}> + <ScrollView> + <CenteredView style={[t.atoms.bg, a.px_lg, a.py_lg]}> + <H1 style={[a.text_5xl, a.font_bold, a.pb_lg]}> + Moderation states + </H1> + + <Heading title="" subtitle="Scenario" /> + <ToggleButton.Group + label="Scenario" + values={scenario} + onChange={setScenario}> + <ToggleButton.Button name="label" label="Label"> + <ToggleButton.ButtonText>Label</ToggleButton.ButtonText> + </ToggleButton.Button> + <ToggleButton.Button name="block" label="Block"> + <ToggleButton.ButtonText>Block</ToggleButton.ButtonText> + </ToggleButton.Button> + <ToggleButton.Button name="mute" label="Mute"> + <ToggleButton.ButtonText>Mute</ToggleButton.ButtonText> + </ToggleButton.Button> + </ToggleButton.Group> + + {scenario[0] === 'label' && ( + <> + <View + style={[ + a.border, + a.rounded_sm, + a.mt_lg, + a.mb_lg, + a.p_lg, + t.atoms.border_contrast_medium, + ]}> <Toggle.Group label="Toggle" - type="checkbox" - values={scenarioSwitches} - onChange={setScenarioSwitches}> - <View style={[a.gap_md, a.flex_row, a.flex_wrap, a.pt_md]}> - <Toggle.Item name="targetMe" label="Target is me"> - <Toggle.Checkbox /> - <Toggle.LabelText>Target is me</Toggle.LabelText> - </Toggle.Item> - <Toggle.Item name="following" label="Following target"> - <Toggle.Checkbox /> - <Toggle.LabelText>Following target</Toggle.LabelText> - </Toggle.Item> - <Toggle.Item name="selfLabel" label="Self label"> - <Toggle.Checkbox /> - <Toggle.LabelText>Self label</Toggle.LabelText> - </Toggle.Item> - <Toggle.Item name="noAdult" label="Adult disabled"> - <Toggle.Checkbox /> - <Toggle.LabelText>Adult disabled</Toggle.LabelText> - </Toggle.Item> - <Toggle.Item name="loggedOut" label="Logged out"> - <Toggle.Checkbox /> - <Toggle.LabelText>Logged out</Toggle.LabelText> + type="radio" + values={label} + onChange={setLabel}> + <View style={[a.flex_row, a.gap_md, a.flex_wrap]}> + {LABEL_VALUES.map(labelValue => { + let targetFixed = target[0] + if ( + targetFixed !== 'account' && + targetFixed !== 'profile' + ) { + targetFixed = 'content' + } + const disabled = + isSelfLabel && + LABELS[labelValue].flags.includes('no-self') + return ( + <Toggle.Item + key={labelValue} + name={labelValue} + label={labelStrings[labelValue].name} + disabled={disabled} + style={disabled ? {opacity: 0.5} : undefined}> + <Toggle.Radio /> + <Toggle.LabelText>{labelValue}</Toggle.LabelText> + </Toggle.Item> + ) + })} + <Toggle.Item + name="custom" + label="Custom label" + disabled={isSelfLabel} + style={isSelfLabel ? {opacity: 0.5} : undefined}> + <Toggle.Radio /> + <Toggle.LabelText>Custom label</Toggle.LabelText> </Toggle.Item> </View> </Toggle.Group> - {LABELS[label[0] as keyof typeof LABELS]?.configurable !== - false && ( - <View style={[a.mt_md]}> - <Text - style={[a.font_bold, a.text_xs, t.atoms.text, a.pb_sm]}> - Preference - </Text> - <Toggle.Group - label="Preference" - type="radio" - values={visibility} - onChange={setVisiblity}> - <View + {label[0] === 'custom' ? ( + <CustomLabelForm + def={customLabelDef} + setDef={setCustomLabelDef} + /> + ) : ( + <> + <View style={{height: 10}} /> + <Divider /> + </> + )} + + <View style={{height: 10}} /> + + <SmallToggler label="Advanced"> + <Toggle.Group + label="Toggle" + type="checkbox" + values={scenarioSwitches} + onChange={setScenarioSwitches}> + <View + style={[a.gap_md, a.flex_row, a.flex_wrap, a.pt_md]}> + <Toggle.Item name="targetMe" label="Target is me"> + <Toggle.Checkbox /> + <Toggle.LabelText>Target is me</Toggle.LabelText> + </Toggle.Item> + <Toggle.Item name="following" label="Following target"> + <Toggle.Checkbox /> + <Toggle.LabelText>Following target</Toggle.LabelText> + </Toggle.Item> + <Toggle.Item name="selfLabel" label="Self label"> + <Toggle.Checkbox /> + <Toggle.LabelText>Self label</Toggle.LabelText> + </Toggle.Item> + <Toggle.Item name="noAdult" label="Adult disabled"> + <Toggle.Checkbox /> + <Toggle.LabelText>Adult disabled</Toggle.LabelText> + </Toggle.Item> + <Toggle.Item name="loggedOut" label="Logged out"> + <Toggle.Checkbox /> + <Toggle.LabelText>Logged out</Toggle.LabelText> + </Toggle.Item> + </View> + </Toggle.Group> + + {LABELS[label[0] as keyof typeof LABELS]?.configurable !== + false && ( + <View style={[a.mt_md]}> + <Text style={[ - a.flex_row, - a.gap_md, - a.flex_wrap, - a.align_center, + a.font_bold, + a.text_xs, + t.atoms.text, + a.pb_sm, ]}> - <Toggle.Item name="hide" label="Hide"> + Preference + </Text> + <Toggle.Group + label="Preference" + type="radio" + values={visibility} + onChange={setVisiblity}> + <View + style={[ + a.flex_row, + a.gap_md, + a.flex_wrap, + a.align_center, + ]}> + <Toggle.Item name="hide" label="Hide"> + <Toggle.Radio /> + <Toggle.LabelText>Hide</Toggle.LabelText> + </Toggle.Item> + <Toggle.Item name="warn" label="Warn"> + <Toggle.Radio /> + <Toggle.LabelText>Warn</Toggle.LabelText> + </Toggle.Item> + <Toggle.Item name="ignore" label="Ignore"> + <Toggle.Radio /> + <Toggle.LabelText>Ignore</Toggle.LabelText> + </Toggle.Item> + </View> + </Toggle.Group> + </View> + )} + </SmallToggler> + </View> + + <View style={[a.flex_row, a.flex_wrap, a.gap_md]}> + <View> + <Text + style={[ + a.font_bold, + a.text_xs, + t.atoms.text, + a.pl_md, + a.pb_xs, + ]}> + Target + </Text> + <View + style={[ + a.border, + a.rounded_full, + a.px_md, + a.py_sm, + t.atoms.border_contrast_medium, + t.atoms.bg, + ]}> + <Toggle.Group + label="Target" + type="radio" + values={target} + onChange={setTarget}> + <View style={[a.flex_row, a.gap_md, a.flex_wrap]}> + <Toggle.Item name="account" label="Account"> + <Toggle.Radio /> + <Toggle.LabelText>Account</Toggle.LabelText> + </Toggle.Item> + <Toggle.Item name="profile" label="Profile"> <Toggle.Radio /> - <Toggle.LabelText>Hide</Toggle.LabelText> + <Toggle.LabelText>Profile</Toggle.LabelText> </Toggle.Item> - <Toggle.Item name="warn" label="Warn"> + <Toggle.Item name="post" label="Post"> <Toggle.Radio /> - <Toggle.LabelText>Warn</Toggle.LabelText> + <Toggle.LabelText>Post</Toggle.LabelText> </Toggle.Item> - <Toggle.Item name="ignore" label="Ignore"> + <Toggle.Item name="embed" label="Embed"> <Toggle.Radio /> - <Toggle.LabelText>Ignore</Toggle.LabelText> + <Toggle.LabelText>Embed</Toggle.LabelText> </Toggle.Item> </View> </Toggle.Group> </View> - )} - </SmallToggler> - </View> - - <View style={[a.flex_row, a.flex_wrap, a.gap_md]}> - <View> - <Text - style={[ - a.font_bold, - a.text_xs, - t.atoms.text, - a.pl_md, - a.pb_xs, - ]}> - Target - </Text> - <View - style={[ - a.border, - a.rounded_full, - a.px_md, - a.py_sm, - t.atoms.border_contrast_medium, - t.atoms.bg, - ]}> - <Toggle.Group - label="Target" - type="radio" - values={target} - onChange={setTarget}> - <View style={[a.flex_row, a.gap_md, a.flex_wrap]}> - <Toggle.Item name="account" label="Account"> - <Toggle.Radio /> - <Toggle.LabelText>Account</Toggle.LabelText> - </Toggle.Item> - <Toggle.Item name="profile" label="Profile"> - <Toggle.Radio /> - <Toggle.LabelText>Profile</Toggle.LabelText> - </Toggle.Item> - <Toggle.Item name="post" label="Post"> - <Toggle.Radio /> - <Toggle.LabelText>Post</Toggle.LabelText> - </Toggle.Item> - <Toggle.Item name="embed" label="Embed"> - <Toggle.Radio /> - <Toggle.LabelText>Embed</Toggle.LabelText> - </Toggle.Item> - </View> - </Toggle.Group> </View> </View> - </View> - </> - )} - - <Spacer /> - - <Heading title="" subtitle="Results" /> - - <ToggleButton.Group label="Results" values={view} onChange={setView}> - <ToggleButton.Button name="post" label="Post"> - <ToggleButton.ButtonText>Post</ToggleButton.ButtonText> - </ToggleButton.Button> - <ToggleButton.Button name="notifications" label="Notifications"> - <ToggleButton.ButtonText>Notifications</ToggleButton.ButtonText> - </ToggleButton.Button> - <ToggleButton.Button name="account" label="Account"> - <ToggleButton.ButtonText>Account</ToggleButton.ButtonText> - </ToggleButton.Button> - <ToggleButton.Button name="data" label="Data"> - <ToggleButton.ButtonText>Data</ToggleButton.ButtonText> - </ToggleButton.Button> - </ToggleButton.Group> - - <View - style={[ - a.border, - a.rounded_sm, - a.mt_lg, - a.p_md, - t.atoms.border_contrast_medium, - ]}> - {view[0] === 'post' && ( - <> - <Heading title="Post" subtitle="in feed" /> - <MockPostFeedItem post={post} moderation={postModeration} /> - - <Heading title="Post" subtitle="viewed directly" /> - <MockPostThreadItem post={post} moderation={postModeration} /> - - <Heading title="Post" subtitle="reply in thread" /> - <MockPostThreadItem - post={post} - moderation={postModeration} - reply - /> - </> - )} - - {view[0] === 'notifications' && ( - <> - <Heading title="Notification" subtitle="quote or reply" /> - <MockNotifItem notif={replyNotif} moderationOpts={modOpts} /> - <View style={{height: 20}} /> - <Heading title="Notification" subtitle="follow or like" /> - <MockNotifItem notif={followNotif} moderationOpts={modOpts} /> </> )} - {view[0] === 'account' && ( - <> - <Heading title="Account" subtitle="in listing" /> - <MockAccountCard - profile={profile} - moderation={profileModeration} - /> - - <Heading title="Account" subtitle="viewing directly" /> - <MockAccountScreen - profile={profile} - moderation={profileModeration} - moderationOpts={modOpts} - /> - </> - )} + <Spacer /> + + <Heading title="" subtitle="Results" /> + + <ToggleButton.Group + label="Results" + values={view} + onChange={setView}> + <ToggleButton.Button name="post" label="Post"> + <ToggleButton.ButtonText>Post</ToggleButton.ButtonText> + </ToggleButton.Button> + <ToggleButton.Button name="notifications" label="Notifications"> + <ToggleButton.ButtonText>Notifications</ToggleButton.ButtonText> + </ToggleButton.Button> + <ToggleButton.Button name="account" label="Account"> + <ToggleButton.ButtonText>Account</ToggleButton.ButtonText> + </ToggleButton.Button> + <ToggleButton.Button name="data" label="Data"> + <ToggleButton.ButtonText>Data</ToggleButton.ButtonText> + </ToggleButton.Button> + </ToggleButton.Group> + + <View + style={[ + a.border, + a.rounded_sm, + a.mt_lg, + a.p_md, + t.atoms.border_contrast_medium, + ]}> + {view[0] === 'post' && ( + <> + <Heading title="Post" subtitle="in feed" /> + <MockPostFeedItem post={post} moderation={postModeration} /> + + <Heading title="Post" subtitle="viewed directly" /> + <MockPostThreadItem post={post} moderation={postModeration} /> + + <Heading title="Post" subtitle="reply in thread" /> + <MockPostThreadItem + post={post} + moderation={postModeration} + reply + /> + </> + )} + + {view[0] === 'notifications' && ( + <> + <Heading title="Notification" subtitle="quote or reply" /> + <MockNotifItem notif={replyNotif} moderationOpts={modOpts} /> + <View style={{height: 20}} /> + <Heading title="Notification" subtitle="follow or like" /> + <MockNotifItem notif={followNotif} moderationOpts={modOpts} /> + </> + )} + + {view[0] === 'account' && ( + <> + <Heading title="Account" subtitle="in listing" /> + <MockAccountCard + profile={profile} + moderation={profileModeration} + /> - {view[0] === 'data' && ( - <> - <ModerationUIView - label="Profile Moderation UI" - mod={profileModeration} - /> - <ModerationUIView - label="Post Moderation UI" - mod={postModeration} - /> - <DataView - label={label[0]} - data={LABELS[label[0] as keyof typeof LABELS]} - /> - <DataView - label="Profile Moderation Data" - data={profileModeration} - /> - <DataView label="Post Moderation Data" data={postModeration} /> - </> - )} - </View> + <Heading title="Account" subtitle="viewing directly" /> + <MockAccountScreen + profile={profile} + moderation={profileModeration} + moderationOpts={modOpts} + /> + </> + )} + + {view[0] === 'data' && ( + <> + <ModerationUIView + label="Profile Moderation UI" + mod={profileModeration} + /> + <ModerationUIView + label="Post Moderation UI" + mod={postModeration} + /> + <DataView + label={label[0]} + data={LABELS[label[0] as keyof typeof LABELS]} + /> + <DataView + label="Profile Moderation Data" + data={profileModeration} + /> + <DataView + label="Post Moderation Data" + data={postModeration} + /> + </> + )} + </View> - <View style={{height: 400}} /> - </CenteredView> - </ScrollView> - </moderationOptsOverrideContext.Provider> + <View style={{height: 400}} /> + </CenteredView> + </ScrollView> + </moderationOptsOverrideContext.Provider> + </Layout.Screen> ) } |