react-native-debug-toolkit 2.0.0 → 2.1.0

package/lib/commonjs/components/NetworkLogTab.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.NetworkLogTab = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _constants = require("../utils/constants");
+var _colors = require("../utils/colors");
 var _CollapsibleSection = require("./shared/CollapsibleSection");
 var _JsonView = require("./shared/JsonView");
 var _CopyButton = require("./shared/CopyButton");
 var _copyToComputer = require("../utils/copyToComputer");
+var _LogListScreen = require("./shared/LogListScreen");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const formatSize = data => {
@@ -24,215 +25,46 @@ const formatSize = data => {
     return '';
   }
 };
-
-// --- Detail view (in-panel push) ---
-const NetworkLogDetail = ({
-  log,
-  onBack
-}) => {
-  const statusColor = log.error || log.response && log.response.status >= 400 ? _constants.Colors.error : _constants.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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: s.detailWrap,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: s.detailHeader,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        onPress: onBack,
-        style: s.backBtn,
-        activeOpacity: 0.6,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: s.backIcon,
-          children: "\u2039"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: s.backText,
-          children: "Back"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: s.detailHeaderCenter,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [s.methodBadge, {
-            backgroundColor: (0, _constants.getMethodColor)(log.request.method)
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: s.methodBadgeText,
-            children: log.request.method
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [s.statusPill, {
-            backgroundColor: statusColor
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: s.statusPillText,
-            children: log.response?.status ?? 'ERR'
-          })
-        }), log.duration != null && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: s.durationText,
-          children: [log.duration, "ms"]
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      style: s.detailBody,
-      contentContainerStyle: s.detailBodyContent,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: s.urlCard,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: s.urlText,
-          selectable: true,
-          numberOfLines: 3,
-          children: log.request.url
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
-          text: log.request.url,
-          label: "URL"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleSection.CollapsibleSection, {
-        title: "Request Body",
-        initiallyExpanded: true,
-        children: log.request.body != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: s.sectionWithCopy,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
-            text: (0, _copyToComputer.fmt)(log.request.body),
-            label: "Request Body"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonView.JsonView, {
-            data: log.request.body,
-            maxHeight: 250
-          })]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: s.emptySection,
-          children: "No request body"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleSection.CollapsibleSection, {
-        title: "Request Headers",
-        children: log.request.headers ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: s.sectionWithCopy,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
-            text: (0, _copyToComputer.fmt)(log.request.headers),
-            label: "Request Headers"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonView.JsonView, {
-            data: log.request.headers,
-            maxHeight: 200
-          })]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: s.emptySection,
-          children: "No headers"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CollapsibleSection.CollapsibleSection, {
-        title: `Response ${formatSize(log.response?.data)}`,
-        initiallyExpanded: true,
-        children: [log.error && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: s.errorBox,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: s.errorIcon,
-            children: "\u26A0"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: s.errorText,
-            children: log.error
-          })]
-        }), log.response?.data != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: s.sectionWithCopy,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
-            text: (0, _copyToComputer.fmt)(log.response.data),
-            label: "Response Body"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonView.JsonView, {
-            data: log.response.data,
-            maxHeight: 300
-          })]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: s.emptySection,
-          children: "No response body"
-        })]
-      }), log.response?.headers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleSection.CollapsibleSection, {
-        title: "Response Headers",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: s.sectionWithCopy,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
-            text: (0, _copyToComputer.fmt)(log.response.headers),
-            label: "Response Headers"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonView.JsonView, {
-            data: log.response.headers,
-            maxHeight: 200
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleSection.CollapsibleSection, {
-        title: "cURL",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: s.sectionWithCopy,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
-            text: curl(),
-            label: "cURL"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: s.codeBlock,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: s.codeText,
-              selectable: true,
-              children: curl()
-            })
-          })]
-        })
-      })]
-    })]
-  });
+const buildCurl = log => {
+  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 ---
 const NetworkLogTab = exports.NetworkLogTab = /*#__PURE__*/_react.default.memo(({
   data
 }) => {
-  const [selectedLog, setSelectedLog] = (0, _react.useState)(null);
   const [search, setSearch] = (0, _react.useState)('');
-  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const listSlideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  (0, _react.useEffect)(() => {
-    if (selectedLog) {
-      listSlideAnim.setValue(0);
-      _reactNative.Animated.parallel([_reactNative.Animated.spring(slideAnim, {
-        toValue: 1,
-        friction: 9,
-        tension: 60,
-        useNativeDriver: true
-      }), _reactNative.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(l => l.request.url.toLowerCase().includes(search.toLowerCase()) || l.request.method.toLowerCase().includes(search.toLowerCase())) : data;
   const sorted = [...filtered].sort((a, b) => b.timestamp - a.timestamp);
-  const renderItem = ({
-    item
-  }) => {
-    const ok = !item.error && (!item.response || item.response.status < 400);
-    const sc = ok ? _constants.Colors.success : _constants.Colors.error;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: s.card,
-      onPress: () => setSelectedLog(item),
-      activeOpacity: 0.6,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LogListScreen.LogListScreen, {
+    data: sorted,
+    reversed: false,
+    emptyText: "No HTTP requests logged",
+    renderListHeader: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: s.searchContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: s.searchBar,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: s.searchIcon,
+          children: "\u2315"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          style: s.search,
+          placeholder: "Search URLs...",
+          placeholderTextColor: _colors.Colors.textLight,
+          value: search,
+          onChangeText: setSearch
+        })]
+      })
+    }),
+    renderRow: item => {
+      const ok = !item.error && (!item.response || item.response.status < 400);
+      const sc = ok ? _colors.Colors.success : _colors.Colors.error;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: s.cardRow,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: [s.statusIndicator, {
@@ -244,7 +76,7 @@ const NetworkLogTab = exports.NetworkLogTab = /*#__PURE__*/_react.default.memo((
             style: s.cardMeta,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [s.methodText, {
-                color: (0, _constants.getMethodColor)(item.request.method)
+                color: (0, _colors.getMethodColor)(item.request.method)
               }],
               children: item.request.method
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -261,7 +93,7 @@ const NetworkLogTab = exports.NetworkLogTab = /*#__PURE__*/_react.default.memo((
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [s.url, !ok && {
-              color: _constants.Colors.error
+              color: _colors.Colors.error
             }],
             numberOfLines: 2,
             children: item.request.url
@@ -270,129 +102,167 @@ const NetworkLogTab = exports.NetworkLogTab = /*#__PURE__*/_react.default.memo((
             children: new Date(item.timestamp).toLocaleTimeString()
           })]
         })]
-      })
-    });
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: s.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-      style: [s.listWrap, selectedLog ? {
-        opacity: listOpacity,
-        transform: [{
-          translateX: listTranslateX
-        }]
-      } : null],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: s.searchContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: s.searchBar,
+      });
+    },
+    renderDetailHeader: log => {
+      const statusColor = log.error || log.response && log.response.status >= 400 ? _colors.Colors.error : _colors.Colors.success;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: s.detailHeaderCenter,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [s.methodBadge, {
+            backgroundColor: (0, _colors.getMethodColor)(log.request.method)
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: s.methodBadgeText,
+            children: log.request.method
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [s.statusPill, {
+            backgroundColor: statusColor
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: s.statusPillText,
+            children: log.response?.status ?? 'ERR'
+          })
+        }), log.duration != null && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: s.durationText,
+          children: [log.duration, "ms"]
+        })]
+      });
+    },
+    renderDetailBody: log => {
+      const curlStr = buildCurl(log);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+        style: s.detailBody,
+        contentContainerStyle: s.detailBodyContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: s.urlCard,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: s.searchIcon,
-            children: "\u2315"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-            style: s.search,
-            placeholder: "Search URLs...",
-            placeholderTextColor: _constants.Colors.textLight,
-            value: search,
-            onChangeText: setSearch
+            style: s.urlText,
+            selectable: true,
+            numberOfLines: 3,
+            children: log.request.url
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
+            text: log.request.url,
+            label: "URL"
           })]
-        })
-      }), sorted.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: s.emptyContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: s.emptyIcon,
-          children: "~"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: s.empty,
-          children: "No HTTP requests logged"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleSection.CollapsibleSection, {
+          title: "Request Body",
+          initiallyExpanded: true,
+          children: log.request.body != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: s.sectionWithCopy,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
+              text: (0, _copyToComputer.fmt)(log.request.body),
+              label: "Request Body"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonView.JsonView, {
+              data: log.request.body,
+              maxHeight: 250
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: s.emptySection,
+            children: "No request body"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleSection.CollapsibleSection, {
+          title: "Request Headers",
+          children: log.request.headers ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: s.sectionWithCopy,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
+              text: (0, _copyToComputer.fmt)(log.request.headers),
+              label: "Request Headers"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonView.JsonView, {
+              data: log.request.headers,
+              maxHeight: 200
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: s.emptySection,
+            children: "No headers"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CollapsibleSection.CollapsibleSection, {
+          title: `Response ${formatSize(log.response?.data)}`,
+          initiallyExpanded: true,
+          children: [log.error && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: s.errorBox,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: s.errorIcon,
+              children: "\u26A0"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: s.errorText,
+              children: log.error
+            })]
+          }), log.response?.data != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: s.sectionWithCopy,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
+              text: (0, _copyToComputer.fmt)(log.response.data),
+              label: "Response Body"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonView.JsonView, {
+              data: log.response.data,
+              maxHeight: 300
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: s.emptySection,
+            children: "No response body"
+          })]
+        }), log.response?.headers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleSection.CollapsibleSection, {
+          title: "Response Headers",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: s.sectionWithCopy,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
+              text: (0, _copyToComputer.fmt)(log.response.headers),
+              label: "Response Headers"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonView.JsonView, {
+              data: log.response.headers,
+              maxHeight: 200
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleSection.CollapsibleSection, {
+          title: "cURL",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: s.sectionWithCopy,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
+              text: curlStr,
+              label: "cURL"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: s.codeBlock,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: s.codeText,
+                selectable: true,
+                children: curlStr
+              })
+            })]
+          })
         })]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-        data: sorted,
-        renderItem: renderItem,
-        keyExtractor: item => item.id,
-        contentContainerStyle: s.listContent,
-        initialNumToRender: 20,
-        maxToRenderPerBatch: 10,
-        windowSize: 5,
-        removeClippedSubviews: true
-      })]
-    }), selectedLog && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [s.detailOverlay, {
-        transform: [{
-          translateX: detailTranslateX
-        }]
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkLogDetail, {
-        log: selectedLog,
-        onBack: () => setSelectedLog(null)
-      })
-    })]
+      });
+    }
   });
 });
 const s = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: _constants.Colors.background
-  },
-  listWrap: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  },
   // Search
   searchContainer: {
     paddingHorizontal: 12,
     paddingTop: 10,
     paddingBottom: 6,
-    backgroundColor: _constants.Colors.background
+    backgroundColor: _colors.Colors.background
   },
   searchBar: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: _constants.Colors.surface,
+    backgroundColor: _colors.Colors.surface,
     borderRadius: 10,
     paddingHorizontal: 10,
     height: 38
   },
   searchIcon: {
     fontSize: 16,
-    color: _constants.Colors.textLight,
+    color: _colors.Colors.textLight,
     marginRight: 6
   },
   search: {
     flex: 1,
     fontSize: 14,
-    color: _constants.Colors.text,
+    color: _colors.Colors.text,
     padding: 0
   },
-  // Empty
-  emptyContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  emptyIcon: {
-    fontSize: 40,
-    color: _constants.Colors.textLight,
-    marginBottom: 4
-  },
-  empty: {
-    textAlign: 'center',
-    color: _constants.Colors.textLight,
-    fontSize: 14
-  },
-  // List
-  listContent: {
-    padding: 12
-  },
-  card: {
-    backgroundColor: _constants.Colors.surface,
-    borderRadius: 12,
-    marginBottom: 8,
-    overflow: 'hidden'
-  },
+  // Row
   cardRow: {
     flexDirection: 'row',
     padding: 14
@@ -427,61 +297,20 @@ const s = _reactNative.StyleSheet.create({
   },
   durationText: {
     fontSize: 12,
-    color: _constants.Colors.textSecondary,
+    color: _colors.Colors.textSecondary,
     fontWeight: '500'
   },
   url: {
     fontSize: 13,
-    color: _constants.Colors.textSecondary,
+    color: _colors.Colors.textSecondary,
     marginBottom: 4,
     lineHeight: 18
   },
   time: {
     fontSize: 11,
-    color: _constants.Colors.textLight
-  },
-  // Detail overlay
-  detailOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: _constants.Colors.background
-  },
-  detailWrap: {
-    flex: 1,
-    backgroundColor: _constants.Colors.background
-  },
-  detailHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 8,
-    paddingVertical: 10,
-    backgroundColor: _constants.Colors.surface,
-    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
-    borderBottomColor: _constants.Colors.border
-  },
-  backBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 6,
-    paddingVertical: 4,
-    borderRadius: 8,
-    marginRight: 8
-  },
-  backIcon: {
-    fontSize: 24,
-    fontWeight: '300',
-    color: _constants.Colors.primary,
-    marginTop: -2,
-    marginRight: 2
-  },
-  backText: {
-    fontSize: 16,
-    color: _constants.Colors.primary,
-    fontWeight: '500'
+    color: _colors.Colors.textLight
   },
+  // Detail header
   detailHeaderCenter: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -508,6 +337,7 @@ const s = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: '700'
   },
+  // Detail body
   detailBody: {
     flex: 1
   },
@@ -515,11 +345,10 @@ const s = _reactNative.StyleSheet.create({
     padding: 12,
     paddingBottom: 40
   },
-  // Detail content
   urlCard: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: _constants.Colors.surface,
+    backgroundColor: _colors.Colors.surface,
     borderRadius: 12,
     padding: 14,
     marginBottom: 8,
@@ -528,7 +357,7 @@ const s = _reactNative.StyleSheet.create({
   urlText: {
     flex: 1,
     fontSize: 13,
-    color: _constants.Colors.textSecondary,
+    color: _colors.Colors.textSecondary,
     lineHeight: 18
   },
   sectionWithCopy: {
@@ -536,7 +365,7 @@ const s = _reactNative.StyleSheet.create({
   },
   emptySection: {
     fontSize: 13,
-    color: _constants.Colors.textLight,
+    color: _colors.Colors.textLight,
     paddingVertical: 4
   },
   errorBox: {
@@ -552,12 +381,12 @@ const s = _reactNative.StyleSheet.create({
   },
   errorIcon: {
     fontSize: 14,
-    color: _constants.Colors.error
+    color: _colors.Colors.error
   },
   errorText: {
     flex: 1,
     fontSize: 13,
-    color: _constants.Colors.error,
+    color: _colors.Colors.error,
     lineHeight: 18
   },
   codeBlock: {