From 76f43b97962ee8aa510fab58dd557a9f5515f56c Mon Sep 17 00:00:00 2001
From: Matthew Meszaros <meszmatew@gmail.com>
Date: Thu, 1 Oct 2026 08:38:57 -0700
Subject: [PATCH 1/2] feat: close every dashboard dropdown through one
 useClickOutside(open, onClose, refs) hook that the shared PopoverMenu, the
 old useClickOutside callers and the hand-rolled pickers now all use, so a
 press outside (including inside a floating dialog card or an email iframe)
 closes it, Escape closes only the innermost one and returns focus to its
 trigger, and opening one closes the others

---
 AGENTS.md                                     |   2 +-
 .../app/settings/sending/LanguagePicker.tsx   |   2 +-
 web/src/components/app/AddContacts.tsx        |   2 +-
 .../components/app/advisor/AdvisorCard.tsx    |   4 +-
 web/src/components/app/ai/TextareaAIEdit.tsx  |   2 +-
 .../campaigns/preferences/SenderSelector.tsx  |   2 +-
 .../campaigns/schedule/ScheduleDateSelect.tsx |  15 +--
 .../app/campaigns/sequences/CampaignFlow.tsx  |   6 +-
 .../campaigns/sequences/DesignControls.tsx    |   2 +-
 .../app/campaigns/sequences/ImageControls.tsx |   2 +-
 .../campaigns/sequences/RichTextEditor.tsx    |  32 +++--
 .../sequences/nodes/ConditionalNode.tsx       |  21 +--
 .../sequences/nodes/FormLinkNode.tsx          |  21 +--
 .../sequences/nodes/VariableNode.tsx          |  21 +--
 .../app/contacts/CategoryPicker.tsx           |   2 +-
 .../app/contacts/ContactsEditBulk.tsx         |   2 +-
 .../app/contacts/CustomFieldKeyInput.tsx      |   2 +-
 .../app/contacts/contact-edit/ActivityTab.tsx |   2 +-
 .../app/contacts/contact-edit/DetailsTab.tsx  |   2 +-
 .../app/contacts/contact-edit/LeadCCBar.tsx   |   2 +-
 .../app/contacts/filters/FilterBar.tsx        |   4 +-
 .../components/app/crm/AssigneeTeamPicker.tsx |   2 +-
 web/src/components/app/crm/TaskTypePicker.tsx |   4 +-
 .../components/app/emails/BulkTagPopover.tsx  |   2 +-
 .../app/emails/import/MailboxImportsMenu.tsx  |   4 +-
 web/src/components/app/forms/FontPicker.tsx   |  28 +---
 web/src/components/app/popup/MiniDate.tsx     |  16 +--
 .../app/popup/select/CampaignSelector.tsx     |   2 +-
 .../app/popup/select/FolderSelector.tsx       |   2 +-
 .../app/popup/select/TimeSelector.tsx         |  18 +--
 .../app/presence/PresenceAvatars.tsx          |   2 +-
 .../app/segments/SegmentPickers.tsx           |   2 +-
 .../app/unibox/compose/ComposeDraftsItem.tsx  |   2 +-
 .../unibox/compose/ContactRecipientField.tsx  |   2 +-
 .../app/unibox/compose/FilterMenu.tsx         |  30 +----
 .../app/unibox/compose/MailboxPicker.tsx      |  10 +-
 .../app/unibox/compose/OutboxIndicator.tsx    |  26 +---
 web/src/components/layout/CreditsMeter.tsx    |   2 +-
 .../components/layout/NotificationBell.tsx    |   2 +-
 web/src/components/ui/DatePicker.tsx          |  30 +----
 web/src/components/ui/color-picker.tsx        |  29 +----
 web/src/components/ui/popover-menu.tsx        |  53 +-------
 web/src/hooks/BulkEditContactsProvider.tsx    |   4 +-
 web/src/hooks/ContactsProvider.tsx            |   6 +-
 web/src/hooks/useClickOutside.test.tsx        | 121 ++++++++++++++++++
 web/src/hooks/useClickOutside.ts              |  93 ++++++++++++++
 web/src/hooks/useClickOutside.tsx             |  37 ------
 .../lib/api/hooks/app/advisor/useAdvisor.ts   |   2 +-
 .../app/emails/useMailboxImportActions.ts     |   2 +-
 49 files changed, 308 insertions(+), 375 deletions(-)
 create mode 100644 web/src/hooks/useClickOutside.test.tsx
 create mode 100644 web/src/hooks/useClickOutside.ts
 delete mode 100644 web/src/hooks/useClickOutside.tsx

diff --git a/AGENTS.md b/AGENTS.md
index 1066a2c7d..d6eea0f54 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -306,7 +306,7 @@ Everything in the dashboard must use our own theme, not browser/library defaults
 - Row interactions: list rows behave like the campaigns list — clicking anywhere on a row opens that item's detail (drawer or page); right-side action buttons (3-dots / "More") either open a relevant detail/tab or drop a short menu of the actions for that row (the mailbox 3-dots menus Settings and Disconnect). A destructive action belongs in that menu as a `danger` item as well as in the detail's own danger zone, because the selection bar is not where anyone looks to remove one row. Inner interactive controls (checkbox, dropdown trigger, action buttons) must `e.stopPropagation()` so they don't also fire the row's open handler.
 - Prefer realtime over polling: subscribe to the socket and `queryClient.invalidateQueries(...)` on the relevant event instead of `refetchInterval` where an event exists (see `useRealtimeEvents` / `RealtimeManager`).
 - Interaction details are part of "done". Before calling a dashboard change finished, walk the small things a user hits in the first minute, because these are what make the product feel broken even when the data flow is right:
-  - every dropdown / popover / picker closes on click-away and on Escape, including when it sits inside a dialog or drawer. Dialog cards stop `mousedown` propagation so the backdrop does not close them; React's `stopPropagation` also stops the native event, so any click-outside listener must be registered in the **capture** phase (`document.addEventListener("mousedown", fn, true)`, as `PopoverMenu` and `useClickOutside` do), never the bubble phase. Escape must close only the innermost layer: the dialog's Escape handler bails out while a `[data-floating]` popover or the `[role="alertdialog"]` confirm is on screen
+  - every dropdown / popover / picker closes on click-away and on Escape, including when it sits inside a dialog or drawer. Dialog cards stop `mousedown` propagation so the backdrop does not close them; React's `stopPropagation` also stops the native event, so never hand-roll a click-outside listener: every floating layer closes through `useClickOutside` (`@/hooks/useClickOutside`, which `PopoverMenu` uses too). It listens for `pointerdown` in the capture phase, treats a `[data-floating]` layer it opened as inside but the floating panel or dialog holding it as outside, closes on focus moving into an iframe, and takes Escape for the innermost layer only, stopping it there and handing focus back to the trigger. A dialog's own Escape handler still bails out while a `[data-floating]` popover or the `[role="alertdialog"]` confirm is on screen
   - toggles are the shared `Toggle` (sky pill, 32x18) from `campaigns/preferences/components/CampaignPreferenceBoolBox`; never hand-roll a switch. If a whole row toggles on click, the switch itself must `stopPropagation` so it does not toggle twice, and a `<label htmlFor>` pointing at the switch would double-fire too, so use a plain element for the row title
   - **a page is not shipped until it is routed, linked and titled.** Three lists have to agree, and nothing fails the build when they do not: the route table in `web/src/main.tsx`, the nav that links to it (`AppNav`, `settings/layout.tsx`), and the title map in `web/src/hooks/useDocumentTitle.ts` (static pathnames in `ROUTE_TITLES`, `:id` routes as a regex in `PARAM_ROUTES`). A nav entry with no route renders nothing; a page component with no route is dead code nobody can reach; a route with no title falls through to the literal `"Page not found | Warmbly"` in the tab, which reads as a broken app on a page that works. All three drift silently, so check them together, and after a merge that touched routing check the settings nav against `main.tsx` specifically
   - every detail page reachable from a list has a way back on all viewports: a "← Section" link above the title (see `campaigns/[id]/layout.tsx`) or a back arrow in its header (see `AutomationFlow`); the header breadcrumb is desktop-only and its crumbs must stay clickable, so it does not count as the only route back
diff --git a/web/src/app/app/settings/sending/LanguagePicker.tsx b/web/src/app/app/settings/sending/LanguagePicker.tsx
index cc4e59a6c..29d2d389f 100644
--- a/web/src/app/app/settings/sending/LanguagePicker.tsx
+++ b/web/src/app/app/settings/sending/LanguagePicker.tsx
@@ -21,7 +21,7 @@ export default function LanguagePicker({ value, onChange }: { value: string[]; o
         setOpen(false);
         setQuery("");
     }, []);
-    useClickOutside(ref, close);
+    useClickOutside(open, close, ref);
     const placement = useFlipPlacement(triggerRef, open, 270);
 
     const filtered = React.useMemo(() => {
diff --git a/web/src/components/app/AddContacts.tsx b/web/src/components/app/AddContacts.tsx
index c81062fd0..826e991e2 100644
--- a/web/src/components/app/AddContacts.tsx
+++ b/web/src/components/app/AddContacts.tsx
@@ -767,7 +767,7 @@ function CSVSelector({
     const [drop, setDrop] = React.useState<boolean>(false);
     const dropRef = React.useRef<HTMLDivElement>(null);
 
-    useClickOutside(dropRef, () => setDrop(false))
+    useClickOutside(drop, () => setDrop(false), dropRef);
 
     return (<>
         <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-5 sm:justify-between">
diff --git a/web/src/components/app/advisor/AdvisorCard.tsx b/web/src/components/app/advisor/AdvisorCard.tsx
index 6e59a6547..69790e2c8 100644
--- a/web/src/components/app/advisor/AdvisorCard.tsx
+++ b/web/src/components/app/advisor/AdvisorCard.tsx
@@ -39,7 +39,7 @@ import {
 import { useConfirm } from "@/hooks/context/confirm";
 import {
     useAdvisorFeedback,
-    useDismissAdvisorFinding,
+    useClickOutsideAdvisorFinding,
     useSnoozeAdvisorFinding,
     useUndoAdvisorFinding,
 } from "@/lib/api/hooks/app/advisor/useAdvisor";
@@ -63,7 +63,7 @@ export default function AdvisorCard({ finding, onFix, compact = false, defaultOp
     const confirm = useConfirm();
 
     const snooze = useSnoozeAdvisorFinding();
-    const dismiss = useDismissAdvisorFinding();
+    const dismiss = useClickOutsideAdvisorFinding();
     const undo = useUndoAdvisorFinding();
     const feedback = useAdvisorFeedback();
 
diff --git a/web/src/components/app/ai/TextareaAIEdit.tsx b/web/src/components/app/ai/TextareaAIEdit.tsx
index 2ca10b6a6..f0f44af1b 100644
--- a/web/src/components/app/ai/TextareaAIEdit.tsx
+++ b/web/src/components/app/ai/TextareaAIEdit.tsx
@@ -196,7 +196,7 @@ export default function TextareaAIEdit({
     }, [sel, syncRects]);
 
     // Dismiss when the user clicks anywhere outside the floating layer and
-    // the textarea (mirrors useClickOutside, plus the textarea exception).
+    // the textarea (like useClickOutside, plus the textarea exception).
     React.useEffect(() => {
         if (!open) return;
         const onDown = (e: MouseEvent | TouchEvent) => {
diff --git a/web/src/components/app/campaigns/preferences/SenderSelector.tsx b/web/src/components/app/campaigns/preferences/SenderSelector.tsx
index 4d68fe6ac..2ead39f88 100644
--- a/web/src/components/app/campaigns/preferences/SenderSelector.tsx
+++ b/web/src/components/app/campaigns/preferences/SenderSelector.tsx
@@ -58,7 +58,7 @@ export default function SenderSelector({
     const [query, setQuery] = React.useState("");
     const ref = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     const placement = useFlipPlacement(triggerRef, open, 320);
 
     const tagById = React.useMemo(() => {
diff --git a/web/src/components/app/campaigns/schedule/ScheduleDateSelect.tsx b/web/src/components/app/campaigns/schedule/ScheduleDateSelect.tsx
index d373e8db2..95df4453d 100644
--- a/web/src/components/app/campaigns/schedule/ScheduleDateSelect.tsx
+++ b/web/src/components/app/campaigns/schedule/ScheduleDateSelect.tsx
@@ -3,6 +3,7 @@ import { CalendarIcon, XIcon } from "lucide-react";
 import Calendar from "../../Calendar";
 import { format } from "date-fns";
 import { Label } from "@/components/ui/field";
+import useClickOutside from "@/hooks/useClickOutside";
 
 export default function DateSelect({
     title,
@@ -18,19 +19,7 @@ export default function DateSelect({
     const [open, setOpen] = React.useState(false);
     const modalRef = React.useRef<HTMLDivElement>(null);
 
-    React.useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-                setOpen(false);
-            }
-        };
-        if (open) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [open]);
+    useClickOutside(open, () => setOpen(false), modalRef);
 
     return (
         <div className="relative w-full">
diff --git a/web/src/components/app/campaigns/sequences/CampaignFlow.tsx b/web/src/components/app/campaigns/sequences/CampaignFlow.tsx
index a9d5252b4..d5d310c83 100644
--- a/web/src/components/app/campaigns/sequences/CampaignFlow.tsx
+++ b/web/src/components/app/campaigns/sequences/CampaignFlow.tsx
@@ -2743,7 +2743,7 @@ function AddNodeMenu({
 }) {
     const [open, setOpen] = React.useState(false);
     const ref = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     return (
         <div ref={ref} className="relative inline-flex">
             {/* Primary click = add an email step (the default, common case). */}
@@ -3833,7 +3833,7 @@ function AIContextToggle({
 function DealNameVariableMenu({ onPick }: { onPick: (token: string) => void }) {
     const [open, setOpen] = React.useState(false);
     const ref = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     return (
         <div ref={ref} className="relative">
             <button
@@ -3873,7 +3873,7 @@ const DEAL_CURRENCIES = ["USD", "EUR", "GBP", "CAD", "AUD", "JPY", "CHF", "SEK",
 function CurrencyPicker({ value, onChange }: { value: string; onChange: (c: string) => void }) {
     const [open, setOpen] = React.useState(false);
     const ref = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     return (
         <div ref={ref} className="relative inline-flex">
             <button
diff --git a/web/src/components/app/campaigns/sequences/DesignControls.tsx b/web/src/components/app/campaigns/sequences/DesignControls.tsx
index 3f07f9205..03b6d04b6 100644
--- a/web/src/components/app/campaigns/sequences/DesignControls.tsx
+++ b/web/src/components/app/campaigns/sequences/DesignControls.tsx
@@ -90,7 +90,7 @@ function Panel({
     children: React.ReactNode;
 }) {
     const ref = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     const { setReference, setFloating, floatingStyle } = useAnchoredFloating(open, {
         placement: "bottom-start",
         gap: 6,
diff --git a/web/src/components/app/campaigns/sequences/ImageControls.tsx b/web/src/components/app/campaigns/sequences/ImageControls.tsx
index cc95590c6..aaefc5625 100644
--- a/web/src/components/app/campaigns/sequences/ImageControls.tsx
+++ b/web/src/components/app/campaigns/sequences/ImageControls.tsx
@@ -44,7 +44,7 @@ export function ImageMenu({ editor }: { editor: Editor }) {
     const [dragging, setDragging] = React.useState(false);
     const ref = React.useRef<HTMLDivElement>(null);
     const fileRef = React.useRef<HTMLInputElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     const { setReference, setFloating, floatingStyle } = useAnchoredFloating(open, {
         placement: "bottom-start",
         gap: 6,
diff --git a/web/src/components/app/campaigns/sequences/RichTextEditor.tsx b/web/src/components/app/campaigns/sequences/RichTextEditor.tsx
index 535cae799..4ec384e13 100644
--- a/web/src/components/app/campaigns/sequences/RichTextEditor.tsx
+++ b/web/src/components/app/campaigns/sequences/RichTextEditor.tsx
@@ -439,6 +439,9 @@ function Toolbar({
 }) {
     const [linkOpen, setLinkOpen] = React.useState(false);
     const [linkUrl, setLinkUrl] = React.useState("");
+    const linkBtnRef = React.useRef<HTMLSpanElement>(null);
+    const linkPanelRef = React.useRef<HTMLDivElement>(null);
+    useClickOutside(linkOpen, () => setLinkOpen(false), [linkBtnRef, linkPanelRef]);
 
     const applyLink = () => {
         const url = linkUrl.trim();
@@ -516,16 +519,18 @@ function Toolbar({
             <Btn active={editor.isActive("orderedList")} onClick={() => editor.chain().focus().toggleOrderedList().run()} title="Numbered list">
                 <ListOrderedIcon className="w-3.5 h-3.5" />
             </Btn>
-            <Btn
-                active={editor.isActive("link")}
-                onClick={() => {
-                    setLinkUrl(editor.getAttributes("link").href ?? "");
-                    setLinkOpen((o) => !o);
-                }}
-                title="Link"
-            >
-                <Link2Icon className="w-3.5 h-3.5" />
-            </Btn>
+            <span ref={linkBtnRef} className="contents">
+                <Btn
+                    active={editor.isActive("link")}
+                    onClick={() => {
+                        setLinkUrl(editor.getAttributes("link").href ?? "");
+                        setLinkOpen((o) => !o);
+                    }}
+                    title="Link"
+                >
+                    <Link2Icon className="w-3.5 h-3.5" />
+                </Btn>
+            </span>
             <ImageMenu editor={editor} />
             <ButtonInsert editor={editor} />
             <Divider />
@@ -574,6 +579,7 @@ function Toolbar({
             <AnimatePresence>
                 {linkOpen && (
                     <motion.div
+                        ref={linkPanelRef}
                         initial={{ opacity: 0, y: -4 }}
                         animate={{ opacity: 1, y: 0 }}
                         exit={{ opacity: 0, y: -4 }}
@@ -588,8 +594,6 @@ function Toolbar({
                                 if (e.key === "Enter") {
                                     e.preventDefault();
                                     applyLink();
-                                } else if (e.key === "Escape") {
-                                    setLinkOpen(false);
                                 }
                             }}
                             placeholder="https://…"
@@ -681,7 +685,7 @@ export function VariableMenu({
     const ref = React.useRef<HTMLDivElement>(null);
     // Ignores clicks inside the portaled [data-floating] panel, so only a click
     // truly outside the trigger+panel closes it.
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     // floating-ui keeps the panel glued to the trigger through scroll/resize.
     const { setReference, setFloating, floatingStyle } = useAnchoredFloating(open, {
         placement: "bottom-start",
@@ -893,7 +897,7 @@ export function VariableMenu({
 function FormMenu({ onPick }: { onPick: (publicId: string) => void }) {
     const [open, setOpen] = React.useState(false);
     const ref = React.useRef<HTMLDivElement | null>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     const { setReference, setFloating, floatingStyle } = useAnchoredFloating(open, {
         placement: "bottom-start",
         gap: 6,
diff --git a/web/src/components/app/campaigns/sequences/nodes/ConditionalNode.tsx b/web/src/components/app/campaigns/sequences/nodes/ConditionalNode.tsx
index ba8591176..d4136ff25 100644
--- a/web/src/components/app/campaigns/sequences/nodes/ConditionalNode.tsx
+++ b/web/src/components/app/campaigns/sequences/nodes/ConditionalNode.tsx
@@ -15,6 +15,7 @@ import useCustomFieldKeys from "@/lib/api/hooks/app/contacts/useCustomFieldKeys"
 import { useAnchoredFloating } from "@/hooks/useAnchoredFloating";
 import { STANDARD_VARS, buildToken, cleanFieldName, isStandardKey } from "@/lib/templateVars";
 import { markJustInserted, consumeJustInserted, freshId } from "./justInserted";
+import useClickOutside from "@/hooks/useClickOutside";
 
 interface ConditionalAttrs {
     expr: string; // the condition after `{{if `, e.g. `.Company` or `eq .Industry "SaaS"`
@@ -323,25 +324,7 @@ function ConditionalBuilder({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [field, op, value, raw, thenText, elseText, showElse, rawMode]);
 
-    React.useEffect(() => {
-        const onDown = (e: MouseEvent | TouchEvent) => {
-            if (!localRef.current?.contains(e.target as Node)) onClose();
-        };
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                e.stopPropagation();
-                onClose();
-            }
-        };
-        document.addEventListener("mousedown", onDown, true);
-        document.addEventListener("touchstart", onDown, true);
-        document.addEventListener("keydown", onKey, true);
-        return () => {
-            document.removeEventListener("mousedown", onDown, true);
-            document.removeEventListener("touchstart", onDown, true);
-            document.removeEventListener("keydown", onKey, true);
-        };
-    }, [onClose]);
+    useClickOutside(true, onClose, localRef);
 
     const fields = [
         ...STANDARD_VARS.map((v) => v.key),
diff --git a/web/src/components/app/campaigns/sequences/nodes/FormLinkNode.tsx b/web/src/components/app/campaigns/sequences/nodes/FormLinkNode.tsx
index 8f3f6b4b5..2455f1fdf 100644
--- a/web/src/components/app/campaigns/sequences/nodes/FormLinkNode.tsx
+++ b/web/src/components/app/campaigns/sequences/nodes/FormLinkNode.tsx
@@ -20,6 +20,7 @@ import { Link2Icon, XIcon, CheckIcon } from "lucide-react";
 import { useForms } from "@/lib/api/hooks/app/forms";
 import { useAnchoredFloating } from "@/hooks/useAnchoredFloating";
 import { buildFormLinkToken } from "@/lib/templateVars";
+import useClickOutside from "@/hooks/useClickOutside";
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
@@ -190,25 +191,7 @@ function FormLinkChipEditor({
         [setFloating],
     );
 
-    React.useEffect(() => {
-        const onDown = (e: MouseEvent | TouchEvent) => {
-            if (!localRef.current?.contains(e.target as Node)) onClose();
-        };
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                e.stopPropagation();
-                onClose();
-            }
-        };
-        document.addEventListener("mousedown", onDown, true);
-        document.addEventListener("touchstart", onDown, true);
-        document.addEventListener("keydown", onKey, true);
-        return () => {
-            document.removeEventListener("mousedown", onDown, true);
-            document.removeEventListener("touchstart", onDown, true);
-            document.removeEventListener("keydown", onKey, true);
-        };
-    }, [onClose]);
+    useClickOutside(true, onClose, localRef);
 
     return (
         <motion.div
diff --git a/web/src/components/app/campaigns/sequences/nodes/VariableNode.tsx b/web/src/components/app/campaigns/sequences/nodes/VariableNode.tsx
index b3271d44e..50a74f33c 100644
--- a/web/src/components/app/campaigns/sequences/nodes/VariableNode.tsx
+++ b/web/src/components/app/campaigns/sequences/nodes/VariableNode.tsx
@@ -17,6 +17,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { BracesIcon, XIcon, CheckIcon } from "lucide-react";
 import useCustomFieldKeys from "@/lib/api/hooks/app/contacts/useCustomFieldKeys";
 import { useAnchoredFloating } from "@/hooks/useAnchoredFloating";
+import useClickOutside from "@/hooks/useClickOutside";
 import {
     STANDARD_VARS,
     buildToken,
@@ -212,25 +213,7 @@ function VariableChipEditor({
         [setFloating],
     );
 
-    React.useEffect(() => {
-        const onDown = (e: MouseEvent | TouchEvent) => {
-            if (!localRef.current?.contains(e.target as Node)) onClose();
-        };
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                e.stopPropagation();
-                onClose();
-            }
-        };
-        document.addEventListener("mousedown", onDown, true);
-        document.addEventListener("touchstart", onDown, true);
-        document.addEventListener("keydown", onKey, true);
-        return () => {
-            document.removeEventListener("mousedown", onDown, true);
-            document.removeEventListener("touchstart", onDown, true);
-            document.removeEventListener("keydown", onKey, true);
-        };
-    }, [onClose]);
+    useClickOutside(true, onClose, localRef);
 
     const options = [
         ...STANDARD_VARS.map((v) => ({ key: v.key, label: v.label })),
diff --git a/web/src/components/app/contacts/CategoryPicker.tsx b/web/src/components/app/contacts/CategoryPicker.tsx
index 315587f36..dc8fe2767 100644
--- a/web/src/components/app/contacts/CategoryPicker.tsx
+++ b/web/src/components/app/contacts/CategoryPicker.tsx
@@ -56,7 +56,7 @@ export default function CategoryPicker({
     const [query, setQuery] = React.useState("");
     const ref = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     // ~270px: 33px search input + 56 max-h list (224px) + borders.
     const placement = useFlipPlacement(triggerRef, open, 270);
 
diff --git a/web/src/components/app/contacts/ContactsEditBulk.tsx b/web/src/components/app/contacts/ContactsEditBulk.tsx
index 7ec5aeaab..35c2b6fb8 100644
--- a/web/src/components/app/contacts/ContactsEditBulk.tsx
+++ b/web/src/components/app/contacts/ContactsEditBulk.tsx
@@ -438,7 +438,7 @@ function FieldRow({
     const [showType, setShowType] = React.useState(false);
     const dropRef = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLButtonElement>(null);
-    useClickOutside(dropRef, () => setShowType(false));
+    useClickOutside(showType, () => setShowType(false), dropRef);
     const typePlacement = useFlipPlacement(triggerRef, showType, 180);
     const { data: existingKeys = [] } = useCustomFieldKeys();
     const typeDef = FIELD_TYPES.find((t) => t.id === field.type)!;
diff --git a/web/src/components/app/contacts/CustomFieldKeyInput.tsx b/web/src/components/app/contacts/CustomFieldKeyInput.tsx
index f68edc508..ba7fc2f7e 100644
--- a/web/src/components/app/contacts/CustomFieldKeyInput.tsx
+++ b/web/src/components/app/contacts/CustomFieldKeyInput.tsx
@@ -35,7 +35,7 @@ export default function CustomFieldKeyInput({
     const [open, setOpen] = React.useState(false);
     const [active, setActive] = React.useState(-1);
     const ref = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
 
     // Nothing to offer once the name already is a field.
     const matches = keys.includes(value) ? [] : suggestKeys(value, keys);
diff --git a/web/src/components/app/contacts/contact-edit/ActivityTab.tsx b/web/src/components/app/contacts/contact-edit/ActivityTab.tsx
index 09b15ca96..f58e095d0 100644
--- a/web/src/components/app/contacts/contact-edit/ActivityTab.tsx
+++ b/web/src/components/app/contacts/contact-edit/ActivityTab.tsx
@@ -891,7 +891,7 @@ function DateRange({
 }) {
     const [open, setOpen] = React.useState(false);
     const ref = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     // The trigger wraps anywhere along the toolbar row, so the panel side is
     // measured, not fixed: a fixed right-0 clipped it against the drawer edge.
     const align = useFlipAlignment(ref, open, 256);
diff --git a/web/src/components/app/contacts/contact-edit/DetailsTab.tsx b/web/src/components/app/contacts/contact-edit/DetailsTab.tsx
index 28cc3dadb..4ca443efb 100644
--- a/web/src/components/app/contacts/contact-edit/DetailsTab.tsx
+++ b/web/src/components/app/contacts/contact-edit/DetailsTab.tsx
@@ -272,7 +272,7 @@ function CampaignPicker({
     const [enabled, setEnabled] = React.useState(false);
     const ref = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     const placement = useFlipPlacement(triggerRef, open, 290);
 
     React.useEffect(() => {
diff --git a/web/src/components/app/contacts/contact-edit/LeadCCBar.tsx b/web/src/components/app/contacts/contact-edit/LeadCCBar.tsx
index f9b4ef2da..5c571b3e4 100644
--- a/web/src/components/app/contacts/contact-edit/LeadCCBar.tsx
+++ b/web/src/components/app/contacts/contact-edit/LeadCCBar.tsx
@@ -145,7 +145,7 @@ function CCPicker({
     const ref = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLButtonElement>(null);
     const [query, setQuery] = React.useState("");
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     const placement = useFlipPlacement(triggerRef, open, 300);
 
     const q = useDebouncedValue(query.trim(), 250);
diff --git a/web/src/components/app/contacts/filters/FilterBar.tsx b/web/src/components/app/contacts/filters/FilterBar.tsx
index c987e5fe1..3e8801d4e 100644
--- a/web/src/components/app/contacts/filters/FilterBar.tsx
+++ b/web/src/components/app/contacts/filters/FilterBar.tsx
@@ -443,9 +443,7 @@ function Pill({
     const open = openKey === id;
     const ref = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLButtonElement>(null);
-    useClickOutside(ref, () => {
-        if (open) setOpenKey(null);
-    });
+    useClickOutside(open, () => setOpenKey(null), ref);
     const placement = useFlipPlacement(triggerRef, open, 300);
 
     React.useEffect(() => {
diff --git a/web/src/components/app/crm/AssigneeTeamPicker.tsx b/web/src/components/app/crm/AssigneeTeamPicker.tsx
index 1a0d00f60..360376c94 100644
--- a/web/src/components/app/crm/AssigneeTeamPicker.tsx
+++ b/web/src/components/app/crm/AssigneeTeamPicker.tsx
@@ -30,7 +30,7 @@ export default function AssigneeTeamPicker({
     const { data: teams } = useTeams();
     const [open, setOpen] = React.useState(false);
     const ref = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
 
     const memberList = members ?? [];
     const teamList = teams ?? [];
diff --git a/web/src/components/app/crm/TaskTypePicker.tsx b/web/src/components/app/crm/TaskTypePicker.tsx
index 9e3056891..616232165 100644
--- a/web/src/components/app/crm/TaskTypePicker.tsx
+++ b/web/src/components/app/crm/TaskTypePicker.tsx
@@ -56,7 +56,7 @@ export default function TaskTypePicker({
     const [query, setQuery] = React.useState("");
     const ref = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLButtonElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     // ~290px: 33px search input + 56 max-h list (224px) + the "No type"
     // row + borders, so the flip kicks in before a tall list clips.
     const placement = useFlipPlacement(triggerRef, open, 290);
@@ -416,7 +416,7 @@ function SwatchPopover({
     onClose: () => void;
 }) {
     const ref = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, onClose);
+    useClickOutside(true, onClose, ref);
 
     return (
         <motion.div
diff --git a/web/src/components/app/emails/BulkTagPopover.tsx b/web/src/components/app/emails/BulkTagPopover.tsx
index 2449ee134..21a05cae6 100644
--- a/web/src/components/app/emails/BulkTagPopover.tsx
+++ b/web/src/components/app/emails/BulkTagPopover.tsx
@@ -44,7 +44,7 @@ export default function BulkTagPopover({ ids }: { ids: string[] }) {
 
     const ref = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLButtonElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     // ~330px: toggle + search header + max-h-48 list + footer.
     const placement = useFlipPlacement(triggerRef, open, 330);
 
diff --git a/web/src/components/app/emails/import/MailboxImportsMenu.tsx b/web/src/components/app/emails/import/MailboxImportsMenu.tsx
index 2de1c7528..b519fb9f4 100644
--- a/web/src/components/app/emails/import/MailboxImportsMenu.tsx
+++ b/web/src/components/app/emails/import/MailboxImportsMenu.tsx
@@ -11,7 +11,7 @@ import {
     PopoverMenuTrigger,
 } from "@/components/ui/popover-menu";
 import useMailboxImports from "@/lib/api/hooks/app/emails/useMailboxImports";
-import { useDismissMailboxImport } from "@/lib/api/hooks/app/emails/useMailboxImportActions";
+import { useClickOutsideMailboxImport } from "@/lib/api/hooks/app/emails/useMailboxImportActions";
 import { type MailboxImport } from "@/lib/api/models/app/emails/MailboxImport";
 import { vendorLabel } from "@/lib/api/models/app/emails/MailboxSources";
 import { useConfirm } from "@/hooks/context/confirm";
@@ -143,7 +143,7 @@ export default function MailboxImportsMenu() {
 
 function ImportEntry({ job, onOpen }: { job: MailboxImport; onOpen: () => void }) {
     const confirm = useConfirm();
-    const dismiss = useDismissMailboxImport();
+    const dismiss = useClickOutsideMailboxImport();
     const st = jobState(job);
     const live = job.status === "running";
 
diff --git a/web/src/components/app/forms/FontPicker.tsx b/web/src/components/app/forms/FontPicker.tsx
index 628a1cc28..2b8504ab6 100644
--- a/web/src/components/app/forms/FontPicker.tsx
+++ b/web/src/components/app/forms/FontPicker.tsx
@@ -13,6 +13,7 @@ import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import { useAnchoredFloating } from "@/hooks/useAnchoredFloating";
 
 import { FONT_CATALOG, ensureFont, resolveDesign } from "./designCore";
+import useClickOutside from "@/hooks/useClickOutside";
 
 export default function FontPicker({
     value,
@@ -23,6 +24,7 @@ export default function FontPicker({
 }) {
     const [open, setOpen] = React.useState(false);
     const panelRef = React.useRef<HTMLDivElement | null>(null);
+    const triggerRef = React.useRef<HTMLButtonElement | null>(null);
     const { setReference, setFloating, floatingStyle } = useAnchoredFloating(open, {
         placement: "bottom-start",
         gap: 6,
@@ -38,26 +40,7 @@ export default function FontPicker({
         for (const key of Object.keys(FONT_CATALOG)) ensureFont(resolveDesign({ font_family: key }));
     }, [open]);
 
-    React.useEffect(() => {
-        if (!open) return;
-        const onDown = (e: MouseEvent | TouchEvent) => {
-            if (!panelRef.current?.contains(e.target as Node)) setOpen(false);
-        };
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                e.stopPropagation();
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", onDown, true);
-        document.addEventListener("touchstart", onDown, true);
-        document.addEventListener("keydown", onKey, true);
-        return () => {
-            document.removeEventListener("mousedown", onDown, true);
-            document.removeEventListener("touchstart", onDown, true);
-            document.removeEventListener("keydown", onKey, true);
-        };
-    }, [open]);
+    useClickOutside(open, () => setOpen(false), [triggerRef, panelRef]);
 
     const setRefs = React.useCallback(
         (el: HTMLDivElement | null) => {
@@ -70,7 +53,10 @@ export default function FontPicker({
     return (
         <>
             <button
-                ref={(el) => setReference(el)}
+                ref={(el) => {
+                    triggerRef.current = el;
+                    setReference(el);
+                }}
                 type="button"
                 aria-label="Font"
                 aria-expanded={open}
diff --git a/web/src/components/app/popup/MiniDate.tsx b/web/src/components/app/popup/MiniDate.tsx
index 9f076bb5b..2cdd42d90 100644
--- a/web/src/components/app/popup/MiniDate.tsx
+++ b/web/src/components/app/popup/MiniDate.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Calendar from "../Calendar";
 import { format } from "date-fns";
+import useClickOutside from "@/hooks/useClickOutside";
 
 export default function MiniDate({
     onChange,
@@ -14,20 +15,7 @@ export default function MiniDate({
     const [drop, setDrop] = React.useState<boolean>(false);
     const modalRef = React.useRef<HTMLDivElement>(null);
 
-    React.useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-                setDrop(false);
-            }
-        };
-        if (drop) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [drop]);
+    useClickOutside(drop, () => setDrop(false), modalRef);
 
     return (<div className="relative w-full" ref={modalRef}>
         <div onClick={() => setDrop(true)} className={`w-full cursor-pointer font-sans text-[15px] bg-transparent text-slate-700 border rounded-md px-3 py-2.5 transition duration-300 ease focus:outline-none ${drop ? "border-slate-300" : "border-slate-200 hover:border-slate-300"} shadow-sm focus:shadow`}>
diff --git a/web/src/components/app/popup/select/CampaignSelector.tsx b/web/src/components/app/popup/select/CampaignSelector.tsx
index af203cd9c..18cef86f0 100644
--- a/web/src/components/app/popup/select/CampaignSelector.tsx
+++ b/web/src/components/app/popup/select/CampaignSelector.tsx
@@ -27,7 +27,7 @@ export default function CampaignSelector({ onAdd, onRemove, selected, reverse }:
 
     const popupRef = React.useRef<HTMLDivElement>(null);
 
-    useClickOutside(popupRef, () => setShow(false))
+    useClickOutside(show, () => setShow(false), popupRef);
 
     return (
         <div className="relative" ref={popupRef}>
diff --git a/web/src/components/app/popup/select/FolderSelector.tsx b/web/src/components/app/popup/select/FolderSelector.tsx
index 80865d6c8..d39eac7ee 100644
--- a/web/src/components/app/popup/select/FolderSelector.tsx
+++ b/web/src/components/app/popup/select/FolderSelector.tsx
@@ -12,7 +12,7 @@ export default function FolderSelector({ onAdd, onRemove, selected }: { onAdd: (
     const [show, setShow] = React.useState<boolean>(false);
     const popupRef = React.useRef<HTMLDivElement>(null);
 
-    useClickOutside(popupRef, () => setShow(false))
+    useClickOutside(show, () => setShow(false), popupRef);
 
     return (
         <div className="relative" ref={popupRef}>
diff --git a/web/src/components/app/popup/select/TimeSelector.tsx b/web/src/components/app/popup/select/TimeSelector.tsx
index 3669dc8b0..d2176d0c9 100644
--- a/web/src/components/app/popup/select/TimeSelector.tsx
+++ b/web/src/components/app/popup/select/TimeSelector.tsx
@@ -4,6 +4,7 @@ import SelectMenu from "./SelectMenu";
 import SelectOption from "./SelectOption";
 import { RiTimeLine } from "@remixicon/react";
 import { timeOptions, to12Hour } from "@/lib/core/time";
+import useClickOutside from "@/hooks/useClickOutside";
 
 export default function TimeSelector({
     value,
@@ -15,22 +16,7 @@ export default function TimeSelector({
     const [show, setShow] = React.useState<boolean>(false);
     const popupRef = React.useRef<HTMLDivElement>(null);
 
-    React.useEffect(() => {
-        function handleClickOutside(event: MouseEvent) {
-            if (
-            show && 
-            popupRef.current && 
-            !popupRef.current.contains(event.target as Node)
-            ) {
-            setShow(false);
-            }
-        }
-        document.addEventListener("mousedown", handleClickOutside);
-
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [show]);
+    useClickOutside(show, () => setShow(false), popupRef);
 
     return (
         <div className="relative" ref={popupRef}>
diff --git a/web/src/components/app/presence/PresenceAvatars.tsx b/web/src/components/app/presence/PresenceAvatars.tsx
index bd91eb6e0..6ab0032b4 100644
--- a/web/src/components/app/presence/PresenceAvatars.tsx
+++ b/web/src/components/app/presence/PresenceAvatars.tsx
@@ -76,7 +76,7 @@ export default function PresenceAvatars() {
     const ref = useRef<HTMLDivElement>(null);
     const navigate = useNavigate();
     const { pathname } = useLocation();
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
 
     if (members.length === 0) return null;
 
diff --git a/web/src/components/app/segments/SegmentPickers.tsx b/web/src/components/app/segments/SegmentPickers.tsx
index 68f9efb6f..f1f57c6b0 100644
--- a/web/src/components/app/segments/SegmentPickers.tsx
+++ b/web/src/components/app/segments/SegmentPickers.tsx
@@ -49,7 +49,7 @@ export function MultiPicker({
     const [query, setQuery] = React.useState("");
     const ref = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), ref);
     const placement = useFlipPlacement(triggerRef, open, 270);
 
     const byId = React.useMemo(() => new Map(options.map((o) => [o.id, o])), [options]);
diff --git a/web/src/components/app/unibox/compose/ComposeDraftsItem.tsx b/web/src/components/app/unibox/compose/ComposeDraftsItem.tsx
index c778bdab9..e91393efd 100644
--- a/web/src/components/app/unibox/compose/ComposeDraftsItem.tsx
+++ b/web/src/components/app/unibox/compose/ComposeDraftsItem.tsx
@@ -29,7 +29,7 @@ function formatWhen(iso: string | Date): string {
 export default function ComposeDraftsItem() {
     const [open, setOpen] = React.useState(false);
     const boxRef = React.useRef<HTMLDivElement>(null);
-    useClickOutside(boxRef, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), boxRef);
 
     const draftsQ = useComposeDrafts();
     const deleteMut = useDeleteComposeDraft();
diff --git a/web/src/components/app/unibox/compose/ContactRecipientField.tsx b/web/src/components/app/unibox/compose/ContactRecipientField.tsx
index 6a06ea485..91f971caa 100644
--- a/web/src/components/app/unibox/compose/ContactRecipientField.tsx
+++ b/web/src/components/app/unibox/compose/ContactRecipientField.tsx
@@ -89,7 +89,7 @@ export default function ContactRecipientField({
         up: boolean;
     } | null>(null);
     const rootRef = React.useRef<HTMLDivElement>(null);
-    useClickOutside(rootRef, () => setBrowseOpen(false));
+    useClickOutside(browseOpen, () => setBrowseOpen(false), rootRef);
 
     const measureBrowse = React.useCallback(() => {
         const el = rootRef.current;
diff --git a/web/src/components/app/unibox/compose/FilterMenu.tsx b/web/src/components/app/unibox/compose/FilterMenu.tsx
index 4b5c22c39..52e464bc9 100644
--- a/web/src/components/app/unibox/compose/FilterMenu.tsx
+++ b/web/src/components/app/unibox/compose/FilterMenu.tsx
@@ -8,6 +8,7 @@ import { createPortal } from "react-dom";
 import { AnimatePresence, motion } from "framer-motion";
 import { CheckIcon, ChevronDownIcon, type LucideIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
+import useClickOutside from "@/hooks/useClickOutside";
 
 export interface FilterMenuOption {
     id: string;
@@ -41,34 +42,7 @@ export default function FilterMenu({
     const ref = React.useRef<HTMLDivElement>(null);
     const panelRef = React.useRef<HTMLDivElement>(null);
 
-    // Own outside-close handling instead of useClickOutside: the trigger
-    // usually lives inside a data-floating panel, which the shared hook
-    // deliberately ignores — so clicking elsewhere in that panel (or the
-    // sibling filter) would never close this menu. Anything outside the
-    // trigger and this menu's own dropdown closes it; Escape too.
-    React.useEffect(() => {
-        if (!open) return;
-        const onDown = (e: MouseEvent | TouchEvent) => {
-            const t = e.target as Node;
-            if (ref.current?.contains(t)) return;
-            if (panelRef.current?.contains(t)) return;
-            setOpen(false);
-        };
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                e.stopPropagation();
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", onDown, true);
-        document.addEventListener("touchstart", onDown, true);
-        document.addEventListener("keydown", onKey, true);
-        return () => {
-            document.removeEventListener("mousedown", onDown, true);
-            document.removeEventListener("touchstart", onDown, true);
-            document.removeEventListener("keydown", onKey, true);
-        };
-    }, [open]);
+    useClickOutside(open, () => setOpen(false), [ref, panelRef]);
 
     const active = options.find((o) => o.id === value) ?? null;
 
diff --git a/web/src/components/app/unibox/compose/MailboxPicker.tsx b/web/src/components/app/unibox/compose/MailboxPicker.tsx
index 63e925c17..393702c20 100644
--- a/web/src/components/app/unibox/compose/MailboxPicker.tsx
+++ b/web/src/components/app/unibox/compose/MailboxPicker.tsx
@@ -59,7 +59,7 @@ export default function MailboxPicker({
     const [anchor, setAnchor] = React.useState<{ top: number; left: number; up: boolean } | null>(null);
     const boxRef = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLButtonElement>(null);
-    useClickOutside(boxRef, () => setOpen(false));
+    useClickOutside(open, () => setOpen(false), boxRef);
 
     const storeEmails = useAppStore((s) => s.emails);
     const storeTags = useAppStore((s) => s.tags);
@@ -217,14 +217,6 @@ export default function MailboxPicker({
                                     : { top: anchor.top }),
                             }}
                             className="max-w-[calc(100vw-16px)] rounded-lg border border-slate-200 bg-white shadow-xl overflow-hidden"
-                            onKeyDown={(e) => {
-                                // Innermost layer only: the composer around it keeps its own Escape.
-                                if (e.key !== "Escape") return;
-                                e.preventDefault();
-                                e.stopPropagation();
-                                setOpen(false);
-                                triggerRef.current?.focus();
-                            }}
                         >
                             {/* Search + tag filter header: one compact row */}
                             <div className="px-1.5 pt-1.5 pb-1 border-b border-slate-100 flex items-center gap-1">
diff --git a/web/src/components/app/unibox/compose/OutboxIndicator.tsx b/web/src/components/app/unibox/compose/OutboxIndicator.tsx
index 55772ddbc..14989c1aa 100644
--- a/web/src/components/app/unibox/compose/OutboxIndicator.tsx
+++ b/web/src/components/app/unibox/compose/OutboxIndicator.tsx
@@ -17,6 +17,7 @@ import { useOutboxStore, type OutboxEntry } from "@/hooks/useOutboxStore";
 import { useComposeStore } from "@/hooks/useComposeStore";
 import type { AppError } from "@/lib/api/client/normalizeError";
 import buildError from "@/lib/helper/buildError";
+import useClickOutside from "@/hooks/useClickOutside";
 
 function secondsLeft(entry: OutboxEntry, now: number): number {
     return Math.max(0, Math.ceil((entry.scheduledAt - now) / 1000));
@@ -59,30 +60,7 @@ export default function OutboxIndicator() {
         if (entries.length === 0) setOpen(false);
     }, [entries.length]);
 
-    // Outside click / Escape closes the dropdown (same shape as FilterMenu).
-    React.useEffect(() => {
-        if (!open) return;
-        const onDown = (e: MouseEvent | TouchEvent) => {
-            const t = e.target as Node;
-            if (pillRef.current?.contains(t)) return;
-            if (panelRef.current?.contains(t)) return;
-            setOpen(false);
-        };
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                e.stopPropagation();
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", onDown, true);
-        document.addEventListener("touchstart", onDown, true);
-        document.addEventListener("keydown", onKey, true);
-        return () => {
-            document.removeEventListener("mousedown", onDown, true);
-            document.removeEventListener("touchstart", onDown, true);
-            document.removeEventListener("keydown", onKey, true);
-        };
-    }, [open]);
+    useClickOutside(open, () => setOpen(false), [pillRef, panelRef]);
 
     const sorted = React.useMemo(
         () => [...entries].sort((a, b) => a.scheduledAt - b.scheduledAt),
diff --git a/web/src/components/layout/CreditsMeter.tsx b/web/src/components/layout/CreditsMeter.tsx
index baf059190..5467626d5 100644
--- a/web/src/components/layout/CreditsMeter.tsx
+++ b/web/src/components/layout/CreditsMeter.tsx
@@ -38,7 +38,7 @@ export function CreditsMeter() {
     const [open, setOpen] = React.useState(false);
     const ref = React.useRef<HTMLDivElement>(null);
     const close = React.useCallback(() => setOpen(false), []);
-    useClickOutside(ref, close);
+    useClickOutside(open, close, ref);
 
     // Nothing to gauge when the ledger is bypassed (self-host without billing).
     if (!canSee || !metered || credits.isPending || !credits.data || credits.data.unlimited) return null;
diff --git a/web/src/components/layout/NotificationBell.tsx b/web/src/components/layout/NotificationBell.tsx
index 517817f71..f322cb169 100644
--- a/web/src/components/layout/NotificationBell.tsx
+++ b/web/src/components/layout/NotificationBell.tsx
@@ -93,7 +93,7 @@ export function NotificationBell() {
     const [filter, setFilter] = React.useState<"all" | "unread">("all");
     const ref = React.useRef<HTMLDivElement>(null);
     const close = React.useCallback(() => setOpen(false), []);
-    useClickOutside(ref, close);
+    useClickOutside(open, close, ref);
 
     const unread = data?.unread ?? 0;
     const items = data?.notifications ?? [];
diff --git a/web/src/components/ui/DatePicker.tsx b/web/src/components/ui/DatePicker.tsx
index b25e0a4b6..21dea0f9c 100644
--- a/web/src/components/ui/DatePicker.tsx
+++ b/web/src/components/ui/DatePicker.tsx
@@ -9,6 +9,7 @@ import { CalendarIcon, XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import Calendar from "@/components/app/Calendar";
+import useClickOutside from "@/hooks/useClickOutside";
 
 // Parse "yyyy-MM-dd" as a LOCAL date (avoids the UTC shift new Date("yyyy-MM-dd")
 // introduces, which can land the picker a day off in negative-offset timezones).
@@ -41,34 +42,7 @@ export function DatePicker({
     const wrapRef = React.useRef<HTMLDivElement>(null);
     const selected = parseISODate(value);
 
-    // Close on outside click. BUBBLE phase (not capture): the Calendar panel is
-    // portaled to <body> and stops mousedown bubbling, so its own clicks (month
-    // nav, day select) never reach here and don't dismiss it mid-interaction.
-    React.useEffect(() => {
-        if (!open) return;
-        const onDown = (e: MouseEvent | TouchEvent) => {
-            if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false);
-        };
-        document.addEventListener("mousedown", onDown);
-        document.addEventListener("touchstart", onDown);
-        return () => {
-            document.removeEventListener("mousedown", onDown);
-            document.removeEventListener("touchstart", onDown);
-        };
-    }, [open]);
-
-    // Escape closes the calendar only: stopped in the window capture phase so
-    // the popover or dialog holding this field stays open.
-    React.useEffect(() => {
-        if (!open) return;
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key !== "Escape") return;
-            e.stopPropagation();
-            setOpen(false);
-        };
-        window.addEventListener("keydown", onKey, true);
-        return () => window.removeEventListener("keydown", onKey, true);
-    }, [open]);
+    useClickOutside(open, () => setOpen(false), wrapRef);
 
     return (
         <div ref={wrapRef} className={cn("relative inline-flex", className)}>
diff --git a/web/src/components/ui/color-picker.tsx b/web/src/components/ui/color-picker.tsx
index e7dd81f60..fc5024cdc 100644
--- a/web/src/components/ui/color-picker.tsx
+++ b/web/src/components/ui/color-picker.tsx
@@ -12,6 +12,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { PipetteIcon } from "lucide-react";
 
 import { useAnchoredFloating } from "@/hooks/useAnchoredFloating";
+import useClickOutside from "@/hooks/useClickOutside";
 
 const HEX_RE = /^#[0-9a-fA-F]{6}$/;
 
@@ -94,6 +95,7 @@ export default function ColorPicker({
     const [open, setOpen] = React.useState(false);
     const [text, setText] = React.useState(current);
     const panelRef = React.useRef<HTMLDivElement | null>(null);
+    const triggerRef = React.useRef<HTMLButtonElement | null>(null);
     const { setReference, setFloating, floatingStyle } = useAnchoredFloating(open, {
         placement: "bottom-start",
         gap: 6,
@@ -101,27 +103,7 @@ export default function ColorPicker({
 
     React.useEffect(() => setText(current), [current]);
 
-    // Capture phase: a dialog card that stops mousedown must not swallow this.
-    React.useEffect(() => {
-        if (!open) return;
-        const onDown = (e: MouseEvent | TouchEvent) => {
-            if (!panelRef.current?.contains(e.target as Node)) setOpen(false);
-        };
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                e.stopPropagation();
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", onDown, true);
-        document.addEventListener("touchstart", onDown, true);
-        document.addEventListener("keydown", onKey, true);
-        return () => {
-            document.removeEventListener("mousedown", onDown, true);
-            document.removeEventListener("touchstart", onDown, true);
-            document.removeEventListener("keydown", onKey, true);
-        };
-    }, [open]);
+    useClickOutside(open, () => setOpen(false), [triggerRef, panelRef]);
 
     const hsv = hexToHsv(HEX_RE.test(current) ? current : fallback);
 
@@ -149,7 +131,10 @@ export default function ColorPicker({
     return (
         <>
             <button
-                ref={(el) => setReference(el)}
+                ref={(el) => {
+                    triggerRef.current = el;
+                    setReference(el);
+                }}
                 type="button"
                 disabled={disabled}
                 aria-label={ariaLabel ?? "Pick a color"}
diff --git a/web/src/components/ui/popover-menu.tsx b/web/src/components/ui/popover-menu.tsx
index 58b4606c6..c2d3fafcc 100644
--- a/web/src/components/ui/popover-menu.tsx
+++ b/web/src/components/ui/popover-menu.tsx
@@ -44,6 +44,7 @@ import React, {
 import { createPortal } from "react-dom";
 import { AnimatePresence, motion } from "framer-motion";
 import { cn } from "@/lib/utils";
+import useClickOutside from "@/hooks/useClickOutside";
 
 interface MenuCtx {
     id: string;
@@ -58,14 +59,6 @@ interface MenuCtx {
 
 const Ctx = createContext<MenuCtx | null>(null);
 
-// Every open menu, oldest first. Opening one closes the others unless it was
-// opened from inside them, and Escape closes only the newest.
-interface OpenMenu {
-    panel: () => HTMLElement | null;
-    close: () => void;
-}
-const openMenus: OpenMenu[] = [];
-
 function useMenu() {
     const c = useContext(Ctx);
     if (!c) throw new Error("PopoverMenu primitives must be used inside <PopoverMenu>");
@@ -226,48 +219,8 @@ export function PopoverMenuContent({
         };
     }, [open, side, align, sideOffset, triggerRef, anchorPoint, setOpen]);
 
-    // Read through a ref: callers often pass an inline onOpenChange, and
-    // re-running the effect below would reorder the stack on every render.
-    const setOpenRef = useRef(setOpen);
-    setOpenRef.current = setOpen;
-
-    // One menu at a time, closed by a press anywhere else or by Escape.
-    useEffect(() => {
-        if (!open) return;
-        const self: OpenMenu = { panel: () => ref.current, close: () => setOpenRef.current(false) };
-        // A menu with no trigger (anchored at a point) opened from wherever focus is.
-        const origin = triggerRef.current ?? document.activeElement;
-        // The stack is one chain of nested menus, so the menu holding the origin
-        // and everything below it stay; everything above it closes.
-        let parent = openMenus.length - 1;
-        while (parent >= 0 && !(origin && openMenus[parent].panel()?.contains(origin))) parent--;
-        for (const other of openMenus.slice(parent + 1)) other.close();
-        openMenus.push(self);
-        const onPointerDown = (e: PointerEvent) => {
-            const t = e.target as Node;
-            if (ref.current?.contains(t)) return;
-            if (triggerRef.current?.contains(t)) return;
-            // A press inside another portaled floating layer this menu opened (a
-            // date-picker calendar, a nested SelectMenu) must not close this menu.
-            const el = t as Element | null;
-            if (el && typeof el.closest === "function" && el.closest("[data-floating]")) return;
-            self.close();
-        };
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === "Escape" && openMenus[openMenus.length - 1] === self) self.close();
-        };
-        // Capture phase: dialogs stop mousedown propagation on their card so the
-        // backdrop does not close them, which would otherwise swallow this too.
-        // Pointer events so a tap closes it on touch screens as well.
-        document.addEventListener("pointerdown", onPointerDown, true);
-        document.addEventListener("keydown", onKey);
-        return () => {
-            document.removeEventListener("pointerdown", onPointerDown, true);
-            document.removeEventListener("keydown", onKey);
-            const at = openMenus.indexOf(self);
-            if (at >= 0) openMenus.splice(at, 1);
-        };
-    }, [open, triggerRef]);
+    // A press outside, Escape (innermost first), or another menu opening closes it.
+    useClickOutside(open, () => setOpen(false), [triggerRef, ref]);
 
     // Keyboard: focus lands on the panel (never over an autofocused input), and
     // closing hands it back to whatever held it before, if it is still there.
diff --git a/web/src/hooks/BulkEditContactsProvider.tsx b/web/src/hooks/BulkEditContactsProvider.tsx
index e50a09f2f..8340e6273 100644
--- a/web/src/hooks/BulkEditContactsProvider.tsx
+++ b/web/src/hooks/BulkEditContactsProvider.tsx
@@ -5,7 +5,7 @@ import CampaignSelector from '@/components/app/popup/select/CampaignSelector';
 import Selector from '@/components/app/popup/select/Selector';
 import { RiAddLine, RiCloseLine } from '@remixicon/react';
 import React, { createContext, useContext } from 'react';
-import useClickOutside from './useClickOutside';
+import useClickOutside from "@/hooks/useClickOutside";
 import SelectMenu from '@/components/app/popup/select/SelectMenu';
 import SelectOption from '@/components/app/popup/select/SelectOption';
 import MiniTextArea from '@/components/app/popup/MiniTextArea';
@@ -251,7 +251,7 @@ function FieldEdit({
     const [show, setShow] = React.useState<boolean>(false);
     const dropRef = React.useRef<HTMLDivElement>(null)
 
-    useClickOutside(dropRef, () => setShow(false))
+    useClickOutside(show, () => setShow(false), dropRef);
     return (
         <div className='space-y-2'>
             <div className='flex gap-2'>
diff --git a/web/src/hooks/ContactsProvider.tsx b/web/src/hooks/ContactsProvider.tsx
index f94b970bc..76da03185 100644
--- a/web/src/hooks/ContactsProvider.tsx
+++ b/web/src/hooks/ContactsProvider.tsx
@@ -15,7 +15,7 @@ import Selector from "@/components/app/popup/select/Selector";
 import SelectMenu from "@/components/app/popup/select/SelectMenu";
 import SelectOption from "@/components/app/popup/select/SelectOption";
 import { twColors } from "tailwindv4-colors";
-import useClickOutside from "./useClickOutside";
+import useClickOutside from "@/hooks/useClickOutside";
 import CampaignSelector from "@/components/app/popup/select/CampaignSelector";
 import AddContacts from "@/components/app/AddContacts";
 import BulkEditContactsProvider from "./BulkEditContactsProvider";
@@ -917,7 +917,7 @@ function SortBySelection({
     const [show, setShow] = React.useState<boolean>(false)
     const ref = React.useRef<HTMLDivElement>(null);
 
-    useClickOutside(ref, () => setShow(false))
+    useClickOutside(show, () => setShow(false), ref);
 
     return (<div className="space-y-4">
         <div className="relative" ref={ref}>
@@ -967,7 +967,7 @@ function CustomFieldRow({
     const [show, setShow] = React.useState(false);
     const ref = React.useRef<HTMLDivElement>(null);
 
-    useClickOutside(ref, () => setShow(false));
+    useClickOutside(show, () => setShow(false), ref);
 
     return (
     <div className="space-y-2">
diff --git a/web/src/hooks/useClickOutside.test.tsx b/web/src/hooks/useClickOutside.test.tsx
new file mode 100644
index 000000000..e8eaee8d5
--- /dev/null
+++ b/web/src/hooks/useClickOutside.test.tsx
@@ -0,0 +1,121 @@
+// useClickOutside is how every dropdown closes: a press outside it, Escape (the
+// innermost one only), or focus moving into an iframe.
+
+import React from "react";
+import { createPortal } from "react-dom";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
+import useClickOutside from "./useClickOutside";
+
+afterEach(cleanup);
+
+// A wrapper holding trigger and panel, plus an optional portaled floating
+// layer it opens (a calendar).
+function Drop({ name, layer = false, children }: { name: string; layer?: boolean; children?: React.ReactNode }) {
+    const [open, setOpen] = React.useState(false);
+    const ref = React.useRef<HTMLDivElement>(null);
+    useClickOutside(open, () => setOpen(false), ref);
+    return (
+        <div ref={ref}>
+            <button type="button" onClick={() => setOpen((o) => !o)}>
+                {name}
+            </button>
+            {open && (
+                <div data-testid={`${name}-panel`}>
+                    {children}
+                    {layer &&
+                        createPortal(<div data-floating="" data-testid={`${name}-layer`} />, document.body)}
+                </div>
+            )}
+        </div>
+    );
+}
+
+const toggle = (name: string) => fireEvent.click(screen.getByRole("button", { name }));
+const isOpen = (name: string) => !!screen.queryByTestId(`${name}-panel`);
+
+describe("useClickOutside", () => {
+    it("closes on a press outside, and not on one inside it or a floating layer it opened", () => {
+        render(
+            <>
+                <Drop name="A" layer />
+                <div data-testid="out" />
+            </>,
+        );
+        toggle("A");
+        fireEvent.pointerDown(screen.getByTestId("A-panel"));
+        fireEvent.pointerDown(screen.getByTestId("A-layer"));
+        expect(isOpen("A")).toBe(true);
+        fireEvent.pointerDown(screen.getByTestId("out"));
+        expect(isOpen("A")).toBe(false);
+    });
+
+    it("closes on a press elsewhere in the floating dialog card that holds it", () => {
+        render(
+            <div data-floating="" onMouseDown={(e) => e.stopPropagation()}>
+                <Drop name="A" />
+                <div data-testid="card-body" />
+            </div>,
+        );
+        toggle("A");
+        fireEvent.pointerDown(screen.getByTestId("card-body"));
+        expect(isOpen("A")).toBe(false);
+    });
+
+    it("takes Escape for the innermost dropdown only, and keeps it from the dialog around it", () => {
+        let dialogSawEscape = false;
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === "Escape") dialogSawEscape = true;
+        };
+        document.addEventListener("keydown", onKey);
+        render(
+            <Drop name="Outer">
+                <Drop name="Inner" />
+            </Drop>,
+        );
+        toggle("Outer");
+        toggle("Inner");
+        fireEvent.keyDown(document.body, { key: "Escape" });
+        expect([isOpen("Outer"), isOpen("Inner")]).toEqual([true, false]);
+        fireEvent.keyDown(document.body, { key: "Escape" });
+        expect(isOpen("Outer")).toBe(false);
+        expect(dialogSawEscape).toBe(false);
+        fireEvent.keyDown(document.body, { key: "Escape" });
+        expect(dialogSawEscape).toBe(true);
+        document.removeEventListener("keydown", onKey);
+    });
+
+    it("closes the open dropdown when another one opens", () => {
+        render(
+            <>
+                <Drop name="A" />
+                <Drop name="B" />
+            </>,
+        );
+        toggle("A");
+        toggle("B");
+        expect([isOpen("A"), isOpen("B")]).toEqual([false, true]);
+    });
+
+    it("closes on a press inside an iframe, which only blurs the window", async () => {
+        render(
+            <>
+                <Drop name="A" />
+                <iframe title="body" />
+            </>,
+        );
+        const settle = () =>
+            act(async () => {
+                await new Promise((r) => setTimeout(r, 30));
+            });
+        toggle("A");
+        // Leaving the tab is not a press inside the page.
+        fireEvent.blur(window);
+        await settle();
+        expect(isOpen("A")).toBe(true);
+        screen.getByTitle("body").focus();
+        fireEvent.blur(window);
+        await settle();
+        expect(isOpen("A")).toBe(false);
+    });
+});
diff --git a/web/src/hooks/useClickOutside.ts b/web/src/hooks/useClickOutside.ts
new file mode 100644
index 000000000..b4d328c90
--- /dev/null
+++ b/web/src/hooks/useClickOutside.ts
@@ -0,0 +1,93 @@
+// The one way a dropdown, popover or picker closes itself: a press anywhere
+// outside it, Escape, or another one opening. Every floating layer in the
+// dashboard goes through this so they all behave the same.
+
+import { useEffect, useRef, type RefObject } from "react";
+
+type ElRef = RefObject<HTMLElement | null>;
+
+// Every open layer, oldest first. Opening one closes the others unless it was
+// opened from inside them, and Escape closes only the newest.
+interface Layer {
+    contains: (node: Node) => boolean;
+    close: () => void;
+}
+
+const layers: Layer[] = [];
+
+const FOCUSABLE = "button:not(:disabled), [href], input:not(:disabled), select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+
+/**
+ * Close an open floating layer on a press outside `inside`, on Escape (newest
+ * layer first), and when another layer opens outside it. `inside[0]` is where
+ * the layer was opened from (its trigger, or a wrapper holding trigger and
+ * panel). A portaled panel marked `[data-floating]` counts as inside it.
+ */
+export default function useClickOutside(open: boolean, onClose: () => void, inside: ElRef | ElRef[]) {
+    // Through refs: callers pass inline closures and ref arrays, and re-running
+    // the effect on every render would reorder the stack.
+    const dismiss = useRef(onClose);
+    dismiss.current = onClose;
+    const refs = useRef<ElRef[]>([]);
+    refs.current = Array.isArray(inside) ? inside : [inside];
+
+    useEffect(() => {
+        if (!open) return;
+        const contains = (node: Node) => refs.current.some((r) => r.current?.contains(node));
+        const self: Layer = { contains, close: () => dismiss.current() };
+
+        // The stack is one chain of nested layers: the one holding the origin and
+        // everything below it stay, everything above it closes. Opened from inside
+        // a floating panel the stack cannot see, it closes nothing.
+        const origin = refs.current[0]?.current ?? document.activeElement;
+        let parent = layers.length - 1;
+        while (parent >= 0 && !(origin && layers[parent].contains(origin))) parent--;
+        const nested = parent < 0 && !!origin?.closest?.("[data-floating]");
+        if (!nested) for (const other of layers.slice(parent + 1)) other.close();
+        layers.push(self);
+
+        // A floating layer this one opened (its own portaled panel, a calendar, a
+        // nested menu) is inside it; the panel or dialog holding it is not.
+        const isInside = (node: Node) => {
+            if (contains(node)) return true;
+            const floating = (node as Element).closest?.("[data-floating]");
+            return !!floating && !refs.current.some((r) => r.current && floating.contains(r.current));
+        };
+        const onPointerDown = (e: PointerEvent) => {
+            if (!isInside(e.target as Node)) self.close();
+        };
+        // Escape takes the innermost layer only, and stops there so the dialog or
+        // drawer holding it stays open. Focus inside goes back to where it was opened.
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key !== "Escape" || layers[layers.length - 1] !== self) return;
+            e.stopPropagation();
+            const active = document.activeElement;
+            const origin = refs.current[0]?.current;
+            self.close();
+            if (!origin?.isConnected || !active || !isInside(active)) return;
+            const target = origin.matches(FOCUSABLE) ? origin : origin.querySelector<HTMLElement>(FOCUSABLE);
+            target?.focus({ preventScroll: true });
+        };
+        // A press inside an iframe (an email body) never reaches this document; it only blurs the window.
+        let blurTimer: ReturnType<typeof setTimeout> | undefined;
+        const onBlur = () => {
+            blurTimer = setTimeout(() => {
+                if (document.activeElement?.tagName === "IFRAME") self.close();
+            });
+        };
+        // Capture phase: dialogs stop mousedown propagation on their card so the
+        // backdrop does not close them, which would otherwise swallow this too.
+        // Pointer events so a tap closes it on touch screens as well.
+        document.addEventListener("pointerdown", onPointerDown, true);
+        document.addEventListener("keydown", onKey, true);
+        window.addEventListener("blur", onBlur);
+        return () => {
+            clearTimeout(blurTimer);
+            document.removeEventListener("pointerdown", onPointerDown, true);
+            document.removeEventListener("keydown", onKey, true);
+            window.removeEventListener("blur", onBlur);
+            const at = layers.indexOf(self);
+            if (at >= 0) layers.splice(at, 1);
+        };
+    }, [open]);
+}
diff --git a/web/src/hooks/useClickOutside.tsx b/web/src/hooks/useClickOutside.tsx
deleted file mode 100644
index 205bf945f..000000000
--- a/web/src/hooks/useClickOutside.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { RefObject} from 'react';
-import { useEffect } from 'react';
-
-/**
- * Calls handler when a click happens outside the element referenced by ref.
- * Optionally pass a second ref if the trigger button itself should not count as “outside”.
- */
-export default function useClickOutside(
-  ref: RefObject<HTMLElement | null>,
-  handler: () => void,
-) {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      if (!ref.current || ref.current.contains(event.target as Node)) return;
-
-      // Ignore clicks inside any portaled floating layer (a date-picker calendar,
-      // a SelectMenu, a nested popover). Those render to <body>, outside `ref`, so
-      // without this a click into a popover this element opened would dismiss it.
-      const el = event.target as Element | null;
-      if (el && typeof el.closest === "function" && el.closest("[data-floating]")) return;
-
-      handler();
-    };
-
-    // Capture phase so we still fire inside containers that call
-    // stopPropagation() on mousedown (e.g. the contact edit slide-over,
-    // which stops bubbling so clicks inside the panel don't dismiss the
-    // overlay). Bubble-phase listeners never reach document in that case.
-    document.addEventListener('mousedown', listener, true);
-    document.addEventListener('touchstart', listener, true);
-
-    return () => {
-      document.removeEventListener('mousedown', listener, true);
-      document.removeEventListener('touchstart', listener, true);
-    };
-  }, [ref, handler]);
-}
\ No newline at end of file
diff --git a/web/src/lib/api/hooks/app/advisor/useAdvisor.ts b/web/src/lib/api/hooks/app/advisor/useAdvisor.ts
index b42488748..313ecfb75 100644
--- a/web/src/lib/api/hooks/app/advisor/useAdvisor.ts
+++ b/web/src/lib/api/hooks/app/advisor/useAdvisor.ts
@@ -133,7 +133,7 @@ export function useSnoozeAdvisorFinding() {
     });
 }
 
-export function useDismissAdvisorFinding() {
+export function useClickOutsideAdvisorFinding() {
     const invalidate = useAdvisorInvalidator();
     return useMutation({
         mutationFn: ({ id, reason }: { id: string; reason: string }) => dismissAdvisorFinding(id, reason),
diff --git a/web/src/lib/api/hooks/app/emails/useMailboxImportActions.ts b/web/src/lib/api/hooks/app/emails/useMailboxImportActions.ts
index 7fdd2a8dd..7f24cb5ea 100644
--- a/web/src/lib/api/hooks/app/emails/useMailboxImportActions.ts
+++ b/web/src/lib/api/hooks/app/emails/useMailboxImportActions.ts
@@ -51,7 +51,7 @@ export function useCancelMailboxImport(id: string | null) {
     return useJobMutation<void>(id, (i) => cancelMailboxImport(i));
 }
 
-export function useDismissMailboxImport() {
+export function useClickOutsideMailboxImport() {
     const qc = useQueryClient();
     return useMutation({
         mutationFn: (id: string) => dismissMailboxImport(id),

From 8faefb88be292852187da4068decebccf2d384d0 Mon Sep 17 00:00:00 2001
From: Matthew Meszaros <meszmatew@gmail.com>
Date: Thu, 1 Oct 2026 10:14:55 -0700
Subject: [PATCH 2/2] feat: leave Escape to a confirm or modal opened above an
 open dropdown in useClickOutside, drop ImageMenu's duplicate Escape guard,
 and restore the useDismissAdvisorFinding and useDismissMailboxImport mutation
 names the hook rename caught

---
 .../components/app/advisor/AdvisorCard.tsx    |  4 ++--
 .../app/campaigns/sequences/ImageControls.tsx | 14 ------------
 .../app/emails/import/MailboxImportsMenu.tsx  |  4 ++--
 web/src/hooks/useClickOutside.test.tsx        | 22 +++++++++++++++++++
 web/src/hooks/useClickOutside.ts              |  4 ++++
 .../lib/api/hooks/app/advisor/useAdvisor.ts   |  2 +-
 .../app/emails/useMailboxImportActions.ts     |  2 +-
 7 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/web/src/components/app/advisor/AdvisorCard.tsx b/web/src/components/app/advisor/AdvisorCard.tsx
index 69790e2c8..6e59a6547 100644
--- a/web/src/components/app/advisor/AdvisorCard.tsx
+++ b/web/src/components/app/advisor/AdvisorCard.tsx
@@ -39,7 +39,7 @@ import {
 import { useConfirm } from "@/hooks/context/confirm";
 import {
     useAdvisorFeedback,
-    useClickOutsideAdvisorFinding,
+    useDismissAdvisorFinding,
     useSnoozeAdvisorFinding,
     useUndoAdvisorFinding,
 } from "@/lib/api/hooks/app/advisor/useAdvisor";
@@ -63,7 +63,7 @@ export default function AdvisorCard({ finding, onFix, compact = false, defaultOp
     const confirm = useConfirm();
 
     const snooze = useSnoozeAdvisorFinding();
-    const dismiss = useClickOutsideAdvisorFinding();
+    const dismiss = useDismissAdvisorFinding();
     const undo = useUndoAdvisorFinding();
     const feedback = useAdvisorFeedback();
 
diff --git a/web/src/components/app/campaigns/sequences/ImageControls.tsx b/web/src/components/app/campaigns/sequences/ImageControls.tsx
index aaefc5625..05af1845e 100644
--- a/web/src/components/app/campaigns/sequences/ImageControls.tsx
+++ b/web/src/components/app/campaigns/sequences/ImageControls.tsx
@@ -59,20 +59,6 @@ export function ImageMenu({ editor }: { editor: Editor }) {
     const del = useDeleteEmailImage();
     const confirm = useConfirm();
 
-    React.useEffect(() => {
-        if (!open) return;
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key !== "Escape") return;
-            // The delete confirmation sits above this menu, so Escape belongs
-            // to it first: only the innermost layer closes.
-            if (document.querySelector("[role='alertdialog']")) return;
-            e.stopPropagation();
-            setOpen(false);
-        };
-        document.addEventListener("keydown", onKey, true);
-        return () => document.removeEventListener("keydown", onKey, true);
-    }, [open]);
-
     const pick = async (files: FileList | File[] | null) => {
         const file = Array.from(files ?? [])[0];
         if (!file) return;
diff --git a/web/src/components/app/emails/import/MailboxImportsMenu.tsx b/web/src/components/app/emails/import/MailboxImportsMenu.tsx
index b519fb9f4..2de1c7528 100644
--- a/web/src/components/app/emails/import/MailboxImportsMenu.tsx
+++ b/web/src/components/app/emails/import/MailboxImportsMenu.tsx
@@ -11,7 +11,7 @@ import {
     PopoverMenuTrigger,
 } from "@/components/ui/popover-menu";
 import useMailboxImports from "@/lib/api/hooks/app/emails/useMailboxImports";
-import { useClickOutsideMailboxImport } from "@/lib/api/hooks/app/emails/useMailboxImportActions";
+import { useDismissMailboxImport } from "@/lib/api/hooks/app/emails/useMailboxImportActions";
 import { type MailboxImport } from "@/lib/api/models/app/emails/MailboxImport";
 import { vendorLabel } from "@/lib/api/models/app/emails/MailboxSources";
 import { useConfirm } from "@/hooks/context/confirm";
@@ -143,7 +143,7 @@ export default function MailboxImportsMenu() {
 
 function ImportEntry({ job, onOpen }: { job: MailboxImport; onOpen: () => void }) {
     const confirm = useConfirm();
-    const dismiss = useClickOutsideMailboxImport();
+    const dismiss = useDismissMailboxImport();
     const st = jobState(job);
     const live = job.status === "running";
 
diff --git a/web/src/hooks/useClickOutside.test.tsx b/web/src/hooks/useClickOutside.test.tsx
index e8eaee8d5..e2ede53f2 100644
--- a/web/src/hooks/useClickOutside.test.tsx
+++ b/web/src/hooks/useClickOutside.test.tsx
@@ -85,6 +85,28 @@ describe("useClickOutside", () => {
         document.removeEventListener("keydown", onKey);
     });
 
+    it("leaves Escape to a confirm opened above it, and still takes it inside a modal", () => {
+        const { unmount } = render(
+            <>
+                <Drop name="A" />
+                <div role="alertdialog" />
+            </>,
+        );
+        toggle("A");
+        fireEvent.keyDown(document.body, { key: "Escape" });
+        expect(isOpen("A")).toBe(true);
+        unmount();
+
+        render(
+            <div aria-modal="true">
+                <Drop name="B" />
+            </div>,
+        );
+        toggle("B");
+        fireEvent.keyDown(document.body, { key: "Escape" });
+        expect(isOpen("B")).toBe(false);
+    });
+
     it("closes the open dropdown when another one opens", () => {
         render(
             <>
diff --git a/web/src/hooks/useClickOutside.ts b/web/src/hooks/useClickOutside.ts
index b4d328c90..716a0313b 100644
--- a/web/src/hooks/useClickOutside.ts
+++ b/web/src/hooks/useClickOutside.ts
@@ -60,6 +60,10 @@ export default function useClickOutside(open: boolean, onClose: () => void, insi
         // drawer holding it stays open. Focus inside goes back to where it was opened.
         const onKey = (e: KeyboardEvent) => {
             if (e.key !== "Escape" || layers[layers.length - 1] !== self) return;
+            // A modal opened above this layer (the confirm, a dialog) owns Escape first.
+            const modals = document.querySelectorAll('[role="alertdialog"], [aria-modal="true"]');
+            const above = Array.from(modals).some((m) => !refs.current.some((r) => r.current && m.contains(r.current)));
+            if (above) return;
             e.stopPropagation();
             const active = document.activeElement;
             const origin = refs.current[0]?.current;
diff --git a/web/src/lib/api/hooks/app/advisor/useAdvisor.ts b/web/src/lib/api/hooks/app/advisor/useAdvisor.ts
index 313ecfb75..b42488748 100644
--- a/web/src/lib/api/hooks/app/advisor/useAdvisor.ts
+++ b/web/src/lib/api/hooks/app/advisor/useAdvisor.ts
@@ -133,7 +133,7 @@ export function useSnoozeAdvisorFinding() {
     });
 }
 
-export function useClickOutsideAdvisorFinding() {
+export function useDismissAdvisorFinding() {
     const invalidate = useAdvisorInvalidator();
     return useMutation({
         mutationFn: ({ id, reason }: { id: string; reason: string }) => dismissAdvisorFinding(id, reason),
diff --git a/web/src/lib/api/hooks/app/emails/useMailboxImportActions.ts b/web/src/lib/api/hooks/app/emails/useMailboxImportActions.ts
index 7f24cb5ea..7fdd2a8dd 100644
--- a/web/src/lib/api/hooks/app/emails/useMailboxImportActions.ts
+++ b/web/src/lib/api/hooks/app/emails/useMailboxImportActions.ts
@@ -51,7 +51,7 @@ export function useCancelMailboxImport(id: string | null) {
     return useJobMutation<void>(id, (i) => cancelMailboxImport(i));
 }
 
-export function useClickOutsideMailboxImport() {
+export function useDismissMailboxImport() {
     const qc = useQueryClient();
     return useMutation({
         mutationFn: (id: string) => dismissMailboxImport(id),