Implement modals for web

src/view/com/modals/EditProfile.tsx

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
-import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
+import {ScrollView, TextInput} from './util'
 import {Image as PickedImage} from '../util/images/ImageCropPicker'
 import {Text} from '../util/text/Text'
 import {ErrorMessage} from '../util/error/ErrorMessage'
@@ -102,7 +102,7 @@ export function Component({
 
   return (
     <View style={s.flex1}>
-      <BottomSheetScrollView style={styles.inner}>
+      <ScrollView style={styles.inner}>
         <Text style={styles.title}>Edit my profile</Text>
         <View style={styles.photos}>
           <UserBanner
@@ -126,7 +126,7 @@ export function Component({
         )}
         <View>
           <Text style={styles.label}>Display Name</Text>
-          <BottomSheetTextInput
+          <TextInput
             style={styles.textInput}
             placeholder="e.g. Alice Roberts"
             placeholderTextColor={colors.gray4}
@@ -136,7 +136,7 @@ export function Component({
         </View>
         <View style={s.pb10}>
           <Text style={styles.label}>Description</Text>
-          <BottomSheetTextInput
+          <TextInput
             style={[styles.textArea]}
             placeholder="e.g. Artist, dog-lover, and memelord."
             placeholderTextColor={colors.gray4}
@@ -165,7 +165,7 @@ export function Component({
             <Text style={[s.black, s.bold]}>Cancel</Text>
           </View>
         </TouchableOpacity>
-      </BottomSheetScrollView>
+      </ScrollView>
     </View>
   )
 }

src/view/com/modals/Modal.web.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import {TouchableWithoutFeedback, StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {useStores} from '../../../state'
+import {usePalette} from '../../lib/hooks/usePalette'
+
+import * as models from '../../../state/models/shell-ui'
+
+import * as ConfirmModal from './Confirm'
+import * as EditProfileModal from './EditProfile'
+import * as ServerInputModal from './ServerInput'
+import * as ReportPostModal from './ReportPost'
+import * as ReportAccountModal from './ReportAccount'
+
+export const Modal = observer(function Modal() {
+  const store = useStores()
+  const pal = usePalette('default')
+
+  if (!store.shell.isModalActive) {
+    return null
+  }
+
+  const onClose = () => {
+    store.shell.closeModal()
+  }
+  const onInnerPress = () => {
+    // do nothing, we just want to stop it from bubbling
+  }
+
+  let element
+  if (store.shell.activeModal?.name === 'confirm') {
+    element = (
+      <ConfirmModal.Component
+        {...(store.shell.activeModal as models.ConfirmModal)}
+      />
+    )
+  } else if (store.shell.activeModal?.name === 'edit-profile') {
+    element = (
+      <EditProfileModal.Component
+        {...(store.shell.activeModal as models.EditProfileModal)}
+      />
+    )
+  } else if (store.shell.activeModal?.name === 'server-input') {
+    element = (
+      <ServerInputModal.Component
+        {...(store.shell.activeModal as models.ServerInputModal)}
+      />
+    )
+  } else if (store.shell.activeModal?.name === 'report-post') {
+    element = <ReportPostModal.Component />
+  } else if (store.shell.activeModal?.name === 'report-account') {
+    element = <ReportAccountModal.Component />
+  } else {
+    return null
+  }
+
+  return (
+    <TouchableWithoutFeedback onPress={onClose}>
+      <View style={styles.mask}>
+        <TouchableWithoutFeedback onPress={onInnerPress}>
+          <View style={[styles.container, pal.view]}>{element}</View>
+        </TouchableWithoutFeedback>
+      </View>
+    </TouchableWithoutFeedback>
+  )
+})
+
+const styles = StyleSheet.create({
+  mask: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#000c',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  container: {
+    width: 500,
+    paddingVertical: 20,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+  },
+})

src/view/com/modals/ServerInput.tsx

@@ -4,7 +4,7 @@ import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
-import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
+import {ScrollView, TextInput} from './util'
 import {Text} from '../util/text/Text'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
@@ -32,7 +32,7 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) {
   return (
     <View style={s.flex1} testID="serverInputModal">
       <Text style={[s.textCenter, s.bold, s.f18]}>Choose Service</Text>
-      <BottomSheetScrollView style={styles.inner}>
+      <ScrollView style={styles.inner}>
         <View style={styles.group}>
           {LOGIN_INCLUDE_DEV_SERVERS ? (
             <>
@@ -69,7 +69,7 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) {
         <View style={styles.group}>
           <Text style={styles.label}>Other service</Text>
           <View style={s.flexRow}>
-            <BottomSheetTextInput
+            <TextInput
               testID="customServerTextInput"
               style={styles.textInput}
               placeholder="e.g. https://bsky.app"
@@ -92,7 +92,7 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) {
             </TouchableOpacity>
           </View>
         </View>
-      </BottomSheetScrollView>
+      </ScrollView>
     </View>
   )
 }

src/view/com/modals/util.tsx

@@ -0,0 +1,4 @@
+export {
+  BottomSheetScrollView as ScrollView,
+  BottomSheetTextInput as TextInput,
+} from '@gorhom/bottom-sheet'

src/view/com/modals/util.web.tsx

@@ -0,0 +1 @@
+export {ScrollView, TextInput} from 'react-native'

src/view/shell/web/index.tsx

@@ -9,6 +9,7 @@ import {Onboard} from '../../screens/Onboard'
 import {Login} from '../../screens/Login'
 import {ErrorBoundary} from '../../com/util/ErrorBoundary'
 import {Lightbox} from '../../com/lightbox/Lightbox'
+import {Modal} from '../../com/modals/Modal'
 import {usePalette} from '../../lib/hooks/usePalette'
 import {s} from '../../lib/styles'
 
@@ -21,6 +22,7 @@ export const WebShell: React.FC = observer(() => {
     return (
       <View style={styles.outerContainer}>
         <Login />
+        <Modal />
       </View>
     )
   }
@@ -47,6 +49,7 @@ export const WebShell: React.FC = observer(() => {
       ))}
       <DesktopLeftColumn />
       <DesktopRightColumn />
+      <Modal />
       <Lightbox />
     </View>
   )