feat: implement SafeArea component

Author: purrseus

src/ui/Xenon.tsx

@@ -1,7 +1,7 @@
 import { enableMapSet } from 'immer';
 import { createRef, memo, useImperativeHandle, useMemo, type JSX, type ReactNode } from 'react';
 import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { FullWindowOverlay } from 'react-native-screens';
 import { useImmer } from 'use-immer';
 import { MainContext } from '../contexts';
@@ -10,6 +10,7 @@ import { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
 import colors from '../theme/colors';
 import { type DebuggerState } from '../types';
 import { Bubble, Header, IndexedStack, Panel, SearchBar } from './components';
+import SafeArea from './components/common/SafeArea';
 
 namespace Xenon {
   interface Methods {
@@ -163,10 +164,10 @@ namespace Xenon {
 
             <View style={containerStyle}>
               <SafeAreaProvider>
-                <SafeAreaView style={styles.safeArea}>
-                  <Header />
-                  <Panel />
-                </SafeAreaView>
+                {debuggerState.position === 'top' && <SafeArea inset="top" />}
+                <Header />
+                <Panel />
+                {debuggerState.position === 'bottom' && <SafeArea inset="bottom" />}
               </SafeAreaProvider>
             </View>
 

src/ui/components/common/SafeArea.tsx

@@ -0,0 +1,10 @@
+import { View } from 'react-native';
+import { useSafeAreaInsets, type EdgeInsets } from 'react-native-safe-area-context';
+
+export default function SafeArea({
+  inset,
+}: {
+  inset: Extract<keyof EdgeInsets, 'top' | 'bottom'>;
+}) {
+  return <View style={{ height: useSafeAreaInsets()[inset] }} />;
+}

src/ui/components/headers/DebuggerHeader.tsx

@@ -45,10 +45,10 @@ const DebuggerHeader = forwardRef<ScrollView, DebuggerHeaderProps>(
 
     return (
       <HeaderComponents.Wrapper ref={ref} style={style}>
-        <HeaderComponents.MainButtons />
-
         <DebuggerHeaderItem onPress={onShowSearchInput} content={icons.search} />
 
+        <HeaderComponents.MainButtons />
+
         <Divider type="vertical" />
 
         <DebuggerHeaderItem

src/ui/components/search-bar/SearchBar.tsx

@@ -9,13 +9,14 @@ import {
   type TextInputSubmitEditingEventData,
   type ViewProps,
 } from 'react-native';
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { MainContext } from '../../../contexts';
 import refs, { DebuggerVisibility } from '../../../core/refs';
 import colors from '../../../theme/colors';
-import Touchable from '../common/Touchable';
-import Icon from '../common/Icon';
 import icons from '../../../theme/icons';
-import { MainContext } from '../../../contexts';
+import Icon from '../common/Icon';
+import Touchable from '../common/Touchable';
+import SafeArea from '../common/SafeArea';
 
 interface SearchBarProps extends ViewProps {}
 
@@ -48,7 +49,9 @@ const SearchBar = forwardRef<View, SearchBarProps>(({ style, ...props }, ref) =>
   return (
     <View ref={ref} style={[styles.container, style]} {...props}>
       <SafeAreaProvider>
-        <SafeAreaView edges={['top']} style={styles.safeArea}>
+        <View style={styles.barView}>
+          <SafeArea inset="top" />
+
           <View style={styles.inputWrapper}>
             <Icon source={icons.search} size={18} />
 
@@ -68,11 +71,11 @@ const SearchBar = forwardRef<View, SearchBarProps>(({ style, ...props }, ref) =>
               onSubmitEditing={onSubmitEditing}
             />
 
-            <Touchable onPress={onClear} style={styles.closeButton}>
+            <Touchable hitSlop={8} onPress={onClear} style={styles.closeButton}>
               <Icon source={icons.close} size={12} color={colors.black} />
             </Touchable>
           </View>
-        </SafeAreaView>
+        </View>
 
         <Touchable onPress={onHideSearchInput} style={styles.background}>
           <View />
@@ -88,7 +91,7 @@ const styles = StyleSheet.create({
     ...(Platform.OS === 'android' ? { zIndex: 9999 } : {}),
     backgroundColor: colors.black + '80', // 80 for 50% opacity
   },
-  safeArea: {
+  barView: {
     backgroundColor: colors.lightGray,
     padding: 8,
   },