react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,543 +1,151 @@
-import React, { useCallback, useMemo, useRef } from 'react';
-import { FlatList, Platform, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
-import { useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
-import AnimatedEntrance from '../AnimatedEntrance';
-import DomainHeader from '../DomainHeader';
-import LogCard from '../LogCard';
-import EmptyState from '../EmptyState';
-import EndOfListFooter from '../EndOfListFooter';
-import NetworkFilterModal from './NetworkFilterModal';
-import styles from '../../styles';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { METHOD_COLORS } from '../../constants';
-import { useTranslation } from '../../i18n';
-import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, CircleCheckIcon, CircleXIcon, LayersIcon, HeaderPauseIcon, ClockIcon, RequestIcon, ResponseIcon, AtomIcon, } from '../NetworkIcons';
-const NetworkTab = React.memo(() => {
-    const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
-    const { t } = useTranslation();
-    const apisListRef = useRef(null);
-    const [isFilterModalOpen, setIsFilterModalOpen] = React.useState(false);
-    const [isSearchFocused, setIsSearchFocused] = React.useState(false);
-    const modalFilterState = useMemo(() => ({
-        statusCodes: statusFilters.size > 0 ? new Set(statusFilters) : new Set(['all']),
-        methods: methodFilters.size > 0 ? new Set(methodFilters) : new Set(['all']),
-        latency: 'all',
-        protocol: 'all',
-        sortBy: sortOrder === 'newest' ? 'time_desc' : 'time_asc',
-    }), [statusFilters, methodFilters, sortOrder]);
-    const handleApplyNetworkFilters = useCallback((newFilters) => {
-        if (newFilters.statusCodes.has('all') ||
-            newFilters.statusCodes.size === 0) {
-            setStatusFilters(new Set());
-        }
-        else {
-            setStatusFilters(new Set(newFilters.statusCodes));
-        }
-        if (newFilters.methods.has('all') || newFilters.methods.size === 0) {
-            setMethodFilters(new Set());
-        }
-        else {
-            setMethodFilters(new Set([...newFilters.methods].map(m => m)));
-        }
-        if (newFilters.sortBy === 'time_asc') {
-            setSortOrder('oldest');
-        }
-        else {
-            setSortOrder('newest');
-        }
-    }, [setStatusFilters, setMethodFilters, setSortOrder]);
-    const quickCounts = useMemo(() => {
-        let errorCount = 0;
-        let successCount = 0;
-        let slowCount = 0;
-        let postCount = 0;
-        let getCount = 0;
-        let gqlCount = 0;
-        logs.forEach(l => {
-            const s = typeof l.status === 'number'
-                ? l.status
-                : parseInt(String(l.status), 10);
-            if (l.status === 0 || l.status == null || (!isNaN(s) && s >= 400)) {
-                errorCount++;
-            }
-            else if (!isNaN(s) && s >= 200 && s < 400) {
-                successCount++;
-            }
-            if ((l.duration || 0) >= 500) {
-                slowCount++;
-            }
-            const m = (l.method || '').toUpperCase();
-            if (m === 'POST')
-                postCount++;
-            if (m === 'GET')
-                getCount++;
-            const u = (l.url || '').toLowerCase();
-            const c = (l.client || '').toLowerCase();
-            if (u.includes('graphql') ||
-                c.includes('graphql') ||
-                c.includes('apollo')) {
-                gqlCount++;
-            }
-        });
-        return {
-            all: logs.length,
-            errors: errorCount,
-            success: successCount,
-            slow: slowCount,
-            post: postCount,
-            get: getCount,
-            graphql: gqlCount,
-        };
-    }, [logs]);
-    const QUICK_CHIPS = useMemo(() => [
-        {
-            id: 'all',
-            label: 'All',
-            count: quickCounts.all,
-            color: AppColors.purple,
-        },
-        {
-            id: 'errors',
-            label: 'Errors',
-            count: quickCounts.errors,
-            color: AppColors.errorColor,
-        },
-        {
-            id: 'success',
-            label: '2xx OK',
-            count: quickCounts.success,
-            color: AppColors.greenColor,
-        },
-        {
-            id: 'slow',
-            label: 'Slow >500ms',
-            count: quickCounts.slow,
-            color: AppColors.warningIconGold,
-        },
-        {
-            id: 'POST',
-            label: 'POST',
-            count: quickCounts.post,
-            color: METHOD_COLORS.POST || '#3B82F6',
-        },
-        {
-            id: 'GET',
-            label: 'GET',
-            count: quickCounts.get,
-            color: METHOD_COLORS.GET || '#10B981',
-        },
-        {
-            id: 'graphql',
-            label: 'GraphQL',
-            count: quickCounts.graphql,
-            color: '#E10098',
-        },
-    ], [quickCounts]);
-    const networkMetrics = useMemo(() => {
-        if (!logs || logs.length === 0)
-            return null;
-        let successCount = 0;
-        let completedCount = 0;
-        let totalDuration = 0;
-        let totalBytes = 0;
-        const durations = [];
-        logs.forEach(log => {
-            if (log.status != null) {
-                completedCount++;
-                const s = typeof log.status === 'number' ? log.status : parseInt(String(log.status), 10);
-                if (!isNaN(s)) {
-                    if (s >= 200 && s < 400) {
-                        successCount++;
-                    }
-                }
-            }
-            if (typeof log.duration === 'number' && log.duration > 0) {
-                durations.push(log.duration);
-                totalDuration += log.duration;
-            }
-        });
-        durations.sort((a, b) => a - b);
-        const avgDuration = durations.length > 0 ? Math.round(totalDuration / durations.length) : 0;
-        const p95 = durations.length > 0 ? durations[Math.floor(durations.length * 0.95)] : 0;
-        const successRate = completedCount > 0 ? Math.round((successCount / completedCount) * 100) : 100;
-        return {
-            successRate,
-            avgDuration,
-            p95,
-            totalCount: logs.length,
-        };
-    }, [logs]);
-    const renderItem = useCallback(({ item, index }) => {
-        if (item.type === 'header') {
-            return (<AnimatedEntrance index={index} distance={8}>
-            <DomainHeader pageName={item.pageName} color={item.color} stats={item.stats} activeFilters={item.activeFilters} onToggleFilter={toggleSectionFilter} isCollapsed={item.isCollapsed} onToggleCollapse={toggleSectionCollapse} isFirst={item.isFirst} timestamp={item.timestamp}/>
-          </AnimatedEntrance>);
-        }
-        const { log, isLast, color } = item;
-        return (<AnimatedEntrance index={index} distance={8} style={[
-                styles.treeNodeRow,
-                isLast && styles.treeNodeRowLast,
-            ]}>
-          <View style={styles.treeLines}>
-            <View style={[
-                styles.modernTreeLine,
-                { borderColor: color },
-                isLast && styles.modernTreeLineLast,
-            ]}/>
-            {!isLast && (<View style={[styles.modernTreeBranch, { borderColor: color }]}/>)}
-          </View>
-          <View style={styles.treeCardWrapper}>
-            <LogCard item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => {
-                setSelected(log);
-            }} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
-          </View>
-        </AnimatedEntrance>);
-    }, [
-        minStart,
-        totalRange,
-        newLogIds,
-        selectedLogs,
-        toggleSelect,
-        search,
-        toggleSectionFilter,
-        toggleSectionCollapse,
-        setSelected,
-    ]);
-    return (<View style={{ flex: 1 }}>
-      <View style={{ marginTop: 6 }}>
+import J,{useCallback as de,useMemo as Q,useRef as Oe}from"react";import{FlatList as Ne,Platform as De,Pressable as Ee,ScrollView as He,Text as I,TextInput as Ae,View as S}from"react-native";import{useInspector as Me}from"./InspectorContext";import D from"../TouchableScale";import Se from"../AnimatedEntrance";import We from"../DomainHeader";import $e from"../LogCard";import Ge from"../EmptyState";import Qe from"../EndOfListFooter";import _e from"./NetworkFilterModal";import w from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{METHOD_COLORS as we}from"../../constants";import{useTranslation as Ue}from"../../i18n";import{SearchIcon as Ke,ClearIcon as Xe,TrashIcon as Je,SortArrowIcon as Ye,FilterIcon as Ce,CircleCheckIcon as Ze,CircleXIcon as So,LayersIcon as Co,HeaderPauseIcon as To,ClockIcon as Te,RequestIcon as Io,ResponseIcon as Fo,AtomIcon as Ro}from"../NetworkIcons";const Bo=J.memo(()=>{const{groupedData:Y,search:L,setSearch:q,searchScope:Vo,setSearchScope:xe,isRegexSearch:Po,setIsRegexSearch:Lo,isCaseSensitive:Oo,setIsCaseSensitive:vo,quickFilter:_,setQuickFilter:U,handleDelete:ke,selectedLogs:W,sortOrder:j,setSortOrder:$,statusFilters:T,setStatusFilters:H,methodFilters:x,setMethodFilters:A,availableMethods:No,filteredLogs:M,logs:P,toggleSectionFilter:Z,toggleSectionCollapse:ee,minStart:oe,totalRange:te,newLogIds:re,toggleSelect:le,setSelected:se,isNetworkPaused:K,setIsNetworkPaused:Ie}=Me(),{t:ae}=Ue(),Fe=Oe(null),[Re,X]=J.useState(!1),[ie,ne]=J.useState(!1),Be=Q(()=>({statusCodes:T.size>0?new Set(T):new Set(["all"]),methods:x.size>0?new Set(x):new Set(["all"]),latency:"all",protocol:"all",sortBy:j==="newest"?"time_desc":"time_asc"}),[T,x,j]),Ve=de(o=>{o.statusCodes.has("all")||o.statusCodes.size===0?H(new Set):H(new Set(o.statusCodes)),o.methods.has("all")||o.methods.size===0?A(new Set):A(new Set([...o.methods].map(C=>C))),o.sortBy==="time_asc"?$("oldest"):$("newest")},[H,A,$]),O=Q(()=>{let o=0,C=0,b=0,z=0,F=0,G=0;return P.forEach(V=>{const E=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null||!isNaN(E)&&E>=400?o++:!isNaN(E)&&E>=200&&E<400&&C++,(V.duration||0)>=500&&b++;const R=(V.method||"").toUpperCase();R==="POST"&&z++,R==="GET"&&F++;const N=(V.url||"").toLowerCase(),ce=(V.client||"").toLowerCase();(N.includes("graphql")||ce.includes("graphql")||ce.includes("apollo"))&&G++}),{all:P.length,errors:o,success:C,slow:b,post:z,get:F,graphql:G}},[P]),Pe=Q(()=>[{id:"all",label:"All",count:O.all,color:e.purple},{id:"errors",label:"Errors",count:O.errors,color:e.errorColor},{id:"success",label:"2xx OK",count:O.success,color:e.greenColor},{id:"slow",label:"Slow >500ms",count:O.slow,color:e.warningIconGold},{id:"POST",label:"POST",count:O.post,color:we.POST||"#3B82F6"},{id:"GET",label:"GET",count:O.get,color:we.GET||"#10B981"},{id:"graphql",label:"GraphQL",count:O.graphql,color:"#E10098"}],[O]),v=Q(()=>{if(!P||P.length===0)return null;let o=0,C=0,b=0,z=0;const F=[];P.forEach(R=>{if(R.status!=null){C++;const N=typeof R.status=="number"?R.status:parseInt(String(R.status),10);isNaN(N)||N>=200&&N<400&&o++}typeof R.duration=="number"&&R.duration>0&&(F.push(R.duration),b+=R.duration)}),F.sort((R,N)=>R-N);const G=F.length>0?Math.round(b/F.length):0,V=F.length>0?F[Math.floor(F.length*.95)]:0;return{successRate:C>0?Math.round(o/C*100):100,avgDuration:G,p95:V,totalCount:P.length}},[P]),Le=de(({item:o,index:C})=>{if(o.type==="header")return<Se index={C}distance={8}>
+            <We pageName={o.pageName}color={o.color}stats={o.stats}activeFilters={o.activeFilters}onToggleFilter={Z}isCollapsed={o.isCollapsed}onToggleCollapse={ee}isFirst={o.isFirst}timestamp={o.timestamp}/>
+          </Se>;const{log:b,isLast:z,color:F}=o;return<Se index={C}distance={8}style={[w.treeNodeRow,z&&w.treeNodeRowLast]}>
+          <S style={w.treeLines}>
+            <S style={[w.modernTreeLine,{borderColor:F},z&&w.modernTreeLineLast]}/>
+            {!z&&<S style={[w.modernTreeBranch,{borderColor:F}]}/>}
+          </S>
+          <S style={w.treeCardWrapper}>
+            <$e item={b}isSelected={W.has(b.id)}onToggleSelect={le}onPress={()=>{se(b)}}timelineMinStart={oe}timelineTotalRange={te}isNew={re.has(b.id)}searchStr={L}/>
+          </S>
+        </Se>},[oe,te,re,W,le,L,Z,ee,se]);return<S style={{flex:1}}>
+      <S style={{marginTop:6}}>
             
-            {networkMetrics != null && networkMetrics.totalCount > 0 && (<View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                backgroundColor: AppColors.grayBackground,
-                borderRadius: 8,
-                paddingHorizontal: 10,
-                paddingVertical: 5.5,
-                marginHorizontal: 12,
-                marginBottom: 6,
-                borderWidth: 1,
-                borderColor: AppColors.dividerColor,
-            }}>
+            {v!=null&&v.totalCount>0&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:10,paddingVertical:5.5,marginHorizontal:12,marginBottom:6,borderWidth:1,borderColor:e.dividerColor}}>
                 
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4.5 }}>
-                  <View style={{
-                width: 6,
-                height: 6,
-                borderRadius: 3,
-                backgroundColor: networkMetrics.successRate >= 95
-                    ? AppColors.greenColor
-                    : networkMetrics.successRate >= 80
-                        ? AppColors.amber500
-                        : AppColors.errorColor,
-            }}/>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: AppColors.primaryBlack }}>
-                    {networkMetrics.successRate}%
-                  </Text>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 10, color: AppColors.grayTextWeak }}>
-                    {t('network.successRate')}
-                  </Text>
-                </View>
+                <S style={{flexDirection:"row",alignItems:"center",gap:4.5}}>
+                  <S style={{width:6,height:6,borderRadius:3,backgroundColor:v.successRate>=95?e.greenColor:v.successRate>=80?e.amber500:e.errorColor}}/>
+                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.primaryBlack}}>
+                    {v.successRate}%
+                  </I>
+                  <I style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
+                    {ae("network.successRate")}
+                  </I>
+                </S>
 
-                <View style={{ width: 1, height: 11, backgroundColor: AppColors.dividerColor }}/>
+                <S style={{width:1,height:11,backgroundColor:e.dividerColor}}/>
 
                 
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-                  <ClockIcon color={AppColors.purple} size={10}/>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: AppColors.purple }}>
-                    {networkMetrics.avgDuration}ms
-                  </Text>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 10, color: AppColors.grayTextWeak }}>
-                    {t('network.avgLatency')}
-                  </Text>
-                </View>
+                <S style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                  <Te color={e.purple}size={10}/>
+                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.purple}}>
+                    {v.avgDuration}ms
+                  </I>
+                  <I style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
+                    {ae("network.avgLatency")}
+                  </I>
+                </S>
 
-                <View style={{ width: 1, height: 11, backgroundColor: AppColors.dividerColor }}/>
+                <S style={{width:1,height:11,backgroundColor:e.dividerColor}}/>
 
                 
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: AppColors.primaryBlack }}>
-                    {networkMetrics.p95}ms
-                  </Text>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 10, color: AppColors.grayTextWeak }}>
+                <S style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.primaryBlack}}>
+                    {v.p95}ms
+                  </I>
+                  <I style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
                     P95
-                  </Text>
-                </View>
-              </View>)}
+                  </I>
+                </S>
+              </S>}
 
             
-            <View style={styles.toolbarRow}>
-              <View style={[
-            styles.searchContainer,
-            isSearchFocused && {
-                borderColor: AppColors.purple,
-                borderWidth: 1.5,
-            },
-        ]}>
-                <SearchIcon color={isSearchFocused
-            ? AppColors.purple
-            : AppColors.grayTextWeak} size={15}/>
-                <TextInput placeholder="Search URL, status, method, headers, body..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            <S style={w.toolbarRow}>
+              <S style={[w.searchContainer,ie&&{borderColor:e.purple,borderWidth:1.5}]}>
+                <Ke color={ie?e.purple:e.grayTextWeak}size={15}/>
+                <Ae placeholder="Search URL, status, method, headers, body..."placeholderTextColor={e.grayTextWeak}value={L}onChangeText={q}onFocus={()=>ne(!0)}onBlur={()=>ne(!1)}style={w.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
-                {search.length > 0 && (<View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 4,
-            }}>
-                    <View style={{
-                backgroundColor: `${AppColors.purple}20`,
-                borderRadius: 10,
-                paddingHorizontal: 6,
-                paddingVertical: 1.5,
-            }}>
-                      <Text style={{
-                color: AppColors.purple,
-                fontSize: 9.5,
-                fontFamily: AppFonts.interBold,
-            }}>
-                        {filteredLogs.length}
-                      </Text>
-                    </View>
-                    <Pressable onPress={() => setSearch('')} hitSlop={10} style={styles.clearBtn}>
-                      <ClearIcon color={AppColors.grayTextWeak} size={13}/>
-                    </Pressable>
-                  </View>)}
-              </View>
+                {L.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                    <S style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                      <I style={{color:e.purple,fontSize:9.5,fontFamily:B.interBold}}>
+                        {M.length}
+                      </I>
+                    </S>
+                    <Ee onPress={()=>q("")}hitSlop={10}style={w.clearBtn}>
+                      <Xe color={e.grayTextWeak}size={13}/>
+                    </Ee>
+                  </S>}
+              </S>
 
-              <View style={styles.toolbarRight}>
-                <TouchableScale style={[
-            styles.toolbarBtn,
-            isNetworkPaused && {
-                borderColor: `${AppColors.darkOrange}50`,
-                backgroundColor: `${AppColors.darkOrange}18`,
-            },
-        ]} onPress={() => setIsNetworkPaused(p => !p)} hitSlop={6}>
-                  <HeaderPauseIcon isPaused={isNetworkPaused} color={isNetworkPaused
-            ? AppColors.darkOrange
-            : AppColors.grayTextStrong} size={16}/>
-                </TouchableScale>
+              <S style={w.toolbarRight}>
+                <D style={[w.toolbarBtn,K&&{borderColor:`${e.darkOrange}50`,backgroundColor:`${e.darkOrange}18`}]}onPress={()=>Ie(o=>!o)}hitSlop={6}>
+                  <To isPaused={K}color={K?e.darkOrange:e.grayTextStrong}size={16}/>
+                </D>
 
-                <TouchableScale style={[
-            styles.toolbarBtn,
-            {
-                borderColor: `${AppColors.errorColor}38`,
-                backgroundColor: `${AppColors.errorColor}0F`,
-            },
-        ]} onPress={handleDelete} hitSlop={6}>
-                  <TrashIcon color={AppColors.errorColor} size={15}/>
-                  {selectedLogs.size > 0 && (<View style={styles.trashBadge}>
-                      <Text style={styles.trashBadgeText}>
-                        {selectedLogs.size}
-                      </Text>
-                    </View>)}
-                </TouchableScale>
+                <D style={[w.toolbarBtn,{borderColor:`${e.errorColor}38`,backgroundColor:`${e.errorColor}0F`}]}onPress={ke}hitSlop={6}>
+                  <Je color={e.errorColor}size={15}/>
+                  {W.size>0&&<S style={w.trashBadge}>
+                      <I style={w.trashBadgeText}>
+                        {W.size}
+                      </I>
+                    </S>}
+                </D>
 
-                <TouchableScale style={styles.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
-                  <SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors.grayTextStrong} size={18}/>
-                </TouchableScale>
+                <D style={w.toolbarBtn}onPress={()=>$(o=>o==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <Ye direction={j==="newest"?"down":"up"}color={e.grayTextStrong}size={18}/>
+                </D>
 
-                <TouchableScale style={[
-            styles.toolbarBtn,
-            (statusFilters.size > 0 || methodFilters.size > 0) && {
-                borderColor: AppColors.purple,
-                backgroundColor: `${AppColors.purple}15`,
-            },
-        ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
-                  <FilterIcon color={statusFilters.size > 0 || methodFilters.size > 0
-            ? AppColors.purple
-            : AppColors.grayTextStrong} size={16}/>
-                  {(statusFilters.size > 0 ||
-            methodFilters.size > 0) && (<View style={styles.activeFilterDot}/>)}
-                </TouchableScale>
-              </View>
-            </View>
+                <D style={[w.toolbarBtn,(T.size>0||x.size>0)&&{borderColor:e.purple,backgroundColor:`${e.purple}15`}]}onPress={()=>X(!0)}hitSlop={6}>
+                  <Ce color={T.size>0||x.size>0?e.purple:e.grayTextStrong}size={16}/>
+                  {(T.size>0||x.size>0)&&<S style={w.activeFilterDot}/>}
+                </D>
+              </S>
+            </S>
 
             
-            <View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginBottom: 8,
-            paddingHorizontal: 12,
-            gap: 6,
-        }}>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }} contentContainerStyle={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 6,
-            paddingRight: 6,
-        }}>
-                {QUICK_CHIPS.map(chip => {
-            const isActive = quickFilter === chip.id;
-            const chipColor = chip.color || AppColors.purple;
-            const iconColor = isActive ? AppColors.white : chipColor;
-            return (<TouchableScale key={chip.id} onPress={() => {
-                    setQuickFilter(isActive ? 'all' : chip.id);
-                }}>
-                      <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    paddingHorizontal: 9,
-                    paddingVertical: 4.5,
-                    borderRadius: 8,
-                    backgroundColor: isActive
-                        ? chipColor
-                        : `${chipColor}12`,
-                    borderWidth: 1,
-                    borderColor: isActive
-                        ? chipColor
-                        : `${chipColor}30`,
-                    gap: 5,
-                }}>
-                        {chip.id === 'all' && <LayersIcon size={11} color={iconColor}/>}
-                        {chip.id === 'errors' && <CircleXIcon size={11} color={iconColor}/>}
-                        {chip.id === 'success' && <CircleCheckIcon size={11} color={iconColor}/>}
-                        {chip.id === 'slow' && <ClockIcon size={11} color={iconColor}/>}
-                        {chip.id === 'POST' && <RequestIcon size={11} color={iconColor}/>}
-                        {chip.id === 'GET' && <ResponseIcon size={11} color={iconColor}/>}
-                        {chip.id === 'graphql' && <AtomIcon size={11} color={iconColor}/>}
-                        <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: isActive
-                        ? AppColors.white
-                        : AppColors.primaryBlack,
-                }}>
-                          {chip.label}
-                        </Text>
-                        <View style={{
-                    backgroundColor: isActive
-                        ? 'rgba(255,255,255,0.25)'
-                        : `${chipColor}20`,
-                    paddingHorizontal: 5,
-                    paddingVertical: 1,
-                    borderRadius: 8,
-                }}>
-                          <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9,
-                    color: isActive ? AppColors.white : chipColor,
-                }}>
-                            {chip.count}
-                          </Text>
-                        </View>
-                      </View>
-                    </TouchableScale>);
-        })}
-              </ScrollView>
+            <S style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
+              <He horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+                {Pe.map(o=>{const C=_===o.id,b=o.color||e.purple,z=C?e.white:b;return<D key={o.id}onPress={()=>{U(C?"all":o.id)}}>
+                      <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:C?b:`${b}12`,borderWidth:1,borderColor:C?b:`${b}30`,gap:5}}>
+                        {o.id==="all"&&<Co size={11}color={z}/>}
+                        {o.id==="errors"&&<So size={11}color={z}/>}
+                        {o.id==="success"&&<Ze size={11}color={z}/>}
+                        {o.id==="slow"&&<Te size={11}color={z}/>}
+                        {o.id==="POST"&&<Io size={11}color={z}/>}
+                        {o.id==="GET"&&<Fo size={11}color={z}/>}
+                        {o.id==="graphql"&&<Ro size={11}color={z}/>}
+                        <I style={{fontFamily:B.interBold,fontSize:10.5,color:C?e.white:e.primaryBlack}}>
+                          {o.label}
+                        </I>
+                        <S style={{backgroundColor:C?"rgba(255,255,255,0.25)":`${b}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
+                          <I style={{fontFamily:B.interBold,fontSize:9,color:C?e.white:b}}>
+                            {o.count}
+                          </I>
+                        </S>
+                      </S>
+                    </D>})}
+              </He>
 
-              <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={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 10.5,
-            color: statusFilters.size > 0 || methodFilters.size > 0
-                ? AppColors.purple
-                : AppColors.grayText,
-        }}>
+              <D onPress={()=>X(!0)}style={{flexShrink:0}}>
+                <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:T.size>0||x.size>0?`${e.purple}20`:e.grayBackground,borderWidth:1,borderColor:T.size>0||x.size>0?e.purple:e.grayBorderSecondary,gap:5,shadowColor:e.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
+                  <Ce size={11}color={T.size>0||x.size>0?e.purple:e.grayText}/>
+                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:T.size>0||x.size>0?e.purple:e.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>
-            </View>
+                  </I>
+                  {(T.size>0||x.size>0)&&<S style={{backgroundColor:e.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
+                      <I style={{fontFamily:B.interBold,fontSize:8.5,color:e.white}}>
+                        {T.size+x.size}
+                      </I>
+                    </S>}
+                </S>
+              </D>
+            </S>
 
             
-            {(quickFilter !== 'all' ||
-            search.trim().length > 0 ||
-            statusFilters.size > 0 ||
-            methodFilters.size > 0 ||
-            filteredLogs.length !== logs.length) && (<View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                marginHorizontal: 12,
-                marginBottom: 8,
-                paddingHorizontal: 10,
-                paddingVertical: 5.5,
-                backgroundColor: `${AppColors.purple}10`,
-                borderRadius: 8,
-                borderWidth: 1,
-                borderColor: `${AppColors.purple}25`,
-            }}>
-                <Text style={{
-                fontFamily: AppFonts.interMedium,
-                fontSize: 10.5,
-                color: AppColors.purple,
-            }}>
-                  Showing {filteredLogs.length} of {logs.length} requests
-                </Text>
-                <TouchableScale onPress={() => {
-                setSearch('');
-                setQuickFilter('all');
-                setStatusFilters(new Set());
-                setMethodFilters(new Set());
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 10.5,
-                color: AppColors.errorColor,
-            }}>
+            {(_!=="all"||L.trim().length>0||T.size>0||x.size>0||M.length!==P.length)&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:12,marginBottom:8,paddingHorizontal:10,paddingVertical:5.5,backgroundColor:`${e.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${e.purple}25`}}>
+                <I style={{fontFamily:B.interMedium,fontSize:10.5,color:e.purple}}>
+                  Showing {M.length} of {P.length} requests
+                </I>
+                <D onPress={()=>{q(""),U("all"),H(new Set),A(new Set)}}>
+                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.errorColor}}>
                     Clear All Filters
-                  </Text>
-                </TouchableScale>
-              </View>)}
-          </View>
+                  </I>
+                </D>
+              </S>}
+          </S>
 
-        <FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={search.length > 0 ||
-                statusFilters.size > 0 ||
-                methodFilters.size > 0 ||
-                quickFilter !== 'all'} searchQuery={search} customTitle={search.length > 0
-                ? 'No matching API requests'
-                : 'No network activity'} onClearSearch={() => {
-                setSearch('');
-                setStatusFilters(new Set());
-                setMethodFilters(new Set());
-                setQuickFilter('all');
-                setSearchScope('all');
-            }}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
-            styles.listContent,
-            filteredLogs.length === 0 && { flexGrow: 1 },
-        ]} keyboardShouldPersistTaps="handled"/>
+        <Ne ref={Fe}data={Y}keyExtractor={o=>o?.id?.toString()}renderItem={Le}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={De.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ge isSearch={L.length>0||T.size>0||x.size>0||_!=="all"}searchQuery={L}customTitle={L.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{q(""),H(new Set),A(new Set),U("all"),xe("all")}}/>}ListFooterComponent={Y.length>0?<Qe count={M.length}label="requests"/>:null}contentContainerStyle={[w.listContent,M.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <NetworkFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>
-    </View>);
-});
-export default NetworkTab;
+      <_e visible={Re}onClose={()=>X(!1)}filters={Be}onApply={Ve}searchQuery={L}/>
+    </S>});export default Bo;