Call out account-level labels in the labels-on-me dialog

The additional labels pill can surface both post and account labels,
so the content-type dialog now uses post-oriented copy and flags
account-level labels with a per-label admonition. Include the label
uri in the list key so an account and post label sharing val and src
do not collide. Reword the equivalent ModerationDetailsDialog
admonition from "moderation" to "label".

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Eric Bailey
2026-07-09 20:22:10 -05:00
parent 6fb153c034
commit c06ebf850f
2 changed files with 26 additions and 5 deletions
+24 -3
View File
@@ -11,6 +11,7 @@ import {makeProfileLink} from '#/lib/routes/links'
import {sanitizeHandle} from '#/lib/strings/handles' import {sanitizeHandle} from '#/lib/strings/handles'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {Button, ButtonText} from '#/components/Button' import {Button, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog' import * as Dialog from '#/components/Dialog'
import {InlineLinkText} from '#/components/Link' import {InlineLinkText} from '#/components/Link'
@@ -23,6 +24,11 @@ export {useDialogControl as useLabelsOnMeDialogControl} from '#/components/Dialo
export interface LabelsOnMeDialogProps { export interface LabelsOnMeDialogProps {
control: Dialog.DialogOuterProps['control'] control: Dialog.DialogOuterProps['control']
labels: ComAtprotoLabelDefs.Label[] labels: ComAtprotoLabelDefs.Label[]
/**
* Whether the labels are being shown on the user's account or on a post.
* With `content`, the list may include account-level labels, which get a
* per-label callout.
*/
type: 'account' | 'content' type: 'account' | 'content'
} }
@@ -55,7 +61,7 @@ function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
label={ label={
isAccount isAccount
? _(msg`The following labels were applied to your account.`) ? _(msg`The following labels were applied to your account.`)
: _(msg`The following labels were applied to your content.`) : _(msg`The following labels were applied to this post.`)
}> }>
{appealingLabel ? ( {appealingLabel ? (
<AppealForm <AppealForm
@@ -69,7 +75,7 @@ function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
{isAccount ? ( {isAccount ? (
<Trans>Labels on your account</Trans> <Trans>Labels on your account</Trans>
) : ( ) : (
<Trans>Labels on your content</Trans> <Trans>Labels applied to this post</Trans>
)} )}
</Text> </Text>
<Text style={[a.text_md, a.leading_snug]}> <Text style={[a.text_md, a.leading_snug]}>
@@ -89,9 +95,10 @@ function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
<View style={[a.py_lg, a.gap_md]}> <View style={[a.py_lg, a.gap_md]}>
{labels.map(label => ( {labels.map(label => (
<Label <Label
key={`${label.val}-${label.src}`} key={`${label.val}-${label.src}-${label.uri}`}
label={label} label={label}
isSelfLabel={label.src === currentAccount?.did} isSelfLabel={label.src === currentAccount?.did}
showAccountCallout={!isAccount && label.uri.startsWith('did:')}
control={props.control} control={props.control}
onPressAppeal={setAppealingLabel} onPressAppeal={setAppealingLabel}
/> />
@@ -107,11 +114,17 @@ function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
function Label({ function Label({
label, label,
isSelfLabel, isSelfLabel,
showAccountCallout,
control, control,
onPressAppeal, onPressAppeal,
}: { }: {
label: ComAtprotoLabelDefs.Label label: ComAtprotoLabelDefs.Label
isSelfLabel: boolean isSelfLabel: boolean
/**
* Call out that the label applies to the whole account, for contexts that
* mix account and content labels.
*/
showAccountCallout?: boolean
control: Dialog.DialogOuterProps['control'] control: Dialog.DialogOuterProps['control']
onPressAppeal: (label: ComAtprotoLabelDefs.Label) => void onPressAppeal: (label: ComAtprotoLabelDefs.Label) => void
}) { }) {
@@ -138,6 +151,14 @@ function Label({
<Text emoji style={[t.atoms.text_contrast_medium, a.leading_snug]}> <Text emoji style={[t.atoms.text_contrast_medium, a.leading_snug]}>
{strings.description} {strings.description}
</Text> </Text>
{showAccountCallout && (
<Admonition type="info" style={[a.mt_xs]}>
<Trans>
This label was applied to the entire user account and will
appear on all posts.
</Trans>
</Admonition>
)}
</View> </View>
{!isSelfLabel && ( {!isSelfLabel && (
<View> <View>
@@ -191,8 +191,8 @@ function ModerationDetailsDialogInner({
{desc.isSubjectAccount && ( {desc.isSubjectAccount && (
<Admonition type="info" style={[a.mt_md]}> <Admonition type="info" style={[a.mt_md]}>
<Trans> <Trans>
This moderation was applied to the entire user account and will This label was applied to the entire user account and will appear
appear on all posts. on all posts.
</Trans> </Trans>
</Admonition> </Admonition>
)} )}