Hover card on anchor displayName/handle (#8479)

* add hover to anchor display name / handle

* use newer link component

* Wrap using a single hover element

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/components/RichText.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
-import {TextStyle} from 'react-native'
+import {type TextStyle} from 'react-native'
 import {AppBskyRichtextFacet, RichText as RichTextAPI} from '@atproto/api'
 
 import {toShortUrl} from '#/lib/strings/url-helpers'
-import {atoms as a, flatten, TextStyleProp} from '#/alf'
+import {atoms as a, flatten, type TextStyleProp} from '#/alf'
 import {isOnlyEmoji} from '#/alf/typography'
-import {InlineLinkText, LinkProps} from '#/components/Link'
+import {InlineLinkText, type LinkProps} from '#/components/Link'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {RichTextTag} from '#/components/RichTextTag'
-import {Text, TextProps} from '#/components/Typography'
+import {Text, type TextProps} from '#/components/Typography'
 
 const WORD_WRAP = {wordWrap: 1}
 
@@ -105,7 +105,7 @@ export function RichText({
       !disableLinks
     ) {
       els.push(
-        <ProfileHoverCard key={key} inline did={mention.did}>
+        <ProfileHoverCard key={key} did={mention.did}>
           <InlineLinkText
             selectable={selectable}
             to={`/profile/${mention.did}`}