react-native-inapp-inspector 2.3.18 → 2.3.19

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

@@ -57,7 +57,7 @@ const NetworkIcons_1 = require("../NetworkIcons");
 const i18n_1 = require("../../i18n");
 const InspectorHeader = react_1.default.memo(() => {
     const { t } = (0, i18n_1.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, } = (0, InspectorContext_1.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, } = (0, InspectorContext_1.useInspector)();
     const { width: windowWidth } = (0, react_native_1.useWindowDimensions)();
     const isNarrow = windowWidth < 360;
     const isCompact = windowWidth < 400;
@@ -119,6 +119,7 @@ const InspectorHeader = react_1.default.memo(() => {
                     height: result.height,
                 };
                 setPreviewMediaItem(newItem);
+                refreshMediaCount?.().catch(() => { });
                 (0, toast_1.showToast)(t('header.screenshotCaptured'));
             }
             else {
@@ -128,7 +129,7 @@ const InspectorHeader = react_1.default.memo(() => {
         catch {
             (0, toast_1.showToast)(t('header.screenshotError'));
         }
-    }, [t]);
+    }, [refreshMediaCount, t]);
     const handleToggleVideoRecording = react_1.default.useCallback(async () => {
         try {
             if (isRecording) {
@@ -152,6 +153,7 @@ const InspectorHeader = react_1.default.memo(() => {
                         hasAudio: result.hasAudio,
                     };
                     setPreviewMediaItem(newItem);
+                    refreshMediaCount?.().catch(() => { });
                     (0, toast_1.showToast)(t('header.recordingSaved', {
                         duration: (result.durationMs / 1000).toFixed(1),
                     }));
@@ -270,7 +272,9 @@ const InspectorHeader = react_1.default.memo(() => {
           <react_native_1.View style={[
             styles_1.default.header,
             {
-                paddingHorizontal: isNarrow ? 8 : 12,
+                width: '100%',
+                justifyContent: 'space-between',
+                paddingHorizontal: isNarrow ? 10 : 14,
                 paddingVertical: isNarrow ? 6 : 8,
                 minHeight: isNarrow ? 48 : 52,
             },
@@ -279,9 +283,9 @@ const InspectorHeader = react_1.default.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_1.default onPress={() => {
                 if (isFeedbackOpen) {
@@ -1026,7 +1030,20 @@ const InspectorHeader = react_1.default.memo(() => {
                   <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
                 </TouchableScale_1.default>)}
 
-              <react_native_1.TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} style={[
+              
+              <react_native_1.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_1.default.closeButtonSquare,
+            {
+                width: buttonSize,
+                height: buttonSize,
+                borderRadius: isNarrow ? 6 : 7,
+            },
+        ]}>
+                <NetworkIcons_1.ChevronDownIcon size={isNarrow ? 14 : 16} color={AppColors_1.AppColors.white}/>
+              </react_native_1.TouchableOpacity>
+
+              
+              <react_native_1.TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} accessibilityRole="button" accessibilityLabel={t('common.close', 'Close')} style={[
             styles_1.default.closeButtonSquare,
             {
                 width: buttonSize,
@@ -1108,7 +1125,7 @@ const InspectorHeader = react_1.default.memo(() => {
 
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                 
-                <TouchableScale_1.default onPress={() => {
+                <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={t('common.clearAll')} onPress={() => {
                 react_native_1.Alert.alert(t('header.clearEverythingTitle'), t('header.clearEverythingMessage'), [
                     { text: t('common.cancel'), style: 'cancel' },
                     {
@@ -1117,16 +1134,16 @@ const InspectorHeader = react_1.default.memo(() => {
                         style: 'destructive',
                     },
                 ]);
-            }} style={{
+            }} hitSlop={10} style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 4,
-                backgroundColor: `${AppColors_1.AppColors.white}1A`,
-                paddingHorizontal: isNarrow ? 7 : 9,
+                gap: 4.5,
+                backgroundColor: `${AppColors_1.AppColors.white}24`,
+                paddingHorizontal: isNarrow ? 8 : 10,
                 paddingVertical: isNarrow ? 4 : 5,
                 borderRadius: 6,
                 borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}26`,
+                borderColor: `${AppColors_1.AppColors.white}33`,
             }}>
                   <react_native_1.Animated.View style={{
                 transform: [
@@ -1144,37 +1161,37 @@ const InspectorHeader = react_1.default.memo(() => {
                     },
                 ],
             }}>
-                    <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={isNarrow ? 11 : 12}/>
+                    <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 13}/>
                   </react_native_1.Animated.View>
                   <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interMedium,
+                fontFamily: AppFonts_1.AppFonts.interSemiBold,
                 fontSize: isNarrow ? 10 : 11,
-                color: `${AppColors_1.AppColors.white}E6`,
+                color: AppColors_1.AppColors.white,
             }}>
-                    {t('header.clear')}
+                    {t('common.clearAll')}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 
-                <TouchableScale_1.default onPress={() => {
+                <TouchableScale_1.default 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_1.AppColors.white}1A`,
-                paddingHorizontal: isNarrow ? 7 : 9,
+                gap: 4.5,
+                backgroundColor: `${AppColors_1.AppColors.white}24`,
+                paddingHorizontal: isNarrow ? 8 : 10,
                 paddingVertical: isNarrow ? 4 : 5,
                 borderRadius: 6,
                 borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}26`,
+                borderColor: `${AppColors_1.AppColors.white}33`,
             }}>
-                  <NetworkIcons_1.InfoCircleIcon color={AppColors_1.AppColors.white} size={isNarrow ? 11 : 12}/>
+                  <NetworkIcons_1.InfoCircleIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 13}/>
                   <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interMedium,
+                fontFamily: AppFonts_1.AppFonts.interSemiBold,
                 fontSize: isNarrow ? 10 : 11,
-                color: `${AppColors_1.AppColors.white}E6`,
+                color: AppColors_1.AppColors.white,
             }}>
                     {t('header.about')}
                   </react_native_1.Text>
@@ -1190,6 +1207,7 @@ const InspectorHeader = react_1.default.memo(() => {
       
       <MediaPreviewModal_1.MediaPreviewModal item={previewMediaItem} visible={!!previewMediaItem} onClose={() => setPreviewMediaItem(null)} onDelete={async (item) => {
             await capture_1.ScreenCapture.deleteMedia(item.uri);
+            refreshMediaCount?.().catch(() => { });
             setPreviewMediaItem(null);
         }} onConvertToGif={async (item) => {
             const gif = await capture_1.ScreenCapture.convertToGif(item.uri, {
@@ -1197,6 +1215,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 width: 480,
             });
             if (gif) {
+                refreshMediaCount?.().catch(() => { });
                 setPreviewMediaItem({
                     id: `anim_${gif.timestamp}.gif`,
                     type: 'gif',

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

@@ -58,6 +58,7 @@ const CrashDetail_1 = __importDefault(require("./CrashDetail"));
 const DeviceInfoTab_1 = __importDefault(require("./DeviceInfoTab"));
 const StorageTab_1 = __importDefault(require("./StorageTab"));
 const DebuggingTab_1 = __importDefault(require("./DebuggingTab"));
+const MediaGalleryTab_1 = require("./MediaGalleryTab");
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
 const NpmUpdateToast_1 = __importDefault(require("./NpmUpdateToast"));
 const NpmStarPrompt_1 = __importDefault(require("./NpmStarPrompt"));
@@ -69,7 +70,7 @@ const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
 const helpers_1 = require("../../helpers");
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, isFeedbackOpen, setIsFeedbackOpen, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
+    const { visible, isMinimized, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, isFeedbackOpen, setIsFeedbackOpen, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -102,8 +103,7 @@ const MainScreen = () => {
     return (<>
       {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
             enabled &&
-            !visible &&
-            !useNativeFab && <FabLauncher_1.default />}
+            !visible && <FabLauncher_1.default />}
       <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true} onRequestClose={closeModal}>
         <ErrorBoundary_1.default onClose={closeModal}>
           <react_native_1.View style={styles_1.default.modalBackdrop}>
@@ -136,6 +136,7 @@ const MainScreen = () => {
                       {activeTab === 'crash' && <CrashTab_1.default />}
                       {activeTab === 'device' && <DeviceInfoTab_1.default />}
                       {activeTab === 'storage' && <StorageTab_1.default />}
+                      {activeTab === 'media' && <MediaGalleryTab_1.MediaGalleryTab />}
                       {react_native_1.Platform.OS === 'android' &&
                 (0, helpers_1.isLocalDebugEnvironment)() &&
                 activeTab === 'debugging' && <DebuggingTab_1.default />}