mail page fix

app/courrier/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, useMemo, useCallback } from 'react';
+import { useEffect, useState, useMemo, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -39,6 +39,7 @@ import {
   extractHeader 
 } from '@/lib/infomaniak-mime-decoder';
 import DOMPurify from 'isomorphic-dompurify';
+import ComposeEmail from '@/components/ComposeEmail';
 
 interface Account {
   id: number;
@@ -490,6 +491,7 @@ export default function CourrierPage() {
   const [isMarkingRead, setIsMarkingRead] = useState(false);
   const [isMarkingUnread, setIsMarkingUnread] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const composeBodyRef = useRef<HTMLDivElement>(null);
 
   // Debug logging for email distribution
   useEffect(() => {
@@ -1394,6 +1396,12 @@ export default function CourrierPage() {
     setComposeCc(replyEmail.cc);
     setComposeSubject(replyEmail.subject);
     setComposeBody(replyEmail.body);
+    
+    // Set the content directly on the div
+    if (composeBodyRef.current) {
+      composeBodyRef.current.innerHTML = replyEmail.body;
+    }
+
     setComposeBcc('');
 
     // Show the compose form and CC field for Reply All
@@ -1594,167 +1602,27 @@ export default function CourrierPage() {
       </div>
 
       {/* Compose Email Modal */}
-      {showCompose && (
-        <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
-          <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
-            {/* Modal Header */}
-            <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
-              <h3 className="text-lg font-semibold text-gray-900">
-                {composeSubject.startsWith('Re:') ? 'Reply' : 
-                 composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
-              </h3>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="hover:bg-gray-100 rounded-full"
-                onClick={() => {
-                  setShowCompose(false);
-                  setComposeTo('');
-                  setComposeCc('');
-                  setComposeBcc('');
-                  setComposeSubject('');
-                  setComposeBody('');
-                  setShowCc(false);
-                  setShowBcc(false);
-                }}
-              >
-                <X className="h-5 w-5 text-gray-500" />
-              </Button>
-            </div>
-
-            {/* Modal Body */}
-            <div className="flex-1 overflow-y-auto">
-              <div className="p-6 space-y-4">
-                {/* To Field */}
-                <div>
-                  <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
-                  <Input
-                    id="to"
-                    value={composeTo}
-                    onChange={(e) => setComposeTo(e.target.value)}
-                    placeholder="recipient@example.com"
-                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
-                  />
-                </div>
-
-                {/* CC/BCC Toggle Buttons */}
-                <div className="flex items-center gap-4">
-                  <button
-                    type="button"
-                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
-                    onClick={() => setShowCc(!showCc)}
-                  >
-                    {showCc ? 'Hide Cc' : 'Add Cc'}
-                  </button>
-                  <button
-                    type="button"
-                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
-                    onClick={() => setShowBcc(!showBcc)}
-                  >
-                    {showBcc ? 'Hide Bcc' : 'Add Bcc'}
-                  </button>
-                </div>
-
-                {/* CC Field */}
-                {showCc && (
-                  <div>
-                    <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
-                    <Input
-                      id="cc"
-                      value={composeCc}
-                      onChange={(e) => setComposeCc(e.target.value)}
-                      placeholder="cc@example.com"
-                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
-                    />
-                  </div>
-                )}
-
-                {/* BCC Field */}
-                {showBcc && (
-                  <div>
-                    <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
-                    <Input
-                      id="bcc"
-                      value={composeBcc}
-                      onChange={(e) => setComposeBcc(e.target.value)}
-                      placeholder="bcc@example.com"
-                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
-                    />
-                  </div>
-                )}
-
-                {/* Subject Field */}
-                <div>
-                  <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
-                  <Input
-                    id="subject"
-                    value={composeSubject}
-                    onChange={(e) => setComposeSubject(e.target.value)}
-                    placeholder="Enter subject"
-                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
-                  />
-                </div>
-
-                {/* Message Body */}
-                <div className="flex-1 overflow-auto">
-                  <div
-                    contentEditable
-                    className="prose max-w-none min-h-[200px] p-4 focus:outline-none border rounded-md"
-                    suppressContentEditableWarning
-                    onInput={(e: React.FormEvent<HTMLDivElement>) => {
-                      setComposeBody((e.target as HTMLDivElement).innerHTML);
-                    }}
-                  >
-                    {composeBody}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Modal Footer */}
-            <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
-              <div className="flex items-center gap-2">
-                {/* File Input for Attachments */}
-                <input
-                  type="file"
-                  id="file-attachment"
-                  className="hidden"
-                  multiple
-                  onChange={handleFileAttachment}
-                />
-                <label htmlFor="file-attachment">
-                  <Button 
-                    variant="outline" 
-                    size="icon"
-                    className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      document.getElementById('file-attachment')?.click();
-                    }}
-                  >
-                    <Paperclip className="h-4 w-4 text-gray-600" />
-                  </Button>
-                </label>
-              </div>
-              <div className="flex items-center gap-3">
-                <Button 
-                  variant="ghost"
-                  className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
-                  onClick={() => setShowCompose(false)}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  className="bg-blue-600 text-white hover:bg-blue-700"
-                  onClick={handleSend}
-                >
-                  Send
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
+      <ComposeEmail
+        showCompose={showCompose}
+        setShowCompose={setShowCompose}
+        composeTo={composeTo}
+        setComposeTo={setComposeTo}
+        composeCc={composeCc}
+        setComposeCc={setComposeCc}
+        composeBcc={composeBcc}
+        setComposeBcc={setComposeBcc}
+        composeSubject={composeSubject}
+        setComposeSubject={setComposeSubject}
+        composeBody={composeBody}
+        setComposeBody={setComposeBody}
+        showCc={showCc}
+        setShowCc={setShowCc}
+        showBcc={showBcc}
+        setShowBcc={setShowBcc}
+        attachments={attachments}
+        setAttachments={setAttachments}
+        handleSend={handleSend}
+      />
       {renderDeleteConfirmDialog()}
     </>
   );

components/ComposeEmail.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+import { useRef } 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';
+
+interface ComposeEmailProps {
+  showCompose: boolean;
+  setShowCompose: (show: boolean) => void;
+  composeTo: string;
+  setComposeTo: (to: string) => void;
+  composeCc: string;
+  setComposeCc: (cc: string) => void;
+  composeBcc: string;
+  setComposeBcc: (bcc: string) => void;
+  composeSubject: string;
+  setComposeSubject: (subject: string) => void;
+  composeBody: string;
+  setComposeBody: (body: string) => void;
+  showCc: boolean;
+  setShowCc: (show: boolean) => void;
+  showBcc: boolean;
+  setShowBcc: (show: boolean) => void;
+  attachments: any[];
+  setAttachments: (attachments: any[]) => void;
+  handleSend: () => Promise<void>;
+}
+
+export default function ComposeEmail({
+  showCompose,
+  setShowCompose,
+  composeTo,
+  setComposeTo,
+  composeCc,
+  setComposeCc,
+  composeBcc,
+  setComposeBcc,
+  composeSubject,
+  setComposeSubject,
+  composeBody,
+  setComposeBody,
+  showCc,
+  setShowCc,
+  showBcc,
+  setShowBcc,
+  attachments,
+  setAttachments,
+  handleSend
+}: ComposeEmailProps) {
+  const composeBodyRef = useRef<HTMLDivElement>(null);
+
+  const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) return;
+    
+    const newAttachments: any[] = [];
+    const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB in bytes
+    const oversizedFiles: string[] = [];
+    
+    for (const file of e.target.files) {
+      if (file.size > MAX_FILE_SIZE) {
+        oversizedFiles.push(file.name);
+        continue;
+      }
+
+      try {
+        // Read file as base64
+        const base64Content = await new Promise<string>((resolve) => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            const base64 = reader.result as string;
+            resolve(base64.split(',')[1]); // Remove data URL prefix
+          };
+          reader.readAsDataURL(file);
+        });
+
+        newAttachments.push({
+          name: file.name,
+          type: file.type,
+          content: base64Content,
+          encoding: 'base64'
+        });
+      } catch (error) {
+        console.error('Error processing attachment:', error);
+      }
+    }
+
+    if (oversizedFiles.length > 0) {
+      alert(`The following files exceed the 10MB size limit and were not attached:\n${oversizedFiles.join('\n')}`);
+    }
+
+    if (newAttachments.length > 0) {
+      setAttachments([...attachments, ...newAttachments]);
+    }
+  };
+
+  if (!showCompose) return null;
+
+  return (
+    <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
+      <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
+        {/* Modal Header */}
+        <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900">
+            {composeSubject.startsWith('Re:') ? 'Reply' : 
+             composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
+          </h3>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="hover:bg-gray-100 rounded-full"
+            onClick={() => {
+              setShowCompose(false);
+              setComposeTo('');
+              setComposeCc('');
+              setComposeBcc('');
+              setComposeSubject('');
+              setComposeBody('');
+              setShowCc(false);
+              setShowBcc(false);
+            }}
+          >
+            <X className="h-5 w-5 text-gray-500" />
+          </Button>
+        </div>
+
+        {/* Modal Body */}
+        <div className="flex-1 overflow-y-auto">
+          <div className="p-6 space-y-4">
+            {/* To Field */}
+            <div>
+              <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
+              <Input
+                id="to"
+                value={composeTo}
+                onChange={(e) => setComposeTo(e.target.value)}
+                placeholder="recipient@example.com"
+                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+              />
+            </div>
+
+            {/* CC/BCC Toggle Buttons */}
+            <div className="flex items-center gap-4">
+              <button
+                type="button"
+                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                onClick={() => setShowCc(!showCc)}
+              >
+                {showCc ? 'Hide Cc' : 'Add Cc'}
+              </button>
+              <button
+                type="button"
+                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                onClick={() => setShowBcc(!showBcc)}
+              >
+                {showBcc ? 'Hide Bcc' : 'Add Bcc'}
+              </button>
+            </div>
+
+            {/* CC Field */}
+            {showCc && (
+              <div>
+                <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
+                <Input
+                  id="cc"
+                  value={composeCc}
+                  onChange={(e) => setComposeCc(e.target.value)}
+                  placeholder="cc@example.com"
+                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                />
+              </div>
+            )}
+
+            {/* BCC Field */}
+            {showBcc && (
+              <div>
+                <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
+                <Input
+                  id="bcc"
+                  value={composeBcc}
+                  onChange={(e) => setComposeBcc(e.target.value)}
+                  placeholder="bcc@example.com"
+                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                />
+              </div>
+            )}
+
+            {/* Subject Field */}
+            <div>
+              <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
+              <Input
+                id="subject"
+                value={composeSubject}
+                onChange={(e) => setComposeSubject(e.target.value)}
+                placeholder="Enter subject"
+                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+              />
+            </div>
+
+            {/* Message Body */}
+            <div className="flex-1 overflow-auto">
+              <div
+                ref={composeBodyRef}
+                contentEditable
+                className="prose max-w-none min-h-[200px] p-4 focus:outline-none border rounded-md"
+                suppressContentEditableWarning
+                onInput={(e: React.FormEvent<HTMLDivElement>) => {
+                  setComposeBody((e.target as HTMLDivElement).innerHTML);
+                }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Modal Footer */}
+        <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
+          <div className="flex items-center gap-2">
+            {/* File Input for Attachments */}
+            <input
+              type="file"
+              id="file-attachment"
+              className="hidden"
+              multiple
+              onChange={handleFileAttachment}
+            />
+            <label htmlFor="file-attachment">
+              <Button 
+                variant="outline" 
+                size="icon"
+                className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
+                onClick={(e) => {
+                  e.preventDefault();
+                  document.getElementById('file-attachment')?.click();
+                }}
+              >
+                <Paperclip className="h-4 w-4 text-gray-600" />
+              </Button>
+            </label>
+          </div>
+          <div className="flex items-center gap-3">
+            <Button 
+              variant="ghost"
+              className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
+              onClick={() => setShowCompose(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              className="bg-blue-600 text-white hover:bg-blue-700"
+              onClick={handleSend}
+            >
+              Send
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}