react-native-inapp-inspector 2.3.14 → 2.3.16

package/src/components/Inspector/NetworkTab.tsx

@@ -227,94 +227,6 @@ const NetworkTab = React.memo(() => {
     [quickCounts],
   );
 
-  const SEARCH_SCOPES: Array<{
-    id: SearchScope;
-    label: string;
-    icon: (color: string) => React.JSX.Element;
-  }> = [
-    {
-      id: 'all',
-      label: 'All',
-      icon: color => <LayersIcon size={9.5} color={color} />,
-    },
-    {
-      id: 'url',
-      label: 'URL / Path',
-      icon: color => <GlobeIcon size={9.5} color={color} />,
-    },
-    {
-      id: 'reqBody',
-      label: 'Payload',
-      icon: color => <RequestIcon size={9.5} color={color} />,
-    },
-    {
-      id: 'resBody',
-      label: 'Response',
-      icon: color => <ResponseIcon size={9.5} color={color} />,
-    },
-    {
-      id: 'headers',
-      label: 'Headers',
-      icon: color => <HeadersIcon size={9.5} color={color} />,
-    },
-  ];
-
-  const QUICK_API_QUERY_TAGS = useMemo(
-    () => [
-      {
-        label: 'Failed',
-        query: 'is:error',
-        icon: (color: string) => <CircleXIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'Slow (>1s)',
-        query: 'slow:>1s',
-        icon: (color: string) => <ClockIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'POST',
-        query: 'm:POST',
-        icon: (color: string) => <RequestIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'GET',
-        query: 'm:GET',
-        icon: (color: string) => <ResponseIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'GraphQL',
-        query: 'is:graphql',
-        icon: (color: string) => <AtomIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'Axios',
-        query: 'client:axios',
-        icon: (color: string) => <BoltIcon size={9.5} color={color} />,
-      },
-      {
-        label: '200 OK',
-        query: 'status:200',
-        icon: (color: string) => <CircleCheckIcon size={9.5} color={color} />,
-      },
-      {
-        label: '404',
-        query: 'status:404',
-        icon: (color: string) => <CircleAlertIcon size={9.5} color={color} />,
-      },
-      {
-        label: '500',
-        query: 'status:500',
-        icon: (color: string) => <CircleXIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'HTTPS',
-        query: 'is:https',
-        icon: (color: string) => <ShieldAlertIcon size={9.5} color={color} />,
-      },
-    ],
-    [],
-  );
-
   const networkMetrics = useMemo(() => {
     if (!logs || logs.length === 0) return null;
     let successCount = 0;
@@ -523,7 +435,7 @@ const NetworkTab = React.memo(() => {
                   size={15}
                 />
                 <TextInput
-                  placeholder="Search url, body, is:error, slow:>1s..."
+                  placeholder="Search URL, status, method, headers, body..."
                   placeholderTextColor={AppColors.grayTextWeak}
                   value={search}
                   onChangeText={setSearch}
@@ -534,69 +446,6 @@ const NetworkTab = React.memo(() => {
                   autoCapitalize="none"
                 />
 
-                {/* Match Case (Aa) & Regex (.*) Quick Toggles */}
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3,
-                    marginRight: 2,
-                  }}>
-                  <Pressable
-                    hitSlop={8}
-                    onPress={() => setIsCaseSensitive(prev => !prev)}
-                    style={{
-                      paddingHorizontal: 4.5,
-                      paddingVertical: 2,
-                      borderRadius: 4,
-                      backgroundColor: isCaseSensitive
-                        ? AppColors.purple
-                        : 'transparent',
-                      borderWidth: 1,
-                      borderColor: isCaseSensitive
-                        ? AppColors.purple
-                        : `${AppColors.grayBorderSecondary}`,
-                    }}>
-                    <Text
-                      style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 9.5,
-                        color: isCaseSensitive
-                          ? AppColors.white
-                          : AppColors.grayTextWeak,
-                      }}>
-                      Aa
-                    </Text>
-                  </Pressable>
-
-                  <Pressable
-                    hitSlop={8}
-                    onPress={() => setIsRegexSearch(prev => !prev)}
-                    style={{
-                      paddingHorizontal: 4.5,
-                      paddingVertical: 2,
-                      borderRadius: 4,
-                      backgroundColor: isRegexSearch
-                        ? AppColors.purple
-                        : 'transparent',
-                      borderWidth: 1,
-                      borderColor: isRegexSearch
-                        ? AppColors.purple
-                        : `${AppColors.grayBorderSecondary}`,
-                    }}>
-                    <Text
-                      style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 9.5,
-                        color: isRegexSearch
-                          ? AppColors.white
-                          : AppColors.grayTextWeak,
-                      }}>
-                      .*
-                    </Text>
-                  </Pressable>
-                </View>
-
                 {search.length > 0 && (
                   <View
                     style={{
@@ -721,123 +570,24 @@ const NetworkTab = React.memo(() => {
               </View>
             </View>
 
-            {/* Quick Search Scope & Filter Tags Row */}
-            <View style={{paddingBottom: 4}}>
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                contentContainerStyle={{
-                  paddingHorizontal: 12,
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  gap: 5,
-                  paddingVertical: 2,
-                }}>
-                {/* Search Scopes */}
-                {SEARCH_SCOPES.map(s => {
-                  const isActive = searchScope === s.id;
-                  return (
-                    <TouchableScale
-                      key={`scope_${s.id}`}
-                      onPress={() => setSearchScope(s.id)}
-                      hitSlop={6}
-                      style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 3.5,
-                        paddingHorizontal: 7.5,
-                        paddingVertical: 3.5,
-                        borderRadius: 6,
-                        backgroundColor: isActive
-                          ? AppColors.purple
-                          : AppColors.grayBackground,
-                        borderWidth: 1,
-                        borderColor: isActive
-                          ? AppColors.purple
-                          : AppColors.grayBorderSecondary,
-                      }}>
-                      {s.icon(isActive ? AppColors.white : AppColors.grayTextWeak)}
-                      <Text
-                        style={{
-                          fontFamily: AppFonts.interBold,
-                          fontSize: 10,
-                          color: isActive ? AppColors.white : AppColors.grayText,
-                        }}>
-                        {s.label}
-                      </Text>
-                    </TouchableScale>
-                  );
-                })}
-
-                <View
-                  style={{
-                    width: 1,
-                    height: 14,
-                    backgroundColor: AppColors.dividerColor,
-                    marginHorizontal: 3,
-                  }}
-                />
-
-                {/* Quick Query Suggestions */}
-                {QUICK_API_QUERY_TAGS.map(q => {
-                  const isActive = search.includes(q.query);
-                  return (
-                    <TouchableScale
-                      key={`quick_${q.query}`}
-                      onPress={() => {
-                        setSearch(prev => {
-                          if (prev.includes(q.query)) {
-                            return prev
-                              .replace(q.query, '')
-                              .replace(/\s+/g, ' ')
-                              .trim();
-                          }
-                          return `${prev} ${q.query}`.trim();
-                        });
-                      }}
-                      hitSlop={6}
-                      style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 3.5,
-                        paddingHorizontal: 7.5,
-                        paddingVertical: 3.5,
-                        borderRadius: 6,
-                        backgroundColor: isActive
-                          ? `${AppColors.purple}20`
-                          : AppColors.grayBackground,
-                        borderWidth: 1,
-                        borderColor: isActive
-                          ? AppColors.purple
-                          : AppColors.grayBorderSecondary,
-                      }}>
-                      {q.icon(isActive ? AppColors.purple : AppColors.grayTextWeak)}
-                      <Text
-                        style={{
-                          fontFamily: AppFonts.interMedium,
-                          fontSize: 10,
-                          color: isActive
-                            ? AppColors.purple
-                            : AppColors.grayText,
-                        }}>
-                        {q.label}
-                      </Text>
-                    </TouchableScale>
-                  );
-                })}
-              </ScrollView>
-            </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;
@@ -904,200 +654,74 @@ const NetworkTab = React.memo(() => {
                     </TouchableScale>
                   );
                 })}
-
-                <TouchableScale
-                  onPress={() => setIsFilterModalOpen(true)}>
-                  <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,
-                    }}>
-                    <FilterIcon
-                      size={11}
-                      color={
-                        statusFilters.size > 0 || methodFilters.size > 0
-                          ? AppColors.purple
-                          : AppColors.grayText
-                      }
-                    />
-                    <Text
-                      style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10.5,
-                        color:
-                          statusFilters.size > 0 || methodFilters.size > 0
-                            ? AppColors.purple
-                            : AppColors.grayText,
-                      }}>
-                      More Filters
-                    </Text>
-                    {(statusFilters.size > 0 || methodFilters.size > 0) && (
-                      <View
-                        style={{
-                          backgroundColor: AppColors.purple,
-                          paddingHorizontal: 4.5,
-                          paddingVertical: 1,
-                          borderRadius: 6,
-                        }}>
-                        <Text
-                          style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 8.5,
-                            color: AppColors.white,
-                          }}>
-                          {statusFilters.size + methodFilters.size}
-                        </Text>
-                      </View>
-                    )}
-                  </View>
-                </TouchableScale>
               </ScrollView>
-            </View>
 
-            {/* Search Scope Selector Bar (Visible on search or focus) */}
-            {(isSearchFocused || search.length > 0) && (
-              <View
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  paddingHorizontal: 12,
-                  marginBottom: 6,
-                  gap: 6,
-                }}>
-                <Text
+              <TouchableScale
+                onPress={() => setIsFilterModalOpen(true)}
+                style={{flexShrink: 0}}>
+                <View
                   style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors.grayTextWeak,
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.5,
-                  }}>
-                  Scope:
-                </Text>
-                <ScrollView
-                  horizontal
-                  showsHorizontalScrollIndicator={false}
-                  contentContainerStyle={{
                     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,
                   }}>
-                  {SEARCH_SCOPES.map(s => {
-                    const isSelected = searchScope === s.id;
-                    const iconColor = isSelected ? AppColors.white : AppColors.grayText;
-                    return (
-                      <TouchableScale
-                        key={s.id}
-                        onPress={() => setSearchScope(s.id)}>
-                        <View
-                          style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                            paddingHorizontal: 7,
-                            paddingVertical: 2.5,
-                            borderRadius: 5,
-                            backgroundColor: isSelected
-                              ? AppColors.purple
-                              : `${AppColors.grayBorderSecondary}40`,
-                            borderWidth: 1,
-                            borderColor: isSelected
-                              ? AppColors.purple
-                              : AppColors.grayBorderSecondary,
-                          }}>
-                          {s.icon(iconColor)}
-                          <Text
-                            style={{
-                              fontFamily: AppFonts.interBold,
-                              fontSize: 9.5,
-                              color: isSelected
-                                ? AppColors.white
-                                : AppColors.grayText,
-                            }}>
-                            {s.label}
-                          </Text>
-                        </View>
-                      </TouchableScale>
-                    );
-                  })}
-                </ScrollView>
-              </View>
-            )}
-
-            {/* Advanced Search Quick Query Suggestions Bar */}
-            {(isSearchFocused || search.length > 0) && (
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                style={{marginBottom: 8, maxHeight: 28}}
-                contentContainerStyle={{
-                  paddingHorizontal: 12,
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  gap: 5,
-                }}>
-                {QUICK_API_QUERY_TAGS.map(item => {
-                  const isSelected = search.includes(item.query);
-                  return (
-                    <TouchableScale
-                      key={item.query}
-                      onPress={() => {
-                        if (isSelected) {
-                          setSearch(prev =>
-                            prev.replace(item.query, '').trim(),
-                          );
-                        } else {
-                          setSearch(prev =>
-                            prev ? `${prev} ${item.query}`.trim() : item.query,
-                          );
-                        }
+                  <FilterIcon
+                    size={11}
+                    color={
+                      statusFilters.size > 0 || methodFilters.size > 0
+                        ? AppColors.purple
+                        : AppColors.grayText
+                    }
+                  />
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interBold,
+                      fontSize: 10.5,
+                      color:
+                        statusFilters.size > 0 || methodFilters.size > 0
+                          ? AppColors.purple
+                          : AppColors.grayText,
+                    }}>
+                    More Filters
+                  </Text>
+                  {(statusFilters.size > 0 || methodFilters.size > 0) && (
+                    <View
+                      style={{
+                        backgroundColor: AppColors.purple,
+                        paddingHorizontal: 4.5,
+                        paddingVertical: 1,
+                        borderRadius: 6,
                       }}>
-                      <View
+                      <Text
                         style={{
-                          flexDirection: 'row',
-                          alignItems: 'center',
-                          gap: 4,
-                          paddingHorizontal: 7,
-                          paddingVertical: 2.5,
-                          borderRadius: 5,
-                          backgroundColor: isSelected
-                            ? AppColors.purple
-                            : `${AppColors.purple}14`,
-                          borderWidth: 1,
-                          borderColor: isSelected
-                            ? AppColors.purple
-                            : `${AppColors.purple}30`,
+                          fontFamily: AppFonts.interBold,
+                          fontSize: 8.5,
+                          color: AppColors.white,
                         }}>
-                        {item.icon(isSelected ? AppColors.white : AppColors.purple)}
-                        <Text
-                          style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 9.5,
-                            color: isSelected
-                              ? AppColors.white
-                              : AppColors.purple,
-                          }}>
-                          {item.label}
-                        </Text>
-                      </View>
-                    </TouchableScale>
-                  );
-                })}
-              </ScrollView>
-            )}
+                        {statusFilters.size + methodFilters.size}
+                      </Text>
+                    </View>
+                  )}
+                </View>
+              </TouchableScale>
+            </View>
 
             {/* Active Filter Helper Status Bar */}
             {(quickFilter !== 'all' ||
@@ -1145,17 +769,6 @@ const NetworkTab = React.memo(() => {
                 </TouchableScale>
               </View>
             )}
-
-            {(search ||
-              statusFilters.size > 0 ||
-              methodFilters.size > 0 ||
-              quickFilter !== 'all') && (
-              <Text style={styles.resultCount}>
-                {filteredLogs.length === logs.length
-                  ? `${logs.length} requests`
-                  : `${filteredLogs.length} of ${logs.length} filtered requests`}
-              </Text>
-            )}
           </View>
         }
         ListEmptyComponent={
@@ -1192,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