From 2cb180b7b0031bd269d20eb8750c0d4c5434df3d Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Fri, 25 Apr 2025 22:09:31 +0200
Subject: [PATCH] panel 2 courier api restore

---
 components/ComposeEmail.tsx | 48 +++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 64586e5a..7f64eb14 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -169,38 +169,50 @@ export default function ComposeEmail({
               subject: decoded.subject
             });
             
-            let formattedContent = '';
-            
+            // Create the email container with header information
+            let emailHeader = '';
             if (type === 'forward') {
-              // EXACTLY MATCH THE FORMAT USED IN PANEL 3 (from ReplyContent in app/courrier/page.tsx)
-              formattedContent = `
-                <div class="forwarded-message">
+              emailHeader = `
+                <div style="border-top: 1px solid #e5e7eb; margin-top: 20px; padding-top: 20px; color: #6b7280; font-size: 14px;">
                   <p>---------- Forwarded message ---------</p>
                   <p>From: ${decoded.from || ''}</p>
                   <p>Date: ${formatDate(decoded.date ? new Date(decoded.date) : null)}</p>
                   <p>Subject: ${decoded.subject || ''}</p>
                   <p>To: ${decoded.to || ''}</p>
-                  <br>
-                  ${decoded.html || `<pre>${decoded.text || ''}</pre>`}
                 </div>
               `;
             } else {
-              formattedContent = `
-                <div class="quoted-message">
+              emailHeader = `
+                <div style="border-top: 1px solid #e5e7eb; margin-top: 20px; padding-top: 20px; color: #6b7280; font-size: 14px;">
                   <p>On ${formatDate(decoded.date ? new Date(decoded.date) : null)}, ${decoded.from || ''} wrote:</p>
-                  <blockquote>
-                    ${decoded.html || `<pre>${decoded.text || ''}</pre>`}
-                  </blockquote>
                 </div>
               `;
             }
-
+            
+            // Get the proper content with minimal sanitization to preserve structure
+            let emailContent = '';
+            if (decoded.html) {
+              // Preserve the HTML structure with minimal cleaning
+              emailContent = DOMPurify.sanitize(decoded.html, {
+                ADD_TAGS: ['style', 'meta'],
+                ADD_ATTR: ['class', 'id', 'style', 'align', 'border', 'cellpadding', 'cellspacing', 'width', 'height'],
+                KEEP_CONTENT: true,
+                WHOLE_DOCUMENT: false
+              });
+            } else if (decoded.text) {
+              emailContent = `<pre style="white-space: pre-wrap; font-family: inherit;">${decoded.text}</pre>`;
+            } else {
+              emailContent = '<div>No content available</div>';
+            }
+            
             // Set the content in the compose area with proper structure
-            const sanitizedContent = DOMPurify.sanitize(formattedContent);
             const wrappedContent = `
               <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px;">
                 <div class="cursor-position" style="min-height: 20px; cursor: text;"><br/></div>
-                ${sanitizedContent}
+                ${emailHeader}
+                <div class="email-content" style="margin-top: 10px; border: 1px solid #e5e7eb; padding: 15px; border-radius: 4px; max-height: 400px; overflow-y: auto;">
+                  ${emailContent}
+                </div>
               </div>
             `;
 
@@ -220,14 +232,14 @@ export default function ComposeEmail({
               }
 
               // After setting the HTML content, add event listeners for scrolling
-              const messageContents = composeBodyRef.current.querySelectorAll('.message-content, .forwarded-message, .quoted-message');
+              const messageContents = composeBodyRef.current.querySelectorAll('.email-content');
               messageContents.forEach(container => {
                 // Make sure the container is properly styled for scrolling
-                (container as HTMLElement).style.maxHeight = '300px';
+                (container as HTMLElement).style.maxHeight = '400px';
                 (container as HTMLElement).style.overflowY = 'auto';
                 (container as HTMLElement).style.border = '1px solid #e5e7eb';
                 (container as HTMLElement).style.borderRadius = '4px';
-                (container as HTMLElement).style.padding = '10px';
+                (container as HTMLElement).style.padding = '15px';
 
                 // Ensure wheel events are properly handled
                 if (!(container as HTMLElement).hasAttribute('data-scroll-handler-attached')) {