Factor lightbox out into hook/context (#1919)

src/view/com/lightbox/Lightbox.web.tsx

@@ -7,41 +7,42 @@ import {
   View,
   Pressable,
 } from 'react-native'
-import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {useStores} from 'state/index'
-import * as models from 'state/models/ui/shell'
 import {colors, s} from 'lib/styles'
 import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
 import {Text} from '../util/text/Text'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {
+  useLightbox,
+  useLightboxControls,
+  ImagesLightbox,
+  ProfileImageLightbox,
+} from '#/state/lightbox'
 
 interface Img {
   uri: string
   alt?: string
 }
 
-export const Lightbox = observer(function Lightbox() {
-  const store = useStores()
+export function Lightbox() {
+  const {activeLightbox} = useLightbox()
+  const {closeLightbox} = useLightboxControls()
 
-  const onClose = useCallback(() => store.shell.closeLightbox(), [store.shell])
-
-  if (!store.shell.isLightboxActive) {
+  if (!activeLightbox) {
     return null
   }
 
-  const activeLightbox = store.shell.activeLightbox
   const initialIndex =
-    activeLightbox instanceof models.ImagesLightbox ? activeLightbox.index : 0
+    activeLightbox instanceof ImagesLightbox ? activeLightbox.index : 0
 
   let imgs: Img[] | undefined
-  if (activeLightbox instanceof models.ProfileImageLightbox) {
+  if (activeLightbox instanceof ProfileImageLightbox) {
     const opts = activeLightbox
     if (opts.profile.avatar) {
       imgs = [{uri: opts.profile.avatar}]
     }
-  } else if (activeLightbox instanceof models.ImagesLightbox) {
+  } else if (activeLightbox instanceof ImagesLightbox) {
     const opts = activeLightbox
     imgs = opts.images
   }
@@ -51,9 +52,13 @@ export const Lightbox = observer(function Lightbox() {
   }
 
   return (
-    <LightboxInner imgs={imgs} initialIndex={initialIndex} onClose={onClose} />
+    <LightboxInner
+      imgs={imgs}
+      initialIndex={initialIndex}
+      onClose={closeLightbox}
+    />
   )
-})
+}
 
 function LightboxInner({
   imgs,