panel 2 courier api restore

app/courrier/page.tsx

@@ -456,7 +456,7 @@ export default function CourrierPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [composeOpen, setComposeOpen] = useState(false);
-  const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(false);
+  const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(true);
   const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
   const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
   const [showEmailActions, setShowEmailActions] = useState(false);
@@ -566,17 +566,27 @@ export default function CourrierPage() {
         
         const data = await emailResponse.json();
         console.log(`Loaded ${data.emails?.length || 0} emails`);
+        console.log('API response data:', { 
+          emailCount: data.emails?.length || 0,
+          folderCount: data.folders?.length || 0
+        });
         
         // Set available folders if present
         if (data.folders) {
+          console.log('Setting folders from initialization:', data.folders);
           setAvailableFolders(data.folders);
           
           // Update the mail account with folders
-          setAccounts(prev => prev.map(account => 
+          setAccounts(prev => {
+            console.log('Updating accounts with folders');
+            return prev.map(account => 
               account.id === 1 
                 ? { ...account, folders: data.folders } 
                 : account
-          ));
+            );
+          });
+        } else {
+          console.warn('No folders returned from API during initialization');
         }
         
         // Process emails and sort by date
@@ -861,22 +871,25 @@ export default function CourrierPage() {
             </div>
           ) : 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" />
+              <Mail className="h-12 w-12 text-gray-400 mb-3" />
-              <p className="text-gray-500 text-sm">
+              <p className="text-gray-700 text-base font-medium mb-1">
                 {searchQuery ? 'No emails match your search' : 'No emails in this folder'}
               </p>
               {error && (
                 <p className="text-red-500 text-sm mt-2">{error}</p>
               )}
-              <p className="text-gray-400 text-xs mt-4">Folder: {currentView}</p>
+              <p className="text-gray-500 text-sm mt-3"><strong>Folder:</strong> {currentView}</p>
-              <p className="text-gray-400 text-xs mt-1">Total emails: {emails.length}</p>
+              <p className="text-gray-500 text-sm mt-1"><strong>Total emails:</strong> {emails.length}</p>
               <Button 
-                variant="outline" 
+                variant="default" 
                 size="sm" 
-                className="mt-4"
+                className="mt-5 bg-blue-600 hover:bg-blue-700"
-                onClick={() => loadEmails()}
+                onClick={() => {
+                  setLoading(true);
+                  loadEmails();
+                }}
               >
-                <RefreshCw className="h-3.5 w-3.5 mr-1.5" /> Refresh
+                <RefreshCw className="h-4 w-4 mr-2" /> Refresh Folder
               </Button>
             </div>
           ) : (
@@ -1445,9 +1458,12 @@ export default function CourrierPage() {
     try {
       // Skip if already loading
       if (isLoadingInitial || isLoadingMore) {
+        console.log('Skipping loadEmails - already loading');
         return;
       }
       
+      console.log(`Loading emails for folder: ${currentView}, page: ${page}, isLoadMore: ${isLoadMore}`);
+      
       if (isLoadMore) {
         setIsLoadingMore(true);
       } else {
@@ -1462,14 +1478,31 @@ export default function CourrierPage() {
       );
       
       if (!response.ok) {
+        console.error('API response error:', response.status, response.statusText);
         throw new Error('Failed to load emails');
       }
       
       const data = await response.json();
+      console.log('API response:', {
+        emailCount: data.emails?.length || 0,
+        folderCount: data.folders?.length || 0,
+        hasMore: data.hasMore,
+        total: data.total
+      });
       
       // Set available folders
       if (data.folders) {
+        console.log('Setting available folders:', data.folders);
         setAvailableFolders(data.folders);
+        
+        // Update the mail account with folders
+        setAccounts(prev => prev.map(account => 
+          account.id === 1 
+            ? { ...account, folders: data.folders } 
+            : account
+        ));
+      } else {
+        console.warn('No folders returned from API');
       }
       
       // Process and sort emails
@@ -1643,12 +1676,25 @@ export default function CourrierPage() {
                         </Button>
                         
                         {/* Show folders for email accounts (not for "All" account) */}
-                        {account.id !== 0 && account.folders && account.folders.length > 0 && (
+                        {account.id !== 0 && (
-                          <div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-100">
+                          <div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-200">
-                            <div className="px-2 py-1 text-xs text-gray-400 font-medium">
+                            <div className="px-2 py-1 text-xs text-gray-500 font-medium flex justify-between items-center">
-                              Folders
+                              <span>Folders</span>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-5 w-5 text-gray-400 hover:text-gray-600"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setLoading(true);
+                                  loadEmails();
+                                }}
+                              >
+                                <RefreshCw className="h-3 w-3" />
+                              </Button>
                             </div>
-                            {account.folders.map((folder) => (
+                            {account.folders && account.folders.length > 0 ? (
+                              account.folders.map((folder) => (
                                 <Button
                                   key={folder}
                                   variant="ghost"
@@ -1672,7 +1718,15 @@ export default function CourrierPage() {
                                     )}
                                   </div>
                                 </Button>
-                            ))}
+                              ))
+                            ) : (
+                              <div className="px-2 py-2 text-xs text-gray-400">
+                                <div className="flex items-center gap-1.5">
+                                  <RefreshCw className="h-3 w-3" />
+                                  <span>Loading folders...</span>
+                                </div>
+                              </div>
+                            )}
                           </div>
                         )}
                       </div>