mail page ui correction maj compose 20 bis 5

app/mail/page.tsx

@@ -50,6 +50,7 @@ interface Email {
   category?: 'inbox' | 'sent' | 'trash';
   cc?: string;
   bcc?: string;
+  flags?: string[];
 }
 
 interface Attachment {
@@ -477,36 +478,48 @@ export default function MailPage() {
   const filteredEmails = useMemo(() => {
     console.log('Current view:', currentView);
     console.log('Total emails:', emails.length);
-    console.log('Selected account:', selectedAccount);
 
     return emails.filter(email => {
+      // Log the email properties for debugging
+      console.log('Processing email:', {
+        id: email.id,
+        from: email.from,
+        to: email.to,
+        folder: email.category,
+        flags: email.flags // Some IMAP servers use flags to mark sent items
+      });
+
       switch (currentView) {
         case 'inbox':
           return true; // Keep inbox as is since it's working
           
         case 'sent':
-          // Check if the email is from our email address
-          const userEmail = 'a.tmiri@governance-labs.org'; // This should match your email
-          console.log('Checking sent email:', {
-            from: email.from,
-            userEmail: userEmail,
-            isSent: email.from.includes(userEmail)
-          });
-          return email.from.toLowerCase().includes(userEmail.toLowerCase());
+          // Check multiple conditions that might indicate a sent email
+          return (
+            email.category === 'sent' || // Check if it's in the sent folder
+            email.flags?.includes('\\Sent') || // Check IMAP sent flag
+            email.from.toLowerCase() === 'a.tmiri@governance-labs.org' || // Direct from address match
+            email.from.toLowerCase().includes('<a.tmiri@governance-labs.org>') // From address in angle brackets
+          );
           
         case 'starred':
-          // For starred emails, check if starred property exists and is true
-          return email.starred === true;
+          return (
+            email.starred === true || 
+            email.flags?.includes('\\Flagged') // Some IMAP servers use Flagged for starred
+          );
           
         case 'trash':
-          // For trash, check if deleted property exists and is true
-          return email.deleted === true;
+          return (
+            email.deleted === true ||
+            email.category === 'trash' ||
+            email.flags?.includes('\\Deleted') // Check IMAP deleted flag
+          );
           
         default:
           return true;
       }
     });
-  }, [emails, currentView, selectedAccount]);
+  }, [emails, currentView]);
 
   // Move getSelectedEmail inside the component
   const getSelectedEmail = () => {
@@ -542,7 +555,7 @@ export default function MailPage() {
     checkCredentials();
   }, [router]);
 
-  // Update the loadEmails function to ensure we set default values
+  // Update the loadEmails function to properly process the email data
   const loadEmails = async () => {
     try {
       setLoading(true);
@@ -556,15 +569,24 @@ export default function MailPage() {
       const data = await response.json();
       console.log('Raw email data:', data);
       
-      // Process the emails and ensure default values are set
+      // Process the emails with better property handling
       const processedEmails = data.emails.map((email: any) => ({
         ...email,
         id: Number(email.id),
-        // Set default values for optional properties
-        starred: email.starred || false,
-        deleted: email.deleted || false,
-        category: email.category || 'inbox',
-        read: email.read || false
+        from: email.from || '',
+        to: email.to || '',
+        subject: email.subject || '(No subject)',
+        body: email.body || '',
+        date: email.date || new Date().toISOString(),
+        // Try to determine the category/folder
+        category: email.category || 
+                 (email.folder?.toLowerCase() === 'sent' ? 'sent' : 'inbox'),
+        // Process flags if they exist
+        flags: Array.isArray(email.flags) ? email.flags : [],
+        // Set other properties with defaults
+        starred: email.starred || email.flags?.includes('\\Flagged') || false,
+        deleted: email.deleted || email.flags?.includes('\\Deleted') || false,
+        read: email.read || email.flags?.includes('\\Seen') || false
       }));
       
       console.log('Processed emails:', processedEmails);
@@ -948,6 +970,25 @@ export default function MailPage() {
     }
   };
 
+  // Add this debug component to help us see what's happening
+  const DebugInfo = () => {
+    if (process.env.NODE_ENV !== 'development') return null;
+    
+    return (
+      <div className="fixed bottom-4 right-4 bg-black/80 text-white p-4 rounded-lg text-xs">
+        <div>Current view: {currentView}</div>
+        <div>Total emails: {emails.length}</div>
+        <div>Filtered emails: {filteredEmails.length}</div>
+        <div>Categories present: {
+          [...new Set(emails.map(e => e.category))].join(', ')
+        }</div>
+        <div>Flags present: {
+          [...new Set(emails.flatMap(e => e.flags || []))].join(', ')
+        }</div>
+      </div>
+    );
+  };
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@@ -1484,6 +1525,9 @@ export default function MailPage() {
           </div>
         </div>
       )}
+
+      {/* Add debug info in development */}
+      <DebugInfo />
     </>
   );
 }