From f2f8185c2099d94e302669e52a301d8644928e9a Mon Sep 17 00:00:00 2001
From: jp <jp@txt3.com>
Date: Thu, 13 Aug 2026 18:56:18 +0100
Subject: [PATCH] Use floating modal for add-contact from messages page -
 replace inline row form with overlay modal - keep Name + Email fields and
 POST /api/contacts submit

---
 frontend/src/components/MessagesPage.tsx | 29 ++++++++++++++++--------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/MessagesPage.tsx b/frontend/src/components/MessagesPage.tsx
index 36a9e4c..9c0e297 100644
--- a/frontend/src/components/MessagesPage.tsx
+++ b/frontend/src/components/MessagesPage.tsx
@@ -68,7 +68,6 @@ export default function MessagesPage() {
         const whoRaw = m.contact_name || m.callerid || "Unknown caller";
         const num = (m.callerid || "").replace(/[^\d+]/g, "");
         const showAdd = !m.contact_name && num;
-        const isAdding = addingId === m.id;
         return (
           <div key={m.id} className={"card" + (m.is_read ? "" : " unread")}>
             <div className="who">
@@ -109,17 +108,9 @@ export default function MessagesPage() {
               </button>
               {m.has_audio && <a className="btn" href={"/audio/" + m.id + "?dl=1"}>Download</a>}
               <button className="danger" onClick={() => deleteMsg.mutate(m.id)}>Delete</button>
-              {showAdd && !isAdding && (
+              {showAdd && (
                 <button className="add-btn" onClick={() => startAdd(m)}>+ Add to contacts</button>
               )}
-              {isAdding && (
-                <form className="row" style={{ gap: 6, marginTop: 0 }} onSubmit={(e) => { e.preventDefault(); if (!addName.trim()) return; addContact.mutate({ name: addName.trim(), number: num, email: addEmail.trim() || null }); }}>
-                  <input value={addName} onChange={(e) => setAddName(e.target.value)} placeholder="Name" required style={{ flex: 1, minWidth: 120 }} />
-                  <input value={addEmail} onChange={(e) => setAddEmail(e.target.value)} placeholder="Email" type="email" style={{ flex: 1, minWidth: 140 }} />
-                  <button type="submit" className="primary" disabled={addContact.isPending}>Save</button>
-                  <button type="button" className="btn" onClick={() => setAddingId(null)}>Cancel</button>
-                </form>
-              )}
             </div>
           </div>
         );
@@ -128,6 +119,24 @@ export default function MessagesPage() {
       {data?.messages?.length === 0 && (
         <div className="card empty">No voicemails match your filters.</div>
       )}
+
+      {addingId !== null && (
+        <div className="modal-bg open" onClick={() => setAddingId(null)}>
+          <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <h3>Add contact</h3>
+            <form onSubmit={(e) => { e.preventDefault(); if (!addName.trim()) return; const target = data?.messages?.find((x: any) => x.id === addingId); const targetNum = target ? (target.callerid || "").replace(/[^\d+]/g, "") : ""; addContact.mutate({ name: addName.trim(), number: targetNum, email: addEmail.trim() || null }); }}>
+              <label>Name</label>
+              <input value={addName} onChange={(e) => setAddName(e.target.value)} required />
+              <label>Email</label>
+              <input type="email" value={addEmail} onChange={(e) => setAddEmail(e.target.value)} />
+              <div className="row">
+                <button type="button" className="btn" onClick={() => setAddingId(null)}>Cancel</button>
+                <button type="submit" className="primary" disabled={addContact.isPending}>Save</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
     </>
   );
 }