mail page ui correction maj compose 20

app/mail/page.tsx

@@ -39,14 +39,17 @@ interface Email {
   id: number;
   accountId: number;
   from: string;
-  fromName: string;
+  fromName?: string;
   to: string;
   subject: string;
   body: string;
   date: string;
   read: boolean;
   starred: boolean;
-  category: string;
+  deleted: boolean;
+  category?: string;
+  cc?: string;
+  bcc?: string;
 }
 
 interface Attachment {
@@ -463,7 +466,7 @@ export default function MailPage() {
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [folders, setFolders] = useState<string[]>([]);
 
-  // Filter emails based on current view and selected account
+  // Update the filteredEmails logic
   const filteredEmails = useMemo(() => {
     return emails.filter(email => {
       // First filter by account if one is selected
@@ -474,16 +477,15 @@ export default function MailPage() {
       // Then filter by current view
       switch (currentView) {
         case 'inbox':
-          return !email.deleted && email.category === 'inbox';
+          return !email.deleted && !email.category?.includes('sent');
         case 'starred':
-          return !email.deleted && email.starred;
+          return !email.deleted && email.starred === true;
         case 'sent':
-          return !email.deleted && email.category === 'sent';
+          return !email.deleted && email.category?.includes('sent');
         case 'trash':
-          return email.deleted;
+          return email.deleted === true;
         default:
-          // Handle folder views
-          return !email.deleted && email.category === currentView;
+          return false;
       }
     });
   }, [emails, currentView, selectedAccount]);
@@ -522,55 +524,33 @@ export default function MailPage() {
     checkCredentials();
   }, [router]);
 
-  // Fetch emails from IMAP API
-  const loadEmails = async (view?: string, accountId?: number, folder?: string) => {
+  // Update the loadEmails function to properly set email properties
+  const loadEmails = async () => {
     try {
-      console.log('Loading emails...', { view, accountId, folder });
       setLoading(true);
       setError(null);
       
-      let url = '/api/mail';
-      const params = new URLSearchParams();
-      
-      if (view) params.append('view', view);
-      if (accountId) params.append('accountId', accountId.toString());
-      if (folder) params.append('folder', folder);
-      
-      if (params.toString()) {
-        url += `?${params.toString()}`;
-      }
-      
-      const response = await fetch(url);
-      
+      const response = await fetch('/api/mail');
       if (!response.ok) {
-        const errorData = await response.json();
-        if (errorData.error === 'No stored credentials found') {
-          router.push('/mail/login');
-          return;
-        }
-        throw new Error(errorData.error || 'Failed to load emails');
+        throw new Error('Failed to load emails');
       }
       
       const data = await response.json();
       
-      // Update accounts and folders if provided in the response
-      if (data.accounts) {
-        setAccounts([
-          { id: 0, name: 'All', email: '', color: 'bg-gray-500' },
-          ...data.accounts
-        ]);
-      }
-      
-      if (data.folders) {
-        setFolders(data.folders);
-      }
-      
-      // Process the emails array from data.emails
-      const processedEmails = data.emails.map((email: Email) => ({
+      // Process the emails array with proper properties
+      const processedEmails = data.emails.map((email: any) => ({
         ...email,
-        date: new Date(email.date),
-        read: email.read || false,
-        starred: email.starred || false,
+        id: email.id,
+        accountId: email.accountId,
+        from: email.from,
+        fromName: email.fromName || email.from.split('@')[0],
+        to: email.to,
+        subject: email.subject,
+        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'
       }));
       
@@ -585,8 +565,8 @@ export default function MailPage() {
 
   // Update useEffect to load emails when view changes
   useEffect(() => {
-    loadEmails(currentView, selectedAccount?.id);
-  }, [currentView, selectedAccount]);
+    loadEmails();
+  }, [currentView]);
 
   // Format date for display
   const formatDate = (dateString: string) => {
@@ -638,20 +618,30 @@ export default function MailPage() {
     }
   };
 
+  // Update the toggleStarred function to properly handle starring
   const toggleStarred = async (emailId: number, e: React.MouseEvent) => {
     e.stopPropagation();
     
     try {
-      await fetch('/api/mail/toggle-star', {
+      // Optimistically update the UI
+      setEmails(emails.map(email => 
+        email.id === emailId ? { ...email, starred: !email.starred } : email
+      ));
+
+      // Send request to server
+      const response = await fetch('/api/mail/toggle-star', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ emailId })
       });
 
-    const updatedEmails = emails.map(email => 
-      email.id === emailId ? { ...email, starred: !email.starred } : email
-    );
-    setEmails(updatedEmails);
+      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);
     }
@@ -891,6 +881,18 @@ export default function MailPage() {
     }
   };
 
+  // Add debug logging to help track the filtering
+  useEffect(() => {
+    console.log('Current view:', currentView);
+    console.log('Total emails:', emails.length);
+    console.log('Filtered emails:', filteredEmails.length);
+    console.log('Filter criteria:', {
+      starred: filteredEmails.filter(e => e.starred).length,
+      sent: filteredEmails.filter(e => e.category?.includes('sent')).length,
+      deleted: filteredEmails.filter(e => e.deleted).length
+    });
+  }, [currentView, emails, filteredEmails]);
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">