Add dropdown menu on messages page contact rows

- ⋮ button beside contact name/number
- Call back uses tel: link with sanitised digits
- Lookup number opens Google search in new tab
- dropdown closes on outside click

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>
+        </>
+      )}
+    </>
+  );
+}