react-native-inapp-inspector 2.0.3 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/android/.gradle/8.9/checksums/checksums.lock +0 -0
  2. package/android/.gradle/8.9/checksums/md5-checksums.bin +0 -0
  3. package/android/.gradle/8.9/checksums/sha1-checksums.bin +0 -0
  4. package/android/.gradle/8.9/dependencies-accessors/gc.properties +0 -0
  5. package/android/.gradle/8.9/executionHistory/executionHistory.lock +0 -0
  6. package/android/.gradle/8.9/fileChanges/last-build.bin +0 -0
  7. package/android/.gradle/8.9/fileHashes/fileHashes.lock +0 -0
  8. package/android/.gradle/8.9/gc.properties +0 -0
  9. package/android/.gradle/9.2.0/checksums/checksums.lock +0 -0
  10. package/android/.gradle/9.2.0/fileChanges/last-build.bin +0 -0
  11. package/android/.gradle/9.2.0/fileHashes/fileHashes.bin +0 -0
  12. package/android/.gradle/9.2.0/fileHashes/fileHashes.lock +0 -0
  13. package/android/.gradle/9.2.0/gc.properties +0 -0
  14. package/android/.gradle/buildOutputCleanup/buildOutputCleanup.lock +0 -0
  15. package/android/.gradle/buildOutputCleanup/cache.properties +2 -0
  16. package/android/.gradle/vcs-1/gc.properties +0 -0
  17. package/android/build/reports/problems/problems-report.html +659 -0
  18. package/dist/commonjs/components/Inspector/InspectorHeader.js +87 -50
  19. package/dist/commonjs/components/Inspector/MainScreen.js +1 -0
  20. package/dist/commonjs/components/Inspector/NetworkTab.js +317 -12
  21. package/dist/commonjs/components/Inspector/NpmUpdateToast.js +88 -39
  22. package/dist/commonjs/components/Inspector/SettingsPanel.js +525 -359
  23. package/dist/commonjs/components/Inspector/UpdateAvailableModal.d.ts +8 -0
  24. package/dist/commonjs/components/Inspector/UpdateAvailableModal.js +469 -0
  25. package/dist/commonjs/constants/version.d.ts +1 -1
  26. package/dist/commonjs/constants/version.js +1 -1
  27. package/dist/commonjs/helpers/searchQueryParser.d.ts +8 -3
  28. package/dist/commonjs/helpers/searchQueryParser.js +85 -31
  29. package/dist/commonjs/helpers/telemetry.js +4 -4
  30. package/dist/commonjs/index.js +58 -7
  31. package/dist/commonjs/types/interfaces.d.ts +9 -0
  32. package/dist/esm/components/Inspector/InspectorHeader.js +87 -50
  33. package/dist/esm/components/Inspector/MainScreen.js +1 -0
  34. package/dist/esm/components/Inspector/NetworkTab.js +317 -12
  35. package/dist/esm/components/Inspector/NpmUpdateToast.js +88 -39
  36. package/dist/esm/components/Inspector/SettingsPanel.js +526 -360
  37. package/dist/esm/components/Inspector/UpdateAvailableModal.d.ts +8 -0
  38. package/dist/esm/components/Inspector/UpdateAvailableModal.js +432 -0
  39. package/dist/esm/constants/version.d.ts +1 -1
  40. package/dist/esm/constants/version.js +1 -1
  41. package/dist/esm/helpers/searchQueryParser.d.ts +8 -3
  42. package/dist/esm/helpers/searchQueryParser.js +85 -31
  43. package/dist/esm/helpers/telemetry.js +4 -4
  44. package/dist/esm/index.js +58 -7
  45. package/dist/esm/types/interfaces.d.ts +9 -0
  46. package/package.json +1 -1
package/dist/esm/components/Inspector/SettingsPanel.js CHANGED
@@ -18,10 +18,13 @@ import { isReduxConnected } from '../../customHooks/reduxLogger';
18
18
  import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
19
19
  import { useTranslation } from '../../i18n';
20
20
  import { getTelemetryConsentStatus, setTelemetryConsent, sendSessionTelemetryPing, } from '../../helpers/telemetry';
21
- import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, } from '../NetworkIcons';
21
+ import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, } from '../NetworkIcons';
22
+ import { LIB_VERSION } from '../../constants';
23
+ import { copyToClipboard } from '../../helpers';
24
+ import { showToast } from '../../helpers/toast';
22
25
  const SettingsPanel = () => {
23
26
  const { t } = useTranslation();
24
- const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, 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, } = useInspector();
27
+ const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, 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, updateAvailable, latestNpmVersion, } = useInspector();
25
28
  const [stagedHeight, setStagedHeight] = useState(modalHeightPercent);
26
29
  const [telemetryConsent, setTelemetryConsentState] = useState(true);
27
30
  useEffect(() => {
@@ -220,13 +223,15 @@ const SettingsPanel = () => {
220
223
  MAX
221
224
  </Text>
222
225
  </View>
223
- {opts.numericInput.min !== undefined || opts.numericInput.max !== undefined ? (<Text style={{
226
+ {opts.numericInput.min !== undefined ||
227
+ opts.numericInput.max !== undefined ? (<Text style={{
224
228
  fontFamily: AppFonts.interRegular,
225
229
  fontSize: 10,
226
230
  lineHeight: 13,
227
231
  color: AppColors.grayTextWeak,
228
232
  }}>
229
- Range: {opts.numericInput.min ?? 1} - {opts.numericInput.max ?? '∞'}
233
+ Range: {opts.numericInput.min ?? 1} -{' '}
234
+ {opts.numericInput.max ?? '∞'}
230
235
  </Text>) : null}
231
236
  </View>)}
232
237
  {opts.picker && (<View style={{
@@ -269,8 +274,8 @@ const SettingsPanel = () => {
269
274
  backgroundColor: AppColors.grayBackground,
270
275
  }}>
271
276
  <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 14 }} showsVerticalScrollIndicator={false}>
272
- {/* Segmented Top Navigation Sub-Tabs */}
273
- <View style={{
277
+ {/* Segmented Top Navigation Sub-Tabs */}
278
+ <View style={{
274
279
  flexDirection: 'row',
275
280
  backgroundColor: AppColors.primaryLight,
276
281
  borderRadius: 12,
@@ -282,7 +287,7 @@ const SettingsPanel = () => {
282
287
  shadowRadius: 4,
283
288
  shadowOffset: { width: 0, height: 2 },
284
289
  }}>
285
- <TouchableScale accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.modulesAndTools')} accessibilityState={{ selected: settingsActiveSubTab === 'module' }} onPress={() => {
290
+ <TouchableScale accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.modulesAndTools')} accessibilityState={{ selected: settingsActiveSubTab === 'module' }} onPress={() => {
286
291
  animateNextLayout();
287
292
  setSettingsActiveSubTab('module');
288
293
  }} style={{
@@ -297,10 +302,10 @@ const SettingsPanel = () => {
297
302
  ? AppColors.purple
298
303
  : 'transparent',
299
304
  }}>
300
- <LayersIcon color={settingsActiveSubTab === 'module'
305
+ <LayersIcon color={settingsActiveSubTab === 'module'
301
306
  ? AppColors.white
302
307
  : AppColors.grayText} size={13}/>
303
- <Text style={{
308
+ <Text style={{
304
309
  fontFamily: AppFonts.interBold,
305
310
  fontSize: 12.5,
306
311
  lineHeight: 16,
@@ -308,11 +313,11 @@ const SettingsPanel = () => {
308
313
  ? AppColors.white
309
314
  : AppColors.grayText,
310
315
  }}>
311
- {t('settings.modulesAndTools')}
312
- </Text>
313
- </TouchableScale>
316
+ {t('settings.modulesAndTools')}
317
+ </Text>
318
+ </TouchableScale>
314
319
 
315
- <TouchableScale accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.uiPreferences')} accessibilityState={{ selected: settingsActiveSubTab === 'ui' }} onPress={() => {
320
+ <TouchableScale accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.uiPreferences')} accessibilityState={{ selected: settingsActiveSubTab === 'ui' }} onPress={() => {
316
321
  animateNextLayout();
317
322
  setSettingsActiveSubTab('ui');
318
323
  }} style={{
@@ -327,10 +332,10 @@ const SettingsPanel = () => {
327
332
  ? AppColors.purple
328
333
  : 'transparent',
329
334
  }}>
330
- <ScreenIcon color={settingsActiveSubTab === 'ui'
335
+ <ScreenIcon color={settingsActiveSubTab === 'ui'
331
336
  ? AppColors.white
332
337
  : AppColors.grayText} size={13}/>
333
- <Text style={{
338
+ <Text style={{
334
339
  fontFamily: AppFonts.interBold,
335
340
  fontSize: 12.5,
336
341
  lineHeight: 16,
@@ -338,15 +343,15 @@ const SettingsPanel = () => {
338
343
  ? AppColors.white
339
344
  : AppColors.grayText,
340
345
  }}>
341
- {t('settings.uiPreferences')}
342
- </Text>
343
- </TouchableScale>
344
- </View>
346
+ {t('settings.uiPreferences')}
347
+ </Text>
348
+ </TouchableScale>
349
+ </View>
345
350
 
346
- {settingsActiveSubTab === 'module' ? (<View style={{ gap: 12 }}>
347
- {/* Individual Module Cards with Left Checkboxes */}
348
- <View style={{ gap: 10 }}>
349
- {allModules.map(moduleItem => {
351
+ {settingsActiveSubTab === 'module' ? (<View style={{ gap: 12 }}>
352
+ {/* Individual Module Cards with Left Checkboxes */}
353
+ <View style={{ gap: 10 }}>
354
+ {allModules.map(moduleItem => {
350
355
  const isReduxAvail = isReduxConnected();
351
356
  const isAnalyticsAvail = isAnalyticsConnected();
352
357
  const isUnavailable = (moduleItem.key === 'redux' && !isReduxAvail) ||
@@ -384,14 +389,14 @@ const SettingsPanel = () => {
384
389
  shadowRadius: 5,
385
390
  shadowOffset: { width: 0, height: 2 },
386
391
  }}>
387
- {/* Top Row: [Checkbox] -> [Icon Tile] -> [Title & Subtitle] */}
388
- <View style={{
392
+ {/* Top Row: [Checkbox] -> [Icon Tile] -> [Title & Subtitle] */}
393
+ <View style={{
389
394
  flexDirection: 'row',
390
395
  alignItems: 'flex-start',
391
396
  gap: 10,
392
397
  }}>
393
- {/* 1. Checkbox on the Left */}
394
- <TouchableScale accessible={true} accessibilityRole="checkbox" accessibilityLabel={`Select ${moduleItem.label}`} accessibilityState={{
398
+ {/* 1. Checkbox on the Left */}
399
+ <TouchableScale accessible={true} accessibilityRole="checkbox" accessibilityLabel={`Select ${moduleItem.label}`} accessibilityState={{
395
400
  checked: isChecked,
396
401
  disabled: isLocked,
397
402
  }} disabled={isLocked} onPress={() => {
@@ -424,14 +429,14 @@ const SettingsPanel = () => {
424
429
  shadowRadius: 2,
425
430
  elevation: isChecked ? 2 : 0,
426
431
  }}>
427
- {moduleItem.key === 'apis' ? (<CheckIcon size={12} color={AppColors.blue500}/>) : isChecked ? (<CheckIcon size={12} color={AppColors.white}/>) : isLocked ? (<Svg width={10} height={10} viewBox="0 0 24 24" fill="none">
428
- <Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
429
- <Path d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" fill={AppColors.grayText}/>
430
- </Svg>) : null}
431
- </TouchableScale>
432
+ {moduleItem.key === 'apis' ? (<CheckIcon size={12} color={AppColors.blue500}/>) : isChecked ? (<CheckIcon size={12} color={AppColors.white}/>) : isLocked ? (<Svg width={10} height={10} viewBox="0 0 24 24" fill="none">
433
+ <Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
434
+ <Path d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" fill={AppColors.grayText}/>
435
+ </Svg>) : null}
436
+ </TouchableScale>
432
437
 
433
- {/* 2. Middle Tap Zone: Icon + Title & Desc */}
434
- <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`${moduleItem.label} settings`} disabled={isUnavailable} onPress={() => {
438
+ {/* 2. Middle Tap Zone: Icon + Title & Desc */}
439
+ <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`${moduleItem.label} settings`} disabled={isUnavailable} onPress={() => {
435
440
  animateNextLayout();
436
441
  setSettingsPage(moduleItem.key);
437
442
  }} style={{
@@ -440,8 +445,8 @@ const SettingsPanel = () => {
440
445
  alignItems: 'flex-start',
441
446
  gap: 10,
442
447
  }}>
443
- {/* Icon Tile */}
444
- <View style={{
448
+ {/* Icon Tile */}
449
+ <View style={{
445
450
  width: 36,
446
451
  height: 36,
447
452
  borderRadius: 10,
@@ -460,38 +465,38 @@ const SettingsPanel = () => {
460
465
  justifyContent: 'center',
461
466
  marginTop: 1,
462
467
  }}>
463
- {moduleItem.icon === 'apis' && (<SignalIcon color={isChecked
468
+ {moduleItem.icon === 'apis' && (<SignalIcon color={isChecked
464
469
  ? AppColors.purple
465
470
  : AppColors.grayTextWeak} size={16}/>)}
466
- {moduleItem.icon === 'logs' && (<TerminalIcon color={isChecked
471
+ {moduleItem.icon === 'logs' && (<TerminalIcon color={isChecked
467
472
  ? AppColors.purple
468
473
  : AppColors.grayTextWeak} size={16}/>)}
469
- {moduleItem.icon === 'performance' && (<PerformanceIcon color={isChecked
474
+ {moduleItem.icon === 'performance' && (<PerformanceIcon color={isChecked
470
475
  ? AppColors.purple
471
476
  : AppColors.grayTextWeak} size={16}/>)}
472
- {moduleItem.icon === 'bundle' && (<PackageIcon color={isChecked
477
+ {moduleItem.icon === 'bundle' && (<PackageIcon color={isChecked
473
478
  ? AppColors.purple
474
479
  : AppColors.grayTextWeak} size={16}/>)}
475
- {moduleItem.icon === 'crash' && (<CrashIcon color={isChecked
480
+ {moduleItem.icon === 'crash' && (<CrashIcon color={isChecked
476
481
  ? AppColors.purple
477
482
  : AppColors.grayTextWeak} size={16}/>)}
478
- {moduleItem.icon === 'analytics' && (<AnalyticsIcon color={isChecked
483
+ {moduleItem.icon === 'analytics' && (<AnalyticsIcon color={isChecked
479
484
  ? AppColors.purple
480
485
  : AppColors.grayTextWeak} size={16}/>)}
481
- {moduleItem.icon === 'redux' && (<ReduxIcon color={isChecked
486
+ {moduleItem.icon === 'redux' && (<ReduxIcon color={isChecked
482
487
  ? AppColors.purple
483
488
  : AppColors.grayTextWeak} size={16}/>)}
484
- </View>
489
+ </View>
485
490
 
486
- {/* Titles & Status Pill */}
487
- <View style={{ flex: 1, gap: 2 }}>
488
- <View style={{
491
+ {/* Titles & Status Pill */}
492
+ <View style={{ flex: 1, gap: 2 }}>
493
+ <View style={{
489
494
  flexDirection: 'row',
490
495
  alignItems: 'center',
491
496
  gap: 6,
492
497
  flexWrap: 'wrap',
493
498
  }}>
494
- <Text style={{
499
+ <Text style={{
495
500
  fontFamily: AppFonts.interBold,
496
501
  fontSize: 14,
497
502
  lineHeight: 18,
@@ -499,11 +504,11 @@ const SettingsPanel = () => {
499
504
  ? AppColors.grayText
500
505
  : AppColors.primaryBlack,
501
506
  }}>
502
- {moduleItem.label}
503
- </Text>
507
+ {moduleItem.label}
508
+ </Text>
504
509
 
505
- {/* Default Startup Tab Badge */}
506
- {moduleItem.key === defaultTab &&
510
+ {/* Default Startup Tab Badge */}
511
+ {moduleItem.key === defaultTab &&
507
512
  !isUnavailable && (<View style={{
508
513
  flexDirection: 'row',
509
514
  alignItems: 'center',
@@ -515,25 +520,25 @@ const SettingsPanel = () => {
515
520
  borderColor: `${AppColors.purple}2E`,
516
521
  gap: 3,
517
522
  }}>
518
- <View style={{
523
+ <View style={{
519
524
  width: 4,
520
525
  height: 4,
521
526
  borderRadius: 2,
522
527
  backgroundColor: AppColors.purple,
523
528
  }}/>
524
- <Text style={{
529
+ <Text style={{
525
530
  fontFamily: AppFonts.interBold,
526
531
  fontSize: 8,
527
532
  lineHeight: 11,
528
533
  color: AppColors.purple,
529
534
  letterSpacing: 0.4,
530
535
  }}>
531
- {t('settings.defaultBadge')}
532
- </Text>
533
- </View>)}
536
+ {t('settings.defaultBadge')}
537
+ </Text>
538
+ </View>)}
534
539
 
535
- {/* Status Pill */}
536
- {moduleItem.key === 'apis' ? (<View style={{
540
+ {/* Status Pill */}
541
+ {moduleItem.key === 'apis' ? (<View style={{
537
542
  backgroundColor: `${AppColors.blue500}14`,
538
543
  borderRadius: 4,
539
544
  paddingHorizontal: 5,
@@ -541,16 +546,16 @@ const SettingsPanel = () => {
541
546
  borderWidth: 1,
542
547
  borderColor: `${AppColors.blue500}33`,
543
548
  }}>
544
- <Text style={{
549
+ <Text style={{
545
550
  fontFamily: AppFonts.interBold,
546
551
  fontSize: 8,
547
552
  lineHeight: 11,
548
553
  color: AppColors.blue500,
549
554
  letterSpacing: 0.3,
550
555
  }}>
551
- {t('settings.coreBadge')}
552
- </Text>
553
- </View>) : isUnavailable ? (<View style={{
556
+ {t('settings.coreBadge')}
557
+ </Text>
558
+ </View>) : isUnavailable ? (<View style={{
554
559
  backgroundColor: `${AppColors.amber500}18`,
555
560
  borderRadius: 4,
556
561
  paddingHorizontal: 5,
@@ -558,18 +563,18 @@ const SettingsPanel = () => {
558
563
  borderWidth: 1,
559
564
  borderColor: `${AppColors.amber500}35`,
560
565
  }}>
561
- <Text style={{
566
+ <Text style={{
562
567
  fontFamily: AppFonts.interBold,
563
568
  fontSize: 8,
564
569
  lineHeight: 11,
565
570
  color: AppColors.amber700,
566
571
  letterSpacing: 0.3,
567
572
  }}>
568
- {moduleItem.key === 'redux'
573
+ {moduleItem.key === 'redux'
569
574
  ? t('settings.notConnectedBadge')
570
575
  : t('settings.notDetectedBadge')}
571
- </Text>
572
- </View>) : isChecked ? (<View style={{
576
+ </Text>
577
+ </View>) : isChecked ? (<View style={{
573
578
  backgroundColor: `${AppColors.liveGreen}18`,
574
579
  borderRadius: 4,
575
580
  paddingHorizontal: 5,
@@ -577,16 +582,16 @@ const SettingsPanel = () => {
577
582
  borderWidth: 1,
578
583
  borderColor: `${AppColors.liveGreen}38`,
579
584
  }}>
580
- <Text style={{
585
+ <Text style={{
581
586
  fontFamily: AppFonts.interBold,
582
587
  fontSize: 8,
583
588
  lineHeight: 11,
584
589
  color: AppColors.green700,
585
590
  letterSpacing: 0.3,
586
591
  }}>
587
- {t('settings.activeBadge')}
588
- </Text>
589
- </View>) : (<View style={{
592
+ {t('settings.activeBadge')}
593
+ </Text>
594
+ </View>) : (<View style={{
590
595
  backgroundColor: `${AppColors.grayTextWeak}18`,
591
596
  borderRadius: 4,
592
597
  paddingHorizontal: 5,
@@ -594,33 +599,33 @@ const SettingsPanel = () => {
594
599
  borderWidth: 1,
595
600
  borderColor: `${AppColors.grayTextWeak}2E`,
596
601
  }}>
597
- <Text style={{
602
+ <Text style={{
598
603
  fontFamily: AppFonts.interBold,
599
604
  fontSize: 8,
600
605
  lineHeight: 11,
601
606
  color: AppColors.grayTextWeak,
602
607
  letterSpacing: 0.3,
603
608
  }}>
604
- {t('settings.dormantBadge')}
605
- </Text>
606
- </View>)}
607
- </View>
609
+ {t('settings.dormantBadge')}
610
+ </Text>
611
+ </View>)}
612
+ </View>
608
613
 
609
- <Text style={{
614
+ <Text style={{
610
615
  fontFamily: AppFonts.interRegular,
611
616
  fontSize: 11,
612
617
  color: AppColors.grayText,
613
618
  lineHeight: 15,
614
619
  marginTop: 1,
615
620
  }}>
616
- {moduleItem.desc}
617
- </Text>
618
- </View>
619
- </TouchableScale>
620
- </View>
621
+ {moduleItem.desc}
622
+ </Text>
623
+ </View>
624
+ </TouchableScale>
625
+ </View>
621
626
 
622
- {/* Card Footer: Live Stats + Configure Button */}
623
- {!isUnavailable && (<View style={{
627
+ {/* Card Footer: Live Stats + Configure Button */}
628
+ {!isUnavailable && (<View style={{
624
629
  flexDirection: 'row',
625
630
  alignItems: 'center',
626
631
  justifyContent: 'space-between',
@@ -628,14 +633,14 @@ const SettingsPanel = () => {
628
633
  borderTopWidth: 1,
629
634
  borderTopColor: AppColors.dividerColor,
630
635
  }}>
631
- {/* Live Info Pill */}
632
- <View style={{
636
+ {/* Live Info Pill */}
637
+ <View style={{
633
638
  flexDirection: 'row',
634
639
  alignItems: 'center',
635
640
  gap: 6,
636
641
  flex: 1,
637
642
  }}>
638
- <View style={{
643
+ <View style={{
639
644
  width: 6,
640
645
  height: 6,
641
646
  borderRadius: 3,
@@ -643,18 +648,18 @@ const SettingsPanel = () => {
643
648
  ? AppColors.liveGreen
644
649
  : AppColors.grayTextWeak,
645
650
  }}/>
646
- <Text style={{
651
+ <Text style={{
647
652
  fontFamily: AppFonts.interMedium,
648
653
  fontSize: 11,
649
654
  color: AppColors.grayText,
650
655
  lineHeight: 14,
651
656
  }}>
652
- {liveStats}
653
- </Text>
654
- </View>
657
+ {liveStats}
658
+ </Text>
659
+ </View>
655
660
 
656
- {/* Sleek Configure Button */}
657
- <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Configure ${moduleItem.label} settings`} onPress={() => {
661
+ {/* Sleek Configure Button */}
662
+ <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Configure ${moduleItem.label} settings`} onPress={() => {
658
663
  animateNextLayout();
659
664
  setSettingsPage(moduleItem.key);
660
665
  }} style={{
@@ -668,24 +673,24 @@ const SettingsPanel = () => {
668
673
  borderWidth: 1,
669
674
  borderColor: `${AppColors.purple}26`,
670
675
  }}>
671
- <SettingsIcon color={AppColors.purple} size={11}/>
672
- <Text style={{
676
+ <SettingsIcon color={AppColors.purple} size={11}/>
677
+ <Text style={{
673
678
  fontFamily: AppFonts.interBold,
674
679
  fontSize: 11,
675
680
  lineHeight: 14,
676
681
  color: AppColors.purple,
677
682
  }}>
678
- {t('settings.configure')}
679
- </Text>
680
- <ForwardChevronIcon color={AppColors.purple} size={9}/>
681
- </TouchableScale>
682
- </View>)}
683
- </View>);
683
+ {t('settings.configure')}
684
+ </Text>
685
+ <ForwardChevronIcon color={AppColors.purple} size={9}/>
686
+ </TouchableScale>
687
+ </View>)}
688
+ </View>);
684
689
  })}
685
- </View>
690
+ </View>
686
691
 
687
- {/* Section 3.5: RAM-Based Auto Limits */}
688
- <View style={{
692
+ {/* Section 3.5: RAM-Based Auto Limits */}
693
+ <View style={{
689
694
  backgroundColor: AppColors.primaryLight,
690
695
  borderRadius: 14,
691
696
  borderWidth: 1,
@@ -694,29 +699,29 @@ const SettingsPanel = () => {
694
699
  padding: 14,
695
700
  gap: 12,
696
701
  }}>
697
- <Text style={{
702
+ <Text style={{
698
703
  fontFamily: AppFonts.interBold,
699
704
  fontSize: 11,
700
705
  lineHeight: 14,
701
706
  color: AppColors.grayTextWeak,
702
707
  letterSpacing: 0.8,
703
708
  }}>
704
- RAM-Based Auto Limits
705
- </Text>
709
+ RAM-Based Auto Limits
710
+ </Text>
706
711
 
707
- {/* Auto RAM Limit Toggle */}
708
- <View style={{
712
+ {/* Auto RAM Limit Toggle */}
713
+ <View style={{
709
714
  flexDirection: 'row',
710
715
  alignItems: 'center',
711
716
  justifyContent: 'space-between',
712
717
  }}>
713
- <View style={{
718
+ <View style={{
714
719
  flexDirection: 'row',
715
720
  alignItems: 'center',
716
721
  gap: 10,
717
722
  flex: 1,
718
723
  }}>
719
- <View style={{
724
+ <View style={{
720
725
  width: 32,
721
726
  height: 32,
722
727
  borderRadius: 8,
@@ -724,30 +729,31 @@ const SettingsPanel = () => {
724
729
  alignItems: 'center',
725
730
  justifyContent: 'center',
726
731
  }}>
727
- <PerformanceIcon color={AppColors.purple} size={15}/>
728
- </View>
729
- <View style={{ flex: 1 }}>
730
- <Text style={{
732
+ <PerformanceIcon color={AppColors.purple} size={15}/>
733
+ </View>
734
+ <View style={{ flex: 1 }}>
735
+ <Text style={{
731
736
  fontFamily: AppFonts.interBold,
732
737
  fontSize: 13.5,
733
738
  lineHeight: 18,
734
739
  color: AppColors.primaryBlack,
735
740
  }}>
736
- Auto-Calculate Limits from Device RAM
737
- </Text>
738
- <Text style={{
741
+ Auto-Calculate Limits from Device RAM
742
+ </Text>
743
+ <Text style={{
739
744
  fontFamily: AppFonts.interRegular,
740
745
  fontSize: 11,
741
746
  lineHeight: 15,
742
747
  color: AppColors.grayText,
743
748
  marginTop: 1,
744
749
  }}>
745
- Automatically set API, Logs, Analytics & Crash limits based on available memory
746
- </Text>
747
- </View>
750
+ Automatically set API, Logs, Analytics & Crash limits
751
+ based on available memory
752
+ </Text>
748
753
  </View>
754
+ </View>
749
755
 
750
- <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle auto RAM limit calculation" accessibilityState={{ checked: isAutoRamLimitEnabled }} onPress={() => setIsAutoRamLimitEnabled(prev => !prev)} style={{
756
+ <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle auto RAM limit calculation" accessibilityState={{ checked: isAutoRamLimitEnabled }} onPress={() => setIsAutoRamLimitEnabled(prev => !prev)} style={{
751
757
  width: 42,
752
758
  height: 24,
753
759
  borderRadius: 12,
@@ -756,9 +762,11 @@ const SettingsPanel = () => {
756
762
  : AppColors.grayBorderSecondary,
757
763
  padding: 2,
758
764
  justifyContent: 'center',
759
- alignItems: isAutoRamLimitEnabled ? 'flex-end' : 'flex-start',
765
+ alignItems: isAutoRamLimitEnabled
766
+ ? 'flex-end'
767
+ : 'flex-start',
760
768
  }}>
761
- <View style={{
769
+ <View style={{
762
770
  width: 20,
763
771
  height: 20,
764
772
  borderRadius: 10,
@@ -768,14 +776,14 @@ const SettingsPanel = () => {
768
776
  shadowRadius: 2,
769
777
  shadowOffset: { width: 0, height: 1 },
770
778
  }}/>
771
- </TouchableScale>
772
- </View>
779
+ </TouchableScale>
780
+ </View>
773
781
 
774
- <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
782
+ <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
775
783
 
776
- {/* Device Free RAM Display */}
777
- <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
778
- <View style={{
784
+ {/* Device Free RAM Display */}
785
+ <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
786
+ <View style={{
779
787
  width: 32,
780
788
  height: 32,
781
789
  borderRadius: 8,
@@ -785,10 +793,12 @@ const SettingsPanel = () => {
785
793
  alignItems: 'center',
786
794
  justifyContent: 'center',
787
795
  }}>
788
- <SignalIcon color={isAutoRamLimitEnabled ? AppColors.purple : AppColors.grayTextWeak} size={15}/>
789
- </View>
790
- <View style={{ flex: 1 }}>
791
- <Text style={{
796
+ <SignalIcon color={isAutoRamLimitEnabled
797
+ ? AppColors.purple
798
+ : AppColors.grayTextWeak} size={15}/>
799
+ </View>
800
+ <View style={{ flex: 1 }}>
801
+ <Text style={{
792
802
  fontFamily: AppFonts.interBold,
793
803
  fontSize: 13.5,
794
804
  lineHeight: 18,
@@ -796,19 +806,19 @@ const SettingsPanel = () => {
796
806
  ? AppColors.primaryBlack
797
807
  : AppColors.grayText,
798
808
  }}>
799
- Detected Free RAM
800
- </Text>
801
- <Text style={{
809
+ Detected Free RAM
810
+ </Text>
811
+ <Text style={{
802
812
  fontFamily: AppFonts.interRegular,
803
813
  fontSize: 11,
804
814
  lineHeight: 15,
805
815
  color: AppColors.grayText,
806
816
  marginTop: 1,
807
817
  }}>
808
- {deviceFreeRamMb} MB available
809
- </Text>
810
- </View>
811
- <View style={{
818
+ {deviceFreeRamMb} MB available
819
+ </Text>
820
+ </View>
821
+ <View style={{
812
822
  paddingHorizontal: 10,
813
823
  paddingVertical: 5,
814
824
  borderRadius: 8,
@@ -820,7 +830,7 @@ const SettingsPanel = () => {
820
830
  ? `${AppColors.purple}26`
821
831
  : AppColors.dividerColor,
822
832
  }}>
823
- <Text style={{
833
+ <Text style={{
824
834
  fontFamily: AppFonts.interBold,
825
835
  fontSize: 12,
826
836
  lineHeight: 15,
@@ -828,27 +838,49 @@ const SettingsPanel = () => {
828
838
  ? AppColors.purple
829
839
  : AppColors.grayText,
830
840
  }}>
831
- {deviceFreeRamMb} MB
832
- </Text>
833
- </View>
841
+ {deviceFreeRamMb} MB
842
+ </Text>
834
843
  </View>
844
+ </View>
835
845
 
836
- {/* Current Auto-Calculated Limits Preview */}
837
- {isAutoRamLimitEnabled && (<View style={{ marginTop: 8, paddingTop: 8, borderTopWidth: 1, borderTopColor: AppColors.dividerColor, gap: 6 }}>
838
- <Text style={{
846
+ {/* Current Auto-Calculated Limits Preview */}
847
+ {isAutoRamLimitEnabled && (<View style={{
848
+ marginTop: 8,
849
+ paddingTop: 8,
850
+ borderTopWidth: 1,
851
+ borderTopColor: AppColors.dividerColor,
852
+ gap: 6,
853
+ }}>
854
+ <Text style={{
839
855
  fontFamily: AppFonts.interBold,
840
856
  fontSize: 11.5,
841
857
  lineHeight: 15,
842
858
  color: AppColors.purple,
843
859
  }}>
844
- Auto Profile: {autoRamProfile.profileName}
845
- </Text>
846
- <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
847
- {[
848
- { label: 'APIs', value: autoRamProfile.maxNetworkLogs, color: AppColors.blue500 },
849
- { label: 'Logs', value: autoRamProfile.maxConsoleLogs, color: AppColors.sky500 },
850
- { label: 'Analytics', value: autoRamProfile.maxAnalyticsEvents, color: AppColors.purple },
851
- { label: 'Crash', value: autoRamProfile.maxCrashRecords, color: AppColors.errorColor },
860
+ Auto Profile: {autoRamProfile.profileName}
861
+ </Text>
862
+ <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
863
+ {[
864
+ {
865
+ label: 'APIs',
866
+ value: autoRamProfile.maxNetworkLogs,
867
+ color: AppColors.blue500,
868
+ },
869
+ {
870
+ label: 'Logs',
871
+ value: autoRamProfile.maxConsoleLogs,
872
+ color: AppColors.sky500,
873
+ },
874
+ {
875
+ label: 'Analytics',
876
+ value: autoRamProfile.maxAnalyticsEvents,
877
+ color: AppColors.purple,
878
+ },
879
+ {
880
+ label: 'Crash',
881
+ value: autoRamProfile.maxCrashRecords,
882
+ color: AppColors.errorColor,
883
+ },
852
884
  ].map(item => (<View key={item.label} style={{
853
885
  flexDirection: 'row',
854
886
  alignItems: 'center',
@@ -860,29 +892,29 @@ const SettingsPanel = () => {
860
892
  borderWidth: 1,
861
893
  borderColor: `${item.color}33`,
862
894
  }}>
863
- <Text style={{
895
+ <Text style={{
864
896
  fontFamily: AppFonts.interBold,
865
897
  fontSize: 10.5,
866
898
  lineHeight: 14,
867
899
  color: item.color,
868
900
  }}>
869
- {item.label}
870
- </Text>
871
- <Text style={{
901
+ {item.label}
902
+ </Text>
903
+ <Text style={{
872
904
  fontFamily: AppFonts.interBold,
873
905
  fontSize: 10.5,
874
906
  lineHeight: 14,
875
907
  color: item.color,
876
908
  }}>
877
- {item.value}
878
- </Text>
879
- </View>))}
880
- </View>
881
- </View>)}
882
- </View>
883
- </View>) : (<View style={{ gap: 14 }}>
884
- {/* Section 1: Appearance */}
885
- <View style={{
909
+ {item.value}
910
+ </Text>
911
+ </View>))}
912
+ </View>
913
+ </View>)}
914
+ </View>
915
+ </View>) : (<View style={{ gap: 14 }}>
916
+ {/* Section 1: Appearance */}
917
+ <View style={{
886
918
  backgroundColor: AppColors.primaryLight,
887
919
  borderRadius: 14,
888
920
  borderWidth: 1,
@@ -891,28 +923,28 @@ const SettingsPanel = () => {
891
923
  padding: 14,
892
924
  gap: 12,
893
925
  }}>
894
- <Text style={{
926
+ <Text style={{
895
927
  fontFamily: AppFonts.interBold,
896
928
  fontSize: 11,
897
929
  lineHeight: 14,
898
930
  color: AppColors.grayTextWeak,
899
931
  letterSpacing: 0.8,
900
932
  }}>
901
- {t('settings.appearanceTheme')}
902
- </Text>
933
+ {t('settings.appearanceTheme')}
934
+ </Text>
903
935
 
904
- <View style={{
936
+ <View style={{
905
937
  flexDirection: 'row',
906
938
  alignItems: 'center',
907
939
  justifyContent: 'space-between',
908
940
  }}>
909
- <View style={{
941
+ <View style={{
910
942
  flexDirection: 'row',
911
943
  alignItems: 'center',
912
944
  gap: 10,
913
945
  flex: 1,
914
946
  }}>
915
- <View style={{
947
+ <View style={{
916
948
  width: 32,
917
949
  height: 32,
918
950
  borderRadius: 8,
@@ -920,30 +952,30 @@ const SettingsPanel = () => {
920
952
  alignItems: 'center',
921
953
  justifyContent: 'center',
922
954
  }}>
923
- {isDark ? (<SunIcon color={AppColors.purple} size={15}/>) : (<MoonIcon color={AppColors.purple} size={15}/>)}
924
- </View>
925
- <View style={{ flex: 1 }}>
926
- <Text style={{
955
+ {isDark ? (<SunIcon color={AppColors.purple} size={15}/>) : (<MoonIcon color={AppColors.purple} size={15}/>)}
956
+ </View>
957
+ <View style={{ flex: 1 }}>
958
+ <Text style={{
927
959
  fontFamily: AppFonts.interBold,
928
960
  fontSize: 13.5,
929
961
  lineHeight: 18,
930
962
  color: AppColors.primaryBlack,
931
963
  }}>
932
- {t('settings.general.darkMode')}
933
- </Text>
934
- <Text style={{
964
+ {t('settings.general.darkMode')}
965
+ </Text>
966
+ <Text style={{
935
967
  fontFamily: AppFonts.interRegular,
936
968
  fontSize: 11,
937
969
  lineHeight: 15,
938
970
  color: AppColors.grayText,
939
971
  marginTop: 1,
940
972
  }}>
941
- {t('settings.general.darkModeDescription')}
942
- </Text>
943
- </View>
973
+ {t('settings.general.darkModeDescription')}
974
+ </Text>
944
975
  </View>
976
+ </View>
945
977
 
946
- <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Dark Theme" accessibilityState={{ checked: isDark }} onPress={() => {
978
+ <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Dark Theme" accessibilityState={{ checked: isDark }} onPress={() => {
947
979
  const newTheme = !isDark;
948
980
  setIsDark(newTheme);
949
981
  toggleGlobalTheme(newTheme);
@@ -958,7 +990,7 @@ const SettingsPanel = () => {
958
990
  justifyContent: 'center',
959
991
  alignItems: isDark ? 'flex-end' : 'flex-start',
960
992
  }}>
961
- <View style={{
993
+ <View style={{
962
994
  width: 20,
963
995
  height: 20,
964
996
  borderRadius: 10,
@@ -968,12 +1000,12 @@ const SettingsPanel = () => {
968
1000
  shadowRadius: 2,
969
1001
  shadowOffset: { width: 0, height: 1 },
970
1002
  }}/>
971
- </TouchableScale>
972
- </View>
1003
+ </TouchableScale>
973
1004
  </View>
1005
+ </View>
974
1006
 
975
- {/* Section 2: Window & Layout */}
976
- <View style={{
1007
+ {/* Section 2: Window & Layout */}
1008
+ <View style={{
977
1009
  backgroundColor: AppColors.primaryLight,
978
1010
  borderRadius: 14,
979
1011
  borderWidth: 1,
@@ -982,31 +1014,31 @@ const SettingsPanel = () => {
982
1014
  padding: 14,
983
1015
  gap: 14,
984
1016
  }}>
985
- <Text style={{
1017
+ <Text style={{
986
1018
  fontFamily: AppFonts.interBold,
987
1019
  fontSize: 11,
988
1020
  lineHeight: 14,
989
1021
  color: AppColors.grayTextWeak,
990
1022
  letterSpacing: 0.8,
991
1023
  }}>
992
- {t('settings.windowLayout')}
993
- </Text>
1024
+ {t('settings.windowLayout')}
1025
+ </Text>
994
1026
 
995
- {/* Modal Height */}
996
- <View style={{ gap: 8 }}>
997
- <View style={{
1027
+ {/* Modal Height */}
1028
+ <View style={{ gap: 8 }}>
1029
+ <View style={{
998
1030
  flexDirection: 'row',
999
1031
  alignItems: 'center',
1000
1032
  justifyContent: 'space-between',
1001
1033
  gap: 10,
1002
1034
  }}>
1003
- <View style={{
1035
+ <View style={{
1004
1036
  flexDirection: 'row',
1005
1037
  alignItems: 'center',
1006
1038
  gap: 10,
1007
1039
  flex: 1,
1008
1040
  }}>
1009
- <View style={{
1041
+ <View style={{
1010
1042
  width: 32,
1011
1043
  height: 32,
1012
1044
  borderRadius: 8,
@@ -1014,30 +1046,30 @@ const SettingsPanel = () => {
1014
1046
  alignItems: 'center',
1015
1047
  justifyContent: 'center',
1016
1048
  }}>
1017
- <ScreenIcon color={AppColors.purple} size={15}/>
1018
- </View>
1019
- <View style={{ flex: 1 }}>
1020
- <Text style={{
1049
+ <ScreenIcon color={AppColors.purple} size={15}/>
1050
+ </View>
1051
+ <View style={{ flex: 1 }}>
1052
+ <Text style={{
1021
1053
  fontFamily: AppFonts.interBold,
1022
1054
  fontSize: 13.5,
1023
1055
  lineHeight: 18,
1024
1056
  color: AppColors.primaryBlack,
1025
1057
  }}>
1026
- {t('settings.general.modalHeight')}
1027
- </Text>
1028
- <Text style={{
1058
+ {t('settings.general.modalHeight')}
1059
+ </Text>
1060
+ <Text style={{
1029
1061
  fontFamily: AppFonts.interRegular,
1030
1062
  fontSize: 11,
1031
1063
  lineHeight: 15,
1032
1064
  color: AppColors.grayText,
1033
1065
  marginTop: 1,
1034
1066
  }}>
1035
- {t('settings.general.modalHeightDescription')}
1036
- </Text>
1037
- </View>
1067
+ {t('settings.general.modalHeightDescription')}
1068
+ </Text>
1038
1069
  </View>
1070
+ </View>
1039
1071
 
1040
- {stagedHeight !== modalHeightPercent && (<TouchableScale onPress={() => {
1072
+ {stagedHeight !== modalHeightPercent && (<TouchableScale onPress={() => {
1041
1073
  setModalHeightPercent(stagedHeight);
1042
1074
  }} style={{
1043
1075
  flexDirection: 'row',
@@ -1053,32 +1085,32 @@ const SettingsPanel = () => {
1053
1085
  shadowRadius: 2,
1054
1086
  elevation: 2,
1055
1087
  }}>
1056
- <CheckIcon size={11} color={AppColors.white}/>
1057
- <Text style={{
1088
+ <CheckIcon size={11} color={AppColors.white}/>
1089
+ <Text style={{
1058
1090
  fontFamily: AppFonts.interBold,
1059
1091
  fontSize: 11,
1060
1092
  color: AppColors.white,
1061
1093
  }}>
1062
- Save ({stagedHeight}%)
1063
- </Text>
1064
- </TouchableScale>)}
1065
- </View>
1094
+ Save ({stagedHeight}%)
1095
+ </Text>
1096
+ </TouchableScale>)}
1097
+ </View>
1066
1098
 
1067
- <View style={{ marginTop: 6 }}>
1068
- <Slider value={stagedHeight} onValueChange={setStagedHeight} min={50} max={90} step={5} quickPresets={[50, 60, 70, 80, 90]} formatLabel={val => `${Math.round(val)}%`}/>
1069
- </View>
1099
+ <View style={{ marginTop: 6 }}>
1100
+ <Slider value={stagedHeight} onValueChange={setStagedHeight} min={50} max={90} step={5} quickPresets={[50, 60, 70, 80, 90]} formatLabel={val => `${Math.round(val)}%`}/>
1070
1101
  </View>
1102
+ </View>
1071
1103
 
1072
- <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
1104
+ <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
1073
1105
 
1074
- {/* Modal Animation */}
1075
- <View style={{ gap: 8 }}>
1076
- <View style={{
1106
+ {/* Modal Animation */}
1107
+ <View style={{ gap: 8 }}>
1108
+ <View style={{
1077
1109
  flexDirection: 'row',
1078
1110
  alignItems: 'center',
1079
1111
  gap: 10,
1080
1112
  }}>
1081
- <View style={{
1113
+ <View style={{
1082
1114
  width: 32,
1083
1115
  height: 32,
1084
1116
  borderRadius: 8,
@@ -1086,30 +1118,30 @@ const SettingsPanel = () => {
1086
1118
  alignItems: 'center',
1087
1119
  justifyContent: 'center',
1088
1120
  }}>
1089
- <MotionIcon color={AppColors.purple} size={15}/>
1090
- </View>
1091
- <View style={{ flex: 1 }}>
1092
- <Text style={{
1121
+ <MotionIcon color={AppColors.purple} size={15}/>
1122
+ </View>
1123
+ <View style={{ flex: 1 }}>
1124
+ <Text style={{
1093
1125
  fontFamily: AppFonts.interBold,
1094
1126
  fontSize: 13.5,
1095
1127
  lineHeight: 18,
1096
1128
  color: AppColors.primaryBlack,
1097
1129
  }}>
1098
- {t('settings.general.modalAnimation')}
1099
- </Text>
1100
- <Text style={{
1130
+ {t('settings.general.modalAnimation')}
1131
+ </Text>
1132
+ <Text style={{
1101
1133
  fontFamily: AppFonts.interRegular,
1102
1134
  fontSize: 11,
1103
1135
  lineHeight: 15,
1104
1136
  color: AppColors.grayText,
1105
1137
  marginTop: 1,
1106
1138
  }}>
1107
- {t('settings.general.modalAnimationDescription')}
1108
- </Text>
1109
- </View>
1139
+ {t('settings.general.modalAnimationDescription')}
1140
+ </Text>
1110
1141
  </View>
1142
+ </View>
1111
1143
 
1112
- <View style={{
1144
+ <View style={{
1113
1145
  flexDirection: 'row',
1114
1146
  backgroundColor: AppColors.grayBackground,
1115
1147
  borderRadius: 10,
@@ -1117,7 +1149,7 @@ const SettingsPanel = () => {
1117
1149
  borderWidth: 1,
1118
1150
  borderColor: AppColors.dividerColor,
1119
1151
  }}>
1120
- {[
1152
+ {[
1121
1153
  { key: 'slide', label: 'Slide Up' },
1122
1154
  { key: 'fade', label: 'Fade' },
1123
1155
  { key: 'none', label: 'None' },
@@ -1132,7 +1164,7 @@ const SettingsPanel = () => {
1132
1164
  ? AppColors.purple
1133
1165
  : 'transparent',
1134
1166
  }}>
1135
- <Text style={{
1167
+ <Text style={{
1136
1168
  fontFamily: AppFonts.interBold,
1137
1169
  fontSize: 11.5,
1138
1170
  lineHeight: 15,
@@ -1140,16 +1172,16 @@ const SettingsPanel = () => {
1140
1172
  ? AppColors.white
1141
1173
  : AppColors.grayText,
1142
1174
  }}>
1143
- {opt.label}
1144
- </Text>
1145
- </TouchableScale>);
1175
+ {opt.label}
1176
+ </Text>
1177
+ </TouchableScale>);
1146
1178
  })}
1147
- </View>
1148
1179
  </View>
1149
1180
  </View>
1181
+ </View>
1150
1182
 
1151
- {/* Section 3: Default Startup Tab */}
1152
- <View style={{
1183
+ {/* Section 3: Default Startup Tab */}
1184
+ <View style={{
1153
1185
  backgroundColor: AppColors.primaryLight,
1154
1186
  borderRadius: 14,
1155
1187
  borderWidth: 1,
@@ -1158,22 +1190,22 @@ const SettingsPanel = () => {
1158
1190
  padding: 14,
1159
1191
  gap: 12,
1160
1192
  }}>
1161
- <Text style={{
1193
+ <Text style={{
1162
1194
  fontFamily: AppFonts.interBold,
1163
1195
  fontSize: 11,
1164
1196
  lineHeight: 14,
1165
1197
  color: AppColors.grayTextWeak,
1166
1198
  letterSpacing: 0.8,
1167
1199
  }}>
1168
- {t('settings.startupDefault')}
1169
- </Text>
1200
+ {t('settings.startupDefault')}
1201
+ </Text>
1170
1202
 
1171
- <View style={{
1203
+ <View style={{
1172
1204
  flexDirection: 'row',
1173
1205
  alignItems: 'center',
1174
1206
  gap: 10,
1175
1207
  }}>
1176
- <View style={{
1208
+ <View style={{
1177
1209
  width: 32,
1178
1210
  height: 32,
1179
1211
  borderRadius: 8,
@@ -1181,32 +1213,32 @@ const SettingsPanel = () => {
1181
1213
  alignItems: 'center',
1182
1214
  justifyContent: 'center',
1183
1215
  }}>
1184
- <LayersIcon color={AppColors.purple} size={15}/>
1185
- </View>
1186
- <View style={{ flex: 1 }}>
1187
- <Text style={{
1216
+ <LayersIcon color={AppColors.purple} size={15}/>
1217
+ </View>
1218
+ <View style={{ flex: 1 }}>
1219
+ <Text style={{
1188
1220
  fontFamily: AppFonts.interBold,
1189
1221
  fontSize: 13.5,
1190
1222
  lineHeight: 18,
1191
1223
  color: AppColors.primaryBlack,
1192
1224
  }}>
1193
- {t('settings.general.defaultOpeningTab')}
1194
- </Text>
1195
- <Text style={{
1225
+ {t('settings.general.defaultOpeningTab')}
1226
+ </Text>
1227
+ <Text style={{
1196
1228
  fontFamily: AppFonts.interRegular,
1197
1229
  fontSize: 11,
1198
1230
  lineHeight: 15,
1199
1231
  color: AppColors.grayText,
1200
1232
  marginTop: 1,
1201
1233
  }}>
1202
- {t('settings.general.defaultOpeningTabDesc')}
1203
- </Text>
1204
- </View>
1234
+ {t('settings.general.defaultOpeningTabDesc')}
1235
+ </Text>
1205
1236
  </View>
1237
+ </View>
1206
1238
 
1207
- {/* Sleek Interactive Dropdown Picker */}
1208
- <View style={{ marginTop: 6, gap: 6 }}>
1209
- <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Default opening tab: ${allModules.find(m => m.key === defaultTab)?.label || 'APIs'}`} onPress={() => setIsDefaultTabDropdownOpen(prev => !prev)} style={{
1239
+ {/* Sleek Interactive Dropdown Picker */}
1240
+ <View style={{ marginTop: 6, gap: 6 }}>
1241
+ <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Default opening tab: ${allModules.find(m => m.key === defaultTab)?.label || 'APIs'}`} onPress={() => setIsDefaultTabDropdownOpen(prev => !prev)} style={{
1210
1242
  flexDirection: 'row',
1211
1243
  alignItems: 'center',
1212
1244
  justifyContent: 'space-between',
@@ -1219,53 +1251,54 @@ const SettingsPanel = () => {
1219
1251
  paddingHorizontal: 14,
1220
1252
  paddingVertical: 11,
1221
1253
  }}>
1222
- <View style={{
1254
+ <View style={{
1223
1255
  flexDirection: 'row',
1224
1256
  alignItems: 'center',
1225
1257
  gap: 10,
1226
1258
  flex: 1,
1227
1259
  }}>
1228
- <View style={{
1260
+ <View style={{
1229
1261
  width: 8,
1230
1262
  height: 8,
1231
1263
  borderRadius: 4,
1232
1264
  backgroundColor: AppColors.purple,
1233
1265
  }}/>
1234
- <Text style={{
1266
+ <Text style={{
1235
1267
  fontFamily: AppFonts.interBold,
1236
1268
  fontSize: 13.5,
1237
1269
  lineHeight: 18,
1238
1270
  color: AppColors.primaryBlack,
1239
1271
  }}>
1240
- {allModules.find(m => m.key === defaultTab)?.label || 'APIs (Network)'}
1241
- </Text>
1242
- <View style={{
1272
+ {allModules.find(m => m.key === defaultTab)?.label ||
1273
+ 'APIs (Network)'}
1274
+ </Text>
1275
+ <View style={{
1243
1276
  backgroundColor: `${AppColors.purple}14`,
1244
1277
  paddingHorizontal: 6,
1245
1278
  paddingVertical: 1.5,
1246
1279
  borderRadius: 6,
1247
1280
  }}>
1248
- <Text style={{
1281
+ <Text style={{
1249
1282
  fontFamily: AppFonts.interBold,
1250
1283
  fontSize: 8.5,
1251
1284
  color: AppColors.purple,
1252
1285
  }}>
1253
- DEFAULT
1254
- </Text>
1255
- </View>
1286
+ DEFAULT
1287
+ </Text>
1256
1288
  </View>
1289
+ </View>
1257
1290
 
1258
- <View style={{
1291
+ <View style={{
1259
1292
  transform: [
1260
1293
  { rotate: isDefaultTabDropdownOpen ? '180deg' : '0deg' },
1261
1294
  ],
1262
1295
  }}>
1263
- <ChevronDownIcon color={AppColors.grayText} size={15}/>
1264
- </View>
1265
- </TouchableScale>
1296
+ <ChevronDownIcon color={AppColors.grayText} size={15}/>
1297
+ </View>
1298
+ </TouchableScale>
1266
1299
 
1267
- {/* Dropdown Options List */}
1268
- {isDefaultTabDropdownOpen && (<View style={{
1300
+ {/* Dropdown Options List */}
1301
+ {isDefaultTabDropdownOpen && (<View style={{
1269
1302
  backgroundColor: AppColors.primaryLight,
1270
1303
  borderRadius: 10,
1271
1304
  borderWidth: 1,
@@ -1277,7 +1310,7 @@ const SettingsPanel = () => {
1277
1310
  shadowOffset: { width: 0, height: 3 },
1278
1311
  elevation: 4,
1279
1312
  }}>
1280
- {allModules
1313
+ {allModules
1281
1314
  .filter(tab => tab.key === 'apis' ||
1282
1315
  stagedTabVisibility?.[tab.key] ||
1283
1316
  tabVisibility?.[tab.key])
@@ -1299,12 +1332,12 @@ const SettingsPanel = () => {
1299
1332
  borderBottomWidth: isLast ? 0 : 1,
1300
1333
  borderBottomColor: AppColors.dividerColor,
1301
1334
  }}>
1302
- <View style={{
1335
+ <View style={{
1303
1336
  flexDirection: 'row',
1304
1337
  alignItems: 'center',
1305
1338
  gap: 10,
1306
1339
  }}>
1307
- <View style={{
1340
+ <View style={{
1308
1341
  width: 6,
1309
1342
  height: 6,
1310
1343
  borderRadius: 3,
@@ -1312,7 +1345,7 @@ const SettingsPanel = () => {
1312
1345
  ? AppColors.purple
1313
1346
  : AppColors.grayTextWeak,
1314
1347
  }}/>
1315
- <Text style={{
1348
+ <Text style={{
1316
1349
  fontFamily: isActive
1317
1350
  ? AppFonts.interBold
1318
1351
  : AppFonts.interMedium,
@@ -1321,18 +1354,18 @@ const SettingsPanel = () => {
1321
1354
  ? AppColors.purple
1322
1355
  : AppColors.primaryBlack,
1323
1356
  }}>
1324
- {tab.label}
1325
- </Text>
1326
- </View>
1327
- {isActive && (<CheckIcon size={14} color={AppColors.purple}/>)}
1328
- </TouchableScale>);
1357
+ {tab.label}
1358
+ </Text>
1359
+ </View>
1360
+ {isActive && (<CheckIcon size={14} color={AppColors.purple}/>)}
1361
+ </TouchableScale>);
1329
1362
  })}
1330
- </View>)}
1331
- </View>
1363
+ </View>)}
1332
1364
  </View>
1365
+ </View>
1333
1366
 
1334
- {/* Section 4: Privacy & Diagnostics */}
1335
- <View style={{
1367
+ {/* Section 4: Privacy & Diagnostics */}
1368
+ <View style={{
1336
1369
  backgroundColor: AppColors.primaryLight,
1337
1370
  borderRadius: 14,
1338
1371
  borderWidth: 1,
@@ -1341,29 +1374,29 @@ const SettingsPanel = () => {
1341
1374
  padding: 14,
1342
1375
  gap: 12,
1343
1376
  }}>
1344
- <Text style={{
1377
+ <Text style={{
1345
1378
  fontFamily: AppFonts.interBold,
1346
1379
  fontSize: 11,
1347
1380
  lineHeight: 14,
1348
1381
  color: AppColors.grayTextWeak,
1349
1382
  letterSpacing: 0.8,
1350
1383
  }}>
1351
- PRIVACY & ANONYMOUS DIAGNOSTICS
1352
- </Text>
1384
+ PRIVACY & ANONYMOUS DIAGNOSTICS
1385
+ </Text>
1353
1386
 
1354
- <View style={{
1387
+ <View style={{
1355
1388
  flexDirection: 'row',
1356
1389
  alignItems: 'center',
1357
1390
  justifyContent: 'space-between',
1358
1391
  }}>
1359
- <View style={{
1392
+ <View style={{
1360
1393
  flexDirection: 'row',
1361
1394
  alignItems: 'center',
1362
1395
  gap: 10,
1363
1396
  flex: 1,
1364
1397
  marginRight: 10,
1365
1398
  }}>
1366
- <View style={{
1399
+ <View style={{
1367
1400
  width: 32,
1368
1401
  height: 32,
1369
1402
  borderRadius: 8,
@@ -1371,30 +1404,32 @@ const SettingsPanel = () => {
1371
1404
  alignItems: 'center',
1372
1405
  justifyContent: 'center',
1373
1406
  }}>
1374
- <ShieldAlertIcon color={AppColors.purple} size={15}/>
1375
- </View>
1376
- <View style={{ flex: 1 }}>
1377
- <Text style={{
1407
+ <ShieldAlertIcon color={AppColors.purple} size={15}/>
1408
+ </View>
1409
+ <View style={{ flex: 1 }}>
1410
+ <Text style={{
1378
1411
  fontFamily: AppFonts.interBold,
1379
1412
  fontSize: 13.5,
1380
1413
  lineHeight: 18,
1381
1414
  color: AppColors.primaryBlack,
1382
1415
  }}>
1383
- Help Improve In-App Inspector
1384
- </Text>
1385
- <Text style={{
1416
+ Help Improve In-App Inspector
1417
+ </Text>
1418
+ <Text style={{
1386
1419
  fontFamily: AppFonts.interRegular,
1387
1420
  fontSize: 11,
1388
1421
  lineHeight: 15,
1389
1422
  color: AppColors.grayText,
1390
1423
  marginTop: 1,
1391
1424
  }}>
1392
- Share non-identifiable technical metrics (RN version, JS engine, device model). No user data or network payloads are captured.
1393
- </Text>
1394
- </View>
1425
+ Share non-identifiable technical metrics (RN version, JS
1426
+ engine, device model). No user data or network payloads
1427
+ are captured.
1428
+ </Text>
1395
1429
  </View>
1430
+ </View>
1396
1431
 
1397
- <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Anonymous Telemetry" accessibilityState={{ checked: telemetryConsent }} onPress={handleToggleTelemetry} style={{
1432
+ <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Anonymous Telemetry" accessibilityState={{ checked: telemetryConsent }} onPress={handleToggleTelemetry} style={{
1398
1433
  width: 42,
1399
1434
  height: 24,
1400
1435
  borderRadius: 12,
@@ -1405,7 +1440,7 @@ const SettingsPanel = () => {
1405
1440
  justifyContent: 'center',
1406
1441
  alignItems: telemetryConsent ? 'flex-end' : 'flex-start',
1407
1442
  }}>
1408
- <View style={{
1443
+ <View style={{
1409
1444
  width: 20,
1410
1445
  height: 20,
1411
1446
  borderRadius: 10,
@@ -1415,12 +1450,12 @@ const SettingsPanel = () => {
1415
1450
  shadowRadius: 2,
1416
1451
  shadowOffset: { width: 0, height: 1 },
1417
1452
  }}/>
1418
- </TouchableScale>
1419
- </View>
1453
+ </TouchableScale>
1420
1454
  </View>
1455
+ </View>
1421
1456
 
1422
- {/* Section 5: Notifications & Toasts */}
1423
- <View style={{
1457
+ {/* Section 5: Notifications & Toasts */}
1458
+ <View style={{
1424
1459
  backgroundColor: AppColors.primaryLight,
1425
1460
  borderRadius: 14,
1426
1461
  borderWidth: 1,
@@ -1429,29 +1464,29 @@ const SettingsPanel = () => {
1429
1464
  padding: 14,
1430
1465
  gap: 12,
1431
1466
  }}>
1432
- <Text style={{
1467
+ <Text style={{
1433
1468
  fontFamily: AppFonts.interBold,
1434
1469
  fontSize: 11,
1435
1470
  lineHeight: 14,
1436
1471
  color: AppColors.grayTextWeak,
1437
1472
  letterSpacing: 0.8,
1438
1473
  }}>
1439
- NOTIFICATIONS & TOASTS
1440
- </Text>
1474
+ NOTIFICATIONS & TOASTS
1475
+ </Text>
1441
1476
 
1442
- <View style={{
1477
+ <View style={{
1443
1478
  flexDirection: 'row',
1444
1479
  alignItems: 'center',
1445
1480
  justifyContent: 'space-between',
1446
1481
  }}>
1447
- <View style={{
1482
+ <View style={{
1448
1483
  flexDirection: 'row',
1449
1484
  alignItems: 'center',
1450
1485
  gap: 10,
1451
1486
  flex: 1,
1452
1487
  marginRight: 10,
1453
1488
  }}>
1454
- <View style={{
1489
+ <View style={{
1455
1490
  width: 32,
1456
1491
  height: 32,
1457
1492
  borderRadius: 8,
@@ -1459,30 +1494,31 @@ const SettingsPanel = () => {
1459
1494
  alignItems: 'center',
1460
1495
  justifyContent: 'center',
1461
1496
  }}>
1462
- <PackageIcon color={AppColors.purple} size={15}/>
1463
- </View>
1464
- <View style={{ flex: 1 }}>
1465
- <Text style={{
1497
+ <PackageIcon color={AppColors.purple} size={15}/>
1498
+ </View>
1499
+ <View style={{ flex: 1 }}>
1500
+ <Text style={{
1466
1501
  fontFamily: AppFonts.interBold,
1467
1502
  fontSize: 13.5,
1468
1503
  lineHeight: 18,
1469
1504
  color: AppColors.primaryBlack,
1470
1505
  }}>
1471
- NPM Update Toast
1472
- </Text>
1473
- <Text style={{
1506
+ NPM Update Toast
1507
+ </Text>
1508
+ <Text style={{
1474
1509
  fontFamily: AppFonts.interRegular,
1475
1510
  fontSize: 11,
1476
1511
  lineHeight: 15,
1477
1512
  color: AppColors.grayText,
1478
1513
  marginTop: 1,
1479
1514
  }}>
1480
- Show a floating toast banner with countdown progress when a newer release is published on npm.
1481
- </Text>
1482
- </View>
1515
+ Show a floating toast banner with countdown progress when
1516
+ a newer release is published on npm.
1517
+ </Text>
1483
1518
  </View>
1519
+ </View>
1484
1520
 
1485
- <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle NPM Update Toast" accessibilityState={{ checked: showUpdateToast }} onPress={() => setShowUpdateToast(prev => !prev)} style={{
1521
+ <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle NPM Update Toast" accessibilityState={{ checked: showUpdateToast }} onPress={() => setShowUpdateToast(prev => !prev)} style={{
1486
1522
  width: 42,
1487
1523
  height: 24,
1488
1524
  borderRadius: 12,
@@ -1493,7 +1529,7 @@ const SettingsPanel = () => {
1493
1529
  justifyContent: 'center',
1494
1530
  alignItems: showUpdateToast ? 'flex-end' : 'flex-start',
1495
1531
  }}>
1496
- <View style={{
1532
+ <View style={{
1497
1533
  width: 20,
1498
1534
  height: 20,
1499
1535
  borderRadius: 10,
@@ -1503,15 +1539,137 @@ const SettingsPanel = () => {
1503
1539
  shadowRadius: 2,
1504
1540
  shadowOffset: { width: 0, height: 1 },
1505
1541
  }}/>
1506
- </TouchableScale>
1542
+ </TouchableScale>
1543
+ </View>
1544
+ </View>
1545
+
1546
+ {/* Section 6: NPM Package & Updates */}
1547
+ <View style={{
1548
+ backgroundColor: AppColors.primaryLight,
1549
+ borderRadius: 14,
1550
+ borderWidth: 1,
1551
+ borderColor: AppColors.grayBorderSecondary,
1552
+ overflow: 'hidden',
1553
+ padding: 14,
1554
+ gap: 12,
1555
+ }}>
1556
+ <Text style={{
1557
+ fontFamily: AppFonts.interBold,
1558
+ fontSize: 11,
1559
+ lineHeight: 14,
1560
+ color: AppColors.grayTextWeak,
1561
+ letterSpacing: 0.8,
1562
+ }}>
1563
+ PACKAGE VERSION & UPDATES
1564
+ </Text>
1565
+
1566
+ <View style={{
1567
+ flexDirection: 'row',
1568
+ alignItems: 'center',
1569
+ justifyContent: 'space-between',
1570
+ }}>
1571
+ <View style={{
1572
+ flexDirection: 'row',
1573
+ alignItems: 'center',
1574
+ gap: 10,
1575
+ flex: 1,
1576
+ marginRight: 8,
1577
+ }}>
1578
+ <View style={{
1579
+ width: 32,
1580
+ height: 32,
1581
+ borderRadius: 8,
1582
+ backgroundColor: '#CB383715',
1583
+ alignItems: 'center',
1584
+ justifyContent: 'center',
1585
+ }}>
1586
+ <NpmIcon color="#CB3837" size={16}/>
1587
+ </View>
1588
+ <View style={{ flex: 1 }}>
1589
+ <View style={{
1590
+ flexDirection: 'row',
1591
+ alignItems: 'center',
1592
+ gap: 6,
1593
+ }}>
1594
+ <Text style={{
1595
+ fontFamily: AppFonts.interBold,
1596
+ fontSize: 13.5,
1597
+ lineHeight: 18,
1598
+ color: AppColors.primaryBlack,
1599
+ }}>
1600
+ v{LIB_VERSION}
1601
+ </Text>
1602
+ {updateAvailable ? (<View style={{
1603
+ backgroundColor: '#F59E0B20',
1604
+ paddingHorizontal: 6,
1605
+ paddingVertical: 1.5,
1606
+ borderRadius: 5,
1607
+ borderWidth: 1,
1608
+ borderColor: '#F59E0B60',
1609
+ }}>
1610
+ <Text style={{
1611
+ fontFamily: AppFonts.interBold,
1612
+ fontSize: 9.5,
1613
+ color: '#D97706',
1614
+ }}>
1615
+ v{latestNpmVersion} Available ⚡
1616
+ </Text>
1617
+ </View>) : (<View style={{
1618
+ backgroundColor: `${AppColors.emerald500}20`,
1619
+ paddingHorizontal: 6,
1620
+ paddingVertical: 1.5,
1621
+ borderRadius: 5,
1622
+ borderWidth: 1,
1623
+ borderColor: `${AppColors.emerald500}50`,
1624
+ }}>
1625
+ <Text style={{
1626
+ fontFamily: AppFonts.interBold,
1627
+ fontSize: 9.5,
1628
+ color: AppColors.emerald600,
1629
+ }}>
1630
+ Up to date
1631
+ </Text>
1632
+ </View>)}
1633
+ </View>
1634
+ <Text style={{
1635
+ fontFamily: AppFonts.interRegular,
1636
+ fontSize: 11,
1637
+ lineHeight: 15,
1638
+ color: AppColors.grayText,
1639
+ marginTop: 1,
1640
+ }}>
1641
+ {updateAvailable
1642
+ ? `A newer version (v${latestNpmVersion}) is available on npm registry.`
1643
+ : 'You are running the latest version from npm registry.'}
1644
+ </Text>
1645
+ </View>
1507
1646
  </View>
1647
+
1648
+ {updateAvailable && (<TouchableScale onPress={() => {
1649
+ copyToClipboard('npm install react-native-inapp-inspector@latest', 'Install Command');
1650
+ showToast('Copied npm install command!');
1651
+ }} style={{
1652
+ backgroundColor: AppColors.purple,
1653
+ paddingVertical: 6,
1654
+ paddingHorizontal: 10,
1655
+ borderRadius: 8,
1656
+ }}>
1657
+ <Text style={{
1658
+ fontFamily: AppFonts.interBold,
1659
+ fontSize: 11,
1660
+ color: AppColors.white,
1661
+ }}>
1662
+ Copy Upgrade
1663
+ </Text>
1664
+ </TouchableScale>)}
1508
1665
  </View>
1509
- </View>)}
1510
- <View style={{ height: 48 }}/>
1511
- </ScrollView>
1666
+ </View>
1667
+ </View>)}
1668
+ <View style={{ height: 48 }}/>
1669
+ </ScrollView>
1512
1670
 
1513
- {/* Bottom Sticky Action Bar for Save Changes */}
1514
- {settingsActiveSubTab === 'module' && (<View style={{
1671
+ {/* Bottom Sticky Action Bar for Save Changes */}
1672
+ {settingsActiveSubTab === 'module' && (<View style={{
1515
1673
  paddingHorizontal: 16,
1516
1674
  paddingTop: 12,
1517
1675
  paddingBottom: Platform.OS === 'ios' ? 36 : 24,
@@ -1527,16 +1685,16 @@ const SettingsPanel = () => {
1527
1685
  shadowOffset: { width: 0, height: -3 },
1528
1686
  elevation: 8,
1529
1687
  }}>
1530
- <View style={{ flex: 1 }}>
1531
- <Text style={{
1688
+ <View style={{ flex: 1 }}>
1689
+ <Text style={{
1532
1690
  fontFamily: AppFonts.interBold,
1533
1691
  fontSize: 13,
1534
1692
  lineHeight: 17,
1535
1693
  color: AppColors.primaryBlack,
1536
1694
  }}>
1537
- {stagedActiveCount} of {allModules.length} Modules Active
1538
- </Text>
1539
- <Text style={{
1695
+ {stagedActiveCount} of {allModules.length} Modules Active
1696
+ </Text>
1697
+ <Text style={{
1540
1698
  fontFamily: AppFonts.interRegular,
1541
1699
  fontSize: 11,
1542
1700
  lineHeight: 15,
@@ -1545,13 +1703,13 @@ const SettingsPanel = () => {
1545
1703
  : AppColors.grayText,
1546
1704
  marginTop: 1,
1547
1705
  }}>
1548
- {hasUnsavedChanges
1706
+ {hasUnsavedChanges
1549
1707
  ? t('settings.unsavedPending')
1550
1708
  : t('settings.allSynchronized')}
1551
- </Text>
1552
- </View>
1709
+ </Text>
1710
+ </View>
1553
1711
 
1554
- <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Save Changes" onPress={handleSaveChanges} style={{
1712
+ <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Save Changes" onPress={handleSaveChanges} style={{
1555
1713
  flexDirection: 'row',
1556
1714
  alignItems: 'center',
1557
1715
  gap: 6,
@@ -1562,18 +1720,18 @@ const SettingsPanel = () => {
1562
1720
  paddingVertical: 10,
1563
1721
  borderRadius: 10,
1564
1722
  }}>
1565
- <CheckIcon size={14} color={hasUnsavedChanges ? AppColors.white : AppColors.purple}/>
1566
- <Text style={{
1723
+ <CheckIcon size={14} color={hasUnsavedChanges ? AppColors.white : AppColors.purple}/>
1724
+ <Text style={{
1567
1725
  fontFamily: AppFonts.interBold,
1568
1726
  fontSize: 13,
1569
1727
  lineHeight: 17,
1570
1728
  color: hasUnsavedChanges ? AppColors.white : AppColors.purple,
1571
1729
  }}>
1572
- {t('settings.saveChanges')}
1573
- </Text>
1574
- </TouchableScale>
1575
- </View>)}
1576
- </View>);
1730
+ {t('settings.saveChanges')}
1731
+ </Text>
1732
+ </TouchableScale>
1733
+ </View>)}
1734
+ </View>);
1577
1735
  let content = null;
1578
1736
  let title = '';
1579
1737
  let icon = null;
@@ -1615,7 +1773,9 @@ const SettingsPanel = () => {
1615
1773
  {renderSettingRow({
1616
1774
  icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
1617
1775
  label: t('settings.apis.clearNetworkLogs'),
1618
- description: t('settings.apis.clearNetworkLogsDescription', { count: logs.length }),
1776
+ description: t('settings.apis.clearNetworkLogsDescription', {
1777
+ count: logs.length,
1778
+ }),
1619
1779
  isLast: true,
1620
1780
  onPress: () => {
1621
1781
  clearNetworkLogs();
@@ -1802,9 +1962,7 @@ const SettingsPanel = () => {
1802
1962
  : AppColors.grayBorderSecondary,
1803
1963
  padding: 2,
1804
1964
  justifyContent: 'center',
1805
- alignItems: showDuplicateLogs
1806
- ? 'flex-end'
1807
- : 'flex-start',
1965
+ alignItems: showDuplicateLogs ? 'flex-end' : 'flex-start',
1808
1966
  }}>
1809
1967
  <View style={{
1810
1968
  width: 20,
@@ -1830,7 +1988,9 @@ const SettingsPanel = () => {
1830
1988
  {renderSettingRow({
1831
1989
  icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
1832
1990
  label: t('settings.logs.clearConsoleLogs'),
1833
- description: t('settings.logs.clearConsoleLogsDescription', { count: consoleLogs.length }),
1991
+ description: t('settings.logs.clearConsoleLogsDescription', {
1992
+ count: consoleLogs.length,
1993
+ }),
1834
1994
  isLast: true,
1835
1995
  onPress: () => {
1836
1996
  clearConsoleLogs();
@@ -1873,7 +2033,9 @@ const SettingsPanel = () => {
1873
2033
  {renderSettingRow({
1874
2034
  icon: <AnalyticsIcon color={AppColors.purple} size={16}/>,
1875
2035
  label: t('settings.analytics.maxAnalyticsEvents'),
1876
- description: t('settings.analytics.maxAnalyticsEventsDescription', { count: analyticsEvents.length }),
2036
+ description: t('settings.analytics.maxAnalyticsEventsDescription', {
2037
+ count: analyticsEvents.length,
2038
+ }),
1877
2039
  numericInput: {
1878
2040
  value: maxAnalyticsEventsLimit,
1879
2041
  onChange: setMaxAnalyticsEventsLimit,
@@ -1926,7 +2088,9 @@ const SettingsPanel = () => {
1926
2088
  else if (settingsPage === 'redux') {
1927
2089
  title = t('settings.redux.title');
1928
2090
  icon = <ReduxIcon color={AppColors.white} size={16}/>;
1929
- rightInfo = t('settings.redux.reducers', { count: Object.keys(reduxState || {}).length });
2091
+ rightInfo = t('settings.redux.reducers', {
2092
+ count: Object.keys(reduxState || {}).length,
2093
+ });
1930
2094
  content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
1931
2095
  <View style={{
1932
2096
  backgroundColor: AppColors.primaryLight,
@@ -2071,7 +2235,9 @@ const SettingsPanel = () => {
2071
2235
  {renderSettingRow({
2072
2236
  icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
2073
2237
  label: t('settings.crash.clearHistory'),
2074
- description: t('settings.crash.clearHistoryDesc', { count: crashRecords?.length || 0 }),
2238
+ description: t('settings.crash.clearHistoryDesc', {
2239
+ count: crashRecords?.length || 0,
2240
+ }),
2075
2241
  isLast: true,
2076
2242
  onPress: () => {
2077
2243
  clearCrashRecords();