Add modal mail preview

frontend-js/dist/app.js

@@ -235,3 +235,65 @@
     document.querySelector("#read").innerHTML = html;
   });
 })();
+
+(function () {
+  function ensureModal() {
+    let modal = document.getElementById("mailPreviewModal");
+    if (modal) return modal;
+    modal = document.createElement("div");
+    modal.className = "mail-modal";
+    modal.id = "mailPreviewModal";
+    modal.setAttribute("role", "dialog");
+    modal.setAttribute("aria-modal", "true");
+    modal.setAttribute("aria-label", "Mail-Grossansicht");
+    modal.innerHTML = `
+      <div class="mail-modalbox">
+        <div class="mail-modalhead">
+          <h2 id="mailPreviewModalTitle">Mail</h2>
+          <button class="mail-modalclose" type="button" aria-label="Schliessen" data-mail-modal-close>&times;</button>
+        </div>
+        <div class="mail-modalbody" id="mailPreviewModalBody"></div>
+      </div>`;
+    document.body.appendChild(modal);
+    return modal;
+  }
+
+  function closeModal() {
+    const modal = document.getElementById("mailPreviewModal");
+    if (modal) modal.classList.remove("open");
+  }
+
+  function openFromPreview(button) {
+    const pane = button.closest(".pane-read") || button.closest("#read") || button.closest("#transfer-preview");
+    if (!pane) return;
+    const readBody = pane.querySelector(".read-body");
+    if (!readBody) return;
+    const modal = ensureModal();
+    const title = readBody.querySelector(".read-subject")?.textContent?.trim() || "Mail";
+    const body = document.getElementById("mailPreviewModalBody");
+    document.getElementById("mailPreviewModalTitle").textContent = title;
+    body.innerHTML = "";
+    body.appendChild(readBody.cloneNode(true));
+    body.querySelectorAll("[data-open-mail-modal]").forEach((el) => el.remove());
+    modal.classList.add("open");
+  }
+
+  document.addEventListener("click", (event) => {
+    const open = event.target.closest("[data-open-mail-modal]");
+    if (open) {
+      event.preventDefault();
+      openFromPreview(open);
+      return;
+    }
+    if (event.target.closest("[data-mail-modal-close]")) {
+      closeModal();
+      return;
+    }
+    const modal = event.target.closest(".mail-modal");
+    if (modal && event.target === modal) closeModal();
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") closeModal();
+  });
+})();