mail page connected with folders 7

app/mail/page.tsx

@@ -432,8 +432,29 @@ function cleanEmailContent(content: string): string {
 type MailFolder = string;
 type MailView = MailFolder | 'starred';
 
-// Map the exact IMAP folders to our sidebar items
+// Map IMAP folders to sidebar items with icons
-const sidebarNavItems = [
+const getFolderIcon = (folder: string) => {
+  switch (folder.toLowerCase()) {
+    case 'inbox':
+      return Inbox;
+    case 'sent':
+      return Send;
+    case 'drafts':
+      return Edit;
+    case 'trash':
+      return Trash;
+    case 'spam':
+      return AlertOctagon;
+    case 'archive':
+    case 'archives':
+      return Archive;
+    default:
+      return Folder;
+  }
+};
+
+// Initial sidebar items
+const initialSidebarItems = [
   {
     view: 'INBOX' as MailView,
     label: 'Inbox',
@@ -444,7 +465,7 @@ const sidebarNavItems = [
     view: 'starred' as MailView,
     label: 'Starred',
     icon: Star,
-    folder: null // Special case for starred items
+    folder: null
   }
 ];
 
@@ -488,6 +509,7 @@ export default function MailPage() {
   const [folders, setFolders] = useState<string[]>([]);
   const [unreadCount, setUnreadCount] = useState(0);
   const [availableFolders, setAvailableFolders] = useState<string[]>([]);
+  const [sidebarItems, setSidebarItems] = useState(initialSidebarItems);
 
   // Debug logging for email distribution
   useEffect(() => {
@@ -977,41 +999,32 @@ export default function MailPage() {
     );
   };
 
-  // Render the sidebar navigation
+  // Update sidebar items when available folders change
-  const renderSidebarNav = () => (
+  useEffect(() => {
-    <nav className="p-3">
+    if (availableFolders.length > 0) {
-      <ul className="space-y-0.5 px-2">
+      const newItems = [
-        {sidebarNavItems.map((item) => (
+        ...initialSidebarItems,
-          <li key={item.view}>
+        ...availableFolders
-            <Button 
+          .filter(folder => !['INBOX'].includes(folder)) // Exclude folders already in initial items
-              variant={currentView === item.view ? 'secondary' : 'ghost'}
+          .map(folder => ({
-              className={`w-full justify-start py-2 ${
+            view: folder as MailView,
-                currentView === item.view ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+            label: folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase(),
-              }`}
+            icon: getFolderIcon(folder),
-              onClick={() => {
+            folder: folder
-                setCurrentView(item.view);
+          }))
-                setSelectedEmail(null);
+      ];
-              }}
+      setSidebarItems(newItems);
-            >
+    }
-              <div className="flex items-center justify-between w-full">
+  }, [availableFolders]);
-                <div className="flex items-center">
-                  <item.icon className="h-4 w-4 mr-2" />
-                  <span>{item.label}</span>
-                </div>
-                {item.view === 'INBOX' && unreadCount > 0 && (
-                  <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
-                    {unreadCount}
-                  </span>
-                )}
-              </div>
-            </Button>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  );
 
-  // Email list panel section
+  // Sort emails by date (most recent first)
+  const sortedEmails = useMemo(() => {
+    return [...emails].sort((a, b) => {
+      return new Date(b.date).getTime() - new Date(a.date).getTime();
+    });
+  }, [emails]);
+
+  // Render the email list using sorted emails
   const renderEmailList = () => (
     <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
       {/* Email list header */}
@@ -1021,12 +1034,11 @@ 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
+            {sortedEmails.length} emails
           </div>
         </div>
       </div>
@@ -1037,7 +1049,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 ? (
+        ) : sortedEmails.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">
@@ -1049,16 +1061,10 @@ export default function MailPage() {
               {currentView === 'Spam' && 'No spam emails'}
               {(currentView === 'Archives' || currentView === 'Archive') && 'No archived emails'}
             </p>
-            {/* Debug info */}
-            <div className="text-xs text-gray-400 mt-2">
-              <p>Current view: {currentView}</p>
-              <p>Total emails: {emails.length}</p>
-              <p>Folders present: {[...new Set(emails.map(e => e.folder))].join(', ')}</p>
-            </div>
           </div>
         ) : (
           <div className="divide-y divide-gray-100">
-            {emails.map((email) => (
+            {sortedEmails.map((email) => (
               <div
                 key={email.id}
                 className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${