react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,556 +1,164 @@
-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 { FilterIcon, CloseWhite, CheckIcon, ClockIcon, HourglassIcon, SkullIcon, JsIcon, LayoutIcon, ChipIcon, AppleIcon, AndroidIcon, BoltIcon, } from '../NetworkIcons';
-import TouchableScale from '../TouchableScale';
-export const DEFAULT_CRASH_FILTERS = {
-    types: new Set(['all']),
-    timeWindow: 'all',
-    platform: 'all',
-    engine: 'all',
-    sortBy: 'time_desc',
-};
-export const isCrashFiltersDefault = (f) => (f.types.has('all') || f.types.size === 0) &&
-    f.timeWindow === 'all' &&
-    f.platform === 'all' &&
-    f.engine === 'all' &&
-    f.sortBy === 'time_desc';
-const CrashFilterModal = ({ visible, onClose, filters, onApply, searchQuery = '', }) => {
-    const { t } = useTranslation();
-    const { crashRecords } = useInspector();
-    const [draft, setDraft] = useState(() => ({
-        ...filters,
-        types: new Set(filters.types),
-    }));
-    useEffect(() => {
-        if (visible) {
-            setDraft({
-                ...filters,
-                types: new Set(filters.types),
-            });
-        }
-    }, [visible]);
-    const toggleType = (key) => {
-        setDraft(prev => {
-            const next = new Set(prev.types);
-            if (key === 'all') {
-                return { ...prev, types: 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, types: next };
-        });
-    };
-    const setTimeWindow = (tw) => {
-        setDraft(prev => ({ ...prev, timeWindow: tw }));
-    };
-    const setPlatform = (p) => {
-        setDraft(prev => ({ ...prev, platform: p }));
-    };
-    const setEngine = (e) => {
-        setDraft(prev => ({ ...prev, engine: e }));
-    };
-    const setSort = (sortBy) => {
-        setDraft(prev => ({ ...prev, sortBy }));
-    };
-    const handleResetDraft = () => {
-        setDraft({
-            ...DEFAULT_CRASH_FILTERS,
-            types: new Set(DEFAULT_CRASH_FILTERS.types),
-        });
-    };
-    const handleApply = () => {
-        onApply({
-            ...draft,
-            types: new Set(draft.types),
-        });
-        onClose();
-    };
-    const handleDiscard = () => {
-        setDraft({
-            ...filters,
-            types: new Set(filters.types),
-        });
-        onClose();
-    };
-    const draftMatchCount = useMemo(() => {
-        let crashes = crashRecords;
-        if (searchQuery.trim().length > 0) {
-            const q = searchQuery.toLowerCase();
-            crashes = crashes.filter(c => (c.message || '').toLowerCase().includes(q) ||
-                (c.name || '').toLowerCase().includes(q) ||
-                (c.stack || '').toLowerCase().includes(q));
-        }
-        if (draft.types.size > 0 && !draft.types.has('all')) {
-            crashes = crashes.filter(c => {
-                if (draft.types.has('fatal') && c.isFatal)
-                    return true;
-                if (draft.types.has('js') && c.type === 'js')
-                    return true;
-                if (draft.types.has('promise') && c.type === 'promise')
-                    return true;
-                if (draft.types.has('render') && c.type === 'render')
-                    return true;
-                if (draft.types.has('native') && c.type === 'native')
-                    return true;
-                return false;
-            });
-        }
-        if (draft.timeWindow !== 'all') {
-            const now = Date.now();
-            const cutoff = draft.timeWindow === '15m'
-                ? now - 15 * 60 * 1000
-                : draft.timeWindow === '1h'
-                    ? now - 60 * 60 * 1000
-                    : draft.timeWindow === '24h'
-                        ? now - 24 * 60 * 60 * 1000
-                        : now - 7 * 24 * 60 * 60 * 1000;
-            crashes = crashes.filter(c => c.timestamp >= cutoff);
-        }
-        if (draft.platform !== 'all') {
-            crashes = crashes.filter(c => (c.deviceInfo?.platform || '').toLowerCase() === draft.platform);
-        }
-        if (draft.engine !== 'all') {
-            crashes = crashes.filter(c => {
-                const isHermes = c.deviceInfo?.isHermes;
-                if (draft.engine === 'hermes')
-                    return isHermes === true;
-                return isHermes === false || isHermes === undefined;
-            });
-        }
-        return crashes.length;
-    }, [crashRecords, searchQuery, draft]);
-    const isAllTypes = draft.types.has('all') || draft.types.size === 0;
-    const typeChips = [
-        { key: 'all', label: t('crash.filterTypeAll'), Icon: FilterIcon, color: AppColors.grayTextStrong },
-        { key: 'fatal', label: t('crash.filterFatal'), Icon: SkullIcon, color: AppColors.errorColor },
-        { key: 'js', label: t('crash.filterJsError'), Icon: JsIcon, color: AppColors.sky600 },
-        { key: 'promise', label: t('crash.filterPromise'), Icon: HourglassIcon, color: AppColors.darkOrange },
-        { key: 'render', label: t('crash.filterRender'), Icon: LayoutIcon, color: AppColors.purple },
-        { key: 'native', label: t('crash.filterNative'), Icon: ChipIcon, color: AppColors.amber700 },
-    ];
-    return (<Modal visible={visible} transparent animationType="fade" onRequestClose={handleDiscard}>
-      <View style={styles.backdrop}>
-        <Pressable style={StyleSheet.absoluteFill} onPress={handleDiscard}/>
+import{useEffect as Q,useMemo as ee,useState as te}from"react";import{Modal as Te,Pressable as Pe,ScrollView as Se,StyleSheet as j,Text as P,TouchableOpacity as V,View as T}from"react-native";import{useInspector as Ce}from"./InspectorContext";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as I}from"../../styles/AppFonts";import{useTranslation as Be}from"../../i18n";import{FilterIcon as _,CloseWhite as Ie,CheckIcon as Ae,ClockIcon as O,HourglassIcon as E,SkullIcon as L,JsIcon as Ve,LayoutIcon as We,ChipIcon as ze,AppleIcon as M,AndroidIcon as Re,BoltIcon as $}from"../NetworkIcons";import C from"../TouchableScale";export const DEFAULT_CRASH_FILTERS={types:new Set(["all"]),timeWindow:"all",platform:"all",engine:"all",sortBy:"time_desc"},isCrashFiltersDefault=S=>(S.types.has("all")||S.types.size===0)&&S.timeWindow==="all"&&S.platform==="all"&&S.engine==="all"&&S.sortBy==="time_desc";const Oe=({visible:S,onClose:F,filters:v,onApply:q,searchQuery:W=""})=>{const{t:o}=Be(),{crashRecords:H}=Ce(),[l,B]=te(()=>({...v,types:new Set(v.types)}));Q(()=>{S&&B({...v,types:new Set(v.types)})},[S]);const J=r=>{B(i=>{const k=new Set(i.types);return r==="all"?{...i,types:new Set(["all"])}:(k.delete("all"),k.has(r)?(k.delete(r),k.size===0&&k.add("all")):k.add(r),{...i,types:k})})},N=r=>{B(i=>({...i,timeWindow:r}))},z=r=>{B(i=>({...i,platform:r}))},R=r=>{B(i=>({...i,engine:r}))},D=r=>{B(i=>({...i,sortBy:r}))},U=()=>{B({...DEFAULT_CRASH_FILTERS,types:new Set(DEFAULT_CRASH_FILTERS.types)})},G=()=>{q({...l,types:new Set(l.types)}),F()},A=()=>{B({...v,types:new Set(v.types)}),F()},K=ee(()=>{let r=H;if(W.trim().length>0){const i=W.toLowerCase();r=r.filter(k=>(k.message||"").toLowerCase().includes(i)||(k.name||"").toLowerCase().includes(i)||(k.stack||"").toLowerCase().includes(i))}if(l.types.size>0&&!l.types.has("all")&&(r=r.filter(i=>!!(l.types.has("fatal")&&i.isFatal||l.types.has("js")&&i.type==="js"||l.types.has("promise")&&i.type==="promise"||l.types.has("render")&&i.type==="render"||l.types.has("native")&&i.type==="native"))),l.timeWindow!=="all"){const i=Date.now(),k=l.timeWindow==="15m"?i-900*1e3:l.timeWindow==="1h"?i-3600*1e3:l.timeWindow==="24h"?i-1440*60*1e3:i-10080*60*1e3;r=r.filter(Z=>Z.timestamp>=k)}return l.platform!=="all"&&(r=r.filter(i=>(i.deviceInfo?.platform||"").toLowerCase()===l.platform)),l.engine!=="all"&&(r=r.filter(i=>{const k=i.deviceInfo?.isHermes;return l.engine==="hermes"?k===!0:k===!1||k===void 0})),r.length},[H,W,l]),X=l.types.has("all")||l.types.size===0,Y=[{key:"all",label:o("crash.filterTypeAll"),Icon:_,color:t.grayTextStrong},{key:"fatal",label:o("crash.filterFatal"),Icon:L,color:t.errorColor},{key:"js",label:o("crash.filterJsError"),Icon:Ve,color:t.sky600},{key:"promise",label:o("crash.filterPromise"),Icon:E,color:t.darkOrange},{key:"render",label:o("crash.filterRender"),Icon:We,color:t.purple},{key:"native",label:o("crash.filterNative"),Icon:ze,color:t.amber700}];return<Te visible={S}transparent animationType="fade"onRequestClose={A}>
+      <T style={e.backdrop}>
+        <Pe style={j.absoluteFill}onPress={A}/>
 
-        <View style={styles.modalCard}>
-          <View style={styles.header}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-              <View style={styles.headerIconBox}>
-                <FilterIcon color={AppColors.brandPurple} size={15}/>
-              </View>
-              <View>
-                <Text style={styles.headerTitle}>{t('crash.filterTitle')}</Text>
-                <Text style={styles.headerSubtitle}>
-                  {t('crash.filterSubtitle')}
-                </Text>
-              </View>
-            </View>
+        <T style={e.modalCard}>
+          <T style={e.header}>
+            <T style={{flexDirection:"row",alignItems:"center",gap:8}}>
+              <T style={e.headerIconBox}>
+                <_ color={t.brandPurple}size={15}/>
+              </T>
+              <T>
+                <P style={e.headerTitle}>{o("crash.filterTitle")}</P>
+                <P style={e.headerSubtitle}>
+                  {o("crash.filterSubtitle")}
+                </P>
+              </T>
+            </T>
 
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-              <TouchableOpacity onPress={handleResetDraft} hitSlop={8} style={styles.resetBtn}>
-                <Text style={styles.resetBtnText}>{t('crash.filterReset')}</Text>
-              </TouchableOpacity>
+            <T style={{flexDirection:"row",alignItems:"center",gap:8}}>
+              <V onPress={U}hitSlop={8}style={e.resetBtn}>
+                <P style={e.resetBtnText}>{o("crash.filterReset")}</P>
+              </V>
 
-              <TouchableOpacity onPress={handleDiscard} hitSlop={10} style={styles.closeBtn}>
-                <CloseWhite />
-              </TouchableOpacity>
-            </View>
-          </View>
+              <V onPress={A}hitSlop={10}style={e.closeBtn}>
+                <Ie/>
+              </V>
+            </T>
+          </T>
 
-          <ScrollView style={{ maxHeight: 460 }} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={true}>
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <SkullIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>
-                  {t('crash.filterTypeSection')}
-                </Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                {typeChips.map(chip => {
-            const isSelected = chip.key === 'all' ? isAllTypes : draft.types.has(chip.key);
-            return (<TouchableScale key={chip.key} onPress={() => toggleType(chip.key)} style={[
-                    styles.filterPill,
-                    isSelected && styles.filterPillActive,
-                ]}>
-                      {chip.key === 'all' && isSelected && (<CheckIcon color={AppColors.white} size={12}/>)}
-                      <chip.Icon size={12} color={isSelected ? AppColors.white : chip.color}/>
-                      <Text style={[
-                    styles.filterPillText,
-                    isSelected && styles.filterPillTextActive,
-                ]}>
-                        {chip.label}
-                      </Text>
-                    </TouchableScale>);
-        })}
-              </View>
-            </View>
+          <Se style={{maxHeight:460}}contentContainerStyle={e.scrollContent}showsVerticalScrollIndicator={!0}>
+            <T style={e.section}>
+              <T style={e.sectionHeaderRow}>
+                <L color={t.grayTextWeak}size={12}/>
+                <P style={e.sectionTitle}>
+                  {o("crash.filterTypeSection")}
+                </P>
+              </T>
+              <T style={e.chipsWrap}>
+                {Y.map(r=>{const i=r.key==="all"?X:l.types.has(r.key);return<C key={r.key}onPress={()=>J(r.key)}style={[e.filterPill,i&&e.filterPillActive]}>
+                      {r.key==="all"&&i&&<Ae color={t.white}size={12}/>}
+                      <r.Icon size={12}color={i?t.white:r.color}/>
+                      <P style={[e.filterPillText,i&&e.filterPillTextActive]}>
+                        {r.label}
+                      </P>
+                    </C>})}
+              </T>
+            </T>
 
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <ClockIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>
-                  {t('crash.filterTimeSection')}
-                </Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                {[
-            { key: 'all', label: t('crash.filterTimeAll') },
-            { key: '15m', label: t('crash.filterTime15m') },
-            { key: '1h', label: t('crash.filterTime1h') },
-            { key: '24h', label: t('crash.filterTime24h') },
-            { key: '7d', label: t('crash.filterTime7d') },
-        ].map(item => (<TouchableScale key={item.key} onPress={() => setTimeWindow(item.key)} style={[
-                styles.filterPill,
-                draft.timeWindow === item.key && styles.filterPillActive,
-            ]}>
-                    <Text style={[
-                styles.filterPillText,
-                draft.timeWindow === item.key &&
-                    styles.filterPillTextActive,
-            ]}>
-                      {item.label}
-                    </Text>
-                  </TouchableScale>))}
-              </View>
-            </View>
+            <T style={e.section}>
+              <T style={e.sectionHeaderRow}>
+                <O color={t.grayTextWeak}size={12}/>
+                <P style={e.sectionTitle}>
+                  {o("crash.filterTimeSection")}
+                </P>
+              </T>
+              <T style={e.chipsWrap}>
+                {[{key:"all",label:o("crash.filterTimeAll")},{key:"15m",label:o("crash.filterTime15m")},{key:"1h",label:o("crash.filterTime1h")},{key:"24h",label:o("crash.filterTime24h")},{key:"7d",label:o("crash.filterTime7d")}].map(r=><C key={r.key}onPress={()=>N(r.key)}style={[e.filterPill,l.timeWindow===r.key&&e.filterPillActive]}>
+                    <P style={[e.filterPillText,l.timeWindow===r.key&&e.filterPillTextActive]}>
+                      {r.label}
+                    </P>
+                  </C>)}
+              </T>
+            </T>
 
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <AppleIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>
-                  {t('crash.filterPlatformSection')}
-                </Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                <TouchableScale onPress={() => setPlatform('all')} style={[
-            styles.filterPill,
-            draft.platform === 'all' && styles.filterPillActive,
-        ]}>
-                  <Text style={[
-            styles.filterPillText,
-            draft.platform === 'all' && styles.filterPillTextActive,
-        ]}>
-                    {t('crash.filterPlatformAll')}
-                  </Text>
-                </TouchableScale>
+            <T style={e.section}>
+              <T style={e.sectionHeaderRow}>
+                <M color={t.grayTextWeak}size={12}/>
+                <P style={e.sectionTitle}>
+                  {o("crash.filterPlatformSection")}
+                </P>
+              </T>
+              <T style={e.chipsWrap}>
+                <C onPress={()=>z("all")}style={[e.filterPill,l.platform==="all"&&e.filterPillActive]}>
+                  <P style={[e.filterPillText,l.platform==="all"&&e.filterPillTextActive]}>
+                    {o("crash.filterPlatformAll")}
+                  </P>
+                </C>
 
-                <TouchableScale onPress={() => setPlatform('ios')} style={[
-            styles.filterPill,
-            draft.platform === 'ios' && styles.filterPillActive,
-        ]}>
-                  <AppleIcon size={12} color={draft.platform === 'ios'
-            ? AppColors.white
-            : AppColors.grayTextStrong}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.platform === 'ios' && styles.filterPillTextActive,
-        ]}>
-                    {t('crash.filterPlatformIos')}
-                  </Text>
-                </TouchableScale>
+                <C onPress={()=>z("ios")}style={[e.filterPill,l.platform==="ios"&&e.filterPillActive]}>
+                  <M size={12}color={l.platform==="ios"?t.white:t.grayTextStrong}/>
+                  <P style={[e.filterPillText,l.platform==="ios"&&e.filterPillTextActive]}>
+                    {o("crash.filterPlatformIos")}
+                  </P>
+                </C>
 
-                <TouchableScale onPress={() => setPlatform('android')} style={[
-            styles.filterPill,
-            draft.platform === 'android' && styles.filterPillActive,
-        ]}>
-                  <AndroidIcon size={12} color={draft.platform === 'android'
-            ? AppColors.white
-            : AppColors.greenColor}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.platform === 'android' && styles.filterPillTextActive,
-        ]}>
-                    {t('crash.filterPlatformAndroid')}
-                  </Text>
-                </TouchableScale>
-              </View>
-            </View>
+                <C onPress={()=>z("android")}style={[e.filterPill,l.platform==="android"&&e.filterPillActive]}>
+                  <Re size={12}color={l.platform==="android"?t.white:t.greenColor}/>
+                  <P style={[e.filterPillText,l.platform==="android"&&e.filterPillTextActive]}>
+                    {o("crash.filterPlatformAndroid")}
+                  </P>
+                </C>
+              </T>
+            </T>
 
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <BoltIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>
-                  {t('crash.filterEngineSection')}
-                </Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                <TouchableScale onPress={() => setEngine('all')} style={[
-            styles.filterPill,
-            draft.engine === 'all' && styles.filterPillActive,
-        ]}>
-                  <Text style={[
-            styles.filterPillText,
-            draft.engine === 'all' && styles.filterPillTextActive,
-        ]}>
-                    {t('crash.filterEngineAll')}
-                  </Text>
-                </TouchableScale>
+            <T style={e.section}>
+              <T style={e.sectionHeaderRow}>
+                <$ color={t.grayTextWeak}size={12}/>
+                <P style={e.sectionTitle}>
+                  {o("crash.filterEngineSection")}
+                </P>
+              </T>
+              <T style={e.chipsWrap}>
+                <C onPress={()=>R("all")}style={[e.filterPill,l.engine==="all"&&e.filterPillActive]}>
+                  <P style={[e.filterPillText,l.engine==="all"&&e.filterPillTextActive]}>
+                    {o("crash.filterEngineAll")}
+                  </P>
+                </C>
 
-                <TouchableScale onPress={() => setEngine('hermes')} style={[
-            styles.filterPill,
-            draft.engine === 'hermes' && styles.filterPillActive,
-        ]}>
-                  <BoltIcon size={12} color={draft.engine === 'hermes'
-            ? AppColors.white
-            : AppColors.brandPurple}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.engine === 'hermes' && styles.filterPillTextActive,
-        ]}>
-                    {t('crash.filterEngineHermes')}
-                  </Text>
-                </TouchableScale>
+                <C onPress={()=>R("hermes")}style={[e.filterPill,l.engine==="hermes"&&e.filterPillActive]}>
+                  <$ size={12}color={l.engine==="hermes"?t.white:t.brandPurple}/>
+                  <P style={[e.filterPillText,l.engine==="hermes"&&e.filterPillTextActive]}>
+                    {o("crash.filterEngineHermes")}
+                  </P>
+                </C>
 
-                <TouchableScale onPress={() => setEngine('jsc')} style={[
-            styles.filterPill,
-            draft.engine === 'jsc' && styles.filterPillActive,
-        ]}>
-                  <Text style={[
-            styles.filterPillText,
-            draft.engine === 'jsc' && styles.filterPillTextActive,
-        ]}>
-                    {t('crash.jsc')}
-                  </Text>
-                </TouchableScale>
-              </View>
-            </View>
+                <C onPress={()=>R("jsc")}style={[e.filterPill,l.engine==="jsc"&&e.filterPillActive]}>
+                  <P style={[e.filterPillText,l.engine==="jsc"&&e.filterPillTextActive]}>
+                    {o("crash.jsc")}
+                  </P>
+                </C>
+              </T>
+            </T>
 
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <ClockIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>
-                  {t('crash.filterSortSection')}
-                </Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                <TouchableScale onPress={() => setSort('time_desc')} style={[
-            styles.filterPill,
-            draft.sortBy === 'time_desc' && styles.filterPillActive,
-        ]}>
-                  <ClockIcon size={12} color={draft.sortBy === 'time_desc'
-            ? AppColors.white
-            : AppColors.grayText}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.sortBy === 'time_desc' &&
-                styles.filterPillTextActive,
-        ]}>
-                    {t('crash.filterSortNewest')}
-                  </Text>
-                </TouchableScale>
+            <T style={e.section}>
+              <T style={e.sectionHeaderRow}>
+                <O color={t.grayTextWeak}size={12}/>
+                <P style={e.sectionTitle}>
+                  {o("crash.filterSortSection")}
+                </P>
+              </T>
+              <T style={e.chipsWrap}>
+                <C onPress={()=>D("time_desc")}style={[e.filterPill,l.sortBy==="time_desc"&&e.filterPillActive]}>
+                  <O size={12}color={l.sortBy==="time_desc"?t.white:t.grayText}/>
+                  <P style={[e.filterPillText,l.sortBy==="time_desc"&&e.filterPillTextActive]}>
+                    {o("crash.filterSortNewest")}
+                  </P>
+                </C>
 
-                <TouchableScale onPress={() => setSort('time_asc')} style={[
-            styles.filterPill,
-            draft.sortBy === 'time_asc' && styles.filterPillActive,
-        ]}>
-                  <HourglassIcon size={12} color={draft.sortBy === 'time_asc'
-            ? AppColors.white
-            : AppColors.grayText}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.sortBy === 'time_asc' &&
-                styles.filterPillTextActive,
-        ]}>
-                    {t('crash.filterSortOldest')}
-                  </Text>
-                </TouchableScale>
-              </View>
-            </View>
-          </ScrollView>
+                <C onPress={()=>D("time_asc")}style={[e.filterPill,l.sortBy==="time_asc"&&e.filterPillActive]}>
+                  <E size={12}color={l.sortBy==="time_asc"?t.white:t.grayText}/>
+                  <P style={[e.filterPillText,l.sortBy==="time_asc"&&e.filterPillTextActive]}>
+                    {o("crash.filterSortOldest")}
+                  </P>
+                </C>
+              </T>
+            </T>
+          </Se>
 
-          <View style={styles.footer}>
-            <TouchableOpacity onPress={handleDiscard} style={styles.discardBtn} activeOpacity={0.8}>
-              <Text style={styles.discardBtnText}>
-                {t('crash.filterDiscard')}
-              </Text>
-            </TouchableOpacity>
+          <T style={e.footer}>
+            <V onPress={A}style={e.discardBtn}activeOpacity={.8}>
+              <P style={e.discardBtnText}>
+                {o("crash.filterDiscard")}
+              </P>
+            </V>
 
-            <TouchableOpacity onPress={handleApply} style={styles.applyBtn} activeOpacity={0.85}>
-              <Text style={styles.applyBtnText}>
-                {t('crash.filterApply', { count: draftMatchCount })}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-    </Modal>);
-};
-const styles = StyleSheet.create({
-    backdrop: {
-        flex: 1,
-        backgroundColor: `${AppColors.primaryBlack}85`,
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: 16,
-    },
-    modalCard: {
-        width: '100%',
-        maxWidth: 440,
-        backgroundColor: AppColors.white,
-        borderRadius: 14,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        shadowColor: AppColors.black,
-        shadowOpacity: 0.18,
-        shadowRadius: 12,
-        shadowOffset: { width: 0, height: 4 },
-        elevation: 8,
-        overflow: 'hidden',
-    },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 14,
-        paddingVertical: 12,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-        backgroundColor: `${AppColors.brandPurple}08`,
-    },
-    headerIconBox: {
-        width: 28,
-        height: 28,
-        borderRadius: 7,
-        backgroundColor: `${AppColors.brandPurple}18`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    headerTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13.5,
-        color: AppColors.primaryBlack,
-    },
-    headerSubtitle: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    resetBtn: {
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 5,
-        backgroundColor: `${AppColors.darkOrange}14`,
-        borderWidth: 1,
-        borderColor: `${AppColors.darkOrange}30`,
-    },
-    resetBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.darkOrange,
-    },
-    closeBtn: {
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-        backgroundColor: `${AppColors.primaryBlack}18`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    scrollContent: {
-        padding: 14,
-        gap: 14,
-    },
-    section: {
-        gap: 7,
-    },
-    sectionHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-    },
-    sectionTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-    },
-    chipsWrap: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 6.5,
-    },
-    filterPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        paddingHorizontal: 9,
-        paddingVertical: 5.5,
-        borderRadius: 7,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    filterPillActive: {
-        backgroundColor: AppColors.brandPurple,
-        borderColor: AppColors.brandPurple,
-        shadowColor: AppColors.brandPurple,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.25,
-        shadowRadius: 3,
-        elevation: 2,
-    },
-    filterPillText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-    },
-    filterPillTextActive: {
-        color: AppColors.white,
-        fontFamily: AppFonts.interBold,
-    },
-    footer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 10,
-        paddingHorizontal: 14,
-        paddingVertical: 12,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
-        backgroundColor: AppColors.grayBackground,
-    },
-    discardBtn: {
-        flex: 1,
-        paddingVertical: 9.5,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        backgroundColor: AppColors.white,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    discardBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.grayTextStrong,
-    },
-    applyBtn: {
-        flex: 2,
-        backgroundColor: AppColors.brandPurple,
-        paddingVertical: 9.5,
-        borderRadius: 8,
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: AppColors.brandPurple,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.25,
-        shadowRadius: 3,
-        elevation: 2,
-    },
-    applyBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.white,
-    },
-});
-export default CrashFilterModal;
+            <V onPress={G}style={e.applyBtn}activeOpacity={.85}>
+              <P style={e.applyBtnText}>
+                {o("crash.filterApply",{count:K})}
+              </P>
+            </V>
+          </T>
+        </T>
+      </T>
+    </Te>},e=j.create({backdrop:{flex:1,backgroundColor:`${t.primaryBlack}85`,justifyContent:"center",alignItems:"center",padding:16},modalCard:{width:"100%",maxWidth:440,backgroundColor:t.white,borderRadius:14,borderWidth:1,borderColor:t.dividerColor,shadowColor:t.black,shadowOpacity:.18,shadowRadius:12,shadowOffset:{width:0,height:4},elevation:8,overflow:"hidden"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:14,paddingVertical:12,borderBottomWidth:1,borderBottomColor:t.dividerColor,backgroundColor:`${t.brandPurple}08`},headerIconBox:{width:28,height:28,borderRadius:7,backgroundColor:`${t.brandPurple}18`,alignItems:"center",justifyContent:"center"},headerTitle:{fontFamily:I.interBold,fontSize:13.5,color:t.primaryBlack},headerSubtitle:{fontFamily:I.interMedium,fontSize:10,color:t.grayTextWeak},resetBtn:{paddingHorizontal:8,paddingVertical:4,borderRadius:5,backgroundColor:`${t.darkOrange}14`,borderWidth:1,borderColor:`${t.darkOrange}30`},resetBtnText:{fontFamily:I.interBold,fontSize:10,color:t.darkOrange},closeBtn:{width:24,height:24,borderRadius:12,backgroundColor:`${t.primaryBlack}18`,alignItems:"center",justifyContent:"center"},scrollContent:{padding:14,gap:14},section:{gap:7},sectionHeaderRow:{flexDirection:"row",alignItems:"center",gap:5},sectionTitle:{fontFamily:I.interBold,fontSize:9.5,color:t.grayTextWeak,letterSpacing:.5},chipsWrap:{flexDirection:"row",flexWrap:"wrap",gap:6.5},filterPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:9,paddingVertical:5.5,borderRadius:7,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.dividerColor},filterPillActive:{backgroundColor:t.brandPurple,borderColor:t.brandPurple,shadowColor:t.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:3,elevation:2},filterPillText:{fontFamily:I.interMedium,fontSize:11,color:t.primaryBlack},filterPillTextActive:{color:t.white,fontFamily:I.interBold},footer:{flexDirection:"row",alignItems:"center",gap:10,paddingHorizontal:14,paddingVertical:12,borderTopWidth:1,borderTopColor:t.dividerColor,backgroundColor:t.grayBackground},discardBtn:{flex:1,paddingVertical:9.5,borderRadius:8,borderWidth:1,borderColor:t.dividerColor,backgroundColor:t.white,alignItems:"center",justifyContent:"center"},discardBtnText:{fontFamily:I.interBold,fontSize:12.5,color:t.grayTextStrong},applyBtn:{flex:2,backgroundColor:t.brandPurple,paddingVertical:9.5,borderRadius:8,alignItems:"center",justifyContent:"center",shadowColor:t.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:3,elevation:2},applyBtnText:{fontFamily:I.interBold,fontSize:12.5,color:t.white}});export default Oe;