From 9db7762e385c17edda1bd66f2d2f8556079936aa Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Mon, 21 Apr 2025 20:58:45 +0200
Subject: [PATCH] mail page fix design

---
 app/courrier/page.tsx       | 46 ++++++++++++++++++++++++++-----------
 components/ComposeEmail.tsx | 19 ++++++++++++---
 2 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index 051756b1..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 with proper structure
+  // 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" dir="auto">${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" dir="auto">${content}</div>
+        </div>
+        <div class="email-content" dir="auto">
+          ${content}
         </div>
       </div>
     `;
diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 1be593ce..fba828e2 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -68,7 +68,21 @@ export default function ComposeEmail({
 
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (composeBodyRef.current) {
-      const encodedContent = encodeComposeContent(composeBodyRef.current.innerHTML);
+      // Get the current content
+      const content = composeBodyRef.current.innerHTML;
+      
+      // Create a temporary div to parse the content
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = content;
+      
+      // Check if the content contains RTL text
+      const hasRTL = /[\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(content);
+      
+      // Set the appropriate direction
+      composeBodyRef.current.dir = hasRTL ? 'rtl' : 'ltr';
+      
+      // Encode the content
+      const encodedContent = encodeComposeContent(content);
       setComposeBody(encodedContent);
     }
   };
@@ -253,11 +267,10 @@ export default function ComposeEmail({
                 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>