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

3 files changed, 49 insertions, 25 deletions

diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 396b0278d..7f8abebd7 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -7,7 +7,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {UserAvatar} from './UserAvatar'
 import {observer} from 'mobx-react-lite'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {isAndroid, isIOS} from 'platform/detection'
+import {isAndroid} from 'platform/detection'
 
 interface PostMetaOpts {
   authorAvatar?: string
@@ -88,6 +88,6 @@ const styles = StyleSheet.create({
   },
   maxWidth: {
     flex: isAndroid ? 1 : undefined,
-    maxWidth: isIOS ? '80%' : undefined,
+    maxWidth: !isAndroid ? '80%' : undefined,
   },
 })
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>
   )
 }
 
diff --git a/src/view/com/util/UserPreviewLink.tsx b/src/view/com/util/UserPreviewLink.tsx
new file mode 100644
index 000000000..ae49301fd
--- /dev/null
+++ b/src/view/com/util/UserPreviewLink.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import {Pressable, StyleProp, ViewStyle} from 'react-native'
+import {useStores} from 'state/index'
+import {Link} from './Link'
+import {isDesktopWeb} from 'platform/detection'
+
+interface UserPreviewLinkProps {
+  did: string
+  handle: string
+  style?: StyleProp<ViewStyle>
+}
+export function UserPreviewLink(
+  props: React.PropsWithChildren<UserPreviewLinkProps>,
+) {
+  const store = useStores()
+
+  if (isDesktopWeb) {
+    return (
+      <Link
+        href={`/profile/${props.handle}`}
+        title={props.handle}
+        asAnchor
+        style={props.style}>
+        {props.children}
+      </Link>
+    )
+  }
+  return (
+    <Pressable
+      onPress={() =>
+        store.shell.openModal({
+          name: 'profile-preview',
+          did: props.did,
+        })
+      }
+      accessibilityRole="button"
+      accessibilityLabel={props.handle}
+      accessibilityHint=""
+      style={props.style}>
+      {props.children}
+    </Pressable>
+  )
+}