mail page ui correction maj compose 20 bis 15

app/mail/page.tsx

@@ -430,13 +430,14 @@ function cleanEmailContent(content: string): string {
   });
 }
 
-// First, let's define our mail view types based on the actual IMAP folders
-type MailView = 'INBOX' | 'Sent' | 'Trash' | 'Spam' | 'Drafts' | 'Archives' | 'Archive' | 'starred';
+// Define the exact folder names from IMAP
+type MailFolder = 'INBOX' | 'Sent' | 'Trash' | 'Spam' | 'Drafts' | 'Archives';
+type MailView = MailFolder | 'starred';
 
-// Update the sidebar navigation to use exact IMAP folder names
+// Map the exact IMAP folders to our sidebar items
 const sidebarNavItems = [
   {
-    view: 'INBOX' as MailView, // Exact IMAP folder name
+    view: 'INBOX' as MailView,
     label: 'Inbox',
     icon: Inbox,
     folder: 'INBOX'
@@ -448,31 +449,31 @@ const sidebarNavItems = [
     folder: null // Special case for starred items
   },
   {
-    view: 'Sent' as MailView, // Exact IMAP folder name
+    view: 'Sent' as MailView,
     label: 'Sent',
     icon: Send,
     folder: 'Sent'
   },
   {
-    view: 'Drafts' as MailView, // Exact IMAP folder name
+    view: 'Drafts' as MailView,
     label: 'Drafts',
     icon: Edit,
     folder: 'Drafts'
   },
   {
-    view: 'Spam' as MailView, // Exact IMAP folder name
+    view: 'Spam' as MailView,
     label: 'Spam',
     icon: AlertOctagon,
     folder: 'Spam'
   },
   {
-    view: 'Trash' as MailView, // Exact IMAP folder name
+    view: 'Trash' as MailView,
     label: 'Trash',
     icon: Trash,
     folder: 'Trash'
   },
   {
-    view: 'Archives' as MailView, // Exact IMAP folder name
+    view: 'Archives' as MailView,
     label: 'Archives',
     icon: Archive,
     folder: 'Archives'
@@ -487,7 +488,7 @@ export default function MailPage() {
     { id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' }
   ]);
   const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
-  const [currentView, setCurrentView] = useState<MailView>('INBOX'); // Use exact IMAP folder name
+  const [currentView, setCurrentView] = useState<MailView>('INBOX');
   const [showCompose, setShowCompose] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
@@ -519,29 +520,24 @@ export default function MailPage() {
   const [folders, setFolders] = useState<string[]>([]);
   const [unreadCount, setUnreadCount] = useState(0);
 
-  // Add this logging to see what data we're working with
+  // Debug logging for email distribution
   useEffect(() => {
-    console.log('All emails:', emails);
+    const emailsByFolder = emails.reduce((acc, email) => {
+      acc[email.folder] = (acc[email.folder] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>);
+    
+    console.log('Emails by folder:', emailsByFolder);
     console.log('Current view:', currentView);
-    console.log('Selected account:', selectedAccount);
-  }, [emails, currentView, selectedAccount]);
+  }, [emails, currentView]);
 
-  // Update the filteredEmails logic to use exact folder names
+  // Update the filteredEmails logic
   const filteredEmails = useMemo(() => {
-    console.log('Filtering emails:', {
-      total: emails.length,
-      byFolder: emails.reduce((acc, email) => {
-        acc[email.folder] = (acc[email.folder] || 0) + 1;
-        return acc;
-      }, {} as Record<string, number>),
-      currentView
-    });
-
     if (currentView === 'starred') {
       return emails.filter(email => email.starred);
     }
 
-    // For all other views, use exact folder name matching
+    // For all other views, match exactly with the IMAP folder name
     return emails.filter(email => email.folder === currentView);
   }, [emails, currentView]);
 
@@ -579,7 +575,7 @@ export default function MailPage() {
     checkCredentials();
   }, [router]);
 
-  // Update the loadEmails function to preserve exact folder names
+  // Update the loadEmails function
   const loadEmails = async () => {
     try {
       setLoading(true);
@@ -593,7 +589,7 @@ export default function MailPage() {
       const data = await response.json();
       console.log('Raw email data:', data);
       
-      // Process the emails, keeping exact folder names
+      // Process emails keeping exact folder names
       const processedEmails = data.emails.map((email: any) => ({
         ...email,
         id: Number(email.id),
@@ -604,10 +600,10 @@ export default function MailPage() {
         date: email.date || new Date().toISOString(),
         read: email.read || false,
         starred: email.starred || false,
-        folder: email.folder // Keep exact folder name from IMAP
+        folder: email.folder // Keep exact IMAP folder name
       }));
 
-      // Update unread count for INBOX (note the exact folder name)
+      // Update unread count for INBOX
       const unreadInboxEmails = processedEmails.filter(
         email => !email.read && email.folder === 'INBOX'
       ).length;