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

closed
opened by vielle.dev targeting main
Changed files
+32 -2
src
components
screens
Profile
Header
+27
src/components/Pills.tsx
··· 177 177 </View> 178 178 ) 179 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 596 const moderation = moderateProfile(profile, moderationOpts) 597 597 const modui = moderation.ui('profileList') 598 598 const followedBy = profile.viewer?.followedBy 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 - {followedBy && <Pills.FollowsYou />} 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 - <Trans>Follows you</Trans> 42 + <Trans> 43 + {profile.viewer?.following ? 'Mutuals' : 'Follows you'} 44 + </Trans> 43 45 </Text> 44 46 </View> 45 47 ) : undefined}