From c4c9b8a04ae82996118cbdf63c40264a48dc7bf3 Mon Sep 17 00:00:00 2001
From: Christian <christian@blaahund.dk>
Date: Thu, 11 Dec 2025 12:57:14 +0100
Subject: [PATCH] feat: Enhance email actions UI with improved layout and
 attachment handling

---
 app/emails/frontend/emails.html | 57 ++++++++++++++++++++++-----------
 1 file changed, 39 insertions(+), 18 deletions(-)

diff --git a/app/emails/frontend/emails.html b/app/emails/frontend/emails.html
index bd54aba..c5c6af2 100644
--- a/app/emails/frontend/emails.html
+++ b/app/emails/frontend/emails.html
@@ -263,12 +263,10 @@
     }
     
     .email-actions {
-        display: flex;
-        gap: 0.5rem;
         padding: 1rem 1.5rem;
         border-bottom: 1px solid rgba(0,0,0,0.05);
         background: var(--bg-body);
-        align-items: center;
+        flex-wrap: wrap;
     }
     
     .email-actions .btn-primary {
@@ -1111,27 +1109,50 @@ function renderEmailDetail(email) {
             </div>
         </div>
         
-        <div class="email-actions">
-            <button class="btn btn-sm btn-light border" onclick="archiveEmail()" title="Arkivér (e)">
-                <i class="bi bi-archive"></i>
-            </button>
-            <button class="btn btn-sm btn-light border" onclick="markAsSpam()" title="Marker som spam">
-                <i class="bi bi-exclamation-triangle"></i>
-            </button>
-            <button class="btn btn-sm btn-light border" onclick="reprocessEmail()" title="Genbehandl (r)">
-                <i class="bi bi-arrow-clockwise"></i>
-            </button>
-            <button class="btn btn-sm btn-light border text-danger" onclick="deleteEmail()" title="Slet">
-                <i class="bi bi-trash"></i>
-            </button>
+        <div class="email-actions d-flex justify-content-between align-items-center">
+            <div class="d-flex gap-2">
+                <button class="btn btn-sm btn-light border" onclick="archiveEmail()" title="Arkivér (e)">
+                    <i class="bi bi-archive"></i>
+                </button>
+                <button class="btn btn-sm btn-light border" onclick="markAsSpam()" title="Marker som spam">
+                    <i class="bi bi-exclamation-triangle"></i>
+                </button>
+                <button class="btn btn-sm btn-light border" onclick="reprocessEmail()" title="Genbehandl (r)">
+                    <i class="bi bi-arrow-clockwise"></i>
+                </button>
+                <button class="btn btn-sm btn-light border text-danger" onclick="deleteEmail()" title="Slet">
+                    <i class="bi bi-trash"></i>
+                </button>
+            </div>
+            ${email.attachments && email.attachments.length > 0 ? `
+                <div class="d-flex align-items-center gap-2">
+                    <span class="text-muted"><i class="bi bi-paperclip me-1"></i>${email.attachments.length} vedhæftning${email.attachments.length > 1 ? 'er' : ''}</span>
+                    ${email.attachments.map(att => {
+                        const canPreview = canPreviewFile(att.content_type);
+                        return `
+                            ${canPreview ? `
+                                <button onclick="previewAttachment(${email.id}, ${att.id}, '${escapeHtml(att.filename)}', '${att.content_type}')" 
+                                        class="btn btn-sm btn-outline-primary" title="Se ${att.filename}">
+                                    <i class="bi bi-eye me-1"></i>${att.filename}
+                                </button>
+                            ` : `
+                                <a href="/api/v1/emails/${email.id}/attachments/${att.id}" 
+                                   class="btn btn-sm btn-outline-secondary" 
+                                   download="${att.filename}" 
+                                   title="Download ${att.filename}">
+                                    <i class="bi bi-download me-1"></i>${att.filename}
+                                </a>
+                            `}
+                        `;
+                    }).join('')}
+                </div>
+            ` : ''}
         </div>
         
         <div class="email-body">
             ${email.body_html ? `<iframe srcdoc="${email.body_html.replace(/"/g, '&quot;')}"></iframe>` : 
               `<pre style="white-space: pre-wrap; font-family: inherit;">${escapeHtml(email.body_text || 'Ingen indhold')}</pre>`}
         </div>
-        
-        ${attachmentsHtml}
     `;
 }