react-native-inapp-inspector 2.0.0 → 2.0.2

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

@@ -39,13 +39,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
-const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
 const InspectorContext_1 = require("./InspectorContext");
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const styles_1 = __importStar(require("../../styles"));
+const Slider_1 = __importDefault(require("../Slider"));
+const styles_1 = require("../../styles");
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
-const constants_1 = require("../../constants");
 const settingsStore_1 = require("../../helpers/settingsStore");
 const networkLogger_1 = require("../../customHooks/networkLogger");
 const consoleLogger_1 = require("../../customHooks/consoleLogger");
@@ -60,6 +59,10 @@ const NetworkIcons_1 = require("../NetworkIcons");
 const SettingsPanel = () => {
     const { t } = (0, i18n_1.useTranslation)();
     const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = (0, InspectorContext_1.useInspector)();
+    const [stagedHeight, setStagedHeight] = (0, react_1.useState)(modalHeightPercent);
+    (0, react_1.useEffect)(() => {
+        setStagedHeight(modalHeightPercent);
+    }, [modalHeightPercent]);
     const autoRamProfile = (0, settingsStore_1.calculateRamBasedLimits)(deviceFreeRamMb);
     const isPersistent = (0, settingsStore_1.isPersistentStorageAvailable)();
     // Safe Area & Status Bar Padding for All Device Form Factors
@@ -156,638 +159,638 @@ const SettingsPanel = () => {
         });
         react_native_1.Alert.alert(t('settings.settingsSaved'), t('settings.settingsSavedDesc'));
     };
-    if (settingsPage === 'main') {
+    const [isDefaultTabDropdownOpen, setIsDefaultTabDropdownOpen] = (0, react_1.useState)(false);
+    const goBackToMain = () => {
+        (0, InspectorContext_1.animateNextLayout)();
+        setSettingsPage('main');
+    };
+    // Helper: settings row with icon + label + optional description
+    const renderSettingRow = (opts) => {
         return (<react_native_1.View style={{
-                flex: 1,
-                backgroundColor: AppColors_1.AppColors.grayBackground,
-            }}>
-        {/* Modern Floating Gradient Header */}
-        <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
-          <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
-            <react_native_1.View style={[
-                styles_1.default.header,
-                { paddingHorizontal: 16, paddingVertical: 12, gap: 12 },
-            ]}>
-              <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={t('settings.back')} onPress={() => {
-                (0, InspectorContext_1.animateNextLayout)();
-                setSettingsPage(null);
-                switchActiveTab('apis');
-            }} hitSlop={12} style={{
-                padding: 8,
-                borderRadius: 10,
-                backgroundColor: `${AppColors_1.AppColors.white}26`,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}18`,
+                paddingVertical: 12,
+                borderBottomWidth: opts.isLast ? 0 : 1,
+                borderBottomColor: AppColors_1.AppColors.dividerColor,
             }}>
-                <NetworkIcons_1.WhiteBackNavigation color={AppColors_1.AppColors.white} size={16}/>
-              </TouchableScale_1.default>
-
-              <react_native_1.View style={{ flex: 1 }}>
-                <react_native_1.View style={{
+        <TouchableScale_1.default disabled={!opts.onPress} onPress={opts.onPress} style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 8,
-            }}>
-                  <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 17,
-                color: AppColors_1.AppColors.white,
-                letterSpacing: -0.3,
-                lineHeight: 22,
-            }}>
-                    {t('settings.mainTitle')}
-                  </react_native_1.Text>
-                  <react_native_1.View style={{
-                backgroundColor: `${AppColors_1.AppColors.white}26`,
-                paddingHorizontal: 7,
-                paddingVertical: 2,
-                borderRadius: 12,
-            }}>
-                    <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 10,
-                color: AppColors_1.AppColors.white,
-                lineHeight: 13,
-            }}>
-                      {stagedActiveCount}/{allModules.length} Active
-                    </react_native_1.Text>
-                  </react_native_1.View>
-                </react_native_1.View>
-                <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interRegular,
-                fontSize: 11,
-                color: `${AppColors_1.AppColors.white}CC`,
-                marginTop: 2,
-                lineHeight: 15,
+                gap: 12,
             }}>
-                  {t('settings.mainSubtitle')}
-                </react_native_1.Text>
-              </react_native_1.View>
-
-              <react_native_1.View style={{
-                backgroundColor: `${AppColors_1.AppColors.white}22`,
-                paddingHorizontal: 8,
-                paddingVertical: 4,
-                borderRadius: 8,
+          <react_native_1.View style={{
+                width: 36,
+                height: 36,
+                borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
                 borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}1A`,
+                borderColor: `${AppColors_1.AppColors.purple}2E`,
+                alignItems: 'center',
+                justifyContent: 'center',
             }}>
-                <react_native_1.Text style={{
+            {opts.icon}
+          </react_native_1.View>
+          <react_native_1.View style={{ flex: 1 }}>
+            <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 10.5,
-                color: AppColors_1.AppColors.white,
-                lineHeight: 14,
+                fontSize: 14,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
             }}>
-                  v{constants_1.LIB_VERSION}
-                </react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.View>
+              {opts.label}
+            </react_native_1.Text>
+            {opts.description ? (<react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    lineHeight: 15,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                {opts.description}
+              </react_native_1.Text>) : null}
           </react_native_1.View>
-        </react_native_linear_gradient_1.default>
-
-        <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 14 }} showsVerticalScrollIndicator={false}>
+          {opts.right || null}
+        </TouchableScale_1.default>
+        {opts.numericInput && (<react_native_1.View style={{ marginTop: 10, gap: 6 }}>
+            <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                    paddingHorizontal: 12,
+                    paddingVertical: 4,
+                }}>
+              <react_native_1.TextInput style={{
+                    flex: 1,
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 14,
+                    lineHeight: 18,
+                    color: AppColors_1.AppColors.primaryBlack,
+                    paddingVertical: 6,
+                }} value={String(opts.numericInput.value || '')} onChangeText={text => {
+                    const num = parseInt(text.replace(/[^0-9]/g, ''), 10);
+                    if (!isNaN(num)) {
+                        const clamped = Math.max(opts.numericInput?.min ?? 1, Math.min(opts.numericInput?.max ?? 10000, num));
+                        opts.numericInput?.onChange(clamped);
+                    }
+                }} keyboardType={opts.numericInput.keyboardType ?? 'number-pad'} placeholder={opts.numericInput.placeholder} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} maxLength={6} selectTextOnFocus/>
+              <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.purple,
+                    marginLeft: 6,
+                }}>
+                MAX
+              </react_native_1.Text>
+            </react_native_1.View>
+            {opts.numericInput.min !== undefined || opts.numericInput.max !== undefined ? (<react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 10,
+                        lineHeight: 13,
+                        color: AppColors_1.AppColors.grayTextWeak,
+                    }}>
+                Range: {opts.numericInput.min ?? 1} - {opts.numericInput.max ?? '∞'}
+              </react_native_1.Text>) : null}
+          </react_native_1.View>)}
+        {opts.picker && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    padding: 2.5,
+                    marginTop: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                }}>
+            {opts.picker.options.map(opt => {
+                    const isActive = opts.picker.selectedValue === opt;
+                    return (<TouchableScale_1.default key={String(opt)} onPress={() => opts.picker.onSelect(opt)} style={{
+                            flex: 1,
+                            paddingVertical: 6,
+                            alignItems: 'center',
+                            borderRadius: 6,
+                            backgroundColor: isActive
+                                ? AppColors_1.AppColors.purple
+                                : 'transparent',
+                        }}>
+                  <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11,
+                            lineHeight: 14,
+                            color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
+                        }}>
+                    {opts.picker.formatLabel
+                            ? opts.picker.formatLabel(opt)
+                            : opt}
+                  </react_native_1.Text>
+                </TouchableScale_1.default>);
+                })}
+          </react_native_1.View>)}
+      </react_native_1.View>);
+    };
+    const renderMainSettingsContent = () => (<react_native_1.View style={{
+            flex: 1,
+            backgroundColor: AppColors_1.AppColors.grayBackground,
+        }}>
+      <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 14 }} showsVerticalScrollIndicator={false}>
           {/* Segmented Top Navigation Sub-Tabs */}
           <react_native_1.View style={{
-                flexDirection: 'row',
-                backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderRadius: 12,
-                padding: 4,
-                borderWidth: 1,
-                borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                shadowColor: AppColors_1.AppColors.black,
-                shadowOpacity: 0.04,
-                shadowRadius: 4,
-                shadowOffset: { width: 0, height: 2 },
-            }}>
+            flexDirection: 'row',
+            backgroundColor: AppColors_1.AppColors.primaryLight,
+            borderRadius: 12,
+            padding: 4,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.grayBorderSecondary,
+            shadowColor: AppColors_1.AppColors.black,
+            shadowOpacity: 0.04,
+            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,
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 6,
-                borderRadius: 9,
-                backgroundColor: settingsActiveSubTab === 'module'
-                    ? AppColors_1.AppColors.purple
-                    : 'transparent',
-            }}>
+            (0, InspectorContext_1.animateNextLayout)();
+            setSettingsActiveSubTab('module');
+        }} style={{
+            flex: 1,
+            paddingVertical: 9,
+            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}/>
+            ? 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,
-            }}>
+            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: 6,
-                borderRadius: 9,
-                backgroundColor: settingsActiveSubTab === 'ui'
-                    ? AppColors_1.AppColors.purple
-                    : 'transparent',
-            }}>
+            (0, InspectorContext_1.animateNextLayout)();
+            setSettingsActiveSubTab('ui');
+        }} style={{
+            flex: 1,
+            paddingVertical: 9,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 6,
+            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}/>
+            ? 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 === 'ui'
-                    ? AppColors_1.AppColors.white
-                    : AppColors_1.AppColors.grayText,
-            }}>
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 12.5,
+            lineHeight: 16,
+            color: settingsActiveSubTab === 'ui'
+                ? AppColors_1.AppColors.white
+                : AppColors_1.AppColors.grayText,
+        }}>
                 {t('settings.uiPreferences')}
               </react_native_1.Text>
             </TouchableScale_1.default>
           </react_native_1.View>
 
           {settingsActiveSubTab === 'module' ? (<react_native_1.View style={{ gap: 12 }}>
-              {/* Performance Advisory Banner */}
-              <react_native_1.View style={{
-                    backgroundColor: `${AppColors_1.AppColors.purple}0A`,
-                    borderRadius: 12,
-                    padding: 12,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.purple}20`,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 10,
-                }}>
-                <react_native_1.View style={{
-                    width: 32,
-                    height: 32,
-                    borderRadius: 8,
-                    backgroundColor: `${AppColors_1.AppColors.purple}14`,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={15}/>
-                </react_native_1.View>
-                <react_native_1.View style={{ flex: 1 }}>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 12,
-                    color: AppColors_1.AppColors.primaryBlack,
-                    lineHeight: 16,
-                }}>
-                    {t('settings.zeroOverheadTitle')}
-                  </react_native_1.Text>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 10.5,
-                    color: AppColors_1.AppColors.grayText,
-                    marginTop: 2,
-                    lineHeight: 14,
-                }}>
-                    {t('settings.zeroOverheadDesc')}
-                  </react_native_1.Text>
-                </react_native_1.View>
-              </react_native_1.View>
-
-              {/* Enhanced Individual Module Cards with Decorative Checkboxes */}
+              {/* Individual Module Cards with Left Checkboxes */}
               <react_native_1.View style={{ gap: 10 }}>
                 {allModules.map(moduleItem => {
-                    const isReduxAvail = (0, reduxLogger_1.isReduxConnected)();
-                    const isAnalyticsAvail = (0, analyticsLogger_2.isAnalyticsConnected)();
-                    const isUnavailable = (moduleItem.key === 'redux' && !isReduxAvail) ||
-                        (moduleItem.key === 'analytics' && !isAnalyticsAvail);
-                    const isLocked = moduleItem.key === 'apis' || isUnavailable;
-                    const isChecked = moduleItem.key === 'apis' ||
-                        (Boolean(stagedTabVisibility?.[moduleItem.key]) &&
-                            !isUnavailable);
-                    const liveStats = moduleItem.key === 'apis'
-                        ? `${logs.length} requests • Limit: ${maxNetworkLogs}`
-                        : moduleItem.key === 'logs'
-                            ? `${consoleLogs.length} logs • Limit: ${maxConsoleLogs}`
-                            : moduleItem.key === 'performance'
-                                ? '60 FPS Target • Memory Telemetry'
-                                : moduleItem.key === 'bundle'
-                                    ? 'Metro Packager • Dependency Map'
-                                    : moduleItem.key === 'crash'
-                                        ? `${crashRecords?.length || 0} crashes recorded • Crash Guard`
-                                        : moduleItem.key === 'analytics'
-                                            ? `${analyticsEvents.length} events logged`
-                                            : moduleItem.key === 'redux'
-                                                ? `${Object.keys(reduxState || {}).length} slices • Depth: ${reduxExpandDepth}`
-                                                : '';
-                    return (<react_native_1.View key={moduleItem.key} style={{
-                            backgroundColor: AppColors_1.AppColors.primaryLight,
-                            borderRadius: 14,
-                            borderWidth: 1.5,
-                            borderColor: isChecked
-                                ? `${AppColors_1.AppColors.purple}38`
-                                : AppColors_1.AppColors.grayBorderSecondary,
-                            padding: 14,
-                            gap: 10,
-                            shadowColor: AppColors_1.AppColors.black,
-                            shadowOpacity: isChecked ? 0.04 : 0.02,
-                            shadowRadius: 5,
-                            shadowOffset: { width: 0, height: 2 },
-                        }}>
-                      {/* Top Row: Icon + Title & Badges + Checkbox */}
+                const isReduxAvail = (0, reduxLogger_1.isReduxConnected)();
+                const isAnalyticsAvail = (0, analyticsLogger_2.isAnalyticsConnected)();
+                const isUnavailable = (moduleItem.key === 'redux' && !isReduxAvail) ||
+                    (moduleItem.key === 'analytics' && !isAnalyticsAvail);
+                const isLocked = moduleItem.key === 'apis' || isUnavailable;
+                const isChecked = moduleItem.key === 'apis' ||
+                    (Boolean(stagedTabVisibility?.[moduleItem.key]) &&
+                        !isUnavailable);
+                const liveStats = moduleItem.key === 'apis'
+                    ? `${logs.length} requests • Limit: ${maxNetworkLogs}`
+                    : moduleItem.key === 'logs'
+                        ? `${consoleLogs.length} logs • Limit: ${maxConsoleLogs}`
+                        : moduleItem.key === 'performance'
+                            ? '60 FPS Target • Memory Telemetry'
+                            : moduleItem.key === 'bundle'
+                                ? 'Metro Packager • Dependency Map'
+                                : moduleItem.key === 'crash'
+                                    ? `${crashRecords?.length || 0} crashes recorded • Crash Guard`
+                                    : moduleItem.key === 'analytics'
+                                        ? `${analyticsEvents.length} events logged`
+                                        : moduleItem.key === 'redux'
+                                            ? `${Object.keys(reduxState || {}).length} slices • Depth: ${reduxExpandDepth}`
+                                            : '';
+                return (<react_native_1.View key={moduleItem.key} style={{
+                        backgroundColor: AppColors_1.AppColors.primaryLight,
+                        borderRadius: 14,
+                        borderWidth: 1.5,
+                        borderColor: isChecked
+                            ? `${AppColors_1.AppColors.purple}38`
+                            : AppColors_1.AppColors.grayBorderSecondary,
+                        padding: 14,
+                        gap: 10,
+                        shadowColor: AppColors_1.AppColors.black,
+                        shadowOpacity: isChecked ? 0.04 : 0.02,
+                        shadowRadius: 5,
+                        shadowOffset: { width: 0, height: 2 },
+                    }}>
+                      {/* Top Row: [Checkbox] -> [Icon Tile] -> [Title & Subtitle] */}
                       <react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'flex-start',
-                            justifyContent: 'space-between',
-                            gap: 10,
-                        }}>
-                        {/* Tap Zone for Details/Settings */}
-                        <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`${moduleItem.label} settings`} disabled={isUnavailable} onPress={() => {
-                            (0, InspectorContext_1.animateNextLayout)();
-                            setSettingsPage(moduleItem.key);
-                        }} style={{
-                            flex: 1,
-                            flexDirection: 'row',
-                            alignItems: 'flex-start',
-                            gap: 10,
-                        }}>
-                          {/* Icon Tile */}
-                          <react_native_1.View style={{
-                            width: 36,
-                            height: 36,
-                            borderRadius: 10,
-                            backgroundColor: isLocked
-                                ? `${AppColors_1.AppColors.grayBorderSecondary}4D`
-                                : isChecked
-                                    ? `${AppColors_1.AppColors.purple}14`
-                                    : AppColors_1.AppColors.grayBackground,
-                            borderWidth: 1,
-                            borderColor: isLocked
-                                ? AppColors_1.AppColors.dividerColor
-                                : isChecked
-                                    ? `${AppColors_1.AppColors.purple}33`
-                                    : AppColors_1.AppColors.grayBorderSecondary,
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            marginTop: 1,
-                        }}>
-                            {moduleItem.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isChecked
+                        flexDirection: 'row',
+                        alignItems: 'flex-start',
+                        gap: 10,
+                    }}>
+                        {/* 1. Checkbox on the Left */}
+                        <TouchableScale_1.default accessible={true} accessibilityRole="checkbox" accessibilityLabel={`Select ${moduleItem.label}`} accessibilityState={{
+                        checked: isChecked,
+                        disabled: isLocked,
+                    }} disabled={isLocked} onPress={() => {
+                        if (isLocked)
+                            return;
+                        setStagedTabVisibility(prev => ({
+                            ...prev,
+                            [moduleItem.key]: !prev[moduleItem.key],
+                        }));
+                    }} hitSlop={8} style={{
+                        width: 22,
+                        height: 22,
+                        borderRadius: 6,
+                        borderWidth: isChecked ? 0 : 1.8,
+                        borderColor: isLocked
+                            ? AppColors_1.AppColors.dividerColor
+                            : AppColors_1.AppColors.grayBorderSecondary,
+                        backgroundColor: moduleItem.key === 'apis'
+                            ? `${AppColors_1.AppColors.blue500}22`
+                            : isChecked
                                 ? AppColors_1.AppColors.purple
-                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
-                            {moduleItem.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isChecked
-                                ? AppColors_1.AppColors.purple
-                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                                : AppColors_1.AppColors.grayBackground,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginTop: 7,
+                        shadowColor: isChecked
+                            ? AppColors_1.AppColors.purple
+                            : 'transparent',
+                        shadowOpacity: isChecked ? 0.25 : 0,
+                        shadowRadius: 2,
+                        elevation: isChecked ? 2 : 0,
+                    }}>
+                          {moduleItem.key === 'apis' ? (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.blue500}/>) : isChecked ? (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.white}/>) : isLocked ? (<react_native_svg_1.default width={10} height={10} viewBox="0 0 24 24" fill="none">
+                              <react_native_svg_1.Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors_1.AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
+                              <react_native_svg_1.Path d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" fill={AppColors_1.AppColors.grayText}/>
+                            </react_native_svg_1.default>) : null}
+                        </TouchableScale_1.default>
+
+                        {/* 2. Middle Tap Zone: Icon + Title & Desc */}
+                        <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`${moduleItem.label} settings`} disabled={isUnavailable} onPress={() => {
+                        (0, InspectorContext_1.animateNextLayout)();
+                        setSettingsPage(moduleItem.key);
+                    }} style={{
+                        flex: 1,
+                        flexDirection: 'row',
+                        alignItems: 'flex-start',
+                        gap: 10,
+                    }}>
+                          {/* Icon Tile */}
+                          <react_native_1.View style={{
+                        width: 36,
+                        height: 36,
+                        borderRadius: 10,
+                        backgroundColor: isLocked
+                            ? `${AppColors_1.AppColors.grayBorderSecondary}4D`
+                            : isChecked
+                                ? `${AppColors_1.AppColors.purple}14`
+                                : AppColors_1.AppColors.grayBackground,
+                        borderWidth: 1,
+                        borderColor: isLocked
+                            ? AppColors_1.AppColors.dividerColor
+                            : isChecked
+                                ? `${AppColors_1.AppColors.purple}33`
+                                : AppColors_1.AppColors.grayBorderSecondary,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginTop: 1,
+                    }}>
+                            {moduleItem.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            {moduleItem.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
                             {moduleItem.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isChecked
-                                ? AppColors_1.AppColors.purple
-                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
                             {moduleItem.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isChecked
-                                ? AppColors_1.AppColors.purple
-                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
                             {moduleItem.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={isChecked
-                                ? AppColors_1.AppColors.purple
-                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
                             {moduleItem.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isChecked
-                                ? AppColors_1.AppColors.purple
-                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
                             {moduleItem.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isChecked
-                                ? AppColors_1.AppColors.purple
-                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
                           </react_native_1.View>
 
                           {/* Titles & Status Pill */}
                           <react_native_1.View style={{ flex: 1, gap: 2 }}>
                             <react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 6,
-                            flexWrap: 'wrap',
-                        }}>
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                        flexWrap: 'wrap',
+                    }}>
                               <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 14,
-                            lineHeight: 18,
-                            color: isLocked
-                                ? AppColors_1.AppColors.grayText
-                                : AppColors_1.AppColors.primaryBlack,
-                        }}>
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 14,
+                        lineHeight: 18,
+                        color: isLocked
+                            ? AppColors_1.AppColors.grayText
+                            : AppColors_1.AppColors.primaryBlack,
+                    }}>
                                 {moduleItem.label}
                               </react_native_1.Text>
 
                               {/* Default Startup Tab Badge */}
                               {moduleItem.key === defaultTab &&
-                            !isUnavailable && (<react_native_1.View style={{
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                backgroundColor: `${AppColors_1.AppColors.purple}14`,
-                                borderRadius: 12,
-                                paddingHorizontal: 5,
-                                paddingVertical: 1.5,
-                                borderWidth: 1,
-                                borderColor: `${AppColors_1.AppColors.purple}2E`,
-                                gap: 3,
-                            }}>
+                        !isUnavailable && (<react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            backgroundColor: `${AppColors_1.AppColors.purple}14`,
+                            borderRadius: 12,
+                            paddingHorizontal: 5,
+                            paddingVertical: 1.5,
+                            borderWidth: 1,
+                            borderColor: `${AppColors_1.AppColors.purple}2E`,
+                            gap: 3,
+                        }}>
                                     <react_native_1.View style={{
-                                width: 4,
-                                height: 4,
-                                borderRadius: 2,
-                                backgroundColor: AppColors_1.AppColors.purple,
-                            }}/>
+                            width: 4,
+                            height: 4,
+                            borderRadius: 2,
+                            backgroundColor: AppColors_1.AppColors.purple,
+                        }}/>
                                     <react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 8,
-                                lineHeight: 11,
-                                color: AppColors_1.AppColors.purple,
-                                letterSpacing: 0.4,
-                            }}>
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 8,
+                            lineHeight: 11,
+                            color: AppColors_1.AppColors.purple,
+                            letterSpacing: 0.4,
+                        }}>
                                       {t('settings.defaultBadge')}
                                     </react_native_1.Text>
                                   </react_native_1.View>)}
 
                               {/* Status Pill */}
                               {moduleItem.key === 'apis' ? (<react_native_1.View style={{
-                                backgroundColor: `${AppColors_1.AppColors.blue500}14`,
-                                borderRadius: 4,
-                                paddingHorizontal: 5,
-                                paddingVertical: 1.5,
-                                borderWidth: 1,
-                                borderColor: `${AppColors_1.AppColors.blue500}33`,
-                            }}>
+                            backgroundColor: `${AppColors_1.AppColors.blue500}14`,
+                            borderRadius: 4,
+                            paddingHorizontal: 5,
+                            paddingVertical: 1.5,
+                            borderWidth: 1,
+                            borderColor: `${AppColors_1.AppColors.blue500}33`,
+                        }}>
                                   <react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 8,
-                                lineHeight: 11,
-                                color: AppColors_1.AppColors.blue500,
-                                letterSpacing: 0.3,
-                            }}>
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 8,
+                            lineHeight: 11,
+                            color: AppColors_1.AppColors.blue500,
+                            letterSpacing: 0.3,
+                        }}>
                                     {t('settings.coreBadge')}
                                   </react_native_1.Text>
                                 </react_native_1.View>) : isUnavailable ? (<react_native_1.View style={{
-                                backgroundColor: `${AppColors_1.AppColors.amber500}18`,
-                                borderRadius: 4,
-                                paddingHorizontal: 5,
-                                paddingVertical: 1.5,
-                                borderWidth: 1,
-                                borderColor: `${AppColors_1.AppColors.amber500}35`,
-                            }}>
+                            backgroundColor: `${AppColors_1.AppColors.amber500}18`,
+                            borderRadius: 4,
+                            paddingHorizontal: 5,
+                            paddingVertical: 1.5,
+                            borderWidth: 1,
+                            borderColor: `${AppColors_1.AppColors.amber500}35`,
+                        }}>
                                   <react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 8,
-                                lineHeight: 11,
-                                color: AppColors_1.AppColors.amber700,
-                                letterSpacing: 0.3,
-                            }}>
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 8,
+                            lineHeight: 11,
+                            color: AppColors_1.AppColors.amber700,
+                            letterSpacing: 0.3,
+                        }}>
                                     {moduleItem.key === 'redux'
-                                ? t('settings.notConnectedBadge')
-                                : t('settings.notDetectedBadge')}
+                            ? t('settings.notConnectedBadge')
+                            : t('settings.notDetectedBadge')}
                                   </react_native_1.Text>
                                 </react_native_1.View>) : isChecked ? (<react_native_1.View style={{
-                                backgroundColor: `${AppColors_1.AppColors.liveGreen}18`,
-                                borderRadius: 4,
-                                paddingHorizontal: 5,
-                                paddingVertical: 1.5,
-                                borderWidth: 1,
-                                borderColor: `${AppColors_1.AppColors.liveGreen}38`,
-                            }}>
+                            backgroundColor: `${AppColors_1.AppColors.liveGreen}18`,
+                            borderRadius: 4,
+                            paddingHorizontal: 5,
+                            paddingVertical: 1.5,
+                            borderWidth: 1,
+                            borderColor: `${AppColors_1.AppColors.liveGreen}38`,
+                        }}>
                                   <react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 8,
-                                lineHeight: 11,
-                                color: AppColors_1.AppColors.green700,
-                                letterSpacing: 0.3,
-                            }}>
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 8,
+                            lineHeight: 11,
+                            color: AppColors_1.AppColors.green700,
+                            letterSpacing: 0.3,
+                        }}>
                                     {t('settings.activeBadge')}
                                   </react_native_1.Text>
                                 </react_native_1.View>) : (<react_native_1.View style={{
-                                backgroundColor: `${AppColors_1.AppColors.grayTextWeak}18`,
-                                borderRadius: 4,
-                                paddingHorizontal: 5,
-                                paddingVertical: 1.5,
-                                borderWidth: 1,
-                                borderColor: `${AppColors_1.AppColors.grayTextWeak}2E`,
-                            }}>
+                            backgroundColor: `${AppColors_1.AppColors.grayTextWeak}18`,
+                            borderRadius: 4,
+                            paddingHorizontal: 5,
+                            paddingVertical: 1.5,
+                            borderWidth: 1,
+                            borderColor: `${AppColors_1.AppColors.grayTextWeak}2E`,
+                        }}>
                                   <react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 8,
-                                lineHeight: 11,
-                                color: AppColors_1.AppColors.grayTextWeak,
-                                letterSpacing: 0.3,
-                            }}>
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 8,
+                            lineHeight: 11,
+                            color: AppColors_1.AppColors.grayTextWeak,
+                            letterSpacing: 0.3,
+                        }}>
                                     {t('settings.dormantBadge')}
                                   </react_native_1.Text>
                                 </react_native_1.View>)}
                             </react_native_1.View>
 
                             <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interRegular,
-                            fontSize: 11,
-                            color: AppColors_1.AppColors.grayText,
-                            lineHeight: 15,
-                            marginTop: 1,
-                        }}>
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.grayText,
+                        lineHeight: 15,
+                        marginTop: 1,
+                    }}>
                               {moduleItem.desc}
                             </react_native_1.Text>
                           </react_native_1.View>
                         </TouchableScale_1.default>
-
-                        {/* Decorative Custom Checkbox */}
-                        <TouchableScale_1.default accessible={true} accessibilityRole="checkbox" accessibilityLabel={`Select ${moduleItem.label}`} accessibilityState={{
-                            checked: isChecked,
-                            disabled: isLocked,
-                        }} disabled={isLocked} onPress={() => {
-                            if (isLocked)
-                                return;
-                            setStagedTabVisibility(prev => ({
-                                ...prev,
-                                [moduleItem.key]: !prev[moduleItem.key],
-                            }));
-                        }} style={{
-                            width: 26,
-                            height: 26,
-                            borderRadius: 8,
-                            borderWidth: isChecked ? 0 : 2,
-                            borderColor: isLocked
-                                ? AppColors_1.AppColors.dividerColor
-                                : AppColors_1.AppColors.grayBorderSecondary,
-                            backgroundColor: moduleItem.key === 'apis'
-                                ? `${AppColors_1.AppColors.blue500}22`
-                                : isChecked
-                                    ? AppColors_1.AppColors.purple
-                                    : AppColors_1.AppColors.grayBackground,
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            shadowColor: isChecked
-                                ? AppColors_1.AppColors.purple
-                                : 'transparent',
-                            shadowOpacity: isChecked ? 0.3 : 0,
-                            shadowRadius: 3,
-                            shadowOffset: { width: 0, height: 1 },
-                            elevation: isChecked ? 2 : 0,
-                        }}>
-                          {moduleItem.key === 'apis' ? (<NetworkIcons_1.CheckIcon size={14} color={AppColors_1.AppColors.blue500}/>) : isChecked ? (<NetworkIcons_1.CheckIcon size={14} color={AppColors_1.AppColors.white}/>) : isLocked ? (<react_native_svg_1.default width={10} height={10} viewBox="0 0 24 24" fill="none">
-                              <react_native_svg_1.Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors_1.AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
-                              <react_native_svg_1.Path d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" fill={AppColors_1.AppColors.grayText}/>
-                            </react_native_svg_1.default>) : null}
-                        </TouchableScale_1.default>
                       </react_native_1.View>
 
                       {/* Card Footer: Live Stats + Configure Button */}
                       {!isUnavailable && (<react_native_1.View style={{
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                justifyContent: 'space-between',
-                                paddingTop: 8,
-                                borderTopWidth: 1,
-                                borderTopColor: AppColors_1.AppColors.dividerColor,
-                            }}>
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            paddingTop: 8,
+                            borderTopWidth: 1,
+                            borderTopColor: AppColors_1.AppColors.dividerColor,
+                        }}>
                           {/* Live Info Pill */}
                           <react_native_1.View style={{
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                gap: 6,
-                                flex: 1,
-                            }}>
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 6,
+                            flex: 1,
+                        }}>
                             <react_native_1.View style={{
-                                width: 6,
-                                height: 6,
-                                borderRadius: 3,
-                                backgroundColor: isChecked
-                                    ? AppColors_1.AppColors.liveGreen
-                                    : AppColors_1.AppColors.grayTextWeak,
-                            }}/>
+                            width: 6,
+                            height: 6,
+                            borderRadius: 3,
+                            backgroundColor: isChecked
+                                ? AppColors_1.AppColors.liveGreen
+                                : AppColors_1.AppColors.grayTextWeak,
+                        }}/>
                             <react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interMedium,
-                                fontSize: 11,
-                                color: AppColors_1.AppColors.grayText,
-                                lineHeight: 14,
-                            }}>
+                            fontFamily: AppFonts_1.AppFonts.interMedium,
+                            fontSize: 11,
+                            color: AppColors_1.AppColors.grayText,
+                            lineHeight: 14,
+                        }}>
                               {liveStats}
                             </react_native_1.Text>
                           </react_native_1.View>
 
                           {/* Sleek Configure Button */}
                           <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Configure ${moduleItem.label} settings`} onPress={() => {
-                                (0, InspectorContext_1.animateNextLayout)();
-                                setSettingsPage(moduleItem.key);
-                            }} style={{
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                gap: 5,
-                                backgroundColor: `${AppColors_1.AppColors.purple}12`,
-                                paddingHorizontal: 10,
-                                paddingVertical: 5,
-                                borderRadius: 8,
-                                borderWidth: 1,
-                                borderColor: `${AppColors_1.AppColors.purple}26`,
-                            }}>
+                            (0, InspectorContext_1.animateNextLayout)();
+                            setSettingsPage(moduleItem.key);
+                        }} style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                            backgroundColor: `${AppColors_1.AppColors.purple}12`,
+                            paddingHorizontal: 10,
+                            paddingVertical: 5,
+                            borderRadius: 8,
+                            borderWidth: 1,
+                            borderColor: `${AppColors_1.AppColors.purple}26`,
+                        }}>
                             <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.purple} size={11}/>
                             <react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 11,
-                                lineHeight: 14,
-                                color: AppColors_1.AppColors.purple,
-                            }}>
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11,
+                            lineHeight: 14,
+                            color: AppColors_1.AppColors.purple,
+                        }}>
                               {t('settings.configure')}
                             </react_native_1.Text>
                             <NetworkIcons_1.ForwardChevronIcon color={AppColors_1.AppColors.purple} size={9}/>
                           </TouchableScale_1.default>
                         </react_native_1.View>)}
                     </react_native_1.View>);
-                })}
+            })}
               </react_native_1.View>
 
               {/* Section 3.5: RAM-Based Auto Limits */}
               <react_native_1.View style={{
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
-                    borderRadius: 14,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    overflow: 'hidden',
-                    padding: 14,
-                    gap: 12,
-                }}>
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
                 <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11,
-                    lineHeight: 14,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    letterSpacing: 0.8,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
                   RAM-Based Auto Limits
                 </react_native_1.Text>
 
                 {/* Auto RAM Limit Toggle */}
                 <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
                   <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 10,
-                    flex: 1,
-                }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+            }}>
                     <react_native_1.View style={{
-                    width: 32,
-                    height: 32,
-                    borderRadius: 8,
-                    backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
                       <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple} size={15}/>
                     </react_native_1.View>
                     <react_native_1.View style={{ flex: 1 }}>
                       <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13.5,
-                    lineHeight: 18,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
                         Auto-Calculate Limits from Device RAM
                       </react_native_1.Text>
                       <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 11,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.grayText,
-                    marginTop: 1,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
                         Automatically set API, Logs, Analytics & Crash limits based on available memory
                       </react_native_1.Text>
                     </react_native_1.View>
                   </react_native_1.View>
 
                   <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle auto RAM limit calculation" accessibilityState={{ checked: isAutoRamLimitEnabled }} onPress={() => setIsAutoRamLimitEnabled(prev => !prev)} style={{
-                    width: 42,
-                    height: 24,
-                    borderRadius: 12,
-                    backgroundColor: isAutoRamLimitEnabled
-                        ? AppColors_1.AppColors.purple
-                        : AppColors_1.AppColors.grayBorderSecondary,
-                    padding: 2,
-                    justifyContent: 'center',
-                    alignItems: isAutoRamLimitEnabled ? 'flex-end' : 'flex-start',
-                }}>
+                width: 42,
+                height: 24,
+                borderRadius: 12,
+                backgroundColor: isAutoRamLimitEnabled
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayBorderSecondary,
+                padding: 2,
+                justifyContent: 'center',
+                alignItems: isAutoRamLimitEnabled ? 'flex-end' : 'flex-start',
+            }}>
                     <react_native_1.View style={{
-                    width: 20,
-                    height: 20,
-                    borderRadius: 10,
-                    backgroundColor: AppColors_1.AppColors.white,
-                    shadowColor: AppColors_1.AppColors.black,
-                    shadowOpacity: 0.18,
-                    shadowRadius: 2,
-                    shadowOffset: { width: 0, height: 1 },
-                }}/>
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.white,
+                shadowColor: AppColors_1.AppColors.black,
+                shadowOpacity: 0.18,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+            }}/>
                   </TouchableScale_1.default>
                 </react_native_1.View>
 
@@ -796,58 +799,58 @@ const SettingsPanel = () => {
                 {/* Device Free RAM Display */}
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
                   <react_native_1.View style={{
-                    width: 32,
-                    height: 32,
-                    borderRadius: 8,
-                    backgroundColor: isAutoRamLimitEnabled
-                        ? `${AppColors_1.AppColors.purple}14`
-                        : AppColors_1.AppColors.grayBackground,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: isAutoRamLimitEnabled
+                    ? `${AppColors_1.AppColors.purple}14`
+                    : AppColors_1.AppColors.grayBackground,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
                     <NetworkIcons_1.SignalIcon color={isAutoRamLimitEnabled ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak} size={15}/>
                   </react_native_1.View>
                   <react_native_1.View style={{ flex: 1 }}>
                     <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13.5,
-                    lineHeight: 18,
-                    color: isAutoRamLimitEnabled
-                        ? AppColors_1.AppColors.primaryBlack
-                        : AppColors_1.AppColors.grayText,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: isAutoRamLimitEnabled
+                    ? AppColors_1.AppColors.primaryBlack
+                    : AppColors_1.AppColors.grayText,
+            }}>
                       Detected Free RAM
                     </react_native_1.Text>
                     <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 11,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.grayText,
-                    marginTop: 1,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
                       {deviceFreeRamMb} MB available
                     </react_native_1.Text>
                   </react_native_1.View>
                   <react_native_1.View style={{
-                    paddingHorizontal: 10,
-                    paddingVertical: 5,
-                    borderRadius: 8,
-                    backgroundColor: isAutoRamLimitEnabled
-                        ? `${AppColors_1.AppColors.purple}12`
-                        : AppColors_1.AppColors.grayBackground,
-                    borderWidth: 1,
-                    borderColor: isAutoRamLimitEnabled
-                        ? `${AppColors_1.AppColors.purple}26`
-                        : AppColors_1.AppColors.dividerColor,
-                }}>
+                paddingHorizontal: 10,
+                paddingVertical: 5,
+                borderRadius: 8,
+                backgroundColor: isAutoRamLimitEnabled
+                    ? `${AppColors_1.AppColors.purple}12`
+                    : AppColors_1.AppColors.grayBackground,
+                borderWidth: 1,
+                borderColor: isAutoRamLimitEnabled
+                    ? `${AppColors_1.AppColors.purple}26`
+                    : AppColors_1.AppColors.dividerColor,
+            }}>
                     <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 12,
-                    lineHeight: 15,
-                    color: isAutoRamLimitEnabled
-                        ? AppColors_1.AppColors.purple
-                        : AppColors_1.AppColors.grayText,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 12,
+                lineHeight: 15,
+                color: isAutoRamLimitEnabled
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayText,
+            }}>
                       {deviceFreeRamMb} MB
                     </react_native_1.Text>
                   </react_native_1.View>
@@ -856,44 +859,44 @@ const SettingsPanel = () => {
                 {/* Current Auto-Calculated Limits Preview */}
                 {isAutoRamLimitEnabled && (<react_native_1.View style={{ marginTop: 8, paddingTop: 8, borderTopWidth: 1, borderTopColor: AppColors_1.AppColors.dividerColor, gap: 6 }}>
                     <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 11.5,
-                        lineHeight: 15,
-                        color: AppColors_1.AppColors.purple,
-                    }}>
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11.5,
+                    lineHeight: 15,
+                    color: AppColors_1.AppColors.purple,
+                }}>
                       Auto Profile: {autoRamProfile.profileName}
                     </react_native_1.Text>
                     <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
                       {[
-                        { label: 'APIs', value: autoRamProfile.maxNetworkLogs, color: AppColors_1.AppColors.blue500 },
-                        { label: 'Logs', value: autoRamProfile.maxConsoleLogs, color: AppColors_1.AppColors.sky500 },
-                        { label: 'Analytics', value: autoRamProfile.maxAnalyticsEvents, color: AppColors_1.AppColors.purple },
-                        { label: 'Crash', value: autoRamProfile.maxCrashRecords, color: AppColors_1.AppColors.errorColor },
-                    ].map(item => (<react_native_1.View key={item.label} style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                            paddingHorizontal: 8,
-                            paddingVertical: 4,
-                            borderRadius: 6,
-                            backgroundColor: `${item.color}14`,
-                            borderWidth: 1,
-                            borderColor: `${item.color}33`,
-                        }}>
-                          <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 10.5,
-                            lineHeight: 14,
-                            color: item.color,
-                        }}>
+                    { label: 'APIs', value: autoRamProfile.maxNetworkLogs, color: AppColors_1.AppColors.blue500 },
+                    { label: 'Logs', value: autoRamProfile.maxConsoleLogs, color: AppColors_1.AppColors.sky500 },
+                    { label: 'Analytics', value: autoRamProfile.maxAnalyticsEvents, color: AppColors_1.AppColors.purple },
+                    { label: 'Crash', value: autoRamProfile.maxCrashRecords, color: AppColors_1.AppColors.errorColor },
+                ].map(item => (<react_native_1.View key={item.label} style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${item.color}14`,
+                        borderWidth: 1,
+                        borderColor: `${item.color}33`,
+                    }}>
+                          <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10.5,
+                        lineHeight: 14,
+                        color: item.color,
+                    }}>
                             {item.label}
                           </react_native_1.Text>
                           <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 10.5,
-                            lineHeight: 14,
-                            color: item.color,
-                        }}>
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10.5,
+                        lineHeight: 14,
+                        color: item.color,
+                    }}>
                             {item.value}
                           </react_native_1.Text>
                         </react_native_1.View>))}
@@ -903,184 +906,189 @@ const SettingsPanel = () => {
             </react_native_1.View>) : (<react_native_1.View style={{ gap: 14 }}>
               {/* Section 1: Appearance */}
               <react_native_1.View style={{
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
-                    borderRadius: 14,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    overflow: 'hidden',
-                    padding: 14,
-                    gap: 12,
-                }}>
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
                 <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11,
-                    lineHeight: 14,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    letterSpacing: 0.8,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
                   {t('settings.appearanceTheme')}
                 </react_native_1.Text>
 
                 <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
                   <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 10,
-                    flex: 1,
-                }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+            }}>
                     <react_native_1.View style={{
-                    width: 32,
-                    height: 32,
-                    borderRadius: 8,
-                    backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
                       {isDark ? (<NetworkIcons_1.SunIcon color={AppColors_1.AppColors.purple} size={15}/>) : (<NetworkIcons_1.MoonIcon color={AppColors_1.AppColors.purple} size={15}/>)}
                     </react_native_1.View>
                     <react_native_1.View style={{ flex: 1 }}>
                       <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13.5,
-                    lineHeight: 18,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
                         {t('settings.general.darkMode')}
                       </react_native_1.Text>
                       <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 11,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.grayText,
-                    marginTop: 1,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
                         {t('settings.general.darkModeDescription')}
                       </react_native_1.Text>
                     </react_native_1.View>
                   </react_native_1.View>
 
                   <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Dark Theme" accessibilityState={{ checked: isDark }} onPress={() => {
-                    const newTheme = !isDark;
-                    setIsDark(newTheme);
-                    (0, styles_1.toggleGlobalTheme)(newTheme);
-                }} style={{
-                    width: 42,
-                    height: 24,
-                    borderRadius: 12,
-                    backgroundColor: isDark
-                        ? AppColors_1.AppColors.purple
-                        : AppColors_1.AppColors.grayBorderSecondary,
-                    padding: 2,
-                    justifyContent: 'center',
-                    alignItems: isDark ? 'flex-end' : 'flex-start',
-                }}>
+                const newTheme = !isDark;
+                setIsDark(newTheme);
+                (0, styles_1.toggleGlobalTheme)(newTheme);
+            }} style={{
+                width: 42,
+                height: 24,
+                borderRadius: 12,
+                backgroundColor: isDark
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayBorderSecondary,
+                padding: 2,
+                justifyContent: 'center',
+                alignItems: isDark ? 'flex-end' : 'flex-start',
+            }}>
                     <react_native_1.View style={{
-                    width: 20,
-                    height: 20,
-                    borderRadius: 10,
-                    backgroundColor: AppColors_1.AppColors.white,
-                    shadowColor: AppColors_1.AppColors.black,
-                    shadowOpacity: 0.18,
-                    shadowRadius: 2,
-                    shadowOffset: { width: 0, height: 1 },
-                }}/>
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.white,
+                shadowColor: AppColors_1.AppColors.black,
+                shadowOpacity: 0.18,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+            }}/>
                   </TouchableScale_1.default>
                 </react_native_1.View>
               </react_native_1.View>
 
               {/* Section 2: Window & Layout */}
               <react_native_1.View style={{
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
-                    borderRadius: 14,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    overflow: 'hidden',
-                    padding: 14,
-                    gap: 14,
-                }}>
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 14,
+            }}>
                 <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11,
-                    lineHeight: 14,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    letterSpacing: 0.8,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
                   {t('settings.windowLayout')}
                 </react_native_1.Text>
 
                 {/* Modal Height */}
                 <react_native_1.View style={{ gap: 8 }}>
                   <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 10,
-                }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 10,
+            }}>
                     <react_native_1.View style={{
-                    width: 32,
-                    height: 32,
-                    borderRadius: 8,
-                    backgroundColor: AppColors_1.AppColors.purpleShade50,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+            }}>
+                      <react_native_1.View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                        <NetworkIcons_1.ScreenIcon color={AppColors_1.AppColors.purple} size={15}/>
+                      </react_native_1.View>
+                      <react_native_1.View style={{ flex: 1 }}>
+                        <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                          {t('settings.general.modalHeight')}
+                        </react_native_1.Text>
+                        <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                          {t('settings.general.modalHeightDescription')}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                    </react_native_1.View>
+
+                    {stagedHeight !== modalHeightPercent && (<TouchableScale_1.default onPress={() => {
+                    setModalHeightPercent(stagedHeight);
+                }} style={{
+                    flexDirection: 'row',
                     alignItems: 'center',
-                    justifyContent: 'center',
+                    gap: 5,
+                    backgroundColor: AppColors_1.AppColors.purple,
+                    paddingHorizontal: 10,
+                    paddingVertical: 5,
+                    borderRadius: 7,
+                    shadowColor: AppColors_1.AppColors.purple,
+                    shadowOffset: { width: 0, height: 1 },
+                    shadowOpacity: 0.28,
+                    shadowRadius: 2,
+                    elevation: 2,
                 }}>
-                      <NetworkIcons_1.ScreenIcon color={AppColors_1.AppColors.purple} size={15}/>
-                    </react_native_1.View>
-                    <react_native_1.View style={{ flex: 1 }}>
-                      <react_native_1.Text style={{
+                        <NetworkIcons_1.CheckIcon size={11} color={AppColors_1.AppColors.white}/>
+                        <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13.5,
-                    lineHeight: 18,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }}>
-                        {t('settings.general.modalHeight')}
-                      </react_native_1.Text>
-                      <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
                     fontSize: 11,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.grayText,
-                    marginTop: 1,
+                    color: AppColors_1.AppColors.white,
                 }}>
-                        {t('settings.general.modalHeightDescription')}
-                      </react_native_1.Text>
-                    </react_native_1.View>
+                          Save ({stagedHeight}%)
+                        </react_native_1.Text>
+                      </TouchableScale_1.default>)}
                   </react_native_1.View>
 
-                  <react_native_1.View style={{
-                    flexDirection: 'row',
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderRadius: 10,
-                    padding: 3,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.dividerColor,
-                }}>
-                    {[50, 70, 90, 100].map(opt => {
-                    const isActive = modalHeightPercent === opt;
-                    return (<TouchableScale_1.default key={opt} accessible={true} accessibilityRole="button" accessibilityLabel={`Set window height to ${opt} percent`} accessibilityState={{ selected: isActive }} onPress={() => setModalHeightPercent(opt)} style={{
-                            flex: 1,
-                            paddingVertical: 7,
-                            alignItems: 'center',
-                            borderRadius: 8,
-                            backgroundColor: isActive
-                                ? AppColors_1.AppColors.purple
-                                : 'transparent',
-                        }}>
-                          <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 11.5,
-                            lineHeight: 15,
-                            color: isActive
-                                ? AppColors_1.AppColors.white
-                                : AppColors_1.AppColors.grayText,
-                        }}>
-                            {opt}%
-                          </react_native_1.Text>
-                        </TouchableScale_1.default>);
-                })}
+                  <react_native_1.View style={{ marginTop: 6 }}>
+                    <Slider_1.default value={stagedHeight} onValueChange={setStagedHeight} min={50} max={90} step={5} quickPresets={[50, 60, 70, 80, 90]} formatLabel={val => `${Math.round(val)}%`}/>
                   </react_native_1.View>
                 </react_native_1.View>
 
@@ -1089,694 +1097,330 @@ const SettingsPanel = () => {
                 {/* Modal Animation */}
                 <react_native_1.View style={{ gap: 8 }}>
                   <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 10,
-                }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+            }}>
                     <react_native_1.View style={{
-                    width: 32,
-                    height: 32,
-                    borderRadius: 8,
-                    backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
                       <NetworkIcons_1.MotionIcon color={AppColors_1.AppColors.purple} size={15}/>
                     </react_native_1.View>
                     <react_native_1.View style={{ flex: 1 }}>
                       <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13.5,
-                    lineHeight: 18,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
                         {t('settings.general.modalAnimation')}
                       </react_native_1.Text>
                       <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 11,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.grayText,
-                    marginTop: 1,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
                         {t('settings.general.modalAnimationDescription')}
                       </react_native_1.Text>
                     </react_native_1.View>
                   </react_native_1.View>
 
                   <react_native_1.View style={{
-                    flexDirection: 'row',
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderRadius: 10,
-                    padding: 3,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.dividerColor,
-                }}>
+                flexDirection: 'row',
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                borderRadius: 10,
+                padding: 3,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.dividerColor,
+            }}>
                     {[
-                    { key: 'slide', label: 'Slide Up' },
-                    { key: 'fade', label: 'Fade' },
-                    { key: 'none', label: 'None' },
-                ].map(opt => {
-                    const isActive = modalAnimationType === opt.key;
-                    return (<TouchableScale_1.default key={opt.key} accessible={true} accessibilityRole="button" accessibilityLabel={`Set transition animation to ${opt.label}`} accessibilityState={{ selected: isActive }} onPress={() => setModalAnimationType(opt.key)} style={{
-                            flex: 1,
-                            paddingVertical: 7,
-                            alignItems: 'center',
-                            borderRadius: 8,
-                            backgroundColor: isActive
-                                ? AppColors_1.AppColors.purple
-                                : 'transparent',
-                        }}>
+                { key: 'slide', label: 'Slide Up' },
+                { key: 'fade', label: 'Fade' },
+                { key: 'none', label: 'None' },
+            ].map(opt => {
+                const isActive = modalAnimationType === opt.key;
+                return (<TouchableScale_1.default key={opt.key} accessible={true} accessibilityRole="button" accessibilityLabel={`Set transition animation to ${opt.label}`} accessibilityState={{ selected: isActive }} onPress={() => setModalAnimationType(opt.key)} style={{
+                        flex: 1,
+                        paddingVertical: 7,
+                        alignItems: 'center',
+                        borderRadius: 8,
+                        backgroundColor: isActive
+                            ? AppColors_1.AppColors.purple
+                            : 'transparent',
+                    }}>
                           <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 11.5,
-                            lineHeight: 15,
-                            color: isActive
-                                ? AppColors_1.AppColors.white
-                                : AppColors_1.AppColors.grayText,
-                        }}>
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11.5,
+                        lineHeight: 15,
+                        color: isActive
+                            ? AppColors_1.AppColors.white
+                            : AppColors_1.AppColors.grayText,
+                    }}>
                             {opt.label}
                           </react_native_1.Text>
                         </TouchableScale_1.default>);
-                })}
+            })}
                   </react_native_1.View>
                 </react_native_1.View>
               </react_native_1.View>
 
               {/* Section 3: Default Startup Tab */}
               <react_native_1.View style={{
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
-                    borderRadius: 14,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    overflow: 'hidden',
-                    padding: 14,
-                    gap: 12,
-                }}>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11,
-                    lineHeight: 14,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    letterSpacing: 0.8,
-                }}>
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
                   {t('settings.startupDefault')}
                 </react_native_1.Text>
 
                 <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 10,
-                }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+            }}>
                   <react_native_1.View style={{
-                    width: 32,
-                    height: 32,
-                    borderRadius: 8,
-                    backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
                     <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={15}/>
                   </react_native_1.View>
                   <react_native_1.View style={{ flex: 1 }}>
                     <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13.5,
-                    lineHeight: 18,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
                       {t('settings.general.defaultOpeningTab')}
                     </react_native_1.Text>
                     <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 11,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.grayText,
-                    marginTop: 1,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
                       {t('settings.general.defaultOpeningTabDesc')}
                     </react_native_1.Text>
                   </react_native_1.View>
                 </react_native_1.View>
 
-                {/* Grid of Default Tab Cards */}
-                <react_native_1.View style={{
-                    flexDirection: 'row',
-                    flexWrap: 'wrap',
-                    gap: 8,
-                    marginTop: 4,
-                }}>
-                  {allModules
-                    .filter(tab => tab.key === 'apis' ||
-                    stagedTabVisibility?.[tab.key] ||
-                    tabVisibility?.[tab.key])
-                    .map(tab => {
-                    const isActive = defaultTab === tab.key;
-                    return (<TouchableScale_1.default key={tab.key} accessible={true} accessibilityRole="button" accessibilityLabel={`Set ${tab.label} as default tab`} accessibilityState={{ selected: isActive }} onPress={() => setDefaultTab(tab.key)} style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 8,
-                            paddingVertical: 10,
-                            paddingHorizontal: 12,
-                            borderRadius: 10,
-                            borderWidth: 1.5,
-                            borderColor: isActive
-                                ? AppColors_1.AppColors.purple
-                                : AppColors_1.AppColors.grayBorderSecondary,
-                            backgroundColor: isActive
-                                ? `${AppColors_1.AppColors.purple}0F`
-                                : AppColors_1.AppColors.primaryLight,
-                            minWidth: '47%',
-                            flex: 1,
-                        }}>
-                          <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 12.5,
-                            lineHeight: 16,
-                            color: isActive
-                                ? AppColors_1.AppColors.purple
-                                : AppColors_1.AppColors.primaryBlack,
-                            flex: 1,
-                        }}>
-                            {tab.label}
-                          </react_native_1.Text>
-                          {isActive && (<react_native_1.View style={{
-                                width: 16,
-                                height: 16,
-                                borderRadius: 8,
-                                backgroundColor: AppColors_1.AppColors.purple,
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                            }}>
-                              <NetworkIcons_1.CheckIcon size={9} color={AppColors_1.AppColors.white}/>
-                            </react_native_1.View>)}
-                        </TouchableScale_1.default>);
-                })}
-                </react_native_1.View>
-              </react_native_1.View>
-
-              {/* Section 4: Log Deduplication & Levels */}
-              <react_native_1.View style={{
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
-                    borderRadius: 14,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    overflow: 'hidden',
-                    padding: 14,
-                    gap: 14,
-                }}>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11,
-                    lineHeight: 14,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    letterSpacing: 0.8,
-                }}>
-                  {t('settings.logFiltersDeduplication')}
-                </react_native_1.Text>
-
-                {/* Show Duplicate Logs */}
-                <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                }}>
-                  <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 10,
-                    flex: 1,
-                }}>
+                {/* Sleek Interactive Dropdown Picker */}
+                <react_native_1.View style={{ marginTop: 6, gap: 6 }}>
+                  <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Default opening tab: ${allModules.find(m => m.key === defaultTab)?.label || 'APIs'}`} onPress={() => setIsDefaultTabDropdownOpen(prev => !prev)} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                borderRadius: 10,
+                borderWidth: 1.5,
+                borderColor: isDefaultTabDropdownOpen
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayBorderSecondary,
+                paddingHorizontal: 14,
+                paddingVertical: 11,
+            }}>
                     <react_native_1.View style={{
-                    width: 32,
-                    height: 32,
-                    borderRadius: 8,
-                    backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                      <NetworkIcons_1.EyeIcon color={AppColors_1.AppColors.purple} size={15}/>
-                    </react_native_1.View>
-                    <react_native_1.View style={{ flex: 1 }}>
-                      <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13.5,
-                    lineHeight: 18,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }}>
-                        {t('settings.general.duplicateLogs')}
-                      </react_native_1.Text>
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+            }}>
+                      <react_native_1.View style={{
+                width: 8,
+                height: 8,
+                borderRadius: 4,
+                backgroundColor: AppColors_1.AppColors.purple,
+            }}/>
                       <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 11,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.grayText,
-                    marginTop: 1,
-                }}>
-                        {t('settings.general.duplicateLogsDescription')}
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                        {allModules.find(m => m.key === defaultTab)?.label || 'APIs (Network)'}
                       </react_native_1.Text>
+                      <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.purple}14`,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+                borderRadius: 6,
+            }}>
+                        <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 8.5,
+                color: AppColors_1.AppColors.purple,
+            }}>
+                          DEFAULT
+                        </react_native_1.Text>
+                      </react_native_1.View>
                     </react_native_1.View>
-                  </react_native_1.View>
 
-                  <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle show duplicate logs" accessibilityState={{ checked: showDuplicateLogs }} onPress={() => setShowDuplicateLogs(prev => !prev)} style={{
-                    width: 42,
-                    height: 24,
-                    borderRadius: 12,
-                    backgroundColor: showDuplicateLogs
-                        ? AppColors_1.AppColors.purple
-                        : AppColors_1.AppColors.grayBorderSecondary,
-                    padding: 2,
-                    justifyContent: 'center',
-                    alignItems: showDuplicateLogs
-                        ? 'flex-end'
-                        : 'flex-start',
-                }}>
                     <react_native_1.View style={{
-                    width: 20,
-                    height: 20,
-                    borderRadius: 10,
-                    backgroundColor: AppColors_1.AppColors.white,
-                    shadowColor: AppColors_1.AppColors.black,
-                    shadowOpacity: 0.18,
-                    shadowRadius: 2,
-                    shadowOffset: { width: 0, height: 1 },
-                }}/>
+                transform: [
+                    { rotate: isDefaultTabDropdownOpen ? '180deg' : '0deg' },
+                ],
+            }}>
+                      <NetworkIcons_1.ChevronDownIcon color={AppColors_1.AppColors.grayText} size={15}/>
+                    </react_native_1.View>
                   </TouchableScale_1.default>
-                </react_native_1.View>
-
-                <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
 
-                {/* Console Log Levels */}
-                <react_native_1.View style={{ gap: 8 }}>
-                  <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 10,
-                }}>
-                    <react_native_1.View style={{
-                    width: 32,
-                    height: 32,
-                    borderRadius: 8,
-                    backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                      <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={15}/>
-                    </react_native_1.View>
-                    <react_native_1.View style={{ flex: 1 }}>
-                      <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13.5,
-                    lineHeight: 18,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }}>
-                        {t('settings.general.activeConsoleLogLevels')}
-                      </react_native_1.Text>
-                      <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 11,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.grayText,
-                    marginTop: 1,
+                  {/* Dropdown Options List */}
+                  {isDefaultTabDropdownOpen && (<react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                    shadowColor: AppColors_1.AppColors.black,
+                    shadowOpacity: 0.08,
+                    shadowRadius: 6,
+                    shadowOffset: { width: 0, height: 3 },
+                    elevation: 4,
                 }}>
-                        {t('settings.general.activeConsoleLogLevelsDesc')}
-                      </react_native_1.Text>
-                    </react_native_1.View>
-                  </react_native_1.View>
-
-                  <react_native_1.View style={{ flexDirection: 'row', gap: 8, marginTop: 4 }}>
-                    {[
-                    {
-                        key: 'info',
-                        label: 'Info',
-                        color: AppColors_1.AppColors.blue500,
-                    },
-                    {
-                        key: 'warn',
-                        label: 'Warning',
-                        color: AppColors_1.AppColors.amber500,
-                    },
-                    {
-                        key: 'error',
-                        label: 'Error',
-                        color: AppColors_1.AppColors.errorColor,
-                    },
-                ].map(level => {
-                    const isActive = showConsoleLevels[level.key];
-                    return (<TouchableScale_1.default key={level.key} accessible={true} accessibilityRole="checkbox" accessibilityLabel={`Toggle ${level.label} logs`} accessibilityState={{ checked: isActive }} onPress={() => setShowConsoleLevels(prev => ({
-                            ...prev,
-                            [level.key]: !prev[level.key],
-                        }))} style={{
-                            flex: 1,
+                      {allModules
+                    .filter(tab => tab.key === 'apis' ||
+                    stagedTabVisibility?.[tab.key] ||
+                    tabVisibility?.[tab.key])
+                    .map((tab, idx, arr) => {
+                    const isActive = defaultTab === tab.key;
+                    const isLast = idx === arr.length - 1;
+                    return (<TouchableScale_1.default key={tab.key} accessible={true} accessibilityRole="button" accessibilityLabel={`Select ${tab.label} as default tab`} onPress={() => {
+                            setDefaultTab(tab.key);
+                            setIsDefaultTabDropdownOpen(false);
+                        }} style={{
                             flexDirection: 'row',
                             alignItems: 'center',
-                            justifyContent: 'center',
-                            gap: 6,
-                            paddingVertical: 8,
-                            borderRadius: 9,
-                            borderWidth: 1.5,
-                            borderColor: isActive
-                                ? level.color
-                                : AppColors_1.AppColors.grayBorderSecondary,
+                            justifyContent: 'space-between',
+                            paddingHorizontal: 14,
+                            paddingVertical: 11,
                             backgroundColor: isActive
-                                ? `${level.color}0D`
-                                : AppColors_1.AppColors.primaryLight,
+                                ? `${AppColors_1.AppColors.purple}0F`
+                                : 'transparent',
+                            borderBottomWidth: isLast ? 0 : 1,
+                            borderBottomColor: AppColors_1.AppColors.dividerColor,
                         }}>
-                          <react_native_1.View style={{
-                            width: 8,
-                            height: 8,
-                            borderRadius: 4,
+                              <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 10,
+                        }}>
+                                <react_native_1.View style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: 3,
                             backgroundColor: isActive
-                                ? level.color
-                                : AppColors_1.AppColors.grayBorderSecondary,
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayTextWeak,
                         }}/>
-                          <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 11.5,
-                            lineHeight: 15,
+                                <react_native_1.Text style={{
+                            fontFamily: isActive
+                                ? AppFonts_1.AppFonts.interBold
+                                : AppFonts_1.AppFonts.interMedium,
+                            fontSize: 13,
                             color: isActive
-                                ? level.color
-                                : AppColors_1.AppColors.grayText,
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.primaryBlack,
                         }}>
-                            {level.label}
-                          </react_native_1.Text>
-                        </TouchableScale_1.default>);
+                                  {tab.label}
+                                </react_native_1.Text>
+                              </react_native_1.View>
+                              {isActive && (<NetworkIcons_1.CheckIcon size={14} color={AppColors_1.AppColors.purple}/>)}
+                            </TouchableScale_1.default>);
                 })}
-                  </react_native_1.View>
+                    </react_native_1.View>)}
                 </react_native_1.View>
               </react_native_1.View>
-
-              {/* Section 5: Reset Settings */}
-              <react_native_1.View style={{
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
-                    borderRadius: 14,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.errorColor}33`,
-                    overflow: 'hidden',
-                    padding: 14,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 12,
-                }}>
-                <react_native_1.View style={{
-                    width: 34,
-                    height: 34,
-                    borderRadius: 9,
-                    backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={15}/>
-                </react_native_1.View>
-                <react_native_1.View style={{ flex: 1 }}>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13.5,
-                    lineHeight: 18,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }}>
-                    {t('settings.resetSettings')}
-                  </react_native_1.Text>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 11,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.grayText,
-                    marginTop: 1,
-                }}>
-                    {t('settings.resetSettingsDesc')}
-                  </react_native_1.Text>
-                </react_native_1.View>
-
-                <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Reset all settings to default" onPress={resetToDefaults} style={{
-                    paddingHorizontal: 12,
-                    paddingVertical: 7,
-                    borderRadius: 8,
-                    backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.errorColor}38`,
-                }}>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11.5,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.errorColor,
-                }}>
-                    {t('settings.reset')}
-                  </react_native_1.Text>
-                </TouchableScale_1.default>
-              </react_native_1.View>
             </react_native_1.View>)}
-
-          {/* Storage & Engine Status Card */}
-          <react_native_1.View style={{
-                backgroundColor: isPersistent
-                    ? `${AppColors_1.AppColors.liveGreen}12`
-                    : `${AppColors_1.AppColors.amber600}12`,
-                borderRadius: 12,
-                borderWidth: 1,
-                borderColor: isPersistent
-                    ? `${AppColors_1.AppColors.liveGreen}33`
-                    : `${AppColors_1.AppColors.amber600}33`,
-                padding: 12,
-                marginBottom: 10,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-            }}>
-            <react_native_1.View style={{
-                width: 8,
-                height: 8,
-                borderRadius: 4,
-                backgroundColor: isPersistent
-                    ? AppColors_1.AppColors.green500
-                    : AppColors_1.AppColors.amber600,
-            }}/>
-            <react_native_1.View style={{ flex: 1 }}>
-              <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 12,
-                lineHeight: 16,
-                color: isPersistent
-                    ? AppColors_1.AppColors.green700
-                    : AppColors_1.AppColors.amber800,
-            }}>
-                {isPersistent
-                ? t('settings.general.storageStatusEnabled', {
-                    type: storage ? 'Custom Storage' : 'iOS NSUserDefaults',
-                })
-                : t('settings.general.storageStatusDisabled')}
-              </react_native_1.Text>
-              <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interRegular,
-                fontSize: 10.5,
-                lineHeight: 14,
-                color: isPersistent
-                    ? AppColors_1.AppColors.green800
-                    : AppColors_1.AppColors.amber800,
-                marginTop: 2,
-                opacity: 0.85,
-            }}>
-                {isPersistent
-                ? t('settings.general.storageStatusEnabledDesc')
-                : t('settings.general.storageStatusDisabledDesc')}
-              </react_native_1.Text>
-            </react_native_1.View>
-          </react_native_1.View>
+          <react_native_1.View style={{ height: 48 }}/>
         </react_native_1.ScrollView>
 
         {/* Bottom Sticky Action Bar for Save Changes */}
         {settingsActiveSubTab === 'module' && (<react_native_1.View style={{
-                    paddingHorizontal: 16,
-                    paddingTop: 12,
-                    paddingBottom: react_native_1.Platform.OS === 'ios' ? 26 : 14,
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
-                    borderTopWidth: 1,
-                    borderTopColor: AppColors_1.AppColors.dividerColor,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 12,
-                    shadowColor: AppColors_1.AppColors.black,
-                    shadowOpacity: 0.08,
-                    shadowRadius: 8,
-                    shadowOffset: { width: 0, height: -3 },
-                    elevation: 8,
-                }}>
+                paddingHorizontal: 16,
+                paddingTop: 12,
+                paddingBottom: react_native_1.Platform.OS === 'ios' ? 36 : 24,
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderTopWidth: 1,
+                borderTopColor: AppColors_1.AppColors.dividerColor,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 12,
+                shadowColor: AppColors_1.AppColors.black,
+                shadowOpacity: 0.08,
+                shadowRadius: 8,
+                shadowOffset: { width: 0, height: -3 },
+                elevation: 8,
+            }}>
             <react_native_1.View style={{ flex: 1 }}>
               <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13,
-                    lineHeight: 17,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13,
+                lineHeight: 17,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
                 {stagedActiveCount} of {allModules.length} Modules Active
               </react_native_1.Text>
               <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 11,
-                    lineHeight: 15,
-                    color: hasUnsavedChanges
-                        ? AppColors_1.AppColors.purple
-                        : AppColors_1.AppColors.grayText,
-                    marginTop: 1,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: hasUnsavedChanges
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
                 {hasUnsavedChanges
-                    ? t('settings.unsavedPending')
-                    : t('settings.allSynchronized')}
+                ? t('settings.unsavedPending')
+                : t('settings.allSynchronized')}
               </react_native_1.Text>
             </react_native_1.View>
 
             <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Save Changes" onPress={handleSaveChanges} style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                    backgroundColor: hasUnsavedChanges
-                        ? AppColors_1.AppColors.purple
-                        : `${AppColors_1.AppColors.purple}22`,
-                    paddingHorizontal: 18,
-                    paddingVertical: 10,
-                    borderRadius: 10,
-                }}>
-              <NetworkIcons_1.CheckIcon size={14} color={hasUnsavedChanges ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple}/>
-              <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13,
-                    lineHeight: 17,
-                    color: hasUnsavedChanges ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple,
-                }}>
-                {t('settings.saveChanges')}
-              </react_native_1.Text>
-            </TouchableScale_1.default>
-          </react_native_1.View>)}
-      </react_native_1.View>);
-    }
-    const goBackToMain = () => {
-        (0, InspectorContext_1.animateNextLayout)();
-        setSettingsPage('main');
-    };
-    // Helper: settings row with icon + label + optional description
-    const renderSettingRow = (opts) => {
-        return (<react_native_1.View style={{
-                paddingVertical: 12,
-                borderBottomWidth: opts.isLast ? 0 : 1,
-                borderBottomColor: AppColors_1.AppColors.dividerColor,
-            }}>
-        <TouchableScale_1.default disabled={!opts.onPress} onPress={opts.onPress} style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 12,
-            }}>
-          <react_native_1.View style={{
-                width: 36,
-                height: 36,
+                gap: 6,
+                backgroundColor: hasUnsavedChanges
+                    ? AppColors_1.AppColors.purple
+                    : `${AppColors_1.AppColors.purple}22`,
+                paddingHorizontal: 18,
+                paddingVertical: 10,
                 borderRadius: 10,
-                backgroundColor: AppColors_1.AppColors.purpleShade50,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.purple}2E`,
-                alignItems: 'center',
-                justifyContent: 'center',
             }}>
-            {opts.icon}
-          </react_native_1.View>
-          <react_native_1.View style={{ flex: 1 }}>
-            <react_native_1.Text style={{
+              <NetworkIcons_1.CheckIcon size={14} color={hasUnsavedChanges ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple}/>
+              <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 14,
-                lineHeight: 18,
-                color: AppColors_1.AppColors.primaryBlack,
+                fontSize: 13,
+                lineHeight: 17,
+                color: hasUnsavedChanges ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple,
             }}>
-              {opts.label}
-            </react_native_1.Text>
-            {opts.description ? (<react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 11,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.grayText,
-                    marginTop: 1,
-                }}>
-                {opts.description}
-              </react_native_1.Text>) : null}
-          </react_native_1.View>
-          {opts.right || null}
-        </TouchableScale_1.default>
-        {opts.numericInput && (<react_native_1.View style={{ marginTop: 10, gap: 6 }}>
-            <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.dividerColor,
-                    paddingHorizontal: 12,
-                    paddingVertical: 4,
-                }}>
-              <react_native_1.TextInput style={{
-                    flex: 1,
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 14,
-                    lineHeight: 18,
-                    color: AppColors_1.AppColors.primaryBlack,
-                    paddingVertical: 6,
-                }} value={String(opts.numericInput.value || '')} onChangeText={text => {
-                    const num = parseInt(text.replace(/[^0-9]/g, ''), 10);
-                    if (!isNaN(num)) {
-                        const clamped = Math.max(opts.numericInput?.min ?? 1, Math.min(opts.numericInput?.max ?? 10000, num));
-                        opts.numericInput?.onChange(clamped);
-                    }
-                }} keyboardType={opts.numericInput.keyboardType ?? 'number-pad'} placeholder={opts.numericInput.placeholder} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} maxLength={6} selectTextOnFocus/>
-              <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11,
-                    color: AppColors_1.AppColors.purple,
-                    marginLeft: 6,
-                }}>
-                MAX
+                {t('settings.saveChanges')}
               </react_native_1.Text>
-            </react_native_1.View>
-            {opts.numericInput.min !== undefined || opts.numericInput.max !== undefined ? (<react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interRegular,
-                        fontSize: 10,
-                        lineHeight: 13,
-                        color: AppColors_1.AppColors.grayTextWeak,
-                    }}>
-                Range: {opts.numericInput.min ?? 1} - {opts.numericInput.max ?? '∞'}
-              </react_native_1.Text>) : null}
-          </react_native_1.View>)}
-        {opts.picker && (<react_native_1.View style={{
-                    flexDirection: 'row',
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderRadius: 8,
-                    padding: 2.5,
-                    marginTop: 10,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.dividerColor,
-                }}>
-            {opts.picker.options.map(opt => {
-                    const isActive = opts.picker.selectedValue === opt;
-                    return (<TouchableScale_1.default key={String(opt)} onPress={() => opts.picker.onSelect(opt)} style={{
-                            flex: 1,
-                            paddingVertical: 6,
-                            alignItems: 'center',
-                            borderRadius: 6,
-                            backgroundColor: isActive
-                                ? AppColors_1.AppColors.purple
-                                : 'transparent',
-                        }}>
-                  <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 11,
-                            lineHeight: 14,
-                            color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
-                        }}>
-                    {opts.picker.formatLabel
-                            ? opts.picker.formatLabel(opt)
-                            : opt}
-                  </react_native_1.Text>
-                </TouchableScale_1.default>);
-                })}
+            </TouchableScale_1.default>
           </react_native_1.View>)}
       </react_native_1.View>);
-    };
     let content = null;
     let title = '';
     let icon = null;
@@ -1785,7 +1429,7 @@ const SettingsPanel = () => {
         title = t('settings.apis.title');
         icon = <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.white} size={16}/>;
         rightInfo = t('settings.apis.total', { count: logs.length });
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
@@ -1801,8 +1445,8 @@ const SettingsPanel = () => {
                     value: maxNetworkLogs,
                     onChange: setMaxNetworkLogs,
                     min: 10,
-                    max: 5000,
-                    placeholder: 'Enter max requests (10-5000)',
+                    max: 100,
+                    placeholder: 'Enter max requests (10-100)',
                 },
                 isLast: true,
             })}
@@ -1844,13 +1488,14 @@ const SettingsPanel = () => {
               </react_native_1.View>),
             })}
         </react_native_1.View>
+        <react_native_1.View style={{ height: 48 }}/>
       </react_native_1.ScrollView>);
     }
     else if (settingsPage === 'logs') {
         title = t('settings.logs.title');
         icon = <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.white} size={16}/>;
         rightInfo = t('settings.logs.total', { count: consoleLogs.length });
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
@@ -1867,8 +1512,8 @@ const SettingsPanel = () => {
                     value: maxConsoleLogs,
                     onChange: setMaxConsoleLogs,
                     min: 10,
-                    max: 10000,
-                    placeholder: 'Enter max logs (10-10000)',
+                    max: 100,
+                    placeholder: 'Enter max logs (10-100)',
                 },
             })}
           <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
@@ -1932,6 +1577,96 @@ const SettingsPanel = () => {
             })}
         </react_native_1.View>
 
+        {/* Log Deduplication Card */}
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 16,
+                gap: 14,
+            }}>
+          <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+            {t('settings.logFiltersDeduplication')}
+          </react_native_1.Text>
+
+          {/* Show Duplicate Logs */}
+          <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+            <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+            }}>
+              <react_native_1.View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                <NetworkIcons_1.EyeIcon color={AppColors_1.AppColors.purple} size={15}/>
+              </react_native_1.View>
+              <react_native_1.View style={{ flex: 1 }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                  {t('settings.general.duplicateLogs')}
+                </react_native_1.Text>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                  {t('settings.general.duplicateLogsDescription')}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle show duplicate logs" accessibilityState={{ checked: showDuplicateLogs }} onPress={() => setShowDuplicateLogs(prev => !prev)} style={{
+                width: 42,
+                height: 24,
+                borderRadius: 12,
+                backgroundColor: showDuplicateLogs
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayBorderSecondary,
+                padding: 2,
+                justifyContent: 'center',
+                alignItems: showDuplicateLogs
+                    ? 'flex-end'
+                    : 'flex-start',
+            }}>
+              <react_native_1.View style={{
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.white,
+                shadowColor: AppColors_1.AppColors.black,
+                shadowOpacity: 0.18,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+            }}/>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+        </react_native_1.View>
+
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 borderRadius: 14,
@@ -1967,13 +1702,14 @@ const SettingsPanel = () => {
               </react_native_1.View>),
             })}
         </react_native_1.View>
+        <react_native_1.View style={{ height: 48 }}/>
       </react_native_1.ScrollView>);
     }
     else if (settingsPage === 'analytics') {
         title = t('settings.analytics.title');
         icon = <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.white} size={16}/>;
         rightInfo = t('settings.analytics.total', { count: analyticsEvents.length });
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
@@ -1989,8 +1725,8 @@ const SettingsPanel = () => {
                     value: maxAnalyticsEventsLimit,
                     onChange: setMaxAnalyticsEventsLimit,
                     min: 10,
-                    max: 5000,
-                    placeholder: 'Enter max events (10-5000)',
+                    max: 75,
+                    placeholder: 'Enter max events (10-75)',
                 },
                 isLast: true,
             })}
@@ -2031,13 +1767,14 @@ const SettingsPanel = () => {
               </react_native_1.View>),
             })}
         </react_native_1.View>
+        <react_native_1.View style={{ height: 48 }}/>
       </react_native_1.ScrollView>);
     }
     else if (settingsPage === 'redux') {
         title = t('settings.redux.title');
         icon = <NetworkIcons_1.ReduxIcon color={AppColors_1.AppColors.white} size={16}/>;
         rightInfo = t('settings.redux.reducers', { count: Object.keys(reduxState || {}).length });
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
@@ -2119,13 +1856,14 @@ const SettingsPanel = () => {
               </react_native_1.View>),
             })}
         </react_native_1.View>
+        <react_native_1.View style={{ height: 48 }}/>
       </react_native_1.ScrollView>);
     }
     else if (settingsPage === 'crash') {
         title = t('settings.crash.title');
         icon = <NetworkIcons_1.CrashIcon color={AppColors_1.AppColors.white} size={16}/>;
         rightInfo = `Total: ${crashRecords?.length || 0}`;
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
@@ -2142,8 +1880,8 @@ const SettingsPanel = () => {
                     value: maxCrashLogs,
                     onChange: setMaxCrashLogs,
                     min: 5,
-                    max: 500,
-                    placeholder: 'Enter max crashes (5-500)',
+                    max: 50,
+                    placeholder: 'Enter max crashes (5-50)',
                 },
             })}
           <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
@@ -2205,13 +1943,14 @@ const SettingsPanel = () => {
               </react_native_1.View>),
             })}
         </react_native_1.View>
+        <react_native_1.View style={{ height: 48 }}/>
       </react_native_1.ScrollView>);
     }
     else if (settingsPage === 'bundle') {
         title = t('settings.bundle.title');
         icon = <NetworkIcons_1.PackageIcon color={AppColors_1.AppColors.white} size={16}/>;
         rightInfo = 'Metro';
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
@@ -2288,13 +2027,14 @@ const SettingsPanel = () => {
               </react_native_1.View>),
             })}
         </react_native_1.View>
+        <react_native_1.View style={{ height: 48 }}/>
       </react_native_1.ScrollView>);
     }
     else if (settingsPage === 'performance') {
         title = t('settings.performance.title');
         icon = <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.white} size={16}/>;
         rightInfo = '60 FPS Target';
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
@@ -2371,65 +2111,51 @@ const SettingsPanel = () => {
               </react_native_1.View>),
             })}
         </react_native_1.View>
+        <react_native_1.View style={{ height: 48 }}/>
       </react_native_1.ScrollView>);
     }
+    const subPageAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        if (settingsPage !== 'main') {
+            subPageAnim.setValue(0);
+            react_native_1.Animated.spring(subPageAnim, {
+                toValue: 1,
+                friction: 8,
+                tension: 65,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [settingsPage]);
     return (<react_native_1.View style={{
             flex: 1,
             backgroundColor: AppColors_1.AppColors.grayBackground,
         }}>
-      <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
-        <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
-          <react_native_1.View style={[styles_1.default.header, { paddingHorizontal: 16, gap: 12 }]}>
-            <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={t('settings.back')} onPress={goBackToMain} hitSlop={12} style={{
-            padding: 8,
-            borderRadius: 10,
-            backgroundColor: `${AppColors_1.AppColors.white}26`,
-            borderWidth: 1,
-            borderColor: `${AppColors_1.AppColors.white}14`,
-        }}>
-              <NetworkIcons_1.WhiteBackNavigation color={AppColors_1.AppColors.white} size={16}/>
-            </TouchableScale_1.default>
-            {icon && (<react_native_1.View style={{
-                width: 30,
-                height: 30,
-                borderRadius: 8,
-                backgroundColor: `${AppColors_1.AppColors.white}26`,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                {icon}
-              </react_native_1.View>)}
-            <react_native_1.View style={{ flex: 1 }}>
-              <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 17,
-            lineHeight: 22,
-            color: AppColors_1.AppColors.white,
-        }}>
-                {title}
-              </react_native_1.Text>
-            </react_native_1.View>
-            {rightInfo ? (<react_native_1.View style={{
-                backgroundColor: `${AppColors_1.AppColors.white}26`,
-                paddingHorizontal: 8,
-                paddingVertical: 4,
-                borderRadius: 8,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}1A`,
-            }}>
-                <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors_1.AppColors.white,
-            }}>
-                  {rightInfo}
-                </react_native_1.Text>
-              </react_native_1.View>) : null}
-          </react_native_1.View>
-        </react_native_1.View>
-      </react_native_linear_gradient_1.default>
-      {content}
+      {/* ─── Persistent Main Settings (Retains 100% scroll position) ─── */}
+      <react_native_1.View style={[
+            react_native_1.StyleSheet.absoluteFill,
+            settingsPage !== 'main' && { pointerEvents: 'none' },
+        ]}>
+        {renderMainSettingsContent()}
+      </react_native_1.View>
+
+      {/* ─── Sub-module Settings Overlay (Smooth Animated Slide) ─── */}
+      {settingsPage !== 'main' && (<react_native_1.Animated.View style={[
+                react_native_1.StyleSheet.absoluteFill,
+                {
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    opacity: subPageAnim,
+                    transform: [
+                        {
+                            translateX: subPageAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [30, 0],
+                            }),
+                        },
+                    ],
+                },
+            ]}>
+          {content}
+        </react_native_1.Animated.View>)}
     </react_native_1.View>);
 };
 exports.default = SettingsPanel;