react-native-network-lens 0.1.1 → 0.2.0

package/src/components/NetworkLens.tsx

@@ -5,7 +5,6 @@ import {
   useImperativeHandle,
   useMemo,
   useState,
-  type ReactNode,
 } from 'react';
 import { BackHandler, Share, StyleSheet, View } from 'react-native';
 import { setLensBackHandler } from '../backHandler';
@@ -40,8 +39,6 @@ export interface NetworkLensProps {
    * `copyToClipboard={Clipboard.setString}`.
    */
   copyToClipboard?: (text: string) => void;
-  /** Rendered above the request list's search bar (the overlay uses it for its title bar). */
-  header?: ReactNode;
 }
 
 export interface NetworkLensHandle {
@@ -58,7 +55,6 @@ const NetworkLens = forwardRef<NetworkLensHandle, NetworkLensProps>(
       compact = false,
       maxRows,
       copyToClipboard,
-      header,
     },
     ref
   ) {
@@ -71,7 +67,6 @@ const NetworkLens = forwardRef<NetworkLensHandle, NetworkLensProps>(
           compact={compact}
           maxRows={maxRows}
           copyToClipboard={copyToClipboard}
-          header={header}
         />
       </ThemeContext.Provider>
     );
@@ -79,13 +74,10 @@ const NetworkLens = forwardRef<NetworkLensHandle, NetworkLensProps>(
 );
 
 type InspectorProps = Required<Pick<NetworkLensProps, 'sort' | 'compact'>> &
-  Pick<NetworkLensProps, 'maxRows' | 'copyToClipboard' | 'header'>;
+  Pick<NetworkLensProps, 'maxRows' | 'copyToClipboard'>;
 
 const Inspector = forwardRef<NetworkLensHandle, InspectorProps>(
-  function InspectorInner(
-    { sort, compact, maxRows, copyToClipboard, header },
-    ref
-  ) {
+  function InspectorInner({ sort, compact, maxRows, copyToClipboard }, ref) {
     const theme = useTheme();
     const requests = useNetworkRequests();
     const loggingEnabled = useLoggerEnabled();
@@ -163,7 +155,6 @@ const Inspector = forwardRef<NetworkLensHandle, InspectorProps>(
             loggingEnabled={loggingEnabled}
             onPressItem={setSelectedId}
             menuActions={menuActions}
-            header={header}
           />
         )}
       </View>

package/src/components/NetworkLensOverlay.tsx

@@ -11,15 +11,16 @@ import {
 } from 'react-native';
 import { useLoggerEnabled, useNetworkRequests } from '../hooks';
 import { ThemeContext, useTheme, type ThemeInput } from '../theme';
+
+const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
 import NetworkLens, {
   type NetworkLensHandle,
   type NetworkLensProps,
 } from './NetworkLens';
-import { IconButton } from './ui';
 
 export interface NetworkLensOverlayProps extends Omit<
   NetworkLensProps,
-  'enabled' | 'theme' | 'header'
+  'enabled' | 'theme'
 > {
   /**
    * Render nothing when `false`, e.g.
@@ -88,17 +89,6 @@ const Overlay = ({
     [position.endsWith('right') ? 'right' : 'left']: offset?.x ?? 16,
   };
 
-  const header = (
-    <View style={styles.header}>
-      <Text style={[styles.title, { color: t.colors.text }]}>{title}</Text>
-      <IconButton
-        glyph="✕"
-        accessibilityLabel="Close network inspector"
-        onPress={() => setOpen(false)}
-      />
-    </View>
-  );
-
   return (
     <>
       {!hideButton && (
@@ -135,12 +125,43 @@ const Overlay = ({
         }}
       >
         <View style={[styles.sheet, { backgroundColor: t.colors.surface }]}>
-          <NetworkLens
-            ref={lensRef}
-            {...lensProps}
-            theme={theme}
-            header={header}
-          />
+          <View
+            style={[
+              styles.header,
+              {
+                backgroundColor: t.colors.surface,
+                borderBottomColor: t.colors.border,
+              },
+            ]}
+          >
+            <View style={styles.headerSide} />
+            <Text
+              style={[styles.title, { color: t.colors.text }]}
+              numberOfLines={1}
+            >
+              {title}
+            </Text>
+            <View style={styles.headerSide}>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel="Close network inspector"
+                onPress={() => setOpen(false)}
+                hitSlop={HIT_SLOP}
+                style={({ pressed }) => [
+                  styles.close,
+                  { backgroundColor: t.colors.surfaceAlt },
+                  pressed && styles.pressed,
+                ]}
+              >
+                <Text
+                  style={[styles.closeGlyph, { color: t.colors.textMuted }]}
+                >
+                  ✕
+                </Text>
+              </Pressable>
+            </View>
+          </View>
+          <NetworkLens ref={lensRef} {...lensProps} theme={theme} />
         </View>
       </Modal>
     </>
@@ -175,13 +196,23 @@ const styles = StyleSheet.create({
     paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 0,
   },
   header: {
+    height: 52,
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingLeft: 8,
-    paddingBottom: 6,
+    paddingHorizontal: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerSide: { width: 44, alignItems: 'flex-end', justifyContent: 'center' },
+  title: { flex: 1, textAlign: 'center', fontSize: 17, fontWeight: '600' },
+  close: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  title: { fontSize: 17, fontWeight: '700' },
+  closeGlyph: { fontSize: 15, fontWeight: '700' },
+  pressed: { opacity: 0.6 },
 });
 
 export default NetworkLensOverlay;

package/src/components/RawTextView.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import { useCodeFont } from '../settings';
 import { useTheme, type Theme } from '../theme';
 import { findLineMatches, splitHighlights, toLines } from '../utils/search';
 import { CodeList } from './CodeList';
@@ -22,6 +23,7 @@ const RawTextView = ({
   onMatchCountChange,
 }: Props) => {
   const theme = useTheme();
+  const font = useCodeFont(theme);
   const lines = useMemo(() => toLines(text), [text]);
   const matches = useMemo(() => findLineMatches(lines, query), [lines, query]);
 
@@ -37,14 +39,14 @@ const RawTextView = ({
     matches[Math.min(activeMatch, Math.max(matches.length - 1, 0))]?.line;
 
   const gutterChars = String(lines.length).length;
-  const charWidth = theme.sizes.codeFontSize * 0.62;
+  const charWidth = font.charWidth;
   const contentWidth = useMemo(() => {
     let max = 0;
     for (const line of lines) if (line.length > max) max = line.length;
     return (max + gutterChars + 3) * charWidth + 32;
   }, [lines, gutterChars, charWidth]);
 
-  const rowHeight = theme.sizes.codeLineHeight;
+  const rowHeight = font.lineHeight;
 
   const renderItem = useCallback(
     ({ item, index }: { item: string; index: number }) => (
@@ -53,13 +55,14 @@ const RawTextView = ({
         index={index}
         gutterChars={gutterChars}
         theme={theme}
+        font={font}
         query={query}
         matched={matchedLines.has(index)}
         active={index === activeLine}
         height={rowHeight}
       />
     ),
-    [gutterChars, theme, query, matchedLines, activeLine, rowHeight]
+    [gutterChars, theme, font, query, matchedLines, activeLine, rowHeight]
   );
 
   return (
@@ -82,6 +85,7 @@ const Line = React.memo(function LineInner({
   index,
   gutterChars,
   theme,
+  font,
   query,
   matched,
   active,
@@ -91,6 +95,7 @@ const Line = React.memo(function LineInner({
   index: number;
   gutterChars: number;
   theme: Theme;
+  font: ReturnType<typeof useCodeFont>;
   query: string;
   matched: boolean;
   active: boolean;
@@ -98,8 +103,8 @@ const Line = React.memo(function LineInner({
 }) {
   const codeStyle = {
     fontFamily: theme.fonts.mono,
-    fontSize: theme.sizes.codeFontSize,
-    lineHeight: theme.sizes.codeLineHeight,
+    fontSize: font.fontSize,
+    lineHeight: font.lineHeight,
   };
   const segments = matched ? splitHighlights(text, query) : null;
   return (
@@ -120,7 +125,7 @@ const Line = React.memo(function LineInner({
           styles.gutter,
           {
             color: theme.colors.textMuted,
-            width: (gutterChars + 1) * theme.sizes.codeFontSize * 0.62 + 8,
+            width: (gutterChars + 1) * font.charWidth + 8,
           },
         ]}
       >

package/src/components/RequestDetails/RequestDetails.tsx

@@ -18,7 +18,6 @@ import {
 } from '../../utils/format';
 import BodyViewer from '../BodyViewer';
 import {
-  IconButton,
   KeyValueList,
   Pill,
   Section,
@@ -76,7 +75,22 @@ const RequestDetails = ({ request, onClose, copyToClipboard }: Props) => {
           },
         ]}
       >
-        <View style={styles.headerRow}>
+        <View style={styles.navRow}>
+          <TextButton
+            label="‹ Back"
+            onPress={onClose}
+            plain
+            style={styles.back}
+            textStyle={styles.backLabel}
+          />
+          <Text
+            style={[styles.summary, { color: theme.colors.textMuted }]}
+            numberOfLines={1}
+          >
+            {summary}
+          </Text>
+        </View>
+        <View style={styles.pillRow}>
           <Pill
             label={request.method}
             color={methodColor(theme, request.method)}
@@ -86,18 +100,6 @@ const RequestDetails = ({ request, onClose, copyToClipboard }: Props) => {
           <Pill
             label={statusLabel(request)}
             color={statusColor(theme, request.status, failed)}
-            style={styles.headerPill}
-          />
-          <Text
-            style={[styles.summary, { color: theme.colors.textMuted }]}
-            numberOfLines={1}
-          >
-            {summary}
-          </Text>
-          <IconButton
-            glyph="✕"
-            accessibilityLabel="Back to list"
-            onPress={onClose}
           />
         </View>
         <Pressable
@@ -294,9 +296,17 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
-  headerRow: { flexDirection: 'row', alignItems: 'center' },
+  navRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginLeft: -8,
+  },
+  back: { paddingHorizontal: 8, paddingVertical: 4 },
+  backLabel: { fontSize: 16 },
+  pillRow: { flexDirection: 'row', alignItems: 'center', marginTop: 6 },
   headerPill: { marginRight: 8 },
-  summary: { flex: 1, fontSize: 12, fontVariant: ['tabular-nums'] },
+  summary: { flexShrink: 1, fontSize: 12, fontVariant: ['tabular-nums'] },
   url: { fontSize: 14, marginTop: 8, lineHeight: 19 },
   gql: { fontSize: 12, marginTop: 4, fontWeight: '600' },
   tabs: { marginTop: 10 },

package/src/components/RequestList/RequestList.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState, type ReactNode } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { FlatList, Share, StyleSheet, Text, View } from 'react-native';
 import type NetworkRequest from '../../core/NetworkRequest';
 import { useTheme } from '../../theme';
@@ -30,8 +30,6 @@ interface Props {
   loggingEnabled: boolean;
   onPressItem: (id: string) => void;
   menuActions: ActionItem[];
-  /** Optional row rendered above the search bar (used by the overlay for title + close). */
-  header?: ReactNode;
 }
 
 const keyExtractor = (row: NetworkRequestRow) => row.id;
@@ -52,7 +50,6 @@ const RequestList = ({
   loggingEnabled,
   onPressItem,
   menuActions,
-  header,
 }: Props) => {
   const theme = useTheme();
   const [search, setSearch] = useState('');
@@ -134,7 +131,6 @@ const RequestList = ({
           },
         ]}
       >
-        {header}
         <View style={styles.searchRow}>
           <SearchInput
             value={search}

package/src/components/ui/Button.tsx

@@ -17,6 +17,8 @@ interface TextButtonProps {
   onPress?: () => void;
   disabled?: boolean;
   active?: boolean;
+  /** Text-only button in the primary colour, for navigation actions like Back. */
+  plain?: boolean;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
 }
@@ -26,6 +28,7 @@ export const TextButton = ({
   onPress,
   disabled,
   active,
+  plain,
   style,
   textStyle,
 }: TextButtonProps) => {
@@ -39,9 +42,11 @@ export const TextButton = ({
       style={({ pressed }) => [
         styles.button,
         {
-          backgroundColor: active
-            ? theme.colors.primary
-            : theme.colors.surfaceAlt,
+          backgroundColor: plain
+            ? 'transparent'
+            : active
+              ? theme.colors.primary
+              : theme.colors.surfaceAlt,
         },
         disabled ? styles.disabled : pressed && styles.pressed,
         style,
@@ -50,7 +55,13 @@ export const TextButton = ({
       <Text
         style={[
           styles.label,
-          { color: active ? theme.colors.onPrimary : theme.colors.text },
+          {
+            color: plain
+              ? theme.colors.primary
+              : active
+                ? theme.colors.onPrimary
+                : theme.colors.text,
+          },
           textStyle,
         ]}
       >
@@ -112,7 +123,8 @@ const styles = StyleSheet.create({
   },
   label: { fontSize: 13, fontWeight: '600' },
   icon: {
-    width: 32,
+    minWidth: 32,
+    paddingHorizontal: 6,
     height: 32,
     borderRadius: 8,
     alignItems: 'center',

package/src/components/ui/Pill.tsx

@@ -14,6 +14,7 @@ interface Props {
   style?: StyleProp<ViewStyle>;
 }
 
+/** Fixed-height badge so filled and outlined variants align on one row. */
 export const Pill = ({ label, color, filled, small, style }: Props) => (
   <View
     style={[
@@ -39,15 +40,23 @@ export const Pill = ({ label, color, filled, small, style }: Props) => (
 
 const styles = StyleSheet.create({
   pill: {
+    height: 24,
+    minWidth: 44,
+    paddingHorizontal: 8,
     borderWidth: 1,
     borderRadius: 6,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
     alignSelf: 'flex-start',
   },
-  pillSmall: { paddingHorizontal: 4, paddingVertical: 1, borderRadius: 4 },
+  pillSmall: {
+    height: 20,
+    minWidth: 40,
+    paddingHorizontal: 6,
+    borderRadius: 5,
+  },
   outline: { backgroundColor: 'transparent' },
-  text: { fontSize: 12, fontWeight: '700', letterSpacing: 0.3 },
-  textSmall: { fontSize: 11 },
+  text: { fontSize: 12, lineHeight: 14, fontWeight: '700', letterSpacing: 0.3 },
+  textSmall: { fontSize: 11, lineHeight: 13 },
   textFilled: { color: '#ffffff' },
 });

package/src/settings.ts

@@ -0,0 +1,55 @@
+import { useSyncExternalStore } from 'react';
+import type { Theme } from './theme';
+
+/**
+ * Tiny in-memory preferences shared by every viewer in the session, e.g. the
+ * code font scale the user picks with the "Aa" button.
+ */
+export type CodeFontScale = 'small' | 'medium' | 'large';
+
+const SCALE_FACTOR: Record<CodeFontScale, number> = {
+  small: 0.85,
+  medium: 1,
+  large: 1.2,
+};
+const ORDER: CodeFontScale[] = ['small', 'medium', 'large'];
+
+let scale: CodeFontScale = 'medium';
+const listeners = new Set<() => void>();
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+const getScale = () => scale;
+
+export const setCodeFontScale = (next: CodeFontScale) => {
+  if (scale === next) return;
+  scale = next;
+  listeners.forEach((listener) => listener());
+};
+
+export const cycleCodeFontScale = () => {
+  setCodeFontScale(
+    ORDER[(ORDER.indexOf(scale) + 1) % ORDER.length] ?? 'medium'
+  );
+};
+
+export const useCodeFontScale = (): CodeFontScale =>
+  useSyncExternalStore(subscribe, getScale, getScale);
+
+/** Font metrics for code views: the theme's base size times the chosen scale. */
+export const useCodeFont = (theme: Theme) => {
+  const current = useCodeFontScale();
+  const factor = SCALE_FACTOR[current];
+  const fontSize = Math.round(theme.sizes.codeFontSize * factor);
+  return {
+    scale: current,
+    fontSize,
+    lineHeight: Math.round(fontSize * 1.5),
+    /** Average glyph advance for monospace fonts; used to size horizontal scroll areas. */
+    charWidth: fontSize * 0.62,
+  };
+};

package/src/theme.ts

@@ -80,7 +80,7 @@ export const lightTheme: Theme = {
     onHighlight: '#1f2937',
   },
   fonts: { mono: mono ?? 'monospace' },
-  sizes: { codeFontSize: 13, codeLineHeight: 20 },
+  sizes: { codeFontSize: 14, codeLineHeight: 21 },
 };
 
 export const darkTheme: Theme = {
@@ -114,7 +114,7 @@ export const darkTheme: Theme = {
     onHighlight: '#fef3c7',
   },
   fonts: { mono: mono ?? 'monospace' },
-  sizes: { codeFontSize: 13, codeLineHeight: 20 },
+  sizes: { codeFontSize: 14, codeLineHeight: 21 },
 };
 
 export type ThemeInput = ThemeName | DeepPartial<Theme>;