diff --git a/app/mail/page.tsx b/app/mail/page.tsx index 5bb3013..0e7a65b 100644 --- a/app/mail/page.tsx +++ b/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(null); - const [currentView, setCurrentView] = useState('INBOX'); // Use exact IMAP folder name + const [currentView, setCurrentView] = useState('INBOX'); const [showCompose, setShowCompose] = useState(false); const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); const [selectedEmails, setSelectedEmails] = useState([]); @@ -519,29 +520,24 @@ export default function MailPage() { const [folders, setFolders] = useState([]); 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); + + 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), - 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;