Improve image uploads and previews

public/admin.js

@@ -87,6 +87,12 @@ $("#statusSelect").addEventListener("change", async () => {
   await loadConversations();
 });
 
+$("#messages").addEventListener("click", (event) => {
+  const preview = event.target.closest("[data-photo-url]");
+  if (!preview) return;
+  openPhotoPreview(preview.dataset.photoUrl, preview.dataset.photoName);
+});
+
 async function showApp() {
   $("#loginView").classList.add("hidden");
   $("#appView").classList.remove("hidden");
@@ -188,12 +194,57 @@ function renderActive() {
     <article class="message ${message.senderType}">
       <div class="by">${escapeHtml(message.senderName || message.senderType)} · ${escapeHtml(message.createdAt)}</div>
       <p>${escapeHtml(message.body)}</p>
-      ${message.attachments.map((a) => `<a href="${a.url}" target="_blank" rel="noreferrer">${escapeHtml(a.name)}</a>`).join("")}
+      ${renderAttachments(message.attachments)}
     </article>
   `).join("");
   $("#messages").scrollTop = $("#messages").scrollHeight;
 }
 
+function renderAttachments(attachments) {
+  if (!attachments.length) return "";
+  return `<div class="attachments">${attachments.map((attachment) => {
+    if (!attachment.type?.startsWith("image/")) {
+      return `<a href="${escapeHtml(attachment.url)}" target="_blank" rel="noreferrer">${escapeHtml(attachment.name)}</a>`;
+    }
+    return `
+      <button class="photo-preview" type="button" data-photo-url="${escapeHtml(attachment.url)}" data-photo-name="${escapeHtml(attachment.name)}">
+        <img src="${escapeHtml(attachment.url)}" alt="${escapeHtml(attachment.name)}">
+        <span>${escapeHtml(attachment.name)}</span>
+      </button>
+    `;
+  }).join("")}</div>`;
+}
+
+function openPhotoPreview(url, name) {
+  let modal = $("#photoModal");
+  if (!modal) {
+    modal = document.createElement("div");
+    modal.id = "photoModal";
+    modal.className = "photo-modal hidden";
+    modal.innerHTML = `
+      <button class="photo-backdrop" type="button" aria-label="Zavrit nahled"></button>
+      <figure>
+        <button class="photo-close" type="button" aria-label="Zavrit nahled">×</button>
+        <img alt="">
+        <figcaption></figcaption>
+      </figure>
+    `;
+    document.body.append(modal);
+    modal.addEventListener("click", (event) => {
+      if (event.target.closest(".photo-close") || event.target.classList.contains("photo-backdrop")) {
+        modal.classList.add("hidden");
+      }
+    });
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") modal.classList.add("hidden");
+    });
+  }
+  modal.querySelector("img").src = url;
+  modal.querySelector("img").alt = name || "Fotka";
+  modal.querySelector("figcaption").textContent = name || "";
+  modal.classList.remove("hidden");
+}
+
 async function saveSite(patch) {
   const data = await api("/api/admin/site", { method: "PATCH", body: patch });
   state.site = data.site;