react-native-inapp-inspector 2.4.0 → 2.4.2

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

@@ -1,166 +1,150 @@
-import{useState as z}from"react";import{Alert as Ve,Image as _,Modal as Me,Platform as V,Share as ee,StyleSheet as oe,Text as T,TouchableOpacity as A,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import R from"../TouchableScale";import{ChevronDownIcon as De,CopyIcon as L,ExpandCollapseIcon as We,FilmIcon as E,GifIcon as H,ImageIcon as Le,PauseIcon as Ee,PlayIcon as Ce,RepeatIcon as He,ShareIcon as Te,TrashIcon as Ue}from"../NetworkIcons";import{ScreenCapture as Ne}from"../../capture";import{copyImageOrMediaToClipboard as qe,formatBytes as Se}from"../../helpers";import{showToast as G}from"../../helpers/toast";import{useTranslation as Je}from"../../i18n";export const MediaPreviewModal=({item:t,visible:ve,onClose:M,onDelete:Ie,onConvertToGif:D})=>{const{t:r}=Je(),[U,N]=z(!1),[Ae,q]=z(!1),[P,Pe]=z(!1),[J,K]=z(!1),[Q,ze]=z("1.0x"),[$,Be]=z(!0),[W,Re]=z(.4);if(!t)return null;const O=()=>{t?.uri&&qe(t.uri,t.type==="image"?"Image":"Media")},X=async()=>{try{K(!0),await Ne.playVideo(t.uri)}catch{G(r("mediaGallery.playError","Unable to play video"))}finally{K(!1)}},$e=()=>{Ve.alert(r("mediaGallery.deleteTitle"),r("mediaGallery.deleteMessage",{filename:t.filename}),[{text:r("common.cancel"),style:"cancel"},{text:r("mediaGallery.delete"),style:"destructive",onPress:()=>{Ie(t),M()}}])},Fe=async()=>{if(D){N(!0);try{await D(t),G(r("mediaGallery.convertedSuccess"))}catch{G(r("mediaGallery.convertFailed"))}finally{N(!1)}}},Y=async()=>{try{const v=t.uri.startsWith("file://")||t.uri.startsWith("content://")||t.uri.startsWith("http")?t.uri:`file://${t.uri}`,Oe=V.select({ios:{url:v,title:t.filename},default:{title:t.filename,message:t.filename,url:v}});(await ee.share(Oe)).action===ee.sharedAction&&G(r("mediaGallery.shareSuccess","Shared successfully"))}catch(v){v?.message!=="User did not share"&&G(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},I=t.type==="video",F=t.type==="gif",B=t.durationMs?(t.durationMs/1e3).toFixed(1):null,Ge=B?`00:${Number(B)<10?"0":""}${B}`:"00:05.0",Z=!0;return<Me visible={ve}transparent={!0}animationType="fade"onRequestClose={M}>
-      <C style={o.overlay}>
+import{useState as B}from"react";import{Image as Z,Modal as Oe,Platform as k,Share as _,StatusBar as W,StyleSheet as M,Text as T,TouchableOpacity as R,View as C}from"react-native";import Fe from"react-native-linear-gradient";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import P from"../TouchableScale";import{ConfirmationModal as De}from"./ConfirmationModal";import{ChevronDownIcon as Ee,CopyIcon as H,ExpandCollapseIcon as We,FilmIcon as L,GifIcon as U,ImageIcon as Me,PlayIcon as Ce,ShareIcon as Te,TrashIcon as Se}from"../NetworkIcons";import{ScreenCapture as He}from"../../capture";import{copyImageOrMediaToClipboard as Le,formatBytes as $}from"../../helpers";import{showToast as V}from"../../helpers/toast";import{useTranslation as je}from"../../i18n";import{triggerNativeHaptic as Ue}from"../../native/NativeInspector";export const MediaPreviewModal=({item:o,visible:ve,onClose:F,onDelete:Pe,onConvertToGif:D})=>{const{t:r}=je(),[A,N]=B(!1),[Ie,q]=B(!1),[z,ze]=B(!1),[Be,J]=B(!1),[ke,E]=B(!1);if(!o)return null;const G=()=>{o?.uri&&Le(o.uri,o.type==="image"?"Image":"Media")},K=async()=>{try{J(!0),await He.playVideo(o.uri)}catch{V(r("mediaGallery.playError","Unable to play video"))}finally{J(!1)}},Q=()=>{Ue("medium"),E(!0)},Re=async()=>{if(D){N(!0);try{await D(o),V(r("mediaGallery.convertedSuccess"))}catch{V(r("mediaGallery.convertFailed"))}finally{N(!1)}}},X=async()=>{try{const O=o.uri.startsWith("file://")||o.uri.startsWith("content://")||o.uri.startsWith("http")?o.uri:`file://${o.uri}`,Ge=k.select({ios:{url:O,title:o.filename},default:{title:o.filename,message:o.filename,url:O}});(await _.share(Ge)).action===_.sharedAction&&V(r("mediaGallery.shareSuccess","Shared successfully"))}catch(O){O?.message!=="User did not share"&&V(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},v=o.type==="video",Y=o.type==="gif",I=o.durationMs?(o.durationMs/1e3).toFixed(1):null,Ve=I?`00:${Number(I)<10?"0":""}${I}`:null;return<Oe visible={ve}transparent={!0}animationType="fade"statusBarTranslucent={!0}onRequestClose={F}>
+      <W translucent backgroundColor="transparent"barStyle="light-content"/>
+      <C style={e.overlay}>
         
-        <C style={o.header}>
-          <A activeOpacity={.8}onPress={O}style={o.headerLeft}>
-            <C style={[o.badge,{borderColor:I?`${e.sky400}80`:F?`${e.warningAmber}80`:`${e.emerald500}80`,backgroundColor:I?`${e.sky400}20`:F?`${e.warningAmber}20`:`${e.emerald500}20`}]}>
-              {I?<E size={13}color={e.sky400}/>:F?<H size={13}color={e.warningAmber}/>:<Le size={13}color={e.emerald500}/>}
-              <T style={[o.badgeText,{color:I?e.sky400:F?e.warningAmber:e.emerald500}]}>
-                {t.format.toUpperCase()}
+        <Fe colors={[t.indigo600,t.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={e.header}>
+          <R activeOpacity={.8}onPress={G}style={e.headerLeft}>
+            <C style={e.badge}>
+              {v?<L size={12}color={t.white}/>:Y?<U size={12}color={t.white}/>:<Me size={12}color={t.white}/>}
+              <T style={e.badgeText}>
+                {o.format.toUpperCase()}
               </T>
             </C>
-            <C style={{flex:1,minWidth:0}}>
-              <T style={o.title}numberOfLines={1}>
-                {t.filename}
+            <C style={e.headerTextCol}>
+              <T style={e.title}numberOfLines={1}>
+                {o.filename}
               </T>
-              <T style={o.subtitle}>
-                {Se(t.sizeBytes)} • {new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}
+              <T style={e.subtitle}>
+                {$(o.sizeBytes)} • {new Date(o.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}
               </T>
             </C>
-          </A>
+          </R>
 
           
-          <C style={o.headerRight}>
-            <R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.copyUri","Copy URI")}onPress={O}style={o.headerActionBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <L size={14}color={e.slate200}/>
-            </R>
+          <C style={e.headerRight}>
+            <P accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.copyUri","Copy URI")}onPress={G}style={e.headerActionBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <H size={13}color={t.white}/>
+            </P>
 
-            <R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.share","Share")}onPress={Y}style={[o.headerActionBtn,{backgroundColor:`${e.sky400}20`,borderColor:`${e.sky400}60`}]}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <Te size={14}color={e.sky400}/>
-            </R>
+            <P accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.share","Share")}onPress={X}style={e.headerActionBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <Te size={13}color={t.white}/>
+            </P>
 
-            <R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.delete")}onPress={$e}style={o.headerDeleteBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <Ue size={14}color={e.red500}/>
-            </R>
+            <P accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.delete")}onPress={Q}style={e.headerDeleteBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <Se size={13}color={t.white}/>
+            </P>
 
-            <A accessible={!0}accessibilityRole="button"accessibilityLabel={P?r("mediaGallery.collapse","Exit Fullscreen"):r("mediaGallery.expand","Expand Fullscreen")}onPress={()=>Pe(!P)}style={[o.headerIconBtn,P&&{backgroundColor:`${e.sky400}30`,borderColor:`${e.sky400}70`}]}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <We size={14}isExpanded={P}color={P?e.sky400:e.white}/>
-            </A>
+            <R accessible={!0}accessibilityRole="button"accessibilityLabel={z?r("mediaGallery.collapse","Exit Fullscreen"):r("mediaGallery.expand","Expand Fullscreen")}onPress={()=>ze(!z)}style={e.headerIconBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <We size={13}isExpanded={z}color={t.white}/>
+            </R>
 
-            <A accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.minimize","Minimize")}onPress={M}style={o.headerIconBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <De size={15}color={e.white}/>
-            </A>
+            <R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.minimize","Minimize")}onPress={F}style={e.headerIconBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <Ee size={14}color={t.white}/>
+            </R>
           </C>
-        </C>
+        </Fe>
 
         
-        <C style={[o.stage,P&&o.stageExpanded,!Z&&{paddingBottom:V.OS==="ios"?34:16}]}>
-          <A activeOpacity={I?.9:1}onPress={I?X:void 0}style={[o.previewCard,P&&o.previewCardExpanded]}>
-            {I?t.thumbnailUri&&!Ae?<>
-                  <_ source={{uri:t.thumbnailUri}}style={o.image}resizeMode="contain"onError={()=>q(!0)}/>
-                  <C style={o.videoImageOverlay}/>
-                </>:<C style={o.videoFallbackBackdrop}>
-                  <C style={o.videoFallbackGlow}/>
-                  <E size={44}color={e.sky400}/>
-                  <T style={o.videoFallbackSubtitle}>
-                    {t.width&&t.height?`${t.width} \xD7 ${t.height}`:"HD Video"} • MP4
+        <C style={[e.stage,z&&e.stageExpanded]}>
+          <R activeOpacity={v?.92:1}onPress={v?K:void 0}style={[e.previewCard,z&&e.previewCardExpanded]}>
+            {v?o.thumbnailUri&&!Ie?<>
+                  <Z source={{uri:o.thumbnailUri}}style={e.image}resizeMode="contain"onError={()=>q(!0)}/>
+                  <C style={e.videoImageOverlay}/>
+                </>:<C style={e.videoFallbackBackdrop}>
+                  <C style={e.videoFallbackGlow}/>
+                  <L size={52}color={t.sky400}/>
+                  <T style={e.videoFallbackTitle}>
+                    {o.width&&o.height?`${o.width} \xD7 ${o.height}`:"HD Video Recording"}
                   </T>
-                </C>:<_ source={{uri:t.uri}}style={o.image}resizeMode="contain"onError={()=>q(!0)}/>}
+                  <T style={e.videoFallbackSubtitle}>
+                    {I?`${I}s duration`:"MP4 Video"} • {$(o.sizeBytes)}
+                  </T>
+                </C>:<Z source={{uri:o.uri}}style={e.image}resizeMode="contain"onError={()=>q(!0)}/>}
 
             
-            {I&&<C style={o.centerPlayOverlay}>
-                <C style={o.centerPlayCircle}>
-                  <Ce size={28}color={e.white}/>
+            {v&&<C style={e.centerPlayContainer}pointerEvents="box-none">
+                <C style={e.centerPlayGlow}/>
+                <C style={e.centerPlayCircle}>
+                  <Ce size={28}color={t.white}/>
+                </C>
+                <C style={e.centerPlayPill}>
+                  <T style={e.centerPlayText}>
+                    {r("mediaGallery.playVideo","Play Video")}
+                  </T>
                 </C>
-                <T style={o.centerPlayText}>
-                  {r("mediaGallery.playVideo","Play Video")}
-                </T>
               </C>}
 
             
-            {I&&<C style={o.videoBadgeOverlay}>
-                <C style={o.playPill}>
-                  <E size={12}color={e.sky400}/>
-                  <T style={o.playPillText}>
-                    {B?`${B}s`:"VIDEO"}
+            {v&&<C style={e.topLeftBadgeOverlay}pointerEvents="none">
+                <C style={e.metaPill}>
+                  <L size={11}color={t.sky400}/>
+                  <T style={e.metaPillText}>
+                    {Ve||(I?`${I}s`:"VIDEO")}
                   </T>
                 </C>
               </C>}
 
-            
-            {F&&<C style={o.videoBadgeOverlay}>
-                <C style={[o.playPill,{backgroundColor:`${e.warningAmber}CC`}]}>
-                  <H size={12}color={e.white}/>
-                  <T style={o.playPillText}>ANIMATED GIF</T>
+            {Y&&<C style={e.topLeftBadgeOverlay}pointerEvents="none">
+                <C style={[e.metaPill,{backgroundColor:"rgba(245, 158, 11, 0.85)"}]}>
+                  <U size={11}color={t.white}/>
+                  <T style={e.metaPillText}>ANIMATED GIF</T>
                 </C>
               </C>}
 
             
-            <A activeOpacity={.8}onPress={O}style={o.floatingMetaBadge}>
-              <L size={11}color={e.sky400}/>
-              <T style={o.floatingMetaText}>
-                {t.width&&t.height?`${t.width} \xD7 ${t.height}  \u2022  `:""}
-                {Se(t.sizeBytes)}
-              </T>
-            </A>
-          </A>
+            <R activeOpacity={.8}onPress={G}style={e.bottomRightBadgeOverlay}>
+              <C style={e.metaPill}>
+                <H size={10}color={t.sky400}/>
+                <T style={e.metaPillText}>
+                  {o.width&&o.height?`${o.width} \xD7 ${o.height} \u2022 `:""}
+                  {$(o.sizeBytes)}
+                </T>
+              </C>
+            </R>
+          </R>
         </C>
 
         
-        {I&&<C style={o.videoControlsPanel}>
-            
-            <C style={o.progressSection}>
-              <T style={o.timeLabel}>
-                00:0{Math.floor(W*(Number(B)||5))}
+        <C style={e.footer}>
+          {v&&<P onPress={K}style={e.primaryPlayBtn}>
+              <Ce size={16}color={t.white}/>
+              <T style={e.primaryPlayText}>
+                {Be?r("mediaGallery.playing","Playing Video..."):r("mediaGallery.playInPlayer","Play Fullscreen Video")}
               </T>
-              <A activeOpacity={.8}onPress={()=>Re(v=>v>=.9?.1:v+.3)}style={o.progressTrack}>
-                <C style={[o.progressFill,{width:`${Math.max(10,Math.min(100,W*100))}%`}]}/>
-                <C style={[o.scrubberThumb,{left:`${Math.max(8,Math.min(96,W*100))}%`}]}/>
-              </A>
-              <T style={o.timeLabel}>{Ge}</T>
-            </C>
-
-            
-            <C style={o.controlsRow}>
-              
-              <A onPress={X}style={o.controlActionPill}>
-                {J?<Ee size={14}color={e.sky400}/>:<Ce size={14}color={e.sky400}/>}
-                <T style={[o.controlActionText,{color:e.sky400}]}>
-                  {J?r("mediaGallery.pause","Pause"):r("mediaGallery.play","Play")}
-                </T>
-              </A>
-
-              
-              <C style={o.speedGroup}>
-                {["1.0x","1.5x","2.0x"].map(v=><A key={v}onPress={()=>ze(v)}style={[o.speedBtn,Q===v&&o.speedBtnActive]}>
-                    <T style={[o.speedText,Q===v&&o.speedTextActive]}>
-                      {v}
-                    </T>
-                  </A>)}
-              </C>
-
-              
-              <A onPress={()=>Be(!$)}style={[o.loopPill,$&&o.loopPillActive]}>
-                <He size={12}color={$?e.sky400:e.whiteAlpha60}/>
-                <T style={[o.loopText,$&&o.loopTextActive]}>
-                  {$?"Loop: ON":"Loop: OFF"}
-                </T>
-              </A>
-            </C>
-          </C>}
+            </P>}
 
-        
-        {Z&&<C style={o.footer}>
-            <R onPress={O}style={[o.actionBtn,{backgroundColor:e.whiteAlpha08,borderColor:e.whiteAlpha15}]}>
-              <L size={14}color={e.slate200}/>
-              <T style={[o.actionText,{color:e.slate200}]}>
+          <C style={e.actionsRow}>
+            <P onPress={G}style={e.actionBtn}>
+              <H size={14}color={t.grayText}/>
+              <T style={e.actionText}>
                 {r("mediaGallery.copyUri","Copy URI")}
               </T>
-            </R>
+            </P>
 
-            {D&&I&&<R onPress={Fe}disabled={U}style={[o.actionBtn,{backgroundColor:`${e.warningAmber}22`,borderColor:`${e.warningAmber}70`}]}>
-                <H size={15}color={e.warningAmber}/>
-                <T style={[o.actionText,{color:e.warningAmber}]}>
-                  {r(U?"mediaGallery.converting":"mediaGallery.convertToGif")}
+            {D&&v&&<P onPress={Re}disabled={A}style={[e.actionBtn,{backgroundColor:t.amber100,borderColor:t.amber200}]}>
+                <U size={15}color={t.amber600}/>
+                <T style={[e.actionText,{color:t.amber600,fontFamily:S.interBold}]}>
+                  {r(A?"mediaGallery.converting":"mediaGallery.convertToGif")}
                 </T>
-              </R>}
+              </P>}
 
-            <R onPress={Y}style={[o.actionBtn,{backgroundColor:`${e.sky400}22`,borderColor:`${e.sky400}70`}]}>
-              <Te size={14}color={e.sky400}/>
-              <T style={[o.actionText,{color:e.sky400,fontFamily:S.interSemiBold}]}>
+            <P onPress={X}style={[e.actionBtn,{backgroundColor:t.indigo600,borderColor:t.indigo600}]}>
+              <Te size={14}color={t.white}/>
+              <T style={[e.actionText,{color:t.white,fontFamily:S.interBold}]}>
                 {r("mediaGallery.share","Share")}
               </T>
-            </R>
-          </C>}
+            </P>
+
+            {!v&&<P onPress={Q}style={[e.actionBtn,{backgroundColor:t.red100,borderColor:`${t.red500}4D`}]}>
+                <Se size={14}color={t.red500}/>
+                <T style={[e.actionText,{color:t.red500,fontFamily:S.interBold}]}>
+                  {r("mediaGallery.delete","Delete")}
+                </T>
+              </P>}
+          </C>
+        </C>
       </C>
-    </Me>};const o=oe.create({overlay:{flex:1,backgroundColor:e.mediaModalBg,justifyContent:"space-between"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:V.OS==="ios"?52:20,paddingBottom:14,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,backgroundColor:e.headerGlassDark},headerLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1,minWidth:0,marginRight:10},headerRight:{flexDirection:"row",alignItems:"center",gap:8},badge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1},badgeText:{fontFamily:S.interBold,fontSize:10.5,letterSpacing:.4},title:{fontFamily:S.interSemiBold,fontSize:13.5,color:e.white},subtitle:{fontFamily:S.interRegular,fontSize:11,color:e.whiteAlpha60,marginTop:1},headerActionBtn:{width:32,height:32,borderRadius:16,backgroundColor:e.whiteAlpha12,borderWidth:1,borderColor:e.whiteAlpha20,alignItems:"center",justifyContent:"center"},headerShareBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${e.sky400}20`,borderWidth:1,borderColor:`${e.sky400}60`,alignItems:"center",justifyContent:"center"},headerDeleteBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${e.red500}20`,borderWidth:1,borderColor:`${e.red500}60`,alignItems:"center",justifyContent:"center"},headerIconBtn:{width:32,height:32,borderRadius:16,backgroundColor:e.whiteAlpha12,borderWidth:1,borderColor:e.whiteAlpha20,alignItems:"center",justifyContent:"center"},stage:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:10,paddingTop:10,paddingBottom:10},stageExpanded:{paddingHorizontal:0,paddingTop:0,paddingBottom:0},previewCard:{flex:1,width:"100%",borderRadius:14,overflow:"hidden",backgroundColor:e.mediaDarkTile,borderWidth:1,borderColor:e.borderGlassLight,alignItems:"center",justifyContent:"center",position:"relative"},previewCardExpanded:{borderRadius:0,borderWidth:0},image:{width:"100%",height:"100%"},videoImageOverlay:{...oe.absoluteFillObject,backgroundColor:"rgba(5, 7, 13, 0.25)"},videoFallbackBackdrop:{flex:1,width:"100%",backgroundColor:e.mediaPlayerBg,alignItems:"center",justifyContent:"center",gap:8},videoFallbackGlow:{position:"absolute",width:140,height:140,borderRadius:70,backgroundColor:`${e.sky400}18`},videoFallbackTitle:{fontFamily:S.interSemiBold,fontSize:15,color:e.white,marginTop:8},videoFallbackSubtitle:{fontFamily:S.interRegular,fontSize:12,color:e.whiteAlpha60},centerPlayOverlay:{position:"absolute",alignItems:"center",justifyContent:"center",gap:8},centerPlayCircle:{width:64,height:64,borderRadius:32,backgroundColor:`${e.sky400}E0`,alignItems:"center",justifyContent:"center",paddingLeft:3,shadowColor:e.sky400,shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:10,elevation:8},centerPlayText:{fontFamily:S.interSemiBold,fontSize:13,color:e.white,letterSpacing:.3,textShadowColor:"rgba(0,0,0,0.7)",textShadowOffset:{width:0,height:1},textShadowRadius:3},videoBadgeOverlay:{position:"absolute",bottom:12,left:12},playPill:{flexDirection:"row",alignItems:"center",gap:6,backgroundColor:`${e.slate900}D9`,paddingHorizontal:10,paddingVertical:5,borderRadius:16,borderWidth:1,borderColor:e.whiteAlpha20},playPillText:{fontFamily:S.interSemiBold,fontSize:11,color:e.white,letterSpacing:.3},floatingMetaBadge:{position:"absolute",bottom:10,backgroundColor:`${e.slate900}D9`,paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,borderWidth:1,borderColor:e.whiteAlpha15,alignItems:"center",justifyContent:"center"},floatingMetaText:{fontFamily:S.interMedium,fontSize:10.5,color:e.slate200,letterSpacing:.2},videoControlsPanel:{paddingHorizontal:16,paddingTop:8,paddingBottom:6,backgroundColor:e.headerGlassDark,borderTopWidth:1,borderTopColor:e.borderGlassLight,gap:8},progressSection:{flexDirection:"row",alignItems:"center",gap:10},timeLabel:{fontFamily:S.interMedium,fontSize:11,color:e.whiteAlpha60,minWidth:42},progressTrack:{flex:1,height:6,borderRadius:3,backgroundColor:e.whiteAlpha15,justifyContent:"center",position:"relative"},progressFill:{height:"100%",borderRadius:3,backgroundColor:e.sky400},scrubberThumb:{position:"absolute",width:12,height:12,borderRadius:6,backgroundColor:e.white,borderWidth:2,borderColor:e.sky400,top:-3,marginLeft:-6},controlsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:2},controlActionPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:10,paddingVertical:5,borderRadius:6,backgroundColor:`${e.sky400}18`,borderWidth:1,borderColor:`${e.sky400}50`},controlActionText:{fontFamily:S.interSemiBold,fontSize:11.5},speedGroup:{flexDirection:"row",alignItems:"center",backgroundColor:e.whiteAlpha08,borderRadius:6,borderWidth:1,borderColor:e.whiteAlpha12,padding:2,gap:2},speedBtn:{paddingHorizontal:7,paddingVertical:3,borderRadius:4},speedBtnActive:{backgroundColor:`${e.sky400}30`},speedText:{fontFamily:S.interMedium,fontSize:10.5,color:e.whiteAlpha60},speedTextActive:{color:e.sky400,fontFamily:S.interBold},loopPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:5,borderRadius:6,backgroundColor:e.whiteAlpha08,borderWidth:1,borderColor:e.whiteAlpha12},loopPillActive:{backgroundColor:`${e.sky400}18`,borderColor:`${e.sky400}50`},loopText:{fontFamily:S.interMedium,fontSize:10.5,color:e.whiteAlpha60},loopTextActive:{color:e.sky400,fontFamily:S.interSemiBold},footer:{flexDirection:"row",alignItems:"center",justifyContent:"center",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:8,paddingBottom:V.OS==="ios"?34:16,borderTopWidth:1,borderTopColor:e.borderGlassLight,backgroundColor:e.headerGlassDark},actionBtn:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:16,paddingVertical:9,borderRadius:8,backgroundColor:e.whiteAlpha08,borderWidth:1,borderColor:e.whiteAlpha15},actionText:{fontFamily:S.interMedium,fontSize:12,color:e.white}});
+
+      
+      <De visible={ke}title={r("mediaGallery.deleteTitle","Delete Media?")}message={r("mediaGallery.deleteMessage",{filename:o.filename})}confirmText={r("mediaGallery.delete","Delete")}cancelText={r("common.cancel","Cancel")}isDestructive={!0}icon="trash"onConfirm={()=>{E(!1),Pe(o),F()}}onCancel={()=>E(!1)}/>
+    </Oe>};const e=M.create({overlay:{flex:1,backgroundColor:t.slate900,justifyContent:"space-between"},header:{flexShrink:0,minHeight:k.OS==="ios"?96:66,flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:k.OS==="ios"?48:W.currentHeight?W.currentHeight+8:18,paddingBottom:14,borderBottomWidth:M.hairlineWidth,borderBottomColor:"rgba(255, 255, 255, 0.25)",zIndex:10},headerLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1,minWidth:0,marginRight:8},headerTextCol:{flex:1,minWidth:0},headerRight:{flexDirection:"row",alignItems:"center",gap:7},badge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:3.5,borderRadius:6,backgroundColor:"rgba(255, 255, 255, 0.22)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.38)"},badgeText:{fontFamily:S.interBold,fontSize:10,letterSpacing:.4,color:t.white},title:{fontFamily:S.interSemiBold,fontSize:13,color:t.white},subtitle:{fontFamily:S.interRegular,fontSize:11,color:"rgba(255, 255, 255, 0.6)",marginTop:1},headerActionBtn:{width:30,height:30,borderRadius:8,backgroundColor:"rgba(255, 255, 255, 0.22)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.38)",alignItems:"center",justifyContent:"center"},headerDeleteBtn:{width:30,height:30,borderRadius:8,backgroundColor:"rgba(239, 68, 68, 0.35)",borderWidth:1,borderColor:"rgba(252, 165, 165, 0.55)",alignItems:"center",justifyContent:"center"},headerIconBtn:{width:30,height:30,borderRadius:8,backgroundColor:"rgba(255, 255, 255, 0.22)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.38)",alignItems:"center",justifyContent:"center"},stage:{flex:1,minHeight:0,alignItems:"center",justifyContent:"center",paddingHorizontal:14,paddingVertical:12,overflow:"hidden"},stageExpanded:{paddingHorizontal:0,paddingVertical:0},previewCard:{flex:1,width:"100%",minHeight:0,borderRadius:16,overflow:"hidden",backgroundColor:t.slate900,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.1)",alignItems:"center",justifyContent:"center",position:"relative"},previewCardExpanded:{borderRadius:0,borderWidth:0},image:{width:"100%",height:"100%"},videoImageOverlay:{...M.absoluteFillObject,backgroundColor:"rgba(10, 13, 20, 0.28)"},videoFallbackBackdrop:{flex:1,width:"100%",backgroundColor:t.slate900,alignItems:"center",justifyContent:"center",padding:24},videoFallbackGlow:{position:"absolute",width:150,height:150,borderRadius:75,backgroundColor:"rgba(56, 189, 248, 0.08)"},videoFallbackTitle:{fontFamily:S.interSemiBold,fontSize:15,color:t.white,marginTop:12},videoFallbackSubtitle:{fontFamily:S.interRegular,fontSize:12,color:"rgba(255, 255, 255, 0.6)",marginTop:4},centerPlayContainer:{position:"absolute",alignItems:"center",justifyContent:"center",gap:8},centerPlayGlow:{position:"absolute",width:80,height:80,borderRadius:40,backgroundColor:"rgba(56, 189, 248, 0.22)"},centerPlayCircle:{width:62,height:62,borderRadius:31,backgroundColor:t.sky500,alignItems:"center",justifyContent:"center",paddingLeft:3,shadowColor:t.sky500,shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:10,elevation:8},centerPlayPill:{backgroundColor:"rgba(15, 23, 42, 0.90)",paddingHorizontal:12,paddingVertical:4,borderRadius:12,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.15)"},centerPlayText:{fontFamily:S.interBold,fontSize:11.5,color:t.white,letterSpacing:.3},topLeftBadgeOverlay:{position:"absolute",top:12,left:12},bottomRightBadgeOverlay:{position:"absolute",bottom:12,right:12},metaPill:{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:"rgba(15, 23, 42, 0.90)",paddingHorizontal:10,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.15)"},metaPillText:{fontFamily:S.interSemiBold,fontSize:11,color:t.white,letterSpacing:.2},footer:{flexShrink:0,paddingHorizontal:16,paddingTop:12,paddingBottom:k.OS==="ios"?34:16,borderTopWidth:1,borderTopColor:t.grayBorderSecondary,backgroundColor:t.white,gap:10,zIndex:10,...k.select({ios:{shadowColor:t.slate900,shadowOffset:{width:0,height:-3},shadowOpacity:.08,shadowRadius:8},android:{elevation:6}})},primaryPlayBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:8,width:"100%",paddingVertical:12,borderRadius:12,backgroundColor:t.indigo600,shadowColor:t.indigo600,shadowOffset:{width:0,height:3},shadowOpacity:.35,shadowRadius:6,elevation:4},primaryPlayText:{fontFamily:S.interBold,fontSize:13.5,color:t.white,letterSpacing:.3},actionsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:8},actionBtn:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:10,paddingHorizontal:12,borderRadius:10,backgroundColor:t.graySurface,borderWidth:1,borderColor:t.grayBorderSecondary},actionText:{fontFamily:S.interSemiBold,fontSize:12,color:t.grayText}});

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

@@ -1,153 +1,153 @@
-import X,{useCallback as de,useMemo as J,useRef as Oe}from"react";import{FlatList as $e,Platform as qe,Pressable as Ne,ScrollView as He,Text as R,TextInput as Ae,View as C}from"react-native";import{useInspector as De}from"./InspectorContext";import O from"../TouchableScale";import Ce from"../AnimatedEntrance";import Me from"../DomainHeader";import Ee from"../LogCard";import We from"../EmptyState";import Ge from"../EndOfListFooter";import Qe from"./NetworkFilterModal";import b from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{METHOD_COLORS as Se}from"../../constants";import{useTranslation as _e}from"../../i18n";import{SearchIcon as Ue,ClearIcon as Ke,TrashIcon as Xe,SortArrowIcon as Je,FilterIcon as Te,ChevronIcon as Ye,CheckIcon as Ze,CircleCheckIcon as Co,CircleXIcon as So,LayersIcon as To,ClockIcon as Vo,RequestIcon as Io,ResponseIcon as Ro,AtomIcon as Fo}from"../NetworkIcons";const Lo=X.memo(()=>{const{groupedData:Y,loadMoreSection:Z,search:F,setSearch:M,setSearchScope:xe,quickFilter:G,setQuickFilter:j,handleDelete:Ve,selectedLogs:E,sortOrder:Q,setSortOrder:v,statusFilters:x,setStatusFilters:q,methodFilters:V,setMethodFilters:N,filteredLogs:$,logs:H,toggleSectionFilter:ee,toggleSectionCollapse:oe,minStart:te,totalRange:re,newLogIds:le,toggleSelect:ie,setSelected:se}=De(),{t:_}=_e(),Ie=Oe(null),[Re,U]=X.useState(!1),[ae,ne]=X.useState(!1),ke=J(()=>({statusCodes:x.size>0?new Set(x):new Set(["all"]),methods:V.size>0?new Set(V):new Set(["all"]),latency:"all",protocol:"all",sortBy:Q==="newest"?"time_desc":"time_asc"}),[x,V,Q]),Fe=de(o=>{o.statusCodes.has("all")||o.statusCodes.size===0?q(new Set):q(new Set(o.statusCodes)),o.methods.has("all")||o.methods.size===0?N(new Set):N(new Set([...o.methods].map(z=>z))),o.sortBy==="time_asc"?v("oldest"):v("newest")},[q,N,v]),L=J(()=>{let o=0,z=0,T=0,I=0,A=0,W=0;return H.forEach(S=>{const P=typeof S.status=="number"?S.status:parseInt(String(S.status),10);S.status===0||S.status==null||!isNaN(P)&&P>=400?o++:!isNaN(P)&&P>=200&&P<400&&z++,(S.duration||0)>=500&&T++;const B=(S.method||"").toUpperCase();B==="POST"&&I++,B==="GET"&&A++;const K=(S.url||"").toLowerCase(),D=(S.client||"").toLowerCase();(K.includes("graphql")||D.includes("graphql")||D.includes("apollo"))&&W++}),{all:H.length,errors:o,success:z,slow:T,post:I,get:A,graphql:W}},[H]),Le=J(()=>[{id:"all",label:"All",count:L.all,color:e.purple},{id:"errors",label:"Errors",count:L.errors,color:e.errorColor},{id:"success",label:"2xx OK",count:L.success,color:e.greenColor},{id:"slow",label:"Slow >500ms",count:L.slow,color:e.warningIconGold},{id:"POST",label:"POST",count:L.post,color:Se.POST||"#3B82F6"},{id:"GET",label:"GET",count:L.get,color:Se.GET||"#10B981"},{id:"graphql",label:"GraphQL",count:L.graphql,color:e.graphqlPink}],[L]),Be=de(({item:o,index:z})=>{if(o.type==="header")return<Ce index={z}distance={8}>
-            <Me pageName={o.pageName}color={o.color}stats={o.stats}activeFilters={o.activeFilters}onToggleFilter={ee}isCollapsed={o.isCollapsed}onToggleCollapse={oe}isFirst={o.isFirst}timestamp={o.timestamp}/>
-          </Ce>;if(o.type==="loadMore"){const{pageName:W,color:S,remainingCount:P,totalCount:B,loadedCount:K,loadMoreStep:D,hasMore:Pe}=o;return<C style={[b.treeNodeRow,b.treeNodeRowLast]}>
+import j,{useCallback as se,useMemo as H,useRef as qe}from"react";import{FlatList as De,Pressable as He,ScrollView as We,Text as V,TextInput as Ge,View as C}from"react-native";import{useInspector as _e}from"./InspectorContext";import O from"../TouchableScale";import Te from"../AnimatedEntrance";import Qe from"../DomainHeader";import Ue from"../LogCard";import Ke from"../EmptyState";import Xe from"../EndOfListFooter";import Je from"./NetworkFilterModal";import b from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as I}from"../../styles/AppFonts";import{METHOD_COLORS as ze}from"../../constants";import{useTranslation as Ye}from"../../i18n";import{SearchIcon as Ze,ClearIcon as Co,TrashIcon as So,SortArrowIcon as To,FilterIcon as Vo,ChevronIcon as Io,CheckIcon as Fo,CircleCheckIcon as Ro,CircleXIcon as Lo,LayersIcon as Ve,ClockIcon as Bo,RequestIcon as Po,ResponseIcon as Eo,AtomIcon as Mo}from"../NetworkIcons";const No=j.memo(()=>{const{groupedData:Q,loadMoreSection:ne,search:F,setSearch:U,setSearchScope:de,quickFilter:K,setQuickFilter:le,handleDelete:Ie,isGroupByPageEnabled:k,setIsGroupByPageEnabled:ke,selectedLogs:X,sortOrder:Fe,setSortOrder:J,statusFilters:R,setStatusFilters:v,methodFilters:L,setMethodFilters:W,latencyFilter:$,setLatencyFilter:Y,protocolFilter:A,setProtocolFilter:Z,networkSortBy:q,setNetworkSortBy:ee,filteredLogs:B,logs:G,toggleSectionFilter:ce,toggleSectionCollapse:ue,minStart:ge,totalRange:pe,newLogIds:he,toggleSelect:me,setSelected:ye,maxNetworkLogs:ae}=_e(),{t:oe}=Ye(),Re=qe(null),[Le,fe]=j.useState(!1),[we,Ce]=j.useState(!1),[te,Se]=j.useState(ae||50);j.useEffect(()=>{Se(ae||50)},[F,K,ae]);const Be=H(()=>k?Q:Q.slice(0,te),[k,Q,te]),Pe=se(e=>e?.id?String(e.id):"",[]),M=H(()=>R.size>0&&!R.has("all")||L.size>0&&!L.has("all")||$!=="all"||A!=="all"||q!=="time_desc",[R,L,$,A,q]),Ee=H(()=>{let e=0;return R.size>0&&!R.has("all")&&(e+=R.size),L.size>0&&!L.has("all")&&(e+=L.size),$!=="all"&&e++,A!=="all"&&e++,q!=="time_desc"&&e++,e},[R,L,$,A,q]),Me=H(()=>({statusCodes:R.size>0?new Set(R):new Set(["all"]),methods:L.size>0?new Set(L):new Set(["all"]),latency:$,protocol:A,sortBy:q}),[R,L,$,A,q]),Ne=se(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?v(new Set):v(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?W(new Set):W(new Set([...e.methods].map(T=>T))),Y(e.latency||"all"),Z(e.protocol||"all"),ee(e.sortBy||"time_desc"),e.sortBy==="time_asc"?J("oldest"):J("newest")},[v,W,Y,Z,ee,J]),P=H(()=>{let e=0,T=0,z=0,x=0,_=0,re=0;return G.forEach(S=>{const N=typeof S.status=="number"?S.status:parseInt(String(S.status),10);S.status===0||S.status==null||!isNaN(N)&&N>=400?e++:!isNaN(N)&&N>=200&&N<400&&T++,(S.duration||0)>=500&&z++;const E=(S.method||"").toUpperCase();E==="POST"&&x++,E==="GET"&&_++;const ie=(S.url||"").toLowerCase(),D=(S.client||"").toLowerCase();(ie.includes("graphql")||D.includes("graphql")||D.includes("apollo"))&&re++}),{all:G.length,errors:e,success:T,slow:z,post:x,get:_,graphql:re}},[G]),Oe=H(()=>[{id:"all",label:"All",count:P.all,color:o.purple},{id:"errors",label:"Errors",count:P.errors,color:o.errorColor},{id:"success",label:"2xx OK",count:P.success,color:o.greenColor},{id:"slow",label:"Slow >500ms",count:P.slow,color:o.warningIconGold},{id:"POST",label:"POST",count:P.post,color:ze.POST||o.blue500},{id:"GET",label:"GET",count:P.get,color:ze.GET||o.emerald500},{id:"graphql",label:"GraphQL",count:P.graphql,color:o.graphqlPink}],[P]),$e=se(({item:e,index:T})=>{if(e.type==="header")return<Te index={T}distance={8}>
+            <Qe pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={ce}isCollapsed={e.isCollapsed}onToggleCollapse={ue}isFirst={e.isFirst}timestamp={e.timestamp}/>
+          </Te>;if(e.type==="loadMore"){const{pageName:re,color:S,remainingCount:N,totalCount:E,loadedCount:ie,loadMoreStep:D,hasMore:Ae}=e;return<C style={[b.treeNodeRow,b.treeNodeRowLast]}>
             <C style={b.treeLines}>
               <C style={[b.modernTreeLine,{borderColor:S},b.modernTreeLineLast]}/>
             </C>
             <C style={b.treeCardWrapper}>
-              {Pe?<O onPress={()=>Z(W,50)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${S}14`,borderWidth:1.5,borderColor:`${S}40`,shadowColor:S,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
+              {Ae?<O onPress={()=>ne(re,D||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${S}14`,borderWidth:1.5,borderColor:`${S}40`,shadowColor:S,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
                   <C style={{flexDirection:"row",alignItems:"center",gap:8}}>
                     <C style={{width:22,height:22,borderRadius:11,backgroundColor:S,alignItems:"center",justifyContent:"center",shadowColor:S,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
-                      <Ye color={e.white}size={9}direction="down"/>
+                      <Io color={o.white}size={9}direction="down"/>
                     </C>
                     <C>
-                      <R style={{fontFamily:k.interBold,fontSize:12,color:S}}>
-                        {_("footer.loadMoreRequests",{count:D,defaultValue:`Load ${D} More Requests`})}
-                      </R>
-                      <R style={{fontFamily:k.interRegular,fontSize:9.5,color:e.grayTextWeak,marginTop:1}}>
-                        Showing {K} of {B} requests
-                      </R>
+                      <V style={{fontFamily:I.interBold,fontSize:12,color:S}}>
+                        {oe("footer.loadMoreRequests",{count:D,defaultValue:`Load ${D} More Requests`})}
+                      </V>
+                      <V style={{fontFamily:I.interRegular,fontSize:9.5,color:o.grayTextWeak,marginTop:1}}>
+                        Showing {ie} of {E} requests
+                      </V>
                     </C>
                   </C>
 
                   <C style={{flexDirection:"row",alignItems:"center",backgroundColor:`${S}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${S}40`,gap:3}}>
-                    <R style={{fontFamily:k.interBold,fontSize:10.5,color:S}}>
-                      +{P}
-                    </R>
-                    <R style={{fontFamily:k.interRegular,fontSize:9,color:S}}>
+                    <V style={{fontFamily:I.interBold,fontSize:10.5,color:S}}>
+                      +{N}
+                    </V>
+                    <V style={{fontFamily:I.interRegular,fontSize:9,color:S}}>
                       more
-                    </R>
+                    </V>
                   </C>
                 </O>:<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${S}0A`,borderWidth:1,borderColor:`${S}25`}}>
                   <C style={{flexDirection:"row",alignItems:"center",gap:7}}>
                     <C style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${S}25`,alignItems:"center",justifyContent:"center"}}>
-                      <Ze color={S}size={8}/>
+                      <Fo color={S}size={8}/>
                     </C>
-                    <R style={{fontFamily:k.interMedium,fontSize:11,color:e.grayTextStrong}}>
-                      {_("footer.allLoaded",{count:B,defaultValue:`All ${B} requests loaded`})}
-                    </R>
+                    <V style={{fontFamily:I.interMedium,fontSize:11,color:o.grayTextStrong}}>
+                      {oe("footer.allLoaded",{count:E,defaultValue:`All ${E} requests loaded`})}
+                    </V>
                   </C>
 
                   <C style={{backgroundColor:`${S}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
-                    <R style={{fontFamily:k.interBold,fontSize:9.5,color:S}}>
-                      {B}/{B}
-                    </R>
+                    <V style={{fontFamily:I.interBold,fontSize:9.5,color:S}}>
+                      {E}/{E}
+                    </V>
                   </C>
                 </C>}
             </C>
-          </C>}const{log:T,isLast:I,color:A}=o;return<Ce index={z}distance={8}style={[b.treeNodeRow,I&&b.treeNodeRowLast]}>
-          <C style={b.treeLines}>
-            <C style={[b.modernTreeLine,{borderColor:A},I&&b.modernTreeLineLast]}/>
-            {!I&&<C style={[b.modernTreeBranch,{borderColor:A}]}/>}
+          </C>}const{log:z,isLast:x,color:_}=e;return<Te index={T}distance={8}style={k?[b.treeNodeRow,x&&b.treeNodeRowLast]:{marginBottom:6,marginHorizontal:2}}>
+          {k&&<C style={b.treeLines}>
+              <C style={[b.modernTreeLine,{borderColor:_},x&&b.modernTreeLineLast]}/>
+              {!x&&<C style={[b.modernTreeBranch,{borderColor:_}]}/>}
+            </C>}
+          <C style={k?b.treeCardWrapper:{flex:1}}>
+            <Ue item={z}isSelected={X.has(z.id)}onToggleSelect={me}onPress={()=>{ye(z)}}timelineMinStart={ge}timelineTotalRange={pe}isNew={he.has(z.id)}searchStr={F}/>
           </C>
-          <C style={b.treeCardWrapper}>
-            <Ee item={T}isSelected={E.has(T.id)}onToggleSelect={ie}onPress={()=>{se(T)}}timelineMinStart={te}timelineTotalRange={re}isNew={le.has(T.id)}searchStr={F}/>
-          </C>
-        </Ce>},[te,re,le,E,ie,F,ee,oe,Z,se,_]);return<C style={{flex:1}}>
+        </Te>},[k,ge,pe,he,X,me,F,ce,ue,ne,ye,oe]);return<C style={{flex:1}}>
       <C style={{marginTop:6}}>
             
             <C style={b.toolbarRow}>
-              <C style={[b.searchContainer,ae&&{borderColor:e.purple,borderWidth:1.5}]}>
-                <Ue color={ae?e.purple:e.grayTextWeak}size={15}/>
-                <Ae placeholder="Search URL, status, method, headers, body..."placeholderTextColor={e.grayTextWeak}value={F}onChangeText={M}onFocus={()=>ne(!0)}onBlur={()=>ne(!1)}style={b.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              <C style={[b.searchContainer,we&&{borderColor:o.purple,borderWidth:1.5}]}>
+                <Ze color={we?o.purple:o.grayTextWeak}size={15}/>
+                <Ge placeholder="Search URL, status, method, headers, body..."placeholderTextColor={o.grayTextWeak}value={F}onChangeText={U}onFocus={()=>Ce(!0)}onBlur={()=>Ce(!1)}style={b.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
                 {F.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                    <C style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
-                      <R style={{color:e.purple,fontSize:9.5,fontFamily:k.interBold}}>
-                        {$.length}
-                      </R>
+                    <C style={{backgroundColor:`${o.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                      <V style={{color:o.purple,fontSize:9.5,fontFamily:I.interBold}}>
+                        {B.length}
+                      </V>
                     </C>
-                    <Ne onPress={()=>M("")}hitSlop={10}style={b.clearBtn}>
-                      <Ke color={e.grayTextWeak}size={13}/>
-                    </Ne>
+                    <He onPress={()=>U("")}hitSlop={10}style={b.clearBtn}>
+                      <Co color={o.grayTextWeak}size={13}/>
+                    </He>
                   </C>}
               </C>
 
               <C style={b.toolbarRight}>
-                <O style={[b.toolbarBtn,{borderColor:`${e.errorColor}38`,backgroundColor:`${e.errorColor}0F`}]}onPress={Ve}hitSlop={6}>
-                  <Xe color={e.errorColor}size={15}/>
-                  {E.size>0&&<C style={b.trashBadge}>
-                      <R style={b.trashBadgeText}>
-                        {E.size}
-                      </R>
+                <O style={[b.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={Ie}hitSlop={6}>
+                  <So color={o.errorColor}size={15}/>
+                  {X.size>0&&<C style={b.trashBadge}>
+                      <V style={b.trashBadgeText}>
+                        {X.size}
+                      </V>
                     </C>}
                 </O>
 
-                <O style={b.toolbarBtn}onPress={()=>v(o=>o==="newest"?"oldest":"newest")}hitSlop={10}>
-                  <Je direction={Q==="newest"?"down":"up"}color={e.grayTextStrong}size={18}/>
+                <O style={[b.toolbarBtn,k&&{borderColor:o.purple,backgroundColor:`${o.purple}15`}]}onPress={()=>ke(e=>!e)}hitSlop={6}accessibilityLabel={k?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
+                  <Ve color={k?o.purple:o.grayTextStrong}size={16}/>
+                  {k&&<C style={b.activeFilterDot}/>}
                 </O>
 
-                <O style={[b.toolbarBtn,(x.size>0||V.size>0)&&{borderColor:e.purple,backgroundColor:`${e.purple}15`}]}onPress={()=>U(!0)}hitSlop={6}>
-                  <Te color={x.size>0||V.size>0?e.purple:e.grayTextStrong}size={16}/>
-                  {(x.size>0||V.size>0)&&<C style={b.activeFilterDot}/>}
+                <O style={b.toolbarBtn}onPress={()=>J(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <To direction={Fe==="newest"?"down":"up"}color={o.grayTextStrong}size={18}/>
                 </O>
               </C>
             </C>
 
             
             <C style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
-              <He horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-                {Le.map(o=>{const z=G===o.id,T=o.color||e.purple,I=z?e.white:T;return<O key={o.id}onPress={()=>{j(z?"all":o.id)}}>
-                      <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:z?T:`${T}12`,borderWidth:1,borderColor:z?T:`${T}30`,gap:5}}>
-                        {o.id==="all"&&<To size={11}color={I}/>}
-                        {o.id==="errors"&&<So size={11}color={I}/>}
-                        {o.id==="success"&&<Co size={11}color={I}/>}
-                        {o.id==="slow"&&<Vo size={11}color={I}/>}
-                        {o.id==="POST"&&<Io size={11}color={I}/>}
-                        {o.id==="GET"&&<Ro size={11}color={I}/>}
-                        {o.id==="graphql"&&<Fo size={11}color={I}/>}
-                        <R style={{fontFamily:k.interBold,fontSize:10.5,color:z?e.white:e.primaryBlack}}>
-                          {o.label}
-                        </R>
-                        <C style={{backgroundColor:z?"rgba(255,255,255,0.25)":`${T}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
-                          <R style={{fontFamily:k.interBold,fontSize:9,color:z?e.white:T}}>
-                            {o.count}
-                          </R>
+              <We horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+                {Oe.map(e=>{const T=K===e.id,z=e.color||o.purple,x=T?o.white:z;return<O key={e.id}onPress={()=>{le(T?"all":e.id)}}>
+                      <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:T?z:`${z}12`,borderWidth:1,borderColor:T?z:`${z}30`,gap:5}}>
+                        {e.id==="all"&&<Ve size={11}color={x}/>}
+                        {e.id==="errors"&&<Lo size={11}color={x}/>}
+                        {e.id==="success"&&<Ro size={11}color={x}/>}
+                        {e.id==="slow"&&<Bo size={11}color={x}/>}
+                        {e.id==="POST"&&<Po size={11}color={x}/>}
+                        {e.id==="GET"&&<Eo size={11}color={x}/>}
+                        {e.id==="graphql"&&<Mo size={11}color={x}/>}
+                        <V style={{fontFamily:I.interBold,fontSize:10.5,color:T?o.white:o.primaryBlack}}>
+                          {e.label}
+                        </V>
+                        <C style={{backgroundColor:T?"rgba(255,255,255,0.25)":`${z}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
+                          <V style={{fontFamily:I.interBold,fontSize:9,color:T?o.white:z}}>
+                            {e.count}
+                          </V>
                         </C>
                       </C>
                     </O>})}
-              </He>
+              </We>
 
-              <O onPress={()=>U(!0)}style={{flexShrink:0}}>
-                <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:x.size>0||V.size>0?`${e.purple}20`:e.grayBackground,borderWidth:1,borderColor:x.size>0||V.size>0?e.purple:e.grayBorderSecondary,gap:5,shadowColor:e.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
-                  <Te size={11}color={x.size>0||V.size>0?e.purple:e.grayText}/>
-                  <R style={{fontFamily:k.interBold,fontSize:10.5,color:x.size>0||V.size>0?e.purple:e.grayText}}>
-                    More Filters
-                  </R>
-                  {(x.size>0||V.size>0)&&<C style={{backgroundColor:e.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
-                      <R style={{fontFamily:k.interBold,fontSize:8.5,color:e.white}}>
-                        {x.size+V.size}
-                      </R>
+              <O onPress={()=>fe(!0)}style={{flexShrink:0}}>
+                <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:M?`${o.purple}20`:o.grayBackground,borderWidth:1,borderColor:M?o.purple:o.grayBorderSecondary,gap:5,shadowColor:o.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
+                  <Vo size={11}color={M?o.purple:o.grayText}/>
+                  <V style={{fontFamily:I.interBold,fontSize:10.5,color:M?o.purple:o.grayText}}>
+                    {oe("network.moreFilters","More Filters")}
+                  </V>
+                  {M&&<C style={{backgroundColor:o.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
+                      <V style={{fontFamily:I.interBold,fontSize:8.5,color:o.white}}>
+                        {Ee}
+                      </V>
                     </C>}
                 </C>
               </O>
             </C>
 
             
-            {(G!=="all"||F.trim().length>0||x.size>0||V.size>0||$.length!==H.length)&&<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:12,marginBottom:8,paddingHorizontal:10,paddingVertical:5.5,backgroundColor:`${e.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${e.purple}25`}}>
-                <R style={{fontFamily:k.interMedium,fontSize:10.5,color:e.purple}}>
-                  Showing {$.length} of {H.length} requests
-                </R>
-                <O onPress={()=>{M(""),j("all"),q(new Set),N(new Set)}}>
-                  <R style={{fontFamily:k.interBold,fontSize:10.5,color:e.errorColor}}>
+            {(K!=="all"||F.trim().length>0||M||B.length!==G.length)&&<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:12,marginBottom:8,paddingHorizontal:10,paddingVertical:5.5,backgroundColor:`${o.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${o.purple}25`}}>
+                <V style={{fontFamily:I.interMedium,fontSize:10.5,color:o.purple}}>
+                  Showing {B.length} of {G.length} requests
+                </V>
+                <O onPress={()=>{U(""),le("all"),v(new Set),W(new Set),Y("all"),Z("all"),ee("time_desc"),de("all")}}>
+                  <V style={{fontFamily:I.interBold,fontSize:10.5,color:o.errorColor}}>
                     Clear All Filters
-                  </R>
+                  </V>
                 </O>
               </C>}
           </C>
 
-        <$e ref={Ie}data={Y}keyExtractor={o=>o?.id?.toString()}renderItem={Be}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={qe.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<We isSearch={F.length>0||x.size>0||V.size>0||G!=="all"}searchQuery={F}customTitle={F.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{M(""),q(new Set),N(new Set),j("all"),xe("all")}}/>}ListFooterComponent={Y.length>0?<Ge count={$.length}totalCount={$.length}label="requests"/>:null}contentContainerStyle={[b.listContent,$.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+        <De ref={Re}data={Be}keyExtractor={Pe}renderItem={$e}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}ListEmptyComponent={<Ke isSearch={F.length>0||M||K!=="all"}searchQuery={F}customTitle={F.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{U(""),v(new Set),W(new Set),Y("all"),Z("all"),ee("time_desc"),le("all"),de("all")}}/>}ListFooterComponent={Q.length>0?<Xe count={k?B.length:Math.min(te,B.length)}totalCount={B.length}label="requests"hasMore={!k&&B.length>te}loadMoreStep={30}onLoadMore={()=>Se(e=>e+30)}/>:null}contentContainerStyle={[b.listContent,B.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <Qe visible={Re}onClose={()=>U(!1)}filters={ke}onApply={Fe}searchQuery={F}/>
-    </C>});export default Lo;
+      <Je visible={Le}onClose={()=>fe(!1)}filters={Me}onApply={Ne}searchQuery={F}/>
+    </C>});export default No;