From db14378cff9909599dcd32df592b48c9070345f0 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Fri, 8 Mar 2024 10:04:49 -0600 Subject: [PATCH 01/10] Fix empty moderation page --- src/screens/Moderation/index.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index dbb0f0203c..b1ecbdaa6a 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -81,14 +81,15 @@ export function ModerationScreen( error: preferencesError, data: preferences, } = usePreferencesQuery() + const labelerDids = preferences + ? preferences.moderationPrefs.labelers.map(l => l.did) + : [] const { isLoading: isLabelersLoading, data: labelers, error: labelersError, } = useLabelersDetailedInfoQuery({ - dids: preferences - ? preferences.moderationPrefs.labelers.map(l => l.did) - : [], + dids: labelerDids, }) const {gtMobile} = useBreakpoints() const {height} = useSafeAreaFrame() @@ -111,7 +112,7 @@ export function ModerationScreen( - ) : error || !(preferences && labelers) ? ( + ) : error || !preferences ? ( Date: Fri, 8 Mar 2024 10:10:26 -0600 Subject: [PATCH 02/10] Add mutewords control back to Mod screen --- src/components/icons/Filter.tsx | 5 +++++ src/screens/Moderation/index.tsx | 28 ++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 src/components/icons/Filter.tsx diff --git a/src/components/icons/Filter.tsx b/src/components/icons/Filter.tsx new file mode 100644 index 0000000000..02ac1c71b4 --- /dev/null +++ b/src/components/icons/Filter.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Filter_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4a1 1 0 0 1-.293.707L15 14.414V20a1 1 0 0 1-.758.97l-4 1A1 1 0 0 1 9 21v-6.586L3.293 8.707A1 1 0 0 1 3 8V4Zm2 1v2.586l5.707 5.707A1 1 0 0 1 11 14v5.72l2-.5V14a1 1 0 0 1 .293-.707L19 7.586V5H5Z', +}) diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index b1ecbdaa6a..61e093a52c 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -32,13 +32,16 @@ import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/componen import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group' import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter' import {Text} from '#/components/Typography' import * as Toggle from '#/components/forms/Toggle' import {InlineLink, Link} from '#/components/Link' +import {Button} from '#/components/Button' import {Loader} from '#/components/Loader' import {getModerationServiceTitle} from '#/lib/moderation' import * as ModerationServiceCard from '#/components/ModerationServiceCard' import {GlobalModerationLabelPref} from '#/components/moderation/GlobalModerationLabelPref' +import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' function ErrorState({error}: {error: string}) { const t = useTheme() @@ -133,10 +136,12 @@ export function ModerationScreenInner({ preferences: UsePreferencesQueryResponse labelers?: AppBskyLabelerDefs.LabelerViewDetailed[] }) { + const {_} = useLingui() const t = useTheme() const setMinimalShellMode = useSetMinimalShellMode() const {screen} = useAnalytics() const {gtMobile} = useBreakpoints() + const {mutedWordsDialogControl} = useGlobalDialogsControlContext() useFocusEffect( React.useCallback(() => { @@ -187,6 +192,29 @@ export function ModerationScreenInner({ a.overflow_hidden, t.atoms.bg_contrast_25, ]}> + + Date: Fri, 8 Mar 2024 10:13:35 -0600 Subject: [PATCH 03/10] Tweak adult setting styles --- src/screens/Moderation/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index 61e093a52c..ffb9ac251c 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -300,13 +300,19 @@ export function ModerationScreenInner({ t.atoms.bg_contrast_25, ]}> + style={[ + a.py_lg, + a.px_lg, + a.flex_row, + a.align_center, + a.justify_between, + ]}> Enable adult content From 7a7c234909c1fd98dac656d5dcd95d735230fd6e Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Fri, 8 Mar 2024 10:15:17 -0600 Subject: [PATCH 04/10] Remove deprecated global labels --- src/lib/moderation/useGlobalLabelStrings.ts | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/lib/moderation/useGlobalLabelStrings.ts b/src/lib/moderation/useGlobalLabelStrings.ts index ab5ab18466..6b936723dd 100644 --- a/src/lib/moderation/useGlobalLabelStrings.ts +++ b/src/lib/moderation/useGlobalLabelStrings.ts @@ -18,12 +18,6 @@ export function useGlobalLabelStrings(): GlobalLabelStrings { name: _(msg`Content Blocked`), description: _(msg`This content has been hidden by the moderators.`), }, - '!no-promote': { - name: _(msg`Moderator Filter`), - description: _( - msg`Moderator has chosen to filter the content from feeds.`, - ), - }, '!warn': { name: _(msg`Content Warning`), description: _( @@ -36,18 +30,6 @@ export function useGlobalLabelStrings(): GlobalLabelStrings { msg`This user has requested that their content only be shown to signed-in users.`, ), }, - 'dmca-violation': { - name: _(msg`Copyright Violation`), - description: _( - msg`This content has received a DMCA takedown request. It will be restored if the concerns can be resolved.`, - ), - }, - doxxing: { - name: _(msg`Doxxing`), - description: _( - msg`This content has been reported to include private information about someone without their consent.`, - ), - }, porn: { name: _(msg`Pornography`), description: _(msg`Explicit sexual images.`), From e88eaf2d165acb4883082fdb67fbfabf96f8b581 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Fri, 8 Mar 2024 10:33:40 -0600 Subject: [PATCH 05/10] Handle underage users on mod screen --- src/screens/Moderation/index.tsx | 184 +++++++++++++++++++++---------- 1 file changed, 123 insertions(+), 61 deletions(-) diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index ffb9ac251c..28e2fb112d 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -26,6 +26,7 @@ import { } from '#/state/queries/preferences' import {useLabelersDetailedInfoQuery} from '#/state/queries/labeler' +import {logger} from '#/logger' import {useTheme, atoms as a, useBreakpoints} from '#/alf' import {Divider} from '#/components/Divider' import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign' @@ -36,12 +37,13 @@ import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filte import {Text} from '#/components/Typography' import * as Toggle from '#/components/forms/Toggle' import {InlineLink, Link} from '#/components/Link' -import {Button} from '#/components/Button' +import {Button, ButtonText} from '#/components/Button' import {Loader} from '#/components/Loader' import {getModerationServiceTitle} from '#/lib/moderation' import * as ModerationServiceCard from '#/components/ModerationServiceCard' import {GlobalModerationLabelPref} from '#/components/moderation/GlobalModerationLabelPref' import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' +import {useModalControls} from '#/state/modals' function ErrorState({error}: {error: string}) { const t = useTheme() @@ -142,6 +144,7 @@ export function ModerationScreenInner({ const {screen} = useAnalytics() const {gtMobile} = useBreakpoints() const {mutedWordsDialogControl} = useGlobalDialogsControlContext() + const {openModal} = useModalControls() useFocusEffect( React.useCallback(() => { @@ -156,6 +159,8 @@ export function ModerationScreenInner({ (optimisticAdultContent && optimisticAdultContent.enabled) || (!optimisticAdultContent && preferences.moderationPrefs.adultContentEnabled) ) + const ageNotSet = !preferences.userAge + const isUnderage = (preferences.userAge || 0) < 18 const onToggleAdultContentEnabled = React.useCallback( async (selected: boolean) => { @@ -163,9 +168,10 @@ export function ModerationScreenInner({ await setAdultContentPref({ enabled: selected, }) - } catch (e) { - // TODO - console.error(e) + } catch (e: any) { + logger.error(`Failed to set adult content pref`, { + message: e.message, + }) } }, [setAdultContentPref], @@ -282,65 +288,121 @@ export function ModerationScreenInner({ - - Content filters - - - + {ageNotSet || !isUnderage ? ( + <> - Enable adult content + style={[ + a.pt_2xl, + a.pb_md, + a.text_md, + a.font_bold, + t.atoms.text_contrast_high, + ]}> + Content filters - - - - {adultContentEnabled ? ( - Enabled - ) : ( - Disabled - )} - - - - - - {adultContentEnabled && ( - <> - - - - - - - - - - )} - + + + {ageNotSet ? ( + <> + + + Confirm your age: + + + + + ) : ( + <> + + + + Enable adult content + + + + + {adultContentEnabled ? ( + Enabled + ) : ( + Disabled + )} + + + + + + {adultContentEnabled && ( + <> + + + + + + + + + + )} + + + )} + + + ) : null} Date: Fri, 8 Mar 2024 10:35:06 -0600 Subject: [PATCH 06/10] Adjust font sizes --- src/screens/Moderation/index.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index 28e2fb112d..bbce303ecc 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -211,7 +211,7 @@ export function ModerationScreenInner({ onPress={() => mutedWordsDialogControl.open()}> - + Muted words & tags @@ -233,7 +233,7 @@ export function ModerationScreenInner({ to="/moderation/modlists"> - + Moderation lists @@ -255,7 +255,7 @@ export function ModerationScreenInner({ to="/moderation/muted-accounts"> - + Muted accounts @@ -277,7 +277,7 @@ export function ModerationScreenInner({ to="/moderation/blocked-accounts"> - + Blocked accounts @@ -351,11 +351,7 @@ export function ModerationScreenInner({ a.justify_between, ]}> + style={[a.font_semibold, t.atoms.text_contrast_high]}> Enable adult content Date: Fri, 8 Mar 2024 10:47:16 -0600 Subject: [PATCH 07/10] Swap in RichText --- src/screens/Profile/Header/ProfileHeaderLabeler.tsx | 6 +++--- src/screens/Profile/Header/ProfileHeaderStandard.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx index 70ac65e4fc..01b64647bc 100644 --- a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx +++ b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx @@ -9,7 +9,7 @@ import { } from '@atproto/api' import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {RichText} from 'view/com/util/text/RichText' +import {RichText} from '#/components/RichText' import {useModalControls} from '#/state/modals' import {usePreferencesQuery} from '#/state/queries/preferences' import {useAnalytics} from 'lib/analytics/analytics' @@ -210,9 +210,9 @@ let ProfileHeaderLabeler = ({ ) : undefined} diff --git a/src/screens/Profile/Header/ProfileHeaderStandard.tsx b/src/screens/Profile/Header/ProfileHeaderStandard.tsx index b22caf7bf2..3255536d3f 100644 --- a/src/screens/Profile/Header/ProfileHeaderStandard.tsx +++ b/src/screens/Profile/Header/ProfileHeaderStandard.tsx @@ -31,7 +31,7 @@ import {ProfileHeaderDisplayName} from './DisplayName' import {ProfileHeaderHandle} from './Handle' import {ProfileHeaderMetrics} from './Metrics' import {ProfileHeaderSuggestedFollows} from '#/view/com/profile/ProfileHeaderSuggestedFollows' -import {RichText} from 'view/com/util/text/RichText' +import {RichText} from '#/components/RichText' import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' @@ -249,9 +249,9 @@ let ProfileHeaderStandard = ({ ) : undefined} From 1a9f6fcf73e3858620ae0a3c6d96044174c1c789 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Fri, 8 Mar 2024 11:01:15 -0600 Subject: [PATCH 08/10] Like button improvements --- .../Profile/Header/ProfileHeaderLabeler.tsx | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx index 01b64647bc..b6e1de28fd 100644 --- a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx +++ b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx @@ -24,6 +24,7 @@ import {pluralize} from '#/lib/strings/helpers' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' +import {Text} from '#/components/Typography' import * as Toast from '#/view/com/util/Toast' import {ProfileHeaderShell} from './Shell' import {ProfileHeaderDropdownBtn} from './DropdownBtn' @@ -86,6 +87,8 @@ let ProfileHeaderLabeler = ({ labeler.viewer?.like || '', ) const isLiked = !!likeUri + const likeCount = + isLiked && likeUri ? (labeler.likeCount || 0) + 1 : labeler.likeCount || 0 const onToggleLiked = React.useCallback(async () => { if (!labeler) { @@ -216,7 +219,7 @@ let ProfileHeaderLabeler = ({ /> ) : undefined} - + )} From ca561de2d0577391f01c0cda0ad7e120659e26a2 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Fri, 8 Mar 2024 11:20:42 -0600 Subject: [PATCH 09/10] Tweaks to Labeler profile --- .../settingsGear2_stroke2_corner0_rounded.svg | 1 + src/components/icons/Gear.tsx | 5 + .../moderation/ModerationLabelPref.tsx | 109 +++++++++--------- 3 files changed, 62 insertions(+), 53 deletions(-) create mode 100644 assets/icons/settingsGear2_stroke2_corner0_rounded.svg create mode 100644 src/components/icons/Gear.tsx diff --git a/assets/icons/settingsGear2_stroke2_corner0_rounded.svg b/assets/icons/settingsGear2_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..de8a579194 --- /dev/null +++ b/assets/icons/settingsGear2_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/src/components/icons/Gear.tsx b/src/components/icons/Gear.tsx new file mode 100644 index 0000000000..980b7413bd --- /dev/null +++ b/src/components/icons/Gear.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const SettingsGear2_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M11.1 2a1 1 0 0 0-.832.445L8.851 4.57 6.6 4.05a1 1 0 0 0-.932.268l-1.35 1.35a1 1 0 0 0-.267.932l.52 2.251-2.126 1.417A1 1 0 0 0 2 11.1v1.8a1 1 0 0 0 .445.832l2.125 1.417-.52 2.251a1 1 0 0 0 .268.932l1.35 1.35a1 1 0 0 0 .932.267l2.251-.52 1.417 2.126A1 1 0 0 0 11.1 22h1.8a1 1 0 0 0 .832-.445l1.417-2.125 2.251.52a1 1 0 0 0 .932-.268l1.35-1.35a1 1 0 0 0 .267-.932l-.52-2.251 2.126-1.417A1 1 0 0 0 22 12.9v-1.8a1 1 0 0 0-.445-.832L19.43 8.851l.52-2.251a1 1 0 0 0-.268-.932l-1.35-1.35a1 1 0 0 0-.932-.267l-2.251.52-1.417-2.126A1 1 0 0 0 12.9 2h-1.8Zm-.968 4.255L11.635 4h.73l1.503 2.255a1 1 0 0 0 1.057.42l2.385-.551.566.566-.55 2.385a1 1 0 0 0 .42 1.057L20 11.635v.73l-2.255 1.503a1 1 0 0 0-.42 1.057l.551 2.385-.566.566-2.385-.55a1 1 0 0 0-1.057.42L12.365 20h-.73l-1.503-2.255a1 1 0 0 0-1.057-.42l-2.385.551-.566-.566.55-2.385a1 1 0 0 0-.42-1.057L4 12.365v-.73l2.255-1.503a1 1 0 0 0 .42-1.057L6.123 6.69l.566-.566 2.385.55a1 1 0 0 0 1.057-.42ZM8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z', +}) diff --git a/src/components/moderation/ModerationLabelPref.tsx b/src/components/moderation/ModerationLabelPref.tsx index 035635d551..13a0dff212 100644 --- a/src/components/moderation/ModerationLabelPref.tsx +++ b/src/components/moderation/ModerationLabelPref.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Pressable, View} from 'react-native' +import {View} from 'react-native' import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api' import {useLingui} from '@lingui/react' import {msg, Trans} from '@lingui/macro' @@ -20,9 +20,9 @@ import {Text} from '#/components/Typography' import {InlineLink} from '#/components/Link' import * as Dialog from '#/components/Dialog' import {Button, ButtonText, ButtonIcon} from '#/components/Button' -import {ArrowTriangleBottom_Stroke2_Corner1_Rounded as ArrowTriangleBottom} from '../icons/ArrowTriangle' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '../icons/CircleInfo' import {Check_Stroke2_Corner0_Rounded as Check} from '../icons/Check' +import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '../icons/Gear' export function ModerationLabelPref({ labelValueDefinition, @@ -86,57 +86,57 @@ export function ModerationLabelPref({ return ( <> - control.open()} - accessibilityLabel={settingDesc} - accessibilityHint="" - style={[ - a.flex_row, - a.justify_between, - a.gap_sm, - a.align_center, - t.atoms.bg_contrast_25, - a.px_lg, - a.py_lg, - a.rounded_sm, - ]}> - {labelStrings.name} - - - {labelStrings.description} - - {!disabled && ( + label={settingDesc} + disabled={disabled}> + {({hovered, focused, pressed}) => ( - {!disabled && ( - - {settingDesc} + + {labelStrings.name} + + {labelStrings.description} - )} - {!cantConfigure && ( - + + + {!disabled && ( + + + {settingDesc} + + + )} )} - + {labelStrings.name} @@ -144,10 +144,21 @@ export function ModerationLabelPref({ {labelStrings.description} + {cantConfigure && ( - + - + + {adultDisabled ? ( Adult content must be enabled to configure this label. @@ -167,18 +178,8 @@ export function ModerationLabelPref({ )} - {disabled || cantConfigure ? ( - - ) : ( + + {!cantConfigure && ( <> + + type="radio" + values={selected} + onChange={onSettingChange} + label={_( + msg`Configure filtering settings for ${labelStrings.name}`, + )}> + + {settings.map((s, i) => ( + <> + {i !== 0 && } - {canWarn && ( - - )} - - - + + + + {s.label} + + + + ))} + + )}