Bluesky app fork with some witchin' additions 💫

add profile hover card to notif items (#8666)

authored by samuel.fm and committed by

GitHub 0a2b1fcf cb54082e

+41 -30
+6
src/alf/atoms.ts
··· 979 979 hidden: { 980 980 display: 'none', 981 981 }, 982 + inline: web({ 983 + display: 'inline', 984 + }), 985 + block: web({ 986 + display: 'block', 987 + }), 982 988 983 989 /* 984 990 * Transition
+1 -1
src/components/ProfileHoverCard/index.tsx
··· 1 - import {ProfileHoverCardProps} from './types' 1 + import {type ProfileHoverCardProps} from './types' 2 2 3 3 export function ProfileHoverCard({children}: ProfileHoverCardProps) { 4 4 return children
+4 -2
src/components/ProfileHoverCard/index.web.tsx
··· 74 74 return props.children 75 75 } else { 76 76 return ( 77 - <View onPointerMove={onPointerMove} style={[a.flex_shrink, props.style]}> 77 + <View 78 + onPointerMove={onPointerMove} 79 + style={[a.flex_shrink, props.inline && a.inline, props.style]}> 78 80 <ProfileHoverCardInner {...props} /> 79 81 </View> 80 82 ) ··· 326 328 onPointerLeave={onPointerLeaveTarget} 327 329 // @ts-ignore web only prop 328 330 onMouseUp={onPress} 329 - style={{flexShrink: 1}}> 331 + style={[a.flex_shrink, props.inline && a.inline]}> 330 332 {props.children} 331 333 {isVisible && ( 332 334 <Portal>
+1
src/components/ProfileHoverCard/types.ts
··· 6 6 children: React.ReactNode 7 7 did: string 8 8 disable?: boolean 9 + inline?: boolean 9 10 }
+29 -27
src/view/com/notifications/NotificationFeedItem.tsx
··· 209 209 } 210 210 211 211 const firstAuthorLink = ( 212 - <InlineLinkText 213 - key={firstAuthor.href} 214 - style={[t.atoms.text, a.font_bold, a.text_md, a.leading_tight]} 215 - to={firstAuthor.href} 216 - disableMismatchWarning 217 - emoji 218 - label={_(msg`Go to ${firstAuthorName}'s profile`)}> 219 - {forceLTR(firstAuthorName)} 220 - {firstAuthorVerification.showBadge && ( 221 - <View 222 - style={[ 223 - a.relative, 224 - { 225 - paddingTop: platform({android: 2}), 226 - marginBottom: platform({ios: -7}), 227 - top: platform({web: 1}), 228 - paddingLeft: 3, 229 - paddingRight: 2, 230 - }, 231 - ]}> 232 - <VerificationCheck 233 - width={14} 234 - verifier={firstAuthorVerification.role === 'verifier'} 235 - /> 236 - </View> 237 - )} 238 - </InlineLinkText> 212 + <ProfileHoverCard did={firstAuthor.profile.did} inline> 213 + <InlineLinkText 214 + key={firstAuthor.href} 215 + style={[t.atoms.text, a.font_bold, a.text_md, a.leading_tight]} 216 + to={firstAuthor.href} 217 + disableMismatchWarning 218 + emoji 219 + label={_(msg`Go to ${firstAuthorName}'s profile`)}> 220 + {forceLTR(firstAuthorName)} 221 + {firstAuthorVerification.showBadge && ( 222 + <View 223 + style={[ 224 + a.relative, 225 + { 226 + paddingTop: platform({android: 2}), 227 + marginBottom: platform({ios: -7}), 228 + top: platform({web: 1}), 229 + paddingLeft: 3, 230 + paddingRight: 2, 231 + }, 232 + ]}> 233 + <VerificationCheck 234 + width={14} 235 + verifier={firstAuthorVerification.role === 'verifier'} 236 + /> 237 + </View> 238 + )} 239 + </InlineLinkText> 240 + </ProfileHoverCard> 239 241 ) 240 242 const additionalAuthorsCount = authors.length - 1 241 243 const hasMultipleAuthors = additionalAuthorsCount > 0