POC: +n labels

src/components/Pills.tsx

@@ -151,6 +151,83 @@ export function Label({
   )
 }
 
+export type LabelBaseProps = {
+  label: string
+  onPress: () => void
+  noBg?: boolean
+} & CommonProps
+
+export function LabelBase({label, onPress, size = 'sm', noBg}: LabelBaseProps) {
+  const t = useTheme()
+
+  const {outer, text} = useMemo(() => {
+    switch (size) {
+      case 'lg': {
+        return {
+          outer: [
+            t.atoms.bg_contrast_25,
+            {
+              gap: 5,
+              paddingHorizontal: 5,
+              paddingVertical: 5,
+            },
+          ],
+          text: [a.text_sm],
+        }
+      }
+      case 'sm':
+      default: {
+        return {
+          outer: [
+            !noBg && t.atoms.bg_contrast_25,
+            {
+              gap: 3,
+              paddingHorizontal: 3,
+              paddingVertical: 3,
+            },
+          ],
+          text: [a.text_xs],
+        }
+      }
+    }
+  }, [t, size, noBg])
+
+  return (
+    <>
+      <Button
+        label={label}
+        onPress={e => {
+          e.preventDefault()
+          e.stopPropagation()
+          onPress()
+        }}>
+        {({hovered, pressed}) => (
+          <View
+            style={[
+              a.flex_row,
+              a.align_center,
+              a.rounded_full,
+              outer,
+              (hovered || pressed) && t.atoms.bg_contrast_50,
+            ]}>
+            <Text
+              emoji
+              style={[
+                text,
+                a.font_semi_bold,
+                a.leading_tight,
+                t.atoms.text_contrast_medium,
+                {paddingRight: 3},
+              ]}>
+              {label}
+            </Text>
+          </View>
+        )}
+      </Button>
+    </>
+  )
+}
+
 export function FollowsYou({size = 'sm'}: CommonProps) {
   const t = useTheme()
 

src/components/moderation/PostAlerts.tsx

@@ -1,15 +1,30 @@
-import {type StyleProp, type ViewStyle} from 'react-native'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
-import {type ModerationCause, type ModerationUI} from '@atproto/api'
+import {
+  type AppBskyFeedDefs,
+  type ComAtprotoLabelDefs,
+  type ModerationCause,
+  type ModerationUI,
+} from '@atproto/api'
+import {plural} from '@lingui/core/macro'
+import {useLingui} from '@lingui/react/macro'
 
 import {getModerationCauseKey, unique} from '#/lib/moderation'
+import {useSession} from '#/state/session'
+import {atoms as a} from '#/alf'
+import {
+  LabelsOnMeDialog,
+  useLabelsOnMeDialogControl,
+} from '#/components/moderation/LabelsOnMeDialog'
 import * as Pills from '#/components/Pills'
 
 export function PostAlerts({
+  post,
   modui,
   size = 'sm',
   style,
   additionalCauses,
 }: {
+  post?: AppBskyFeedDefs.PostView
   modui: ModerationUI
   size?: Pills.CommonProps['size']
   includeMute?: boolean
@@ -46,6 +61,48 @@ export function PostAlerts({
           noBg={size === 'sm'}
         />
       ))}
+      {post?.labels?.length ? (
+        <AdditionalLabels labels={post.labels} size={size} />
+      ) : null}
     </Pills.Row>
   )
 }
+
+function AdditionalLabels({
+  labels,
+  size,
+}: {
+  labels: ComAtprotoLabelDefs.Label[] | undefined
+  size?: Pills.CommonProps['size']
+}) {
+  const {t: l} = useLingui()
+  const {currentAccount} = useSession()
+  const control = useLabelsOnMeDialogControl()
+
+  if (!labels || !currentAccount) {
+    return null
+  }
+  labels = labels.filter(
+    l =>
+      !l.val.startsWith('!') &&
+      !(l.val === 'bot' && l.src === currentAccount.did),
+  )
+  if (!labels.length) {
+    return null
+  }
+
+  return (
+    <View style={[a.flex_row]}>
+      <LabelsOnMeDialog control={control} labels={labels} type="content" />
+
+      <Pills.LabelBase
+        label={l`+${plural(labels.length, {one: '# label', other: '# labels'})}`}
+        size={size}
+        noBg={size === 'sm'}
+        onPress={() => {
+          control.open()
+        }}
+      />
+    </View>
+  )
+}

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -388,6 +388,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
               ignoreMute
               childContainerStyle={[a.pt_sm]}>
               <PostAlerts
+                post={post}
                 modui={moderation.ui('contentView')}
                 size="lg"
                 includeMute