Add profile image lightbox

src/view/com/lightbox/Lightbox.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {useStores} from '../../../state'
+
+import * as models from '../../../state/models/shell-ui'
+
+import * as ProfileImageLightbox from './ProfileImage'
+
+export const Lightbox = observer(function Lightbox() {
+  const store = useStores()
+
+  const onClose = () => {
+    store.shell.closeLightbox()
+  }
+
+  if (!store.shell.isLightboxActive) {
+    return <View />
+  }
+
+  let element
+  if (store.shell.activeLightbox?.name === 'profile-image') {
+    element = (
+      <ProfileImageLightbox.Component
+        {...(store.shell.activeLightbox as models.ProfileImageLightbox)}
+      />
+    )
+  } else {
+    return <View />
+  }
+
+  return (
+    <>
+      <TouchableOpacity style={styles.bg} onPress={onClose} />
+      <TouchableOpacity style={styles.xIcon} onPress={onClose}>
+        <FontAwesomeIcon icon="x" size={24} style={{color: '#fff'}} />
+      </TouchableOpacity>
+      {element}
+    </>
+  )
+})
+
+const styles = StyleSheet.create({
+  bg: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    backgroundColor: '#000',
+    opacity: 0.9,
+  },
+  xIcon: {
+    position: 'absolute',
+    top: 30,
+    right: 30,
+  },
+  container: {
+    position: 'absolute',
+  },
+})

src/view/com/lightbox/ProfileImage.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import {StyleSheet, useWindowDimensions, View} from 'react-native'
+import {UserAvatar} from '../util/UserAvatar'
+import {ProfileViewModel} from '../../../state/models/profile-view'
+
+export function Component({profileView}: {profileView: ProfileViewModel}) {
+  const winDim = useWindowDimensions()
+  const top = winDim.height / 2 - (winDim.width - 40) / 2 - 100
+  return (
+    <View style={[styles.container, {top}]}>
+      <UserAvatar
+        handle={profileView.handle}
+        displayName={profileView.displayName}
+        avatar={profileView.avatar}
+        size={winDim.width - 40}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 20,
+  },
+})

src/view/com/modals/Modal.tsx

@@ -43,14 +43,14 @@ export const Modal = observer(function Modal() {
     snapPoints = ConfirmModal.snapPoints
     element = (
       <ConfirmModal.Component
-        {...(store.shell.activeModal as models.ConfirmModel)}
+        {...(store.shell.activeModal as models.ConfirmModal)}
       />
     )
   } else if (store.shell.activeModal?.name === 'edit-profile') {
     snapPoints = EditProfileModal.snapPoints
     element = (
       <EditProfileModal.Component
-        {...(store.shell.activeModal as models.EditProfileModel)}
+        {...(store.shell.activeModal as models.EditProfileModal)}
       />
     )
   } else if (store.shell.activeModal?.name === 'create-scene') {
@@ -60,14 +60,14 @@ export const Modal = observer(function Modal() {
     snapPoints = InviteToSceneModal.snapPoints
     element = (
       <InviteToSceneModal.Component
-        {...(store.shell.activeModal as models.InviteToSceneModel)}
+        {...(store.shell.activeModal as models.InviteToSceneModal)}
       />
     )
   } else if (store.shell.activeModal?.name === 'server-input') {
     snapPoints = ServerInputModal.snapPoints
     element = (
       <ServerInputModal.Component
-        {...(store.shell.activeModal as models.ServerInputModel)}
+        {...(store.shell.activeModal as models.ServerInputModal)}
       />
     )
   } else {

src/view/com/notifications/InviteAccepter.tsx

@@ -4,7 +4,7 @@ import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import * as apilib from '../../../state/lib/api'
 import {NotificationsViewItemModel} from '../../../state/models/notifications-view'
-import {ConfirmModel} from '../../../state/models/shell-ui'
+import {ConfirmModal} from '../../../state/models/shell-ui'
 import {useStores} from '../../../state'
 import {ProfileCard} from '../profile/ProfileCard'
 import * as Toast from '../util/Toast'
@@ -17,7 +17,7 @@ export function InviteAccepter({item}: {item: NotificationsViewItemModel}) {
     confirmationUri !== '' || store.me.memberships?.isMemberOf(item.author.did)
   const onPressAccept = async () => {
     store.shell.openModal(
-      new ConfirmModel(
+      new ConfirmModal(
         'Join this scene?',
         () => (
           <View>

src/view/com/profile/ProfileHeader.tsx

@@ -7,9 +7,10 @@ import {AtUri} from '../../../third-party/uri'
 import {ProfileViewModel} from '../../../state/models/profile-view'
 import {useStores} from '../../../state'
 import {
-  ConfirmModel,
-  EditProfileModel,
-  InviteToSceneModel,
+  ConfirmModal,
+  EditProfileModal,
+  InviteToSceneModal,
+  ProfileImageLightbox,
 } from '../../../state/models/shell-ui'
 import {pluralize} from '../../../lib/strings'
 import {s, colors} from '../../lib/styles'
@@ -35,11 +36,8 @@ export const ProfileHeader = observer(function ProfileHeader({
     [view.myState.member],
   )
 
-  const onPressBack = () => {
-    store.nav.tab.goBack()
-  }
-  const onPressSearch = () => {
-    store.nav.navigate(`/search`)
+  const onPressAvi = () => {
+    store.shell.openLightbox(new ProfileImageLightbox(view))
   }
   const onPressToggleFollow = () => {
     view?.toggleFollowing().then(
@@ -54,7 +52,7 @@ export const ProfileHeader = observer(function ProfileHeader({
     )
   }
   const onPressEditProfile = () => {
-    store.shell.openModal(new EditProfileModel(view, onRefreshAll))
+    store.shell.openModal(new EditProfileModal(view, onRefreshAll))
   }
   const onPressFollowers = () => {
     store.nav.navigate(`/profile/${view.handle}/followers`)
@@ -66,11 +64,11 @@ export const ProfileHeader = observer(function ProfileHeader({
     store.nav.navigate(`/profile/${view.handle}/members`)
   }
   const onPressInviteMembers = () => {
-    store.shell.openModal(new InviteToSceneModel(view))
+    store.shell.openModal(new InviteToSceneModal(view))
   }
   const onPressLeaveScene = () => {
     store.shell.openModal(
-      new ConfirmModel(
+      new ConfirmModal(
         'Leave this scene?',
         `You'll be able to come back unless your invite is revoked.`,
         onPressConfirmLeaveScene,
@@ -153,14 +151,6 @@ export const ProfileHeader = observer(function ProfileHeader({
   return (
     <View style={styles.outer}>
       <UserBanner handle={view.handle} banner={view.banner} />
-      <View style={styles.avi}>
-        <UserAvatar
-          size={80}
-          handle={view.handle}
-          displayName={view.displayName}
-          avatar={view.avatar}
-        />
-      </View>
       <View style={styles.content}>
         <View style={[styles.buttonsLine]}>
           {isMe ? (
@@ -304,6 +294,14 @@ export const ProfileHeader = observer(function ProfileHeader({
           </TouchableOpacity>
         </View>
       ) : undefined}
+      <TouchableOpacity style={styles.avi} onPress={onPressAvi}>
+        <UserAvatar
+          size={80}
+          handle={view.handle}
+          displayName={view.displayName}
+          avatar={view.avatar}
+        />
+      </TouchableOpacity>
     </View>
   )
 })

src/view/com/util/DropdownBtn.tsx

@@ -15,7 +15,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {colors} from '../../lib/styles'
 import {toShareUrl} from '../../../lib/strings'
 import {useStores} from '../../../state'
-import {ConfirmModel} from '../../../state/models/shell-ui'
+import {ConfirmModal} from '../../../state/models/shell-ui'
 import {TABS_ENABLED} from '../../../build-flags'
 
 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
@@ -122,7 +122,7 @@ export function PostDropdownBtn({
           label: 'Delete post',
           onPress() {
             store.shell.openModal(
-              new ConfirmModel(
+              new ConfirmModal(
                 'Delete this post?',
                 'Are you sure? This can not be undone.',
                 onDeletePost,