react-native-inapp-inspector 2.3.8 → 2.3.10

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

@@ -39,99 +39,53 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
-const useAccordion_1 = __importDefault(require("../../customHooks/useAccordion"));
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
 const DomainHeader_1 = __importDefault(require("../DomainHeader"));
 const LogCard_1 = __importDefault(require("../LogCard"));
 const EmptyState_1 = __importDefault(require("../EmptyState"));
 const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
+const NetworkFilterModal_1 = __importDefault(require("./NetworkFilterModal"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const constants_1 = require("../../constants");
 const i18n_1 = require("../../i18n");
 const NetworkIcons_1 = require("../NetworkIcons");
-const STATUS_META = {
-    ALL: { color: AppColors_1.AppColors.grayText, Icon: NetworkIcons_1.LayersIcon },
-    '2xx': { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon },
-    '200': { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon },
-    '3xx': { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon },
-    '300': { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon },
-    '4xx': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
-    '400': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
-    '404': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
-    '5xx': { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
-    '500': { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
-    Failed: { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
-};
-const getStatusMeta = (filter) => {
-    if (STATUS_META[filter])
-        return STATUS_META[filter];
-    const num = parseInt(filter, 10);
-    if (!isNaN(num)) {
-        if (num >= 200 && num < 300)
-            return { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon };
-        if (num >= 300 && num < 400)
-            return { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon };
-        if (num >= 400 && num < 500)
-            return { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon };
-        if (num >= 500)
-            return { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon };
-    }
-    if (filter.startsWith('2'))
-        return { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon };
-    if (filter.startsWith('3'))
-        return { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon };
-    if (filter.startsWith('4'))
-        return { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon };
-    if (filter.startsWith('5'))
-        return { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon };
-    return { color: AppColors_1.AppColors.grayText, Icon: NetworkIcons_1.LayersIcon };
-};
-const FilterChip = react_1.default.memo(({ label, color, Icon, badge, active, onPress, }) => {
-    const iconColor = active ? color : AppColors_1.AppColors.grayTextWeak;
-    return (<TouchableScale_1.default style={styles_1.default.statusFilterWrap} onPress={onPress} hitSlop={10}>
-      <react_native_1.View style={[
-            styles_1.default.statusFilterChip,
-            {
-                paddingHorizontal: 9,
-                paddingVertical: 5,
-                borderRadius: 7,
-                borderWidth: 1,
-                borderColor: active ? color : `${AppColors_1.AppColors.grayBorderSecondary}`,
-                backgroundColor: active ? `${color}14` : AppColors_1.AppColors.grayBackground,
-            },
-            active && {
-                shadowColor: color,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.2,
-                shadowRadius: 2,
-                elevation: 1.5,
-            },
-        ]}>
-        {badge != null ? (<react_native_1.View style={[
-                styles_1.default.methodBadgeMini,
-                { backgroundColor: badge },
-            ]}/>) : (Icon && (<Icon color={iconColor} size={13}/>))}
-        <react_native_1.Text numberOfLines={1} style={[
-            styles_1.default.statusFilterText,
-            {
-                color: active ? color : AppColors_1.AppColors.grayText,
-                fontFamily: active ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interMedium,
-            },
-        ]}>
-          {label}
-        </react_native_1.Text>
-      </react_native_1.View>
-    </TouchableScale_1.default>);
-});
 const NetworkTab = react_1.default.memo(() => {
     const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = (0, InspectorContext_1.useInspector)();
     const { t } = (0, i18n_1.useTranslation)();
-    const filtersAccordion = (0, useAccordion_1.default)(false, 300, 260);
     const apisListRef = (0, react_1.useRef)(null);
+    const [isFilterModalOpen, setIsFilterModalOpen] = react_1.default.useState(false);
     const [isSearchFocused, setIsSearchFocused] = react_1.default.useState(false);
+    const modalFilterState = (0, react_1.useMemo)(() => ({
+        statusCodes: statusFilters.size > 0 ? new Set(statusFilters) : new Set(['all']),
+        methods: methodFilters.size > 0 ? new Set(methodFilters) : new Set(['all']),
+        latency: 'all',
+        protocol: 'all',
+        sortBy: sortOrder === 'newest' ? 'time_desc' : 'time_asc',
+    }), [statusFilters, methodFilters, sortOrder]);
+    const handleApplyNetworkFilters = (0, react_1.useCallback)((newFilters) => {
+        if (newFilters.statusCodes.has('all') ||
+            newFilters.statusCodes.size === 0) {
+            setStatusFilters(new Set());
+        }
+        else {
+            setStatusFilters(new Set(newFilters.statusCodes));
+        }
+        if (newFilters.methods.has('all') || newFilters.methods.size === 0) {
+            setMethodFilters(new Set());
+        }
+        else {
+            setMethodFilters(new Set([...newFilters.methods].map(m => m)));
+        }
+        if (newFilters.sortBy === 'time_asc') {
+            setSortOrder('oldest');
+        }
+        else {
+            setSortOrder('newest');
+        }
+    }, [setStatusFilters, setMethodFilters, setSortOrder]);
     const quickCounts = (0, react_1.useMemo)(() => {
         let errorCount = 0;
         let successCount = 0;
@@ -558,10 +512,12 @@ const NetworkTab = react_1.default.memo(() => {
 
                 <TouchableScale_1.default style={[
                 styles_1.default.toolbarBtn,
-                filtersAccordion.isOpen &&
-                    styles_1.default.toolbarBtnActive,
-            ]} onPress={filtersAccordion.toggleOpen} hitSlop={6}>
-                  <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
+                (statusFilters.size > 0 || methodFilters.size > 0) && {
+                    borderColor: AppColors_1.AppColors.purple,
+                    backgroundColor: `${AppColors_1.AppColors.purple}15`,
+                },
+            ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
+                  <NetworkIcons_1.FilterIcon color={statusFilters.size > 0 || methodFilters.size > 0
                 ? AppColors_1.AppColors.purple
                 : AppColors_1.AppColors.grayTextStrong} size={16}/>
                   {(statusFilters.size > 0 ||
@@ -723,6 +679,51 @@ const NetworkTab = react_1.default.memo(() => {
                       </react_native_1.View>
                     </TouchableScale_1.default>);
             })}
+
+                <TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)}>
+                  <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingHorizontal: 10,
+                paddingVertical: 4.5,
+                borderRadius: 8,
+                backgroundColor: statusFilters.size > 0 || methodFilters.size > 0
+                    ? `${AppColors_1.AppColors.purple}20`
+                    : AppColors_1.AppColors.grayBackground,
+                borderWidth: 1,
+                borderColor: statusFilters.size > 0 || methodFilters.size > 0
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayBorderSecondary,
+                gap: 5,
+            }}>
+                    <NetworkIcons_1.FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+                ? AppColors_1.AppColors.purple
+                : AppColors_1.AppColors.grayText}/>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10.5,
+                color: statusFilters.size > 0 || methodFilters.size > 0
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayText,
+            }}>
+                      More Filters
+                    </react_native_1.Text>
+                    {(statusFilters.size > 0 || methodFilters.size > 0) && (<react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.purple,
+                    paddingHorizontal: 4.5,
+                    paddingVertical: 1,
+                    borderRadius: 6,
+                }}>
+                        <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: AppColors_1.AppColors.white,
+                }}>
+                          {statusFilters.size + methodFilters.size}
+                        </react_native_1.Text>
+                      </react_native_1.View>)}
+                  </react_native_1.View>
+                </TouchableScale_1.default>
               </react_native_1.ScrollView>
             </react_native_1.View>
 
@@ -871,86 +872,24 @@ const NetworkTab = react_1.default.memo(() => {
                 </TouchableScale_1.default>
               </react_native_1.View>)}
 
-            <react_native_1.Animated.View style={[
-                filtersAccordion.bodyStyle,
-                { overflow: 'hidden' },
-            ]}>
-              <react_native_1.View style={styles_1.default.filtersContainer}>
-                <react_native_1.Text style={styles_1.default.filtersHeading}>
-                  STATUS
-                </react_native_1.Text>
-                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
-                  {constants_1.STATUS_FILTERS.map(filter => {
-                const isAll = filter === 'ALL';
-                const active = isAll
-                    ? statusFilters.size === 0
-                    : statusFilters.has(filter);
-                const meta = getStatusMeta(filter);
-                return (<FilterChip key={filter} label={filter} color={meta.color} Icon={meta.Icon} active={active} onPress={() => {
-                        if (isAll) {
-                            setStatusFilters(new Set());
-                        }
-                        else {
-                            setStatusFilters(prev => {
-                                const next = new Set(prev);
-                                next.has(filter)
-                                    ? next.delete(filter)
-                                    : next.add(filter);
-                                return next;
-                            });
-                        }
-                    }}/>);
-            })}
-                </react_native_1.ScrollView>
-
-                <react_native_1.Text style={[
-                styles_1.default.filtersHeading,
-                { marginTop: 16 },
-            ]}>
-                  METHOD
-                </react_native_1.Text>
-                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
-                  {availableMethods.map(filter => {
-                const isAll = filter === 'ALL';
-                const active = isAll
-                    ? methodFilters.size === 0
-                    : methodFilters.has(filter);
-                const methodColor = constants_1.METHOD_COLORS[filter] ??
-                    constants_1.METHOD_COLORS.ALL;
-                return (<FilterChip key={filter} label={filter} color={methodColor} badge={methodColor} active={active} onPress={() => {
-                        if (isAll) {
-                            setMethodFilters(new Set());
-                        }
-                        else {
-                            setMethodFilters(prev => {
-                                const next = new Set(prev);
-                                next.has(filter)
-                                    ? next.delete(filter)
-                                    : next.add(filter);
-                                return next;
-                            });
-                        }
-                    }}/>);
-            })}
-                </react_native_1.ScrollView>
-              </react_native_1.View>
-            </react_native_1.Animated.View>
-
             {(search ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0) && (<react_native_1.Text style={styles_1.default.resultCount}>
+                methodFilters.size > 0 ||
+                quickFilter !== 'all') && (<react_native_1.Text style={styles_1.default.resultCount}>
                 {filteredLogs.length === logs.length
                     ? `${logs.length} requests`
                     : `${filteredLogs.length} of ${logs.length} filtered requests`}
               </react_native_1.Text>)}
           </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0} searchQuery={search} customTitle={search.length > 0
+                methodFilters.size > 0 ||
+                quickFilter !== 'all'} searchQuery={search} customTitle={search.length > 0
                 ? 'No matching API requests'
                 : 'No network activity'} onClearSearch={() => {
                 setSearch('');
                 setStatusFilters(new Set());
                 setMethodFilters(new Set());
+                setQuickFilter('all');
                 setSearchScope('all');
             }}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter_1.default count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
             styles_1.default.listContent,
@@ -978,6 +917,9 @@ const NetworkTab = react_1.default.memo(() => {
           <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
         </react_native_1.View>
       </TouchableScale_1.default>
+
+      
+      <NetworkFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>
     </react_native_1.View>);
 });
 exports.default = NetworkTab;

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

@@ -128,7 +128,7 @@ const NpmUpdateToast = () => {
         react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
         handleDismiss();
     };
-    if (!showUpdateToast || !visible || !updateAvailable || !latestNpmVersion)
+    if (typeof __DEV__ === 'undefined' || !__DEV__ || !showUpdateToast || !visible || !updateAvailable || !latestNpmVersion)
         return null;
     const progressWidth = progressAnim.interpolate({
         inputRange: [0, 1],

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

@@ -43,6 +43,7 @@ const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const CopyButton_1 = __importDefault(require("../CopyButton"));
 const HighlightText_1 = __importDefault(require("../HighlightText"));
 const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
+const FeatureUnderDevNotice_1 = __importDefault(require("./FeatureUnderDevNotice"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const i18n_1 = require("../../i18n");
@@ -394,6 +395,8 @@ const PerformanceTab = react_1.default.memo(() => {
         </TouchableScale_1.default>
       </react_native_1.View>
 
+      <FeatureUnderDevNotice_1.default featureName="Performance & FPS Profiler"/>
+
       
       <react_native_1.View style={perfStyles.categoryScrollWrapper}>
         <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={perfStyles.categoryScrollView} contentContainerStyle={perfStyles.categoryScroll}>

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

@@ -98,6 +98,7 @@ const getOriginBadge = (originType) => {
 const ReduxTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, setSelectedReduxSlice, } = (0, InspectorContext_1.useInspector)();
+    const listRef = (0, react_1.useRef)(null);
     const [sortMode, setSortMode] = (0, react_1.useState)('latest');
     const [isReduxPaused, setIsReduxPaused] = (0, react_1.useState)(!(0, reduxLogger_1.getReduxAutoRefresh)());
     const handleTogglePause = (0, react_1.useCallback)(() => {
@@ -491,10 +492,32 @@ const ReduxTab = react_1.default.memo(() => {
       </react_native_1.View>
 
       
-      <react_native_1.FlatList data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter_1.default count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
+      <react_native_1.FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter_1.default count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
             reduxTabStyles.listContent,
             filteredSlices.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
+
+      <TouchableScale_1.default onPress={() => {
+            try {
+                listRef.current?.scrollToOffset({
+                    offset: 0,
+                    animated: true,
+                });
+            }
+            catch {
+                try {
+                    listRef.current?.scrollToIndex({
+                        index: 0,
+                        animated: true,
+                    });
+                }
+                catch { }
+            }
+        }} hitSlop={12} style={styles_1.default.scrollTopBtn}>
+        <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
+          <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
+        </react_native_1.View>
+      </TouchableScale_1.default>
     </react_native_1.View>);
 });
 const reduxTabStyles = react_native_1.StyleSheet.create({

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

@@ -313,11 +313,12 @@ const SettingsPanel = () => {
         }}>
       <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 14 }} showsVerticalScrollIndicator={false}>
         
+        
         <react_native_1.View style={{
-            flexDirection: 'row',
             backgroundColor: AppColors_1.AppColors.primaryLight,
-            borderRadius: 12,
-            padding: 4,
+            borderRadius: 13,
+            paddingVertical: 4,
+            paddingHorizontal: 4,
             borderWidth: 1,
             borderColor: AppColors_1.AppColors.grayBorderSecondary,
             shadowColor: AppColors_1.AppColors.black,
@@ -325,95 +326,79 @@ const SettingsPanel = () => {
             shadowRadius: 4,
             shadowOffset: { width: 0, height: 2 },
         }}>
-          <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.modulesAndTools')} accessibilityState={{ selected: settingsActiveSubTab === 'module' }} onPress={() => {
-            (0, InspectorContext_1.animateNextLayout)();
-            setSettingsActiveSubTab('module');
-        }} style={{
-            flex: 1,
-            paddingVertical: 9,
+          <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
             flexDirection: 'row',
             alignItems: 'center',
-            justifyContent: 'center',
             gap: 6,
-            borderRadius: 9,
-            backgroundColor: settingsActiveSubTab === 'module'
-                ? AppColors_1.AppColors.purple
-                : 'transparent',
-        }}>
-            <NetworkIcons_1.LayersIcon color={settingsActiveSubTab === 'module'
-            ? AppColors_1.AppColors.white
-            : AppColors_1.AppColors.grayText} size={13}/>
-            <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 12.5,
-            lineHeight: 16,
-            color: settingsActiveSubTab === 'module'
-                ? AppColors_1.AppColors.white
-                : AppColors_1.AppColors.grayText,
-        }}>
-              {t('settings.modulesAndTools')}
-            </react_native_1.Text>
-          </TouchableScale_1.default>
-
-          <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.uiPreferences')} accessibilityState={{ selected: settingsActiveSubTab === 'ui' }} onPress={() => {
-            (0, InspectorContext_1.animateNextLayout)();
-            setSettingsActiveSubTab('ui');
-        }} style={{
-            flex: 1,
-            paddingVertical: 9,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 5,
-            borderRadius: 9,
-            backgroundColor: settingsActiveSubTab === 'ui'
-                ? AppColors_1.AppColors.purple
-                : 'transparent',
-        }}>
-            <NetworkIcons_1.ScreenIcon color={settingsActiveSubTab === 'ui'
-            ? AppColors_1.AppColors.white
-            : AppColors_1.AppColors.grayText} size={13}/>
-            <react_native_1.Text numberOfLines={1} style={{
-            fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 12,
-            lineHeight: 16,
-            color: settingsActiveSubTab === 'ui'
-                ? AppColors_1.AppColors.white
-                : AppColors_1.AppColors.grayText,
-        }}>
-              {t('settings.uiPreferences')}
-            </react_native_1.Text>
-          </TouchableScale_1.default>
-
-          <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.ramLimits')} accessibilityState={{ selected: settingsActiveSubTab === 'limits' }} onPress={() => {
-            (0, InspectorContext_1.animateNextLayout)();
-            setSettingsActiveSubTab('limits');
-        }} style={{
-            flex: 1,
-            paddingVertical: 9,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 5,
-            borderRadius: 9,
-            backgroundColor: settingsActiveSubTab === 'limits'
-                ? AppColors_1.AppColors.purple
-                : 'transparent',
-        }}>
-            <NetworkIcons_1.BrainIcon color={settingsActiveSubTab === 'limits'
-            ? AppColors_1.AppColors.white
-            : AppColors_1.AppColors.grayText} size={13}/>
-            <react_native_1.Text numberOfLines={1} style={{
-            fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 12,
-            lineHeight: 16,
-            color: settingsActiveSubTab === 'limits'
-                ? AppColors_1.AppColors.white
-                : AppColors_1.AppColors.grayText,
+            paddingHorizontal: 2,
         }}>
-              {t('settings.ramLimits')}
-            </react_native_1.Text>
-          </TouchableScale_1.default>
+            {[
+            {
+                key: 'module',
+                label: t('settings.modulesAndTools', 'Modules & Tools'),
+                Icon: NetworkIcons_1.LayersIcon,
+                badge: `${allModules.filter(m => stagedTabVisibility?.[m.key] || m.key === 'apis').length}/${allModules.length}`,
+            },
+            {
+                key: 'ui',
+                label: t('settings.uiPreferences', 'UI Preferences'),
+                Icon: NetworkIcons_1.ScreenIcon,
+            },
+            {
+                key: 'limits',
+                label: t('settings.ramLimits', 'RAM & Limits'),
+                Icon: NetworkIcons_1.BrainIcon,
+            },
+        ].map(tab => {
+            const isActive = settingsActiveSubTab === tab.key;
+            const IconComp = tab.Icon;
+            return (<TouchableScale_1.default key={tab.key} accessible={true} accessibilityRole="tab" accessibilityLabel={tab.label} accessibilityState={{ selected: isActive }} onPress={() => {
+                    (0, InspectorContext_1.animateNextLayout)();
+                    setSettingsActiveSubTab(tab.key);
+                }} style={{
+                    paddingVertical: 8,
+                    paddingHorizontal: 14,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 6,
+                    borderRadius: 9,
+                    backgroundColor: isActive
+                        ? AppColors_1.AppColors.purple
+                        : 'transparent',
+                }}>
+                  <IconComp color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={13}/>
+                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 12.5,
+                    lineHeight: 16,
+                    color: isActive
+                        ? AppColors_1.AppColors.white
+                        : AppColors_1.AppColors.grayText,
+                }}>
+                    {tab.label}
+                  </react_native_1.Text>
+                  {tab.badge && (<react_native_1.View style={{
+                        backgroundColor: isActive
+                            ? 'rgba(255,255,255,0.25)'
+                            : `${AppColors_1.AppColors.purple}18`,
+                        paddingHorizontal: 5.5,
+                        paddingVertical: 1,
+                        borderRadius: 10,
+                    }}>
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 9.5,
+                        color: isActive
+                            ? AppColors_1.AppColors.white
+                            : AppColors_1.AppColors.purple,
+                    }}>
+                        {tab.badge}
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
+                </TouchableScale_1.default>);
+        })}
+          </react_native_1.ScrollView>
         </react_native_1.View>
 
         {settingsActiveSubTab === 'module' && (<react_native_1.View style={{ gap: 12 }}>

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

@@ -40,6 +40,7 @@ exports.StorageTab = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const i18n_1 = require("../../i18n");
@@ -134,6 +135,7 @@ const StorageEntryCard = react_1.default.memo(function StorageEntryCard({ entry,
 });
 exports.StorageTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
+    const listRef = (0, react_1.useRef)(null);
     const [activeDriver, setActiveDriver] = (0, react_1.useState)('asyncStorage');
     const [activeMMKVId, setActiveMMKVId] = (0, react_1.useState)('default');
     const [entries, setEntries] = (0, react_1.useState)([]);
@@ -399,19 +401,43 @@ exports.StorageTab = react_1.default.memo(() => {
       {isLoading ? (<react_native_1.View style={styles.loadingContainer}>
           <react_native_1.ActivityIndicator size="small" color={AppColors_1.AppColors.purple}/>
           <react_native_1.Text style={styles.loadingText}>Loading storage entries...</react_native_1.Text>
-        </react_native_1.View>) : (<react_native_1.FlatList data={filteredEntries} keyExtractor={item => item.key} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={react_native_1.Platform.OS === 'android'} style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false} ListEmptyComponent={<react_native_1.View style={styles.emptyContainer}>
-              <react_native_1.View style={styles.emptyIconWrap}>
-                <NetworkIcons_1.DatabaseIcon size={28} color={AppColors_1.AppColors.grayTextWeak}/>
-              </react_native_1.View>
-              <react_native_1.Text style={styles.emptyTitle}>
-                {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
-              </react_native_1.Text>
-              <react_native_1.Text style={styles.emptySubtitle}>
-                {search
+        </react_native_1.View>) : (<>
+          <react_native_1.FlatList ref={listRef} data={filteredEntries} keyExtractor={item => item.key} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={react_native_1.Platform.OS === 'android'} style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false} ListEmptyComponent={<react_native_1.View style={styles.emptyContainer}>
+                <react_native_1.View style={styles.emptyIconWrap}>
+                  <NetworkIcons_1.DatabaseIcon size={28} color={AppColors_1.AppColors.grayTextWeak}/>
+                </react_native_1.View>
+                <react_native_1.Text style={styles.emptyTitle}>
+                  {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles.emptySubtitle}>
+                  {search
                     ? 'Try modifying your search query'
                     : `Storage is auto-detected. Tap "+ Add" above to create your first ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} key!`}
-              </react_native_1.Text>
-            </react_native_1.View>} ListFooterComponent={<react_native_1.View style={{ height: 60 }}/>}/>)}
+                </react_native_1.Text>
+              </react_native_1.View>} ListFooterComponent={<react_native_1.View style={{ height: 60 }}/>}/>
+
+          <TouchableScale_1.default onPress={() => {
+                try {
+                    listRef.current?.scrollToOffset({
+                        offset: 0,
+                        animated: true,
+                    });
+                }
+                catch {
+                    try {
+                        listRef.current?.scrollToIndex({
+                            index: 0,
+                            animated: true,
+                        });
+                    }
+                    catch { }
+                }
+            }} hitSlop={12} style={styles_1.default.scrollTopBtn}>
+            <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
+              <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
+            </react_native_1.View>
+          </TouchableScale_1.default>
+        </>)}
 
       
       <react_native_1.Modal visible={modalVisible} transparent animationType="fade" onRequestClose={() => setModalVisible(false)}>

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

@@ -68,6 +68,8 @@ const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
     const fadeAnim = (0, react_1.useState)(new react_native_1.Animated.Value(0))[0];
     const scaleAnim = (0, react_1.useState)(new react_native_1.Animated.Value(0.92))[0];
     const installCommand = `npm install react-native-inapp-inspector@latest`;
+    if (typeof __DEV__ === 'undefined' || !__DEV__)
+        return null;
     (0, react_1.useEffect)(() => {
         if (visible) {
             setCopied(false);