@buoy-gg/impersonate 1.0.3-beta.0

package/lib/commonjs/impersonate/components/ImpersonateBanner.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImpersonateBanner = ImpersonateBanner;
+exports.ImpersonateBannerMinimal = ImpersonateBannerMinimal;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _impersonateStore = require("../utils/impersonateStore");
+var _UserAvatar = require("./UserAvatar");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * ImpersonateBanner Component
+ *
+ * A floating banner that shows when impersonation is active.
+ * Features polished design with avatar and elegant animations.
+ * Can be positioned at top or bottom of the screen.
+ */
+
+/**
+ * Floating banner showing impersonation status
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <>
+ *       <MainContent />
+ *       <ImpersonateBanner
+ *         position="top"
+ *         offset={60}
+ *         onPress={() => openImpersonateModal()}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+function ImpersonateBanner({
+  onPress,
+  onStopPress,
+  position = "top",
+  offset = 50
+}) {
+  const state = (0, _react.useSyncExternalStore)(_impersonateStore.impersonateStore.subscribe, _impersonateStore.impersonateStore.getSnapshot, _impersonateStore.impersonateStore.getSnapshot);
+
+  // Don't render if not impersonating or banner is disabled
+  if (!state.isActive || !state.currentUser || !state.showBanner) {
+    return null;
+  }
+  const handlePauseResume = async () => {
+    if (state.isPaused) {
+      await _impersonateStore.impersonateStore.resumeImpersonation();
+    } else {
+      await _impersonateStore.impersonateStore.pauseImpersonation();
+    }
+  };
+  const displayName = state.currentUser.displayName || state.currentUser.email || state.currentUser.id;
+  const positionStyle = position === "top" ? {
+    top: offset
+  } : {
+    bottom: offset
+  };
+  const handleStop = async () => {
+    await _impersonateStore.impersonateStore.stopImpersonation();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, positionStyle],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.banner,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: styles.userSection,
+        onPress: onPress,
+        activeOpacity: 0.7,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_UserAvatar.UserAvatar, {
+          userId: state.currentUser.id,
+          name: displayName,
+          size: "small",
+          showActiveIndicator: false
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.userName, state.isPaused && styles.userNamePaused],
+          numberOfLines: 1,
+          children: displayName
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+        isEnabled: !state.isPaused,
+        onToggle: handlePauseResume,
+        size: "small",
+        accessibilityLabel: "Toggle impersonation"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.closeButton,
+        onPress: handleStop,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+          size: 12,
+          color: "rgba(255, 255, 255, 0.5)"
+        })
+      })]
+    })
+  });
+}
+
+/**
+ * Minimal banner variant - just an indicator badge
+ */
+function ImpersonateBannerMinimal({
+  onPress
+}) {
+  const state = (0, _react.useSyncExternalStore)(_impersonateStore.impersonateStore.subscribe, _impersonateStore.impersonateStore.getSnapshot, _impersonateStore.impersonateStore.getSnapshot);
+  if (!state.isActive || !state.currentUser) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: styles.minimalBanner,
+    onPress: onPress,
+    activeOpacity: 0.8,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.minimalDot
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.minimalText,
+      children: "IMP"
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    alignItems: "center",
+    zIndex: 9999,
+    pointerEvents: "box-none"
+  },
+  banner: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(20, 20, 20, 0.94)",
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.success + "40",
+    borderRadius: 22,
+    paddingVertical: 7,
+    paddingLeft: 7,
+    paddingRight: 10,
+    gap: 10,
+    marginTop: 3,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 6
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 14,
+    elevation: 10
+  },
+  userSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  userName: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#fff",
+    maxWidth: 180
+  },
+  userNamePaused: {
+    opacity: 0.6
+  },
+  closeButton: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: -4
+  },
+  // Minimal variant
+  minimalBanner: {
+    position: "absolute",
+    top: 60,
+    right: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(26, 26, 26, 0.92)",
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.success + "35",
+    borderRadius: 12,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    gap: 5,
+    zIndex: 9999,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+    elevation: 4
+  },
+  minimalDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: _sharedUi.buoyColors.success
+  },
+  minimalText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.success,
+    letterSpacing: 0.5
+  }
+});

package/lib/commonjs/impersonate/components/ImpersonateHistoryList.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImpersonateHistoryList = ImpersonateHistoryList;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _UserCard = require("./UserCard");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * ImpersonateHistoryList Component
+ *
+ * List of recently impersonated users for quick switching.
+ * Uses polished UserCard component for consistent styling.
+ */
+
+function ImpersonateHistoryList({
+  history,
+  currentUserId,
+  onSelectUser,
+  onStopImpersonation,
+  onRemoveFromHistory,
+  onClearHistory
+}) {
+  const renderHistoryItem = (0, _react.useCallback)(({
+    item
+  }) => {
+    const {
+      user,
+      lastUsedAt
+    } = item;
+    const isActive = currentUserId === user.id;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_UserCard.UserCard, {
+      user: user,
+      isActive: isActive,
+      onPress: () => !isActive && onSelectUser(user),
+      onStop: isActive ? onStopImpersonation : undefined,
+      onRemove: onRemoveFromHistory ? () => onRemoveFromHistory(user.id) : undefined,
+      showRemoveButton: !!onRemoveFromHistory,
+      lastUsedTime: (0, _sharedUi.formatRelativeTime)(new Date(lastUsedAt))
+    });
+  }, [currentUserId, onSelectUser, onStopImpersonation, onRemoveFromHistory]);
+  if (history.length === 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.emptyContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.emptyIcon,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
+          size: 28,
+          color: _sharedUi.buoyColors.textMuted
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.emptyTitle,
+        children: "No History"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.emptyDescription,
+        children: "Users you impersonate will appear here for quick access"
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.headerRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.headerTitle,
+        children: "Recent"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.headerBadge,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.headerBadgeText,
+          children: history.length
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.headerSpacer
+      }), onClearHistory && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.clearButton,
+        onPress: onClearHistory,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+          size: 12,
+          color: _sharedUi.buoyColors.textMuted
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      data: history,
+      keyExtractor: item => item.user.id,
+      renderItem: renderHistoryItem,
+      ItemSeparatorComponent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.separator
+      }),
+      contentContainerStyle: styles.listContent,
+      showsVerticalScrollIndicator: false
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+    gap: 8
+  },
+  headerTitle: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  headerBadge: {
+    backgroundColor: _sharedUi.buoyColors.hover,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  headerBadgeText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted
+  },
+  headerSpacer: {
+    flex: 1
+  },
+  clearButton: {
+    width: 24,
+    height: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: _sharedUi.buoyColors.hover,
+    borderRadius: 4
+  },
+  listContent: {
+    paddingBottom: 20
+  },
+  separator: {
+    height: 8
+  },
+  emptyContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 32,
+    paddingVertical: 48
+  },
+  emptyIcon: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: _sharedUi.buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 16
+  },
+  emptyTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text,
+    marginBottom: 6
+  },
+  emptyDescription: {
+    fontSize: 14,
+    color: _sharedUi.buoyColors.textSecondary,
+    textAlign: "center"
+  }
+});

package/lib/commonjs/impersonate/components/ImpersonateModal.js

@@ -0,0 +1,304 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImpersonateModal = ImpersonateModal;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _useImpersonate = require("../hooks/useImpersonate");
+var _useAutoClearReactQuery = require("../hooks/useAutoClearReactQuery");
+var _useAutoClearRedux = require("../hooks/useAutoClearRedux");
+var _useAutoClearAsyncStorage = require("../hooks/useAutoClearAsyncStorage");
+var _UserSearchView = require("./UserSearchView");
+var _ImpersonateHistoryList = require("./ImpersonateHistoryList");
+var _DataNukeSettings = require("./DataNukeSettings");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * ImpersonateModal Component
+ *
+ * Main modal for the impersonation tool. Uses JsModal with ModalHeader
+ * pattern matching other Buoy dev tools (Network, Storage, etc.).
+ */
+
+// Type assertion to work around React types compatibility issue with memo components
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const JsModal = _sharedUi.JsModal;
+
+// Local Tab type (matches shared-ui's TabSelector)
+
+const ALL_TABS = [{
+  key: "search",
+  label: "Search"
+}, {
+  key: "history",
+  label: "History"
+}, {
+  key: "settings",
+  label: "Settings"
+}];
+const TABS_WITHOUT_SETTINGS = [{
+  key: "search",
+  label: "Search"
+}, {
+  key: "history",
+  label: "History"
+}];
+function ImpersonateModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  onSearchUsers,
+  onClearReactQuery,
+  onClearRedux,
+  onClearAsyncStorage,
+  onClearMMKV,
+  showSettingsTab = true
+}) {
+  // Select tabs based on showSettingsTab prop
+  const tabs = showSettingsTab ? ALL_TABS : TABS_WITHOUT_SETTINGS;
+  const [activeTab, setActiveTab] = (0, _react.useState)("search");
+  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  const [searchText, setSearchText] = (0, _react.useState)("");
+  const searchInputRef = (0, _react.useRef)(null);
+
+  // Auto-detect React Query and get clear function if user didn't provide one
+  const {
+    clearCache: autoClearReactQuery,
+    isAvailable: isReactQueryDetected
+  } = (0, _useAutoClearReactQuery.useAutoClearReactQuery)();
+
+  // Auto-detect Redux and get reset function if user didn't provide one
+  const {
+    resetStore: autoClearRedux,
+    isAvailable: isReduxDetected
+  } = (0, _useAutoClearRedux.useAutoClearRedux)();
+
+  // Auto-detect AsyncStorage and get clear function if user didn't provide one
+  const {
+    clearStorage: autoClearAsyncStorage,
+    isAvailable: isAsyncStorageDetected
+  } = (0, _useAutoClearAsyncStorage.useAutoClearAsyncStorage)();
+
+  // Use user-provided callbacks, or fall back to auto-detected ones
+  const effectiveClearReactQuery = onClearReactQuery ?? autoClearReactQuery ?? undefined;
+  const effectiveClearRedux = onClearRedux ?? autoClearRedux ?? undefined;
+  const effectiveClearAsyncStorage = onClearAsyncStorage ?? autoClearAsyncStorage ?? undefined;
+
+  // Detection status for settings display
+  // Shows "detected" if either user provided callback OR auto-detected
+  const detectionStatus = {
+    reactQuery: !!onClearReactQuery || isReactQueryDetected,
+    redux: !!onClearRedux || isReduxDetected,
+    asyncStorage: !!onClearAsyncStorage || isAsyncStorageDetected,
+    mmkv: !!onClearMMKV // TODO: implement auto-detection
+  };
+  const {
+    isActive,
+    currentUser,
+    headerKey,
+    dataNukeSettings,
+    showBanner,
+    searchQuery,
+    searchResults,
+    isSearching,
+    searchError,
+    searchUsers,
+    startImpersonation,
+    stopImpersonation,
+    updateHeaderKey,
+    updateDataNukeSettings,
+    updateShowBanner,
+    history,
+    removeFromHistory,
+    clearHistory
+  } = (0, _useImpersonate.useImpersonate)({
+    onSearchUsers,
+    onClearReactQuery: effectiveClearReactQuery,
+    onClearRedux: effectiveClearRedux,
+    onClearAsyncStorage: effectiveClearAsyncStorage,
+    onClearMMKV
+  });
+
+  // Focus input when search becomes active
+  (0, _react.useEffect)(() => {
+    if (isSearchActive && searchInputRef.current) {
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 100);
+    }
+  }, [isSearchActive]);
+
+  // Reset to search tab if settings tab is hidden while active
+  (0, _react.useEffect)(() => {
+    if (!showSettingsTab && activeTab === "settings") {
+      setActiveTab("search");
+    }
+  }, [showSettingsTab, activeTab]);
+  const handleSearchTextChange = (0, _react.useCallback)(text => {
+    setSearchText(text);
+  }, []);
+  const handleSubmitSearch = (0, _react.useCallback)(() => {
+    if (searchText.trim()) {
+      searchUsers(searchText.trim());
+    }
+    setIsSearchActive(false);
+  }, [searchText, searchUsers]);
+  const handleSelectUser = (0, _react.useCallback)(async user => {
+    await startImpersonation(user);
+  }, [startImpersonation]);
+  const handleSaveSettings = (0, _react.useCallback)(async (newHeaderKey, settings, newShowBanner) => {
+    // Save header key, data nuke settings, and show banner
+    await updateHeaderKey(newHeaderKey);
+    await updateDataNukeSettings(settings);
+    await updateShowBanner(newShowBanner);
+  }, [updateHeaderKey, updateDataNukeSettings, updateShowBanner]);
+  const handleTabChange = (0, _react.useCallback)(tabKey => {
+    setActiveTab(tabKey);
+    // Close search when switching tabs
+    setIsSearchActive(false);
+  }, []);
+
+  // Header content renderer (matching NetworkModal pattern)
+  const renderHeaderContent = () => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+      children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+        onBack: onBack
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+        title: "",
+        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.headerSearchContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+            size: 14,
+            color: _sharedUi.macOSColors.text.secondary
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            ref: searchInputRef,
+            style: styles.headerSearchInput,
+            placeholder: "Search by email, name, or ID...",
+            placeholderTextColor: _sharedUi.macOSColors.text.muted,
+            value: searchText,
+            onChangeText: handleSearchTextChange,
+            onSubmitEditing: handleSubmitSearch,
+            onBlur: () => setIsSearchActive(false),
+            autoCapitalize: "none",
+            autoCorrect: false,
+            returnKeyType: "search"
+          }), searchText.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: () => {
+              setSearchText("");
+              setIsSearchActive(false);
+            },
+            style: styles.headerSearchClear,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+              size: 14,
+              color: _sharedUi.macOSColors.text.secondary
+            })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: () => setIsSearchActive(false),
+            style: styles.headerSearchClear,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+              size: 14,
+              color: _sharedUi.macOSColors.text.muted
+            })
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
+          tabs: tabs,
+          activeTab: activeTab,
+          onTabChange: handleTabChange
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
+        children: activeTab === "search" && !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => setIsSearchActive(true),
+          style: styles.headerActionButton,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+            size: 14,
+            color: _sharedUi.macOSColors.text.secondary
+          })
+        })
+      })]
+    });
+  };
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    header: {
+      showToggleButton: true,
+      customContent: renderHeaderContent()
+    },
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    disableScrollWrapper: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.container,
+      children: [activeTab === "search" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_UserSearchView.UserSearchView, {
+        currentUser: currentUser,
+        isActive: isActive,
+        searchQuery: searchQuery,
+        searchResults: searchResults,
+        isSearching: isSearching,
+        searchError: searchError,
+        onSelectUser: handleSelectUser,
+        onStopImpersonation: stopImpersonation,
+        searchAvailable: !!onSearchUsers
+      }), activeTab === "history" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImpersonateHistoryList.ImpersonateHistoryList, {
+        history: history,
+        currentUserId: currentUser?.id ?? null,
+        onSelectUser: handleSelectUser,
+        onStopImpersonation: stopImpersonation,
+        onRemoveFromHistory: removeFromHistory,
+        onClearHistory: clearHistory
+      }), activeTab === "settings" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataNukeSettings.DataNukeSettings, {
+        headerKey: headerKey,
+        settings: dataNukeSettings,
+        showBanner: showBanner,
+        onSave: handleSaveSettings,
+        onShowBannerChange: updateShowBanner,
+        detectionStatus: detectionStatus
+      })]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  headerSearchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _sharedUi.macOSColors.background.input,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.input,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    marginTop: 8,
+    flex: 1,
+    marginBottom: 2
+  },
+  headerSearchInput: {
+    flex: 1,
+    color: _sharedUi.macOSColors.text.primary,
+    fontSize: 13,
+    marginLeft: 6,
+    paddingVertical: 2
+  },
+  headerSearchClear: {
+    marginLeft: 6,
+    padding: 4
+  },
+  headerActionButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    backgroundColor: _sharedUi.macOSColors.background.hover,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});