From f99307033c235f5b5fdb8ea9999a544a491070d3 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Mon, 4 Mar 2024 16:00:15 -0800 Subject: [PATCH] Implement new label config controls (wip) --- ...TriangleBottom_stroke2_corner1_rounded.svg | 1 + ...gleExclamation_stroke2_corner2_rounded.svg | 1 + src/components/ModerationLabelPref/index.tsx | 68 +++++++------------ src/components/icons/ArrowTriangle.tsx | 5 ++ src/components/icons/TriangleExclamation.tsx | 37 ++++++++++ .../moderation/useLabelBehaviorDescription.ts | 39 +++++++++++ src/screens/Profile/Sections/Labels.tsx | 37 +++------- 7 files changed, 116 insertions(+), 72 deletions(-) create mode 100644 assets/icons/arrowTriangleBottom_stroke2_corner1_rounded.svg create mode 100644 assets/icons/triangleExclamation_stroke2_corner2_rounded.svg create mode 100644 src/components/icons/ArrowTriangle.tsx create mode 100644 src/components/icons/TriangleExclamation.tsx create mode 100644 src/lib/moderation/useLabelBehaviorDescription.ts diff --git a/assets/icons/arrowTriangleBottom_stroke2_corner1_rounded.svg b/assets/icons/arrowTriangleBottom_stroke2_corner1_rounded.svg new file mode 100644 index 0000000000..f40546f7cd --- /dev/null +++ b/assets/icons/arrowTriangleBottom_stroke2_corner1_rounded.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/triangleExclamation_stroke2_corner2_rounded.svg b/assets/icons/triangleExclamation_stroke2_corner2_rounded.svg new file mode 100644 index 0000000000..aa56404457 --- /dev/null +++ b/assets/icons/triangleExclamation_stroke2_corner2_rounded.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/ModerationLabelPref/index.tsx b/src/components/ModerationLabelPref/index.tsx index f7aed47ed3..43adb16d79 100644 --- a/src/components/ModerationLabelPref/index.tsx +++ b/src/components/ModerationLabelPref/index.tsx @@ -1,14 +1,14 @@ import React from 'react' import {View} from 'react-native' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' import {InterprettedLabelValueDefinition} from '@atproto/api' import {useLabelStrings} from '#/lib/moderation/useLabelStrings' +import {useLabelBehaviorDescription} from '#/lib/moderation/useLabelBehaviorDescription' import {useTheme, atoms as a} from '#/alf' import {Text} from '#/components/Typography' -import * as ToggleButton from '#/components/forms/ToggleButton' +import {Button, ButtonText, ButtonIcon} from '#/components/Button' +import {ArrowTriangleBottom_Stroke2_Corner1_Rounded as ArrowTriangleBottom} from '../icons/ArrowTriangle' export function ModerationLabelPref({ labelValueDefinition, @@ -19,64 +19,42 @@ export function ModerationLabelPref({ }) { console.log({labelValueDefinition}) const t = useTheme() - const {_} = useLingui() const allLabelStrings = useLabelStrings() const labelStrings = labelValueDefinition.locales[0] // TODO look up locale ? labelValueDefinition.locales[0] : labelValueDefinition.identifier in allLabelStrings ? allLabelStrings[labelValueDefinition.identifier].general : { - general: { - name: labelValueDefinition.identifier, - description: `Labeled "${labelValueDefinition.identifier}"`, - }, + name: labelValueDefinition.identifier, + description: `Labeled "${labelValueDefinition.identifier}"`, } + const settingDesc = useLabelBehaviorDescription(labelValueDefinition, 'hide') // TODO add onChange behavior when mod prefs are updated - const labelOptions = { - hide: _(msg`Hide`), - warn: _(msg`Warn`), - show: _(msg`Ignore`), - } - return ( - - + + {labelStrings.name} {labelStrings.description} - - {!disabled && ( - {}}> - - {labelOptions.show} - - - {labelOptions.warn} - - - {labelOptions.hide} - - - )} - + {!disabled && ( + + + {settingDesc} + + + + )} ) } diff --git a/src/components/icons/ArrowTriangle.tsx b/src/components/icons/ArrowTriangle.tsx new file mode 100644 index 0000000000..b27b719aef --- /dev/null +++ b/src/components/icons/ArrowTriangle.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const ArrowTriangleBottom_Stroke2_Corner1_Rounded = createSinglePathSVG({ + path: 'M4.213 6.886c-.673-1.35.334-2.889 1.806-2.889H17.98c1.472 0 2.479 1.539 1.806 2.89l-5.982 11.997c-.74 1.484-2.87 1.484-3.61 0L4.213 6.886Z', +}) diff --git a/src/components/icons/TriangleExclamation.tsx b/src/components/icons/TriangleExclamation.tsx new file mode 100644 index 0000000000..8bcbe446aa --- /dev/null +++ b/src/components/icons/TriangleExclamation.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import Svg, {Path, Rect} from 'react-native-svg' + +import {useCommonSVGProps, Props} from '#/components/icons/common' + +export const TriangleExclamation_Stroke2_Corner2_Rounded = React.forwardRef< + Svg, + Props +>(function LogoImpl(props, ref) { + const {fill, size, style, ...rest} = useCommonSVGProps(props) + + return ( + + + + + ) +}) diff --git a/src/lib/moderation/useLabelBehaviorDescription.ts b/src/lib/moderation/useLabelBehaviorDescription.ts new file mode 100644 index 0000000000..43110d72f7 --- /dev/null +++ b/src/lib/moderation/useLabelBehaviorDescription.ts @@ -0,0 +1,39 @@ +import {InterprettedLabelValueDefinition, LabelPreference} from '@atproto/api' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' + +export function useLabelBehaviorDescription( + labelValueDef: InterprettedLabelValueDefinition, + pref: LabelPreference, +) { + const {_} = useLingui() + if (pref === 'ignore') { + return _(msg`Disabled`) + } + if (labelValueDef.blurs === 'content') { + if (pref === 'hide') { + return _(msg`Hide content`) + } + return _(msg`Warn content`) + } else if (labelValueDef.blurs === 'media') { + if (pref === 'hide') { + return _(msg`Hide images`) + } + return _(msg`Warn images`) + } else if (labelValueDef.severity === 'alert') { + if (pref === 'hide') { + return _(msg`Filter from feeds`) + } + return _(msg`Show warning`) + } else if (labelValueDef.severity === 'inform') { + if (pref === 'hide') { + return _(msg`Filter from feeds`) + } + return _(msg`Show badge`) + } else { + if (pref === 'hide') { + return _(msg`Filter from feeds`) + } + return _(msg`Disabled`) + } +} diff --git a/src/screens/Profile/Sections/Labels.tsx b/src/screens/Profile/Sections/Labels.tsx index 5338def58a..bdddb16527 100644 --- a/src/screens/Profile/Sections/Labels.tsx +++ b/src/screens/Profile/Sections/Labels.tsx @@ -80,11 +80,10 @@ export function ProfileLabelsSectionInner({ }) { const {_} = useLingui() const t = useTheme() - const isEnabled = Boolean( - moderationOpts.prefs.mods.find(mod => mod.did === labelerInfo.creator.did), - ) - const hasSession = true // TODO const {labelValues} = labelerInfo.policies + const isSubscribed = moderationOpts.prefs.mods.find( + mod => mod.did === labelerInfo.creator.did, + ) const labelDefs = React.useMemo(() => { const customDefs = interpretLabelValueDefinitions(labelerInfo) return labelValues @@ -94,24 +93,6 @@ export function ProfileLabelsSectionInner({ ) as InterprettedLabelValueDefinition[] }, [labelerInfo, labelValues]) - const {mutateAsync: toggleSubscription, variables} = - useLabelerSubscriptionMutation() - const isSubscribed = - variables?.subscribe ?? - moderationOpts.prefs.mods.find(mod => mod.did === labelerInfo.creator.did) - - const onPressSubscribe = React.useCallback(async () => { - try { - await toggleSubscription({ - did: labelerInfo.creator.did, - subscribe: !isSubscribed, - }) - } catch (e: any) { - // setSubscriptionError(e.message) - logger.error(`Failed to subscribe to labeler`, {message: e.message}) - } - }, [toggleSubscription, isSubscribed, labelerInfo]) - return ( {labelDefs.map((labelDef, i) => { return ( - + {i !== 0 && } - + + + ) })}