Function AlertManagerContent

src/components/AlertManager.tsx:53–906

({
  open,
  onClose,
  alerts,
  history,
  onAddAlert,
  onRemoveAlert,
  onToggleAlert,
  onMarkRead,
  onMarkAllRead,
  onClearHistory,
  allMarkets,
  prefill,
  notifPermission,
  onRequestPermission,
  onHoverEnter,
  onHoverLeave,
}: AlertManagerProps)

}

function AlertManagerContent({
  open,
  onClose,
  alerts,
  history,
  onAddAlert,
  onRemoveAlert,
  onToggleAlert,
  onMarkRead,
  onMarkAllRead,
  onClearHistory,
  allMarkets,
  prefill,
  notifPermission,
  onRequestPermission,
  onHoverEnter,
  onHoverLeave,
}: AlertManagerProps) {
  const { t } = useI18n();
  const [activeTab, setActiveTab] = useState<Tab>("alerts");

  // Create form state
  const [formType, setFormType] = useState<AlertType>("price_cross");
  const [formMarketSearch, setFormMarketSearch] = useState(prefill?.marketTitle || "");
  const [formMarketId, setFormMarketId] = useState(prefill?.marketId || "");
  const [formMarketTitle, setFormMarketTitle] = useState(prefill?.marketTitle || "");
  const [formThreshold, setFormThreshold] = useState("50");
  const [formDirection, setFormDirection] = useState<"above" | "below">("above");
  const [formCategory, setFormCategory] = useState<Category | "">("");
  const [formTag, setFormTag] = useState("");
  const [formSignalType, setFormSignalType] = useState<SignalType | "">("");
  const [formSignalStrength, setFormSignalStrength] = useState<"strong" | "moderate" | "weak">("moderate");
  const [formMinUsdcSize, setFormMinUsdcSize] = useState("5000");
  const [formHoursBeforeEnd, setFormHoursBeforeEnd] = useState("24");
  const [showForm, setShowForm] = useState(!!prefill);

  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    },
    [onClose]
  );

  useEffect(() => {
    if (!open) return;
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [open, handleKeyDown]);

  if (!open) return null;

  // Market search results
  const searchResults = formMarketSearch.length >= 2
    ? allMarkets
        .filter((m) => m.title.toLowerCase().includes(formMarketSearch.toLowerCase()))
        .slice(0, 5)
    : [];