mail page fix design

app/courrier/page.tsx

@@ -410,7 +410,7 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
           <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">${content}</div>
+          <div class="mt-4 prose-sm whitespace-pre-wrap">${content}</div>
         </div>
       </div>
     `;
@@ -419,7 +419,7 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
       <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 class="mt-4 prose-sm">${content}</div>
+          <div class="mt-4 prose-sm whitespace-pre-wrap">${content}</div>
         </div>
       </div>
     `;
@@ -514,6 +514,10 @@ export default function CourrierPage() {
   const [isMarkingUnread, setIsMarkingUnread] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
   const composeBodyRef = useRef<HTMLDivElement>(null);
+  const [originalEmail, setOriginalEmail] = useState<{
+    content: string;
+    type: 'reply' | 'reply-all' | 'forward';
+  } | null>(null);
 
   // Debug logging for email distribution
   useEffect(() => {
@@ -1389,6 +1393,10 @@ 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;
@@ -1407,19 +1415,11 @@ export default function CourrierPage() {
       return subject.startsWith('Re:') ? subject : `Re: ${subject}`;
     };
 
-    // Prepare the reply email
-    const replyEmail = {
-      to: getReplyTo(),
-      cc: getReplyCc(),
-      subject: getReplySubject(),
-      body: getReplyBody(selectedEmail, type)
-    };
-
     // Update the compose form with the reply content
-    setComposeTo(replyEmail.to);
+    setComposeTo(getReplyTo());
-    setComposeCc(replyEmail.cc);
+    setComposeCc(getReplyCc());
-    setComposeSubject(replyEmail.subject);
+    setComposeSubject(getReplySubject());
-    setComposeBody(replyEmail.body);
+    setComposeBody(''); // Start with empty body for new content
     setComposeBcc('');
 
     // Show the compose form and CC field for Reply All
@@ -1427,6 +1427,12 @@ export default function CourrierPage() {
     setShowCc(type === 'reply-all');
     setShowBcc(false);
     setAttachments([]);
+
+    // Pass the formatted original email content to the compose modal
+    setOriginalEmail({
+      content: originalContent,
+      type
+    });
   };
 
   // Add the confirmation dialog component

components/ComposeEmail.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -28,6 +28,10 @@ interface ComposeEmailProps {
   attachments: any[];
   setAttachments: (attachments: any[]) => void;
   handleSend: () => Promise<void>;
+  originalEmail?: {
+    content: string;
+    type: 'reply' | 'reply-all' | 'forward';
+  };
 }
 
 export default function ComposeEmail({
@@ -49,9 +53,11 @@ export default function ComposeEmail({
   setShowBcc,
   attachments,
   setAttachments,
-  handleSend
+  handleSend,
+  originalEmail
 }: ComposeEmailProps) {
   const composeBodyRef = useRef<HTMLDivElement>(null);
+  const [showOriginalContent, setShowOriginalContent] = useState(true);
 
   useEffect(() => {
     if (composeBodyRef.current) {
@@ -62,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);
     }
   };
@@ -214,14 +234,37 @@ export default function ComposeEmail({
               />
             </div>
 
+            {/* Original Email Content Preview */}
+            {originalEmail && showOriginalContent && (
+              <div className="border rounded-md p-4 bg-gray-50">
+                <div className="flex items-center justify-between mb-2">
+                  <h4 className="text-sm font-medium text-gray-700">
+                    {originalEmail.type === 'forward' ? 'Forwarded Message' : 'Original Message'}
+                  </h4>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setShowOriginalContent(false)}
+                    className="text-gray-500 hover:text-gray-700"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+                <div 
+                  className="prose max-w-none text-sm text-gray-600"
+                  dangerouslySetInnerHTML={{ __html: originalEmail.content }}
+                />
+              </div>
+            )}
+
             {/* Message Body */}
-            <div className="flex-1">
+            <div className="flex-1 min-h-[200px]">
               <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-2 text-gray-900 overflow-y-auto"
+                className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-4 text-gray-900 overflow-y-auto"
                 style={{ 
                   minHeight: '200px',
                   direction: 'ltr',