react-native-inapp-inspector 2.4.0 → 2.4.2

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

@@ -1,134 +1,147 @@
-import Q,{useEffect as L,useRef as I}from"react";import{Animated as w,Modal as X,Platform as O,Pressable as Z,StatusBar as Se,StyleSheet as E,View as S}from"react-native";import{useInspector as we}from"./InspectorContext";import Be from"../ErrorBoundary";import B from"../ModuleErrorBoundary";import Ce from"./FabLauncher";import Ve from"./InspectorHeader";import Re from"./TabBar";import Ne from"./NetworkTab";import De from"./NetworkDetail";import Me from"./LogDetail";import Ee from"./ConsoleTab";import Te from"./AnalyticsTab";import Ae from"../AnalyticsDetail";import Pe from"./ReduxTab";import Le from"./ReduxDetail";import Ie from"./CrashTab";import Oe from"./CrashDetail";import Fe from"./PushTab";import Ge from"./PushDetail";import We from"./DeviceInfoTab";import He from"./StorageTab";import Ue from"./DebuggingTab";import{MediaGalleryTab as Ye}from"./MediaGalleryTab";import _e from"./SettingsPanel";import $e from"./AboutModal";import Je from"./NpmUpdateToast";import Ke from"./NpmStarPrompt";import Qe from"../Toast";import F from"../../styles";import{AppColors as C}from"../../styles/AppColors";import Xe from"./NavigationTracker";import{isLocalDebugEnvironment as Ze}from"../../helpers";const eo=()=>{const{visible:T,modalAnimationType:V,closeModal:R,modalHeightPercent:x,selected:G,selectedEvent:A,selectedLog:W,selectedReduxSlice:z,selectedReduxAction:U,selectedCrash:q,selectedPush:P,setSelectedPush:Y,settingsPage:N,isAboutOpen:D,setIsAboutOpen:_,activeTab:e,isReady:$,enabled:j,hasNavigationContext:J,setNavState:K}=we(),H=e==="apis"&&G!=null||e==="analytics"&&A!=null||e==="logs"&&W!=null||e==="redux"&&(z!=null||U!=null)||e==="crash"&&q!=null||e==="push"&&P!=null,M=I(new w.Value(0)).current;L(()=>{N!==null&&(M.setValue(0),w.spring(M,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[N!==null]);const v=I(new w.Value(0)).current;return L(()=>{D&&(v.setValue(0),w.spring(v,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[D]),<>
-      {(O.OS==="ios"||O.OS==="android")&&j&&!T&&<Ce/>}
-      <X visible={T}animationType={V}transparent statusBarTranslucent={!0}onRequestClose={R}>
-        <Be onClose={R}>
-          <S style={F.modalBackdrop}>
-            <Z style={F.modalBackdropPressable}onPress={R}/>
-            <S style={[F.modalContentCard,{height:`${x}%`,borderTopLeftRadius:x>=100?0:20,borderTopRightRadius:x>=100?0:20}]}>
-              <Se translucent backgroundColor="transparent"barStyle="light-content"/>
+import te,{useEffect as A,useRef as P}from"react";import{Animated as o,Modal as Se,Platform as G,Pressable as Be,StatusBar as Ce,StyleSheet as R,View as B}from"react-native";import{useInspector as Ve}from"./InspectorContext";import Ne from"../ErrorBoundary";import S from"../ModuleErrorBoundary";import Re from"./FabLauncher";import De from"./InspectorHeader";import Me from"./TabBar";import Ee from"./NetworkTab";import Te from"./NetworkDetail";import Ae from"./LogDetail";import Pe from"./ConsoleTab";import Le from"./AnalyticsTab";import Ie from"../AnalyticsDetail";import Oe from"./ReduxTab";import We from"./ReduxDetail";import Fe from"./CrashTab";import Ge from"./CrashDetail";import He from"./PushTab";import Ye from"./PushDetail";import Ue from"./SocketTab";import _e from"./SocketDetail";import $e from"./DeviceInfoTab";import Je from"./StorageTab";import Ke from"./DebuggingTab";import{MediaGalleryTab as Qe}from"./MediaGalleryTab";import Xe from"./SettingsPanel";import Ze from"./AboutModal";import{SupportPage as So}from"./SupportPage";import Bo from"./NpmUpdateToast";import Co from"./NpmStarPrompt";import Vo from"../Toast";import q from"../../styles";import{AppColors as C}from"../../styles/AppColors";import No from"./NavigationTracker";import{isLocalDebugEnvironment as Ro}from"../../helpers";const Do=()=>{const{visible:L,modalAnimationType:V,closeModal:N,modalHeightPercent:I,selected:H,selectedEvent:O,selectedLog:Y,selectedReduxSlice:_,selectedReduxAction:$,selectedCrash:z,selectedPush:W,setSelectedPush:j,selectedSocket:F,setSelectedSocket:J,settingsPage:D,isAboutOpen:M,setIsAboutOpen:K,isSupportOpen:v,setIsSupportOpen:Q,activeTab:e,isReady:X,enabled:Z,isDismissed:ee,hasNavigationContext:oe,setNavState:re}=Ve(),U=e==="apis"&&H!=null||e==="analytics"&&O!=null||e==="logs"&&Y!=null||e==="redux"&&(_!=null||$!=null)||e==="crash"&&z!=null||e==="push"&&W!=null||e==="socket"&&F!=null,E=P(new o.Value(0)).current;A(()=>{D!==null&&(E.setValue(0),o.spring(E,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[D!==null]);const T=P(new o.Value(0)).current;A(()=>{M&&(T.setValue(0),o.spring(T,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[M]);const x=P(new o.Value(0)).current;return A(()=>{v&&(x.setValue(0),o.spring(x,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[v]),<>
+      {(G.OS==="ios"||G.OS==="android")&&Z&&!ee&&!L&&<Re/>}
+      <Se visible={L}animationType={V}transparent statusBarTranslucent={!0}onRequestClose={N}>
+        <Ne onClose={N}>
+          <B style={q.modalBackdrop}>
+            <Be style={q.modalBackdropPressable}onPress={N}/>
+            <B style={[q.modalContentCard,{height:`${I}%`,borderTopLeftRadius:I>=100?0:20,borderTopRightRadius:I>=100?0:20,backgroundColor:"transparent"}]}>
+              <Ce translucent backgroundColor="transparent"barStyle="light-content"/>
 
-              <Ve/>
+              <De/>
 
-              <S style={{flex:1}}>
+              <B style={{flex:1,overflow:"hidden",backgroundColor:C.grayBackground}}>
                 
-                <S style={{flex:1}}pointerEvents={H||N!==null||D?"none":"auto"}>
-                  <Re/>
-                  {$?<S style={{flex:1}}>
-                      {e==="apis"&&<B moduleName="Network API Monitor">
-                          <Ne/>
-                        </B>}
-                      {e==="logs"&&<B moduleName="Console Logs Monitor">
+                <B style={{flex:1}}pointerEvents={U||D!==null||M||v?"none":"auto"}>
+                  <Me/>
+                  {X?<B style={{flex:1}}>
+                      {e==="apis"&&<S moduleName="Network API Monitor">
                           <Ee/>
-                        </B>}
-                      {e==="analytics"&&<B moduleName="Analytics Event Tracker">
-                          <Te/>
-                        </B>}
-                      {e==="redux"&&<B moduleName="Redux State Inspector">
+                        </S>}
+                      {e==="logs"&&<S moduleName="Console Logs Monitor">
                           <Pe/>
-                        </B>}
-                      {e==="crash"&&<B moduleName="Crash Reporter">
-                          <Ie/>
-                        </B>}
-                      {e==="push"&&<B moduleName="Push Notifications">
+                        </S>}
+                      {e==="analytics"&&<S moduleName="Analytics Event Tracker">
+                          <Le/>
+                        </S>}
+                      {e==="redux"&&<S moduleName="Redux State Inspector">
+                          <Oe/>
+                        </S>}
+                      {e==="crash"&&<S moduleName="Crash Reporter">
                           <Fe/>
-                        </B>}
-                      {e==="device"&&<B moduleName="Device Diagnostics">
-                          <We/>
-                        </B>}
-                      {e==="storage"&&<B moduleName="Storage Inspector">
+                        </S>}
+                      {e==="push"&&<S moduleName="Push Notifications">
                           <He/>
-                        </B>}
-                      {e==="media"&&<B moduleName="Media Gallery">
-                          <Ye/>
-                        </B>}
-                      {O.OS==="android"&&Ze()&&e==="debugging"&&<B moduleName="Debugging Utilities">
-                            <Ue/>
-                          </B>}
-                    </S>:<So/>}
-                </S>
+                        </S>}
+                      {e==="socket"&&<S moduleName="WebSocket & Socket.IO">
+                          <Ue/>
+                        </S>}
+                      {e==="device"&&<S moduleName="Device Diagnostics">
+                          <$e/>
+                        </S>}
+                      {e==="storage"&&<S moduleName="Storage Inspector">
+                          <Je/>
+                        </S>}
+                      {e==="media"&&<S moduleName="Media Gallery">
+                          <Qe/>
+                        </S>}
+                      {G.OS==="android"&&Ro()&&e==="debugging"&&<S moduleName="Debugging Utilities">
+                            <Ke/>
+                          </S>}
+                    </B>:<Mo/>}
+                </B>
 
                 
-                {H&&<S style={[E.absoluteFill,{backgroundColor:C.contentBg,zIndex:10}]}>
-                    {e==="apis"&&G!=null&&<B moduleName="Network Request Details">
-                        <De/>
-                      </B>}
-                    {e==="analytics"&&A!=null&&<B moduleName="Analytics Event Details">
-                        <Ae event={A}/>
-                      </B>}
-                    {e==="logs"&&W!=null&&<B moduleName="Console Log Details">
-                        <Me/>
-                      </B>}
-                    {e==="redux"&&<B moduleName="Redux Action & State Details">
-                        <Le/>
-                      </B>}
-                    {e==="crash"&&q!=null&&<B moduleName="Crash Log Details">
-                        <Oe/>
-                      </B>}
-                    {e==="push"&&P!=null&&<B moduleName="Push Notification Details">
-                        <Ge item={P}onClose={()=>Y(null)}/>
-                      </B>}
-                  </S>}
+                {U&&<B style={[R.absoluteFill,{backgroundColor:C.contentBg,zIndex:10}]}>
+                    {e==="apis"&&H!=null&&<S moduleName="Network Request Details">
+                        <Te/>
+                      </S>}
+                    {e==="analytics"&&O!=null&&<S moduleName="Analytics Event Details">
+                        <Ie event={O}/>
+                      </S>}
+                    {e==="logs"&&Y!=null&&<S moduleName="Console Log Details">
+                        <Ae/>
+                      </S>}
+                    {e==="redux"&&<S moduleName="Redux Action & State Details">
+                        <We/>
+                      </S>}
+                    {e==="crash"&&z!=null&&<S moduleName="Crash Log Details">
+                        <Ge/>
+                      </S>}
+                    {e==="push"&&W!=null&&<S moduleName="Push Notification Details">
+                        <Ye item={W}onClose={()=>j(null)}/>
+                      </S>}
+                    {e==="socket"&&F!=null&&<S moduleName="WebSocket & Socket.IO Details">
+                        <_e item={F}onClose={()=>J(null)}/>
+                      </S>}
+                  </B>}
 
                 
-                {N!==null&&<w.View style={[E.absoluteFill,{backgroundColor:C.grayBackground,opacity:M,transform:[{translateY:M.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
-                    <B moduleName="Settings Panel">
-                      <_e/>
-                    </B>
-                  </w.View>}
+                {D!==null&&<o.View style={[R.absoluteFill,{backgroundColor:C.grayBackground,opacity:E,transform:[{translateY:E.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <S moduleName="Settings Panel">
+                      <Xe/>
+                    </S>
+                  </o.View>}
 
                 
-                {D&&<w.View style={[E.absoluteFill,{backgroundColor:C.primaryLight,opacity:v,transform:[{translateY:v.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
-                    <B moduleName="About & Diagnostics">
-                      <$e onClose={()=>_(!1)}/>
-                    </B>
-                  </w.View>}
-              </S>
+                {M&&<o.View style={[R.absoluteFill,{backgroundColor:C.primaryLight,opacity:T,transform:[{translateY:T.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <S moduleName="About & Diagnostics">
+                      <Ze onClose={()=>K(!1)}/>
+                    </S>
+                  </o.View>}
+
+                
+                {v&&<o.View style={[R.absoluteFill,{backgroundColor:C.primaryLight,opacity:x,transform:[{translateY:x.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <S moduleName="Support & Community">
+                      <So onClose={()=>Q(!1)}/>
+                    </S>
+                  </o.View>}
+              </B>
 
               
-              <Qe/>
+              <Vo/>
 
               
-              <Je/>
+              <Bo/>
 
               
-              <Ke/>
-            </S>
-          </S>
-        </Be>
-      {J&&<Xe onStateChange={K}/>}
-    </X>
-    </>},So=Q.memo(function(){const V=I(new w.Value(.35)).current;return L(()=>{const R=w.loop(w.sequence([w.timing(V,{toValue:.85,duration:750,useNativeDriver:!1}),w.timing(V,{toValue:.35,duration:750,useNativeDriver:!1})]));return R.start(),()=>R.stop()},[V]),<S style={o.container}>
+              <Co/>
+            </B>
+          </B>
+        </Ne>
+      {oe&&<No onStateChange={re}/>}
+    </Se>
+    </>},Mo=te.memo(function(){const V=P(new o.Value(.35)).current;return A(()=>{const N=o.loop(o.sequence([o.timing(V,{toValue:.85,duration:750,useNativeDriver:!1}),o.timing(V,{toValue:.35,duration:750,useNativeDriver:!1})]));return N.start(),()=>N.stop()},[V]),<B style={r.container}>
       
-      <S style={o.toolbarSkeleton}>
-        <w.View style={[o.searchBarSkeleton,{opacity:V}]}/>
-        <S style={o.actionButtonsRow}>
-          <w.View style={[o.iconButtonSkeleton,{opacity:V}]}/>
-          <w.View style={[o.iconButtonSkeleton,{opacity:V}]}/>
-        </S>
-      </S>
+      <B style={r.toolbarSkeleton}>
+        <o.View style={[r.searchBarSkeleton,{opacity:V}]}/>
+        <B style={r.actionButtonsRow}>
+          <o.View style={[r.iconButtonSkeleton,{opacity:V}]}/>
+          <o.View style={[r.iconButtonSkeleton,{opacity:V}]}/>
+        </B>
+      </B>
 
       
-      <S style={o.chipStripSkeleton}>
-        <w.View style={[o.chipSkeleton,{width:48,opacity:V}]}/>
-        <w.View style={[o.chipSkeleton,{width:68,opacity:V}]}/>
-        <w.View style={[o.chipSkeleton,{width:76,opacity:V}]}/>
-        <w.View style={[o.chipSkeleton,{width:58,opacity:V}]}/>
-      </S>
+      <B style={r.chipStripSkeleton}>
+        <o.View style={[r.chipSkeleton,{width:48,opacity:V}]}/>
+        <o.View style={[r.chipSkeleton,{width:68,opacity:V}]}/>
+        <o.View style={[r.chipSkeleton,{width:76,opacity:V}]}/>
+        <o.View style={[r.chipSkeleton,{width:58,opacity:V}]}/>
+      </B>
 
       
-      {[0,1,2,3].map(R=><w.View key={`skeleton_card_${R}`}style={[o.cardSkeleton,{opacity:V}]}>
-          <S style={o.cardTopRow}>
-            <S style={o.badgeGroup}>
-              <S style={o.statusBadgeSkeleton}/>
-              <S style={o.methodBadgeSkeleton}/>
-            </S>
-            <S style={o.timeSkeleton}/>
-          </S>
-          <S style={o.urlLineLong}/>
-          <S style={o.urlLineShort}/>
-          <S style={o.cardBottomRow}>
-            <S style={o.metaPillSkeleton}/>
-            <S style={o.metaPillSkeleton}/>
-          </S>
-        </w.View>)}
-    </S>}),o=E.create({container:{flex:1,paddingHorizontal:12,paddingTop:8},toolbarSkeleton:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},searchBarSkeleton:{flex:1,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},cardSkeleton:{backgroundColor:C.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:C.dividerColor},cardTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8},badgeGroup:{flexDirection:"row",alignItems:"center",gap:6},statusBadgeSkeleton:{width:38,height:18,borderRadius:4,backgroundColor:C.graySurface},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:C.graySurface},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:C.graySurface},urlLineLong:{height:13,borderRadius:4,backgroundColor:C.graySurface,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:C.graySurface,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:C.graySurface}});export default eo;
+      {[0,1,2,3].map(N=><o.View key={`skeleton_card_${N}`}style={[r.cardSkeleton,{opacity:V}]}>
+          <B style={r.cardTopRow}>
+            <B style={r.badgeGroup}>
+              <B style={r.statusBadgeSkeleton}/>
+              <B style={r.methodBadgeSkeleton}/>
+            </B>
+            <B style={r.timeSkeleton}/>
+          </B>
+          <B style={r.urlLineLong}/>
+          <B style={r.urlLineShort}/>
+          <B style={r.cardBottomRow}>
+            <B style={r.metaPillSkeleton}/>
+            <B style={r.metaPillSkeleton}/>
+          </B>
+        </o.View>)}
+    </B>}),r=R.create({container:{flex:1,paddingHorizontal:12,paddingTop:8},toolbarSkeleton:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},searchBarSkeleton:{flex:1,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},cardSkeleton:{backgroundColor:C.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:C.dividerColor},cardTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8},badgeGroup:{flexDirection:"row",alignItems:"center",gap:6},statusBadgeSkeleton:{width:38,height:18,borderRadius:4,backgroundColor:C.graySurface},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:C.graySurface},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:C.graySurface},urlLineLong:{height:13,borderRadius:4,backgroundColor:C.graySurface,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:C.graySurface,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:C.graySurface}});export default Do;

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

@@ -1,55 +1,55 @@
-import{useState as W,useEffect as He,useMemo as te,useCallback as oe}from"react";import{Alert as ie,Dimensions as je,FlatList as Ee,Image as Ce,RefreshControl as _e,Share as Te,StyleSheet as Ne,Text as S,TouchableOpacity as I,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import Se from"../TouchableScale";import Je from"../EmptyState";import{CheckIcon as Ie,CopyIcon as E,FilmIcon as $,GifIcon as _,GridIcon as Qe,ImageIcon as F,ListIcon as Xe,PlayIcon as Be,ScreencastIcon as Ye,ShareIcon as Re,TrashIcon as N}from"../NetworkIcons";import{MediaPreviewModal as Ze}from"./MediaPreviewModal";import{ScreenCapture as P}from"../../capture";import{copyImageOrMediaToClipboard as Ke,copyToClipboard as et,formatBytes as U}from"../../helpers";import{showToast as A}from"../../helpers/toast";import{useTranslation as tt}from"../../i18n";import{useInspector as ot}from"./InspectorContext";export const MediaGalleryTab=()=>{const{t:r}=tt(),{refreshMediaCount:V,switchActiveTab:H}=ot(),[x,q]=W([]),[Ge,J]=W(!1),[O,Me]=W("all"),[Q,j]=W(null),[v,L]=W(new Set),[R,X]=W("grid"),M=oe(async()=>{try{const t=await P.getMediaList();q(t),V?.().catch(()=>{})}catch{q([])}},[V]);He(()=>{M()},[M]);const De=async()=>{J(!0),await M(),J(!1)},G=te(()=>O==="all"?x:x.filter(t=>t.type===O),[x,O]),Y=te(()=>x.reduce((t,i)=>t+(i.sizeBytes||0),0),[x]),Z=oe(t=>{L(i=>{const l=new Set(i);return l.has(t)?l.delete(t):l.add(t),l})},[]),K=async t=>{await P.deleteMedia(t.uri),L(l=>{const T=new Set(l);return T.delete(t.id),T}),await M(),await V?.()===0&&H("apis"),A(r("mediaGallery.deleted"))},ee=t=>{t?.uri&&Ke(t.uri,t.type==="image"?"Image":"Media")},Ve=()=>{const t=x.filter(l=>v.has(l.id));if(t.length===0)return;const i=t.map(l=>l.uri).join(`
-`);et(i,`${t.length} Media URIs`),A(`${t.length} file URIs copied to clipboard`)},We=async t=>{try{const i=t.uri.startsWith("file://")||t.uri.startsWith("content://")||t.uri.startsWith("http")?t.uri:`file://${t.uri}`;await Te.share({url:i,title:t.filename,message:t.filename})}catch{A(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Ae=async()=>{const t=x.filter(i=>v.has(i.id));if(t.length!==0)try{const i=t[0],l=i.uri.startsWith("file://")||i.uri.startsWith("content://")||i.uri.startsWith("http")?i.uri:`file://${i.uri}`;await Te.share({url:l,title:i.filename,message:t.length===1?i.filename:`${t.length} items: ${t.map(T=>T.filename).join(", ")}`})}catch{A(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},$e=()=>{const t=v.size;t!==0&&ie.alert(r("mediaGallery.deleteSelectedTitle"),r("mediaGallery.deleteSelectedMessage",{count:t}),[{text:r("common.cancel"),style:"cancel"},{text:r("mediaGallery.delete"),style:"destructive",onPress:async()=>{const i=x.filter(T=>v.has(T.id));for(const T of i)await P.deleteMedia(T.uri);L(new Set),await M(),await V?.()===0&&H("apis"),A(r("mediaGallery.deletedCount",{count:i.length}))}}])},Fe=()=>{ie.alert(r("mediaGallery.purgeTitle"),r("mediaGallery.purgeMessage",{count:x.length,size:U(Y)}),[{text:r("common.cancel"),style:"cancel"},{text:r("common.clearAll"),style:"destructive",onPress:async()=>{await P.clearAllMedia(),L(new Set),await M(),await V?.(),H("apis"),A(r("mediaGallery.allPurged"))}}])},Pe=async t=>{await P.convertToGif(t.uri,{fps:12,width:480})&&(await M(),V?.().catch(()=>{}))},Oe=(t,i)=>{const l=i?e.sky400:e.slate400,T=12;switch(t){case"all":return<Ye size={T}color={l}/>;case"image":return<F size={T}color={l}/>;case"video":return<$ size={T}color={l}/>;case"gif":return<_ size={T}color={l}/>}},Le=({item:t})=>{const i=t.type==="video",l=t.type==="gif",T=i?t.thumbnailUri:t.uri,D=v.has(t.id);return<Se onPress={()=>j(t)}style={[o.card,D&&o.cardSelected]}>
+import{useState as V,useEffect as He,useMemo as re,useCallback as le}from"react";import{Dimensions as je,FlatList as Ee,Image as Ce,RefreshControl as _e,Share as Te,StyleSheet as Ne,Text as T,TouchableOpacity as I,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import Se from"../TouchableScale";import Je from"../EmptyState";import{CheckIcon as Ie,CopyIcon as J,FilmIcon as O,GifIcon as Q,GridIcon as Qe,ImageIcon as P,ListIcon as Xe,PlayIcon as Be,ScreencastIcon as Ye,ShareIcon as Re,TrashIcon as X}from"../NetworkIcons";import{MediaPreviewModal as Ze}from"./MediaPreviewModal";import{ScreenCapture as L}from"../../capture";import{copyImageOrMediaToClipboard as Ke,copyToClipboard as et,formatBytes as U}from"../../helpers";import{showToast as $}from"../../helpers/toast";import{useTranslation as tt}from"../../i18n";import{useInspector as ot}from"./InspectorContext";import{ConfirmationModal as Ct}from"./ConfirmationModal";export const MediaGalleryTab=()=>{const{t:r}=tt(),{refreshMediaCount:W,switchActiveTab:E}=ot(),[S,Y]=V([]),[Me,Z]=V(!1),[H,De]=V("all"),[K,_]=V(null),[v,j]=V(new Set),[R,ee]=V("grid"),[A,F]=V({visible:!1,title:"",message:"",onConfirm:()=>{}}),D=le(async()=>{try{const t=await L.getMediaList();Y(t),W?.().catch(()=>{})}catch{Y([])}},[W]);He(()=>{D()},[D]);const Ge=async()=>{Z(!0),await D(),Z(!1)},M=re(()=>H==="all"?S:S.filter(t=>t.type===H),[S,H]),N=re(()=>S.reduce((t,i)=>t+(i.sizeBytes||0),0),[S]),te=le(t=>{j(i=>{const l=new Set(i);return l.has(t)?l.delete(t):l.add(t),l})},[]),oe=async t=>{await L.deleteMedia(t.uri),j(l=>{const a=new Set(l);return a.delete(t.id),a}),await D(),await W?.()===0&&E("apis"),$(r("mediaGallery.deleted"))},ie=t=>{t?.uri&&Ke(t.uri,t.type==="image"?"Image":"Media")},Ve=()=>{const t=S.filter(l=>v.has(l.id));if(t.length===0)return;const i=t.map(l=>l.uri).join(`
+`);et(i,`${t.length} Media URIs`),$(`${t.length} file URIs copied to clipboard`)},We=async t=>{try{const i=t.uri.startsWith("file://")||t.uri.startsWith("content://")||t.uri.startsWith("http")?t.uri:`file://${t.uri}`;await Te.share({url:i,title:t.filename,message:t.filename})}catch{$(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Ae=async()=>{const t=S.filter(i=>v.has(i.id));if(t.length!==0)try{const i=t[0],l=i.uri.startsWith("file://")||i.uri.startsWith("content://")||i.uri.startsWith("http")?i.uri:`file://${i.uri}`;await Te.share({url:l,title:i.filename,message:t.length===1?i.filename:`${t.length} items: ${t.map(a=>a.filename).join(", ")}`})}catch{$(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},$e=()=>{const t=v.size;t!==0&&F({visible:!0,title:r("mediaGallery.deleteSelectedTitle","Delete Selected Media"),message:r("mediaGallery.deleteSelectedMessage",{count:t,defaultValue:`Are you sure you want to permanently delete ${t} media items?`}),confirmText:r("mediaGallery.delete","Delete"),cancelText:r("common.cancel","Cancel"),onConfirm:async()=>{F(a=>({...a,visible:!1}));const i=S.filter(a=>v.has(a.id));for(const a of i)await L.deleteMedia(a.uri);j(new Set),await D(),await W?.()===0&&E("apis"),$(r("mediaGallery.deletedCount",{count:i.length}))}})},Fe=()=>{F({visible:!0,title:r("mediaGallery.purgeTitle","Purge Gallery"),message:r("mediaGallery.purgeMessage",{count:S.length,size:U(N),defaultValue:`Are you sure you want to delete all ${S.length} media files (${U(N)})? This cannot be undone.`}),confirmText:r("common.clearAll","Clear All"),cancelText:r("common.cancel","Cancel"),onConfirm:async()=>{F(t=>({...t,visible:!1})),await L.clearAllMedia(),j(new Set),await D(),await W?.(),E("apis"),$(r("mediaGallery.allPurged"))}})},Oe=async t=>{await L.convertToGif(t.uri,{fps:12,width:480})&&(await D(),W?.().catch(()=>{}))},Pe=(t,i)=>{const l=i?e.sky400:e.slate400,a=12;switch(t){case"all":return<Ye size={a}color={l}/>;case"image":return<P size={a}color={l}/>;case"video":return<O size={a}color={l}/>;case"gif":return<Q size={a}color={l}/>}},Le=({item:t})=>{const i=t.type==="video",l=t.type==="gif",a=i?t.thumbnailUri:t.uri,G=v.has(t.id);return<Se onPress={()=>_(t)}style={[o.card,G&&o.cardSelected]}>
         <C style={o.thumbnailContainer}>
-          {T?<Ce source={{uri:T}}style={o.thumbnail}resizeMode="cover"/>:<C style={o.thumbnailFallback}>
-              {i?<$ size={26}color={e.sky400}/>:<F size={26}color={e.slate400}/>}
+          {a?<Ce source={{uri:a}}style={o.thumbnail}resizeMode="cover"/>:<C style={o.thumbnailFallback}>
+              {i?<O size={26}color={e.sky400}/>:<P size={26}color={e.slate400}/>}
             </C>}
 
           
-          <I onPress={()=>Z(t.id)}style={[o.checkbox,D&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            {D&&<Ie size={12}color={e.white}/>}
+          <I onPress={()=>te(t.id)}style={[o.checkbox,G&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            {G&&<Ie size={12}color={e.white}/>}
           </I>
 
           {i&&<C style={o.miniPlayCircle}>
               <Be size={14}color={e.white}/>
             </C>}
           <C style={o.typeBadge}>
-            {i?<$ size={11}color={e.sky400}/>:l?<_ size={11}color={e.warningAmber}/>:<F size={11}color={e.emerald500}/>}
-            <S style={o.typeBadgeText}>
+            {i?<O size={11}color={e.sky400}/>:l?<Q size={11}color={e.warningAmber}/>:<P size={11}color={e.emerald500}/>}
+            <T style={o.typeBadgeText}>
               {t.format.toUpperCase()}
-            </S>
+            </T>
           </C>
         </C>
 
         <C style={o.cardInfo}>
-          <S style={o.cardTitle}numberOfLines={1}>
+          <T style={o.cardTitle}numberOfLines={1}>
             {t.filename}
-          </S>
+          </T>
           <C style={o.cardMetaRow}>
             <C style={{flexDirection:"row",alignItems:"center",gap:4,flex:1,minWidth:0}}>
-              <S style={o.cardMeta}numberOfLines={1}>
+              <T style={o.cardMeta}numberOfLines={1}>
                 {U(t.sizeBytes)}
-              </S>
-              <S style={o.cardMetaDot}>•</S>
-              <S style={o.cardMeta}numberOfLines={1}>
+              </T>
+              <T style={o.cardMetaDot}>•</T>
+              <T style={o.cardMeta}numberOfLines={1}>
                 {new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}
-              </S>
+              </T>
             </C>
-            <I onPress={()=>ee(t)}style={o.gridCopyBtn}hitSlop={{top:6,bottom:6,left:6,right:6}}>
-              <E size={11}color={e.slate400}/>
+            <I onPress={()=>ie(t)}style={o.gridCopyBtn}hitSlop={{top:6,bottom:6,left:6,right:6}}>
+              <J size={11}color={e.slate400}/>
             </I>
           </C>
         </C>
-      </Se>},Ue=({item:t})=>{const i=t.type==="video",l=t.type==="gif",T=i?t.thumbnailUri:t.uri,D=v.has(t.id);return<Se onPress={()=>j(t)}style={[o.listRow,D&&o.listRowSelected]}>
+      </Se>},Ue=({item:t})=>{const i=t.type==="video",l=t.type==="gif",a=i?t.thumbnailUri:t.uri,G=v.has(t.id);return<Se onPress={()=>_(t)}style={[o.listRow,G&&o.listRowSelected]}>
         
-        <I onPress={()=>Z(t.id)}style={[o.listCheckbox,D&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-          {D&&<Ie size={12}color={e.white}/>}
+        <I onPress={()=>te(t.id)}style={[o.listCheckbox,G&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+          {G&&<Ie size={12}color={e.white}/>}
         </I>
 
         
         <C style={o.listThumbContainer}>
-          {T?<Ce source={{uri:T}}style={o.listThumb}resizeMode="cover"/>:<C style={o.listThumbFallback}>
-              {i?<$ size={18}color={e.sky400}/>:<F size={18}color={e.slate400}/>}
+          {a?<Ce source={{uri:a}}style={o.listThumb}resizeMode="cover"/>:<C style={o.listThumbFallback}>
+              {i?<O size={18}color={e.sky400}/>:<P size={18}color={e.slate400}/>}
             </C>}
           {i&&<C style={o.listMiniPlay}>
               <Be size={10}color={e.white}/>
@@ -58,108 +58,110 @@ import{useState as W,useEffect as He,useMemo as te,useCallback as oe}from"react"
 
         
         <C style={o.listInfo}>
-          <S style={o.listTitle}numberOfLines={1}>
+          <T style={o.listTitle}numberOfLines={1}>
             {t.filename}
-          </S>
+          </T>
           <C style={o.listMetaRow}>
             <C style={o.listBadge}>
-              {i?<$ size={10}color={e.sky400}/>:l?<_ size={10}color={e.warningAmber}/>:<F size={10}color={e.emerald500}/>}
-              <S style={o.listBadgeText}>
+              {i?<O size={10}color={e.sky400}/>:l?<Q size={10}color={e.warningAmber}/>:<P size={10}color={e.emerald500}/>}
+              <T style={o.listBadgeText}>
                 {t.format.toUpperCase()}
-              </S>
+              </T>
             </C>
-            <S style={o.cardMeta}>
+            <T style={o.cardMeta}>
               {U(t.sizeBytes)}
-            </S>
-            <S style={o.cardMetaDot}>•</S>
-            <S style={o.cardMeta}>
+            </T>
+            <T style={o.cardMetaDot}>•</T>
+            <T style={o.cardMeta}>
               {new Date(t.timestamp).toLocaleDateString([],{month:"short",day:"numeric"})}{" "}
               {new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}
-            </S>
+            </T>
           </C>
         </C>
 
         
         <C style={o.listActionsRow}>
-          <I onPress={()=>ee(t)}style={o.listCopyBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            <E size={13}color={e.slate200}/>
+          <I onPress={()=>ie(t)}style={o.listCopyBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            <J size={13}color={e.slate200}/>
           </I>
 
           <I onPress={()=>We(t)}style={o.listShareBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
             <Re size={13}color={e.sky400}/>
           </I>
 
-          <I onPress={()=>K(t)}style={o.listDeleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            <N size={13}color={e.red500}/>
+          <I onPress={()=>oe(t)}style={o.listDeleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            <X size={13}color={e.red500}/>
           </I>
         </C>
       </Se>};return<C style={o.container}>
       
       <C style={o.filterBar}>
         <C style={o.chipGroup}>
-          {["all","image","video","gif"].map(t=>{const i=O===t,l=t==="all"?r("mediaGallery.all",{count:x.length}):r(t==="image"?"mediaGallery.photos":t==="video"?"mediaGallery.videos":"mediaGallery.gifs");return<I key={t}onPress={()=>Me(t)}style={[o.chip,i&&o.chipActive]}>
-                {Oe(t,i)}
-                <S style={[o.chipText,i&&o.chipTextActive]}>
+          {["all","image","video","gif"].map(t=>{const i=H===t,l=t==="all"?r("mediaGallery.all",{count:S.length}):r(t==="image"?"mediaGallery.photos":t==="video"?"mediaGallery.videos":"mediaGallery.gifs");return<I key={t}onPress={()=>De(t)}style={[o.chip,i&&o.chipActive]}>
+                {Pe(t,i)}
+                <T style={[o.chipText,i&&o.chipTextActive]}>
                   {l}
-                </S>
+                </T>
               </I>})}
         </C>
 
         
         <C style={o.viewToggleContainer}>
-          <I onPress={()=>X("grid")}style={[o.viewToggleBtn,R==="grid"&&o.viewToggleBtnActive]}>
+          <I onPress={()=>ee("grid")}style={[o.viewToggleBtn,R==="grid"&&o.viewToggleBtnActive]}>
             <Qe size={13}color={R==="grid"?e.white:e.slate400}/>
           </I>
-          <I onPress={()=>X("list")}style={[o.viewToggleBtn,R==="list"&&o.viewToggleBtnActive]}>
+          <I onPress={()=>ee("list")}style={[o.viewToggleBtn,R==="list"&&o.viewToggleBtnActive]}>
             <Xe size={13}color={R==="list"?e.white:e.slate400}/>
           </I>
         </C>
       </C>
 
       
-      {x.length>0&&<C style={o.subBar}>
+      {S.length>0&&<C style={o.subBar}>
           <C style={o.resultCountWrapper}>
-            <S style={[o.resultCountText,v.size>0&&o.resultCountTextSelected]}>
-              {v.size>0?r("mediaGallery.selectedOfResults",{selected:v.size,total:G.length,defaultValue:`Selected ${v.size} of ${G.length} results`}):G.length!==x.length?r("mediaGallery.showingFilteredResults",{count:G.length,total:x.length,defaultValue:`Showing ${G.length} of ${x.length} results`}):r("mediaGallery.showingResults",{count:G.length,defaultValue:`Showing ${G.length} results`})}
-            </S>
+            <T style={[o.resultCountText,v.size>0&&o.resultCountTextSelected]}>
+              {v.size>0?r("mediaGallery.selectedOfResults",{selected:v.size,total:M.length,defaultValue:`Selected ${v.size} of ${M.length} results`}):M.length!==S.length?r("mediaGallery.showingFilteredResults",{count:M.length,total:S.length,defaultValue:`Showing ${M.length} of ${S.length} results`}):r("mediaGallery.showingResults",{count:M.length,defaultValue:`Showing ${M.length} results`})}
+            </T>
           </C>
 
           <C style={o.actionsGroup}>
             {v.size>0&&<>
                 <I onPress={Ve}style={o.copySelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-                  <E size={12}color={e.slate200}/>
-                  <S style={o.copySelectedBtnText}>
+                  <J size={12}color={e.slate200}/>
+                  <T style={o.copySelectedBtnText}>
                     {r("mediaGallery.copyUri","Copy URI")}
-                  </S>
+                  </T>
                 </I>
 
                 <I onPress={Ae}style={o.shareSelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
                   <Re size={12}color={e.sky400}/>
-                  <S style={o.shareSelectedBtnText}>
+                  <T style={o.shareSelectedBtnText}>
                     {r("mediaGallery.share","Share")}
-                  </S>
+                  </T>
                 </I>
 
                 <I onPress={$e}style={o.deleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-                  <N size={13}color={e.red500}/>
-                  <S style={o.deleteBtnText}>
+                  <X size={13}color={e.red500}/>
+                  <T style={o.deleteBtnText}>
                     {r("mediaGallery.deleteSelected",{count:v.size})}
-                  </S>
+                  </T>
                 </I>
               </>}
 
             <I onPress={Fe}style={o.clearBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-              <N size={13}color={e.red500}/>
-              <S style={o.clearBtnText}>
-                {r("mediaGallery.purge",{size:U(Y)})}
-              </S>
+              <X size={13}color={e.red500}/>
+              <T style={o.clearBtnText}>
+                {r("mediaGallery.purge",{size:U(N)})}
+              </T>
             </I>
           </C>
         </C>}
 
       
-      <Ee key={R}data={G}keyExtractor={t=>t.id}renderItem={R==="grid"?Le:Ue}numColumns={R==="grid"?2:1}columnWrapperStyle={R==="grid"?o.columnWrapper:void 0}contentContainerStyle={o.listContent}refreshControl={<_e refreshing={Ge}onRefresh={De}tintColor={e.sky400}/>}ListEmptyComponent={<Je customTitle={r("mediaGallery.noMediaTitle")}customSub={r("mediaGallery.noMediaDesc")}showReload={!1}/>}/>
+      <Ee key={R}data={M}keyExtractor={t=>t.id}renderItem={R==="grid"?Le:Ue}numColumns={R==="grid"?2:1}columnWrapperStyle={R==="grid"?o.columnWrapper:void 0}contentContainerStyle={o.listContent}refreshControl={<_e refreshing={Me}onRefresh={Ge}tintColor={e.sky400}/>}ListEmptyComponent={<Je customTitle={r("mediaGallery.noMediaTitle")}customSub={r("mediaGallery.noMediaDesc")}showReload={!1}/>}/>
 
       
-      <Ze item={Q}visible={!!Q}onClose={()=>j(null)}onDelete={K}onConvertToGif={Pe}/>
-    </C>};const{width:it}=je.get("window"),rt=(it-36)/2,o=Ne.create({container:{flex:1,backgroundColor:e.slate850},filterBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:9,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},chipGroup:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},chip:{flexDirection:"row",alignItems:"center",gap:4.5,paddingHorizontal:8,paddingVertical:4.5,borderRadius:6,backgroundColor:e.whiteAlpha06,borderWidth:1,borderColor:e.whiteAlpha10},chipActive:{backgroundColor:`${e.sky400}2E`,borderColor:e.sky400},chipText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},chipTextActive:{fontFamily:B.interBold,color:e.sky400},subBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:7,backgroundColor:`${e.slate900}99`,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},resultCountWrapper:{flexDirection:"row",alignItems:"center",flexShrink:1},resultCountText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},resultCountTextSelected:{fontFamily:B.interSemiBold,color:e.sky400},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},viewToggleContainer:{flexDirection:"row",alignItems:"center",backgroundColor:e.whiteAlpha06,borderRadius:6,padding:2,borderWidth:1,borderColor:e.whiteAlpha10},viewToggleBtn:{paddingHorizontal:7,paddingVertical:4,borderRadius:4,alignItems:"center",justifyContent:"center"},viewToggleBtnActive:{backgroundColor:`${e.violet600}80`},deleteBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}26`,borderWidth:1,borderColor:`${e.red500}80`},deleteBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.red500},clearBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}1F`,borderWidth:1,borderColor:`${e.red500}4D`},clearBtnText:{fontFamily:B.interMedium,fontSize:10.5,color:e.red500},listContent:{padding:12,gap:10},columnWrapper:{gap:12},card:{width:rt,backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,overflow:"hidden"},cardSelected:{borderColor:e.violet600,borderWidth:1.5},thumbnailContainer:{width:"100%",height:110,backgroundColor:e.slate850,position:"relative"},thumbnail:{width:"100%",height:"100%"},thumbnailFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},checkbox:{position:"absolute",top:6,left:6,width:22,height:22,borderRadius:5,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center",zIndex:10},checkboxSelected:{backgroundColor:e.violet600,borderColor:e.violet600},miniPlayCircle:{position:"absolute",top:"50%",left:"50%",width:32,height:32,marginTop:-16,marginLeft:-16,borderRadius:16,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:2,shadowColor:e.black,shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:4},typeBadge:{position:"absolute",top:6,right:6,flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},typeBadgeText:{fontFamily:B.interBold,fontSize:9,color:e.slate200},cardInfo:{padding:8,gap:3},cardTitle:{fontFamily:B.interMedium,fontSize:11.5,color:e.white},cardMetaRow:{flexDirection:"row",alignItems:"center",gap:4},cardMeta:{fontFamily:B.interRegular,fontSize:10,color:e.slate400},cardMetaDot:{fontSize:10,color:e.whiteAlpha30},listRow:{flexDirection:"row",alignItems:"center",backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,padding:8,gap:10},listRowSelected:{borderColor:e.violet600,borderWidth:1.5,backgroundColor:`${e.violet600}14`},listCheckbox:{width:20,height:20,borderRadius:4,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center"},listThumbContainer:{width:46,height:46,borderRadius:6,backgroundColor:e.slate850,overflow:"hidden",position:"relative"},listThumb:{width:"100%",height:"100%"},listThumbFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},listMiniPlay:{position:"absolute",top:"50%",left:"50%",width:20,height:20,marginTop:-10,marginLeft:-10,borderRadius:10,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:1},listInfo:{flex:1,gap:4,minWidth:0},listTitle:{fontFamily:B.interMedium,fontSize:12,color:e.white},listMetaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},listBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:4,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},listBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.slate200},gridCopyBtn:{padding:3,borderRadius:4,backgroundColor:e.whiteAlpha08},listActionsRow:{flexDirection:"row",alignItems:"center",gap:6},listCopyBtn:{padding:6,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha15},listShareBtn:{padding:6,borderRadius:6,backgroundColor:`${e.sky400}18`,borderWidth:1,borderColor:`${e.sky400}40`},listDeleteBtn:{padding:6,borderRadius:6,backgroundColor:`${e.red500}14`,borderWidth:1,borderColor:`${e.red500}33`},copySelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha20},copySelectedBtnText:{fontFamily:B.interSemiBold,fontSize:10.5,color:e.slate200},shareSelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.sky400}20`,borderWidth:1,borderColor:`${e.sky400}60`},shareSelectedBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.sky400}});
+      <Ze item={K}visible={!!K}onClose={()=>_(null)}onDelete={oe}onConvertToGif={Oe}/>
+
+      <Ct visible={A.visible}title={A.title}message={A.message}confirmText={A.confirmText}cancelText={A.cancelText}isDestructive={!0}icon="trash"onConfirm={A.onConfirm}onCancel={()=>F(t=>({...t,visible:!1}))}/>
+    </C>};const{width:Tt}=je.get("window"),St=(Tt-36)/2,o=Ne.create({container:{flex:1,backgroundColor:e.slate850},filterBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:9,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},chipGroup:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},chip:{flexDirection:"row",alignItems:"center",gap:4.5,paddingHorizontal:8,paddingVertical:4.5,borderRadius:6,backgroundColor:e.whiteAlpha06,borderWidth:1,borderColor:e.whiteAlpha10},chipActive:{backgroundColor:`${e.sky400}2E`,borderColor:e.sky400},chipText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},chipTextActive:{fontFamily:B.interBold,color:e.sky400},subBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:7,backgroundColor:`${e.slate900}99`,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},resultCountWrapper:{flexDirection:"row",alignItems:"center",flexShrink:1},resultCountText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},resultCountTextSelected:{fontFamily:B.interSemiBold,color:e.sky400},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},viewToggleContainer:{flexDirection:"row",alignItems:"center",backgroundColor:e.whiteAlpha06,borderRadius:6,padding:2,borderWidth:1,borderColor:e.whiteAlpha10},viewToggleBtn:{paddingHorizontal:7,paddingVertical:4,borderRadius:4,alignItems:"center",justifyContent:"center"},viewToggleBtnActive:{backgroundColor:`${e.violet600}80`},deleteBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}26`,borderWidth:1,borderColor:`${e.red500}80`},deleteBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.red500},clearBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}1F`,borderWidth:1,borderColor:`${e.red500}4D`},clearBtnText:{fontFamily:B.interMedium,fontSize:10.5,color:e.red500},listContent:{padding:12,gap:10},columnWrapper:{gap:12},card:{width:St,backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,overflow:"hidden"},cardSelected:{borderColor:e.violet600,borderWidth:1.5},thumbnailContainer:{width:"100%",height:110,backgroundColor:e.slate850,position:"relative"},thumbnail:{width:"100%",height:"100%"},thumbnailFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},checkbox:{position:"absolute",top:6,left:6,width:22,height:22,borderRadius:5,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center",zIndex:10},checkboxSelected:{backgroundColor:e.violet600,borderColor:e.violet600},miniPlayCircle:{position:"absolute",top:"50%",left:"50%",width:32,height:32,marginTop:-16,marginLeft:-16,borderRadius:16,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:2,shadowColor:e.black,shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:4},typeBadge:{position:"absolute",top:6,right:6,flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},typeBadgeText:{fontFamily:B.interBold,fontSize:9,color:e.slate200},cardInfo:{padding:8,gap:3},cardTitle:{fontFamily:B.interMedium,fontSize:11.5,color:e.white},cardMetaRow:{flexDirection:"row",alignItems:"center",gap:4},cardMeta:{fontFamily:B.interRegular,fontSize:10,color:e.slate400},cardMetaDot:{fontSize:10,color:e.whiteAlpha30},listRow:{flexDirection:"row",alignItems:"center",backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,padding:8,gap:10},listRowSelected:{borderColor:e.violet600,borderWidth:1.5,backgroundColor:`${e.violet600}14`},listCheckbox:{width:20,height:20,borderRadius:4,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center"},listThumbContainer:{width:46,height:46,borderRadius:6,backgroundColor:e.slate850,overflow:"hidden",position:"relative"},listThumb:{width:"100%",height:"100%"},listThumbFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},listMiniPlay:{position:"absolute",top:"50%",left:"50%",width:20,height:20,marginTop:-10,marginLeft:-10,borderRadius:10,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:1},listInfo:{flex:1,gap:4,minWidth:0},listTitle:{fontFamily:B.interMedium,fontSize:12,color:e.white},listMetaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},listBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:4,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},listBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.slate200},gridCopyBtn:{padding:3,borderRadius:4,backgroundColor:e.whiteAlpha08},listActionsRow:{flexDirection:"row",alignItems:"center",gap:6},listCopyBtn:{padding:6,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha15},listShareBtn:{padding:6,borderRadius:6,backgroundColor:`${e.sky400}18`,borderWidth:1,borderColor:`${e.sky400}40`},listDeleteBtn:{padding:6,borderRadius:6,backgroundColor:`${e.red500}14`,borderWidth:1,borderColor:`${e.red500}33`},copySelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha20},copySelectedBtnText:{fontFamily:B.interSemiBold,fontSize:10.5,color:e.slate200},shareSelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.sky400}20`,borderWidth:1,borderColor:`${e.sky400}60`},shareSelectedBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.sky400}});