mail page ui correction maj compose 20 bis 2

app/mail/page.tsx

@@ -44,10 +44,10 @@ interface Email {
   subject: string;
   body: string;
   date: string;
-  read: boolean;
+  read?: boolean;
-  starred: boolean;
+  starred?: boolean;
-  deleted: boolean;
+  deleted?: boolean;
-  category?: string;
+  category?: 'inbox' | 'sent' | 'trash';
   cc?: string;
   bcc?: string;
 }
@@ -466,22 +466,69 @@ export default function MailPage() {
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [folders, setFolders] = useState<string[]>([]);
 
-  // Update the filteredEmails logic to match how Inbox works
+  // Add this logging to see what data we're working with
+  useEffect(() => {
+    console.log('All emails:', emails);
+    console.log('Current view:', currentView);
+    console.log('Selected account:', selectedAccount);
+  }, [emails, currentView, selectedAccount]);
+
+  // Update the filteredEmails logic
   const filteredEmails = useMemo(() => {
-    if (!emails) return [];
+    console.log('Current view:', currentView);
+    console.log('Total emails:', emails.length);
+
+    // Initialize counters for debugging
+    let starredCount = 0;
+    let sentCount = 0;
+    let deletedCount = 0;
+
+    const filtered = emails.filter(email => {
+      // Log each email for debugging
+      console.log('Processing email:', {
+        id: email.id,
+        category: email.category,
+        from: email.from,
+        starred: email.starred,
+        deleted: email.deleted
+      });
 
       switch (currentView) {
         case 'inbox':
-        return emails; // This is working, so let's use similar logic for others
+          return true; // Show all emails in inbox since it's working
+          
         case 'starred':
-        return emails.filter(email => email.starred);
+          if (email.starred) starredCount++;
+          // Consider an email starred if it has the starred property set to true
+          return Boolean(email.starred);
+          
         case 'sent':
-        return emails.filter(email => email.from === selectedAccount?.email);
+          // Check if the email is from the current account
+          const isSent = selectedAccount && email.from.includes(selectedAccount.email);
+          if (isSent) sentCount++;
+          return isSent;
+          
         case 'trash':
-        return emails.filter(email => email.deleted);
+          if (email.deleted) deletedCount++;
+          // Consider an email deleted if it has the deleted property set to true
+          return Boolean(email.deleted);
+          
         default:
-        return emails;
+          return true;
       }
+    });
+
+    // Log the results for debugging
+    console.log('Filter results:', {
+      view: currentView,
+      total: emails.length,
+      filtered: filtered.length,
+      starredCount,
+      sentCount,
+      deletedCount
+    });
+
+    return filtered;
   }, [emails, currentView, selectedAccount]);
 
   // Move getSelectedEmail inside the component
@@ -518,7 +565,7 @@ export default function MailPage() {
     checkCredentials();
   }, [router]);
 
-  // Update the loadEmails function to properly set email properties
+  // Update the loadEmails function to ensure we set default values
   const loadEmails = async () => {
     try {
       setLoading(true);
@@ -530,24 +577,20 @@ export default function MailPage() {
       }
       
       const data = await response.json();
+      console.log('Raw email data:', data);
       
-      // Process the emails array with proper properties
+      // Process the emails and ensure default values are set
       const processedEmails = data.emails.map((email: any) => ({
         ...email,
-        id: email.id,
+        id: Number(email.id),
-        accountId: email.accountId,
+        // Set default values for optional properties
-        from: email.from,
+        starred: email.starred || false,
-        fromName: email.fromName || email.from.split('@')[0],
+        deleted: email.deleted || false,
-        to: email.to,
+        category: email.category || 'inbox',
-        subject: email.subject,
+        read: email.read || false
-        body: decodeMimeContent(email.body),
-        date: new Date(email.date).toISOString(),
-        read: Boolean(email.read),
-        starred: Boolean(email.starred),
-        deleted: Boolean(email.deleted),
-        category: email.category || 'inbox'
       }));
       
+      console.log('Processed emails:', processedEmails);
       setEmails(processedEmails);
     } catch (err) {
       console.error('Error loading emails:', err);
@@ -612,17 +655,20 @@ export default function MailPage() {
     }
   };
 
-  // Update the toggleStarred function to properly handle starring
+  // Update the toggleStarred function
   const toggleStarred = async (emailId: number, e: React.MouseEvent) => {
     e.stopPropagation();
     
-    try {
+    // Update the email in state
-      // Optimistically update the UI
+    setEmails(prevEmails => 
-      setEmails(emails.map(email => 
+      prevEmails.map(email => 
-        email.id === emailId ? { ...email, starred: !email.starred } : email
+        email.id === emailId 
-      ));
+          ? { ...email, starred: !email.starred }
+          : email
+      )
+    );
 
-      // Send request to server
+    try {
       const response = await fetch('/api/mail/toggle-star', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -630,14 +676,18 @@ export default function MailPage() {
       });
 
       if (!response.ok) {
-        // Revert the change if the server request fails
-        setEmails(emails.map(email => 
-          email.id === emailId ? { ...email, starred: !email.starred } : email
-        ));
         throw new Error('Failed to toggle star');
       }
     } catch (error) {
       console.error('Error toggling star:', error);
+      // Revert the change if the server request fails
+      setEmails(prevEmails => 
+        prevEmails.map(email => 
+          email.id === emailId 
+            ? { ...email, starred: !email.starred }
+            : email
+        )
+      );
     }
   };
 
@@ -887,6 +937,40 @@ export default function MailPage() {
     });
   }, [currentView, emails, filteredEmails]);
 
+  // Add a function to move to trash
+  const moveToTrash = async (emailId: number) => {
+    // Update the email in state
+    setEmails(prevEmails => 
+      prevEmails.map(email => 
+        email.id === emailId 
+          ? { ...email, deleted: true, category: 'trash' }
+          : email
+      )
+    );
+
+    try {
+      const response = await fetch('/api/mail/move-to-trash', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ emailId })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to move to trash');
+      }
+    } catch (error) {
+      console.error('Error moving to trash:', error);
+      // Revert the change if the server request fails
+      setEmails(prevEmails => 
+        prevEmails.map(email => 
+          email.id === emailId 
+            ? { ...email, deleted: false, category: 'inbox' }
+            : email
+        )
+      );
+    }
+  };
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">