From 2f8d83b5b70c2b348a9edda67e4336a80c762c79 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 16 Apr 2025 19:03:14 +0200
Subject: [PATCH] Neah version mail design fix 7

---
 app/mail/page.tsx | 49 ++++++++++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 5d5c5ca..d87a306 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -737,64 +737,65 @@ export default function MailPage() {
     }
   };
 
-  // Update the email list header with better aligned checkbox and bulk actions
+  // Update the email list header with inline bulk actions
   const renderEmailListHeader = () => (
     <div className="border-b border-gray-100">
-      {/* Main header row */}
       <div className="flex items-center px-4 h-14">
+        {/* Left side with checkbox and title */}
         <div className="flex items-center gap-3">
           <Checkbox
             checked={emails.length > 0 && selectedEmails.length === emails.length}
             onCheckedChange={toggleSelectAll}
             className="mt-0.5"
           />
-          <h2 className="text-base font-semibold text-gray-900">
-            {currentView === 'INBOX' ? 'Inbox' :
-             currentView === 'starred' ? 'Starred' :
-             currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()}
-          </h2>
+          <h2 className="text-base font-semibold text-gray-900">Inbox</h2>
+          <span className="text-sm text-gray-600">
+            {emails.length} emails
+          </span>
         </div>
-        <span className="text-sm text-gray-600 ml-3">
-          {emails.length} emails
-        </span>
-        
-        {/* Bulk actions aligned to the right */}
-        {selectedEmails.length > 0 && (
-          <div className="flex items-center gap-1 ml-auto">
+
+        {/* Bulk actions right after the title */}
+        {selectedEmails.length > 0 ? (
+          <div className="flex items-center gap-2 ml-6">
             <Button
               variant="ghost"
               size="sm"
-              className="text-gray-600 hover:text-gray-900 px-2 py-1 h-8"
+              className="text-gray-600 hover:text-gray-900 h-8 px-2 py-1"
               onClick={() => {
-                const someUnread = emails.some(email => 
-                  selectedEmails.includes(email.id.toString()) && !email.read
+                // Check if all selected emails are read
+                const allSelectedRead = selectedEmails.every(id => 
+                  emails.find(email => email.id.toString() === id)?.read
                 );
-                handleBulkAction(someUnread ? 'mark-read' : 'mark-unread');
+                handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
               }}
             >
               <EyeOff className="h-4 w-4" />
-              <span className="ml-2 text-sm">Mark as Read</span>
+              <span className="ml-1.5 text-sm">
+                Mark as {selectedEmails.every(id => 
+                  emails.find(email => email.id.toString() === id)?.read
+                ) ? 'unread' : 'read'}
+              </span>
             </Button>
             <Button
               variant="ghost"
               size="sm"
-              className="text-gray-600 hover:text-gray-900 px-2 py-1 h-8"
+              className="text-gray-600 hover:text-gray-900 h-8 px-2 py-1"
               onClick={() => handleBulkAction('archive')}
             >
               <Archive className="h-4 w-4" />
-              <span className="ml-2 text-sm">Archive</span>
+              <span className="ml-1.5 text-sm">Archive</span>
             </Button>
             <Button
               variant="ghost"
               size="sm"
-              className="text-red-600 hover:text-red-700 px-2 py-1 h-8"
+              className="text-red-600 hover:text-red-700 h-8 px-2 py-1"
               onClick={() => handleBulkAction('delete')}
             >
               <Trash2 className="h-4 w-4" />
-              <span className="ml-2 text-sm">Delete</span>
+              <span className="ml-1.5 text-sm">Delete</span>
             </Button>
           </div>
-        )}
+        ) : null}
       </div>
     </div>
   );