Reduce hovercard false positives, add them to display names and handles (#3739)

* Don't trigger hovercards on scroll

* Add display name / handle hovercards

* Increase hovercard delay

src/components/ProfileHoverCard/index.web.tsx

@@ -72,10 +72,10 @@ type Action =
   | 'unhovered-long-enough'
   | 'finished-animating-hide'
 
-const SHOW_DELAY = 400
+const SHOW_DELAY = 500
 const SHOW_DURATION = 300
 const HIDE_DELAY = 150
-const HIDE_DURATION = 150
+const HIDE_DURATION = 200
 
 export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
   const {refs, floatingStyles} = useFloating({
@@ -244,12 +244,20 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
     }
   }, [prefetchProfileQuery, props.did])
 
-  const onPointerEnterTarget = React.useCallback(() => {
+  const didFireHover = React.useRef(false)
+  const onPointerMoveTarget = React.useCallback(() => {
     prefetchIfNeeded()
+    // Conceptually we want something like onPointerEnter,
+    // but we want to ignore entering only due to scrolling.
+    // So instead we hover on the first onPointerMove.
+    if (!didFireHover.current) {
+      didFireHover.current = true
       dispatch('hovered-target')
+    }
   }, [prefetchIfNeeded])
 
   const onPointerLeaveTarget = React.useCallback(() => {
+    didFireHover.current = false
     dispatch('unhovered-target')
   }, [])
 
@@ -280,7 +288,7 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
   return (
     <div
       ref={refs.setReference}
-      onPointerEnter={onPointerEnterTarget}
+      onPointerMove={onPointerMoveTarget}
       onPointerLeave={onPointerLeaveTarget}
       onMouseUp={onPress}
       style={{

src/view/com/util/PostMeta.tsx

@@ -11,6 +11,7 @@ import {sanitizeHandle} from 'lib/strings/handles'
 import {niceDate} from 'lib/strings/time'
 import {TypographyVariant} from 'lib/ThemeContext'
 import {isAndroid, isWeb} from 'platform/detection'
+import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {TextLinkOnWebOnly} from './Link'
 import {Text} from './text/Text'
 import {TimeElapsed} from './TimeElapsed'
@@ -58,6 +59,7 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
           />
         </View>
       )}
+      <ProfileHoverCard inline did={opts.author.did}>
         <Text
           numberOfLines={1}
           style={[styles.maxWidth, pal.textLight, opts.displayNameStyle]}>
@@ -89,6 +91,7 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
             anchorNoUnderline
           />
         </Text>
+      </ProfileHoverCard>
       {!isAndroid && (
         <Text
           type="md"