react-native-inapp-inspector 2.3.15 → 2.3.16

package/src/components/Inspector/InspectorHeader.tsx

@@ -42,6 +42,7 @@ import {
   NpmIcon,
   ResetIcon,
   BoltIcon,
+  InfoCircleIcon,
 } from '../NetworkIcons';
 
 const InspectorHeader = React.memo(() => {
@@ -70,6 +71,9 @@ const InspectorHeader = React.memo(() => {
     runClearAllWithAnimation,
     settingsPage,
     setSettingsPage,
+    setSettingsActiveSubTab,
+    isFeedbackOpen,
+    setIsFeedbackOpen,
     resetToDefaults,
     closeModal,
     detailTitle,
@@ -147,7 +151,7 @@ const InspectorHeader = React.memo(() => {
     (activeTab === 'crash' && selectedCrash != null);
 
   const isSettingsView = settingsPage !== null;
-  const isAnySelected = isDetailView || isSettingsView;
+  const isAnySelected = isDetailView || isSettingsView || isFeedbackOpen;
 
   const settingsModuleTitle = useMemo(() => {
     switch (settingsPage) {
@@ -206,6 +210,10 @@ const InspectorHeader = React.memo(() => {
             ]}>
             <TouchableScale
               onPress={() => {
+                if (isFeedbackOpen) {
+                  setIsFeedbackOpen(false);
+                  return;
+                }
                 if (isSettingsView) {
                   if (settingsPage === 'main') {
                     setSettingsPage(null);
@@ -249,7 +257,50 @@ const InspectorHeader = React.memo(() => {
               <WhiteBackNavigation />
             </TouchableScale>
 
-            {isSettingsView ? (
+            {isFeedbackOpen ? (
+              <View style={{gap: 2, flex: 1, minWidth: 0}}>
+                <View
+                  style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interBold,
+                      fontSize: isNarrow ? 14 : 16,
+                      color: AppColors.white,
+                      letterSpacing: -0.2,
+                    }}
+                    numberOfLines={1}>
+                    Support & Feedback
+                  </Text>
+                  <View
+                    style={{
+                      backgroundColor: `${AppColors.white}26`,
+                      paddingHorizontal: isNarrow ? 4 : 6,
+                      paddingVertical: 1.5,
+                      borderRadius: 10,
+                      borderWidth: 1,
+                      borderColor: `${AppColors.white}20`,
+                    }}>
+                    <Text
+                      style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: isNarrow ? 8 : 9,
+                        color: AppColors.white,
+                      }}>
+                      v{LIB_VERSION}
+                    </Text>
+                  </View>
+                </View>
+                <Text
+                  style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: isNarrow ? 9.5 : 10.5,
+                    color: `${AppColors.white}CC`,
+                  }}
+                  numberOfLines={1}>
+                  Direct line to maintainers & developers
+                </Text>
+              </View>
+            ) : isSettingsView ? (
               <View style={{gap: 2, flex: 1, minWidth: 0}}>
                 <View
                   style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
@@ -997,6 +1048,9 @@ const InspectorHeader = React.memo(() => {
 
             {!isAnySelected && (
               <TouchableScale
+                accessible={true}
+                accessibilityRole="button"
+                accessibilityLabel="Settings"
                 onPress={() => setSettingsPage('main')}
                 hitSlop={15}
                 style={[
@@ -1011,6 +1065,28 @@ const InspectorHeader = React.memo(() => {
               </TouchableScale>
             )}
 
+            {!isAnySelected && (
+              <TouchableScale
+                accessible={true}
+                accessibilityRole="button"
+                accessibilityLabel="About and System Specifications"
+                onPress={() => {
+                  setSettingsActiveSubTab('about');
+                  setSettingsPage('main');
+                }}
+                hitSlop={15}
+                style={[
+                  styles.closeButtonSquare,
+                  {
+                    width: buttonSize,
+                    height: buttonSize,
+                    borderRadius: isNarrow ? 6 : 7,
+                  },
+                ]}>
+                <InfoCircleIcon color={AppColors.white} size={isNarrow ? 12 : 14} />
+              </TouchableScale>
+            )}
+
             <TouchableOpacity
               onPress={closeModal}
               hitSlop={{top: 12, bottom: 12, left: 12, right: 12}}

package/src/components/Inspector/MainScreen.tsx

@@ -8,6 +8,7 @@ import {
   StatusBar,
   StyleSheet,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import {useInspector} from './InspectorContext';
@@ -32,7 +33,11 @@ import StorageTab from './StorageTab';
 import DebuggingTab from './DebuggingTab';
 import SettingsPanel from './SettingsPanel';
 import NpmUpdateToast from './NpmUpdateToast';
+import NpmStarPrompt from './NpmStarPrompt';
+import FeedbackModal from './FeedbackModal';
 import Toast from '../Toast';
+import TouchableScale from '../TouchableScale';
+import {HeadphonesIcon} from '../NetworkIcons';
 import styles from '../../styles';
 import {AppColors} from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
@@ -51,6 +56,8 @@ const MainScreen = () => {
     selectedReduxAction,
     selectedCrash,
     settingsPage,
+    isFeedbackOpen,
+    setIsFeedbackOpen,
     activeTab,
     isReady,
     enabled,
@@ -93,6 +100,19 @@ const MainScreen = () => {
     }
   }, [settingsPage !== null]);
 
+  const feedbackAnim = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (isFeedbackOpen) {
+      feedbackAnim.setValue(0);
+      Animated.spring(feedbackAnim, {
+        toValue: 1,
+        friction: 8,
+        tension: 65,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isFeedbackOpen]);
+
   const tabAnim = useRef(new Animated.Value(1)).current;
   useEffect(() => {
     tabAnim.setValue(0);
@@ -139,8 +159,8 @@ const MainScreen = () => {
               <InspectorHeader />
 
               <View style={{flex: 1}}>
-                {/* ─── Horizontal Scrollable Tab Bar inside Content (Always visible) ─── */}
-                {!isDetailActive && <TabBar />}
+                {/* ─── Horizontal Scrollable Tab Bar inside Content (Always visible unless in detail/settings/feedback) ─── */}
+                {!isDetailActive && settingsPage === null && !isFeedbackOpen && <TabBar />}
 
                 {isReady ? (
                   <View style={{flex: 1}}>
@@ -159,7 +179,7 @@ const MainScreen = () => {
                             },
                           ],
                         },
-                        (isDetailActive || settingsPage !== null) && {
+                        (isDetailActive || settingsPage !== null || isFeedbackOpen) && {
                           pointerEvents: 'none',
                         },
                       ]}>
@@ -236,6 +256,39 @@ const MainScreen = () => {
                     <SettingsPanel />
                   </Animated.View>
                 )}
+
+                {/* Support & Feedback Layer - Rendered inside in-app inspector covering full content card */}
+                {isFeedbackOpen && (
+                  <Animated.View
+                    style={[
+                      StyleSheet.absoluteFill,
+                      {
+                        backgroundColor: AppColors.primaryLight,
+                        opacity: feedbackAnim,
+                        transform: [
+                          {
+                            translateY: feedbackAnim.interpolate({
+                              inputRange: [0, 1],
+                              outputRange: [24, 0],
+                            }),
+                          },
+                        ],
+                      },
+                    ]}>
+                    <FeedbackModal onClose={() => setIsFeedbackOpen(false)} />
+                  </Animated.View>
+                )}
+
+                {/* Floating Support & Feedback Button (in place of scroll-to-top) */}
+                {!isDetailActive && settingsPage === null && !isFeedbackOpen && (
+                  <TouchableOpacity
+                    activeOpacity={0.8}
+                    onPress={() => setIsFeedbackOpen(true)}
+                    hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
+                    style={styles.supportFab}>
+                    <HeadphonesIcon color={AppColors.white} size={20} />
+                  </TouchableOpacity>
+                )}
               </View>
 
               {/* Bottom floating toast notification */}
@@ -243,6 +296,9 @@ const MainScreen = () => {
 
               {/* NPM Version Update Toast with timeout progress bar */}
               <NpmUpdateToast />
+
+              {/* 5-Day Periodic Star & Support Prompt */}
+              <NpmStarPrompt />
             </View>
           </View>
         </ErrorBoundary>

package/src/components/Inspector/NetworkTab.tsx

@@ -570,16 +570,24 @@ const NetworkTab = React.memo(() => {
               </View>
             </View>
 
-            {/* Quick Filter Horizontal Chips Bar with Live Counts */}
-            <View style={{marginBottom: 8}}>
+            {/* Quick Filter Horizontal Chips Bar with Sticky "More Filters" on Right */}
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                marginBottom: 8,
+                paddingHorizontal: 12,
+                gap: 6,
+              }}>
               <ScrollView
                 horizontal
                 showsHorizontalScrollIndicator={false}
+                style={{flex: 1}}
                 contentContainerStyle={{
-                  paddingHorizontal: 12,
                   flexDirection: 'row',
                   alignItems: 'center',
                   gap: 6,
+                  paddingRight: 6,
                 }}>
                 {QUICK_CHIPS.map(chip => {
                   const isActive = quickFilter === chip.id;
@@ -646,67 +654,73 @@ const NetworkTab = React.memo(() => {
                     </TouchableScale>
                   );
                 })}
+              </ScrollView>
 
-                <TouchableScale
-                  onPress={() => setIsFilterModalOpen(true)}>
-                  <View
+              <TouchableScale
+                onPress={() => setIsFilterModalOpen(true)}
+                style={{flexShrink: 0}}>
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingHorizontal: 10,
+                    paddingVertical: 4.5,
+                    borderRadius: 8,
+                    backgroundColor:
+                      statusFilters.size > 0 || methodFilters.size > 0
+                        ? `${AppColors.purple}20`
+                        : AppColors.grayBackground,
+                    borderWidth: 1,
+                    borderColor:
+                      statusFilters.size > 0 || methodFilters.size > 0
+                        ? AppColors.purple
+                        : AppColors.grayBorderSecondary,
+                    gap: 5,
+                    shadowColor: AppColors.black,
+                    shadowOpacity: 0.04,
+                    shadowRadius: 2,
+                    shadowOffset: {width: 0, height: 1},
+                    elevation: 1,
+                  }}>
+                  <FilterIcon
+                    size={11}
+                    color={
+                      statusFilters.size > 0 || methodFilters.size > 0
+                        ? AppColors.purple
+                        : AppColors.grayText
+                    }
+                  />
+                  <Text
                     style={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      paddingHorizontal: 10,
-                      paddingVertical: 4.5,
-                      borderRadius: 8,
-                      backgroundColor:
-                        statusFilters.size > 0 || methodFilters.size > 0
-                          ? `${AppColors.purple}20`
-                          : AppColors.grayBackground,
-                      borderWidth: 1,
-                      borderColor:
+                      fontFamily: AppFonts.interBold,
+                      fontSize: 10.5,
+                      color:
                         statusFilters.size > 0 || methodFilters.size > 0
                           ? AppColors.purple
-                          : AppColors.grayBorderSecondary,
-                      gap: 5,
+                          : AppColors.grayText,
                     }}>
-                    <FilterIcon
-                      size={11}
-                      color={
-                        statusFilters.size > 0 || methodFilters.size > 0
-                          ? AppColors.purple
-                          : AppColors.grayText
-                      }
-                    />
-                    <Text
+                    More Filters
+                  </Text>
+                  {(statusFilters.size > 0 || methodFilters.size > 0) && (
+                    <View
                       style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10.5,
-                        color:
-                          statusFilters.size > 0 || methodFilters.size > 0
-                            ? AppColors.purple
-                            : AppColors.grayText,
+                        backgroundColor: AppColors.purple,
+                        paddingHorizontal: 4.5,
+                        paddingVertical: 1,
+                        borderRadius: 6,
                       }}>
-                      More Filters
-                    </Text>
-                    {(statusFilters.size > 0 || methodFilters.size > 0) && (
-                      <View
+                      <Text
                         style={{
-                          backgroundColor: AppColors.purple,
-                          paddingHorizontal: 4.5,
-                          paddingVertical: 1,
-                          borderRadius: 6,
+                          fontFamily: AppFonts.interBold,
+                          fontSize: 8.5,
+                          color: AppColors.white,
                         }}>
-                        <Text
-                          style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 8.5,
-                            color: AppColors.white,
-                          }}>
-                          {statusFilters.size + methodFilters.size}
-                        </Text>
-                      </View>
-                    )}
-                  </View>
-                </TouchableScale>
-              </ScrollView>
+                        {statusFilters.size + methodFilters.size}
+                      </Text>
+                    </View>
+                  )}
+                </View>
+              </TouchableScale>
             </View>
 
             {/* Active Filter Helper Status Bar */}
@@ -791,29 +805,6 @@ const NetworkTab = React.memo(() => {
         ]}
         keyboardShouldPersistTaps="handled"
       />
-      {/* #2 — always-visible scroll-to-top, bottom right */}
-      <TouchableScale
-        onPress={() => {
-          try {
-            apisListRef.current?.scrollToOffset({
-              offset: 0,
-              animated: true,
-            });
-          } catch {
-            try {
-              apisListRef.current?.scrollToIndex({
-                index: 0,
-                animated: true,
-              });
-            } catch {}
-          }
-        }}
-        hitSlop={12}
-        style={styles.scrollTopBtn}>
-        <View style={{transform: [{rotate: '180deg'}]}}>
-          <ChevronIcon color={AppColors.white} size={18} />
-        </View>
-      </TouchableScale>
 
       {/* Modern Network Filter Modal */}
       <NetworkFilterModal