mail page connected with folders 2

app/mail/page.tsx

@@ -45,14 +45,12 @@ interface Email {
   subject: string;
   body: string;
   date: string;
-  read?: boolean;
-  starred?: boolean;
-  deleted?: boolean;
-  category?: 'inbox' | 'sent' | 'trash' | 'spam' | 'drafts' | 'archives' | 'archive';
+  read: boolean;
+  starred: boolean;
+  folder: string;
   cc?: string;
   bcc?: string;
   flags?: string[];
-  draft?: boolean;
 }
 
 interface Attachment {
@@ -431,7 +429,7 @@ function cleanEmailContent(content: string): string {
 }
 
 // Define the exact folder names from IMAP
-type MailFolder = 'INBOX' | 'Sent' | 'Trash' | 'Spam' | 'Drafts' | 'Archives';
+type MailFolder = 'INBOX' | 'Sent' | 'Trash' | 'Spam' | 'Drafts' | 'Archives' | 'Archive';
 type MailView = MailFolder | 'starred';
 
 // Map the exact IMAP folders to our sidebar items
@@ -477,6 +475,12 @@ const sidebarNavItems = [
     label: 'Archives',
     icon: Archive,
     folder: 'Archives'
+  },
+  {
+    view: 'Archive' as MailView,
+    label: 'Archive',
+    icon: Archive,
+    folder: 'Archive'
   }
 ];
 
@@ -581,16 +585,20 @@ export default function MailPage() {
       
       // Process emails keeping exact folder names
       const processedEmails = data.emails.map((email: any) => ({
-        ...email,
         id: Number(email.id),
+        accountId: 1, // Default account ID
         from: email.from || '',
+        fromName: email.from?.split('@')[0] || '',
         to: email.to || '',
         subject: email.subject || '(No subject)',
         body: email.body || '',
         date: email.date || new Date().toISOString(),
         read: email.read || false,
         starred: email.starred || false,
-        folder: email.folder // Keep exact IMAP folder name
+        folder: email.folder || 'INBOX', // Use the folder from API response
+        cc: email.cc,
+        bcc: email.bcc,
+        flags: email.flags || []
       }));
 
       // Update unread count for INBOX
@@ -939,18 +947,29 @@ export default function MailPage() {
     console.log('Total emails:', emails.length);
     console.log('Filter criteria:', {
       starred: emails.filter(e => e.starred).length,
-      sent: emails.filter(e => e.category?.includes('sent')).length,
-      deleted: emails.filter(e => e.deleted).length
+      sent: emails.filter(e => e.folder === 'Sent').length,
+      trash: emails.filter(e => e.folder === 'Trash').length,
+      spam: emails.filter(e => e.folder === 'Spam').length,
+      drafts: emails.filter(e => e.folder === 'Drafts').length,
+      archives: emails.filter(e => e.folder === 'Archives' || e.folder === 'Archive').length
     });
   }, [currentView, emails]);
 
+  // Filter emails based on current view
+  const filteredEmails = useMemo(() => {
+    if (currentView === 'starred') {
+      return emails.filter(email => email.starred);
+    }
+    return emails.filter(email => email.folder === currentView);
+  }, [emails, currentView]);
+
   // 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, read: true, starred: false, folder: 'Trash' }
           : email
       )
     );
@@ -971,7 +990,7 @@ export default function MailPage() {
       setEmails(prevEmails => 
         prevEmails.map(email => 
           email.id === emailId 
-            ? { ...email, deleted: false, category: 'inbox' }
+            ? { ...email, read: false, starred: true, folder: 'starred' }
             : email
         )
       );
@@ -987,7 +1006,7 @@ export default function MailPage() {
         <div>Current view: {currentView}</div>
         <div>Total emails: {emails.length}</div>
         <div>Categories present: {
-          [...new Set(emails.map(e => e.category))].join(', ')
+          [...new Set(emails.map(e => e.folder))].join(', ')
         }</div>
         <div>Flags present: {
           [...new Set(emails.flatMap(e => e.flags || []))].join(', ')
@@ -1040,11 +1059,12 @@ export default function MailPage() {
             <h2 className="text-lg font-semibold text-gray-800">
               {currentView === 'INBOX' ? 'Inbox' :
                currentView === 'starred' ? 'Starred' :
+               currentView === 'Archives' || currentView === 'Archive' ? 'Archives' :
                currentView.charAt(0).toUpperCase() + currentView.slice(1)}
             </h2>
           </div>
           <div className="text-sm text-gray-500">
-            {emails.length} emails
+            {filteredEmails.length} emails
           </div>
         </div>
       </div>
@@ -1055,7 +1075,7 @@ export default function MailPage() {
           <div className="flex items-center justify-center h-64">
             <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
           </div>
-        ) : emails.length === 0 ? (
+        ) : filteredEmails.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-64">
             <Mail className="h-8 w-8 text-gray-400 mb-2" />
             <p className="text-gray-500 text-sm">
@@ -1065,7 +1085,7 @@ export default function MailPage() {
               {currentView === 'Trash' && 'No emails in trash'}
               {currentView === 'Drafts' && 'No drafts'}
               {currentView === 'Spam' && 'No spam emails'}
-              {currentView === 'Archives' && 'No archived emails'}
+              {(currentView === 'Archives' || currentView === 'Archive') && 'No archived emails'}
             </p>
             {/* Debug info */}
             <div className="text-xs text-gray-400 mt-2">
@@ -1076,7 +1096,7 @@ export default function MailPage() {
           </div>
         ) : (
           <div className="divide-y divide-gray-100">
-            {emails.map((email) => (
+            {filteredEmails.map((email) => (
               <div
                 key={email.id}
                 className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${