mirror of
https://github.com/stablyai/orca.git
synced 2026-11-15 10:27:33 +00:00
49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
import { useMemo, useSyncExternalStore } from 'react'
|
||
import { useWindowDimensions, View } from 'react-native'
|
||
import { Slot, usePathname } from 'expo-router'
|
||
import { SafeAreaFrameContext, SafeAreaInsetsContext } from 'react-native-safe-area-context'
|
||
import { ZERO_SAFE_AREA_INSETS } from '../src/mobile-web-shell/bridge/page-geometry/bridge-safe-area-insets'
|
||
import { DetailCardHostProvider } from '../src/components/detail-cards/detail-card-host'
|
||
import { SideSafeArea } from '../src/layout/side-safe-area'
|
||
import { usePageBridgeClient } from '../src/transport/connection/client-context.web'
|
||
import { colors } from '../src/theme/mobile-theme'
|
||
import { themedStyleSheet } from '../src/theme/themed-styles'
|
||
import { useMobileColorScheme } from '../src/theme/use-mobile-color-scheme'
|
||
import { isOverlayPageRoute } from '../src/new-workspace/overlay-page-route'
|
||
|
||
// Provide shell insets below ExpoRoot (WebView CSS env insets are zero); pad only sides to avoid DefaultNavigator’s duplicate all-edge SafeAreaView.
|
||
export default function PageRootLayout() {
|
||
useMobileColorScheme()
|
||
const client = usePageBridgeClient()
|
||
const insets = useSyncExternalStore(
|
||
client.onSafeAreaInsetsUpdate,
|
||
() => client.getShellSession()?.safeAreaInsets ?? ZERO_SAFE_AREA_INSETS
|
||
)
|
||
const { width, height } = useWindowDimensions()
|
||
const transparent = isOverlayPageRoute(usePathname())
|
||
const frame = useMemo(() => ({ x: 0, y: 0, width, height }), [width, height])
|
||
return (
|
||
<SafeAreaFrameContext.Provider value={frame}>
|
||
<SafeAreaInsetsContext.Provider value={insets}>
|
||
<View style={[styles.root, transparent && styles.transparent]}>
|
||
<DetailCardHostProvider>
|
||
<SideSafeArea>
|
||
<Slot />
|
||
</SideSafeArea>
|
||
</DetailCardHostProvider>
|
||
</View>
|
||
</SafeAreaInsetsContext.Provider>
|
||
</SafeAreaFrameContext.Provider>
|
||
)
|
||
}
|
||
|
||
const styles = themedStyleSheet(() => ({
|
||
root: {
|
||
flex: 1,
|
||
backgroundColor: colors.bgBase
|
||
},
|
||
transparent: {
|
||
backgroundColor: 'transparent'
|
||
}
|
||
}))
|