feat: enhance panel functionality with animated handle and dynamic sizing

Author: purrseus

src/core/refs.ts

@@ -1,6 +1,6 @@
 import { createRef } from 'react';
 import type { IndexedStackMethods } from '../ui/components/common/IndexedStack';
-import type { TextInput } from 'react-native';
+import { Animated, Dimensions, type TextInput } from 'react-native';
 
 export enum DebuggerVisibility {
   Hidden = -1,
@@ -27,6 +27,15 @@ const refs = {
   panel: createRef<IndexedStackMethods<PanelState>>(),
   header: createRef<IndexedStackMethods<HeaderState>>(),
   searchInput: createRef<TextInput>(),
+  panelSize: (() => {
+    const ref = createRef<Animated.ValueXY>();
+    const dimensions = Dimensions.get('window');
+    ref.current = new Animated.ValueXY({
+      x: dimensions.width,
+      y: Math.min(dimensions.width, dimensions.height) * 0.75,
+    });
+    return ref;
+  })(),
 };
 
 export default refs;

src/core/utils.ts

@@ -79,7 +79,7 @@ export const getConsoleTypeColor = (type: LogMessage['type']) => {
 //#region metrics
 export const getVerticalSafeMargin = (screenHeight: number) => screenHeight / 8;
 
-export const clamp = (value: number, min: number, max: number) =>
+export const clamp = (min: number, max: number, value: number) =>
   Math.max(min, Math.min(max, value));
 
 export const getHttpInterceptorId = () => {

src/ui/components/bubble/Bubble.tsx

@@ -80,9 +80,9 @@ const Bubble = forwardRef<View, BubbleProps>(
           const verticalSafeMargin = getVerticalSafeMargin(screenHeight);
 
           const finalY = clamp(
-            gesture.moveY,
             verticalSafeMargin,
             screenHeight - verticalSafeMargin - bubbleSize,
+            gesture.moveY,
           );
 
           Animated.spring(pan.current, {

src/ui/components/handle/Handle.tsx

@@ -0,0 +1,60 @@
+import { useContext, useMemo, useRef } from 'react';
+import { Animated, PanResponder, StyleSheet, View } from 'react-native';
+import { MainContext } from '../../../contexts';
+import refs from '../../../core/refs';
+import { clamp } from '../../../core/utils';
+import colors from '../../../theme/colors';
+
+export default function Handle() {
+  const pan = useRef(new Animated.Value(0));
+  const {
+    dimensions,
+    debuggerState: { position },
+  } = useContext(MainContext)!;
+
+  const panResponder = useMemo(() => {
+    const minPanelHeight = dimensions.height * 0.25;
+    const maxPanelHeight = dimensions.height * 0.9;
+
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: (event, gestureState) => {
+        const value =
+          position === 'bottom' ? dimensions.height - gestureState.moveY : gestureState.moveY;
+
+        refs.panelSize.current?.setValue({
+          x: dimensions.width,
+          y: clamp(minPanelHeight, maxPanelHeight, value),
+        });
+
+        return Animated.event([null, { dy: pan.current }], {
+          useNativeDriver: false,
+        })(event, gestureState);
+      },
+    });
+  }, [dimensions.height, dimensions.width, position]);
+
+  return (
+    <View style={styles.handleContainer}>
+      <Animated.View {...panResponder.panHandlers} style={styles.handle} hitSlop={16} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  handleContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.lightGray,
+    borderTopColor: colors.gray,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  handle: {
+    width: 48,
+    height: 4,
+    marginVertical: 8,
+    borderRadius: 2,
+    backgroundColor: colors.gray,
+  },
+});

src/ui/components/panels/ConsolePanel.tsx

@@ -8,7 +8,6 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
-import refs, { HeaderState, PanelState } from '../../../core/refs';
 import { formatLogMessage } from '../../../core/utils';
 import { DebuggerPanel, type LogMessage } from '../../../types';
 import Empty from '../common/Empty';
@@ -42,8 +41,6 @@ const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
       <ConsolePanelItem
         {...item}
         onPress={() => {
-          refs.header.current?.setCurrentIndex(HeaderState.Console);
-          refs.panel.current?.setCurrentIndex(PanelState.ConsoleDetail);
           setDebuggerState(draft => {
             draft.detailsData = {
               type: DebuggerPanel.Console,

src/ui/components/panels/NetworkPanel.tsx

@@ -7,7 +7,6 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
-import refs, { HeaderState, PanelState } from '../../../core/refs';
 import {
   DebuggerPanel,
   NetworkType,
@@ -51,8 +50,6 @@ const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
         endTime={item.endTime}
         status={item.status}
         onPress={() => {
-          refs.header.current?.setCurrentIndex(HeaderState.Network);
-          refs.panel.current?.setCurrentIndex(PanelState.NetworkDetail);
           setDebuggerState(draft => {
             draft.detailsData = {
               type: DebuggerPanel.Network,

src/ui/components/panels/Panel.tsx

@@ -1,33 +1,51 @@
-import { Platform, StyleSheet, View, type ViewProps } from 'react-native';
-import refs, { PanelState } from '../../../core/refs';
+import { Animated, Platform, StyleSheet, View, type ViewProps } from 'react-native';
+import refs, { HeaderState, PanelState } from '../../../core/refs';
 import IndexedStack from '../common/IndexedStack';
 import LogMessageDetails from '../details/LogMessageDetails';
 import NetworkRequestDetails from '../details/NetworkRequestDetails';
 import ConsolePanel from './ConsolePanel';
 import NetworkPanel from './NetworkPanel';
 import colors from '../../../theme/colors';
-import { forwardRef, useContext, useMemo } from 'react';
+import { forwardRef, useContext, useEffect, useMemo } from 'react';
 import Header from '../headers/Header';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import SafeArea from '../common/SafeArea';
 import { MainContext } from '../../../contexts';
+import Handle from '../handle/Handle';
+import { DebuggerPanel } from '../../../types';
 
 interface PanelProps extends ViewProps {}
 
 const Panel = forwardRef<View, PanelProps>(({ style, ...props }, ref) => {
   const {
-    debuggerState: { position },
-    dimensions: { width: screenWidth, height: screenHeight },
+    debuggerState: { position, detailsData },
   } = useContext(MainContext)!;
 
   const containerStyle = useMemo(
-    () => [styles.container, { [position]: 0, height: Math.min(screenWidth, screenHeight) * 0.75 }],
-    [position, screenWidth, screenHeight],
+    () => [
+      styles.container,
+      { [position]: 0, width: refs.panelSize.current?.x, height: refs.panelSize.current?.y },
+    ],
+    [position],
   );
 
+  useEffect(() => {
+    switch (detailsData?.type) {
+      case DebuggerPanel.Network:
+        refs.header.current?.setCurrentIndex(HeaderState.Network);
+        refs.panel.current?.setCurrentIndex(PanelState.NetworkDetail);
+        break;
+      case DebuggerPanel.Console:
+        refs.header.current?.setCurrentIndex(HeaderState.Console);
+        refs.panel.current?.setCurrentIndex(PanelState.ConsoleDetail);
+        break;
+    }
+  }, [detailsData?.type]);
+
   return (
-    <View style={[containerStyle, style]} ref={ref} {...props}>
+    <Animated.View style={[containerStyle, style]} ref={ref} {...props}>
       <SafeAreaProvider>
+        {position === 'bottom' && <Handle />}
         {position === 'top' && <SafeArea inset="top" />}
 
         <Header />
@@ -39,9 +57,10 @@ const Panel = forwardRef<View, PanelProps>(({ style, ...props }, ref) => {
           <LogMessageDetails />
         </IndexedStack>
 
+        {position === 'top' && <Handle />}
         {position === 'bottom' && <SafeArea inset="bottom" />}
       </SafeAreaProvider>
-    </View>
+    </Animated.View>
   );
 });