mail page ui correction maj compose 11

app/mail/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -31,6 +31,7 @@ interface Account {
   name: string;
   email: string;
   color: string;
+  folders?: string[];
 }
 
 interface Email {
@@ -426,8 +427,7 @@ export default function MailPage() {
   const router = useRouter();
   const [loading, setLoading] = useState(true);
   const [accounts, setAccounts] = useState<Account[]>([
-    { id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' },
+    { id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' }
-    { id: 2, name: 'Work', email: 'work@governance-labs.org', color: 'bg-green-500' }
   ]);
   const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
   const [currentView, setCurrentView] = useState('inbox');
@@ -459,6 +459,7 @@ export default function MailPage() {
   const [showCc, setShowCc] = useState(false);
   const [contentLoading, setContentLoading] = useState(false);
   const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [folders, setFolders] = useState<string[]>([]);
 
   // Move getSelectedEmail inside the component
   const getSelectedEmail = () => {
@@ -495,18 +496,27 @@ export default function MailPage() {
   }, [router]);
 
   // Fetch emails from IMAP API
-  const loadEmails = async () => {
+  const loadEmails = async (view?: string, accountId?: number, folder?: string) => {
     try {
-      console.log('Starting to load emails...');
+      console.log('Loading emails...', { view, accountId, folder });
       setLoading(true);
       setError(null);
       
-      const response = await fetch('/api/mail');
+      let url = '/api/mail';
-      console.log('API response status:', response.status);
+      const params = new URLSearchParams();
+      
+      if (view) params.append('view', view);
+      if (accountId) params.append('accountId', accountId.toString());
+      if (folder) params.append('folder', folder);
+      
+      if (params.toString()) {
+        url += `?${params.toString()}`;
+      }
+      
+      const response = await fetch(url);
       
       if (!response.ok) {
         const errorData = await response.json();
-        console.error('API error:', errorData);
         if (errorData.error === 'No stored credentials found') {
           router.push('/mail/login');
           return;
@@ -515,11 +525,17 @@ export default function MailPage() {
       }
       
       const data = await response.json();
-      console.log('Received data:', data);
       
-      if (!data.emails || !Array.isArray(data.emails)) {
+      // Update accounts and folders if provided in the response
-        console.error('Invalid response format:', data);
+      if (data.accounts) {
-        throw new Error('Invalid response format: emails array not found');
+        setAccounts([
+          { id: 0, name: 'All', email: '', color: 'bg-gray-500' },
+          ...data.accounts
+        ]);
+      }
+      
+      if (data.folders) {
+        setFolders(data.folders);
       }
       
       // Process the emails array from data.emails
@@ -528,12 +544,10 @@ export default function MailPage() {
         date: new Date(email.date),
         read: email.read || false,
         starred: email.starred || false,
-        category: email.category || 'inbox',
+        category: email.category || 'inbox'
-        body: decodeMimeContent(email.body)
       }));
       
       setEmails(processedEmails);
-      console.log('Emails loaded successfully:', processedEmails.length);
     } catch (err) {
       console.error('Error loading emails:', err);
       setError(err instanceof Error ? err.message : 'Failed to load emails');
@@ -542,6 +556,36 @@ export default function MailPage() {
     }
   };
 
+  // Update useEffect to load emails when view changes
+  useEffect(() => {
+    loadEmails(currentView, selectedAccount?.id);
+  }, [currentView, selectedAccount]);
+
+  // Filter emails based on current view and selected account
+  const filteredEmails = useMemo(() => {
+    return emails.filter(email => {
+      // First filter by account if one is selected
+      if (selectedAccount && selectedAccount.id !== 0) {
+        if (email.accountId !== selectedAccount.id) return false;
+      }
+      
+      // Then filter by current view
+      switch (currentView) {
+        case 'inbox':
+          return !email.deleted && email.category === 'inbox';
+        case 'starred':
+          return !email.deleted && email.starred;
+        case 'sent':
+          return !email.deleted && email.category === 'sent';
+        case 'trash':
+          return email.deleted;
+        default:
+          // Handle folder views
+          return !email.deleted && email.category === currentView;
+      }
+    });
+  }, [emails, currentView, selectedAccount]);
+
   // Mock folders data
   const folders = [
     { id: 1, name: 'Important' },
@@ -885,7 +929,7 @@ export default function MailPage() {
     <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
       {/* Sidebar */}
       <div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
-                      ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
+                    ${foldersOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
         {/* Courrier Title */}
         <div className="p-3 border-b border-gray-100">
           <div className="flex items-center gap-2">
@@ -919,100 +963,61 @@ export default function MailPage() {
         </div>
 
           {/* Accounts Section */}
-          <div className="flex flex-col min-h-0 flex-1">
           <div className="p-3 border-b border-gray-100">
             <Button 
               variant="ghost"
               className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
-                onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
+              onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
             >
               <span>Accounts</span>
-                {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+              {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
             </Button>
             
-              {foldersDropdownOpen && (
+            {accountsDropdownOpen && (
               <div className="space-y-1 pl-2">
                 {accounts.map(account => (
-                    <div key={account.id} className="relative group">
                     <Button
+                    key={account.id}
                       variant="ghost"
-                        className="w-full justify-between px-2 py-1.5 text-sm group"
+                    className="w-full justify-start px-2 py-1.5 text-sm"
                       onClick={() => setSelectedAccount(account)}
                     >
-                        <div className="flex flex-col items-start">
+                    <div className="flex items-center gap-2 w-full">
-                          <div className="flex items-center gap-2">
                           <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
                           <span className="font-medium">{account.name}</span>
-                          </div>
+                      {account.id !== 0 && (
-                          <span className="text-xs text-gray-500 ml-4">{account.email}</span>
+                        <span className="text-xs text-gray-500 truncate">{account.email}</span>
-                        </div>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setShowAccountActions(account.id);
-                          }}
-                        >
-                          <MoreVertical className="h-4 w-4" />
-                        </Button>
-                      </Button>
-
-                      {/* Account Actions Dropdown */}
-                      {showAccountActions === account.id && (
-                        <div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
-                          <Button
-                            variant="ghost"
-                            className="w-full justify-start px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
-                            onClick={() => handleAccountAction(account.id, 'edit')}
-                          >
-                            <Edit className="h-4 w-4 mr-2" />
-                            Edit account
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
-                            onClick={() => handleAccountAction(account.id, 'delete')}
-                          >
-                            <Trash2 className="h-4 w-4 mr-2" />
-                            Remove account
-                          </Button>
-                        </div>
                     )}
                   </div>
-                  ))}
-
-                  {/* Add Account Button */}
-                  <Button
-                    variant="ghost"
-                    className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
-                    onClick={() => {/* Handle add account */}}
-                  >
-                    <Plus className="h-4 w-4 mr-2" />
-                    Add Account
                 </Button>
+                ))}
               </div>
             )}
           </div>
 
           {/* Navigation */}
-            <nav className="p-3">
+          <nav className="flex-1 overflow-y-auto p-3">
-              <ul className="space-y-0.5 px-2">
+            <ul className="space-y-1">
+              {/* Standard folders */}
                 <li>
                   <Button 
                     variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
-                    className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className="w-full justify-start"
                     onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
                   >
                     <Inbox className="h-4 w-4 mr-2" />
                   <span>Inbox</span>
+                  {emails.filter(e => !e.read && e.category === 'inbox').length > 0 && (
+                    <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
+                      {emails.filter(e => !e.read && e.category === 'inbox').length}
+                    </span>
+                  )}
                   </Button>
                 </li>
                 <li>
                   <Button 
                     variant={currentView === 'starred' ? 'secondary' : 'ghost'}
-                    className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className="w-full justify-start"
                     onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
                   >
                     <Star className="h-4 w-4 mr-2" />
@@ -1022,7 +1027,7 @@ export default function MailPage() {
                 <li>
                   <Button 
                     variant={currentView === 'sent' ? 'secondary' : 'ghost'}
-                    className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className="w-full justify-start"
                     onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
                   >
                     <Send className="h-4 w-4 mr-2" />
@@ -1032,17 +1037,46 @@ export default function MailPage() {
                 <li>
                   <Button 
                     variant={currentView === 'trash' ? 'secondary' : 'ghost'}
-                    className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                  className="w-full justify-start"
                     onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
                   >
                     <Trash className="h-4 w-4 mr-2" />
                   <span>Trash</span>
                   </Button>
                 </li>
+
+              {/* Account-specific folders */}
+              {selectedAccount && selectedAccount.id !== 0 && (
+                <>
+                <li className="mt-4">
+                  <Button 
+                    variant="ghost"
+                      className="w-full justify-between"
+                      onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
+                  >
+                    <div className="flex items-center">
+                      <Folder className="h-4 w-4 mr-2" />
+                        <span>Folders</span>
+                    </div>
+                      {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                  </Button>
+                  </li>
+                  {foldersDropdownOpen && folders.map((folder, index) => (
+                    <li key={index}>
+                          <Button
+                        variant={currentView === folder ? 'secondary' : 'ghost'}
+                        className="w-full justify-start pl-8"
+                        onClick={() => {setCurrentView(folder); setSelectedEmail(null);}}
+                      >
+                        <span>{folder}</span>
+                          </Button>
+                        </li>
+                      ))}
+                </>
+                  )}
               </ul>
             </nav>
       </div>
-        </div>
 
         {/* Main content area */}
       <div className="flex-1 flex overflow-hidden">