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 && }
-
+
+
+
)
})}