From 84713f463041916667de2f8f5a2814b0d0fd8a5e Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Fri, 25 Apr 2025 19:13:24 +0200
Subject: [PATCH] panel 2 courier api restore

---
 app/courrier/page.tsx | 128 ++++++++++++++++++++++++++++++------------
 1 file changed, 91 insertions(+), 37 deletions(-)

diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index a162fd3e..17aa6fc4 100644
--- a/app/courrier/page.tsx
+++ b/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 => 
-            account.id === 1 
-              ? { ...account, folders: data.folders } 
-              : 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" />
-              <p className="text-gray-500 text-sm">
+              <Mail className="h-12 w-12 text-gray-400 mb-3" />
+              <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-400 text-xs mt-1">Total emails: {emails.length}</p>
+              <p className="text-gray-500 text-sm mt-3"><strong>Folder:</strong> {currentView}</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"
-                onClick={() => loadEmails()}
+                className="mt-5 bg-blue-600 hover:bg-blue-700"
+                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,36 +1676,57 @@ export default function CourrierPage() {
                         </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) => (
+                        {account.id !== 0 && (
+                          <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-500 font-medium flex justify-between items-center">
+                              <span>Folders</span>
                               <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'
-                                }`}
+                                size="icon"
+                                className="h-5 w-5 text-gray-400 hover:text-gray-600"
                                 onClick={(e) => {
                                   e.stopPropagation();
-                                  handleMailboxChange(folder);
+                                  setLoading(true);
+                                  loadEmails();
                                 }}
                               >
-                                <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>
+                                <RefreshCw className="h-3 w-3" />
                               </Button>
-                            ))}
+                            </div>
+                            {account.folders && account.folders.length > 0 ? (
+                              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 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>