react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,504 +1,129 @@
-import React, { useCallback, useMemo, useRef } from 'react';
-import { FlatList, Platform, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
-import { useInspector } from './InspectorContext';
-import { useTranslation } from '../../i18n';
-import TouchableScale from '../TouchableScale';
-import AnimatedEntrance from '../AnimatedEntrance';
-import { ConsoleLogCard } from '../ConsoleLogCard';
-import EmptyState from '../EmptyState';
-import EndOfListFooter from '../EndOfListFooter';
-import styles from '../../styles';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { SearchIcon, ClearIcon, SortArrowIcon, TrashIcon, LayersIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, AnalyticsIcon, HeaderPauseIcon, } from '../NetworkIcons';
-const ConsoleTab = React.memo(() => {
-    const { t } = useTranslation();
-    const { logSearch, setLogSearch, logSortOrder, setLogSortOrder, handleDelete, logFilters, setLogFilters, logCounts, filteredConsoleLogs, visibleConsoleLogs, isConsolePaused, setIsConsolePaused, } = useInspector();
-    const listRef = useRef(null);
-    const renderItem = useCallback(({ item, index }) => (<AnimatedEntrance index={index} distance={8}>
-        <ConsoleLogCard item={item} searchStr={logSearch}/>
-      </AnimatedEntrance>), [logSearch]);
-    const keyExtractor = useCallback((item, index) => item?.id?.toString() ?? index.toString(), []);
-    const listHeader = useMemo(() => {
-        const total = visibleConsoleLogs.length;
-        const filtered = filteredConsoleLogs.length;
-        const isAllSelected = logFilters.has('all') ||
-            !Array.from(logFilters).some(f => f !== 'all');
-        if (isAllSelected) {
-            return (<View style={{ paddingHorizontal: 12, paddingTop: 8, paddingBottom: 3 }}>
-          <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 11,
-                    color: AppColors.grayTextWeak,
-                    letterSpacing: 0.2,
-                }}>
-            {filtered === total
-                    ? `Showing ${total} logs`
-                    : `Showing ${filtered} of ${total} logs`}
-          </Text>
-        </View>);
-        }
-        else {
-            const activeFilterNames = Array.from(logFilters)
-                .filter(f => f !== 'all')
-                .map(f => {
-                if (f === 'user-log')
-                    return 'Log';
-                if (f === 'analytics')
-                    return 'Analytics';
-                return (f.charAt(0).toUpperCase() +
-                    f.slice(1));
-            });
-            return (<View style={{ paddingHorizontal: 12, paddingTop: 8, paddingBottom: 3 }}>
-          <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 11,
-                    color: AppColors.grayTextWeak,
-                    letterSpacing: 0.2,
-                }}>
-            Filtered by {activeFilterNames.join(', ')} ({filtered} of {total} logs)
-          </Text>
-        </View>);
-        }
-    }, [visibleConsoleLogs.length, filteredConsoleLogs.length, logFilters]);
-    const [isSearchFocused, setIsSearchFocused] = React.useState(false);
-    const QUICK_TAG_SUGGESTIONS = useMemo(() => ['[AXIOS]', '[API]', '[REDUX]', '[ANALYTICS]', '[AUTH]', '[WARN]', '[ERROR]'], []);
-    return (<View style={{ flex: 1 }}>
-      <View style={{
-            backgroundColor: AppColors.white,
-            borderBottomWidth: 1,
-            borderBottomColor: AppColors.dividerColor,
-            paddingBottom: 6,
-        }}>
-        <View style={[
-            styles.toolbarRow,
-            { marginTop: 12, marginBottom: 8 },
-        ]}>
-          <View style={[
-            styles.searchContainer,
-            isSearchFocused && {
-                borderColor: AppColors.purple,
-                borderWidth: 1.5,
-            },
-        ]}>
-            <SearchIcon color={isSearchFocused ? AppColors.purple : AppColors.grayTextWeak} size={16}/>
-            <TextInput placeholder={t('console.searchPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {logSearch.length > 0 && (<View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 4,
-            }}>
-                <View style={{
-                backgroundColor: `${AppColors.purple}20`,
-                borderRadius: 10,
-                paddingHorizontal: 6,
-                paddingVertical: 2,
-            }}>
-                  <Text style={{
-                color: AppColors.purple,
-                fontSize: 10,
-                fontFamily: AppFonts.interBold,
-            }}>
-                    {filteredConsoleLogs.length}
-                  </Text>
-                </View>
-                <Pressable onPress={() => setLogSearch('')} hitSlop={10} style={styles.clearBtn}>
-                  <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                </Pressable>
-              </View>)}
-          </View>
+import D,{useCallback as $,useMemo as N,useRef as J}from"react";import{FlatList as Z,Platform as ee,Pressable as Se,ScrollView as U,Text as T,TextInput as Ce,View as S}from"react-native";import{useInspector as Te}from"./InspectorContext";import{useTranslation as xe}from"../../i18n";import I from"../TouchableScale";import Ie from"../AnimatedEntrance";import{ConsoleLogCard as Ve}from"../ConsoleLogCard";import Fe from"../EmptyState";import Ae from"../EndOfListFooter";import b from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as V}from"../../styles/AppFonts";import{SearchIcon as Oe,ClearIcon as Re,SortArrowIcon as Pe,TrashIcon as Be,LayersIcon as Le,UserIcon as He,InfoCircleIcon as Ee,WarningTriangleIcon as We,ErrorCircleIcon as De,AnalyticsIcon as $e,HeaderPauseIcon as Ne}from"../NetworkIcons";const Ue=D.memo(()=>{const{t:A}=xe(),{logSearch:F,setLogSearch:B,logSortOrder:G,setLogSortOrder:M,handleDelete:Q,logFilters:C,setLogFilters:O,logCounts:R,filteredConsoleLogs:k,visibleConsoleLogs:E,isConsolePaused:L,setIsConsolePaused:Y}=Te(),X=J(null),_=$(({item:o,index:r})=><Ie index={r}distance={8}>
+        <Ve item={o}searchStr={F}/>
+      </Ie>,[F]),j=$((o,r)=>o?.id?.toString()??r.toString(),[]),K=N(()=>{const o=E.length,r=k.length;if(C.has("all")||!Array.from(C).some(v=>v!=="all"))return<S style={{paddingHorizontal:12,paddingTop:8,paddingBottom:3}}>
+          <T style={{fontFamily:V.interMedium,fontSize:11,color:e.grayTextWeak,letterSpacing:.2}}>
+            {r===o?`Showing ${o} logs`:`Showing ${r} of ${o} logs`}
+          </T>
+        </S>;{const v=Array.from(C).filter(P=>P!=="all").map(P=>P==="user-log"?"Log":P==="analytics"?"Analytics":P.charAt(0).toUpperCase()+P.slice(1));return<S style={{paddingHorizontal:12,paddingTop:8,paddingBottom:3}}>
+          <T style={{fontFamily:V.interMedium,fontSize:11,color:e.grayTextWeak,letterSpacing:.2}}>
+            Filtered by {v.join(", ")} ({r} of {o} logs)
+          </T>
+        </S>}},[E.length,k.length,C]),[H,W]=D.useState(!1),q=N(()=>["[AXIOS]","[API]","[GRAPHQL]","[REDUX]","[ANALYTICS]","[AUTH]","[NAV]","[STORAGE]","[PERF]","[WS]","[PUSH]","[PAYMENT]","[SYNC]","[BLE]","[LOCATION]","[TEST]","[DEBUG]","[WARN]","[ERROR]","[SUCCESS]"],[]);return<S style={{flex:1}}>
+      <S style={{backgroundColor:e.white,borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingBottom:6}}>
+        <S style={[b.toolbarRow,{marginTop:12,marginBottom:8}]}>
+          <S style={[b.searchContainer,H&&{borderColor:e.purple,borderWidth:1.5}]}>
+            <Oe color={H?e.purple:e.grayTextWeak}size={16}/>
+            <Ce placeholder={A("console.searchPlaceholder")}placeholderTextColor={e.grayTextWeak}value={F}onChangeText={B}onFocus={()=>W(!0)}onBlur={()=>W(!1)}style={b.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            {F.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                <S style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:2}}>
+                  <T style={{color:e.purple,fontSize:10,fontFamily:V.interBold}}>
+                    {k.length}
+                  </T>
+                </S>
+                <Se onPress={()=>B("")}hitSlop={10}style={b.clearBtn}>
+                  <Re color={e.grayTextWeak}size={14}/>
+                </Se>
+              </S>}
+          </S>
 
-          <View style={styles.toolbarRight}>
-            <TouchableScale style={[
-            styles.toolbarBtn,
-            isConsolePaused && {
-                borderColor: `${AppColors.darkOrange}50`,
-                backgroundColor: `${AppColors.darkOrange}18`,
-            },
-        ]} onPress={() => setIsConsolePaused(p => !p)} hitSlop={6}>
-              <HeaderPauseIcon isPaused={isConsolePaused} color={isConsolePaused
-            ? AppColors.darkOrange
-            : AppColors.grayTextStrong} size={16}/>
-            </TouchableScale>
-            <TouchableScale style={styles.toolbarBtn} onPress={() => setLogSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
-              <SortArrowIcon color={AppColors.grayTextStrong} size={18} direction={logSortOrder === 'newest' ? 'down' : 'up'}/>
-            </TouchableScale>
-            <TouchableScale style={[
-            styles.toolbarBtn,
-            {
-                borderColor: `${AppColors.errorColor}38`,
-                backgroundColor: `${AppColors.errorColor}0F`,
-            },
-        ]} onPress={handleDelete} hitSlop={6}>
-              <TrashIcon color={AppColors.errorColor} size={15}/>
-            </TouchableScale>
-          </View>
-        </View>
+          <S style={b.toolbarRight}>
+            <I style={[b.toolbarBtn,L&&{borderColor:`${e.darkOrange}50`,backgroundColor:`${e.darkOrange}18`}]}onPress={()=>Y(o=>!o)}hitSlop={6}>
+              <Ne isPaused={L}color={L?e.darkOrange:e.grayTextStrong}size={16}/>
+            </I>
+            <I style={b.toolbarBtn}onPress={()=>M(o=>o==="newest"?"oldest":"newest")}hitSlop={10}>
+              <Pe color={e.grayTextStrong}size={18}direction={G==="newest"?"down":"up"}/>
+            </I>
+            <I style={[b.toolbarBtn,{borderColor:`${e.errorColor}38`,backgroundColor:`${e.errorColor}0F`}]}onPress={Q}hitSlop={6}>
+              <Be color={e.errorColor}size={15}/>
+            </I>
+          </S>
+        </S>
 
         
-        {(isSearchFocused || logSearch.length > 0) && (<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 6, maxHeight: 30 }} contentContainerStyle={{
-                paddingHorizontal: 16,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-            }}>
-            {QUICK_TAG_SUGGESTIONS.map(tag => {
-                const isSelected = logSearch.includes(tag);
-                return (<TouchableScale key={tag} onPress={() => {
-                        if (isSelected) {
-                            setLogSearch(prev => prev.replace(tag, '').trim());
-                        }
-                        else {
-                            setLogSearch(prev => prev ? `${prev} ${tag}`.trim() : tag);
-                        }
-                    }}>
-                  <View style={{
-                        paddingHorizontal: 8,
-                        paddingVertical: 3,
-                        borderRadius: 6,
-                        backgroundColor: isSelected
-                            ? AppColors.purple
-                            : `${AppColors.purple}14`,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors.purple
-                            : `${AppColors.purple}30`,
-                    }}>
-                    <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10,
-                        color: isSelected
-                            ? AppColors.white
-                            : AppColors.purple,
-                    }}>
-                      {tag}
-                    </Text>
-                  </View>
-                </TouchableScale>);
-            })}
-          </ScrollView>)}
+        {(H||F.length>0)&&<U horizontal showsHorizontalScrollIndicator={!1}style={{marginBottom:6,maxHeight:30}}contentContainerStyle={{paddingHorizontal:16,flexDirection:"row",alignItems:"center",gap:6}}>
+            {q.map(o=>{const r=F.includes(o);return<I key={o}onPress={()=>{B(r?t=>t.replace(o,"").trim():t=>t?`${t} ${o}`.trim():o)}}>
+                  <S style={{paddingHorizontal:8,paddingVertical:3,borderRadius:6,backgroundColor:r?e.purple:`${e.purple}14`,borderWidth:1,borderColor:r?e.purple:`${e.purple}30`}}>
+                    <T style={{fontFamily:V.interBold,fontSize:10,color:r?e.white:e.purple}}>
+                      {o}
+                    </T>
+                  </S>
+                </I>})}
+          </U>}
 
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
-            paddingHorizontal: 16,
-            paddingBottom: 4,
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 8,
-        }}>
+        <U horizontal showsHorizontalScrollIndicator={!1}style={{marginVertical:4,maxHeight:46}}contentContainerStyle={{paddingHorizontal:16,paddingBottom:4,flexDirection:"row",alignItems:"center",gap:8}}>
           
-          {(() => {
-            const active = logFilters.has('all');
-            return (<TouchableScale onPress={() => {
-                    setLogFilters(new Set(['all']));
-                }}>
-                <View style={[
-                    styles.statusFilterChip,
-                    {
-                        backgroundColor: active ? AppColors.indigo600Alt : AppColors.indigo50,
-                        borderColor: active ? AppColors.indigo600 : AppColors.indigo400,
-                        borderRadius: 8,
-                        paddingHorizontal: 10,
-                        paddingVertical: 6,
-                    },
-                    active && {
-                        shadowColor: AppColors.indigo600Alt,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.28,
-                        shadowRadius: 2.5,
-                        elevation: 2,
-                    },
-                ]}>
-                  <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                    <LayersIcon size={13} color={active ? AppColors.white : AppColors.indigo600Alt}/>
-                    <Text numberOfLines={1} style={[
-                    styles.statusFilterText,
-                    {
-                        color: active ? AppColors.white : AppColors.indigo600Alt,
-                        fontFamily: AppFonts.interBold,
-                    },
-                ]}>
-                      {t('common.all', 'All')} ({logCounts.all})
-                    </Text>
-                  </View>
-                </View>
-              </TouchableScale>);
-        })()}
+          {(()=>{const o=C.has("all");return<I onPress={()=>{O(new Set(["all"]))}}>
+                <S style={[b.statusFilterChip,{backgroundColor:o?e.indigo600Alt:e.indigo50,borderColor:o?e.indigo600:e.indigo400,borderRadius:8,paddingHorizontal:10,paddingVertical:6},o&&{shadowColor:e.indigo600Alt,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                  <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <Le size={13}color={o?e.white:e.indigo600Alt}/>
+                    <T numberOfLines={1}style={[b.statusFilterText,{color:o?e.white:e.indigo600Alt,fontFamily:V.interBold}]}>
+                      {A("common.all","All")} ({R.all})
+                    </T>
+                  </S>
+                </S>
+              </I>})()}
 
           
-          {(() => {
-            const active = logFilters.has('user-log');
-            return (<TouchableScale onPress={() => {
-                    setLogFilters(prev => {
-                        const next = new Set(prev);
-                        next.delete('all');
-                        next.has('user-log')
-                            ? next.delete('user-log')
-                            : next.add('user-log');
-                        if (next.size === 0)
-                            next.add('all');
-                        return next;
-                    });
-                }}>
-                <View style={[
-                    styles.statusFilterChip,
-                    {
-                        backgroundColor: active ? AppColors.teal600 : AppColors.teal100,
-                        borderColor: active ? AppColors.teal600 : AppColors.teal400,
-                        borderRadius: 8,
-                        paddingHorizontal: 10,
-                        paddingVertical: 6,
-                    },
-                    active && {
-                        shadowColor: AppColors.teal600,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.28,
-                        shadowRadius: 2.5,
-                        elevation: 2,
-                    },
-                ]}>
-                  <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                    <UserIcon size={13} color={active ? AppColors.white : AppColors.teal600}/>
-                    <Text numberOfLines={1} style={[
-                    styles.statusFilterText,
-                    {
-                        color: active ? AppColors.white : AppColors.teal600,
-                        fontFamily: AppFonts.interBold,
-                    },
-                ]}>
-                      {t('console.log', 'Log')} ({logCounts['user-log']})
-                    </Text>
-                  </View>
-                </View>
-              </TouchableScale>);
-        })()}
+          {(()=>{const o=C.has("user-log");return<I onPress={()=>{O(r=>{const t=new Set(r);return t.delete("all"),t.has("user-log")?t.delete("user-log"):t.add("user-log"),t.size===0&&t.add("all"),t})}}>
+                <S style={[b.statusFilterChip,{backgroundColor:o?e.teal600:e.teal100,borderColor:o?e.teal600:e.teal400,borderRadius:8,paddingHorizontal:10,paddingVertical:6},o&&{shadowColor:e.teal600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                  <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <He size={13}color={o?e.white:e.teal600}/>
+                    <T numberOfLines={1}style={[b.statusFilterText,{color:o?e.white:e.teal600,fontFamily:V.interBold}]}>
+                      {A("console.log","Log")} ({R["user-log"]})
+                    </T>
+                  </S>
+                </S>
+              </I>})()}
 
           
-          {(() => {
-            const active = logFilters.has('info');
-            return (<TouchableScale onPress={() => {
-                    setLogFilters(prev => {
-                        const next = new Set(prev);
-                        next.delete('all');
-                        next.has('info')
-                            ? next.delete('info')
-                            : next.add('info');
-                        if (next.size === 0)
-                            next.add('all');
-                        return next;
-                    });
-                }}>
-                <View style={[
-                    styles.statusFilterChip,
-                    {
-                        backgroundColor: active ? AppColors.sky600 : AppColors.sky100,
-                        borderColor: active ? AppColors.blue700 : AppColors.sky400,
-                        borderRadius: 8,
-                        paddingHorizontal: 10,
-                        paddingVertical: 6,
-                    },
-                    active && {
-                        shadowColor: AppColors.sky600,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.28,
-                        shadowRadius: 2.5,
-                        elevation: 2,
-                    },
-                ]}>
-                  <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                    <InfoCircleIcon size={13} color={active ? AppColors.white : AppColors.sky600}/>
-                    <Text numberOfLines={1} style={[
-                    styles.statusFilterText,
-                    {
-                        color: active ? AppColors.white : AppColors.sky600,
-                        fontFamily: AppFonts.interBold,
-                    },
-                ]}>
-                      {t('console.info', 'Info')} ({logCounts.info})
-                    </Text>
-                  </View>
-                </View>
-              </TouchableScale>);
-        })()}
+          {(()=>{const o=C.has("info");return<I onPress={()=>{O(r=>{const t=new Set(r);return t.delete("all"),t.has("info")?t.delete("info"):t.add("info"),t.size===0&&t.add("all"),t})}}>
+                <S style={[b.statusFilterChip,{backgroundColor:o?e.sky600:e.sky100,borderColor:o?e.blue700:e.sky400,borderRadius:8,paddingHorizontal:10,paddingVertical:6},o&&{shadowColor:e.sky600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                  <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <Ee size={13}color={o?e.white:e.sky600}/>
+                    <T numberOfLines={1}style={[b.statusFilterText,{color:o?e.white:e.sky600,fontFamily:V.interBold}]}>
+                      {A("console.info","Info")} ({R.info})
+                    </T>
+                  </S>
+                </S>
+              </I>})()}
 
           
-          {(() => {
-            const active = logFilters.has('warn');
-            return (<TouchableScale onPress={() => {
-                    setLogFilters(prev => {
-                        const next = new Set(prev);
-                        next.delete('all');
-                        next.has('warn')
-                            ? next.delete('warn')
-                            : next.add('warn');
-                        if (next.size === 0)
-                            next.add('all');
-                        return next;
-                    });
-                }}>
-                <View style={[
-                    styles.statusFilterChip,
-                    {
-                        backgroundColor: active ? AppColors.amber600 : AppColors.amber100,
-                        borderColor: active ? AppColors.amber700 : AppColors.amber200,
-                        borderRadius: 8,
-                        paddingHorizontal: 10,
-                        paddingVertical: 6,
-                    },
-                    active && {
-                        shadowColor: AppColors.amber600,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.28,
-                        shadowRadius: 2.5,
-                        elevation: 2,
-                    },
-                ]}>
-                  <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                    <WarningTriangleIcon size={13} color={active ? AppColors.white : AppColors.amber700}/>
-                    <Text numberOfLines={1} style={[
-                    styles.statusFilterText,
-                    {
-                        color: active ? AppColors.white : AppColors.amber800Warm,
-                        fontFamily: AppFonts.interBold,
-                    },
-                ]}>
-                      {t('console.warning', 'Warn')} ({logCounts.warn})
-                    </Text>
-                  </View>
-                </View>
-              </TouchableScale>);
-        })()}
+          {(()=>{const o=C.has("warn");return<I onPress={()=>{O(r=>{const t=new Set(r);return t.delete("all"),t.has("warn")?t.delete("warn"):t.add("warn"),t.size===0&&t.add("all"),t})}}>
+                <S style={[b.statusFilterChip,{backgroundColor:o?e.amber600:e.amber100,borderColor:o?e.amber700:e.amber200,borderRadius:8,paddingHorizontal:10,paddingVertical:6},o&&{shadowColor:e.amber600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                  <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <We size={13}color={o?e.white:e.amber700}/>
+                    <T numberOfLines={1}style={[b.statusFilterText,{color:o?e.white:e.amber800Warm,fontFamily:V.interBold}]}>
+                      {A("console.warning","Warn")} ({R.warn})
+                    </T>
+                  </S>
+                </S>
+              </I>})()}
 
           
-          {(() => {
-            const active = logFilters.has('error');
-            return (<TouchableScale onPress={() => {
-                    setLogFilters(prev => {
-                        const next = new Set(prev);
-                        next.delete('all');
-                        next.has('error')
-                            ? next.delete('error')
-                            : next.add('error');
-                        if (next.size === 0)
-                            next.add('all');
-                        return next;
-                    });
-                }}>
-                <View style={[
-                    styles.statusFilterChip,
-                    {
-                        backgroundColor: active ? AppColors.red500 : AppColors.red100,
-                        borderColor: active ? AppColors.red600 : AppColors.errorBorder,
-                        borderRadius: 8,
-                        paddingHorizontal: 10,
-                        paddingVertical: 6,
-                    },
-                    active && {
-                        shadowColor: AppColors.red500,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.28,
-                        shadowRadius: 2.5,
-                        elevation: 2,
-                    },
-                ]}>
-                  <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                    <ErrorCircleIcon size={13} color={active ? AppColors.white : AppColors.red500}/>
-                    <Text numberOfLines={1} style={[
-                    styles.statusFilterText,
-                    {
-                        color: active ? AppColors.white : AppColors.redErrorText,
-                        fontFamily: AppFonts.interBold,
-                    },
-                ]}>
-                      {t('console.error', 'Error')} ({logCounts.error})
-                    </Text>
-                  </View>
-                </View>
-              </TouchableScale>);
-        })()}
+          {(()=>{const o=C.has("error");return<I onPress={()=>{O(r=>{const t=new Set(r);return t.delete("all"),t.has("error")?t.delete("error"):t.add("error"),t.size===0&&t.add("all"),t})}}>
+                <S style={[b.statusFilterChip,{backgroundColor:o?e.red500:e.red100,borderColor:o?e.red600:e.errorBorder,borderRadius:8,paddingHorizontal:10,paddingVertical:6},o&&{shadowColor:e.red500,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                  <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <De size={13}color={o?e.white:e.red500}/>
+                    <T numberOfLines={1}style={[b.statusFilterText,{color:o?e.white:e.redErrorText,fontFamily:V.interBold}]}>
+                      {A("console.error","Error")} ({R.error})
+                    </T>
+                  </S>
+                </S>
+              </I>})()}
 
           
-          {(() => {
-            const active = logFilters.has('analytics');
-            return (<TouchableScale onPress={() => {
-                    setLogFilters(prev => {
-                        const next = new Set(prev);
-                        next.delete('all');
-                        next.has('analytics')
-                            ? next.delete('analytics')
-                            : next.add('analytics');
-                        if (next.size === 0)
-                            next.add('all');
-                        return next;
-                    });
-                }}>
-                <View style={[
-                    styles.statusFilterChip,
-                    {
-                        backgroundColor: active ? AppColors.violet600 : AppColors.purple100,
-                        borderColor: active ? AppColors.purple700 : AppColors.purple200,
-                        borderRadius: 8,
-                        paddingHorizontal: 10,
-                        paddingVertical: 6,
-                    },
-                    active && {
-                        shadowColor: AppColors.violet600,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.28,
-                        shadowRadius: 2.5,
-                        elevation: 2,
-                    },
-                ]}>
-                  <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                    <AnalyticsIcon size={13} color={active ? AppColors.white : AppColors.violet600}/>
-                    <Text numberOfLines={1} style={[
-                    styles.statusFilterText,
-                    {
-                        color: active ? AppColors.white : AppColors.purpleText,
-                        fontFamily: AppFonts.interBold,
-                    },
-                ]}>
-                      {t('console.analytics', 'Analytics')} ({logCounts.analytics})
-                    </Text>
-                  </View>
-                </View>
-              </TouchableScale>);
-        })()}
-        </ScrollView>
-      </View>
+          {(()=>{const o=C.has("analytics");return<I onPress={()=>{O(r=>{const t=new Set(r);return t.delete("all"),t.has("analytics")?t.delete("analytics"):t.add("analytics"),t.size===0&&t.add("all"),t})}}>
+                <S style={[b.statusFilterChip,{backgroundColor:o?e.violet600:e.purple100,borderColor:o?e.purple700:e.purple200,borderRadius:8,paddingHorizontal:10,paddingVertical:6},o&&{shadowColor:e.violet600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                  <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <$e size={13}color={o?e.white:e.violet600}/>
+                    <T numberOfLines={1}style={[b.statusFilterText,{color:o?e.white:e.purpleText,fontFamily:V.interBold}]}>
+                      {A("console.analytics","Analytics")} ({R.analytics})
+                    </T>
+                  </S>
+                </S>
+              </I>})()}
+        </U>
+      </S>
 
-      <FlatList ref={listRef} data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || !logFilters.has('all')} searchQuery={logSearch} customTitle={logSearch.length > 0
-                ? 'No matching console logs'
-                : 'No console logs'} onClearSearch={() => {
-                setLogSearch('');
-                setLogFilters(new Set(['all']));
-            }}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
-            styles.listContent,
-            filteredConsoleLogs.length === 0 && { flexGrow: 1 },
-        ]} keyboardShouldPersistTaps="handled"/>
-    </View>);
-});
-export default ConsoleTab;
+      <Z ref={X}data={k}keyExtractor={j}ListHeaderComponent={K}renderItem={_}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={ee.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Fe isSearch={F.length>0||!C.has("all")}searchQuery={F}customTitle={F.length>0?"No matching console logs":"No console logs"}onClearSearch={()=>{B(""),O(new Set(["all"]))}}/>}ListFooterComponent={k.length>0?<Ae count={k.length}label="logs"/>:null}contentContainerStyle={[b.listContent,k.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+    </S>});export default Ue;