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

frontend-js/dist/style.css

@@ -379,6 +379,7 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
   gap: 10px;
 }
 .read-head { border-bottom: 1px solid var(--ol-border); padding-bottom: 10px; margin-bottom: 12px; }
+.read-head.with-popout { position: relative; padding-right: 34px; }
 .read-subject { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
 .read-meta { color: var(--ol-muted); font-size: 12px; }
 .read-pre {
@@ -388,6 +389,78 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
   line-height: 1.45;
   margin: 0;
 }
+.preview-popout {
+  justify-self: end;
+  width: 26px;
+  height: 24px;
+  border: 1px solid var(--ol-border);
+  background: #fff;
+  color: var(--ol-blue-dark);
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 1;
+}
+.preview-popout:hover {
+  background: #eef6fd;
+  border-color: var(--ol-blue);
+}
+.preview-popout.inline {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.mail-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: none;
+  padding: 28px;
+  background: rgba(0, 0, 0, .38);
+}
+.mail-modal.open { display: flex; }
+.mail-modalbox {
+  width: min(1180px, 100%);
+  height: min(860px, 100%);
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid var(--ol-border);
+  box-shadow: 0 20px 70px rgba(0, 0, 0, .32);
+}
+.mail-modalhead {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--ol-border);
+  background: #eef3f8;
+}
+.mail-modalhead h2 {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 17px;
+}
+.mail-modalclose {
+  width: 30px;
+  height: 28px;
+  border: 1px solid var(--ol-border);
+  background: #fff;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+}
+.mail-modalbody {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 20px 24px;
+}
 .ef-empty { color: var(--ol-muted); padding: 24px; }
 .audit-note { padding: 10px 16px; border-bottom: 1px solid var(--ol-border); font-size: 12px; }
 .drop-zone {