back round 1 view raw

feat: mutuals pill/button from catsky.social #4

closed

opened by

vielle.dev 2 weeks ago targeting main

copy pasted from https://github.com/NekoDrone/catsky-social/pull/73

full credit to isabel

options

unified split

Changed files

+32 -2

src

components

Pills.tsx

ProfileCard.tsx

screens

Profile

Header

Handle.tsx

+27

src/components/Pills.tsx

···

       177
        
           </View>

     

       178
        
         )

     

       179
        
       }

     

       180
       +
       

     

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

     

       182
       +
         const t = useTheme()

     

       183
       +
       

     

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

     

       185
       +
           switch (size) {

     

       186
       +
             case 'sm':

     

       187
       +
             case 'lg':

     

       188
       +
             default:

     

       189
       +
               return [

     

       190
       +
                 {

     

       191
       +
                   paddingHorizontal: 6,

     

       192
       +
                   paddingVertical: 3,

     

       193
       +
                   borderRadius: 4,

     

       194
       +
                 },

     

       195
       +
               ]

     

       196
       +
           }

     

       197
       +
         }, [size])

     

       198
       +
       

     

       199
       +
         return (

     

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

     

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

     

       202
       +
               <Trans>Mutuals</Trans>

     

       203
       +
             </Text>

     

       204
       +
           </View>

     

       205
       +
         )

     

       206
       +
       }

+2 -1

src/components/ProfileCard.tsx

···

       596
        
         const moderation = moderateProfile(profile, moderationOpts)

     

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

     

       598
        
         const followedBy = profile.viewer?.followedBy

     

       0
        
       
     

       599
        
       

     

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

     

       601
        
           return null

     
···

       603
        
       

     

       604
        
         return (

     

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

     

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

     

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

     

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

     

       609
        
             ))}

···

       596
        
         const moderation = moderateProfile(profile, moderationOpts)

     

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

     

       598
        
         const followedBy = profile.viewer?.followedBy

     

       599
       +
         const following = profile.viewer?.following

     

       600
        
       

     

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

     

       602
        
           return null

     
···

       604
        
       

     

       605
        
         return (

     

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

     

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

     

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

     

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

     

       610
        
             ))}

+3 -1

src/screens/Profile/Header/Handle.tsx

···

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

     

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

     

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

     

       32
       -
                   <Trans>Follows you</Trans>

     

       0
        
       
     

       0
        
       
     

       33
        
                 </Text>

     

       34
        
               </View>

     

       35
        
             ) : undefined}

···

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

     

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

     

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

     

       32
       +
                   <Trans>

     

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

     

       34
       +
                   </Trans>

     

       35
        
                 </Text>

     

       36
        
               </View>

     

       37
        
             ) : undefined}