patch of feat: mutuals pill/button from catsky.social · round #2 · pull #4 · jollywhoppers.com/witchsky.app

+27

src/components/Pills.tsx

···

       177
       177
        
           </View>

     

       178
       178
        
         )

     

       179
       179
        
       }

     

       180
       180
       +
       

     

       181
       181
       +
       export function Mutuals({size = 'sm'}: CommonProps) {

     

       182
       182
       +
         const t = useTheme()

     

       183
       183
       +
       

     

       184
       184
       +
         const variantStyles = React.useMemo(() => {

     

       185
       185
       +
           switch (size) {

     

       186
       186
       +
             case 'sm':

     

       187
       187
       +
             case 'lg':

     

       188
       188
       +
             default:

     

       189
       189
       +
               return [

     

       190
       190
       +
                 {

     

       191
       191
       +
                   paddingHorizontal: 6,

     

       192
       192
       +
                   paddingVertical: 3,

     

       193
       193
       +
                   borderRadius: 4,

     

       194
       194
       +
                 },

     

       195
       195
       +
               ]

     

       196
       196
       +
           }

     

       197
       197
       +
         }, [size])

     

       198
       198
       +
       

     

       199
       199
       +
         return (

     

       200
       200
       +
           <View style={[variantStyles, a.justify_center, t.atoms.bg_contrast_25]}>

     

       201
       201
       +
             <Text style={[a.text_xs, a.leading_tight]}>

     

       202
       202
       +
               <Trans>Mutuals</Trans>

     

       203
       203
       +
             </Text>

     

       204
       204
       +
           </View>

     

       205
       205
       +
         )

     

       206
       206
       +
       }

+2 -1

src/components/ProfileCard.tsx

···

       596
       596
        
         const moderation = moderateProfile(profile, moderationOpts)

     

       597
       597
        
         const modui = moderation.ui('profileList')

     

       598
       598
        
         const followedBy = profile.viewer?.followedBy

     

       599
       599
       +
         const following = profile.viewer?.following

     

       599
       600
        
       

     

       600
       601
        
         if (!followedBy && !modui.inform && !modui.alert) {

     

       601
       602
        
           return null

     
···

       603
       604
        
       

     

       604
       605
        
         return (

     

       605
       606
        
           <Pills.Row style={[a.pt_xs]}>

     

       606
       606
       -
             {followedBy && <Pills.FollowsYou />}

     

       607
       607
       +
             {followedBy && (following ? <Pills.Mutuals /> : <Pills.FollowsYou />)}

     

       607
       608
        
             {modui.alerts.map(alert => (

     

       608
       609
        
               <Pills.Label key={getModerationCauseKey(alert)} cause={alert} />

     

       609
       610
        
             ))}

+3 -1

src/screens/Profile/Header/Handle.tsx

···

       39
       39
        
             {profile.viewer?.followedBy && !blockHide ? (

     

       40
       40
        
               <View style={[t.atoms.bg_contrast_25, a.rounded_xs, a.px_sm, a.py_xs]}>

     

       41
       41
        
                 <Text style={[t.atoms.text, a.text_sm]}>

     

       42
       42
       -
                   <Trans>Follows you</Trans>

     

       42
       42
       +
                   <Trans>

     

       43
       43
       +
                     {profile.viewer?.following ? 'Mutuals' : 'Follows you'}

     

       44
       44
       +
                   </Trans>

     

       43
       45
        
                 </Text>

     

       44
       46
        
               </View>

     

       45
       47
        
             ) : undefined}