Show "label has been placed..." even for self-labels (#3874)

* show labels placed on your content even if it's a self-label

even friendlier wording

friendlier wording

remove unnecessary `export`

temp revert reordering

show labels placed on your content even if it's a self-label

* Bump api 0.12.9

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

package.json

@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@atproto-labs/api": "^0.12.8-clipclops.0",
-    "@atproto/api": "^0.12.6",
+    "@atproto/api": "^0.12.9",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",

src/components/moderation/LabelsOnMe.tsx

@@ -32,9 +32,7 @@ export function LabelsOnMe({
   if (!labels || !currentAccount) {
     return null
   }
-  labels = labels.filter(
+  labels = labels.filter(l => !l.val.startsWith('!'))
-    l => !l.val.startsWith('!') && l.src !== currentAccount.did,
-  )
   if (!labels.length) {
     return null
   }

src/components/moderation/LabelsOnMeDialog.tsx

@@ -7,7 +7,7 @@ import {useLingui} from '@lingui/react'
 import {useLabelInfo} from '#/lib/moderation/useLabelInfo'
 import {makeProfileLink} from '#/lib/routes/links'
 import {sanitizeHandle} from '#/lib/strings/handles'
-import {useAgent} from '#/state/session'
+import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -33,13 +33,28 @@ export interface LabelsOnMeDialogProps {
   labels: ComAtprotoLabelDefs.Label[]
 }
 
-export function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
+export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
+  return (
+    <Dialog.Outer control={props.control}>
+      <Dialog.Handle />
+
+      <LabelsOnMeDialogInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
   const {_} = useLingui()
+  const {currentAccount} = useSession()
   const [appealingLabel, setAppealingLabel] = React.useState<
     ComAtprotoLabelDefs.Label | undefined
   >(undefined)
   const {subject, labels} = props
   const isAccount = 'did' in subject
+  const containsSelfLabel = React.useMemo(
+    () => labels.some(l => l.src === currentAccount?.did),
+    [currentAccount?.did, labels],
+  )
 
   return (
     <Dialog.ScrollableInner
@@ -65,9 +80,17 @@ export function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
             )}
           </Text>
           <Text style={[a.text_md, a.leading_snug]}>
+            {containsSelfLabel ? (
               <Trans>
-              You may appeal these labels if you feel they were placed in error.
+                You may appeal non-self labels if you feel they were placed in
+                error.
               </Trans>
+            ) : (
+              <Trans>
+                You may appeal these labels if you feel they were placed in
+                error.
+              </Trans>
+            )}
           </Text>
 
           <View style={[a.py_lg, a.gap_md]}>
@@ -75,6 +98,7 @@ export function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
               <Label
                 key={`${label.val}-${label.src}`}
                 label={label}
+                isSelfLabel={label.src === currentAccount?.did}
                 control={props.control}
                 onPressAppeal={label => setAppealingLabel(label)}
               />
@@ -88,22 +112,14 @@ export function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
   )
 }
 
-export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
-  return (
-    <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
-      <LabelsOnMeDialogInner {...props} />
-    </Dialog.Outer>
-  )
-}
-
 function Label({
   label,
+  isSelfLabel,
   control,
   onPressAppeal,
 }: {
   label: ComAtprotoLabelDefs.Label
+  isSelfLabel: boolean
   control: Dialog.DialogOuterProps['control']
   onPressAppeal: (label: ComAtprotoLabelDefs.Label) => void
 }) {
@@ -125,6 +141,7 @@ function Label({
             {strings.description}
           </Text>
         </View>
+        {!isSelfLabel && (
           <View>
             <Button
               variant="solid"
@@ -137,20 +154,29 @@ function Label({
               </ButtonText>
             </Button>
           </View>
+        )}
       </View>
 
       <Divider />
 
       <View style={[a.px_md, a.py_sm, t.atoms.bg_contrast_25]}>
         <Text style={[t.atoms.text_contrast_medium]}>
+          {isSelfLabel ? (
+            <Trans>This label was applied by you</Trans>
+          ) : (
+            <>
               <Trans>Source:</Trans>{' '}
               <InlineLinkText
                 to={makeProfileLink(
                   labeler ? labeler.creator : {did: label.src, handle: ''},
                 )}
                 onPress={() => control.close()}>
-            {labeler ? sanitizeHandle(labeler.creator.handle, '@') : label.src}
+                {labeler
+                  ? sanitizeHandle(labeler.creator.handle, '@')
+                  : label.src}
               </InlineLinkText>
+            </>
+          )}
         </Text>
       </View>
     </View>

yarn.lock

@@ -58,10 +58,10 @@
     multiformats "^9.9.0"
     tlds "^1.234.0"
 
-"@atproto/api@^0.12.6":
+"@atproto/api@^0.12.9":
-  version "0.12.6"
+  version "0.12.9"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.12.6.tgz#690c004c5ac7fc7bceac4605d8c1ec1f580be270"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.12.9.tgz#5ae040980e574a5d9496368c4ca032c0cda174ec"
-  integrity sha512-30htXN2Hjl1jzzeAtIhggOsVS4vA975pMUQYoA4xMonug+z6O9NHcka3yYb4C9ldpnGugvRPKH7EhAUbiDTC5w==
+  integrity sha512-3D4n2ZAAsDRnjevvcoIxQxuMMoqc+7vtVyP7EnrEdeOmRSCF9j8yXTqhn6rcHCbzcs3DKyYR26nQemtZsMsE0g==
   dependencies:
     "@atproto/common-web" "^0.3.0"
     "@atproto/lexicon" "^0.4.0"