From cfd984d0aabb98e8905356929fafaa95b57dcfaf Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Mon, 21 Apr 2025 21:07:03 +0200
Subject: [PATCH] mail page fix design

---
 app/courrier/page.tsx       | 46 ++++++++++++++++++++++++++-----------
 components/ComposeEmail.tsx |  7 +++---
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index 07349d7f..b1647b2e 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -370,11 +370,20 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
           decodedContent = convertCharset(partBody, partHeaderInfo.charset);
         }
 
+        // Preserve the original MIME structure
         if (partHeaderInfo.contentType.includes('text/html')) {
-          content = decodedContent;
+          content = `
+            <div class="email-part" data-mime-type="text/html" data-charset="${partHeaderInfo.charset}">
+              ${decodedContent}
+            </div>
+          `;
           break;
         } else if (partHeaderInfo.contentType.includes('text/plain') && !content) {
-          content = decodedContent;
+          content = `
+            <div class="email-part" data-mime-type="text/plain" data-charset="${partHeaderInfo.charset}">
+              <pre style="white-space: pre-wrap; font-family: inherit;">${decodedContent}</pre>
+            </div>
+          `;
         }
       } catch (error) {
         console.error('Error decoding email part:', error);
@@ -383,43 +392,54 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
   } else {
     // Handle simple email
     try {
+      let decodedBody = '';
       if (headerInfo.encoding === 'base64') {
-        content = decodeBase64(body, headerInfo.charset);
+        decodedBody = decodeBase64(body, headerInfo.charset);
       } else if (headerInfo.encoding === 'quoted-printable') {
-        content = decodeQuotedPrintable(body, headerInfo.charset);
+        decodedBody = decodeQuotedPrintable(body, headerInfo.charset);
       } else {
-        content = convertCharset(body, headerInfo.charset);
+        decodedBody = convertCharset(body, headerInfo.charset);
       }
+
+      content = `
+        <div class="email-part" data-mime-type="${headerInfo.contentType}" data-charset="${headerInfo.charset}">
+          ${headerInfo.contentType.includes('text/html') ? decodedBody : `<pre style="white-space: pre-wrap; font-family: inherit;">${decodedBody}</pre>`}
+        </div>
+      `;
     } catch (error) {
       console.error('Error decoding email body:', error);
       content = body;
     }
   }
 
-  // Clean and sanitize HTML content
+  // Clean and sanitize HTML content while preserving structure
   content = cleanHtml(content);
 
-  // Format the reply/forward content
+  // Format the reply/forward content with proper structure and direction
   let formattedContent = '';
   if (type === 'forward') {
     formattedContent = `
-      <div class="prose max-w-none" dir="ltr">
-        <div class="border-l-4 border-gray-300 pl-4 my-4">
+      <div class="email-container" dir="ltr">
+        <div class="email-header" dir="ltr">
           <p class="text-sm text-gray-600 mb-2">Forwarded message from ${email.from}</p>
           <p class="text-sm text-gray-600 mb-2">Date: ${new Date(email.date).toLocaleString()}</p>
           <p class="text-sm text-gray-600 mb-2">Subject: ${email.subject}</p>
           <p class="text-sm text-gray-600 mb-2">To: ${email.to}</p>
           ${email.cc ? `<p class="text-sm text-gray-600 mb-2">Cc: ${email.cc}</p>` : ''}
-          <div class="mt-4 prose-sm whitespace-pre-wrap">${content}</div>
+        </div>
+        <div class="email-content" dir="auto">
+          ${content}
         </div>
       </div>
     `;
   } else {
     formattedContent = `
-      <div class="prose max-w-none" dir="ltr">
-        <div class="border-l-4 border-gray-300 pl-4 my-4">
+      <div class="email-container" dir="ltr">
+        <div class="email-header" dir="ltr">
           <p class="text-sm text-gray-600 mb-2">On ${new Date(email.date).toLocaleString()}, ${email.from} wrote:</p>
-          <div class="mt-4 prose-sm whitespace-pre-wrap">${content}</div>
+        </div>
+        <div class="email-content" dir="auto">
+          ${content}
         </div>
       </div>
     `;
diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index dc0863c0..fba828e2 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -258,20 +258,19 @@ export default function ComposeEmail({
             )}
 
             {/* Message Body */}
-            <div className="flex-1 min-h-[200px]">
+            <div className="flex-1">
               <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
               <div
                 ref={composeBodyRef}
                 contentEditable
                 onInput={handleInput}
-                className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-4 text-gray-900 overflow-y-auto"
+                className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto"
                 style={{ 
                   minHeight: '200px',
-                  direction: 'ltr',
                   textAlign: 'left',
                   unicodeBidi: 'bidi-override'
                 }}
-                dir="ltr"
+                dir="auto"
               />
             </div>
           </div>