mail page fix design

app/courrier/page.tsx

@@ -328,61 +328,93 @@ const initialSidebarItems = [
   }
 ];
 
-function getReplyBody(email: any, type: 'reply' | 'reply-all' | 'forward' = 'reply'): string {
+function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward'): string {
+  if (!email.body) return '';
+  
+  try {
+    // Split email into headers and body
+    const [headersPart, ...bodyParts] = email.body.split('\r\n\r\n');
+    if (!headersPart || bodyParts.length === 0) {
+      throw new Error('Invalid email format: missing headers or body');
+    }
+
+    const body = bodyParts.join('\r\n\r\n');
+    
+    // Parse headers using Infomaniak MIME decoder
+    const headerInfo = parseEmailHeaders(headersPart);
+    const boundary = extractBoundary(headersPart);
+    
     let content = '';
     
-  if (email.body) {
+    // If it's a multipart email
-    // Handle multipart emails
+    if (boundary) {
-    if (email.body.includes('Content-Type: multipart/alternative')) {
+      const parts = body.split(`--${boundary}`);
-      const parts = email.body.split('--');
+      
-      for (const part of parts) {
+      // Find HTML part first, fallback to text part
-        if (part.includes('Content-Type: text/html')) {
+      const htmlPart = parts.find(part => part.toLowerCase().includes('content-type: text/html'));
-          content = part.split('\n\n')[1] || '';
+      const textPart = parts.find(part => part.toLowerCase().includes('content-type: text/plain'));
-          break;
+      
-        }
+      const selectedPart = htmlPart || textPart;
+      if (selectedPart) {
+        const [partHeaders, ...partBodyParts] = selectedPart.split('\r\n\r\n');
+        const partBody = partBodyParts.join('\r\n\r\n');
+        const partHeaderInfo = parseEmailHeaders(partHeaders);
+        
+        content = partHeaderInfo.encoding === 'quoted-printable'
+          ? decodeQuotedPrintable(partBody, partHeaderInfo.charset)
+          : partBody;
       }
     } else {
-      content = email.body;
+      content = headerInfo.encoding === 'quoted-printable'
+        ? decodeQuotedPrintable(body, headerInfo.charset)
+        : body;
     }
     
-    // Clean and structure the content
+    // Convert plain text to HTML if needed
-    content = content
+    if (!headerInfo.contentType.includes('text/html')) {
-      .replace(/<br\s*\/?>/gi, '\n')
-      .replace(/<p>/gi, '\n')
-      .replace(/<\/p>/gi, '\n')
-      .replace(/<div>/gi, '\n')
-      .replace(/<\/div>/gi, '\n')
-      .trim();
-
-    // Convert plain text to HTML while preserving formatting
       content = content
         .split('\n')
-      .map(line => `<p>${line}</p>`)
+        .map(line => {
+          if (!line.trim()) return '<br>';
+          if (line.startsWith('>')) {
+            return `<p class="text-gray-600" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">${line}</p>`;
+          }
+          return `<p dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">${line}</p>`;
+        })
         .join('');
-
-    // Add proper quoting structure
-    const quotedContent = `
-      <blockquote style="border-left: 2px solid #ccc; padding-left: 10px; margin: 10px 0 0 0">
-        ${content}
-      </blockquote>
-    `;
-
-    // Add metadata based on type
-    const metadata = `
-      <div style="color: #666; font-size: 0.9em; margin-bottom: 10px;">
-        ${type === 'forward' ? 'Forwarded message' : 'Original message'}<br/>
-        From: ${email.from}<br/>
-        Date: ${new Date(email.date).toLocaleString()}<br/>
-        Subject: ${email.subject}
-      </div>
-    `;
-
-    return type === 'forward' 
-      ? `<div>${metadata}${quotedContent}</div>`
-      : `<div><br/><br/>${metadata}${quotedContent}</div>`;
     }
     
+    // Clean HTML content
+    content = cleanHtml(content);
+    
+    const date = new Date(email.date).toLocaleString();
+    
+    if (type === 'forward') {
+      return `
+        <div class="prose max-w-none" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">
+          <div class="border-l-4 border-gray-300 pl-4 my-4">
+            <p class="text-sm text-gray-600 mb-2" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;"><strong>From:</strong> ${email.from}</p>
+            <p class="text-sm text-gray-600 mb-2" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;"><strong>Date:</strong> ${date}</p>
+            <p class="text-sm text-gray-600 mb-2" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;"><strong>Subject:</strong> ${email.subject}</p>
+            <p class="text-sm text-gray-600 mb-2" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;"><strong>To:</strong> ${Array.isArray(email.to) ? email.to.join(', ') : email.to}</p>
+            <div class="mt-4 prose-sm" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">${content}</div>
+          </div>
+        </div>
+      `;
+    } else {
+      return `
+        <div class="prose max-w-none" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">
+          <div class="border-l-4 border-gray-300 pl-4 my-4">
+            <p class="text-sm text-gray-600 mb-2" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">On ${date}, ${email.from} wrote:</p>
+            <div class="mt-4 prose-sm" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">${content}</div>
+          </div>
+        </div>
+      `;
+    }
+  } catch (error) {
+    console.error('Error processing email body:', error);
     return '';
+  }
 }
 
 export default function CourrierPage() {

components/ComposeEmail.tsx

@@ -1,18 +1,12 @@
 'use client';
 
-import { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Paperclip, X } from 'lucide-react';
 import { Textarea } from '@/components/ui/textarea';
 
-// Direction detection utility
-function detectDirection(text: string): 'rtl' | 'ltr' {
-  const rtlChars = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
-  return rtlChars.test(text) ? 'rtl' : 'ltr';
-}
-
 interface ComposeEmailProps {
   showCompose: boolean;
   setShowCompose: (show: boolean) => void;
@@ -56,22 +50,17 @@ export default function ComposeEmail({
   setAttachments,
   handleSend
 }: ComposeEmailProps) {
-  const editorRef = useRef<HTMLDivElement>(null);
+  const composeBodyRef = useRef<HTMLDivElement>(null);
-  const [direction, setDirection] = useState<'ltr' | 'rtl'>('ltr');
 
   useEffect(() => {
-    if (editorRef.current) {
+    if (composeBodyRef.current) {
-      editorRef.current.innerHTML = composeBody;
+      composeBodyRef.current.innerHTML = composeBody;
-      const plainText = editorRef.current.textContent || '';
-      setDirection(detectDirection(plainText));
     }
   }, [composeBody]);
 
-  const handleInput = () => {
+  const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
-    if (editorRef.current) {
+    if (composeBodyRef.current) {
-      const plainText = editorRef.current.textContent || '';
+      setComposeBody(composeBodyRef.current.innerHTML);
-      setDirection(detectDirection(plainText));
-      setComposeBody(editorRef.current.innerHTML);
     }
   };
 
@@ -223,23 +212,14 @@ export default function ComposeEmail({
             </div>
 
             {/* Message Body */}
-            <div className="flex-1 min-h-[200px] overflow-auto">
+            <div className="flex-1">
-              <div
+              <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
-                ref={editorRef}
+              <Textarea
-                contentEditable
+                id="message"
-                className="prose max-w-none min-h-[200px] p-4 border border-gray-300 rounded-lg bg-white"
+                value={composeBody}
-                style={{
+                onChange={(e) => setComposeBody(e.target.value)}
-                  color: '#000000',
+                placeholder="Write your message..."
-                  cursor: 'text',
+                className="w-full h-full mt-1 bg-white border-gray-300 text-gray-900 resize-none"
-                  whiteSpace: 'pre-wrap',
-                  wordBreak: 'break-word',
-                  fontFamily: 'inherit',
-                  fontSize: 'inherit',
-                  lineHeight: 'inherit',
-                  textAlign: 'left'
-                }}
-                dir={direction}
-                onInput={handleInput}
               />
             </div>
           </div>