panel 2 courier api restore

app/courrier/page.tsx

@@ -426,7 +426,7 @@ export default function CourrierPage() {
   const [loading, setLoading] = useState(true);
   const [accounts, setAccounts] = useState<Account[]>([
     { id: 0, name: 'All', email: '', color: 'bg-gray-400' },
-    { id: 1, name: '', email: '', color: 'bg-blue-500' }
+    { id: 1, name: 'Mail Account', email: '', color: 'bg-blue-500' }
   ]);
   const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
   const [currentView, setCurrentView] = useState<MailFolder>('INBOX');
@@ -1681,6 +1681,39 @@ export default function CourrierPage() {
     };
   }, [accounts, loading]);
 
+  // Add a function to fetch the IMAP credentials directly
+  const fetchMailCredentials = async () => {
+    try {
+      const response = await fetch('/api/courrier');
+      if (!response.ok) {
+        return;
+      }
+      
+      const data = await response.json();
+      
+      // If we have email credentials, update the account
+      if (data && data.email) {
+        console.log('Got IMAP email:', data.email);
+        setAccounts(prev => prev.map(account => 
+          account.id === 1 
+            ? { 
+                ...account, 
+                name: data.email,
+                email: data.email
+              } 
+            : account
+        ));
+      }
+    } catch (error) {
+      console.error('Error fetching mail credentials:', error);
+    }
+  };
+
+  // Call it once on component mount
+  useEffect(() => {
+    fetchMailCredentials();
+  }, []);
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@@ -1782,14 +1815,9 @@ export default function CourrierPage() {
                           className="w-full justify-between px-2 py-1.5 text-sm group"
                           onClick={() => setSelectedAccount(account)}
                         >
-                          <div className="flex flex-col items-start">
-                            <div className="flex items-center gap-2">
-                              <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
-                              <span className="font-medium text-gray-700">{account.name || 'Mail Account'}</span>
-                            </div>
-                            {account.id !== 0 && account.email && (
-                              <span className="text-xs text-gray-500 ml-4">{account.email}</span>
-                            )}
+                          <div className="flex items-center gap-2">
+                            <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
+                            <span className="font-medium text-gray-700">{account.name}</span>
                           </div>
                         </Button>