Make email links clickable: linkify plain-text URLs, allow popups in HTML emails

Add linkify() helper to convert URLs in plain-text bodies into clickable links that open in new tabs. Update HTML email iframe sandbox to allow popups (for links). Style detail links with purple accent color.

Author: AmirhosseinOlyaei

public/app.js

@@ -144,6 +144,13 @@ async function loadBox(box) {
     list.appendChild(div);
   }
 }
+// Turn URLs in plain-text bodies into links that open in a new tab.
+const linkify = (s) =>
+  s.replace(
+    /(https?:\/\/[^\s<]+)/g,
+    '<a href="$1" target="_blank" rel="noopener">$1</a>',
+  );
+
 const joinAddrs = (j) => {
   try {
     return JSON.parse(j).join(", ");
@@ -189,8 +196,8 @@ async function openEmail(id, box) {
     </div>
     ${
       email.body_html
-        ? `<iframe sandbox="" srcdoc="${esc(email.body_html)}"></iframe>`
-        : `<pre>${esc(email.body_text || "(empty)")}</pre>`
+        ? `<iframe sandbox="allow-popups allow-popups-to-escape-sandbox" srcdoc="<base target='_blank'>${esc(email.body_html)}"></iframe>`
+        : `<pre>${linkify(esc(email.body_text || "(empty)"))}</pre>`
     }
   `;
   detail.querySelectorAll("[data-rsvp]").forEach((b) =>

public/styles.css

@@ -388,6 +388,9 @@ main {
   font-family: var(--font);
   font-size: 14px;
 }
+.detail a {
+  color: #a78db1;
+}
 .detail .actions {
   display: flex;
   gap: 8px;