From 2b88e88d054f7cb97fef16a3cdae17139e9c0523 Mon Sep 17 00:00:00 2001
From: jp <jp@txt3.com>
Date: Thu, 13 Aug 2026 19:50:22 +0100
Subject: [PATCH] =?UTF-8?q?Add=20dropdown=20menu=20on=20contacts=20page=20?=
 =?UTF-8?q?rows=20-=20=E2=8B=AE=20Call=20back=20/=20Lookup=20number=20besi?=
 =?UTF-8?q?de=20each=20contact=20-=20same=20styling=20as=20messages=20page?=
 =?UTF-8?q?=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ContactsPage.tsx | 57 ++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/frontend/src/components/ContactsPage.tsx b/frontend/src/components/ContactsPage.tsx
index 7f2d4e1..e8a8cd7 100644
--- a/frontend/src/components/ContactsPage.tsx
+++ b/frontend/src/components/ContactsPage.tsx
@@ -52,6 +52,9 @@ export default function ContactsPage() {
                     <a className="btn" href={`/contacts/history/${encodeURIComponent(c.number_e164 || c.name)}`}>History</a>
                     {" "}
                     <DeleteBtn id={c.id} name={c.name} />
+                    <span style={{ position: "relative", display: "inline-block", marginLeft: 4 }}>
+                      <ContactMenu number={c.number_e164} name={c.name} />
+                    </span>
                   </td>
                 </tr>
               ))}
@@ -78,3 +81,57 @@ function DeleteBtn({ id, name }: { id: number; name?: string }) {
   });
   return <button className="danger" onClick={() => del.mutate()}>Delete</button>;
 }
+
+function ContactMenu({ number, name }: { number?: string; name?: string }) {
+  const [open, setOpen] = useState(false);
+  const digits = (number || "").replace(/[^\d+]/g, "");
+  const lookup = encodeURIComponent(name || number || "");
+  return (
+    <>
+      <button className="btn" style={{ padding: "4px 8px", lineHeight: 1 }} onClick={() => setOpen(!open)}>⋮</button>
+      {open && (
+        <>
+          <span
+            className="modal-bg open"
+            style={{ position: "fixed", inset: 0, zIndex: 200 }}
+            onClick={() => setOpen(false)}
+          />
+          <div
+            className="modal"
+            style={{
+              position: "absolute",
+              right: 0,
+              top: "100%",
+              marginTop: 4,
+              zIndex: 201,
+              padding: "6px 0",
+              minWidth: 180,
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {digits && (
+              <a
+                className="btn"
+                href={"tel:" + digits}
+                style={{ display: "block", borderRadius: 0, border: "none", borderBottom: "1px solid var(--border)", width: "100%", justifyContent: "flex-start" }}
+                onClick={() => setOpen(false)}
+              >
+                📞 Call back
+              </a>
+            )}
+            <a
+              className="btn"
+              href={"https://www.google.com/search?q=" + lookup}
+              target="_blank"
+              rel="noreferrer"
+              style={{ display: "block", borderRadius: 0, border: "none", width: "100%", justifyContent: "flex-start" }}
+              onClick={() => setOpen(false)}
+            >
+              🔍 Lookup number
+            </a>
+          </div>
+        </>
+      )}
+    </>
+  );
+}