react-native-inapp-inspector 2.3.18 → 2.3.19

package/dist/esm/components/Inspector/InspectorHeader.js

@@ -15,11 +15,11 @@ import { ScreenCapture } from '../../capture';
 import { showToast } from '../../helpers/toast';
 import { UpdateAvailableModal } from './UpdateAvailableModal';
 import { MediaPreviewModal } from './MediaPreviewModal';
-import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, BoltIcon, InfoCircleIcon, CameraIcon, VideoCameraIcon, } from '../NetworkIcons';
+import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ChevronDownIcon, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, BoltIcon, InfoCircleIcon, CameraIcon, VideoCameraIcon, } from '../NetworkIcons';
 import { useTranslation } from '../../i18n';
 const InspectorHeader = React.memo(() => {
     const { t } = useTranslation();
-    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, setSettingsActiveSubTab, isFeedbackOpen, setIsFeedbackOpen, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = useInspector();
+    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, setSettingsActiveSubTab, isFeedbackOpen, setIsFeedbackOpen, resetToDefaults, closeModal, minimizeInspector, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, refreshMediaCount, } = useInspector();
     const { width: windowWidth } = useWindowDimensions();
     const isNarrow = windowWidth < 360;
     const isCompact = windowWidth < 400;
@@ -81,6 +81,7 @@ const InspectorHeader = React.memo(() => {
                     height: result.height,
                 };
                 setPreviewMediaItem(newItem);
+                refreshMediaCount?.().catch(() => { });
                 showToast(t('header.screenshotCaptured'));
             }
             else {
@@ -90,7 +91,7 @@ const InspectorHeader = React.memo(() => {
         catch {
             showToast(t('header.screenshotError'));
         }
-    }, [t]);
+    }, [refreshMediaCount, t]);
     const handleToggleVideoRecording = React.useCallback(async () => {
         try {
             if (isRecording) {
@@ -114,6 +115,7 @@ const InspectorHeader = React.memo(() => {
                         hasAudio: result.hasAudio,
                     };
                     setPreviewMediaItem(newItem);
+                    refreshMediaCount?.().catch(() => { });
                     showToast(t('header.recordingSaved', {
                         duration: (result.durationMs / 1000).toFixed(1),
                     }));
@@ -232,7 +234,9 @@ const InspectorHeader = React.memo(() => {
           <View style={[
             styles.header,
             {
-                paddingHorizontal: isNarrow ? 8 : 12,
+                width: '100%',
+                justifyContent: 'space-between',
+                paddingHorizontal: isNarrow ? 10 : 14,
                 paddingVertical: isNarrow ? 6 : 8,
                 minHeight: isNarrow ? 48 : 52,
             },
@@ -241,9 +245,9 @@ const InspectorHeader = React.memo(() => {
             flexDirection: 'row',
             alignItems: 'center',
             gap: isNarrow ? 6 : 8,
-            flexShrink: 0,
-            flex: isAnySelected ? undefined : 1,
-            minWidth: isAnySelected ? (isNarrow ? 32 : 36) : 0,
+            flex: isDetailView ? undefined : 1,
+            flexShrink: isDetailView ? 0 : 1,
+            minWidth: 0,
         }}>
               {isAnySelected && (<TouchableScale onPress={() => {
                 if (isFeedbackOpen) {
@@ -988,7 +992,20 @@ const InspectorHeader = React.memo(() => {
                   <SettingsIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
                 </TouchableScale>)}
 
-              <TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} style={[
+              
+              <TouchableOpacity onPress={minimizeInspector || closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} accessibilityRole="button" accessibilityLabel={t('common.minimize', 'Minimize')} style={[
+            styles.closeButtonSquare,
+            {
+                width: buttonSize,
+                height: buttonSize,
+                borderRadius: isNarrow ? 6 : 7,
+            },
+        ]}>
+                <ChevronDownIcon size={isNarrow ? 14 : 16} color={AppColors.white}/>
+              </TouchableOpacity>
+
+              
+              <TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} accessibilityRole="button" accessibilityLabel={t('common.close', 'Close')} style={[
             styles.closeButtonSquare,
             {
                 width: buttonSize,
@@ -1070,7 +1087,7 @@ const InspectorHeader = React.memo(() => {
 
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                 
-                <TouchableScale onPress={() => {
+                <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={t('common.clearAll')} onPress={() => {
                 Alert.alert(t('header.clearEverythingTitle'), t('header.clearEverythingMessage'), [
                     { text: t('common.cancel'), style: 'cancel' },
                     {
@@ -1079,16 +1096,16 @@ const InspectorHeader = React.memo(() => {
                         style: 'destructive',
                     },
                 ]);
-            }} style={{
+            }} hitSlop={10} style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 4,
-                backgroundColor: `${AppColors.white}1A`,
-                paddingHorizontal: isNarrow ? 7 : 9,
+                gap: 4.5,
+                backgroundColor: `${AppColors.white}24`,
+                paddingHorizontal: isNarrow ? 8 : 10,
                 paddingVertical: isNarrow ? 4 : 5,
                 borderRadius: 6,
                 borderWidth: 1,
-                borderColor: `${AppColors.white}26`,
+                borderColor: `${AppColors.white}33`,
             }}>
                   <Animated.View style={{
                 transform: [
@@ -1106,37 +1123,37 @@ const InspectorHeader = React.memo(() => {
                     },
                 ],
             }}>
-                    <TrashIcon color={AppColors.white} size={isNarrow ? 11 : 12}/>
+                    <TrashIcon color={AppColors.white} size={isNarrow ? 12 : 13}/>
                   </Animated.View>
                   <Text style={{
-                fontFamily: AppFonts.interMedium,
+                fontFamily: AppFonts.interSemiBold,
                 fontSize: isNarrow ? 10 : 11,
-                color: `${AppColors.white}E6`,
+                color: AppColors.white,
             }}>
-                    {t('header.clear')}
+                    {t('common.clearAll')}
                   </Text>
                 </TouchableScale>
 
                 
-                <TouchableScale onPress={() => {
+                <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={t('header.about')} onPress={() => {
                 setSettingsActiveSubTab('about');
                 setSettingsPage('main');
-            }} style={{
+            }} hitSlop={10} style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 4,
-                backgroundColor: `${AppColors.white}1A`,
-                paddingHorizontal: isNarrow ? 7 : 9,
+                gap: 4.5,
+                backgroundColor: `${AppColors.white}24`,
+                paddingHorizontal: isNarrow ? 8 : 10,
                 paddingVertical: isNarrow ? 4 : 5,
                 borderRadius: 6,
                 borderWidth: 1,
-                borderColor: `${AppColors.white}26`,
+                borderColor: `${AppColors.white}33`,
             }}>
-                  <InfoCircleIcon color={AppColors.white} size={isNarrow ? 11 : 12}/>
+                  <InfoCircleIcon color={AppColors.white} size={isNarrow ? 12 : 13}/>
                   <Text style={{
-                fontFamily: AppFonts.interMedium,
+                fontFamily: AppFonts.interSemiBold,
                 fontSize: isNarrow ? 10 : 11,
-                color: `${AppColors.white}E6`,
+                color: AppColors.white,
             }}>
                     {t('header.about')}
                   </Text>
@@ -1152,6 +1169,7 @@ const InspectorHeader = React.memo(() => {
       
       <MediaPreviewModal item={previewMediaItem} visible={!!previewMediaItem} onClose={() => setPreviewMediaItem(null)} onDelete={async (item) => {
             await ScreenCapture.deleteMedia(item.uri);
+            refreshMediaCount?.().catch(() => { });
             setPreviewMediaItem(null);
         }} onConvertToGif={async (item) => {
             const gif = await ScreenCapture.convertToGif(item.uri, {
@@ -1159,6 +1177,7 @@ const InspectorHeader = React.memo(() => {
                 width: 480,
             });
             if (gif) {
+                refreshMediaCount?.().catch(() => { });
                 setPreviewMediaItem({
                     id: `anim_${gif.timestamp}.gif`,
                     type: 'gif',

package/dist/esm/components/Inspector/MainScreen.js

@@ -20,6 +20,7 @@ import CrashDetail from './CrashDetail';
 import DeviceInfoTab from './DeviceInfoTab';
 import StorageTab from './StorageTab';
 import DebuggingTab from './DebuggingTab';
+import { MediaGalleryTab } from './MediaGalleryTab';
 import SettingsPanel from './SettingsPanel';
 import NpmUpdateToast from './NpmUpdateToast';
 import NpmStarPrompt from './NpmStarPrompt';
@@ -31,7 +32,7 @@ import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
 import { isLocalDebugEnvironment } from '../../helpers';
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, isFeedbackOpen, setIsFeedbackOpen, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
+    const { visible, isMinimized, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, isFeedbackOpen, setIsFeedbackOpen, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -64,8 +65,7 @@ const MainScreen = () => {
     return (<>
       {(Platform.OS === 'ios' || Platform.OS === 'android') &&
             enabled &&
-            !visible &&
-            !useNativeFab && <FabLauncher />}
+            !visible && <FabLauncher />}
       <Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true} onRequestClose={closeModal}>
         <ErrorBoundary onClose={closeModal}>
           <View style={styles.modalBackdrop}>
@@ -98,6 +98,7 @@ const MainScreen = () => {
                       {activeTab === 'crash' && <CrashTab />}
                       {activeTab === 'device' && <DeviceInfoTab />}
                       {activeTab === 'storage' && <StorageTab />}
+                      {activeTab === 'media' && <MediaGalleryTab />}
                       {Platform.OS === 'android' &&
                 isLocalDebugEnvironment() &&
                 activeTab === 'debugging' && <DebuggingTab />}