mail page ui correction maj compose 20 bis 7

app/mail/page.tsx

@@ -466,6 +466,7 @@ export default function MailPage() {
   const [contentLoading, setContentLoading] = useState(false);
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [folders, setFolders] = useState<string[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
 
   // Add this logging to see what data we're working with
   useEffect(() => {
@@ -476,12 +477,24 @@ export default function MailPage() {
 
   // Update the filteredEmails logic
   const filteredEmails = useMemo(() => {
-    console.log('Filtering emails for view:', currentView);
+    console.log('Current view:', currentView);
     console.log('Total emails:', emails.length);
 
-    // We don't need complex filtering anymore since we're fetching from the correct folder
+    return emails.filter(email => {
-    return emails;
+      switch (currentView) {
-  }, [emails]);
+        case 'inbox':
+          return !email.deleted && email.folder === 'inbox';
+        case 'starred':
+          return !email.deleted && email.starred === true;
+        case 'sent':
+          return !email.deleted && email.from.toLowerCase().includes('a.tmiri@governance-labs.org');
+        case 'trash':
+          return email.deleted === true;
+        default:
+          return true;
+      }
+    });
+  }, [emails, currentView]);
 
   // Move getSelectedEmail inside the component
   const getSelectedEmail = () => {
@@ -517,24 +530,20 @@ export default function MailPage() {
     checkCredentials();
   }, [router]);
 
-  // Update the loadEmails function to fetch emails from the correct folder
+  // Update the loadEmails function to handle different folders correctly
   const loadEmails = async () => {
     try {
       setLoading(true);
       setError(null);
       
-      // Determine which folder to fetch based on currentView
+      // Fetch emails based on the current view
-      const folder = currentView === 'sent' ? 'Sent' : 
+      const response = await fetch('/api/mail');
-                    currentView === 'trash' ? 'Trash' : 
-                    currentView === 'starred' ? 'Starred' : 'INBOX';
-      
-      const response = await fetch(`/api/mail?folder=${folder}`);
       if (!response.ok) {
         throw new Error('Failed to load emails');
       }
       
       const data = await response.json();
-      console.log(`Loading emails from ${folder} folder:`, data);
+      console.log('Raw email data:', data);
       
       // Process the emails
       const processedEmails = data.emails.map((email: any) => ({
@@ -545,10 +554,18 @@ export default function MailPage() {
         subject: email.subject || '(No subject)',
         body: email.body || '',
         date: email.date || new Date().toISOString(),
-        folder: folder.toLowerCase(),
+        read: email.read || false,
-        read: email.read || false
+        starred: email.starred || false,
+        deleted: email.deleted || false,
+        folder: email.folder || 'inbox'
       }));
 
+      // Update unread count for inbox
+      const unreadInboxEmails = processedEmails.filter(
+        email => !email.read && !email.deleted && email.folder === 'inbox'
+      ).length;
+      setUnreadCount(unreadInboxEmails);
+      
       setEmails(processedEmails);
     } catch (err) {
       console.error('Error loading emails:', err);
@@ -1043,22 +1060,30 @@ export default function MailPage() {
               <li>
                 <Button 
                   variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
-                  className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className={`w-full justify-start py-2 ${
+                    currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+                  }`}
                   onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
                 >
+                  <div className="flex items-center justify-between w-full">
+                    <div className="flex items-center">
                       <Inbox className="h-4 w-4 mr-2" />
                       <span>Inbox</span>
-                  {emails.filter(e => !e.read && e.category === 'inbox').length > 0 && (
+                    </div>
+                    {unreadCount > 0 && (
                       <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
-                      {emails.filter(e => !e.read && e.category === 'inbox').length}
+                        {unreadCount}
                       </span>
                     )}
+                  </div>
                 </Button>
               </li>
               <li>
                 <Button 
                   variant={currentView === 'starred' ? 'secondary' : 'ghost'}
-                  className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className={`w-full justify-start py-2 ${
+                    currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+                  }`}
                   onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
                 >
                   <Star className="h-4 w-4 mr-2" />
@@ -1068,7 +1093,9 @@ export default function MailPage() {
               <li>
                 <Button 
                   variant={currentView === 'sent' ? 'secondary' : 'ghost'}
-                  className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className={`w-full justify-start py-2 ${
+                    currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+                  }`}
                   onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
                 >
                   <Send className="h-4 w-4 mr-2" />
@@ -1078,7 +1105,9 @@ export default function MailPage() {
               <li>
                 <Button 
                   variant={currentView === 'trash' ? 'secondary' : 'ghost'}
-                  className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className={`w-full justify-start py-2 ${
+                    currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+                  }`}
                   onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
                 >
                   <Trash className="h-4 w-4 mr-2" />