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

---
 app/courrier/page.tsx       | 62 ++++++++++++-------------------------
 components/ComposeEmail.tsx | 19 ++----------
 2 files changed, 23 insertions(+), 58 deletions(-)

diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index b1647b2e..d7341a89 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -370,20 +370,11 @@ 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 = `
-            <div class="email-part" data-mime-type="text/html" data-charset="${partHeaderInfo.charset}">
-              ${decodedContent}
-            </div>
-          `;
+          content = decodedContent;
           break;
         } else if (partHeaderInfo.contentType.includes('text/plain') && !content) {
-          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>
-          `;
+          content = decodedContent;
         }
       } catch (error) {
         console.error('Error decoding email part:', error);
@@ -392,54 +383,43 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
   } else {
     // Handle simple email
     try {
-      let decodedBody = '';
       if (headerInfo.encoding === 'base64') {
-        decodedBody = decodeBase64(body, headerInfo.charset);
+        content = decodeBase64(body, headerInfo.charset);
       } else if (headerInfo.encoding === 'quoted-printable') {
-        decodedBody = decodeQuotedPrintable(body, headerInfo.charset);
+        content = decodeQuotedPrintable(body, headerInfo.charset);
       } else {
-        decodedBody = convertCharset(body, headerInfo.charset);
+        content = 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 while preserving structure
+  // Clean and sanitize HTML content
   content = cleanHtml(content);
 
-  // Format the reply/forward content with proper structure and direction
+  // Format the reply/forward content
   let formattedContent = '';
   if (type === 'forward') {
     formattedContent = `
-      <div class="email-container" dir="ltr">
-        <div class="email-header" dir="ltr">
+      <div class="prose max-w-none" dir="ltr">
+        <div class="border-l-4 border-gray-300 pl-4 my-4">
           <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>
-        <div class="email-content" dir="auto">
-          ${content}
+          <div class="mt-4 prose-sm">${content}</div>
         </div>
       </div>
     `;
   } else {
     formattedContent = `
-      <div class="email-container" dir="ltr">
-        <div class="email-header" dir="ltr">
+      <div class="prose max-w-none" dir="ltr">
+        <div class="border-l-4 border-gray-300 pl-4 my-4">
           <p class="text-sm text-gray-600 mb-2">On ${new Date(email.date).toLocaleString()}, ${email.from} wrote:</p>
-        </div>
-        <div class="email-content" dir="auto">
-          ${content}
+          <div class="mt-4 prose-sm">${content}</div>
         </div>
       </div>
     `;
@@ -1413,13 +1393,9 @@ export default function CourrierPage() {
   const handleReply = (type: 'reply' | 'reply-all' | 'forward') => {
     if (!selectedEmail) return;
 
-    // Phase 1: Format the original email content
-    const originalContent = getReplyBody(selectedEmail, type);
-
-    // Phase 2: Set up the composition interface
     const getReplyTo = () => {
       if (type === 'forward') return '';
-      return selectedEmail.from;
+          return selectedEmail.from;
     };
 
     const getReplyCc = () => {
@@ -1429,17 +1405,20 @@ export default function CourrierPage() {
 
     const getReplySubject = () => {
       const subject = selectedEmail.subject || '';
-      if (type === 'forward') {
+        if (type === 'forward') {
         return subject.startsWith('Fwd:') ? subject : `Fwd: ${subject}`;
       }
       return subject.startsWith('Re:') ? subject : `Re: ${subject}`;
     };
 
+    // Get the formatted original email content
+    const originalContent = getReplyBody(selectedEmail, type);
+
     // Update the compose form with the reply content
     setComposeTo(getReplyTo());
     setComposeCc(getReplyCc());
     setComposeSubject(getReplySubject());
-    setComposeBody(''); // Start with empty body for new content
+    setComposeBody('');
     setComposeBcc('');
 
     // Show the compose form and CC field for Reply All
@@ -1448,11 +1427,10 @@ export default function CourrierPage() {
     setShowBcc(false);
     setAttachments([]);
 
-    // Pass the formatted original email content to the compose modal
+    // Pass the original email content to the compose modal
     setOriginalEmail({
       content: originalContent,
       type
-    });
   };
 
   // Add the confirmation dialog component
diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index fba828e2..1be593ce 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -68,21 +68,7 @@ export default function ComposeEmail({
 
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (composeBodyRef.current) {
-      // 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);
+      const encodedContent = encodeComposeContent(composeBodyRef.current.innerHTML);
       setComposeBody(encodedContent);
     }
   };
@@ -267,10 +253,11 @@ 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="auto"
+                dir="ltr"
               />
             </div>
           </div>