mail page connected with folders

app/mail/page.tsx

@@ -531,16 +531,6 @@ export default function MailPage() {
     console.log('Current view:', currentView);
   }, [emails, currentView]);
 
-  // Update the filteredEmails logic
-  const filteredEmails = useMemo(() => {
-    if (currentView === 'starred') {
-      return emails.filter(email => email.starred);
-    }
-
-    // For all other views, match exactly with the IMAP folder name
-    return emails.filter(email => email.folder === currentView);
-  }, [emails, currentView]);
-
   // Move getSelectedEmail inside the component
   const getSelectedEmail = () => {
     return emails.find(email => email.id === selectedEmail?.id);
@@ -922,11 +912,11 @@ export default function MailPage() {
   };
 
   const toggleSelectAll = () => {
-    if (selectedEmails.length === filteredEmails.length) {
+    if (selectedEmails.length === emails.length) {
       setSelectedEmails([]);
       setShowBulkActions(false);
     } else {
-      const allEmailIds = filteredEmails.map(email => email.id.toString());
+      const allEmailIds = emails.map(email => email.id.toString());
       setSelectedEmails(allEmailIds);
       setShowBulkActions(true);
     }
@@ -947,13 +937,12 @@ export default function MailPage() {
   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,
+      starred: emails.filter(e => e.starred).length,
-      sent: filteredEmails.filter(e => e.category?.includes('sent')).length,
+      sent: emails.filter(e => e.category?.includes('sent')).length,
-      deleted: filteredEmails.filter(e => e.deleted).length
+      deleted: emails.filter(e => e.deleted).length
     });
-  }, [currentView, emails, filteredEmails]);
+  }, [currentView, emails]);
 
   // Add a function to move to trash
   const moveToTrash = async (emailId: number) => {
@@ -997,7 +986,6 @@ export default function MailPage() {
       <div className="fixed bottom-4 right-4 bg-black/80 text-white p-4 rounded-lg text-xs">
         <div>Current view: {currentView}</div>
         <div>Total emails: {emails.length}</div>
-        <div>Filtered emails: {filteredEmails.length}</div>
         <div>Categories present: {
           [...new Set(emails.map(e => e.category))].join(', ')
         }</div>
@@ -1042,17 +1030,6 @@ export default function MailPage() {
     </nav>
   );
 
-  // Add debug logging for the email list
-  useEffect(() => {
-    console.log('Current view:', currentView);
-    console.log('Filtered emails:', filteredEmails.map(email => ({
-      id: email.id,
-      subject: email.subject,
-      folder: email.folder,
-      from: email.from
-    })));
-  }, [currentView, filteredEmails]);
-
   // Email list panel section
   const renderEmailList = () => (
     <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
@@ -1067,7 +1044,7 @@ export default function MailPage() {
             </h2>
           </div>
           <div className="text-sm text-gray-500">
-            {filteredEmails.length} emails
+            {emails.length} emails
           </div>
         </div>
       </div>
@@ -1078,7 +1055,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>
-        ) : filteredEmails.length === 0 ? (
+        ) : emails.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">
@@ -1099,7 +1076,7 @@ export default function MailPage() {
           </div>
         ) : (
           <div className="divide-y divide-gray-100">
-            {filteredEmails.map((email) => (
+            {emails.map((email) => (
               <div
                 key={email.id}
                 className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${