mail page ui correction maj 6

app/mail/page.tsx

@@ -558,11 +558,21 @@ export default function MailPage() {
     const email = emails.find(e => e.id === emailId);
     if (email) {
       setSelectedEmail(email);
-      // Mark as read
+      if (!email.read) {
-      const updatedEmails = emails.map(e => 
+        // Mark as read in state
-        e.id === emailId ? { ...e, read: true } : e
+        setEmails(emails.map(e => 
-      );
+          e.id === emailId ? { ...e, read: true } : e
-      setEmails(updatedEmails);
+        ));
+        
+        // Update read status on server
+        fetch('/api/mail/mark-read', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ emailId })
+        }).catch(error => {
+          console.error('Error marking email as read:', error);
+        });
+      }
     }
   };
 
@@ -1037,36 +1047,29 @@ export default function MailPage() {
         </div>
       </div>
 
-      {/* Delete Confirmation Dialog */}
+      {/* Compose Email Modal */}
-      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {deleteType === 'email' ? 'Delete Email' : 
-               deleteType === 'emails' ? 'Delete Selected Emails' : 
-               'Delete Account'}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {/* Compose Modal */}
       {showCompose && (
         <div className="fixed inset-0 bg-black/50 z-50">
           <div className="absolute inset-4 sm:inset-6 md:inset-8 bg-white rounded-lg shadow-xl flex flex-col">
             <div className="flex items-center justify-between p-4 border-b">
               <h2 className="text-lg font-semibold">New Message</h2>
-              <Button variant="ghost" size="icon" onClick={() => setShowCompose(false)}>
+              <Button 
+                variant="ghost" 
+                size="icon" 
+                onClick={() => {
+                  setShowCompose(false);
+                  setComposeTo('');
+                  setComposeSubject('');
+                  setComposeBody('');
+                  setShowCc(false);
+                  setComposeCc('');
+                  setComposeBcc('');
+                }}
+              >
                 <X className="h-4 w-4" />
               </Button>
             </div>
+            
             <div className="p-4 flex-1 overflow-auto space-y-4">
               <div>
                 <Label htmlFor="to">To</Label>
@@ -1074,15 +1077,16 @@ export default function MailPage() {
                   id="to"
                   value={composeTo}
                   onChange={(e) => setComposeTo(e.target.value)}
+                  placeholder="recipient@example.com"
                 />
               </div>
               
-              {/* CC/BCC controls */}
               <div className="flex items-center gap-2">
                 <Button
                   variant="ghost"
                   size="sm"
                   onClick={() => setShowCc(!showCc)}
+                  className="text-gray-500"
                 >
                   {showCc ? 'Hide' : 'Show'} CC/BCC
                 </Button>
@@ -1096,6 +1100,7 @@ export default function MailPage() {
                       id="cc"
                       value={composeCc}
                       onChange={(e) => setComposeCc(e.target.value)}
+                      placeholder="cc@example.com"
                     />
                   </div>
                   <div>
@@ -1104,6 +1109,7 @@ export default function MailPage() {
                       id="bcc"
                       value={composeBcc}
                       onChange={(e) => setComposeBcc(e.target.value)}
+                      placeholder="bcc@example.com"
                     />
                   </div>
                 </>
@@ -1115,6 +1121,7 @@ export default function MailPage() {
                   id="subject"
                   value={composeSubject}
                   onChange={(e) => setComposeSubject(e.target.value)}
+                  placeholder="Email subject"
                 />
               </div>
               
@@ -1125,12 +1132,24 @@ export default function MailPage() {
                   value={composeBody}
                   onChange={(e) => setComposeBody(e.target.value)}
                   className="min-h-[200px]"
+                  placeholder="Write your message here..."
                 />
               </div>
             </div>
             
             <div className="p-4 border-t flex justify-end gap-2">
-              <Button variant="outline" onClick={() => setShowCompose(false)}>
+              <Button 
+                variant="outline" 
+                onClick={() => {
+                  setShowCompose(false);
+                  setComposeTo('');
+                  setComposeSubject('');
+                  setComposeBody('');
+                  setShowCc(false);
+                  setComposeCc('');
+                  setComposeBcc('');
+                }}
+              >
                 Cancel
               </Button>
               <Button>Send</Button>
@@ -1138,6 +1157,31 @@ export default function MailPage() {
           </div>
         </div>
       )}
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {deleteType === 'email' ? 'Delete Email' : 
+               deleteType === 'emails' ? 'Delete Selected Emails' : 
+               'Delete Account'}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. Are you sure you want to proceed?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction 
+              onClick={handleDeleteConfirm}
+              className="bg-red-600 text-white hover:bg-red-700"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }