From 58de4653e11b275792218d354d5f62f6761bdd6c Mon Sep 17 00:00:00 2001
From: jp <jp@txt3.com>
Date: Thu, 13 Aug 2026 19:46:55 +0100
Subject: [PATCH] =?UTF-8?q?Add=20dropdown=20menu=20on=20messages=20page=20?=
 =?UTF-8?q?contact=20rows=20-=20=E2=8B=AE=20button=20beside=20contact=20na?=
 =?UTF-8?q?me/number=20-=20Call=20back=20uses=20tel:=20link=20with=20sanit?=
 =?UTF-8?q?ised=20digits=20-=20Lookup=20number=20opens=20Google=20search?=
 =?UTF-8?q?=20in=20new=20tab=20-=20dropdown=20closes=20on=20outside=20clic?=
 =?UTF-8?q?k?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/MessagesPage.tsx | 70 +++++++++++++++++++++++-
 1 file changed, 68 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/MessagesPage.tsx b/frontend/src/components/MessagesPage.tsx
index 36e274c..23e3080 100644
--- a/frontend/src/components/MessagesPage.tsx
+++ b/frontend/src/components/MessagesPage.tsx
@@ -76,9 +76,21 @@ export default function MessagesPage() {
         const showAdd = !m.contact_name && num;
         return (
           <div key={m.id} className={"card" + (m.is_read ? "" : " unread")}>
-            <div className="who">
+            <div className="who" style={{ position: "relative" }}>
               {m.contact_name && num ? (
-                <a href={"/contacts/history/" + encodeURIComponent(num.replace(/^\+/, ""))}>{whoRaw}</a>
+                <>
+                  <a href={"/contacts/history/" + encodeURIComponent(num.replace(/^\+/, ""))}>{whoRaw}</a>
+                  <span style={{ position: "relative", display: "inline-block", marginLeft: 6, verticalAlign: "middle" }}>
+                    <MsgContactMenu number={num} name={m.contact_name} callerid={m.callerid} />
+                  </span>
+                </>
+              ) : num ? (
+                <>
+                  <span>{whoRaw}</span>
+                  <span style={{ position: "relative", display: "inline-block", marginLeft: 6, verticalAlign: "middle" }}>
+                    <MsgContactMenu number={num} callerid={m.callerid} />
+                  </span>
+                </>
               ) : (
                 <span>{whoRaw}</span>
               )}
@@ -147,3 +159,57 @@ export default function MessagesPage() {
     </>
   );
 }
+
+function MsgContactMenu({ number, name, callerid }: { number?: string; name?: string; callerid?: string }) {
+  const [open, setOpen] = useState(false);
+  const digits = (number || "").replace(/[^\d+]/g, "");
+  const lookup = encodeURIComponent(name || number || callerid || "");
+  return (
+    <>
+      <button className="btn" 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: 6,
+              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>
+        </>
+      )}
+    </>
+  );
+}