acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

rip out modal system

Browse Source
This commit is contained in:
Samuel Newman
2026-02-18 19:13:27 +02:00
parent 6bf1572ffc
commit 2508f95508
14 changed files with 28 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.native.tsx
+14 -17
View File
@@ -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>
<LightboxStateProvider>
<PortalProvider>
<BottomSheetProvider>
<LandingProvider>
<SafeAreaProvider
initialMetrics={initialWindowMetrics}>
<InnerApp />
</SafeAreaProvider>
</LandingProvider>
</BottomSheetProvider>
</PortalProvider>
</LightboxStateProvider>
</DialogStateProvider>
</ModalStateProvider>
<DialogStateProvider>
<LightboxStateProvider>
<PortalProvider>
<BottomSheetProvider>
<LandingProvider>
<SafeAreaProvider
initialMetrics={initialWindowMetrics}>
<InnerApp />
</SafeAreaProvider>
</LandingProvider>
</BottomSheetProvider>
</PortalProvider>
</LightboxStateProvider>
</DialogStateProvider>
</ShellStateProvider>
</I18nProvider>
</PrefsStateProvider>
src/App.web.tsx
+9 -12
View File
@@ -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>
<LightboxStateProvider>
<PortalProvider>
<LandingProvider>
<InnerApp />
</LandingProvider>
</PortalProvider>
</LightboxStateProvider>
</DialogStateProvider>
</ModalStateProvider>
<DialogStateProvider>
<LightboxStateProvider>
<PortalProvider>
<LandingProvider>
<InnerApp />
</LandingProvider>
</PortalProvider>
</LightboxStateProvider>
</DialogStateProvider>
</ShellStateProvider>
</I18nProvider>
</PrefsStateProvider>
src/components/Link.tsx
-5
View File
@@ -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
-105
View File
@@ -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 -15
View File
@@ -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,
closeAllModals,
closeComposer,
closeAlfDialogs,
setDrawerOpen,
])
}, [closeLightbox, closeComposer, closeAlfDialogs, setDrawerOpen])
}
src/view/com/composer/Composer.tsx
+2 -4
View File
@@ -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
-91
View File
@@ -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
-101
View File
@@ -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
-4
View File
@@ -1,4 +0,0 @@
export {
BottomSheetScrollView as ScrollView,
BottomSheetTextInput as TextInput,
} from '@discord/bottom-sheet/src'
src/view/com/modals/util.web.tsx
-1
View File
@@ -1 +0,0 @@
export {ScrollView, TextInput} from 'react-native'
src/view/com/util/Link.tsx
-10
View File
@@ -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
+1 -8
View File
@@ -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={() => {
// TEMP: remove when all modals are ALF'd -sfn
if (!isModalActive) {
ref.current?.onPressCancel()
}
}}>
onDismiss={() => ref.current?.onPressCancel()}>
<View
style={[
styles.container,
src/view/shell/index.tsx
-2
View File
@@ -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
-2
View File
@@ -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 />