acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Merge branch '3p-moderators' of github.com:bluesky-social/social-app into 3p-moderators

Browse Source
This commit is contained in:
Paul Frazee
2024-03-09 12:47:36 -08:00
parent 68d4d4142c ed91041448
commit 8862c1f540
9 changed files with 296 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/settingsGear2_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="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" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/forms/Toggle.tsx
+6 -6
View File
@@ -49,12 +49,12 @@ const GroupContext = React.createContext<{
setFieldValue: () => {},
})
export type GroupProps = React.PropsWithChildren<{
export type GroupProps<T = string> = React.PropsWithChildren<{
type?: 'radio' | 'checkbox'
values: string[]
values: T[]
maxSelections?: number
disabled?: boolean
onChange: (value: string[]) => void
onChange: (value: T[]) => void
label: string
}>
@@ -73,7 +73,7 @@ export function useItemContext() {
return React.useContext(ItemContext)
}
export function Group({
export function Group<ValuesType = string>({
children,
values: providedValues,
onChange,
@@ -81,13 +81,13 @@ export function Group({
type = 'checkbox',
maxSelections,
label,
}: GroupProps) {
}: GroupProps<ValuesType>) {
const groupRole = type === 'radio' ? 'radiogroup' : undefined
const values = type === 'radio' ? providedValues.slice(0, 1) : providedValues
const [maxReached, setMaxReached] = React.useState(false)
const setFieldValue = React.useCallback<
(props: {name: string; value: boolean}) => void
(props: {name: ValuesType; value: boolean}) => void
>(
({name, value}) => {
if (type === 'checkbox') {
src/components/icons/Filter.tsx
+5
View File
@@ -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',
})
src/components/icons/Gear.tsx
+5
View File
@@ -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',
})
src/components/moderation/ModerationLabelPref.tsx
+119 -109
View File
@@ -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'
@@ -19,10 +19,11 @@ import {useTheme, atoms as a} from '#/alf'
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 {Button} from '#/components/Button'
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'
import * as Toggle from '#/components/forms/Toggle'
import {Divider} from '#/components/Divider'
export function ModerationLabelPref({
labelValueDefinition,
@@ -51,6 +52,7 @@ export function ModerationLabelPref({
savedPref ??
labelValueDefinition.defaultSetting ??
'warn'
const [selected, setSelected] = React.useState<LabelPreference[]>([pref])
const settingDesc = useLabelBehaviorDescription(labelValueDefinition, pref)
const hideLabel = useLabelLongBehaviorDescription(
@@ -81,62 +83,85 @@ export function ModerationLabelPref({
adultOnly && !preferences?.moderationPrefs.adultContentEnabled
const cantConfigure = isGlobalLabel || adultDisabled
const onSelectPref = (newPref: LabelPreference) =>
mutate({label: identifier, visibility: newPref, labelerDid})
const onSettingChange = React.useCallback(
(newPrefs: LabelPreference[]) => {
setSelected(newPrefs)
mutate({label: identifier, visibility: newPrefs[0], labelerDid})
},
[mutate, labelerDid, identifier],
)
const settings = [
{
pref: 'hide',
label: hideLabel,
},
canWarn && {
pref: 'warn',
label: warnLabel,
},
{
pref: 'ignore',
label: ignoreLabel,
},
].filter(Boolean) as {
pref: LabelPreference
label: string
}[]
return (
<>
<Pressable
<Button
onPress={() => 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,
]}>
<Text style={[a.font_bold]}>{labelStrings.name}</Text>
<Text
style={[t.atoms.text_contrast_medium, a.flex_1]}
numberOfLines={1}>
{labelStrings.description}
</Text>
{!disabled && (
label={settingDesc}
disabled={disabled}>
{({hovered, focused, pressed}) => (
<View
style={[
{width: 100},
a.w_full,
a.flex_row,
a.align_center,
a.justify_end,
a.gap_xs,
a.rounded_2xs,
a.justify_between,
a.gap_sm,
a.align_start,
a.px_lg,
a.py_lg,
a.rounded_sm,
t.atoms.bg_contrast_25,
(hovered || focused || pressed) && [t.atoms.bg_contrast_50],
]}>
{!disabled && (
<Text style={[t.atoms.text_contrast_medium, a.font_semibold]}>
{settingDesc}
<View style={[a.gap_xs]}>
<Text style={[a.font_bold]}>{labelStrings.name}</Text>
<Text
style={[t.atoms.text_contrast_medium, a.leading_snug]}
numberOfLines={1}>
{labelStrings.description}
</Text>
)}
{!cantConfigure && (
<ArrowTriangleBottom
width={8}
fill={t.atoms.text_contrast_medium.color}
/>
</View>
{!disabled && (
<View
style={[
a.flex_row,
a.align_center,
a.justify_end,
a.gap_xs,
a.rounded_2xs,
]}>
<Text style={[t.atoms.text_contrast_medium, a.font_semibold]}>
{settingDesc}
</Text>
<Gear size="sm" fill={t.atoms.text_contrast_low.color} />
</View>
)}
</View>
)}
</Pressable>
</Button>
<Dialog.Outer control={control}>
<Dialog.Handle />
<Dialog.Inner
label={_(msg`Settings: ${labelValueDefinition.identifier}`)}
label={_(msg`Settings for ${labelValueDefinition.identifier}`)}
style={[a.gap_sm]}>
<Text style={[a.text_2xl, a.font_bold, a.pb_xs, t.atoms.text]}>
{labelStrings.name}
@@ -144,10 +169,21 @@ export function ModerationLabelPref({
<Text style={[a.text_md, a.pb_sm, t.atoms.text_contrast_medium]}>
{labelStrings.description}
</Text>
{cantConfigure && (
<View style={[a.flex_row, a.gap_xs, a.align_center, a.pb_sm]}>
<View
style={[
a.flex_row,
a.gap_xs,
a.align_center,
a.py_md,
a.px_lg,
a.rounded_sm,
t.atoms.bg_contrast_25,
]}>
<CircleInfo size="md" fill={t.atoms.text_contrast_medium.color} />
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
<Text style={[t.atoms.text_contrast_medium]}>
{adultDisabled ? (
<Trans>
Adult content must be enabled to configure this label.
@@ -167,73 +203,47 @@ export function ModerationLabelPref({
</Text>
</View>
)}
{disabled || cantConfigure ? (
<Button
label={_(msg`Close`)}
size="large"
variant="solid"
color="secondary"
onPress={() => control.close()}>
<ButtonText style={[a.flex_1, a.text_left]}>
<Trans>Close</Trans>
</ButtonText>
</Button>
) : (
<>
<Button
label={hideLabel}
size="large"
variant="solid"
color={pref === 'hide' ? 'primary' : 'secondary'}
onPress={() => {
onSelectPref('hide')
control.close()
}}>
<ButtonText style={[a.flex_1, a.text_left]}>
{hideLabel}
</ButtonText>
{pref === 'hide' && (
<ButtonIcon icon={Check} position="right" />
)}
</Button>
{canWarn && (
<Button
label={warnLabel}
size="large"
variant="solid"
color={pref === 'warn' ? 'primary' : 'secondary'}
onPress={() => {
onSelectPref('warn')
control.close()
}}>
<ButtonText style={[a.flex_1, a.text_left]}>
{warnLabel}
</ButtonText>
{pref === 'warn' && (
<ButtonIcon icon={Check} position="right" />
)}
</Button>
)}
{!cantConfigure && (
<Toggle.Group<LabelPreference>
type="radio"
values={selected}
onChange={onSettingChange}
label={_(
msg`Configure filtering settings for ${labelStrings.name}`,
)}>
<View
style={[
a.rounded_md,
a.overflow_hidden,
t.atoms.bg_contrast_25,
]}>
{settings.map((s, i) => (
<>
{i !== 0 && <Divider />}
<Button
label={ignoreLabel}
size="large"
variant="solid"
color={!disabled && pref === 'ignore' ? 'primary' : 'secondary'}
onPress={() => {
onSelectPref('ignore')
control.close()
}}>
<ButtonText style={[a.flex_1, a.text_left]}>
{ignoreLabel}
</ButtonText>
{pref === 'ignore' && (
<ButtonIcon icon={Check} position="right" />
)}
</Button>
</>
<Toggle.Item name={s.pref} label={s.label}>
<View
style={[
a.flex_1,
a.flex_row,
a.align_center,
a.gap_md,
a.py_md,
a.px_lg,
t.atoms.bg_contrast_25,
]}>
<Toggle.Radio />
<Text>{s.label}</Text>
</View>
</Toggle.Item>
</>
))}
</View>
</Toggle.Group>
)}
<Dialog.Close />
</Dialog.Inner>
</Dialog.Outer>
</>
src/lib/moderation/useGlobalLabelStrings.ts
-18
View File
@@ -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.`),
src/screens/Moderation/index.tsx
+135 -69
View File
@@ -25,22 +25,25 @@ import {
usePreferencesSetAdultContentMutation,
} from '#/state/queries/preferences'
import {useLabelersDetailedInfoQuery} from '#/state/queries/labeler'
import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
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'
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 {Button} from '#/components/Button'
import {InlineLink, Link} from '#/components/Link'
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()
@@ -83,14 +86,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()
@@ -113,7 +117,7 @@ export function ModerationScreen(
<View style={[a.w_full, a.align_center, a.pt_2xl]}>
<Loader size="xl" fill={t.atoms.text.color} />
</View>
) : error || !(preferences && labelers) ? (
) : error || !preferences ? (
<ErrorState
error={
preferencesError?.toString() ||
@@ -129,10 +133,10 @@ export function ModerationScreen(
export function ModerationScreenInner({
preferences,
labelers,
labelers = [],
}: {
preferences: UsePreferencesQueryResponse
labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
labelers?: AppBskyLabelerDefs.LabelerViewDetailed[]
}) {
const {_} = useLingui()
const t = useTheme()
@@ -140,6 +144,7 @@ export function ModerationScreenInner({
const {screen} = useAnalytics()
const {gtMobile} = useBreakpoints()
const {mutedWordsDialogControl} = useGlobalDialogsControlContext()
const {openModal} = useModalControls()
useFocusEffect(
React.useCallback(() => {
@@ -154,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) => {
@@ -161,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],
@@ -191,7 +199,8 @@ export function ModerationScreenInner({
t.atoms.bg_contrast_25,
]}>
<Button
testID="mutewordsBtn"
testID="mutedWordsBtn"
label={_(msg`Open muted words and tags settings`)}
style={[
a.flex_row,
a.align_center,
@@ -199,11 +208,10 @@ export function ModerationScreenInner({
a.p_lg,
a.gap_sm,
]}
label={_(msg`Muted words & tags`)}
onPress={() => mutedWordsDialogControl.open()}>
<View style={[a.flex_row, a.align_center, a.gap_md]}>
<Group size="md" style={[t.atoms.text_contrast_medium]} />
<Text style={[a.text_md]}>
<Filter size="md" style={[t.atoms.text_contrast_medium]} />
<Text style={[a.text_sm, a.font_bold]}>
<Trans>Muted words & tags</Trans>
</Text>
</View>
@@ -225,7 +233,7 @@ export function ModerationScreenInner({
to="/moderation/modlists">
<View style={[a.flex_row, a.align_center, a.gap_md]}>
<Group size="md" style={[t.atoms.text_contrast_medium]} />
<Text style={[a.text_md]}>
<Text style={[a.text_sm, a.font_bold]}>
<Trans>Moderation lists</Trans>
</Text>
</View>
@@ -247,7 +255,7 @@ export function ModerationScreenInner({
to="/moderation/muted-accounts">
<View style={[a.flex_row, a.align_center, a.gap_md]}>
<Person size="md" style={[t.atoms.text_contrast_medium]} />
<Text style={[a.text_md]}>
<Text style={[a.text_sm, a.font_bold]}>
<Trans>Muted accounts</Trans>
</Text>
</View>
@@ -269,7 +277,7 @@ export function ModerationScreenInner({
to="/moderation/blocked-accounts">
<View style={[a.flex_row, a.align_center, a.gap_md]}>
<CircleBanSign size="md" style={[t.atoms.text_contrast_medium]} />
<Text style={[a.text_md]}>
<Text style={[a.text_sm, a.font_bold]}>
<Trans>Blocked accounts</Trans>
</Text>
</View>
@@ -280,59 +288,117 @@ export function ModerationScreenInner({
</Link>
</View>
<Text
style={[
a.pt_2xl,
a.pb_md,
a.text_md,
a.font_bold,
t.atoms.text_contrast_high,
]}>
<Trans>Content filters</Trans>
</Text>
<View
style={[
a.w_full,
a.rounded_md,
a.overflow_hidden,
t.atoms.bg_contrast_25,
]}>
<View
style={[a.pt_lg, a.pb_md, a.px_lg, a.flex_row, a.justify_between]}>
{ageNotSet || !isUnderage ? (
<>
<Text
style={[a.text_md, a.font_semibold, t.atoms.text_contrast_high]}>
<Trans>Enable adult content</Trans>
style={[
a.pt_2xl,
a.pb_md,
a.text_md,
a.font_bold,
t.atoms.text_contrast_high,
]}>
<Trans>Content filters</Trans>
</Text>
<Toggle.Item
label={'Toggle adult content'}
name="adultContent"
value={adultContentEnabled}
onChange={onToggleAdultContentEnabled}>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<Text style={[t.atoms.text_contrast_medium]}>
{adultContentEnabled ? (
<Trans>Enabled</Trans>
) : (
<Trans>Disabled</Trans>
)}
</Text>
<Toggle.Switch />
</View>
</Toggle.Item>
</View>
{adultContentEnabled && (
<>
<Divider />
<GlobalModerationLabelPref labelValueDefinition={LABELS.porn} />
<Divider />
<GlobalModerationLabelPref labelValueDefinition={LABELS.sexual} />
<Divider />
<GlobalModerationLabelPref labelValueDefinition={LABELS.nudity} />
<Divider />
<GlobalModerationLabelPref labelValueDefinition={LABELS.gore} />
</>
)}
</View>
<View style={[a.gap_md]}>
{ageNotSet ? (
<>
<View
style={[
a.w_full,
a.rounded_md,
a.overflow_hidden,
t.atoms.bg_contrast_25,
a.py_md,
a.px_lg,
a.flex_row,
a.align_center,
a.justify_between,
]}>
<Text style={[a.text_md, t.atoms.text_contrast_high]}>
<Trans>Confirm your age:</Trans>
</Text>
<Button
label={_(msg`Confirm your birthdate`)}
size="small"
variant="solid"
color="secondary"
onPress={() => {
openModal({name: 'birth-date-settings'})
}}>
<ButtonText>
<Trans>Set birthdate</Trans>
</ButtonText>
</Button>
</View>
</>
) : (
<>
<View
style={[
a.w_full,
a.rounded_md,
a.overflow_hidden,
t.atoms.bg_contrast_25,
]}>
<View
style={[
a.py_lg,
a.px_lg,
a.flex_row,
a.align_center,
a.justify_between,
]}>
<Text
style={[a.font_semibold, t.atoms.text_contrast_high]}>
<Trans>Enable adult content</Trans>
</Text>
<Toggle.Item
label={_(
msg`Toggle to enable or disable adult content`,
)}
name="adultContent"
value={adultContentEnabled}
onChange={onToggleAdultContentEnabled}>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<Text style={[t.atoms.text_contrast_medium]}>
{adultContentEnabled ? (
<Trans>Enabled</Trans>
) : (
<Trans>Disabled</Trans>
)}
</Text>
<Toggle.Switch />
</View>
</Toggle.Item>
</View>
{adultContentEnabled && (
<>
<Divider />
<GlobalModerationLabelPref
labelValueDefinition={LABELS.porn}
/>
<Divider />
<GlobalModerationLabelPref
labelValueDefinition={LABELS.sexual}
/>
<Divider />
<GlobalModerationLabelPref
labelValueDefinition={LABELS.nudity}
/>
<Divider />
<GlobalModerationLabelPref
labelValueDefinition={LABELS.gore}
/>
</>
)}
</View>
</>
)}
</View>
</>
) : null}
<Text
style={[
src/screens/Profile/Header/ProfileHeaderLabeler.tsx
+22 -20
View File
@@ -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'
@@ -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) {
@@ -210,13 +213,13 @@ let ProfileHeaderLabeler = ({
<View pointerEvents="auto">
<RichText
testID="profileHeaderDescription"
style={t.atoms.text}
style={[a.text_md]}
numberOfLines={15}
richText={descriptionRT}
value={descriptionRT}
/>
</View>
) : undefined}
<View style={[a.flex_row, a.gap_xs, a.align_center, a.pt_md]}>
<View style={[a.flex_row, a.gap_xs, a.align_center, a.pt_lg]}>
<Button
testID="toggleLikeBtn"
size="small"
@@ -235,26 +238,25 @@ let ProfileHeaderLabeler = ({
{typeof labeler.likeCount === 'number' && (
<Button
variant="ghost"
size="tiny"
onPress={() => likesControl.open()}
label={_(
msg`Liked by ${labeler.likeCount} ${pluralize(
labeler.likeCount,
'user',
)}`,
msg`Liked by ${likeCount} ${pluralize(likeCount, 'user')}`,
)}>
<ButtonText
style={[
t.atoms.text_contrast_medium,
a.font_bold,
a.text_sm,
]}>
<Trans>
Liked by {labeler.likeCount}{' '}
{pluralize(labeler.likeCount, 'user')}
</Trans>
</ButtonText>
{({hovered, focused, pressed}) => (
<Text
style={[
a.font_bold,
a.text_sm,
t.atoms.text_contrast_medium,
(hovered || focused || pressed) &&
t.atoms.text_contrast_high,
]}>
<Trans>
Liked by {likeCount} {pluralize(likeCount, 'user')}
</Trans>
</Text>
)}
</Button>
)}
</View>
src/screens/Profile/Header/ProfileHeaderStandard.tsx
+3 -3
View File
@@ -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 = ({
<View pointerEvents="auto">
<RichText
testID="profileHeaderDescription"
style={t.atoms.text}
style={[a.text_md]}
numberOfLines={15}
richText={descriptionRT}
value={descriptionRT}
/>
</View>
) : undefined}