Add dropdown menu on contacts page rows

- ⋮ Call back / Lookup number beside each contact
- same styling as messages page menu

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