add profile hover card to notif items (#8666)

src/alf/atoms.ts

@@ -979,6 +979,12 @@ export const atoms = {
   hidden: {
     display: 'none',
   },
+  inline: web({
+    display: 'inline',
+  }),
+  block: web({
+    display: 'block',
+  }),
 
   /*
    * Transition

src/components/ProfileHoverCard/index.tsx

@@ -1,4 +1,4 @@
-import {ProfileHoverCardProps} from './types'
+import {type ProfileHoverCardProps} from './types'
 
 export function ProfileHoverCard({children}: ProfileHoverCardProps) {
   return children

src/components/ProfileHoverCard/index.web.tsx

@@ -74,7 +74,9 @@ export function ProfileHoverCard(props: ProfileHoverCardProps) {
     return props.children
   } else {
     return (
-      <View onPointerMove={onPointerMove} style={[a.flex_shrink, props.style]}>
+      <View
+        onPointerMove={onPointerMove}
+        style={[a.flex_shrink, props.inline && a.inline, props.style]}>
         <ProfileHoverCardInner {...props} />
       </View>
     )
@@ -326,7 +328,7 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
       onPointerLeave={onPointerLeaveTarget}
       // @ts-ignore web only prop
       onMouseUp={onPress}
-      style={{flexShrink: 1}}>
+      style={[a.flex_shrink, props.inline && a.inline]}>
       {props.children}
       {isVisible && (
         <Portal>

src/components/ProfileHoverCard/types.ts

@@ -6,4 +6,5 @@ export type ProfileHoverCardProps = ViewStyleProp & {
   children: React.ReactNode
   did: string
   disable?: boolean
+  inline?: boolean
 }

src/view/com/notifications/NotificationFeedItem.tsx

@@ -209,33 +209,35 @@ let NotificationFeedItem = ({
   }
 
   const firstAuthorLink = (
-    <InlineLinkText
+    <ProfileHoverCard did={firstAuthor.profile.did} inline>
-      key={firstAuthor.href}
+      <InlineLinkText
-      style={[t.atoms.text, a.font_bold, a.text_md, a.leading_tight]}
+        key={firstAuthor.href}
-      to={firstAuthor.href}
+        style={[t.atoms.text, a.font_bold, a.text_md, a.leading_tight]}
-      disableMismatchWarning
+        to={firstAuthor.href}
-      emoji
+        disableMismatchWarning
-      label={_(msg`Go to ${firstAuthorName}'s profile`)}>
+        emoji
-      {forceLTR(firstAuthorName)}
+        label={_(msg`Go to ${firstAuthorName}'s profile`)}>
-      {firstAuthorVerification.showBadge && (
+        {forceLTR(firstAuthorName)}
-        <View
+        {firstAuthorVerification.showBadge && (
-          style={[
+          <View
-            a.relative,
+            style={[
-            {
+              a.relative,
-              paddingTop: platform({android: 2}),
+              {
-              marginBottom: platform({ios: -7}),
+                paddingTop: platform({android: 2}),
-              top: platform({web: 1}),
+                marginBottom: platform({ios: -7}),
-              paddingLeft: 3,
+                top: platform({web: 1}),
-              paddingRight: 2,
+                paddingLeft: 3,
-            },
+                paddingRight: 2,
-          ]}>
+              },
-          <VerificationCheck
+            ]}>
-            width={14}
+            <VerificationCheck
-            verifier={firstAuthorVerification.role === 'verifier'}
+              width={14}
-          />
+              verifier={firstAuthorVerification.role === 'verifier'}
-        </View>
+            />
-      )}
+          </View>
-    </InlineLinkText>
+        )}
+      </InlineLinkText>
+    </ProfileHoverCard>
   )
   const additionalAuthorsCount = authors.length - 1
   const hasMultipleAuthors = additionalAuthorsCount > 0