Post UI updates (Profile Preview on mobile) (#990)

* Update postmeta to put the timestamp on the right side on mobile

* Drop the two-line PostMeta mode

* Add ProfilePreview modal

* Tune PostMeta to give the best behavior possible for a given platform

* Remove old showFollowBtn attributes

* Fix style issue

* Switch the follow button in the profile header to use the inverted color for consistency with the rest of the app

* Fix lint

* Fix darkmode

* Tune the profile preview footer

* Better analytics choice

1 files changed, 46 insertions, 8 deletions

diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index b94cf54e9..135615a3b 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 {StyleSheet, View} from 'react-native'
+import {Pressable, 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,13 +12,31 @@ 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'
 
 type Type = 'user' | 'algo' | 'list'
 
+interface BaseUserAvatarProps {
+  type?: Type
+  size: number
+  avatar?: string | null
+  moderation?: AvatarModeration
+}
+
+interface UserAvatarProps extends BaseUserAvatarProps {
+  onSelectNewAvatar?: (img: RNImage | null) => void
+}
+
+interface PreviewableUserAvatarProps extends BaseUserAvatarProps {
+  did: string
+  handle: string
+}
+
 const BLUR_AMOUNT = isWeb ? 5 : 100
 
 function DefaultAvatar({type, size}: {type: Type; size: number}) {
@@ -91,13 +109,7 @@ export function UserAvatar({
   avatar,
   moderation,
   onSelectNewAvatar,
-}: {
-  type?: Type
-  size: number
-  avatar?: string | null
-  moderation?: AvatarModeration
-  onSelectNewAvatar?: (img: RNImage | null) => void
-}) {
+}: UserAvatarProps) {
   const store = useStores()
   const pal = usePalette('default')
   const {requestCameraAccessIfNeeded} = useCameraPermission()
@@ -244,6 +256,32 @@ 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="">
+      <UserAvatar {...props} />
+    </Pressable>
+  )
+}
+
 const styles = StyleSheet.create({
   editButtonContainer: {
     position: 'absolute',