rip out modal system

src/App.native.tsx

@@ -31,7 +31,6 @@ import {listenSessionDropped} from '#/state/events'
 import {GlobalGestureEventsProvider} from '#/state/global-gesture-events'
 import {Provider as HomeBadgeProvider} from '#/state/home-badge'
 import {MessagesProvider} from '#/state/messages'
-import {Provider as ModalStateProvider} from '#/state/modals'
 import {init as initPersistedState} from '#/state/persisted'
 import {Provider as PrefsStateProvider} from '#/state/preferences'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
@@ -241,22 +240,20 @@ function App() {
                   <PrefsStateProvider>
                     <I18nProvider>
                       <ShellStateProvider>
-                        <ModalStateProvider>
+                        <DialogStateProvider>
-                          <DialogStateProvider>
+                          <LightboxStateProvider>
-                            <LightboxStateProvider>
+                            <PortalProvider>
-                              <PortalProvider>
+                              <BottomSheetProvider>
-                                <BottomSheetProvider>
+                                <LandingProvider>
-                                  <LandingProvider>
+                                  <SafeAreaProvider
-                                    <SafeAreaProvider
+                                    initialMetrics={initialWindowMetrics}>
-                                      initialMetrics={initialWindowMetrics}>
+                                    <InnerApp />
-                                      <InnerApp />
+                                  </SafeAreaProvider>
-                                    </SafeAreaProvider>
+                                </LandingProvider>
-                                  </LandingProvider>
+                              </BottomSheetProvider>
-                                </BottomSheetProvider>
+                            </PortalProvider>
-                              </PortalProvider>
+                          </LightboxStateProvider>
-                            </LightboxStateProvider>
+                        </DialogStateProvider>
-                          </DialogStateProvider>
-                        </ModalStateProvider>
                       </ShellStateProvider>
                     </I18nProvider>
                   </PrefsStateProvider>

src/App.web.tsx

@@ -24,7 +24,6 @@ import {Provider as EmailVerificationProvider} from '#/state/email-verification'
 import {listenSessionDropped} from '#/state/events'
 import {Provider as HomeBadgeProvider} from '#/state/home-badge'
 import {MessagesProvider} from '#/state/messages'
-import {Provider as ModalStateProvider} from '#/state/modals'
 import {init as initPersistedState} from '#/state/persisted'
 import {Provider as PrefsStateProvider} from '#/state/preferences'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
@@ -220,17 +219,15 @@ function App() {
                   <PrefsStateProvider>
                     <I18nProvider>
                       <ShellStateProvider>
-                        <ModalStateProvider>
+                        <DialogStateProvider>
-                          <DialogStateProvider>
+                          <LightboxStateProvider>
-                            <LightboxStateProvider>
+                            <PortalProvider>
-                              <PortalProvider>
+                              <LandingProvider>
-                                <LandingProvider>
+                                <InnerApp />
-                                  <InnerApp />
+                              </LandingProvider>
-                                </LandingProvider>
+                            </PortalProvider>
-                              </PortalProvider>
+                          </LightboxStateProvider>
-                            </LightboxStateProvider>
+                        </DialogStateProvider>
-                          </DialogStateProvider>
-                        </ModalStateProvider>
                       </ShellStateProvider>
                     </I18nProvider>
                   </PrefsStateProvider>

src/components/Link.tsx

@@ -26,7 +26,6 @@ import {
   isExternalUrl,
   linkRequiresWarning,
 } from '#/lib/strings/url-helpers'
-import {useModalControls} from '#/state/modals'
 import {useInAppBrowser} from '#/state/preferences/in-app-browser'
 import {atoms as a, flatten, type TextStyleProp, useTheme, web} from '#/alf'
 import {Button, type ButtonProps} from '#/components/Button'
@@ -140,7 +139,6 @@ export function useLink({
   }
 
   const isExternal = isExternalUrl(href)
-  const {closeModal} = useModalControls()
   const {linkWarningDialogControl} = useGlobalDialogsControlContext()
   const openLink = useOpenLink()
   const groupChatJoinIntent = useGroupChatJoinIntent()
@@ -188,8 +186,6 @@ export function useLink({
           ) {
             void openLink(href)
           } else {
-            closeModal() // close any active modals
-
             const [screen, params] = router.matchPath(href) as [
               screen: keyof AllNavigatorParams,
               params?: RouteParams,
@@ -242,7 +238,6 @@ export function useLink({
       isExternal,
       href,
       openLink,
-      closeModal,
       action,
       navigation,
       overridePresentation,

src/state/modals/index.tsx

@@ -1,105 +0,0 @@
-import {createContext, useContext, useEffect, useMemo, useState} from 'react'
-
-import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-import {useHotkeysContext} from '#/lib/hotkeys'
-
-export interface ContentLanguagesSettingsModal {
-  name: 'content-languages-settings'
-}
-
-/**
- * @deprecated DO NOT ADD NEW MODALS
- */
-export type Modal =
-  // Curation
-  ContentLanguagesSettingsModal
-
-const ModalContext = createContext<{
-  isModalActive: boolean
-  activeModals: Modal[]
-}>({
-  isModalActive: false,
-  activeModals: [],
-})
-ModalContext.displayName = 'ModalContext'
-
-const ModalControlContext = createContext<{
-  openModal: (modal: Modal) => void
-  closeModal: () => boolean
-  closeAllModals: () => boolean
-}>({
-  openModal: () => {},
-  closeModal: () => false,
-  closeAllModals: () => false,
-})
-ModalControlContext.displayName = 'ModalControlContext'
-
-export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [activeModals, setActiveModals] = useState<Modal[]>([])
-  const {disableScope, enableScope} = useHotkeysContext()
-
-  useEffect(() => {
-    if (activeModals.length > 0) {
-      disableScope('global')
-    } else {
-      enableScope('global')
-    }
-  }, [activeModals.length, disableScope, enableScope])
-
-  const openModal = useNonReactiveCallback((modal: Modal) => {
-    setActiveModals(modals => [...modals, modal])
-  })
-
-  const closeModal = useNonReactiveCallback(() => {
-    let wasActive = activeModals.length > 0
-    setActiveModals(modals => {
-      return modals.slice(0, -1)
-    })
-    return wasActive
-  })
-
-  const closeAllModals = useNonReactiveCallback(() => {
-    let wasActive = activeModals.length > 0
-    setActiveModals([])
-    return wasActive
-  })
-
-  const state = useMemo(
-    () => ({
-      isModalActive: activeModals.length > 0,
-      activeModals,
-    }),
-    [activeModals],
-  )
-
-  const methods = useMemo(
-    () => ({
-      openModal,
-      closeModal,
-      closeAllModals,
-    }),
-    [openModal, closeModal, closeAllModals],
-  )
-
-  return (
-    <ModalContext.Provider value={state}>
-      <ModalControlContext.Provider value={methods}>
-        {children}
-      </ModalControlContext.Provider>
-    </ModalContext.Provider>
-  )
-}
-
-/**
- * @deprecated use the dialog system from `#/components/Dialog.tsx`
- */
-export function useModals() {
-  return useContext(ModalContext)
-}
-
-/**
- * @deprecated use the dialog system from `#/components/Dialog.tsx`
- */
-export function useModalControls() {
-  return useContext(ModalControlContext)
-}

src/state/util.ts

@@ -2,7 +2,6 @@ import {useCallback} from 'react'
 
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {useLightboxControls} from '#/components/Lightbox/state'
-import {useModalControls} from './modals'
 import {useComposerControls} from './shell/composer'
 import {useSetDrawerOpen} from './shell/drawer-open'
 
@@ -12,7 +11,6 @@ import {useSetDrawerOpen} from './shell/drawer-open'
  */
 export function useCloseAnyActiveElement() {
   const {closeLightbox} = useLightboxControls()
-  const {closeModal} = useModalControls()
   const {closeComposer} = useComposerControls()
   const {closeAllDialogs} = useDialogStateControlContext()
   const setDrawerOpen = useSetDrawerOpen()
@@ -20,9 +18,6 @@ export function useCloseAnyActiveElement() {
     if (closeLightbox()) {
       return true
     }
-    if (closeModal()) {
-      return true
-    }
     if (closeAllDialogs()) {
       return true
     }
@@ -31,7 +26,7 @@ export function useCloseAnyActiveElement() {
     }
     setDrawerOpen(false)
     return false
-  }, [closeLightbox, closeModal, closeComposer, setDrawerOpen, closeAllDialogs])
+  }, [closeLightbox, closeComposer, setDrawerOpen, closeAllDialogs])
 }
 
 /**
@@ -39,21 +34,13 @@ export function useCloseAnyActiveElement() {
  */
 export function useCloseAllActiveElements() {
   const {closeLightbox} = useLightboxControls()
-  const {closeAllModals} = useModalControls()
   const {closeComposer} = useComposerControls()
   const {closeAllDialogs: closeAlfDialogs} = useDialogStateControlContext()
   const setDrawerOpen = useSetDrawerOpen()
   return useCallback(() => {
     closeLightbox()
-    closeAllModals()
     closeComposer()
     closeAlfDialogs()
     setDrawerOpen(false)
-  }, [
+  }, [closeLightbox, closeComposer, closeAlfDialogs, setDrawerOpen])
-    closeLightbox,
-    closeAllModals,
-    closeComposer,
-    closeAlfDialogs,
-    setDrawerOpen,
-  ])
 }

src/view/com/composer/Composer.tsx

@@ -86,7 +86,6 @@ import {
   createComposerImage,
   pasteImage,
 } from '#/state/gallery'
-import {useModalControls} from '#/state/modals'
 import {useRequireAltTextEnabled} from '#/state/preferences'
 import {
   fromPostLanguages,
@@ -283,7 +282,6 @@ export const ComposePost = ({
     useSaveDraftMutation()
   const {mutate: cleanupPublishedDraft} = useCleanupPublishedDraftMutation()
   const {closeAllDialogs} = useDialogStateControlContext()
-  const {closeAllModals} = useModalControls()
   const {data: preferences} = usePreferencesQuery()
   const navigation = useNavigation<NavigationProp>()
 
@@ -835,7 +833,7 @@ export const ComposePost = ({
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
-        if (closeAllDialogs() || closeAllModals()) {
+        if (closeAllDialogs()) {
           return true
         }
         onPressCancel()
@@ -845,7 +843,7 @@ export const ComposePost = ({
     return () => {
       backHandler.remove()
     }
-  }, [onPressCancel, closeAllDialogs, closeAllModals])
+  }, [onPressCancel, closeAllDialogs])
 
   const missingAltError = useMemo(() => {
     if (!requireAltTextEnabled) {

src/view/com/modals/Modal.tsx

@@ -1,91 +0,0 @@
-import {Fragment, useEffect, useRef} from 'react'
-import {StyleSheet} from 'react-native'
-import {SafeAreaView} from 'react-native-safe-area-context'
-import BottomSheet from '@discord/bottom-sheet/src'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useModalControls, useModals} from '#/state/modals'
-import {FullWindowOverlay} from '#/components/FullWindowOverlay'
-import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
-
-const DEFAULT_SNAPPOINTS = ['90%']
-const HANDLE_HEIGHT = 24
-
-export function ModalsContainer() {
-  const {isModalActive, activeModals} = useModals()
-  const {closeModal} = useModalControls()
-  const bottomSheetRef = useRef<BottomSheet>(null)
-  const pal = usePalette('default')
-  const activeModal = activeModals[activeModals.length - 1]
-
-  const onBottomSheetChange = async (snapPoint: number) => {
-    if (snapPoint === -1) {
-      closeModal()
-    }
-  }
-
-  const onClose = () => {
-    bottomSheetRef.current?.close()
-    closeModal()
-  }
-
-  useEffect(() => {
-    if (isModalActive) {
-      bottomSheetRef.current?.snapToIndex(0)
-    } else {
-      bottomSheetRef.current?.close()
-    }
-  }, [isModalActive, bottomSheetRef, activeModal?.name])
-
-  let snapPoints: (string | number)[] = DEFAULT_SNAPPOINTS
-  let element
-  {
-    return null
-  }
-
-  if (snapPoints[0] === 'fullscreen') {
-    return (
-      <SafeAreaView style={[styles.fullscreenContainer, pal.view]}>
-        {element}
-      </SafeAreaView>
-    )
-  }
-
-  const Container = activeModal ? FullWindowOverlay : Fragment
-
-  return (
-    <Container>
-      <BottomSheet
-        ref={bottomSheetRef}
-        snapPoints={snapPoints}
-        handleHeight={HANDLE_HEIGHT}
-        index={isModalActive ? 0 : -1}
-        enablePanDownToClose
-        android_keyboardInputMode="adjustResize"
-        keyboardBlurBehavior="restore"
-        backdropComponent={
-          isModalActive ? createCustomBackdrop(onClose) : undefined
-        }
-        handleIndicatorStyle={{backgroundColor: pal.text.color}}
-        handleStyle={[styles.handle, pal.view]}
-        backgroundStyle={pal.view}
-        onChange={onBottomSheetChange}>
-        {element}
-      </BottomSheet>
-    </Container>
-  )
-}
-
-const styles = StyleSheet.create({
-  handle: {
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
-  },
-  fullscreenContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-  },
-})

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

@@ -1,101 +0,0 @@
-import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
-import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
-import {RemoveScrollBar} from 'react-remove-scroll-bar'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {type Modal as ModalIface} from '#/state/modals'
-import {useModalControls, useModals} from '#/state/modals'
-
-export function ModalsContainer() {
-  const {isModalActive, activeModals} = useModals()
-
-  if (!isModalActive) {
-    return null
-  }
-
-  return (
-    <>
-      <RemoveScrollBar />
-      {activeModals.map((modal, i) => (
-        <Modal key={`modal-${i}`} modal={modal} />
-      ))}
-    </>
-  )
-}
-
-function Modal({modal: _modal}: {modal: ModalIface}) {
-  const {isModalActive} = useModals()
-  const {closeModal} = useModalControls()
-  const pal = usePalette('default')
-  const {isMobile} = useWebMediaQueries()
-
-  if (!isModalActive) {
-    return null
-  }
-
-  const onPressMask = () => {
-    closeModal()
-  }
-  const onInnerPress = () => {
-    // TODO: can we use prevent default?
-    // do nothing, we just want to stop it from bubbling
-  }
-
-  let element
-  {
-    return null
-  }
-
-  return (
-    // eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors
-    <TouchableWithoutFeedback onPress={onPressMask}>
-      <Animated.View
-        style={styles.mask}
-        entering={FadeIn.duration(150)}
-        exiting={FadeOut}>
-        {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
-        <TouchableWithoutFeedback onPress={onInnerPress}>
-          <View
-            style={[
-              styles.container,
-              isMobile && styles.containerMobile,
-              pal.view,
-              pal.border,
-            ]}>
-            {element}
-          </View>
-        </TouchableWithoutFeedback>
-      </Animated.View>
-    </TouchableWithoutFeedback>
-  )
-}
-
-const styles = StyleSheet.create({
-  mask: {
-    // @ts-ignore
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#000c',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  container: {
-    width: 600,
-    // @ts-ignore web only
-    maxWidth: '100vw',
-    // @ts-ignore web only
-    maxHeight: '90vh',
-    paddingVertical: 20,
-    paddingHorizontal: 24,
-    borderRadius: 8,
-    borderWidth: 1,
-  },
-  containerMobile: {
-    borderRadius: 0,
-    paddingHorizontal: 0,
-  },
-})

src/view/com/modals/util.tsx

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

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

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

src/view/com/util/Link.tsx

@@ -28,7 +28,6 @@ import {
 } from '#/lib/strings/url-helpers'
 import {type TypographyVariant} from '#/lib/ThemeContext'
 import {emitSoftReset} from '#/state/events'
-import {useModalControls} from '#/state/modals'
 import {WebAuxClickWrapper} from '#/view/com/util/WebAuxClickWrapper'
 import {useTheme} from '#/alf'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
@@ -79,7 +78,6 @@ export const Link = memo(function Link({
   ...props
 }: Props) {
   const t = useTheme()
-  const {closeModal} = useModalControls()
   const navigation = useNavigationDeduped()
   const anchorHref = asAnchor ? sanitizeUrl(href) : undefined
   const openLink = useOpenLink()
@@ -90,7 +88,6 @@ export const Link = memo(function Link({
       onBeforePress?.()
       if (typeof href === 'string') {
         return onPressInner(
-          closeModal,
           navigation,
           sanitizeUrl(href),
           navigationAction,
@@ -101,7 +98,6 @@ export const Link = memo(function Link({
       }
     },
     [
-      closeModal,
       navigation,
       navigationAction,
       href,
@@ -205,7 +201,6 @@ export const TextLink = memo(function TextLink({
   onBeforePress?: () => void
 } & TextProps) {
   const navigation = useNavigationDeduped()
-  const {closeModal} = useModalControls()
   const {linkWarningDialogControl} = useGlobalDialogsControlContext()
   const openLink = useOpenLink()
   const groupChatJoinIntent = useGroupChatJoinIntent()
@@ -246,7 +241,6 @@ export const TextLink = memo(function TextLink({
         return onPressProp()
       }
       return onPressInner(
-        closeModal,
         navigation,
         sanitizeUrl(href),
         navigationAction,
@@ -258,7 +252,6 @@ export const TextLink = memo(function TextLink({
     [
       onBeforePress,
       onPressProp,
-      closeModal,
       navigation,
       href,
       text,
@@ -383,7 +376,6 @@ const EXEMPT_PATHS = ['/robots.txt', '/security.txt', '/.well-known/']
 // needed customizations
 // -prf
 function onPressInner(
-  closeModal = () => {},
   navigation: DebouncedNavigationProp,
   href: string,
   navigationAction: 'push' | 'replace' | 'navigate' = 'push',
@@ -429,8 +421,6 @@ function onPressInner(
     ) {
       openLink(href)
     } else {
-      closeModal() // close any active modals
-
       const [routeName, params] = router.matchPath(href)
       if (navigationAction === 'push') {
         // @ts-ignore we're not able to type check on this one -prf

src/view/shell/Composer.web.tsx

@@ -3,7 +3,6 @@ import {DismissableLayer, FocusGuards, FocusScope} from 'radix-ui/internal'
 import {RemoveScrollBar} from 'react-remove-scroll-bar'
 
 import {useA11y} from '#/state/a11y'
-import {useModals} from '#/state/modals'
 import {type ComposerOpts, useComposerState} from '#/state/shell/composer'
 import {ComposePost, useComposerCancelRef} from '#/view/com/composer/Composer'
 import {atoms as a, flatten, useBreakpoints, useTheme} from '#/alf'
@@ -28,7 +27,6 @@ export function Composer() {
 
 function Inner({state}: {state: ComposerOpts}) {
   const ref = useComposerCancelRef()
-  const {isModalActive} = useModals()
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const {reduceMotionEnabled} = useA11y()
@@ -51,12 +49,7 @@ function Inner({state}: {state: ComposerOpts}) {
         ])}
         onFocusOutside={evt => evt.preventDefault()}
         onInteractOutside={evt => evt.preventDefault()}
-        onDismiss={() => {
+        onDismiss={() => ref.current?.onPressCancel()}>
-          // TEMP: remove when all modals are ALF'd -sfn
-          if (!isModalActive) {
-            ref.current?.onPressCancel()
-          }
-        }}>
         <View
           style={[
             styles.container,

src/view/shell/index.tsx

@@ -19,7 +19,6 @@ import {
   useSetDrawerOpen,
 } from '#/state/shell'
 import {useCloseAnyActiveElement} from '#/state/util'
-import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {Deactivated} from '#/screens/Deactivated'
 import {Takendown} from '#/screens/Takendown'
@@ -108,7 +107,6 @@ function ShellInner() {
         </ErrorBoundary>
       </View>
       <Composer />
-      <ModalsContainer />
       <MutedWordsDialog />
       <SigninDialog />
       <EmailDialog />

src/view/shell/index.web.tsx

@@ -10,7 +10,6 @@ import {type NavigationProp} from '#/lib/routes/types'
 import {useSession} from '#/state/session'
 import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useCloseAllActiveElements} from '#/state/util'
-import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {Deactivated} from '#/screens/Deactivated'
 import {Takendown} from '#/screens/Takendown'
@@ -65,7 +64,6 @@ function ShellInner() {
         <FlatNavigator layout={drawerLayout} />
       </ErrorBoundary>
       <Composer />
-      <ModalsContainer />
       <MutedWordsDialog />
       <SigninDialog />
       <EmailDialog />