react-native-debug-toolkit 2.0.0 → 2.1.0

package/src/components/NavigationLogTab.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, FlatList, StyleSheet } from 'react-native';
-import { Colors } from '../utils/constants';
+import { Colors } from '../utils/colors';
 import { CopyButton } from './shared/CopyButton';
 import type { DebugFeatureRenderProps, NavigationLogEntry } from '../types';
 

package/src/components/NetworkLogTab.tsx

@@ -1,19 +1,17 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState } from 'react';
 import {
   View,
   Text,
-  FlatList,
-  TouchableOpacity,
   StyleSheet,
   TextInput,
-  Animated,
   ScrollView,
 } from 'react-native';
-import { Colors, getMethodColor } from '../utils/constants';
+import { Colors, getMethodColor } from '../utils/colors';
 import { CollapsibleSection } from './shared/CollapsibleSection';
 import { JsonView } from './shared/JsonView';
 import { CopyButton } from './shared/CopyButton';
 import { fmt } from '../utils/copyToComputer';
+import { LogListScreen } from './shared/LogListScreen';
 import type { DebugFeatureRenderProps, NetworkLogEntry } from '../types';
 
 const formatSize = (data: unknown): string => {
@@ -28,154 +26,21 @@ const formatSize = (data: unknown): string => {
   }
 };
 
-// --- Detail view (in-panel push) ---
-const NetworkLogDetail: React.FC<{ log: NetworkLogEntry; onBack: () => void }> = ({
-  log,
-  onBack,
-}) => {
-  const statusColor =
-    log.error || (log.response && log.response.status >= 400) ? Colors.error : Colors.success;
-
-  const curl = () => {
-    let c = `curl -X ${log.request.method} '${log.request.url}'`;
-    if (log.request.headers) {
-      Object.entries(log.request.headers).forEach(([k, v]) => (c += ` \\\n  -H '${k}: ${v}'`));
-    }
-    if (log.request.body) {
-      c += ` \\\n  -d '${typeof log.request.body === 'string' ? log.request.body : JSON.stringify(log.request.body)}'`;
-    }
-    return c;
-  };
-
-  return (
-    <View style={s.detailWrap}>
-      <View style={s.detailHeader}>
-        <TouchableOpacity onPress={onBack} style={s.backBtn} activeOpacity={0.6}>
-          <Text style={s.backIcon}>‹</Text>
-          <Text style={s.backText}>Back</Text>
-        </TouchableOpacity>
-        <View style={s.detailHeaderCenter}>
-          <View style={[s.methodBadge, { backgroundColor: getMethodColor(log.request.method) }]}>
-            <Text style={s.methodBadgeText}>{log.request.method}</Text>
-          </View>
-          <View style={[s.statusPill, { backgroundColor: statusColor }]}>
-            <Text style={s.statusPillText}>{log.response?.status ?? 'ERR'}</Text>
-          </View>
-          {log.duration != null && (
-            <Text style={s.durationText}>{log.duration}ms</Text>
-          )}
-        </View>
-      </View>
-      <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
-        {/* URL */}
-        <View style={s.urlCard}>
-          <Text style={s.urlText} selectable numberOfLines={3}>
-            {log.request.url}
-          </Text>
-          <CopyButton text={log.request.url} label="URL" />
-        </View>
-
-        {/* Request Body */}
-        <CollapsibleSection title="Request Body" initiallyExpanded>
-          {log.request.body != null ? (
-            <View style={s.sectionWithCopy}>
-              <CopyButton text={fmt(log.request.body)} label="Request Body" />
-              <JsonView data={log.request.body} maxHeight={250} />
-            </View>
-          ) : (
-            <Text style={s.emptySection}>No request body</Text>
-          )}
-        </CollapsibleSection>
-
-        <CollapsibleSection title="Request Headers">
-          {log.request.headers ? (
-            <View style={s.sectionWithCopy}>
-              <CopyButton text={fmt(log.request.headers)} label="Request Headers" />
-              <JsonView data={log.request.headers} maxHeight={200} />
-            </View>
-          ) : (
-            <Text style={s.emptySection}>No headers</Text>
-          )}
-        </CollapsibleSection>
-
-        {/* Response */}
-        <CollapsibleSection
-          title={`Response ${formatSize(log.response?.data)}`}
-          initiallyExpanded
-        >
-          {log.error && (
-            <View style={s.errorBox}>
-              <Text style={s.errorIcon}>⚠</Text>
-              <Text style={s.errorText}>{log.error}</Text>
-            </View>
-          )}
-          {log.response?.data != null ? (
-            <View style={s.sectionWithCopy}>
-              <CopyButton text={fmt(log.response.data)} label="Response Body" />
-              <JsonView data={log.response.data} maxHeight={300} />
-            </View>
-          ) : (
-            <Text style={s.emptySection}>No response body</Text>
-          )}
-        </CollapsibleSection>
-
-        {log.response?.headers && (
-          <CollapsibleSection title="Response Headers">
-            <View style={s.sectionWithCopy}>
-              <CopyButton text={fmt(log.response.headers)} label="Response Headers" />
-              <JsonView data={log.response.headers} maxHeight={200} />
-            </View>
-          </CollapsibleSection>
-        )}
-
-        {/* cURL */}
-        <CollapsibleSection title="cURL">
-          <View style={s.sectionWithCopy}>
-            <CopyButton text={curl()} label="cURL" />
-            <View style={s.codeBlock}>
-              <Text style={s.codeText} selectable>{curl()}</Text>
-            </View>
-          </View>
-        </CollapsibleSection>
-      </ScrollView>
-    </View>
-  );
+const buildCurl = (log: NetworkLogEntry): string => {
+  let c = `curl -X ${log.request.method} '${log.request.url}'`;
+  if (log.request.headers) {
+    Object.entries(log.request.headers).forEach(([k, v]) => (c += ` \\\n  -H '${k}: ${v}'`));
+  }
+  if (log.request.body) {
+    c += ` \\\n  -d '${typeof log.request.body === 'string' ? log.request.body : JSON.stringify(log.request.body)}'`;
+  }
+  return c;
 };
 
-// --- List view ---
 export const NetworkLogTab: React.FC<DebugFeatureRenderProps<NetworkLogEntry>> = React.memo(({
   data,
 }) => {
-  const [selectedLog, setSelectedLog] = useState<NetworkLogEntry | null>(null);
   const [search, setSearch] = useState('');
-  const slideAnim = useRef(new Animated.Value(0)).current;
-  const listSlideAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (selectedLog) {
-      listSlideAnim.setValue(0);
-      Animated.parallel([
-        Animated.spring(slideAnim, { toValue: 1, friction: 9, tension: 60, useNativeDriver: true }),
-        Animated.spring(listSlideAnim, { toValue: 1, friction: 9, tension: 60, useNativeDriver: true }),
-      ]).start();
-    } else {
-      slideAnim.setValue(0);
-      listSlideAnim.setValue(0);
-    }
-  }, [selectedLog]);
-
-  const detailTranslateX = slideAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [300, 0],
-  });
-  const listTranslateX = listSlideAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, -60],
-  });
-  const listOpacity = listSlideAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [1, 0],
-  });
 
   const filtered = search
     ? data.filter(
@@ -185,43 +50,14 @@ export const NetworkLogTab: React.FC<DebugFeatureRenderProps<NetworkLogEntry>> =
       )
     : data;
 
-  const sorted = [...filtered].sort(
-    (a, b) => b.timestamp - a.timestamp,
-  );
-
-  const renderItem = ({ item }: { item: NetworkLogEntry }) => {
-    const ok = !item.error && (!item.response || item.response.status < 400);
-    const sc = ok ? Colors.success : Colors.error;
-    return (
-      <TouchableOpacity style={s.card} onPress={() => setSelectedLog(item)} activeOpacity={0.6}>
-        <View style={s.cardRow}>
-          <View style={[s.statusIndicator, { backgroundColor: sc }]} />
-          <View style={s.cardBody}>
-            <View style={s.cardMeta}>
-              <Text style={[s.methodText, { color: getMethodColor(item.request.method) }]}>
-                {item.request.method}
-              </Text>
-              <View style={[s.miniPill, { backgroundColor: sc }]}>
-                <Text style={s.miniPillText}>{item.response?.status ?? 'ERR'}</Text>
-              </View>
-              {item.duration != null && <Text style={s.durationText}>{item.duration}ms</Text>}
-            </View>
-            <Text style={[s.url, !ok && { color: Colors.error }]} numberOfLines={2}>
-              {item.request.url}
-            </Text>
-            <Text style={s.time}>
-              {new Date(item.timestamp).toLocaleTimeString()}
-            </Text>
-          </View>
-        </View>
-      </TouchableOpacity>
-    );
-  };
+  const sorted = [...filtered].sort((a, b) => b.timestamp - a.timestamp);
 
   return (
-    <View style={s.container}>
-      {/* List */}
-      <Animated.View style={[s.listWrap, selectedLog ? { opacity: listOpacity, transform: [{ translateX: listTranslateX }] } : null]}>
+    <LogListScreen
+      data={sorted}
+      reversed={false}
+      emptyText="No HTTP requests logged"
+      renderListHeader={() => (
         <View style={s.searchContainer}>
           <View style={s.searchBar}>
             <Text style={s.searchIcon}>⌕</Text>
@@ -234,45 +70,118 @@ export const NetworkLogTab: React.FC<DebugFeatureRenderProps<NetworkLogEntry>> =
             />
           </View>
         </View>
-        {sorted.length === 0 ? (
-          <View style={s.emptyContainer}>
-            <Text style={s.emptyIcon}>~</Text>
-            <Text style={s.empty}>No HTTP requests logged</Text>
+      )}
+      renderRow={(item) => {
+        const ok = !item.error && (!item.response || item.response.status < 400);
+        const sc = ok ? Colors.success : Colors.error;
+        return (
+          <View style={s.cardRow}>
+            <View style={[s.statusIndicator, { backgroundColor: sc }]} />
+            <View style={s.cardBody}>
+              <View style={s.cardMeta}>
+                <Text style={[s.methodText, { color: getMethodColor(item.request.method) }]}>
+                  {item.request.method}
+                </Text>
+                <View style={[s.miniPill, { backgroundColor: sc }]}>
+                  <Text style={s.miniPillText}>{item.response?.status ?? 'ERR'}</Text>
+                </View>
+                {item.duration != null && <Text style={s.durationText}>{item.duration}ms</Text>}
+              </View>
+              <Text style={[s.url, !ok && { color: Colors.error }]} numberOfLines={2}>
+                {item.request.url}
+              </Text>
+              <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+            </View>
+          </View>
+        );
+      }}
+      renderDetailHeader={(log) => {
+        const statusColor = log.error || (log.response && log.response.status >= 400) ? Colors.error : Colors.success;
+        return (
+          <View style={s.detailHeaderCenter}>
+            <View style={[s.methodBadge, { backgroundColor: getMethodColor(log.request.method) }]}>
+              <Text style={s.methodBadgeText}>{log.request.method}</Text>
+            </View>
+            <View style={[s.statusPill, { backgroundColor: statusColor }]}>
+              <Text style={s.statusPillText}>{log.response?.status ?? 'ERR'}</Text>
+            </View>
+            {log.duration != null && <Text style={s.durationText}>{log.duration}ms</Text>}
           </View>
-        ) : (
-          <FlatList
-            data={sorted}
-            renderItem={renderItem}
-            keyExtractor={(item) => item.id}
-            contentContainerStyle={s.listContent}
-            initialNumToRender={20}
-            maxToRenderPerBatch={10}
-            windowSize={5}
-            removeClippedSubviews={true}
-          />
-        )}
-      </Animated.View>
+        );
+      }}
+      renderDetailBody={(log) => {
+        const curlStr = buildCurl(log);
+        return (
+          <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+            <View style={s.urlCard}>
+              <Text style={s.urlText} selectable numberOfLines={3}>{log.request.url}</Text>
+              <CopyButton text={log.request.url} label="URL" />
+            </View>
 
-      {/* Detail (push navigation) */}
-      {selectedLog && (
-        <Animated.View style={[s.detailOverlay, { transform: [{ translateX: detailTranslateX }] }]}>
-          <NetworkLogDetail log={selectedLog} onBack={() => setSelectedLog(null)} />
-        </Animated.View>
-      )}
-    </View>
+            <CollapsibleSection title="Request Body" initiallyExpanded>
+              {log.request.body != null ? (
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.request.body)} label="Request Body" />
+                  <JsonView data={log.request.body} maxHeight={250} />
+                </View>
+              ) : (
+                <Text style={s.emptySection}>No request body</Text>
+              )}
+            </CollapsibleSection>
+
+            <CollapsibleSection title="Request Headers">
+              {log.request.headers ? (
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.request.headers)} label="Request Headers" />
+                  <JsonView data={log.request.headers} maxHeight={200} />
+                </View>
+              ) : (
+                <Text style={s.emptySection}>No headers</Text>
+              )}
+            </CollapsibleSection>
+
+            <CollapsibleSection title={`Response ${formatSize(log.response?.data)}`} initiallyExpanded>
+              {log.error && (
+                <View style={s.errorBox}>
+                  <Text style={s.errorIcon}>⚠</Text>
+                  <Text style={s.errorText}>{log.error}</Text>
+                </View>
+              )}
+              {log.response?.data != null ? (
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.response.data)} label="Response Body" />
+                  <JsonView data={log.response.data} maxHeight={300} />
+                </View>
+              ) : (
+                <Text style={s.emptySection}>No response body</Text>
+              )}
+            </CollapsibleSection>
+
+            {log.response?.headers && (
+              <CollapsibleSection title="Response Headers">
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.response.headers)} label="Response Headers" />
+                  <JsonView data={log.response.headers} maxHeight={200} />
+                </View>
+              </CollapsibleSection>
+            )}
+
+            <CollapsibleSection title="cURL">
+              <View style={s.sectionWithCopy}>
+                <CopyButton text={curlStr} label="cURL" />
+                <View style={s.codeBlock}>
+                  <Text style={s.codeText} selectable>{curlStr}</Text>
+                </View>
+              </View>
+            </CollapsibleSection>
+          </ScrollView>
+        );
+      }}
+    />
   );
 });
 
 const s = StyleSheet.create({
-  container: { flex: 1, backgroundColor: Colors.background },
-  listWrap: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-
   // Search
   searchContainer: {
     paddingHorizontal: 12,
@@ -296,19 +205,7 @@ const s = StyleSheet.create({
     padding: 0,
   },
 
-  // Empty
-  emptyContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
-  emptyIcon: { fontSize: 40, color: Colors.textLight, marginBottom: 4 },
-  empty: { textAlign: 'center', color: Colors.textLight, fontSize: 14 },
-
-  // List
-  listContent: { padding: 12 },
-  card: {
-    backgroundColor: Colors.surface,
-    borderRadius: 12,
-    marginBottom: 8,
-    overflow: 'hidden',
-  },
+  // Row
   cardRow: { flexDirection: 'row', padding: 14 },
   statusIndicator: { width: 3, borderRadius: 2, marginRight: 12 },
   cardBody: { flex: 1 },
@@ -320,45 +217,7 @@ const s = StyleSheet.create({
   url: { fontSize: 13, color: Colors.textSecondary, marginBottom: 4, lineHeight: 18 },
   time: { fontSize: 11, color: Colors.textLight },
 
-  // Detail overlay
-  detailOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: Colors.background,
-  },
-  detailWrap: { flex: 1, backgroundColor: Colors.background },
-  detailHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 8,
-    paddingVertical: 10,
-    backgroundColor: Colors.surface,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: Colors.border,
-  },
-  backBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 6,
-    paddingVertical: 4,
-    borderRadius: 8,
-    marginRight: 8,
-  },
-  backIcon: {
-    fontSize: 24,
-    fontWeight: '300',
-    color: Colors.primary,
-    marginTop: -2,
-    marginRight: 2,
-  },
-  backText: {
-    fontSize: 16,
-    color: Colors.primary,
-    fontWeight: '500',
-  },
+  // Detail header
   detailHeaderCenter: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -373,10 +232,10 @@ const s = StyleSheet.create({
   methodBadgeText: { color: '#FFF', fontSize: 12, fontWeight: '700' },
   statusPill: { paddingHorizontal: 9, paddingVertical: 3, borderRadius: 6 },
   statusPillText: { color: '#FFF', fontSize: 11, fontWeight: '700' },
+
+  // Detail body
   detailBody: { flex: 1 },
   detailBodyContent: { padding: 12, paddingBottom: 40 },
-
-  // Detail content
   urlCard: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/ThirdPartyLibsTab.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { Colors } from '../utils/constants';
-import type { DebugFeatureRenderProps, ThirdPartyLib } from '../types';
+import { Colors } from '../utils/colors';
+import type { DebugFeatureRenderProps, ThirdPartyLib, ThirdPartyLibAction } from '../types';
 
 export const ThirdPartyLibsTab: React.FC<DebugFeatureRenderProps<ThirdPartyLib>> = ({
   data,
@@ -21,7 +21,7 @@ export const ThirdPartyLibsTab: React.FC<DebugFeatureRenderProps<ThirdPartyLib>>
           <Text style={styles.libName}>{lib.name}</Text>
           <Text style={styles.libDesc}>{lib.description}</Text>
           <View style={styles.actions}>
-            {lib.actions.map((action) => (
+            {lib.actions.map((action: ThirdPartyLibAction) => (
               <TouchableOpacity
                 key={action.id}
                 style={styles.actionButton}