diff --git a/src/components/moderation/PostAlerts.tsx b/src/components/moderation/PostAlerts.tsx index c59aa265..5a33bbc8 100644 --- a/src/components/moderation/PostAlerts.tsx +++ b/src/components/moderation/PostAlerts.tsx @@ -1,9 +1,10 @@ import React from 'react' import {StyleProp, View, ViewStyle} from 'react-native' -import {ModerationCause, ModerationUI} from '@atproto/api' +import {BSKY_LABELER_DID, ModerationCause, ModerationUI} from '@atproto/api' import {getModerationCauseKey} from '#/lib/moderation' import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription' +import {UserAvatar} from '#/view/com/util/UserAvatar' import {atoms as a, useTheme} from '#/alf' import {Button} from '#/components/Button' import { @@ -14,9 +15,11 @@ import {Text} from '#/components/Typography' export function PostAlerts({ modui, + size, style, }: { modui: ModerationUI + size?: 'medium' | 'large' includeMute?: boolean style?: StyleProp }) { @@ -28,17 +31,31 @@ export function PostAlerts({ {modui.alerts.map(cause => ( - + ))} {modui.informs.map(cause => ( - + ))} ) } -function PostLabel({cause}: {cause: ModerationCause}) { +function PostLabel({ + cause, + size, +}: { + cause: ModerationCause + size?: 'medium' | 'large' +}) { const control = useModerationDetailsDialogControl() const desc = useModerationCauseDescription(cause) const t = useTheme() @@ -55,24 +72,36 @@ function PostLabel({cause}: {cause: ModerationCause}) { style={[ a.flex_row, a.align_center, - {paddingLeft: 4, paddingRight: 6, paddingVertical: 1}, a.gap_xs, a.rounded_sm, hovered || pressed - ? t.atoms.bg_contrast_50 - : t.atoms.bg_contrast_25, + ? size === 'large' + ? t.atoms.bg_contrast_50 + : t.atoms.bg_contrast_25 + : size === 'large' + ? t.atoms.bg_contrast_25 + : undefined, + size === 'large' + ? {paddingLeft: 4, paddingRight: 6, paddingVertical: 2} + : {paddingRight: 4, paddingVertical: 1}, ]}> - + {desc.sourceType === 'labeler' && + desc.sourceDid !== BSKY_LABELER_DID ? ( + + ) : ( + + )} {desc.name} - {desc.source ? ` – ${desc.source}` : ''} )} diff --git a/src/components/moderation/ProfileHeaderAlerts.tsx b/src/components/moderation/ProfileHeaderAlerts.tsx index 3fa24b93..287a0bdd 100644 --- a/src/components/moderation/ProfileHeaderAlerts.tsx +++ b/src/components/moderation/ProfileHeaderAlerts.tsx @@ -1,9 +1,14 @@ import React from 'react' import {StyleProp, View, ViewStyle} from 'react-native' -import {ModerationCause, ModerationDecision} from '@atproto/api' +import { + BSKY_LABELER_DID, + ModerationCause, + ModerationDecision, +} from '@atproto/api' import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription' import {getModerationCauseKey} from 'lib/moderation' +import {UserAvatar} from '#/view/com/util/UserAvatar' import {atoms as a, useTheme} from '#/alf' import {Button} from '#/components/Button' import { @@ -62,7 +67,12 @@ function ProfileLabel({cause}: {cause: ModerationCause}) { ? t.atoms.bg_contrast_50 : t.atoms.bg_contrast_25, ]}> - + {desc.sourceType === 'labeler' && + desc.sourceDid !== BSKY_LABELER_DID ? ( + + ) : ( + + )} {desc.name} - {desc.source ? ` – ${desc.source}` : ''} )} diff --git a/src/lib/moderation/useModerationCauseDescription.ts b/src/lib/moderation/useModerationCauseDescription.ts index 57b50d77..be901402 100644 --- a/src/lib/moderation/useModerationCauseDescription.ts +++ b/src/lib/moderation/useModerationCauseDescription.ts @@ -6,15 +6,15 @@ import { } from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {getDefinition, getLabelStrings} from './useLabelInfo' -import {useLabelDefinitions} from '#/state/preferences' -import {useGlobalLabelStrings} from './useGlobalLabelStrings' -import {Props as SVGIconProps} from '#/components/icons/common' -import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' -import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' -import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash' +import {useLabelDefinitions} from '#/state/preferences' import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign' +import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' +import {Props as SVGIconProps} from '#/components/icons/common' +import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash' +import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' +import {useGlobalLabelStrings} from './useGlobalLabelStrings' +import {getDefinition, getLabelStrings} from './useLabelInfo' export interface ModerationCauseDescription { icon: React.ComponentType @@ -22,6 +22,8 @@ export interface ModerationCauseDescription { description: string source?: string sourceType?: ModerationCauseSource['type'] + sourceAvi?: string + sourceDid?: string } export function useModerationCauseDescription( @@ -138,6 +140,8 @@ export function useModerationCauseDescription( description: strings.description, source, sourceType: cause.source.type, + sourceAvi: labeler?.creator.avatar, + sourceDid: cause.label.src, } } // should never happen diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 99fbda6d..5451a67d 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -316,6 +316,7 @@ let PostThreadItemLoaded = ({ childContainerStyle={styles.contentHiderChild}> @@ -517,7 +518,7 @@ let PostThreadItemLoaded = ({ {richText?.text ? ( diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 1a5f954e..70f63427 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -368,7 +368,7 @@ let PostContent = ({ modui={moderation.ui('contentList')} ignoreMute childContainerStyle={styles.contentHiderChild}> - + {richText.text ? (