3p moderation services [WIP] (#2550)
* Add modservice screen and profile-header-card * Drop the guidelines for now * Remove ununsed constants * Add label & label group descriptions * Not found state * Reorg, add icon * Subheader * Header * Complete header * Clean up * Add all groups * Fix scroll view * Dialogs side quest * Remove log * Add (WIP) debug mod page * Dialog solution * Add note * Clean up and reorganize localized moderation strings * Memoize * Add example * Add first ReportDialog screen * Report dialog step 2 * Submit * Integrate updates * Move moderation screen * Migrate buttons * Migrate everything * Rough sketch * Fix types * Update atoms values * Abstract ModerationServiceCard * Hook up data to settings page * Handle subscription * Rough enablement * Rough enablement * Some validation, fixes * More work on the mod debug screen * Hook up data * Update invalidation * Hook up data to ReportDialog * Fix native error * Refactor/rewrite the entire moderation-application system * Fix toggles * Add copyright and other option to report * Handle reports on profile vs content * Little cleanup * Get post hiding back in gear * Better loading flow on Mod screen * Clean up Mod screen * Clean up ProfileMod screen * Handle muting correctly * Update enablement on ProfileMod screen * Improve Moderation screen and dialog * Styling, handle disabled labelers * Rework list of labels on own content * Use moderateNotification() * ReportDialog updates * Fix button overflow * Simplify the ProfileModerationService ui * Mod screen design * Move moderation card from the profile header to a tab * Small tweaks to the moderation screen * Enable toggle on mod page * Add notifs to debugmod and dont filter notifs from followed users * Add moderator-service profile view * Wire up more of the modservice data to profiles * A bunch of speculative non-working UI * Cleanup: delete old code * Update ModerationDetailsDialog * Update ReportDialog * Update LabelsOnMe dialog * Handle ReportDialog load better * Rename LabelsOnMeDialog, fix close * Experiment to put labeling under a tab of a normal profile * Moderator variation of profile * Remove dead code and start moving toward latest modsdk * Remove a bunch of now-dead label strings * Update ModDebug to be a bit more intuitive and support custom labels * Minor ui tweaks * Improve consistency of display name blurring * Fix profile-card warning rendering * More debugmod UI tuning * Update to use new labeler semantics * Delete some dead code and do some refactoring * Update profile to pull from labeler definition * Implement new label config controls (wip) * Tweak ui * Implement preference controls on labelers * Rework label pref ui * Get moderation screen working * Add asyncstorage query persistence * Implement label handling * Small cleanup * Implement Likes dialog * Fix: remove text outside of text element * Cleanup * Fix likes dialog on mobile * Implement the label appeal flow * Get report flow working again with temporarily fixed report options * Update onboarding * Enforce limit of ten labeler subscriptions * Fix type errors * Fix lint errors * Improve types of RQ * Some work on Likes dialog, needs discussion * Bit of ReportDialog cleanup * Replace non-single-path SVG * Update nudity descriptions * Update to use new sdk updates * Add adult-content-enabled behavior to label config * Use the default setting of custom labels * Handle global moderation label prefs with the global settings * Fix missing postAuthor * Fix empty moderation page * Add mutewords control back to Mod screen * Tweak adult setting styles * Remove deprecated global labels * Handle underage users on mod screen * Adjust font sizes * Swap in RichText * Like button improvements * Tweaks to Labeler profile * Design tweaks for mod pref dialog * Add tertiary button color * Switch moderation UIs to tertiary color * Update mutewords and hiddenposts to use the new sdk * Add test-environment mod authority * Switch 'gore' to 'graphic-media' * Move nudity out of the adult content control * Remove focus styles from buttons - let the browser behavior handle it * Fixes to the adult content age-gating in moderaiton * Ditch tertiary button color, lighten secondary button * Fix some colors * Remove focused overrides from toggles * Liked by screen * Rework the moderationlabelpref * Fix optimistic like * Cleanup * Change how onboarding handles adult content enabled/disabled * Add special handling of the mod authorities * Tweaks * Update the default labeler avatar to a shield * Add route to go server * Avoid dups due to bad config * Fix attrs * Fix: dont try to detect link/label mismatches on post meta * Correctly show the label behavior when adult content is disabled * Readd the local hiddenPosts handling * WIP * Fix bad merge * Conten hider design tweaks * Fix text string breakage * Adjust source text in ContentHider * Fix link bug * Design tweaks to ContentHider and ModDetailsDialog * Adjust spacing of inform badges * Adjust spacing of embeds in posts * Style tweaks to post/profile alerts * Labels on me and dialog * Remove bad focus styles from post dropdown * Better spacing solution * Tune moderation UIs * Moderation UI tweaks for mobile * Move labelers query on Mod screen * Update to use new SDK appLabelers semantics * Implement report submission * Replace the report modal entirely with the report dialog * Add @ to mod details dialog handle * Bump SDK package * Remove silly type * Add to AWS build CI * Fix ToggleButton overflow * Clean up ModServiceCard, rename to LabelingServiceCard * Hackfix to translate gore labels to graphic-media * Tune content hider sizing on web desktop * Handle self labels * Fix spacing below text-only posts * Fix: send appeals to the right labeler * Give mod page links interactive states * Fix references * Remove focus handling * Remove remnant * Remove the like count from the subscribed labeler listing * Bump @atproto/api@0.11.1 * Remove extra @ * Fix: persist labels to local storage to reduce coverage gaps * update dipendencies * revert dipendencies * Add some explainers on how blocking affects labelers * Tweak copy * Fix underline color in header * Fix profile menu * Handle card overflow * Remove metrics from header * Mute 'account' not 'user' * Show metrics if self * Show the labels tab on logged out view * Fix bad merge * Use purple theming on labelers * Tighten space on LabelerCard * Set staleTime to 6hrs for labeler details * Memoize the memoizers * Drop staleTime to 60s * Move label defs into a context to reduce recomputes * Submit view tweaks * Move labeler fetch below auth * Mitigation: hardcode the bluesky moderation labeler name * Bump sdk * Add missing translated string Co-authored-by: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> * Add missing translated string Co-authored-by: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> * Hailey's fix for incorrect profile tabs Co-authored-by: Hailey <me@haileyok.com> * Feedback * Fix borders, add bottom space * Hailey's fix pt 2 Co-authored-by: Hailey <me@haileyok.com> * Fix post tabs * Integrate feedback pt 1 Co-authored-by: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> * Integrate feedback pt 2 Co-authored-by: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> * Integrate feedback pt 3 Co-authored-by: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> * Integrate feedback pt 4 Co-authored-by: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> * Integrate feedback pt 5 Co-authored-by: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> * Integrate feedback pt 6 Co-authored-by: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> * Integrate feedback pt 7 Co-authored-by: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> * Integrate feedback pt 8 Co-authored-by: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> * Format * Integrate new bday modal * Use public agent for getServices * Update casing --------- Co-authored-by: Eric Bailey <git@esb.lol> Co-authored-by: Takayuki KUSANO <65759+tkusano@users.noreply.github.com> Co-authored-by: Hailey <me@haileyok.com>
This commit is contained in:
Paul Frazee
@@ -0,0 +1,233 @@
|
||||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {
|
||||
AppBskyLabelerDefs,
|
||||
ModerationOpts,
|
||||
interpretLabelValueDefinitions,
|
||||
InterpretedLabelValueDefinition,
|
||||
} from '@atproto/api'
|
||||
import {Trans, msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useSafeAreaFrame} from 'react-native-safe-area-context'
|
||||
|
||||
import {useScrollHandlers} from '#/lib/ScrollContext'
|
||||
import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
|
||||
import {isLabelerSubscribed, lookupLabelValueDefinition} from '#/lib/moderation'
|
||||
import {ListRef} from '#/view/com/util/List'
|
||||
import {SectionRef} from './types'
|
||||
import {isNative} from '#/platform/detection'
|
||||
|
||||
import {useTheme, atoms as a} from '#/alf'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {Loader} from '#/components/Loader'
|
||||
import {Divider} from '#/components/Divider'
|
||||
import {CenteredView, ScrollView} from '#/view/com/util/Views'
|
||||
import {ErrorState} from '../ErrorState'
|
||||
import {ModerationLabelPref} from '#/components/moderation/ModerationLabelPref'
|
||||
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
|
||||
|
||||
interface LabelsSectionProps {
|
||||
isLabelerLoading: boolean
|
||||
labelerInfo: AppBskyLabelerDefs.LabelerViewDetailed | undefined
|
||||
labelerError: Error | null
|
||||
moderationOpts: ModerationOpts
|
||||
scrollElRef: ListRef
|
||||
headerHeight: number
|
||||
}
|
||||
export const ProfileLabelsSection = React.forwardRef<
|
||||
SectionRef,
|
||||
LabelsSectionProps
|
||||
>(function LabelsSectionImpl(
|
||||
{
|
||||
isLabelerLoading,
|
||||
labelerInfo,
|
||||
labelerError,
|
||||
moderationOpts,
|
||||
scrollElRef,
|
||||
headerHeight,
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
const {height: minHeight} = useSafeAreaFrame()
|
||||
|
||||
const onScrollToTop = React.useCallback(() => {
|
||||
// @ts-ignore TODO fix this
|
||||
scrollElRef.current?.scrollTo({
|
||||
animated: isNative,
|
||||
x: 0,
|
||||
y: -headerHeight,
|
||||
})
|
||||
}, [scrollElRef, headerHeight])
|
||||
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
scrollToTop: onScrollToTop,
|
||||
}))
|
||||
|
||||
return (
|
||||
<CenteredView>
|
||||
<View
|
||||
style={[
|
||||
a.border_l,
|
||||
a.border_r,
|
||||
a.border_t,
|
||||
t.atoms.border_contrast_low,
|
||||
{
|
||||
minHeight,
|
||||
},
|
||||
]}>
|
||||
{isLabelerLoading ? (
|
||||
<View style={[a.w_full, a.align_center]}>
|
||||
<Loader size="xl" />
|
||||
</View>
|
||||
) : labelerError || !labelerInfo ? (
|
||||
<ErrorState
|
||||
error={
|
||||
labelerError?.toString() ||
|
||||
_(msg`Something went wrong, please try again.`)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<ProfileLabelsSectionInner
|
||||
moderationOpts={moderationOpts}
|
||||
labelerInfo={labelerInfo}
|
||||
scrollElRef={scrollElRef}
|
||||
headerHeight={headerHeight}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</CenteredView>
|
||||
)
|
||||
})
|
||||
|
||||
export function ProfileLabelsSectionInner({
|
||||
moderationOpts,
|
||||
labelerInfo,
|
||||
scrollElRef,
|
||||
headerHeight,
|
||||
}: {
|
||||
moderationOpts: ModerationOpts
|
||||
labelerInfo: AppBskyLabelerDefs.LabelerViewDetailed
|
||||
scrollElRef: ListRef
|
||||
headerHeight: number
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const contextScrollHandlers = useScrollHandlers()
|
||||
|
||||
const scrollHandler = useAnimatedScrollHandler({
|
||||
onBeginDrag(e, ctx) {
|
||||
contextScrollHandlers.onBeginDrag?.(e, ctx)
|
||||
},
|
||||
onEndDrag(e, ctx) {
|
||||
contextScrollHandlers.onEndDrag?.(e, ctx)
|
||||
},
|
||||
onScroll(e, ctx) {
|
||||
contextScrollHandlers.onScroll?.(e, ctx)
|
||||
},
|
||||
})
|
||||
|
||||
const {labelValues} = labelerInfo.policies
|
||||
const isSubscribed = isLabelerSubscribed(labelerInfo, moderationOpts)
|
||||
const labelDefs = React.useMemo(() => {
|
||||
const customDefs = interpretLabelValueDefinitions(labelerInfo)
|
||||
return labelValues
|
||||
.map(val => lookupLabelValueDefinition(val, customDefs))
|
||||
.filter(
|
||||
def => def && def?.configurable,
|
||||
) as InterpretedLabelValueDefinition[]
|
||||
}, [labelerInfo, labelValues])
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
// @ts-ignore TODO fix this
|
||||
ref={scrollElRef}
|
||||
scrollEventThrottle={1}
|
||||
contentContainerStyle={{
|
||||
paddingTop: headerHeight,
|
||||
borderWidth: 0,
|
||||
}}
|
||||
contentOffset={{x: 0, y: headerHeight * -1}}
|
||||
onScroll={scrollHandler}>
|
||||
<View
|
||||
style={[
|
||||
a.pt_xl,
|
||||
a.px_lg,
|
||||
isNative && a.border_t,
|
||||
t.atoms.border_contrast_low,
|
||||
]}>
|
||||
<View>
|
||||
<Text style={[t.atoms.text_contrast_high, a.leading_snug, a.text_sm]}>
|
||||
<Trans>
|
||||
Labels are annotations on users and content. They can be used to
|
||||
hide, warn, and categorize the network.
|
||||
</Trans>
|
||||
</Text>
|
||||
{labelerInfo.creator.viewer?.blocking ? (
|
||||
<View style={[a.flex_row, a.gap_sm, a.align_center, a.mt_md]}>
|
||||
<CircleInfo size="sm" fill={t.atoms.text_contrast_medium.color} />
|
||||
<Text
|
||||
style={[t.atoms.text_contrast_high, a.leading_snug, a.text_sm]}>
|
||||
<Trans>
|
||||
Blocking does not prevent this labeler from placing labels on
|
||||
your account.
|
||||
</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
{labelValues.length === 0 ? (
|
||||
<Text
|
||||
style={[
|
||||
a.pt_xl,
|
||||
t.atoms.text_contrast_high,
|
||||
a.leading_snug,
|
||||
a.text_sm,
|
||||
]}>
|
||||
<Trans>
|
||||
This labeler hasn't declared what labels it publishes, and may
|
||||
not be active.
|
||||
</Trans>
|
||||
</Text>
|
||||
) : !isSubscribed ? (
|
||||
<Text
|
||||
style={[
|
||||
a.pt_xl,
|
||||
t.atoms.text_contrast_high,
|
||||
a.leading_snug,
|
||||
a.text_sm,
|
||||
]}>
|
||||
<Trans>
|
||||
Subscribe to @{labelerInfo.creator.handle} to use these labels:
|
||||
</Trans>
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
{labelDefs.length > 0 && (
|
||||
<View
|
||||
style={[
|
||||
a.mt_xl,
|
||||
a.w_full,
|
||||
a.rounded_md,
|
||||
a.overflow_hidden,
|
||||
t.atoms.bg_contrast_25,
|
||||
]}>
|
||||
{labelDefs.map((labelDef, i) => {
|
||||
return (
|
||||
<React.Fragment key={labelDef.identifier}>
|
||||
{i !== 0 && <Divider />}
|
||||
<ModerationLabelPref
|
||||
disabled={isSubscribed ? undefined : true}
|
||||
labelValueDefinition={labelDef}
|
||||
labelerDid={labelerInfo.creator.did}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={{height: 400}} />
|
||||
</View>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user