@buoy-gg/network 7.0.4 → 7.0.6

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

@@ -4,11 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NetworkClearButton = NetworkClearButton;
+exports.NetworkDetailPinActions = NetworkDetailPinActions;
 exports.NetworkHeaderBadges = NetworkHeaderBadges;
 exports.NetworkHeaderCopyButton = NetworkHeaderCopyButton;
+exports.NetworkSavedButton = NetworkSavedButton;
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _networkEventStore = require("../utils/networkEventStore");
+var _networkSavedStore = require("../utils/networkSavedStore");
+var _useNetworkSaved = require("../hooks/useNetworkSaved");
 var _useNetworkBadgeCounts = require("../hooks/useNetworkBadgeCounts");
 var _useNetworkHasMatches = require("../hooks/useNetworkHasMatches");
 var _generateNetworkCopyText = require("../utils/generateNetworkCopyText");
@@ -104,6 +108,104 @@ function NetworkClearButton({
     })
   });
 }
+/**
+ * Entry point to the Saved screen, with its count. A self-subscribing leaf so
+ * the badge tracks the store without the modal header re-rendering.
+ */
+function NetworkSavedButton({
+  onPress
+}) {
+  const {
+    savedRecords
+  } = (0, _useNetworkSaved.useNetworkSaved)();
+  const count = savedRecords.length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    "sentry-label": "ignore open saved",
+    onPress: onPress,
+    accessibilityLabel: "Saved requests",
+    style: styles.headerActionButton,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
+      size: 14,
+      color: count > 0 ? _sharedUi.macOSColors.semantic.debug : _sharedUi.macOSColors.text.muted
+    }), count > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.savedBadge,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.savedBadgeText,
+        children: count > 99 ? "99+" : count
+      })
+    }) : null]
+  });
+}
+/**
+ * Pin + Save toggles for the request-detail header.
+ *
+ * Lives here, as a self-subscribing leaf, for two reasons. First the usual
+ * one: the modal root stays free of subscriptions. Second, and the real
+ * constraint — these buttons deliberately do NOT go inside
+ * `NetworkEventDetailView`, because the Events tool renders that same detail
+ * view (UnifiedEventDetail) and has no saved store behind it. The header is
+ * the Network tool's own surface, so the feature stays where it belongs.
+ *
+ * The event object is resolved at PRESS time rather than held as a prop: the
+ * live store has the fresh copy while the request is in flight, and the saved
+ * store is the only copy once it has been cleared or aged out.
+ */
+function NetworkDetailPinActions({
+  eventId,
+  isPro,
+  onUpgradePress
+}) {
+  const state = (0, _useNetworkSaved.useNetworkSaved)();
+  const {
+    pinned,
+    saved
+  } = (0, _networkSavedStore.flagsForEventId)(state, eventId);
+  const savedLimit = isPro ? _networkSavedStore.MAX_SAVED : _networkSavedStore.FREE_TIER_SAVED_LIMIT;
+  const atPinCap = !pinned && state.pinnedEvents.length >= _networkSavedStore.MAX_PINNED;
+  const atSavedCap = !saved && state.savedRecords.length >= savedLimit;
+  const resolveEvent = () => {
+    if (!eventId) return null;
+    return _networkEventStore.networkEventStore.getEvents().find(event => event.id === eventId) ?? _networkSavedStore.networkSavedStore.getEventById(eventId);
+  };
+  const handlePin = () => {
+    const event = resolveEvent();
+    if (event) state.togglePin(event);
+  };
+  const handleSave = () => {
+    // Hitting the free ceiling is an upgrade moment, not a dead button.
+    if (atSavedCap && !isPro) {
+      onUpgradePress();
+      return;
+    }
+    const event = resolveEvent();
+    if (event) state.toggleSave(event);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      "sentry-label": "ignore pin request",
+      onPress: handlePin,
+      disabled: atPinCap,
+      accessibilityLabel: pinned ? "Unpin request" : "Pin request",
+      accessibilityHint: atPinCap ? `Pin limit reached (${_networkSavedStore.MAX_PINNED})` : undefined,
+      style: [styles.headerActionButton, pinned && styles.headerActionButtonActive, atPinCap && styles.headerActionButtonDisabled],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
+        size: 14,
+        color: pinned ? _sharedUi.macOSColors.semantic.info : atPinCap ? _sharedUi.macOSColors.text.disabled : _sharedUi.macOSColors.text.secondary
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      "sentry-label": "ignore save request",
+      onPress: handleSave,
+      disabled: atSavedCap && isPro,
+      accessibilityLabel: saved ? "Remove from saved" : "Save request",
+      accessibilityHint: atSavedCap && isPro ? `Saved limit reached (${_networkSavedStore.MAX_SAVED})` : undefined,
+      style: [styles.headerActionButton, saved && styles.headerActionButtonSaved, atSavedCap && isPro && styles.headerActionButtonDisabled],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
+        size: 14,
+        color: saved ? _sharedUi.macOSColors.semantic.debug : atSavedCap && isPro ? _sharedUi.macOSColors.text.disabled : _sharedUi.macOSColors.text.secondary
+      })
+    })]
+  });
+}
 /**
  * Copy-all-requests button. Subscribes to a flip-guarded boolean (its
  * enabled state); the copy text is generated at PRESS time from a live
@@ -155,6 +257,10 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     gap: 8
   },
+  /**
+   * Counter chips and toolbar buttons carry a permanent outline; the fill marks
+   * the active filter.
+   */
   headerChip: {
     flexDirection: "row",
     alignItems: "center",
@@ -195,5 +301,31 @@ const styles = _reactNative.StyleSheet.create({
   },
   headerActionButtonDisabled: {
     opacity: 0.55
+  },
+  headerActionButtonActive: {
+    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
+    borderColor: _sharedUi.macOSColors.semantic.info + "50"
+  },
+  headerActionButtonSaved: {
+    backgroundColor: _sharedUi.macOSColors.semantic.debug + "1A",
+    borderColor: _sharedUi.macOSColors.semantic.debug + "50"
+  },
+  savedBadge: {
+    position: "absolute",
+    top: -3,
+    right: -3,
+    minWidth: 14,
+    height: 14,
+    paddingHorizontal: 3,
+    borderRadius: 7,
+    backgroundColor: _sharedUi.macOSColors.semantic.debug,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  savedBadgeText: {
+    color: "#FFFFFF",
+    fontSize: 9,
+    fontWeight: "700",
+    fontFamily: "monospace"
   }
 });

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

@@ -4,10 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NetworkListScreen = NetworkListScreen;
+var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _NetworkEventItemCompact = require("./NetworkEventItemCompact");
+var _NetworkUpgradeBanner = require("./NetworkUpgradeBanner");
 var _useNetworkEventList = require("../hooks/useNetworkEventList");
+var _useNetworkSaved = require("../hooks/useNetworkSaved");
+var _withPinnedFirst = require("../utils/withPinnedFirst");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * The network tool's LIST screen — owns the event-store subscription, the
@@ -39,6 +43,54 @@ function EmptyState({
   });
 }
 const keyExtractor = item => item.id;
+
+/**
+ * The PINNED strip above the live list.
+ *
+ * It renders OUTSIDE the FlatList on purpose. The list's window/batch values
+ * are a measured configuration (see the FlatList below), and merging pins into
+ * `data` would mean sentinel items in `keyExtractor`/`renderItem` and a
+ * section boundary that moves as events arrive. Keeping pins in their own
+ * bounded strip (capped at MAX_PINNED in the store) leaves that tuning
+ * untouched — and makes "pins ignore the filters" fall out for free, because
+ * this strip is never handed the filter.
+ */
+function PinnedSection({
+  events,
+  onEventPress,
+  onLongPress,
+  savedLiveIds,
+  onClearPinned
+}) {
+  if (events.length === 0) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.pinnedSection,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.pinnedHeader,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
+        size: 11,
+        color: _sharedUi.macOSColors.semantic.info
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.pinnedTitle,
+        children: ["PINNED \xB7 ", events.length]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onClearPinned,
+        "sentry-label": "ignore unpin all",
+        style: styles.pinnedClear,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.pinnedClearText,
+          children: "Unpin all"
+        })
+      })]
+    }), events.map(event => /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventItemCompact.NetworkEventItemCompact, {
+      event: event,
+      onPress: onEventPress,
+      onLongPress: onLongPress,
+      pinned: true,
+      saved: savedLiveIds.has(event.id)
+    }, event.id))]
+  });
+}
 function NetworkListScreen({
   visible,
   paused,
@@ -59,42 +111,48 @@ function NetworkListScreen({
     paused: paused || !visible,
     isPro
   });
+
+  // Pins come from the persisted saved store, NOT from the live list — that is
+  // what lets a pinned failure survive Clear, the 500-event cap and a reload.
+  const {
+    pinnedEvents,
+    pinnedLiveIds,
+    savedLiveIds,
+    togglePin,
+    clearPinned
+  } = (0, _useNetworkSaved.useNetworkSaved)();
+  const {
+    pinned,
+    rest
+  } = (0, _withPinnedFirst.splitPinned)(visibleEvents, pinnedEvents, pinnedLiveIds);
+
+  // Stable identity: handed to memoized rows.
+  const handleLongPress = (0, _react.useCallback)(event => {
+    togglePin(event);
+  }, [togglePin]);
   if (!visible) return null;
   const isEnabled = !paused;
   const renderItem = ({
     item
   }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventItemCompact.NetworkEventItemCompact, {
     event: item,
-    onPress: onEventPress
+    onPress: onEventPress,
+    onLongPress: handleLongPress,
+    saved: savedLiveIds.has(item.id)
   });
   const renderListFooter = () => {
     if (!hasLockedEvents) return null;
     const isSearching = searchText.length > 0;
     const bannerText = isSearching ? `${lockedEventCount} matching ${lockedEventCount === 1 ? "request" : "requests"} in locked history` : `${lockedEventCount} requests locked`;
     const subtextMessage = isSearching ? "Upgrade to Pro to search your full request history" : "Upgrade to Pro to unlock full request history";
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-      style: styles.limitBanner,
-      onPress: onUpgradePress,
-      activeOpacity: 0.8,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.limitBannerContent,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.limitBannerLeft,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-            size: 16,
-            color: "#20C997"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.limitBannerText,
-            children: bannerText
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProBadge, {})]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.limitBannerSubtext,
-        children: subtextMessage
-      })]
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkUpgradeBanner.NetworkUpgradeBanner, {
+      title: bannerText,
+      subtitle: subtextMessage,
+      onPress: onUpgradePress
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.root,
     children: [!isEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.disabledBanner,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
@@ -104,8 +162,14 @@ function NetworkListScreen({
         style: styles.disabledText,
         children: "Network interception is disabled"
       })]
-    }) : null, visibleEvents.length > 0 || hasLockedEvents ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-      data: visibleEvents,
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedSection, {
+      events: pinned,
+      onEventPress: onEventPress,
+      onLongPress: handleLongPress,
+      savedLiveIds: savedLiveIds,
+      onClearPinned: clearPinned
+    }), rest.length > 0 || hasLockedEvents ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      data: rest,
       renderItem: renderItem,
       keyExtractor: keyExtractor,
       contentContainerStyle: styles.listContent,
@@ -125,15 +189,59 @@ function NetworkListScreen({
       initialNumToRender: 12,
       maxToRenderPerBatch: 8,
       windowSize: 5,
-      updateCellsBatchingPeriod: 50,
+      updateCellsBatchingPeriod: 50
+      // 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
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {
+    }) : pinned.length > 0 ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {
       isEnabled: isEnabled
     })]
   });
 }
 const styles = _reactNative.StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 0
+  },
+  /**
+   * The strip is separated from the live list by a real rule, not just space:
+   * these rows do NOT obey the filters, and the boundary is what tells the
+   * user why a request they just filtered out is still on screen.
+   */
+  pinnedSection: {
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.border.default,
+    paddingBottom: 4
+  },
+  pinnedHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    paddingBottom: 6
+  },
+  pinnedTitle: {
+    flex: 1,
+    color: _sharedUi.macOSColors.semantic.info,
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.6,
+    fontFamily: "monospace"
+  },
+  pinnedClear: {
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  pinnedClearText: {
+    color: _sharedUi.macOSColors.text.muted,
+    fontSize: 10
+  },
   disabledBanner: {
     flexDirection: "row",
     alignItems: "center",
@@ -169,35 +277,5 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.macOSColors.text.muted,
     fontSize: 12,
     textAlign: "center"
-  },
-  limitBanner: {
-    backgroundColor: "#1A1A1A",
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: "#20C997" + "40",
-    padding: 12,
-    marginHorizontal: 12,
-    marginTop: 12,
-    marginBottom: 34
-  },
-  limitBannerContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 4
-  },
-  limitBannerLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  limitBannerText: {
-    color: "#E0E0E0",
-    fontSize: 13,
-    fontWeight: "600"
-  },
-  limitBannerSubtext: {
-    color: "#888888",
-    fontSize: 11
   }
 });