From 98f47b634c6178267d09b01e5218e3d62886221b Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 9 Jul 2026 14:09:30 -0500
Subject: [PATCH] Merge pill components

---
 src/components/Pills.tsx | 159 ++++++++++++++-------------------------
 1 file changed, 55 insertions(+), 104 deletions(-)

diff --git a/src/components/Pills.tsx b/src/components/Pills.tsx
index d59aba1955..21de2eecaa 100644
--- a/src/components/Pills.tsx
+++ b/src/components/Pills.tsx
@@ -66,83 +66,24 @@ export function Label({
   const isLabeler = Boolean(desc.sourceType && desc.sourceDid)
   const isBlueskyLabel =
     desc.sourceType === 'labeler' && desc.sourceDid === BSKY_LABELER_DID
-
-  const {outer, avi, text} = useMemo(() => {
-    switch (size) {
-      case 'lg': {
-        return {
-          outer: [
-            t.atoms.bg_contrast_25,
-            {
-              gap: 5,
-              paddingHorizontal: 5,
-              paddingVertical: 5,
-            },
-          ],
-          avi: 16,
-          text: [a.text_sm],
-        }
-      }
-      case 'sm':
-      default: {
-        return {
-          outer: [
-            !noBg && t.atoms.bg_contrast_25,
-            {
-              gap: 3,
-              paddingHorizontal: 3,
-              paddingVertical: 3,
-            },
-          ],
-          avi: 12,
-          text: [a.text_xs],
-        }
-      }
-    }
-  }, [t, size, noBg])
+  const avi = size === 'lg' ? 16 : 12
 
   return (
     <>
-      <Button
-        disabled={disableDetailsDialog}
+      <LabelBase
         label={desc.name}
-        onPress={e => {
-          e.preventDefault()
-          e.stopPropagation()
-          control.open()
-        }}>
-        {({hovered, pressed}) => (
-          <View
-            style={[
-              a.flex_row,
-              a.align_center,
-              a.rounded_full,
-              outer,
-              (hovered || pressed) && t.atoms.bg_contrast_50,
-            ]}>
-            {isBlueskyLabel || !isLabeler ? (
-              <desc.icon
-                width={avi}
-                fill={t.atoms.text_contrast_medium.color}
-              />
-            ) : (
-              <UserAvatar avatar={desc.sourceAvi} type="user" size={avi} />
-            )}
-
-            <Text
-              emoji
-              style={[
-                text,
-                a.font_semi_bold,
-                a.leading_tight,
-                t.atoms.text_contrast_medium,
-                {paddingRight: 3},
-              ]}>
-              {desc.name}
-            </Text>
-          </View>
-        )}
-      </Button>
+        size={size}
+        noBg={noBg}
+        disabled={disableDetailsDialog}
+        onPress={() => control.open()}
+        icon={
+          isBlueskyLabel || !isLabeler ? (
+            <desc.icon width={avi} fill={t.atoms.text_contrast_medium.color} />
+          ) : (
+            <UserAvatar avatar={desc.sourceAvi} type="user" size={avi} />
+          )
+        }
+      />
 
       {!disableDetailsDialog && (
         <ModerationDetailsDialog control={control} modcause={cause} />
@@ -154,10 +95,19 @@ export function Label({
 export type LabelBaseProps = {
   label: string
   onPress: () => void
+  disabled?: boolean
   noBg?: boolean
+  icon?: React.ReactNode
 } & CommonProps
 
-export function LabelBase({label, onPress, size = 'sm', noBg}: LabelBaseProps) {
+export function LabelBase({
+  label,
+  onPress,
+  disabled,
+  size = 'sm',
+  noBg,
+  icon,
+}: LabelBaseProps) {
   const t = useTheme()
 
   const {outer, text} = useMemo(() => {
@@ -193,38 +143,39 @@ export function LabelBase({label, onPress, size = 'sm', noBg}: LabelBaseProps) {
   }, [t, size, noBg])
 
   return (
-    <>
-      <Button
-        label={label}
-        onPress={e => {
-          e.preventDefault()
-          e.stopPropagation()
-          onPress()
-        }}>
-        {({hovered, pressed}) => (
-          <View
+    <Button
+      disabled={disabled}
+      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,
+          ]}>
+          {icon}
+
+          <Text
+            emoji
             style={[
-              a.flex_row,
-              a.align_center,
-              a.rounded_full,
-              outer,
-              (hovered || pressed) && t.atoms.bg_contrast_50,
+              text,
+              a.font_semi_bold,
+              a.leading_tight,
+              t.atoms.text_contrast_medium,
+              {paddingRight: 3},
             ]}>
-            <Text
-              emoji
-              style={[
-                text,
-                a.font_semi_bold,
-                a.leading_tight,
-                t.atoms.text_contrast_medium,
-                {paddingRight: 3},
-              ]}>
-              {label}
-            </Text>
-          </View>
-        )}
-      </Button>
-    </>
+            {label}
+          </Text>
+        </View>
+      )}
+    </Button>
   )
 }