react-native-network-lens 0.1.0 → 0.2.0

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}
@@ -215,8 +211,8 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
-  searchRow: { flexDirection: 'row', alignItems: 'center', gap: 4 },
-  search: { flex: 1 },
+  searchRow: { flexDirection: 'row', alignItems: 'center' },
+  search: { flex: 1, marginRight: 4 },
   statusBar: { paddingHorizontal: 12, paddingVertical: 4 },
   statusText: { fontSize: 11, fontWeight: '600' },
   statusTextPaused: { color: '#ffffff' },

package/src/components/ui/Button.tsx

@@ -8,11 +8,17 @@ import {
 } from 'react-native';
 import { useTheme } from '../../theme';
 
+// Object form keeps compatibility with React Native versions before numeric hitSlop.
+const HIT_SLOP_SMALL = { top: 6, bottom: 6, left: 6, right: 6 };
+const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
+
 interface TextButtonProps {
   label: string;
   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>;
 }
@@ -22,6 +28,7 @@ export const TextButton = ({
   onPress,
   disabled,
   active,
+  plain,
   style,
   textStyle,
 }: TextButtonProps) => {
@@ -31,13 +38,15 @@ export const TextButton = ({
       accessibilityRole="button"
       disabled={disabled}
       onPress={onPress}
-      hitSlop={6}
+      hitSlop={HIT_SLOP_SMALL}
       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,
@@ -46,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,
         ]}
       >
@@ -79,7 +94,7 @@ export const IconButton = ({
       accessibilityLabel={accessibilityLabel}
       disabled={disabled}
       onPress={onPress}
-      hitSlop={8}
+      hitSlop={HIT_SLOP}
       style={({ pressed }) => [
         styles.icon,
         active && { backgroundColor: theme.colors.primary },
@@ -108,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>;