Fixes and improvements to the Profile Preview modal (#992)

* Fix: use more reliable navigation method

* Fix: show lightbox over the active modal

* Fix: close the profile preview on navigation

* Factor out UserPreviewLink and add preview behavior to notifications

* Fix postmeta overflow on web

* Fix lint

1 files changed, 4 insertions, 23 deletions

diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 135615a3b..eb6405f10 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -1,5 +1,5 @@
 import React, {useMemo} from 'react'
-import {Pressable, StyleSheet, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import Svg, {Circle, Rect, Path} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
@@ -12,12 +12,11 @@ import {
 import {useStores} from 'state/index'
 import {colors} from 'lib/styles'
 import {DropdownButton} from './forms/DropdownButton'
-import {Link} from './Link'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isWeb, isAndroid} from 'platform/detection'
 import {Image as RNImage} from 'react-native-image-crop-picker'
 import {AvatarModeration} from 'lib/labeling/types'
-import {isDesktopWeb} from 'platform/detection'
+import {UserPreviewLink} from './UserPreviewLink'
 
 type Type = 'user' | 'algo' | 'list'
 
@@ -257,28 +256,10 @@ export function UserAvatar({
 }
 
 export function PreviewableUserAvatar(props: PreviewableUserAvatarProps) {
-  const store = useStores()
-
-  if (isDesktopWeb) {
-    return (
-      <Link href={`/profile/${props.handle}`} title={props.handle} asAnchor>
-        <UserAvatar {...props} />
-      </Link>
-    )
-  }
   return (
-    <Pressable
-      onPress={() =>
-        store.shell.openModal({
-          name: 'profile-preview',
-          did: props.did,
-        })
-      }
-      accessibilityRole="button"
-      accessibilityLabel={props.handle}
-      accessibilityHint="">
+    <UserPreviewLink did={props.did} handle={props.handle}>
       <UserAvatar {...props} />
-    </Pressable>
+    </UserPreviewLink>
   )
 }