diff --git a/src/components/moderation/ModerationDetailsDialog.tsx b/src/components/moderation/ModerationDetailsDialog.tsx index bdbb2daa51..fd2a62d2cf 100644 --- a/src/components/moderation/ModerationDetailsDialog.tsx +++ b/src/components/moderation/ModerationDetailsDialog.tsx @@ -3,14 +3,14 @@ import {ModerationCause} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription' import {makeProfileLink} from '#/lib/routes/links' import {listUriToHref} from '#/lib/strings/url-helpers' import {isNative} from '#/platform/detection' import {useSession} from '#/state/session' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, useGutters, useTheme} from '#/alf' import * as Dialog from '#/components/Dialog' -import {Divider} from '#/components/Divider' import {InlineLinkText} from '#/components/Link' import {AppModerationCause} from '#/components/Pills' import {Text} from '#/components/Typography' @@ -38,9 +38,11 @@ function ModerationDetailsDialogInner({ control: Dialog.DialogOuterProps['control'] }) { const t = useTheme() + const xGutters = useGutters([0, 'base']) const {_} = useLingui() const desc = useModerationCauseDescription(modcause) const {currentAccount} = useSession() + const timeDiff = useGetTimeAgo() let name let description @@ -128,37 +130,79 @@ function ModerationDetailsDialogInner({ description = '' } + const sourceName = + desc.source || desc.sourceDisplayName || _(msg`an unknown labeler`) + return ( - - - {name} - - - {description} - + + + + {name} + + + {description} + + {modcause?.type === 'label' && ( - - + {modcause.source.type === 'user' ? ( - + This label was applied by the author. ) : ( <> - - - This label was applied by{' '} + + + + Source: {' '} + control.close()} - style={a.text_md}> - {desc.source || _(msg`an unknown labeler`)} + onPress={() => control.close()}> + {sourceName} - . - - + + {modcause.label.exp && ( + + + + Expires in {timeDiff(Date.now(), modcause.label.exp)} + + + + )} + )} diff --git a/src/lib/moderation/useModerationCauseDescription.ts b/src/lib/moderation/useModerationCauseDescription.ts index 9dce0b5656..9e34700778 100644 --- a/src/lib/moderation/useModerationCauseDescription.ts +++ b/src/lib/moderation/useModerationCauseDescription.ts @@ -7,6 +7,7 @@ import { import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {sanitizeHandle} from '#/lib/strings/handles' import {useLabelDefinitions} from '#/state/preferences' import {useSession} from '#/state/session' import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign' @@ -23,6 +24,7 @@ export interface ModerationCauseDescription { name: string description: string source?: string + sourceDisplayName?: string sourceType?: ModerationCauseSource['type'] sourceAvi?: string sourceDid?: string @@ -130,14 +132,16 @@ export function useModerationCauseDescription( const def = cause.labelDef || getDefinition(labelDefs, cause.label) const strings = getLabelStrings(i18n.locale, globalLabelStrings, def) const labeler = labelers.find(l => l.creator.did === cause.label.src) - let source = - labeler?.creator.displayName || - (labeler?.creator.handle ? '@' + labeler?.creator.handle : undefined) + let source = labeler + ? sanitizeHandle(labeler.creator.handle, '@') + : undefined + let sourceDisplayName = labeler?.creator.displayName if (!source) { if (cause.label.src === BSKY_LABELER_DID) { - source = 'Bluesky Moderation Service' + source = 'moderation.bsky.app' + sourceDisplayName = 'Bluesky Moderation Service' } else { - source = cause.label.src + source = _(msg`an unknown labeler`) } } if (def.identifier === 'porn' || def.identifier === 'sexual') { @@ -154,6 +158,7 @@ export function useModerationCauseDescription( name: strings.name, description: strings.description, source, + sourceDisplayName, sourceType: cause.source.type, sourceAvi: labeler?.creator.avatar, sourceDid: cause.label.src,