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

+27

src/components/Pills.tsx

···

       180
       180
        
           </View>

     

       181
       181
        
         )

     

       182
       182
        
       }

     

       183
       183
       +
       

     

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

     

       185
       185
       +
         const t = useTheme()

     

       186
       186
       +
       

     

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

     

       188
       188
       +
           switch (size) {

     

       189
       189
       +
             case 'sm':

     

       190
       190
       +
             case 'lg':

     

       191
       191
       +
             default:

     

       192
       192
       +
               return [

     

       193
       193
       +
                 {

     

       194
       194
       +
                   paddingHorizontal: 6,

     

       195
       195
       +
                   paddingVertical: 3,

     

       196
       196
       +
                   borderRadius: 4,

     

       197
       197
       +
                 },

     

       198
       198
       +
               ]

     

       199
       199
       +
           }

     

       200
       200
       +
         }, [size])

     

       201
       201
       +
       

     

       202
       202
       +
         return (

     

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

     

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

     

       205
       205
       +
               <Trans>Mutuals</Trans>

     

       206
       206
       +
             </Text>

     

       207
       207
       +
           </View>

     

       208
       208
       +
         )

     

       209
       209
       +
       }

+2 -1

src/components/ProfileCard.tsx

···

       625
       625
        
         const moderation = moderateProfile(profile, moderationOpts)

     

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

     

       627
       627
        
         const followedBy = profile.viewer?.followedBy

     

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

     

       628
       629
        
       

     

       629
       630
        
         if (!followedBy && !modui.inform && !modui.alert) {

     

       630
       631
        
           return null

     
···

       632
       633
        
       

     

       633
       634
        
         return (

     

       634
       635
        
           <Pills.Row style={[a.pt_xs]}>

     

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

     

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

     

       636
       637
        
             {modui.alerts.map(alert => (

     

       637
       638
        
               <Pills.Label key={getModerationCauseKey(alert)} cause={alert} />

     

       638
       639
        
             ))}

+3 -1

src/screens/Profile/Header/Handle.tsx

···

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

     

       40
       40
        
               <View style={[t.atoms.bg_contrast_50, 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}