@buoy-gg/network 7.0.15 → 7.0.17

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

@@ -0,0 +1,457 @@
+"use strict";
+
+/**
+ * NetworkSavedScreen.web — DOM twin of NetworkSavedScreen.tsx.
+ *
+ * The SAVED screen — the network tool's favorites list. Everything here is
+ * read from the persisted saved store, never from the live event store: these
+ * requests survive a Clear, the 500-event cap, and an app restart. Identical
+ * prop contract, hook usage and derivation order as the native file — the
+ * data layer is REUSED, not forked (`useNetworkSaved`, `selectSavedEvents`,
+ * `generateNetworkCopyText` are all platform-free).
+ *
+ * Rows are the same row component the live list uses
+ * (`NetworkEventItemCompact.web`), so a saved request looks exactly like the
+ * request it was. Long-press here UNSAVES rather than pins — in this list
+ * "get rid of it" is the action the row affords (pinning stays on the detail
+ * header). Row tap opens the detail view via `onEventPress` — hosts wire it
+ * to `networkSelectionStore.select` and pass `fromSaved` to the detail
+ * screen, so the prev/next footer steps through THIS list (native behavior;
+ * `NetworkDetailStepper.web` already derives it from `selectSavedEvents`).
+ *
+ * Stable-tree contract (rule4): hooks run unconditionally, then the
+ * component returns null when not visible.
+ *
+ * shared-ui RN chrome is replicated as DOM with provenance (web consumers
+ * resolve `@buoy-gg/shared-ui` to a minimal shim):
+ *  - `macOSColors` / `buoyColors` — inlined verbatim subsets from
+ *    shared/src/ui/gameUI/constants/.
+ *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
+ *  - `CopyButton` — the DOM twin exported by DataViewer.web (same lazy
+ *    function-value contract, colors and 1500ms feedback as native).
+ *  - `NetworkUpgradeBanner` — inlined DOM twin, values from
+ *    NetworkUpgradeBanner.tsx + license/FeatureGate.tsx `proBadge` styles
+ *    (static gold-less "PRO" — the Weekend Pass variant reads
+ *    `useProAccess` from @buoy-gg/license, not part of the web port).
+ *
+ * Intentional deviations (all logged):
+ *  - FlatList virtualization → a plain scrolled div (same deal as
+ *    NetworkListScreen.web: MAX_SAVED caps the list at 50 rows, and the
+ *    window/batch tuning + `extraData` are FlatList-only concerns).
+ *  - `CopySettings` is imported from the platform-free
+ *    `generateNetworkCopyText` module (the native screen imports it from
+ *    NetworkCopySettingsView.tsx, which would drag react-native in).
+ *
+ * @platform React DOM Web
+ */
+
+import { useState } from "react";
+import { NetworkEventItemCompact } from "./NetworkEventItemCompact.web";
+import { CopyButton } from "./DataViewer.web";
+import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
+import { selectSavedEvents } from "../utils/selectSavedEvents";
+import { useNetworkSaved } from "../hooks/useNetworkSaved";
+import { FREE_TIER_SAVED_LIMIT } from "../utils/networkSavedStore";
+
+// =============================
+// Native palettes (provenance)
+// =============================
+
+/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const macOSColors = {
+  background: {
+    input: "#26262A"
+  },
+  border: {
+    default: "#2D2D2F"
+  },
+  text: {
+    primary: "#F5F5F7",
+    secondary: "#A1A1A6",
+    muted: "#8E8E93",
+    disabled: "#9E9EA0"
+  },
+  semantic: {
+    success: "#34C759",
+    error: "#FF453A",
+    debug: "#BF5AF2"
+  }
+};
+
+/** buoyColors subset — shared/src/ui/gameUI/constants/gameUIColors.ts (macOS theme), verbatim. */
+const buoy = {
+  card: "#1A1A1A",
+  text: "#E0E0E0",
+  textMuted: "#888888",
+  primary: "#20C997"
+};
+
+// =============================
+// Inline lucide icons (shared-ui icons are lucide re-exports)
+// =============================
+
+function Svg({
+  size = 14,
+  color = "currentColor",
+  children
+}) {
+  return /*#__PURE__*/_jsx("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      flexShrink: 0,
+      display: "block"
+    },
+    children: children
+  });
+}
+const Bookmark = p => /*#__PURE__*/_jsx(Svg, {
+  ...p,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"
+  })
+});
+const Search = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("circle", {
+    cx: "11",
+    cy: "11",
+    r: "8"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m21 21-4.3-4.3"
+  })]
+});
+const Zap = p => /*#__PURE__*/_jsx(Svg, {
+  ...p,
+  children: /*#__PURE__*/_jsx("polygon", {
+    points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2"
+  })
+});
+
+// =============================
+// NetworkUpgradeBanner DOM twin (provenance: NetworkUpgradeBanner.tsx +
+// license/FeatureGate.tsx proBadge styles — see the deviations log)
+// =============================
+
+function NetworkUpgradeBannerWeb({
+  title,
+  subtitle,
+  onPress
+}) {
+  return /*#__PURE__*/_jsxs("button", {
+    type: "button",
+    style: styles.upgradeBanner,
+    onClick: onPress,
+    children: [/*#__PURE__*/_jsxs("span", {
+      style: styles.upgradeContent,
+      children: [/*#__PURE__*/_jsxs("span", {
+        style: styles.upgradeLeft,
+        children: [/*#__PURE__*/_jsx(Zap, {
+          size: 16,
+          color: buoy.primary
+        }), /*#__PURE__*/_jsx("span", {
+          style: styles.upgradeTitle,
+          children: title
+        })]
+      }), /*#__PURE__*/_jsx("span", {
+        style: styles.proBadge,
+        children: "PRO"
+      })]
+    }), /*#__PURE__*/_jsx("span", {
+      style: styles.upgradeSubtitle,
+      children: subtitle
+    })]
+  });
+}
+
+// =============================
+// Screen (structure mirrors the native file 1:1)
+// =============================
+
+function EmptyState() {
+  return /*#__PURE__*/_jsxs("div", {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/_jsx(Bookmark, {
+      size: 32,
+      color: macOSColors.text.muted
+    }), /*#__PURE__*/_jsx("div", {
+      style: styles.emptyTitle,
+      children: "No saved requests"
+    }), /*#__PURE__*/_jsx("div", {
+      style: styles.emptyText,
+      children: "Open a request and tap the bookmark to keep it here \u2014 saved requests survive Clear and app restarts."
+    })]
+  });
+}
+export function NetworkSavedScreen({
+  visible,
+  isPro,
+  copySettings,
+  search: searchProp,
+  onSearchChange,
+  onEventPress,
+  onUpgradePress
+}) {
+  const {
+    savedRecords,
+    pinnedLiveIds,
+    toggleSave,
+    clearSaved
+  } = useNetworkSaved();
+  const [searchState, setSearchState] = useState("");
+  const controlled = searchProp != null && onSearchChange != null;
+  const search = controlled ? searchProp : searchState;
+  const setSearch = controlled ? onSearchChange : setSearchState;
+  if (!visible) return null;
+
+  // Shared with the detail footer, so "Next" can't disagree with the row below.
+  const {
+    events: filtered,
+    lockedCount
+  } = selectSavedEvents(savedRecords, isPro, search);
+  const handleLongPress = event => {
+    toggleSave(event);
+  };
+  const renderListFooter = () => {
+    if (lockedCount === 0) return null;
+    return /*#__PURE__*/_jsx(NetworkUpgradeBannerWeb, {
+      title: `${lockedCount} saved ${lockedCount === 1 ? "request" : "requests"} locked`,
+      subtitle: `Free keeps ${FREE_TIER_SAVED_LIMIT}. Upgrade to Pro to unlock the rest.`,
+      onPress: onUpgradePress
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: styles.toolbar,
+      children: [/*#__PURE__*/_jsx(Bookmark, {
+        size: 11,
+        color: macOSColors.semantic.debug
+      }), /*#__PURE__*/_jsxs("span", {
+        style: styles.toolbarTitle,
+        children: ["SAVED \xB7 ", savedRecords.length, isPro ? "" : `/${FREE_TIER_SAVED_LIMIT}`]
+      }), isPro ? /*#__PURE__*/_jsx(CopyButton
+      // Lazy value, resolved at press time — no string is built per
+      // render, and it always reflects the current list.
+      , {
+        value: () => generateNetworkCopyText(filtered, copySettings),
+        size: 13,
+        buttonStyle: {
+          ...styles.toolbarButton,
+          ...(filtered.length === 0 ? styles.toolbarButtonDisabled : null)
+        },
+        colors: {
+          idle: macOSColors.text.secondary,
+          success: macOSColors.semantic.success,
+          error: macOSColors.semantic.error
+        },
+        "aria-label": "Copy saved requests"
+      }) : null, /*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: clearSaved,
+        style: styles.toolbarClear,
+        disabled: savedRecords.length === 0,
+        children: /*#__PURE__*/_jsx("span", {
+          style: {
+            ...styles.toolbarClearText,
+            ...(savedRecords.length === 0 ? styles.toolbarClearTextDisabled : null)
+          },
+          children: "Clear all"
+        })
+      })]
+    }), savedRecords.length > 0 ? /*#__PURE__*/_jsxs("div", {
+      style: styles.searchRow,
+      children: [/*#__PURE__*/_jsx(Search, {
+        size: 13,
+        color: macOSColors.text.secondary
+      }), /*#__PURE__*/_jsx("input", {
+        style: styles.searchInput,
+        placeholder: "Search saved requests\u2026",
+        value: search,
+        onChange: e => setSearch(e.target.value),
+        "aria-label": "Search saved requests",
+        autoCapitalize: "none",
+        autoCorrect: "off",
+        autoComplete: "off",
+        spellCheck: false
+      })]
+    }) : null, savedRecords.length === 0 ? /*#__PURE__*/_jsx(EmptyState, {}) :
+    /*#__PURE__*/
+    // DEVIATION: FlatList → plain scrolled div (see file header). The
+    // list still OWNS scrolling — hosts render this screen without a
+    // scroll wrapper, same as native.
+    _jsx("div", {
+      style: styles.list,
+      "aria-label": "Saved requests list",
+      children: /*#__PURE__*/_jsxs("div", {
+        style: styles.listContent,
+        children: [filtered.map(item => /*#__PURE__*/_jsx(NetworkEventItemCompact, {
+          event: item,
+          onPress: onEventPress,
+          onLongPress: handleLongPress,
+          saved: true,
+          pinned: pinnedLiveIds.has(item.id)
+        }, item.id)), renderListFooter()]
+      })
+    })]
+  });
+}
+
+// Values mirror the native StyleSheet block 1:1.
+const styles = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minHeight: 0
+  },
+  toolbar: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    padding: "10px 20px 6px"
+  },
+  toolbarTitle: {
+    flex: 1,
+    color: macOSColors.semantic.debug,
+    fontSize: 10,
+    fontWeight: 700,
+    letterSpacing: 0.6,
+    fontFamily: "ui-monospace, Menlo, monospace",
+    textAlign: "left"
+  },
+  toolbarButton: {
+    width: 26,
+    height: 26,
+    boxSizing: "border-box",
+    borderRadius: 6,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  /** Native passes `disabled` to CopyButton; the DOM twin has no disabled
+   * prop, so the toolbar dims + inerts it the same way native renders it. */
+  toolbarButtonDisabled: {
+    opacity: 0.55,
+    pointerEvents: "none"
+  },
+  toolbarClear: {
+    padding: "2px 6px",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    margin: 0
+  },
+  toolbarClearText: {
+    color: macOSColors.text.muted,
+    fontSize: 10
+  },
+  toolbarClearTextDisabled: {
+    color: macOSColors.text.disabled
+  },
+  searchRow: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    margin: "0 12px 8px",
+    padding: "5px 10px",
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 10,
+    border: `1px solid ${macOSColors.border.default}`
+  },
+  searchInput: {
+    flex: 1,
+    minWidth: 0,
+    color: macOSColors.text.primary,
+    fontSize: 13,
+    padding: "2px 0",
+    border: "none",
+    outline: "none",
+    background: "transparent",
+    fontFamily: "inherit"
+  },
+  list: {
+    flex: 1,
+    minHeight: 0,
+    overflowY: "auto"
+  },
+  listContent: {
+    paddingTop: 4
+  },
+  emptyState: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "40px 24px"
+  },
+  emptyTitle: {
+    color: macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: 600,
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: macOSColors.text.muted,
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: "17px"
+  },
+  // NetworkUpgradeBanner.tsx values (buoyColors), verbatim.
+  upgradeBanner: {
+    display: "block",
+    width: "calc(100% - 24px)",
+    boxSizing: "border-box",
+    backgroundColor: buoy.card,
+    borderRadius: 10,
+    border: `1px solid ${buoy.primary}40`,
+    padding: 12,
+    margin: "12px 12px 34px",
+    textAlign: "left",
+    cursor: "pointer",
+    fontFamily: "inherit"
+  },
+  upgradeContent: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4
+  },
+  upgradeLeft: {
+    display: "inline-flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  upgradeTitle: {
+    color: buoy.text,
+    fontSize: 13,
+    fontWeight: 600
+  },
+  upgradeSubtitle: {
+    display: "block",
+    color: buoy.textMuted,
+    fontSize: 11
+  },
+  // license/FeatureGate.tsx `proBadge`/`proBadgeText`, verbatim.
+  proBadge: {
+    display: "inline-flex",
+    backgroundColor: `${buoy.primary}15`,
+    borderRadius: 4,
+    border: `1px solid ${buoy.primary}40`,
+    padding: "2px 6px",
+    fontSize: 10,
+    fontWeight: 700,
+    color: buoy.primary,
+    letterSpacing: 0.5
+  }
+};