From b424b490be15ea965e200be9a9963d9aae452305 Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Mon, 6 Apr 2026 10:46:03 -0700
Subject: [PATCH] fix(web): close tone dropdown on outside click

Add useRef + useEffect mousedown listener to dismiss the Change Tone
dropdown when clicking outside. Prevents stale dropdown from lingering.
---
 web/src/components/NoteEditor.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/web/src/components/NoteEditor.tsx b/web/src/components/NoteEditor.tsx
index 554f597..6b284ff 100644
--- a/web/src/components/NoteEditor.tsx
+++ b/web/src/components/NoteEditor.tsx
@@ -55,9 +55,21 @@ export function NoteEditor({
   const [copilotBusy, setCopilotBusy] = useState(false);
   const [toneMenuOpen, setToneMenuOpen] = useState(false);
   const [explainResult, setExplainResult] = useState<string | null>(null);
+  const toneMenuRef = useRef<HTMLDivElement>(null);
   const onSaveRef = useRef(onSave);
   onSaveRef.current = onSave;
 
+  useEffect(() => {
+    if (!toneMenuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (toneMenuRef.current && !toneMenuRef.current.contains(e.target as Node)) {
+        setToneMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [toneMenuOpen]);
+
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
@@ -214,7 +226,7 @@ export function NoteEditor({
               <span style={{ width: 1, background: "var(--nl-border-default)", margin: "0 4px", alignSelf: "stretch" }} />
               <span style={{ color: "var(--nl-text-secondary)", fontSize: "var(--nl-fs-sm)", marginRight: 4 }}>AI</span>
               <button type="button" disabled={copilotBusy} style={{ ...TOOLBAR_BTN, opacity: copilotBusy ? 0.5 : 1 }} onClick={() => void runCopilot("fix-rewrite")}>Fix & Rewrite</button>
-              <div style={{ position: "relative" }}>
+              <div ref={toneMenuRef} style={{ position: "relative" }}>
                 <button type="button" disabled={copilotBusy} style={{ ...TOOLBAR_BTN, opacity: copilotBusy ? 0.5 : 1 }} onClick={() => setToneMenuOpen(!toneMenuOpen)}>Change Tone ▾</button>
                 {toneMenuOpen && (
                   <div style={{ position: "absolute", top: "100%", left: 0, zIndex: 50, background: "var(--nl-surface-card)", border: "1px solid var(--nl-border-default)", borderRadius: "var(--nl-radius-md)", padding: 4, display: "grid", gap: 2, minWidth: 120 }}>