react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,613 +1,138 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Modal, Pressable, ScrollView, StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
-import { useInspector } from './InspectorContext';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { useTranslation } from '../../i18n';
-import { METHOD_COLORS } from '../../constants';
-import { FilterIcon, CloseWhite, ClockIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, LayersIcon, RepeatIcon, ShieldAlertIcon, BoltIcon, GlobeIcon, LockIcon, UnlockIcon, RocketIcon, TurtleIcon, HourglassIcon, PackageIcon, } from '../NetworkIcons';
-import TouchableScale from '../TouchableScale';
-export const DEFAULT_NETWORK_FILTERS = {
-    statusCodes: new Set(['all']),
-    methods: new Set(['all']),
-    latency: 'all',
-    protocol: 'all',
-    sortBy: 'time_desc',
-};
-export const isNetworkFiltersDefault = (f) => (f.statusCodes.has('all') || f.statusCodes.size === 0) &&
-    (f.methods.has('all') || f.methods.size === 0) &&
-    f.latency === 'all' &&
-    f.protocol === 'all' &&
-    f.sortBy === 'time_desc';
-export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQuery = '', }) => {
-    const { t } = useTranslation();
-    const { logs } = useInspector();
-    const [draft, setDraft] = useState(() => ({
-        ...filters,
-        statusCodes: new Set(filters.statusCodes),
-        methods: new Set(filters.methods),
-    }));
-    useEffect(() => {
-        if (visible) {
-            setDraft({
-                ...filters,
-                statusCodes: new Set(filters.statusCodes),
-                methods: new Set(filters.methods),
-            });
-        }
-    }, [visible, filters]);
-    const counts = useMemo(() => {
-        const statusMap = {
-            all: logs.length,
-            '2xx': 0,
-            '3xx': 0,
-            '4xx': 0,
-            '5xx': 0,
-            failed: 0,
-        };
-        const methodMap = { all: logs.length };
-        let fastCount = 0;
-        let normalCount = 0;
-        let slowCount = 0;
-        let httpsCount = 0;
-        let httpCount = 0;
-        for (const log of logs) {
-            const s = typeof log.status === 'number' ? log.status : parseInt(String(log.status), 10);
-            if (log.status === 0 || log.status == null) {
-                statusMap.failed = (statusMap.failed || 0) + 1;
-            }
-            else if (!isNaN(s)) {
-                if (s >= 200 && s < 300)
-                    statusMap['2xx'] = (statusMap['2xx'] || 0) + 1;
-                else if (s >= 300 && s < 400)
-                    statusMap['3xx'] = (statusMap['3xx'] || 0) + 1;
-                else if (s >= 400 && s < 500)
-                    statusMap['4xx'] = (statusMap['4xx'] || 0) + 1;
-                else if (s >= 500)
-                    statusMap['5xx'] = (statusMap['5xx'] || 0) + 1;
-            }
-            const m = (log.method || 'GET').toUpperCase();
-            methodMap[m] = (methodMap[m] || 0) + 1;
-            const dur = log.duration || 0;
-            if (dur < 200)
-                fastCount++;
-            else if (dur <= 500)
-                normalCount++;
-            else
-                slowCount++;
-            if ((log.url || '').toLowerCase().startsWith('https'))
-                httpsCount++;
-            else
-                httpCount++;
-        }
-        return {
-            statusMap,
-            methodMap,
-            fastCount,
-            normalCount,
-            slowCount,
-            httpsCount,
-            httpCount,
-        };
-    }, [logs]);
-    const previewMatchCount = useMemo(() => {
-        return logs.filter(log => {
-            if (!draft.statusCodes.has('all') && draft.statusCodes.size > 0) {
-                const s = typeof log.status === 'number' ? log.status : parseInt(String(log.status), 10);
-                let matches = false;
-                if (draft.statusCodes.has('failed') && (log.status === 0 || log.status == null))
-                    matches = true;
-                if (draft.statusCodes.has('2xx') && !isNaN(s) && s >= 200 && s < 300)
-                    matches = true;
-                if (draft.statusCodes.has('3xx') && !isNaN(s) && s >= 300 && s < 400)
-                    matches = true;
-                if (draft.statusCodes.has('4xx') && !isNaN(s) && s >= 400 && s < 500)
-                    matches = true;
-                if (draft.statusCodes.has('5xx') && !isNaN(s) && s >= 500)
-                    matches = true;
-                if (!matches)
-                    return false;
-            }
-            if (!draft.methods.has('all') && draft.methods.size > 0) {
-                const m = (log.method || 'GET').toUpperCase();
-                if (!draft.methods.has(m))
-                    return false;
-            }
-            const dur = log.duration || 0;
-            if (draft.latency === 'fast' && dur >= 200)
-                return false;
-            if (draft.latency === 'normal' && (dur < 200 || dur > 500))
-                return false;
-            if (draft.latency === 'slow' && dur <= 500)
-                return false;
-            const isHttps = (log.url || '').toLowerCase().startsWith('https');
-            if (draft.protocol === 'https' && !isHttps)
-                return false;
-            if (draft.protocol === 'http' && isHttps)
-                return false;
-            if (searchQuery.trim().length > 0) {
-                const q = searchQuery.toLowerCase();
-                const u = (log.url || '').toLowerCase();
-                if (!u.includes(q))
-                    return false;
-            }
-            return true;
-        }).length;
-    }, [logs, draft, searchQuery]);
-    const toggleStatus = (key) => {
-        setDraft(prev => {
-            const next = new Set(prev.statusCodes);
-            if (key === 'all') {
-                return { ...prev, statusCodes: new Set(['all']) };
-            }
-            next.delete('all');
-            if (next.has(key)) {
-                next.delete(key);
-                if (next.size === 0)
-                    next.add('all');
-            }
-            else {
-                next.add(key);
-            }
-            return { ...prev, statusCodes: next };
-        });
-    };
-    const toggleMethod = (key) => {
-        setDraft(prev => {
-            const next = new Set(prev.methods);
-            if (key === 'all') {
-                return { ...prev, methods: new Set(['all']) };
-            }
-            next.delete('all');
-            if (next.has(key)) {
-                next.delete(key);
-                if (next.size === 0)
-                    next.add('all');
-            }
-            else {
-                next.add(key);
-            }
-            return { ...prev, methods: next };
-        });
-    };
-    const handleReset = () => {
-        setDraft({
-            statusCodes: new Set(['all']),
-            methods: new Set(['all']),
-            latency: 'all',
-            protocol: 'all',
-            sortBy: 'time_desc',
-        });
-    };
-    const handleApply = () => {
-        onApply(draft);
-        onClose();
-    };
-    const activeFiltersCount = useMemo(() => {
-        let count = 0;
-        if (!draft.statusCodes.has('all') && draft.statusCodes.size > 0)
-            count += draft.statusCodes.size;
-        if (!draft.methods.has('all') && draft.methods.size > 0)
-            count += draft.methods.size;
-        if (draft.latency !== 'all')
-            count++;
-        if (draft.protocol !== 'all')
-            count++;
-        if (draft.sortBy !== 'time_desc')
-            count++;
-        return count;
-    }, [draft]);
-    return (<Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
-      <Pressable style={styles.overlay} onPress={onClose}>
-        <Pressable style={styles.modalCard} onPress={e => e.stopPropagation()}>
+import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as Ce,Pressable as Y,ScrollView as Te,StyleSheet as we,Text as S,TouchableOpacity as L,View as T}from"react-native";import{useInspector as me}from"./InspectorContext";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{useTranslation as ke}from"../../i18n";import{METHOD_COLORS as Se}from"../../constants";import{FilterIcon as Be,CloseWhite as Pe,ClockIcon as K,CircleCheckIcon as Ie,CircleAlertIcon as X,CircleXIcon as Oe,LayersIcon as A,RepeatIcon as ze,ShieldAlertIcon as Ve,BoltIcon as Re,GlobeIcon as Fe,LockIcon as Le,UnlockIcon as We,RocketIcon as Ee,TurtleIcon as Me,HourglassIcon as Ne,PackageIcon as Ae}from"../NetworkIcons";import J from"../TouchableScale";export const DEFAULT_NETWORK_FILTERS={statusCodes:new Set(["all"]),methods:new Set(["all"]),latency:"all",protocol:"all",sortBy:"time_desc"},isNetworkFiltersDefault=I=>(I.statusCodes.has("all")||I.statusCodes.size===0)&&(I.methods.has("all")||I.methods.size===0)&&I.latency==="all"&&I.protocol==="all"&&I.sortBy==="time_desc",NetworkFilterModal=({visible:I,onClose:E,filters:R,onApply:Z,searchQuery:M=""})=>{const{t:De}=ke(),{logs:W}=me(),[r,F]=le(()=>({...R,statusCodes:new Set(R.statusCodes),methods:new Set(R.methods)}));te(()=>{I&&F({...R,statusCodes:new Set(R.statusCodes),methods:new Set(R.methods)})},[I,R]);const P=N(()=>{const e={all:W.length,"2xx":0,"3xx":0,"4xx":0,"5xx":0,failed:0},l={all:W.length};let C=0,g=0,O=0,v=0,_=0;for(const z of W){const V=typeof z.status=="number"?z.status:parseInt(String(z.status),10);z.status===0||z.status==null?e.failed=(e.failed||0)+1:isNaN(V)||(V>=200&&V<300?e["2xx"]=(e["2xx"]||0)+1:V>=300&&V<400?e["3xx"]=(e["3xx"]||0)+1:V>=400&&V<500?e["4xx"]=(e["4xx"]||0)+1:V>=500&&(e["5xx"]=(e["5xx"]||0)+1));const U=(z.method||"GET").toUpperCase();l[U]=(l[U]||0)+1;const G=z.duration||0;G<200?C++:G<=500?g++:O++,(z.url||"").toLowerCase().startsWith("https")?v++:_++}return{statusMap:e,methodMap:l,fastCount:C,normalCount:g,slowCount:O,httpsCount:v,httpCount:_}},[W]),D=N(()=>W.filter(e=>{if(!r.statusCodes.has("all")&&r.statusCodes.size>0){const g=typeof e.status=="number"?e.status:parseInt(String(e.status),10);let O=!1;if(r.statusCodes.has("failed")&&(e.status===0||e.status==null)&&(O=!0),r.statusCodes.has("2xx")&&!isNaN(g)&&g>=200&&g<300&&(O=!0),r.statusCodes.has("3xx")&&!isNaN(g)&&g>=300&&g<400&&(O=!0),r.statusCodes.has("4xx")&&!isNaN(g)&&g>=400&&g<500&&(O=!0),r.statusCodes.has("5xx")&&!isNaN(g)&&g>=500&&(O=!0),!O)return!1}if(!r.methods.has("all")&&r.methods.size>0){const g=(e.method||"GET").toUpperCase();if(!r.methods.has(g))return!1}const l=e.duration||0;if(r.latency==="fast"&&l>=200||r.latency==="normal"&&(l<200||l>500)||r.latency==="slow"&&l<=500)return!1;const C=(e.url||"").toLowerCase().startsWith("https");if(r.protocol==="https"&&!C||r.protocol==="http"&&C)return!1;if(M.trim().length>0){const g=M.toLowerCase();if(!(e.url||"").toLowerCase().includes(g))return!1}return!0}).length,[W,r,M]),Q=e=>{F(l=>{const C=new Set(l.statusCodes);return e==="all"?{...l,statusCodes:new Set(["all"])}:(C.delete("all"),C.has(e)?(C.delete(e),C.size===0&&C.add("all")):C.add(e),{...l,statusCodes:C})})},H=e=>{F(l=>{const C=new Set(l.methods);return e==="all"?{...l,methods:new Set(["all"])}:(C.delete("all"),C.has(e)?(C.delete(e),C.size===0&&C.add("all")):C.add(e),{...l,methods:C})})},ee=()=>{F({statusCodes:new Set(["all"]),methods:new Set(["all"]),latency:"all",protocol:"all",sortBy:"time_desc"})},oe=()=>{Z(r),E()},$=N(()=>{let e=0;return!r.statusCodes.has("all")&&r.statusCodes.size>0&&(e+=r.statusCodes.size),!r.methods.has("all")&&r.methods.size>0&&(e+=r.methods.size),r.latency!=="all"&&e++,r.protocol!=="all"&&e++,r.sortBy!=="time_desc"&&e++,e},[r]);return<Ce visible={I}transparent animationType="fade"onRequestClose={E}>
+      <Y style={o.overlay}onPress={E}>
+        <Y style={o.modalCard}onPress={e=>e.stopPropagation()}>
           
-          <View style={styles.header}>
-            <View style={styles.headerLeft}>
-              <View style={styles.iconCircle}>
-                <FilterIcon size={16} color={AppColors.purple}/>
-              </View>
-              <View>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                  <Text style={styles.title}>Network Filters</Text>
-                  {activeFiltersCount > 0 && (<View style={styles.activeBadge}>
-                      <Text style={styles.activeBadgeText}>{activeFiltersCount} active</Text>
-                    </View>)}
-                </View>
-                <Text style={styles.subtitle}>Filter requests by status, method & speed</Text>
-              </View>
-            </View>
-            <TouchableOpacity onPress={onClose} hitSlop={10} style={styles.closeBtn}>
-              <CloseWhite size={14} color={AppColors.grayText}/>
-            </TouchableOpacity>
-          </View>
+          <T style={o.header}>
+            <T style={o.headerLeft}>
+              <T style={o.iconCircle}>
+                <Be size={16}color={t.purple}/>
+              </T>
+              <T>
+                <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  <S style={o.title}>Network Filters</S>
+                  {$>0&&<T style={o.activeBadge}>
+                      <S style={o.activeBadgeText}>{$} active</S>
+                    </T>}
+                </T>
+                <S style={o.subtitle}>Filter requests by status, method & speed</S>
+              </T>
+            </T>
+            <L onPress={E}hitSlop={10}style={o.closeBtn}>
+              <Pe size={14}color={t.grayText}/>
+            </L>
+          </T>
 
-          <ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+          <Te style={o.scrollArea}contentContainerStyle={o.scrollContent}showsVerticalScrollIndicator={!1}>
             
-            <View style={styles.section}>
-              <Text style={styles.sectionTitle}>HTTP STATUS CODE</Text>
-              <View style={styles.chipsWrap}>
-                {[
-            { key: 'all', label: 'All Statuses', color: AppColors.purple, icon: LayersIcon, count: counts.statusMap.all },
-            { key: '2xx', label: '2xx Success', color: AppColors.greenColor, icon: CircleCheckIcon, count: counts.statusMap['2xx'] || 0 },
-            { key: '3xx', label: '3xx Redirect', color: AppColors.warningIconGold, icon: RepeatIcon, count: counts.statusMap['3xx'] || 0 },
-            { key: '4xx', label: '4xx Client Error', color: AppColors.darkOrange, icon: CircleAlertIcon, count: counts.statusMap['4xx'] || 0 },
-            { key: '5xx', label: '5xx Server Error', color: AppColors.errorColor, icon: CircleXIcon, count: counts.statusMap['5xx'] || 0 },
-            { key: 'failed', label: 'Network Failed / 0', color: AppColors.errorColor, icon: ShieldAlertIcon, count: counts.statusMap.failed || 0 },
-        ].map(item => {
-            const isSelected = draft.statusCodes.has(item.key);
-            const IconComp = item.icon;
-            return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => toggleStatus(item.key)} style={[
-                    styles.chip,
-                    isSelected && {
-                        backgroundColor: `${item.color}15`,
-                        borderColor: item.color,
-                    },
-                ]}>
-                      <IconComp size={13} color={isSelected ? item.color : AppColors.grayTextWeak}/>
-                      <Text style={[
-                    styles.chipLabel,
-                    isSelected && { color: item.color, fontFamily: AppFonts.interBold },
-                ]}>
-                        {item.label}
-                      </Text>
-                      <View style={[
-                    styles.countPill,
-                    isSelected && { backgroundColor: `${item.color}25` },
-                ]}>
-                        <Text style={[
-                    styles.countPillText,
-                    isSelected && { color: item.color },
-                ]}>
-                          {item.count}
-                        </Text>
-                      </View>
-                    </TouchableOpacity>);
-        })}
-              </View>
-            </View>
+            <T style={o.section}>
+              <S style={o.sectionTitle}>HTTP STATUS CODE</S>
+              <T style={o.chipsWrap}>
+                {[{key:"all",label:"All Statuses",color:t.purple,icon:A,count:P.statusMap.all},{key:"2xx",label:"2xx Success",color:t.greenColor,icon:Ie,count:P.statusMap["2xx"]||0},{key:"3xx",label:"3xx Redirect",color:t.warningIconGold,icon:ze,count:P.statusMap["3xx"]||0},{key:"4xx",label:"4xx Client Error",color:t.darkOrange,icon:X,count:P.statusMap["4xx"]||0},{key:"5xx",label:"5xx Server Error",color:t.errorColor,icon:Oe,count:P.statusMap["5xx"]||0},{key:"failed",label:"Network Failed / 0",color:t.errorColor,icon:Ve,count:P.statusMap.failed||0}].map(e=>{const l=r.statusCodes.has(e.key),C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>Q(e.key)}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
+                      <C size={13}color={l?e.color:t.grayTextWeak}/>
+                      <S style={[o.chipLabel,l&&{color:e.color,fontFamily:B.interBold}]}>
+                        {e.label}
+                      </S>
+                      <T style={[o.countPill,l&&{backgroundColor:`${e.color}25`}]}>
+                        <S style={[o.countPillText,l&&{color:e.color}]}>
+                          {e.count}
+                        </S>
+                      </T>
+                    </L>})}
+              </T>
+            </T>
 
             
-            <View style={styles.section}>
-              <Text style={styles.sectionTitle}>HTTP METHOD</Text>
-              <View style={styles.chipsWrap}>
-                <TouchableOpacity activeOpacity={0.7} onPress={() => toggleMethod('all')} style={[
-            styles.chip,
-            draft.methods.has('all') && {
-                backgroundColor: `${AppColors.purple}15`,
-                borderColor: AppColors.purple,
-            },
-        ]}>
-                  <LayersIcon size={12} color={draft.methods.has('all') ? AppColors.purple : AppColors.grayTextWeak}/>
-                  <Text style={[
-            styles.chipLabel,
-            draft.methods.has('all') && { color: AppColors.purple, fontFamily: AppFonts.interBold },
-        ]}>
+            <T style={o.section}>
+              <S style={o.sectionTitle}>HTTP METHOD</S>
+              <T style={o.chipsWrap}>
+                <L activeOpacity={.7}onPress={()=>H("all")}style={[o.chip,r.methods.has("all")&&{backgroundColor:`${t.purple}15`,borderColor:t.purple}]}>
+                  <A size={12}color={r.methods.has("all")?t.purple:t.grayTextWeak}/>
+                  <S style={[o.chipLabel,r.methods.has("all")&&{color:t.purple,fontFamily:B.interBold}]}>
                     All Methods
-                  </Text>
-                  <View style={[styles.countPill, draft.methods.has('all') && { backgroundColor: `${AppColors.purple}25` }]}>
-                    <Text style={[styles.countPillText, draft.methods.has('all') && { color: AppColors.purple }]}>
-                      {counts.methodMap.all}
-                    </Text>
-                  </View>
-                </TouchableOpacity>
+                  </S>
+                  <T style={[o.countPill,r.methods.has("all")&&{backgroundColor:`${t.purple}25`}]}>
+                    <S style={[o.countPillText,r.methods.has("all")&&{color:t.purple}]}>
+                      {P.methodMap.all}
+                    </S>
+                  </T>
+                </L>
 
-                {['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'QUERY', 'OPTIONS', 'HEAD'].map(m => {
-            const isSelected = draft.methods.has(m);
-            const mColor = METHOD_COLORS[m] || AppColors.grayText;
-            const count = counts.methodMap[m] || 0;
-            return (<TouchableOpacity key={m} activeOpacity={0.7} onPress={() => toggleMethod(m)} style={[
-                    styles.chip,
-                    isSelected && {
-                        backgroundColor: `${mColor}18`,
-                        borderColor: mColor,
-                    },
-                ]}>
-                      <View style={[styles.methodDot, { backgroundColor: mColor }]}/>
-                      <Text style={[
-                    styles.chipLabel,
-                    isSelected && { color: mColor, fontFamily: AppFonts.interBold },
-                ]}>
-                        {m}
-                      </Text>
-                      <View style={[
-                    styles.countPill,
-                    isSelected && { backgroundColor: `${mColor}25` },
-                ]}>
-                        <Text style={[
-                    styles.countPillText,
-                    isSelected && { color: mColor },
-                ]}>
-                          {count}
-                        </Text>
-                      </View>
-                    </TouchableOpacity>);
-        })}
-              </View>
-            </View>
+                {["GET","POST","PUT","DELETE","PATCH","QUERY","OPTIONS","HEAD"].map(e=>{const l=r.methods.has(e),C=Se[e]||t.grayText,g=P.methodMap[e]||0;return<L key={e}activeOpacity={.7}onPress={()=>H(e)}style={[o.chip,l&&{backgroundColor:`${C}18`,borderColor:C}]}>
+                      <T style={[o.methodDot,{backgroundColor:C}]}/>
+                      <S style={[o.chipLabel,l&&{color:C,fontFamily:B.interBold}]}>
+                        {e}
+                      </S>
+                      <T style={[o.countPill,l&&{backgroundColor:`${C}25`}]}>
+                        <S style={[o.countPillText,l&&{color:C}]}>
+                          {g}
+                        </S>
+                      </T>
+                    </L>})}
+              </T>
+            </T>
 
             
-            <View style={styles.section}>
-              <Text style={styles.sectionTitle}>LATENCY & SPEED</Text>
-              <View style={styles.chipsWrap}>
-                {[
-            { key: 'all', label: 'All Speeds', color: AppColors.purple, icon: LayersIcon },
-            { key: 'fast', label: 'Fast (<200ms)', color: AppColors.greenColor, icon: BoltIcon, count: counts.fastCount },
-            { key: 'normal', label: 'Normal (200-500ms)', color: AppColors.skyBlue, icon: ClockIcon, count: counts.normalCount },
-            { key: 'slow', label: 'Slow (>500ms)', color: AppColors.errorColor, icon: CircleAlertIcon, count: counts.slowCount },
-        ].map(item => {
-            const isSelected = draft.latency === item.key;
-            const IconComp = item.icon;
-            return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, latency: item.key }))} style={[
-                    styles.chip,
-                    isSelected && {
-                        backgroundColor: `${item.color}15`,
-                        borderColor: item.color,
-                    },
-                ]}>
-                      <IconComp size={13} color={isSelected ? item.color : AppColors.grayTextWeak}/>
-                      <Text style={[
-                    styles.chipLabel,
-                    isSelected && { color: item.color, fontFamily: AppFonts.interBold },
-                ]}>
-                        {item.label}
-                      </Text>
-                      {item.count != null && (<View style={[styles.countPill, isSelected && { backgroundColor: `${item.color}25` }]}>
-                          <Text style={[styles.countPillText, isSelected && { color: item.color }]}>
-                            {item.count}
-                          </Text>
-                        </View>)}
-                    </TouchableOpacity>);
-        })}
-              </View>
-            </View>
+            <T style={o.section}>
+              <S style={o.sectionTitle}>LATENCY & SPEED</S>
+              <T style={o.chipsWrap}>
+                {[{key:"all",label:"All Speeds",color:t.purple,icon:A},{key:"fast",label:"Fast (<200ms)",color:t.greenColor,icon:Re,count:P.fastCount},{key:"normal",label:"Normal (200-500ms)",color:t.skyBlue,icon:K,count:P.normalCount},{key:"slow",label:"Slow (>500ms)",color:t.errorColor,icon:X,count:P.slowCount}].map(e=>{const l=r.latency===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,latency:e.key}))}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
+                      <C size={13}color={l?e.color:t.grayTextWeak}/>
+                      <S style={[o.chipLabel,l&&{color:e.color,fontFamily:B.interBold}]}>
+                        {e.label}
+                      </S>
+                      {e.count!=null&&<T style={[o.countPill,l&&{backgroundColor:`${e.color}25`}]}>
+                          <S style={[o.countPillText,l&&{color:e.color}]}>
+                            {e.count}
+                          </S>
+                        </T>}
+                    </L>})}
+              </T>
+            </T>
 
             
-            <View style={styles.section}>
-              <Text style={styles.sectionTitle}>PROTOCOL</Text>
-              <View style={styles.chipsWrap}>
-                {[
-            { key: 'all', label: 'All Protocols', color: AppColors.purple, icon: GlobeIcon },
-            { key: 'https', label: 'HTTPS Secure', color: AppColors.mintGreenText, icon: LockIcon, count: counts.httpsCount },
-            { key: 'http', label: 'HTTP Insecure', color: AppColors.amber700, icon: UnlockIcon, count: counts.httpCount },
-        ].map(item => {
-            const isSelected = draft.protocol === item.key;
-            const IconComp = item.icon;
-            return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, protocol: item.key }))} style={[
-                    styles.chip,
-                    isSelected && {
-                        backgroundColor: `${item.color}15`,
-                        borderColor: item.color,
-                    },
-                ]}>
-                      <IconComp size={13} color={isSelected ? item.color : AppColors.grayTextWeak}/>
-                      <Text style={[
-                    styles.chipLabel,
-                    isSelected && { color: item.color, fontFamily: AppFonts.interBold },
-                ]}>
-                        {item.label}
-                      </Text>
-                      {item.count != null && (<View style={[styles.countPill, isSelected && { backgroundColor: `${item.color}25` }]}>
-                          <Text style={[styles.countPillText, isSelected && { color: item.color }]}>
-                            {item.count}
-                          </Text>
-                        </View>)}
-                    </TouchableOpacity>);
-        })}
-              </View>
-            </View>
+            <T style={o.section}>
+              <S style={o.sectionTitle}>PROTOCOL</S>
+              <T style={o.chipsWrap}>
+                {[{key:"all",label:"All Protocols",color:t.purple,icon:Fe},{key:"https",label:"HTTPS Secure",color:t.mintGreenText,icon:Le,count:P.httpsCount},{key:"http",label:"HTTP Insecure",color:t.amber700,icon:We,count:P.httpCount}].map(e=>{const l=r.protocol===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,protocol:e.key}))}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
+                      <C size={13}color={l?e.color:t.grayTextWeak}/>
+                      <S style={[o.chipLabel,l&&{color:e.color,fontFamily:B.interBold}]}>
+                        {e.label}
+                      </S>
+                      {e.count!=null&&<T style={[o.countPill,l&&{backgroundColor:`${e.color}25`}]}>
+                          <S style={[o.countPillText,l&&{color:e.color}]}>
+                            {e.count}
+                          </S>
+                        </T>}
+                    </L>})}
+              </T>
+            </T>
 
             
-            <View style={styles.section}>
-              <Text style={styles.sectionTitle}>SORT BY</Text>
-              <View style={styles.chipsWrap}>
-                {[
-            { key: 'time_desc', label: 'Newest First (Default)', icon: ClockIcon },
-            { key: 'time_asc', label: 'Oldest First', icon: HourglassIcon },
-            { key: 'duration_desc', label: 'Slowest Response', icon: TurtleIcon },
-            { key: 'duration_asc', label: 'Fastest Response', icon: RocketIcon },
-            { key: 'size_desc', label: 'Largest Response Size', icon: PackageIcon },
-        ].map(item => {
-            const isSelected = draft.sortBy === item.key;
-            const IconComp = item.icon;
-            return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, sortBy: item.key }))} style={[
-                    styles.chip,
-                    isSelected && {
-                        backgroundColor: `${AppColors.purple}15`,
-                        borderColor: AppColors.purple,
-                    },
-                ]}>
-                      <IconComp size={13} color={isSelected ? AppColors.purple : AppColors.grayTextWeak}/>
-                      <Text style={[
-                    styles.chipLabel,
-                    isSelected && { color: AppColors.purple, fontFamily: AppFonts.interBold },
-                ]}>
-                        {item.label}
-                      </Text>
-                    </TouchableOpacity>);
-        })}
-              </View>
-            </View>
-          </ScrollView>
+            <T style={o.section}>
+              <S style={o.sectionTitle}>SORT BY</S>
+              <T style={o.chipsWrap}>
+                {[{key:"time_desc",label:"Newest First (Default)",icon:K},{key:"time_asc",label:"Oldest First",icon:Ne},{key:"duration_desc",label:"Slowest Response",icon:Me},{key:"duration_asc",label:"Fastest Response",icon:Ee},{key:"size_desc",label:"Largest Response Size",icon:Ae}].map(e=>{const l=r.sortBy===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,sortBy:e.key}))}style={[o.chip,l&&{backgroundColor:`${t.purple}15`,borderColor:t.purple}]}>
+                      <C size={13}color={l?t.purple:t.grayTextWeak}/>
+                      <S style={[o.chipLabel,l&&{color:t.purple,fontFamily:B.interBold}]}>
+                        {e.label}
+                      </S>
+                    </L>})}
+              </T>
+            </T>
+          </Te>
 
           
-          <View style={styles.footer}>
-            <TouchableScale onPress={handleReset} style={styles.resetBtn}>
-              <Text style={styles.resetBtnText}>Reset All</Text>
-            </TouchableScale>
+          <T style={o.footer}>
+            <J onPress={ee}style={o.resetBtn}>
+              <S style={o.resetBtnText}>Reset All</S>
+            </J>
 
-            <TouchableScale onPress={handleApply} style={styles.applyBtn}>
-              <Text style={styles.applyBtnText}>
-                Apply ({previewMatchCount} Request{previewMatchCount === 1 ? '' : 's'})
-              </Text>
-            </TouchableScale>
-          </View>
-        </Pressable>
-      </Pressable>
-    </Modal>);
-};
-const styles = StyleSheet.create({
-    overlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.55)',
-        justifyContent: 'flex-end',
-    },
-    modalCard: {
-        backgroundColor: AppColors.primaryLight,
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-        maxHeight: '85%',
-        shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: -4 },
-        shadowOpacity: 0.15,
-        shadowRadius: 10,
-        elevation: 8,
-    },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        paddingTop: 16,
-        paddingBottom: 12,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.grayBorderSecondary,
-    },
-    headerLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 10,
-        flex: 1,
-    },
-    iconCircle: {
-        width: 34,
-        height: 34,
-        borderRadius: 10,
-        backgroundColor: `${AppColors.purple}15`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    title: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 16,
-        color: AppColors.primaryBlack,
-    },
-    subtitle: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayText,
-        marginTop: 1,
-    },
-    activeBadge: {
-        backgroundColor: `${AppColors.purple}20`,
-        paddingHorizontal: 6,
-        paddingVertical: 1.5,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}40`,
-    },
-    activeBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.purple,
-    },
-    closeBtn: {
-        padding: 6,
-    },
-    scrollArea: {
-        maxHeight: 460,
-    },
-    scrollContent: {
-        padding: 16,
-        gap: 16,
-    },
-    section: {
-        gap: 8,
-    },
-    sectionTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.8,
-    },
-    chipsWrap: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 8,
-    },
-    chip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingHorizontal: 10,
-        paddingVertical: 6,
-        borderRadius: 8,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    chipLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-    },
-    methodDot: {
-        width: 6.5,
-        height: 6.5,
-        borderRadius: 3.5,
-    },
-    countPill: {
-        backgroundColor: `${AppColors.grayBorderSecondary}50`,
-        paddingHorizontal: 5,
-        paddingVertical: 1,
-        borderRadius: 6,
-    },
-    countPillText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.grayText,
-    },
-    footer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 10,
-        paddingHorizontal: 16,
-        paddingVertical: 14,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.primaryLight,
-    },
-    resetBtn: {
-        flex: 1,
-        paddingVertical: 11,
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: AppColors.grayBackground,
-    },
-    resetBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.grayTextStrong,
-    },
-    applyBtn: {
-        flex: 2,
-        paddingVertical: 11,
-        borderRadius: 10,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: AppColors.purple,
-        shadowColor: AppColors.purple,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.25,
-        shadowRadius: 4,
-        elevation: 3,
-    },
-    applyBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.white,
-    },
-});
-export default NetworkFilterModal;
+            <J onPress={oe}style={o.applyBtn}>
+              <S style={o.applyBtnText}>
+                Apply ({D} Request{D===1?"":"s"})
+              </S>
+            </J>
+          </T>
+        </Y>
+      </Y>
+    </Ce>};const o=we.create({overlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.55)",justifyContent:"flex-end"},modalCard:{backgroundColor:t.primaryLight,borderTopLeftRadius:20,borderTopRightRadius:20,maxHeight:"85%",shadowColor:t.black,shadowOffset:{width:0,height:-4},shadowOpacity:.15,shadowRadius:10,elevation:8},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:16,paddingBottom:12,borderBottomWidth:1,borderBottomColor:t.grayBorderSecondary},headerLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1},iconCircle:{width:34,height:34,borderRadius:10,backgroundColor:`${t.purple}15`,alignItems:"center",justifyContent:"center"},title:{fontFamily:B.interBold,fontSize:16,color:t.primaryBlack},subtitle:{fontFamily:B.interRegular,fontSize:11,color:t.grayText,marginTop:1},activeBadge:{backgroundColor:`${t.purple}20`,paddingHorizontal:6,paddingVertical:1.5,borderRadius:8,borderWidth:1,borderColor:`${t.purple}40`},activeBadgeText:{fontFamily:B.interBold,fontSize:9.5,color:t.purple},closeBtn:{padding:6},scrollArea:{maxHeight:460},scrollContent:{padding:16,gap:16},section:{gap:8},sectionTitle:{fontFamily:B.interBold,fontSize:11,color:t.grayTextWeak,letterSpacing:.8},chipsWrap:{flexDirection:"row",flexWrap:"wrap",gap:8},chip:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:10,paddingVertical:6,borderRadius:8,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.grayBorderSecondary},chipLabel:{fontFamily:B.interMedium,fontSize:12,color:t.primaryBlack},methodDot:{width:6.5,height:6.5,borderRadius:3.5},countPill:{backgroundColor:`${t.grayBorderSecondary}50`,paddingHorizontal:5,paddingVertical:1,borderRadius:6},countPillText:{fontFamily:B.interBold,fontSize:9.5,color:t.grayText},footer:{flexDirection:"row",alignItems:"center",gap:10,paddingHorizontal:16,paddingVertical:14,borderTopWidth:1,borderTopColor:t.grayBorderSecondary,backgroundColor:t.primaryLight},resetBtn:{flex:1,paddingVertical:11,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center",backgroundColor:t.grayBackground},resetBtnText:{fontFamily:B.interBold,fontSize:13,color:t.grayTextStrong},applyBtn:{flex:2,paddingVertical:11,borderRadius:10,alignItems:"center",justifyContent:"center",backgroundColor:t.purple,shadowColor:t.purple,shadowOffset:{width:0,height:2},shadowOpacity:.25,shadowRadius:4,elevation:3},applyBtnText:{fontFamily:B.interBold,fontSize:13,color:t.white}});export default NetworkFilterModal;