mail page ui correction maj compose 20 bis

app/mail/page.tsx

@@ -466,28 +466,22 @@ export default function MailPage() {
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [folders, setFolders] = useState<string[]>([]);
 
-  // Update the filteredEmails logic
+  // Update the filteredEmails logic to match how Inbox works
   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?.includes('sent');
-        case 'starred':
-          return !email.deleted && email.starred === true;
-        case 'sent':
-          return !email.deleted && email.category?.includes('sent');
-        case 'trash':
-          return email.deleted === true;
-        default:
-          return false;
-      }
-    });
+    if (!emails) return [];
+
+    switch (currentView) {
+      case 'inbox':
+        return emails; // This is working, so let's use similar logic for others
+      case 'starred':
+        return emails.filter(email => email.starred);
+      case 'sent':
+        return emails.filter(email => email.from === selectedAccount?.email);
+      case 'trash':
+        return emails.filter(email => email.deleted);
+      default:
+        return emails;
+    }
   }, [emails, currentView, selectedAccount]);
 
   // Move getSelectedEmail inside the component
@@ -1041,26 +1035,39 @@ export default function MailPage() {
             {/* Email list header */}
             <div className="p-4 border-b border-gray-100">
               <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-4">
                   {emails.length > 0 && (
                     <Checkbox
                       checked={selectedEmails.length === emails.length}
                       onCheckedChange={toggleSelectAll}
                     />
                   )}
-                  <span className="text-sm text-gray-500">
-                    {filteredEmails.length} emails
-                  </span>
+                  <h2 className="text-lg font-semibold text-gray-800 capitalize">
+                    {currentView}
+                  </h2>
+                </div>
+                <div className="text-sm text-gray-500">
+                  {filteredEmails.length} emails
                 </div>
               </div>
             </div>
 
-            {/* Email list with proper spacing and layout */}
+            {/* Email list */}
             <div className="flex-1 overflow-y-auto">
               {loading ? (
                 <div className="flex items-center justify-center h-64">
                   <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
                 </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">
+                    {currentView === 'inbox' && 'No emails in inbox'}
+                    {currentView === 'starred' && 'No starred emails'}
+                    {currentView === 'sent' && 'No sent emails'}
+                    {currentView === 'trash' && 'No emails in trash'}
+                  </p>
+                </div>
               ) : (
                 <div className="divide-y divide-gray-100">
                   {filteredEmails.map((email) => (
@@ -1071,7 +1078,6 @@ export default function MailPage() {
                       } ${!email.read ? 'bg-blue-50/20' : ''}`}
                       onClick={() => handleEmailSelect(email.id)}
                     >
-                      {/* Email header with checkbox and date */}
                       <div className="flex items-center justify-between mb-1">
                         <div className="flex items-center gap-3">
                           <Checkbox
@@ -1086,7 +1092,7 @@ export default function MailPage() {
                             }}
                           />
                           <span className="text-sm font-medium text-gray-900">
-                            {email.fromName || email.from}
+                            {currentView === 'sent' ? email.to : (email.fromName || email.from)}
                           </span>
                         </div>
                         <div className="flex items-center gap-2">
@@ -1103,8 +1109,6 @@ export default function MailPage() {
                           </Button>
                         </div>
                       </div>
-
-                      {/* Email subject and preview */}
                       <div className="ml-8">
                         <h3 className={`text-sm ${!email.read ? 'font-semibold' : ''} text-gray-900 mb-0.5`}>
                           {email.subject}