react-native-inapp-inspector 1.1.28 → 1.1.31

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

@@ -10,7 +10,7 @@ import EndOfListFooter from '../EndOfListFooter';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
-import { SearchIcon, ClearIcon, SortArrowIcon, TrashIcon, LayersIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, AnalyticsIcon, HeaderPauseIcon, } from '../NetworkIcons';
+import { SearchIcon, ClearIcon, SortArrowIcon, TrashIcon, LayersIcon, CheckIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, AnalyticsIcon, HeaderPauseIcon, } from '../NetworkIcons';
 const ConsoleTab = React.memo(() => {
     const { t } = useTranslation();
     const { logSearch, setLogSearch, logSortOrder, setLogSortOrder, handleDelete, logFilters, setLogFilters, logCounts, filteredConsoleLogs, visibleConsoleLogs, isConsolePaused, setIsConsolePaused, } = useInspector();
@@ -104,6 +104,7 @@ const ConsoleTab = React.memo(() => {
             alignItems: 'center',
             gap: 8,
         }}>
+          {/* All Filter */}
           {(() => {
             const active = logFilters.has('all');
             return (<TouchableScale onPress={() => {
@@ -111,34 +112,52 @@ const ConsoleTab = React.memo(() => {
                 }}>
                 <View style={[
                     styles.statusFilterChip,
+                    {
+                        backgroundColor: active ? AppColors.indigo600Alt : AppColors.indigo50,
+                        borderColor: active ? AppColors.indigo600 : AppColors.indigo400,
+                        borderRadius: 7,
+                    },
                     active && {
-                        borderColor: AppColors.purpleShade700,
-                        backgroundColor: AppColors.purpleTintBg,
+                        shadowColor: AppColors.indigo600Alt,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
                     },
                 ]}>
-                  {/* #7 */}
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 5,
                 }}>
-                    <LayersIcon size={12} color={active
-                    ? AppColors.purpleShade700
-                    : AppColors.grayTextStrong}/>
+                    <View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: active ? AppColors.white : AppColors.indigo400,
+                    backgroundColor: active ? AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      {active && <CheckIcon color={AppColors.indigo600Alt} size={8}/>}
+                    </View>
+                    <LayersIcon size={12} color={active ? AppColors.white : AppColors.indigo600Alt}/>
                     <Text numberOfLines={1} style={[
                     styles.statusFilterText,
-                    active && {
-                        color: AppColors.purpleShade700,
+                    {
+                        color: active ? AppColors.white : AppColors.indigo600Alt,
                         fontFamily: AppFonts.interBold,
                     },
                 ]}>
-                      All ({logCounts.all})
+                      {t('common.all', 'All')} ({logCounts.all})
                     </Text>
                   </View>
                 </View>
               </TouchableScale>);
         })()}
 
+          {/* User Log / Standard Log Filter */}
           {(() => {
             const active = logFilters.has('user-log');
             return (<TouchableScale onPress={() => {
@@ -155,34 +174,52 @@ const ConsoleTab = React.memo(() => {
                 }}>
                 <View style={[
                     styles.statusFilterChip,
+                    {
+                        backgroundColor: active ? AppColors.teal600 : AppColors.teal100,
+                        borderColor: active ? AppColors.teal600 : AppColors.teal400,
+                        borderRadius: 7,
+                    },
                     active && {
-                        borderColor: AppColors.slate500,
-                        backgroundColor: AppColors.slate100,
+                        shadowColor: AppColors.teal600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
                     },
                 ]}>
-                  {/* #7 */}
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 5,
                 }}>
-                    <UserIcon size={12} color={active
-                    ? AppColors.slate700
-                    : AppColors.grayTextStrong}/>
+                    <View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: active ? AppColors.white : AppColors.teal400,
+                    backgroundColor: active ? AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      {active && <CheckIcon color={AppColors.teal600} size={8}/>}
+                    </View>
+                    <UserIcon size={12} color={active ? AppColors.white : AppColors.teal600}/>
                     <Text numberOfLines={1} style={[
                     styles.statusFilterText,
-                    active && {
-                        color: AppColors.slate700,
+                    {
+                        color: active ? AppColors.white : AppColors.teal600,
                         fontFamily: AppFonts.interBold,
                     },
                 ]}>
-                      User Log ({logCounts['user-log']})
+                      {t('console.log', 'Log')} ({logCounts['user-log']})
                     </Text>
                   </View>
                 </View>
               </TouchableScale>);
         })()}
 
+          {/* Info Filter */}
           {(() => {
             const active = logFilters.has('info');
             return (<TouchableScale onPress={() => {
@@ -199,34 +236,52 @@ const ConsoleTab = React.memo(() => {
                 }}>
                 <View style={[
                     styles.statusFilterChip,
+                    {
+                        backgroundColor: active ? AppColors.sky600 : AppColors.sky100,
+                        borderColor: active ? AppColors.blue700 : AppColors.sky400,
+                        borderRadius: 7,
+                    },
                     active && {
-                        borderColor: AppColors.purple,
-                        backgroundColor: AppColors.purpleShade50,
+                        shadowColor: AppColors.sky600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
                     },
                 ]}>
-                  {/* #7 */}
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 5,
                 }}>
-                    <InfoCircleIcon size={12} color={active
-                    ? AppColors.purple
-                    : AppColors.grayTextStrong}/>
+                    <View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: active ? AppColors.white : AppColors.sky400,
+                    backgroundColor: active ? AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      {active && <CheckIcon color={AppColors.sky600} size={8}/>}
+                    </View>
+                    <InfoCircleIcon size={12} color={active ? AppColors.white : AppColors.sky600}/>
                     <Text numberOfLines={1} style={[
                     styles.statusFilterText,
-                    active && {
-                        color: AppColors.purple,
+                    {
+                        color: active ? AppColors.white : AppColors.sky600,
                         fontFamily: AppFonts.interBold,
                     },
                 ]}>
-                      Info ({logCounts.info})
+                      {t('console.info', 'Info')} ({logCounts.info})
                     </Text>
                   </View>
                 </View>
               </TouchableScale>);
         })()}
 
+          {/* Warning Filter */}
           {(() => {
             const active = logFilters.has('warn');
             return (<TouchableScale onPress={() => {
@@ -243,36 +298,52 @@ const ConsoleTab = React.memo(() => {
                 }}>
                 <View style={[
                     styles.statusFilterChip,
+                    {
+                        backgroundColor: active ? AppColors.amber600 : AppColors.amber100,
+                        borderColor: active ? AppColors.amber700 : AppColors.amber200,
+                        borderRadius: 7,
+                    },
                     active && {
-                        borderColor: AppColors.lightOrange,
-                        backgroundColor: AppColors.warnCardBg,
+                        shadowColor: AppColors.amber600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
                     },
                 ]}>
-                  {/* #7 */}
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 5,
                 }}>
-                    <WarningTriangleIcon size={12} color={active
-                    ? AppColors.darkOrange ||
-                        AppColors.lightOrange
-                    : AppColors.grayTextStrong}/>
+                    <View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: active ? AppColors.white : AppColors.amber500,
+                    backgroundColor: active ? AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      {active && <CheckIcon color={AppColors.amber600} size={8}/>}
+                    </View>
+                    <WarningTriangleIcon size={12} color={active ? AppColors.white : AppColors.amber700}/>
                     <Text numberOfLines={1} style={[
                     styles.statusFilterText,
-                    active && {
-                        color: AppColors.darkOrange ||
-                            AppColors.lightOrange,
+                    {
+                        color: active ? AppColors.white : AppColors.amber800Warm,
                         fontFamily: AppFonts.interBold,
                     },
                 ]}>
-                      Warning ({logCounts.warn})
+                      {t('console.warning', 'Warn')} ({logCounts.warn})
                     </Text>
                   </View>
                 </View>
               </TouchableScale>);
         })()}
 
+          {/* Error Filter */}
           {(() => {
             const active = logFilters.has('error');
             return (<TouchableScale onPress={() => {
@@ -289,34 +360,52 @@ const ConsoleTab = React.memo(() => {
                 }}>
                 <View style={[
                     styles.statusFilterChip,
+                    {
+                        backgroundColor: active ? AppColors.red500 : AppColors.red100,
+                        borderColor: active ? AppColors.red600 : AppColors.errorBorder,
+                        borderRadius: 7,
+                    },
                     active && {
-                        borderColor: AppColors.errorColor,
-                        backgroundColor: AppColors.errorCardBg,
+                        shadowColor: AppColors.red500,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
                     },
                 ]}>
-                  {/* #7 */}
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 5,
                 }}>
-                    <ErrorCircleIcon size={12} color={active
-                    ? AppColors.errorColor
-                    : AppColors.grayTextStrong}/>
+                    <View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: active ? AppColors.white : AppColors.red500,
+                    backgroundColor: active ? AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      {active && <CheckIcon color={AppColors.red500} size={8}/>}
+                    </View>
+                    <ErrorCircleIcon size={12} color={active ? AppColors.white : AppColors.red500}/>
                     <Text numberOfLines={1} style={[
                     styles.statusFilterText,
-                    active && {
-                        color: AppColors.errorColor,
+                    {
+                        color: active ? AppColors.white : AppColors.redErrorText,
                         fontFamily: AppFonts.interBold,
                     },
                 ]}>
-                      Error ({logCounts.error})
+                      {t('console.error', 'Error')} ({logCounts.error})
                     </Text>
                   </View>
                 </View>
               </TouchableScale>);
         })()}
 
+          {/* Analytics Filter */}
           {(() => {
             const active = logFilters.has('analytics');
             return (<TouchableScale onPress={() => {
@@ -333,28 +422,45 @@ const ConsoleTab = React.memo(() => {
                 }}>
                 <View style={[
                     styles.statusFilterChip,
+                    {
+                        backgroundColor: active ? AppColors.violet600 : AppColors.purple100,
+                        borderColor: active ? AppColors.purple700 : AppColors.purple200,
+                        borderRadius: 7,
+                    },
                     active && {
-                        borderColor: AppColors.skyBlue,
-                        backgroundColor: `${AppColors.skyBlue}15`,
+                        shadowColor: AppColors.violet600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
                     },
                 ]}>
-                  {/* #7 */}
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 5,
                 }}>
-                    <AnalyticsIcon size={12} color={active
-                    ? AppColors.skyBlue
-                    : AppColors.grayTextStrong}/>
+                    <View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: active ? AppColors.white : AppColors.purple400,
+                    backgroundColor: active ? AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      {active && <CheckIcon color={AppColors.violet600} size={8}/>}
+                    </View>
+                    <AnalyticsIcon size={12} color={active ? AppColors.white : AppColors.purple}/>
                     <Text numberOfLines={1} style={[
                     styles.statusFilterText,
-                    active && {
-                        color: AppColors.skyBlue,
+                    {
+                        color: active ? AppColors.white : AppColors.brandPurple,
                         fontFamily: AppFonts.interBold,
                     },
                 ]}>
-                      Analytics ({logCounts.analytics})
+                      {t('tabs.analytics', 'Analytics')} ({logCounts.analytics})
                     </Text>
                   </View>
                 </View>

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

@@ -10,7 +10,7 @@ import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { LIB_VERSION } from '../../constants';
 import { getStatusColor, getAppName, getBundleIdentifier, formatTime, getSize } from '../../helpers';
-import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ChevronIcon, ClockIcon, AppleIcon, AndroidIcon, PackageBoxIcon, } from '../NetworkIcons';
+import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, } from '../NetworkIcons';
 const InspectorHeader = React.memo(() => {
     const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, activeTab, environment, selectedCrash, setSelectedCrash, } = useInspector();
     const envConfig = useMemo(() => {
@@ -101,16 +101,18 @@ const InspectorHeader = React.memo(() => {
               <WhiteBackNavigation />
             </TouchableScale>
 
-            {!isAnySelected ? (<TouchableScale onPress={() => setShowHeaderInfo(prev => !prev)} style={{
+            {!isAnySelected ? (<View style={{
                 flexDirection: 'row',
-                alignItems: 'flex-start',
-                gap: 10,
+                alignItems: 'center',
+                gap: 8,
                 flex: 1,
+                minWidth: 0,
+                marginRight: 6,
             }}>
-                <AppHeaderLogo size={46} customIcon={appIcon}/>
-                <View style={{ gap: 2, flex: 1 }}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                    <Text style={[styles.headerTitle]} numberOfLines={1}>
+                <AppHeaderLogo size={38} customIcon={appIcon}/>
+                <View style={{ gap: 2.5, flex: 1, minWidth: 0 }}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                    <Text style={[styles.headerTitle, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
                       {getAppName()}
                     </Text>
                     <View style={[
@@ -118,6 +120,9 @@ const InspectorHeader = React.memo(() => {
                 {
                     backgroundColor: envConfig.bg,
                     borderColor: envConfig.border,
+                    flexShrink: 0,
+                    paddingVertical: 1.5,
+                    marginBottom: 0,
                 },
             ]}>
                       <Text style={[
@@ -136,6 +141,7 @@ const InspectorHeader = React.memo(() => {
                 ])} style={{
                     alignItems: 'center',
                     justifyContent: 'center',
+                    flexShrink: 0,
                 }}>
                         <Animated.View style={{
                     width: 8,
@@ -149,128 +155,59 @@ const InspectorHeader = React.memo(() => {
                 }}/>
                       </Pressable>)}
                   </View>
+
+                  {/* Clean Bundle Identifier & Version Representation */}
                   <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                alignSelf: 'flex-start',
-                backgroundColor: `${AppColors.white}1A`,
-                borderRadius: 10,
-                paddingHorizontal: 8,
-                paddingVertical: 3,
-                gap: 5,
+                gap: 4.5,
+                minWidth: 0,
+            }}>
+                    <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                backgroundColor: `${AppColors.white}1F`,
+                borderRadius: 5,
+                paddingHorizontal: 6,
+                paddingVertical: 2,
+                gap: 3.5,
                 borderWidth: 1,
-                borderColor: `${AppColors.white}26`,
+                borderColor: `${AppColors.white}2E`,
+                flexShrink: 1,
+                minWidth: 0,
             }}>
+                      {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}D9`} size={9}/>) : (<AndroidIcon color={`${AppColors.white}D9`} size={9}/>)}
+                      <Text style={{
+                fontFamily: AppFonts.interMedium,
+                fontSize: 9.5,
+                color: `${AppColors.white}EB`,
+                letterSpacing: 0.1,
+                flexShrink: 1,
+            }} numberOfLines={1} ellipsizeMode="middle">
+                        {getBundleIdentifier()}
+                      </Text>
+                    </View>
+
                     <View style={{
-                width: 6,
-                height: 6,
-                borderRadius: 3,
-                backgroundColor: AppColors.liveGreen,
-            }}/>
-                    <Text style={{
+                backgroundColor: `${AppColors.white}14`,
+                borderRadius: 4,
+                paddingHorizontal: 4.5,
+                paddingVertical: 1.5,
+                borderWidth: 1,
+                borderColor: `${AppColors.white}20`,
+                flexShrink: 0,
+            }}>
+                      <Text style={{
                 fontFamily: AppFonts.interMedium,
-                fontSize: 10,
-                color: `${AppColors.white}D9`,
-                letterSpacing: 0.2,
+                fontSize: 8.5,
+                color: `${AppColors.white}B3`,
             }} numberOfLines={1}>
-                      {getBundleIdentifier()}
-                    </Text>
-                    <Animated.View style={{
-                transform: [{ rotate: showHeaderInfo ? '180deg' : '0deg' }],
-                marginLeft: 2,
-            }}>
-                      <ChevronIcon color="rgba(255,255,255,0.6)" size={12}/>
-                    </Animated.View>
+                        v{LIB_VERSION}
+                      </Text>
+                    </View>
                   </View>
-                  {showHeaderInfo && (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                    marginTop: 4,
-                }}>
-                      <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    borderRadius: 6,
-                    overflow: 'hidden',
-                    borderWidth: 1,
-                    borderColor: `${AppColors.white}2E`,
-                }}>
-                        <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3.5,
-                    paddingHorizontal: 6,
-                    paddingVertical: 2.5,
-                    backgroundColor: `${AppColors.white}47`,
-                }}>
-                          {Platform.OS === 'ios' ? (<AppleIcon color={AppColors.white} size={10}/>) : (<AndroidIcon color={AppColors.white} size={10}/>)}
-                          <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9,
-                    color: AppColors.white,
-                    letterSpacing: 0.3,
-                }}>
-                            {Platform.OS === 'ios' ? 'iOS' : 'Android'}
-                          </Text>
-                        </View>
-                        <View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2.5,
-                    backgroundColor: `${AppColors.white}1F`,
-                }}>
-                          <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 9.5,
-                    color: `${AppColors.white}EB`,
-                }}>
-                            {String(Platform.Version)}
-                          </Text>
-                        </View>
-                      </View>
-                      <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    borderRadius: 6,
-                    overflow: 'hidden',
-                    borderWidth: 1,
-                    borderColor: `${AppColors.white}2E`,
-                }}>
-                        <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3.5,
-                    paddingHorizontal: 6,
-                    paddingVertical: 2.5,
-                    backgroundColor: `${AppColors.white}47`,
-                }}>
-                          <PackageBoxIcon color={AppColors.white} size={10}/>
-                          <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9,
-                    color: AppColors.white,
-                    letterSpacing: 0.3,
-                }}>
-                            npm
-                          </Text>
-                        </View>
-                        <View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
-                    backgroundColor: `${AppColors.white}1F`,
-                }}>
-                          <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 9.5,
-                    color: `${AppColors.white}EB`,
-                }}>
-                            v{LIB_VERSION}
-                          </Text>
-                        </View>
-                      </View>
-                    </View>)}
                 </View>
-              </TouchableScale>) : null}
+              </View>) : null}
           </View>
 
           {isDetailView && (<View style={styles.headerCenter}>
@@ -334,6 +271,20 @@ const InspectorHeader = React.memo(() => {
                     : '—'}
                       </Text>
                     </View>
+                    {selected.response != null && (<View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        paddingHorizontal: 8,
+                        paddingVertical: 3,
+                        borderRadius: 20,
+                        backgroundColor: `${AppColors.white}29`,
+                    }}>
+                        <SizeIcon color={AppColors.white} size={11}/>
+                        <Text style={styles.headerSubTitle}>
+                          {getSize(selected.response)}
+                        </Text>
+                      </View>)}
                   </View>
                 </View>) : activeTab === 'analytics' && selectedEvent != null ? (<View style={styles.headerDetailCenter}>
                   <View style={styles.headerDetailRow}>