@buoy-gg/network 7.0.33 → 7.0.35

package/lib/module/network/components/NetworkCopySettingsView.js

@@ -1,11 +1,11 @@
 "use strict";
 
-import { DynamicFilterView, macOSColors, FileText, FileCode, Link, Zap, Settings, Hash, Eye, ChevronDown, ChevronUp, AlertTriangle, ToolbarCopyButton, formatRelativeTime, useFeatureGate, ProFeatureBanner } from "@buoy-gg/shared-ui";
+import { DynamicFilterView, macOSColors, FileText, FileCode, Link, Zap, Settings, Hash, Eye, ToolbarCopyButton, formatRelativeTime, useFeatureGate, ProFeatureBanner, ExportPreview, monoFont } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { useCallback, useMemo, useState } from "react";
-import { Text, StyleSheet, ScrollView, View, TouchableOpacity } from "react-native";
+import { Text, StyleSheet, ScrollView, View } from "react-native";
 import { useTickEveryMinute } from "../hooks/useTickEveryMinute";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const DEFAULT_COPY_SETTINGS = {
   includeMethod: true,
   includeStatus: true,
@@ -541,62 +541,16 @@ export function NetworkCopySettingsView({
   const generatePreviewContent = useCallback(() => {
     const dataSource = hasLiveData ? events : [mockRequestData];
     const requestCount = dataSource.length;
-
-    // Collapsed state - show summary with expand button
-    if (!isPreviewExpanded) {
-      const warningColor = sizeWarningLevel === 'danger' ? macOSColors.semantic.error : sizeWarningLevel === 'warning' ? macOSColors.semantic.warning : macOSColors.text.secondary;
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.collapsedPreview,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.expandButton,
-          onPress: () => setIsPreviewExpanded(true),
-          children: /*#__PURE__*/_jsxs(View, {
-            style: styles.expandButtonContent,
-            children: [/*#__PURE__*/_jsx(Eye, {
-              size: 16,
-              color: macOSColors.semantic.info
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.expandButtonTextContainer,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.expandButtonTitle,
-                children: "Show Preview"
-              }), /*#__PURE__*/_jsxs(Text, {
-                style: styles.expandButtonSubtitle,
-                children: [requestCount, " request", requestCount !== 1 ? 's' : '', " \u2022 ~", formatBytes(estimatedSize)]
-              })]
-            }), /*#__PURE__*/_jsx(ChevronDown, {
-              size: 16,
-              color: macOSColors.text.muted
-            })]
-          })
-        }), sizeWarningLevel !== 'none' && /*#__PURE__*/_jsxs(View, {
-          style: [styles.sizeWarning, sizeWarningLevel === 'danger' && styles.sizeWarningDanger],
-          children: [/*#__PURE__*/_jsx(AlertTriangle, {
-            size: 12,
-            color: warningColor
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.sizeWarningText, {
-              color: warningColor
-            }],
-            children: sizeWarningLevel === 'danger' ? 'Very large payload - may cause performance issues' : 'Large payload - preview may be slow'
-          })]
-        })]
-      });
-    }
-
-    // Expanded state - show collapse button + actual content
-    return /*#__PURE__*/_jsxs(View, {
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: styles.collapseButton,
-        onPress: () => setIsPreviewExpanded(false),
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.collapseButtonText,
-          children: "Hide Preview"
-        }), /*#__PURE__*/_jsx(ChevronUp, {
-          size: 14,
-          color: macOSColors.text.secondary
-        })]
-      }), generateExpandedPreviewContent()]
+    return /*#__PURE__*/_jsx(ExportPreview, {
+      expanded: isPreviewExpanded,
+      onExpandedChange: setIsPreviewExpanded,
+      summary: `${requestCount} request${requestCount !== 1 ? "s" : ""} • ~${formatBytes(estimatedSize)}`,
+      warningLevel: sizeWarningLevel,
+      warningText: {
+        warning: "Large payload - preview may be slow",
+        danger: "Very large payload - may cause performance issues"
+      },
+      renderBody: generateExpandedPreviewContent
     });
   }, [settings, hasLiveData, events, mockRequestData, isPreviewExpanded, estimatedSize, sizeWarningLevel, generateExpandedPreviewContent]);
 
@@ -767,13 +721,13 @@ const styles = StyleSheet.create({
     maxHeight: 300
   },
   markdownText: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 11,
     color: macOSColors.text.primary,
     lineHeight: 18
   },
   plaintextText: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 11,
     color: macOSColors.text.primary,
     lineHeight: 18
@@ -785,71 +739,6 @@ const styles = StyleSheet.create({
     marginRight: 8
   },
   // Collapsible preview styles
-  collapsedPreview: {
-    gap: 8
-  },
-  expandButton: {
-    backgroundColor: macOSColors.background.input,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    padding: 12
-  },
-  expandButtonContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 10
-  },
-  expandButtonTextContainer: {
-    flex: 1
-  },
-  expandButtonTitle: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: macOSColors.text.primary
-  },
-  expandButtonSubtitle: {
-    fontSize: 11,
-    color: macOSColors.text.secondary,
-    marginTop: 2
-  },
-  collapseButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 6,
-    paddingVertical: 8,
-    marginBottom: 8,
-    backgroundColor: macOSColors.background.hover,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default
-  },
-  collapseButtonText: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: macOSColors.text.secondary
-  },
-  sizeWarning: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    backgroundColor: macOSColors.semantic.warningBackground,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: macOSColors.semantic.warning + '30'
-  },
-  sizeWarningDanger: {
-    backgroundColor: macOSColors.semantic.errorBackground,
-    borderColor: macOSColors.semantic.error + '30'
-  },
-  sizeWarningText: {
-    fontSize: 11,
-    fontWeight: '500',
-    flex: 1
-  },
   // Gated container styles for free users
   gatedContainer: {
     flex: 1,

package/lib/module/network/components/NetworkEventDetailView.js

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useMemo, memo } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, FlaskConical, InlineCopyButton, macOSColors, night, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
+import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, FlaskConical, InlineCopyButton, macOSColors, night, useFeatureGate, UpgradeModal, monoFont } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration, formatHttpStatus } from "../utils/formatting";
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
@@ -869,12 +869,12 @@ const styles = StyleSheet.create({
   urlPath: {
     color: night.color.textSecondary,
     fontSize: 11,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   urlQueryString: {
     color: night.color.info,
     fontSize: 11,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   // Query Parameters - Collapsible section
   queryParamsCollapsible: {
@@ -951,7 +951,7 @@ const styles = StyleSheet.create({
   sizeValue: {
     color: night.color.info,
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   },
   /* ---- Timing phases ---- */
@@ -996,7 +996,7 @@ const styles = StyleSheet.create({
     width: 72,
     textAlign: "right",
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     color: night.color.text
   },
   // Collapsible section styles
@@ -1032,7 +1032,7 @@ const styles = StyleSheet.create({
   collapsibleCount: {
     color: night.color.textTertiary,
     fontSize: 11.5,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   collapsibleContent: {
     padding: 12
@@ -1106,7 +1106,7 @@ const styles = StyleSheet.create({
   filterOptionValue: {
     color: night.color.text,
     fontSize: 13,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   filterToggle: {
     paddingHorizontal: 10,

package/lib/module/network/components/NetworkEventItemCompact.js

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import { StyleSheet, View, Text } from "react-native";
-import { ChevronRight, Upload, Download, Clock, AlertCircle, Bookmark, FlaskConical, Pin, DevToolsCard, MethodBadge, TypeBadge, night, macOSColors } from "@buoy-gg/shared-ui";
+import { ChevronRight, Upload, Download, Clock, AlertCircle, Bookmark, FlaskConical, Pin, DevToolsCard, MethodBadge, TypeBadge, night, macOSColors, monoFont } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration } from "../utils/formatting";
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { useTickEveryMinute } from "../hooks/useTickEveryMinute";
@@ -316,7 +316,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: night.color.text,
     lineHeight: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   rightSection: {
     flexDirection: "row",
@@ -331,7 +331,7 @@ const styles = StyleSheet.create({
   bottomRightText: {
     fontSize: 9,
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   statusBadge: {
     paddingHorizontal: 4,
@@ -387,7 +387,7 @@ const styles = StyleSheet.create({
   sizeText: {
     fontSize: 8,
     color: night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   clientText: {
     fontSize: 8,

package/lib/module/network/components/NetworkFilterViewV3.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { CheckCircle, Clock, DynamicFilterView, Film, FileJson, FileText, Filter, Globe, Image, macOSColors, night, Music, XCircle } from "@buoy-gg/shared-ui";
+import { CheckCircle, Clock, DynamicFilterView, Film, FileJson, FileText, Filter, Globe, Image, macOSColors, night, Music, XCircle, monoFont } from "@buoy-gg/shared-ui";
 import { useCallback, useMemo, useState } from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -384,7 +384,7 @@ const styles = StyleSheet.create({
   },
   modeBadgeText: {
     fontSize: 9,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "700",
     letterSpacing: 0.5
   },
@@ -398,7 +398,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.3
   },
   modeToggleGroup: {
@@ -424,7 +424,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.3
   },
   modeToggleButtonTextActive: {

package/lib/module/network/components/NetworkHeaderLive.js

@@ -19,7 +19,7 @@
  */
 
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { Bookmark, CheckCircle, XCircle, Clock, Copy, Pin, Trash2, CopyButton, macOSColors, night, useLimit } from "@buoy-gg/shared-ui";
+import { Bookmark, CheckCircle, XCircle, Clock, Copy, Pin, Trash2, CopyButton, macOSColors, night, useLimit, monoFont } from "@buoy-gg/shared-ui";
 import { networkEventStore } from "../utils/networkEventStore";
 import { flagsForEventId, networkSavedStore, MAX_PINNED, MAX_SAVED } from "../utils/networkSavedStore";
 import { useNetworkSaved } from "../hooks/useNetworkSaved";
@@ -322,7 +322,7 @@ const styles = StyleSheet.create({
   headerChipValue: {
     fontSize: 12,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   headerActionButton: {
     width: 32,
@@ -361,6 +361,6 @@ const styles = StyleSheet.create({
     color: night.color.onAccent,
     fontSize: 9,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

package/lib/module/network/components/NetworkListScreen.js

@@ -14,7 +14,7 @@
 
 import { useCallback } from "react";
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { FlaskConical, Pin, Power, macOSColors, ToolEmptyState, resolveListEmptyState } from "@buoy-gg/shared-ui";
+import { FlaskConical, Pin, Power, macOSColors, ToolEmptyState, resolveListEmptyState, EVENT_LIST_PRESET, monoFont } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
 import { useNetworkEventList } from "../hooks/useNetworkEventList";
@@ -278,10 +278,8 @@ export function NetworkListScreen({
       showsVerticalScrollIndicator: true
       // Clipped cells falsely fail Detox's hittability check (known
       // RN+Detox issue), so e2e bundles (Metro started with
-      // EXPO_PUBLIC_E2E=1) turn clipping off. Inlined at bundle time;
-      // guarded so a non-inlining bundler keeps the prod behavior.
+      // EXPO_PUBLIC_E2E=1) turn clipping off — see EVENT_LIST_PRESET.
       ,
-      removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
       onEndReachedThreshold: 0.8
       // The list OWNS scrolling (NetworkModal passes
       // disableScrollWrapper while this screen is visible) so FlatList
@@ -290,18 +288,14 @@ export function NetworkListScreen({
       // rows: at the store's 500-event cap that measured 17 JS FPS /
       // 133% CPU / 1.4GB vs ~53 JS FPS / 52% / 360MB virtualized
       // (buoy-optimize batch 2026-07-06, batch-1783396983529-6l7w).
-      // Window/batch values are the batch's "tuned" winner.
+      // Window/batch values are the batch's "tuned" winner (EVENT_LIST_PRESET).
       ,
       scrollEnabled: true,
-      initialNumToRender: 12,
-      maxToRenderPerBatch: 8,
-      windowSize: 5,
-      updateCellsBatchingPeriod: 50
+      ...EVENT_LIST_PRESET,
       // Saving a request from the detail view changes a row's glyph
       // without changing `data`. VirtualizedList is a PureComponent, so
       // the Set has to be declared as a re-render marker rather than
       // relying on `renderItem` getting a fresh identity.
-      ,
       extraData: savedLiveIds,
       "sentry-label": "ignore network events list",
       ListFooterComponent: renderListFooter
@@ -373,7 +367,7 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "700",
     letterSpacing: 0.6,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   pinnedClear: {
     paddingHorizontal: 6,

package/lib/module/network/components/NetworkModal.js

@@ -1,8 +1,8 @@
 "use strict";
 
 import { useState, useRef, useEffect, useCallback } from "react";
-import { View, StyleSheet, TouchableOpacity, TextInput } from "react-native";
-import { Search, Filter, Bookmark, X, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, night, persistentStorage, NightSegmented, useFeatureGate, UpgradeModal, PowerToggleButton, useIgnoredPatterns, windowDragProps } from "@buoy-gg/shared-ui";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { Search, Filter, Bookmark, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, night, persistentStorage, NightSegmented, useFeatureGate, UpgradeModal, PowerToggleButton, useIgnoredPatterns, windowDragProps } from "@buoy-gg/shared-ui";
 import { NetworkFilterViewV3 } from "./NetworkFilterViewV3";
 import { TickProvider } from "../hooks/useTickEveryMinute";
 import { NetworkEventDetailView } from "./NetworkEventDetailView";
@@ -447,53 +447,24 @@ function NetworkModalInner({
         onBack: onBack
       }), /*#__PURE__*/_jsx(ModalHeader.Content, {
         title: "",
-        children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
-          style: styles.headerSearchContainer,
-          children: [/*#__PURE__*/_jsx(Search, {
-            size: 14,
-            color: night.color.textSecondary
-          }), /*#__PURE__*/_jsx(TextInput, {
-            ref: searchInputRef,
-            style: styles.headerSearchInput,
-            placeholder: "Search URL, method, operation, error...",
-            placeholderTextColor: night.color.placeholder,
-            value: searchText,
-            onChangeText: handleSearch,
-            onSubmitEditing: () => setIsSearchActive(false),
-            onBlur: () => {
-              if (!clearPressRef.current) setIsSearchActive(false);
-            },
-            "sentry-label": "ignore network search header",
-            accessibilityLabel: "Search network requests",
-            testID: "buoy-network-search-input",
-            autoCapitalize: "none",
-            autoCorrect: false,
-            returnKeyType: "search"
-          }), searchText.length > 0 ? /*#__PURE__*/_jsx(TouchableOpacity
-          // react-native-web delays press-in ~50ms by default (native
-          // fires it immediately), which would put it AFTER the blur.
-          , {
-            delayPressIn: 0,
-            onPressIn: () => {
-              clearPressRef.current = true;
-            },
-            onPressOut: () => {
-              clearPressRef.current = false;
-            },
-            onPress: () => {
-              handleSearch("");
-              setIsSearchActive(false);
-            },
-            "sentry-label": "ignore clear search header",
-            style: styles.headerSearchClear,
-            accessibilityRole: "button",
-            accessibilityLabel: "Clear search",
-            testID: "buoy-network-search-clear",
-            children: /*#__PURE__*/_jsx(X, {
-              size: 14,
-              color: night.color.textSecondary
-            })
-          }) : null]
+        children: isSearchActive ? /*#__PURE__*/_jsx(ModalHeader.Search, {
+          value: searchText,
+          onChangeText: handleSearch,
+          onCancel: () => {
+            handleSearch("");
+            setIsSearchActive(false);
+          },
+          onDismiss: () => setIsSearchActive(false),
+          dismissOnBlur: true,
+          clearOnlyWhenText: true,
+          placeholder: "Search URL, method, operation, error...",
+          accessibilityLabel: "Search network requests",
+          iconSize: 14,
+          testID: "buoy-network-search-input",
+          clearTestID: "buoy-network-search-clear",
+          inputProps: {
+            "sentry-label": "ignore network search header"
+          }
         }) : /*#__PURE__*/_jsx(NetworkHeaderBadges, {
           activeStatus: filter.status,
           onToggleStatus: toggleStatusFilter,
@@ -738,27 +709,6 @@ const styles = StyleSheet.create({
   },
   // Night chrome — the header is glass over the star field, so the search
   // field and action chips sit on the Everlights dark-glass fill.
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: night.radius.row,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   menuCopyRow: {
     paddingHorizontal: 6
   },

package/lib/module/network/components/NetworkOverrideEditor.js

@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from "react";
 import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
-import { ChevronDown, ChevronRight, macOSColors, useSafeAreaInsets } from "@buoy-gg/shared-ui";
+import { ChevronDown, ChevronRight, macOSColors, useSafeAreaInsets, monoFont } from "@buoy-gg/shared-ui";
 import Explorer from "./response-editor/Explorer";
 import { ResponseEditorContext } from "./response-editor/editorContext";
 import { NetworkNumberPrompt } from "./NetworkNumberPrompt";
@@ -678,7 +678,7 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     color: macOSColors.text.primary,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     minHeight: 40
   },
   bodyInput: {

package/lib/module/network/components/NetworkOverridesScreen.js

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { AlertCircle, AlertTriangle, DevToolsCard, EmptyState, MethodBadge, Plus, Trash2, macOSColors, useLimit } from "@buoy-gg/shared-ui";
+import { AlertCircle, AlertTriangle, DevToolsCard, EmptyState, MethodBadge, Plus, Trash2, macOSColors, useLimit, monoFont } from "@buoy-gg/shared-ui";
 import { useOverrideRules } from "../hooks/useOverrideRules";
 import { NetworkOverrideEditor } from "./NetworkOverrideEditor";
 import { overrideRulesStore } from "../overrides/overrideRulesStore";
@@ -489,7 +489,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: macOSColors.text.primary,
     lineHeight: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   urlTextOff: {
     color: macOSColors.text.muted

package/lib/module/network/components/NetworkSavedScreen.js

@@ -19,7 +19,7 @@
 
 import { useState } from "react";
 import { FlatList, StyleSheet, Text, TextInput, View, TouchableOpacity } from "react-native";
-import { Bookmark, CopyButton, Search, macOSColors, useLimit, ToolEmptyState, resolveListEmptyState } from "@buoy-gg/shared-ui";
+import { Bookmark, CopyButton, Search, macOSColors, useLimit, ToolEmptyState, resolveListEmptyState, EVENT_LIST_PRESET, monoFont } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
 import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
@@ -150,11 +150,8 @@ export function NetworkSavedScreen({
       keyExtractor: keyExtractor,
       contentContainerStyle: styles.listContent,
       showsVerticalScrollIndicator: true,
-      removeClippedSubviews: true,
       scrollEnabled: true,
-      initialNumToRender: 12,
-      maxToRenderPerBatch: 8,
-      windowSize: 5,
+      ...EVENT_LIST_PRESET,
       extraData: pinnedLiveIds,
       "sentry-label": "ignore saved requests list",
       ListFooterComponent: renderListFooter
@@ -180,7 +177,7 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "700",
     letterSpacing: 0.6,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   toolbarButton: {
     width: 26,