panel 2 courier api restore

app/courrier/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState, useMemo, useCallback, useRef } from 'react';
+import React from 'react';
 import { useRouter } from 'next/navigation';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -569,6 +570,13 @@ export default function CourrierPage() {
         // Set available folders if present
         if (data.folders) {
           setAvailableFolders(data.folders);
+          
+          // Update the mail account with folders
+          setAccounts(prev => prev.map(account => 
+            account.id === 1 
+              ? { ...account, folders: data.folders } 
+              : account
+          ));
         }
         
         // Process emails and sort by date
@@ -1176,7 +1184,7 @@ export default function CourrierPage() {
         id: Number(email.id),
         accountId: 1,
         from: email.from || '',
-        fromName: email.from?.split('@')[0] || '',
+        fromName: email.fromName || email.from?.split('@')[0] || '',
         to: email.to || '',
         subject: email.subject || '(No subject)',
         body: email.body || '',
@@ -1193,6 +1201,18 @@ export default function CourrierPage() {
       setEmails(processedEmails);
       setHasMore(processedEmails.length === emailsPerPage);
 
+      // If folders are returned, update them
+      if (data.folders && data.folders.length > 0) {
+        setAvailableFolders(data.folders);
+        
+        // Update the mail account with folders
+        setAccounts(prev => prev.map(account => 
+          account.id === 1 
+            ? { ...account, folders: data.folders } 
+            : account
+        ));
+      }
+
       // Only update unread count if we're in the Inbox folder
       if (newMailbox === 'INBOX') {
         const unreadInboxEmails = processedEmails.filter(
@@ -1610,6 +1630,40 @@ export default function CourrierPage() {
                             <span className="text-xs text-gray-500 ml-4">{account.email}</span>
                           </div>
                         </Button>
+                        
+                        {/* Show folders for email accounts (not for "All" account) */}
+                        {account.id !== 0 && account.folders && account.folders.length > 0 && (
+                          <div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-100">
+                            <div className="px-2 py-1 text-xs text-gray-400 font-medium">
+                              Folders
+                            </div>
+                            {account.folders.map((folder) => (
+                              <Button
+                                key={folder}
+                                variant="ghost"
+                                className={`w-full justify-start py-1 px-2 text-xs ${
+                                  currentView === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+                                }`}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleMailboxChange(folder);
+                                }}
+                              >
+                                <div className="flex items-center justify-between w-full gap-1.5">
+                                  <div className="flex items-center gap-1.5">
+                                    {React.createElement(getFolderIcon(folder), { className: "h-3.5 w-3.5" })}
+                                    <span className="truncate">{folder}</span>
+                                  </div>
+                                  {folder === 'INBOX' && unreadCount > 0 && (
+                                    <span className="ml-auto bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded-full text-[10px]">
+                                      {unreadCount}
+                                    </span>
+                                  )}
+                                </div>
+                              </Button>
+                            ))}
+                          </div>
+                        )}
                       </div>
                     ))}
                   </div>