From ee22f64621af95f239908789d1efd83a878cc0e0 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 16 Apr 2025 18:59:29 +0200
Subject: [PATCH] Neah version mail design fix 6

---
 app/mail/page.tsx | 83 ++++++++++++++++++++---------------------------
 1 file changed, 36 insertions(+), 47 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index b549163..5d5c5ca 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -739,32 +739,32 @@ export default function MailPage() {
 
   // Update the email list header with better aligned checkbox and bulk actions
   const renderEmailListHeader = () => (
-    <div className="p-4 border-b border-gray-100">
-      <div className="flex flex-col gap-2">
+    <div className="border-b border-gray-100">
+      {/* Main header row */}
+      <div className="flex items-center px-4 h-14">
         <div className="flex items-center gap-3">
-          <div className="flex items-center h-[42px]"> {/* Match height with email list items */}
-            <Checkbox
-              checked={emails.length > 0 && selectedEmails.length === emails.length}
-              onCheckedChange={toggleSelectAll}
-              className="ml-1"
-            />
-          </div>
-          <h2 className="text-xl font-semibold text-gray-900">
+          <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>
-          <span className="text-sm text-gray-500 ml-auto">
-            {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-2 px-1">
+          <div className="flex items-center gap-1 ml-auto">
             <Button
               variant="ghost"
               size="sm"
-              className="text-gray-600 hover:text-gray-900"
+              className="text-gray-600 hover:text-gray-900 px-2 py-1 h-8"
               onClick={() => {
                 const someUnread = emails.some(email => 
                   selectedEmails.includes(email.id.toString()) && !email.read
@@ -772,29 +772,26 @@ export default function MailPage() {
                 handleBulkAction(someUnread ? 'mark-read' : 'mark-unread');
               }}
             >
-              <EyeOff className="h-4 w-4 mr-2" />
-              {emails.some(email => selectedEmails.includes(email.id.toString()) && !email.read)
-                ? 'Mark as Read'
-                : 'Mark as Unread'
-              }
+              <EyeOff className="h-4 w-4" />
+              <span className="ml-2 text-sm">Mark as Read</span>
             </Button>
             <Button
               variant="ghost"
               size="sm"
-              className="text-gray-600 hover:text-gray-900"
+              className="text-gray-600 hover:text-gray-900 px-2 py-1 h-8"
               onClick={() => handleBulkAction('archive')}
             >
-              <Archive className="h-4 w-4 mr-2" />
-              Archive
+              <Archive className="h-4 w-4" />
+              <span className="ml-2 text-sm">Archive</span>
             </Button>
             <Button
               variant="ghost"
               size="sm"
-              className="text-red-600 hover:text-red-700"
+              className="text-red-600 hover:text-red-700 px-2 py-1 h-8"
               onClick={() => handleBulkAction('delete')}
             >
-              <Trash2 className="h-4 w-4 mr-2" />
-              Delete
+              <Trash2 className="h-4 w-4" />
+              <span className="ml-2 text-sm">Delete</span>
             </Button>
           </div>
         )}
@@ -824,36 +821,28 @@ export default function MailPage() {
   const renderEmailListItem = (email: Email) => (
     <div
       key={email.id}
-      className={`flex items-start gap-3 p-2 hover:bg-gray-50/80 cursor-pointer ${
+      className={`flex items-center gap-3 px-4 py-2 hover:bg-gray-50/80 cursor-pointer ${
         selectedEmail?.id === email.id ? 'bg-blue-50/50' : ''
       } ${!email.read ? 'bg-blue-50/20' : ''}`}
       onClick={() => handleEmailSelect(email.id)}
     >
-      <div className="flex items-center h-[42px]"> {/* Match height with header */}
-        <Checkbox
-          checked={selectedEmails.includes(email.id.toString())}
-          onCheckedChange={(checked) => {
-            const e = { target: { checked }, stopPropagation: () => {} } as React.ChangeEvent<HTMLInputElement>;
-            handleEmailCheckbox(e, email.id);
-          }}
-          onClick={(e) => e.stopPropagation()}
-          className="ml-1"
-        />
-      </div>
+      <Checkbox
+        checked={selectedEmails.includes(email.id.toString())}
+        onCheckedChange={(checked) => {
+          const e = { target: { checked }, stopPropagation: () => {} } as React.ChangeEvent<HTMLInputElement>;
+          handleEmailCheckbox(e, email.id);
+        }}
+        onClick={(e) => e.stopPropagation()}
+        className="mt-0.5"
+      />
       <div className="flex-1 min-w-0">
-        <div className="flex items-center justify-between gap-2 mb-1">
+        <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2 min-w-0">
             <span className={`text-sm truncate ${!email.read ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
               {currentView === 'Sent' ? email.to : (
                 (() => {
-                  // Check if email is in format "name <email>"
                   const fromMatch = email.from.match(/^([^<]+)\s*<([^>]+)>$/);
-                  if (fromMatch) {
-                    // If we have both name and email, return just the name
-                    return fromMatch[1].trim();
-                  }
-                  // If it's just an email address, return the full email
-                  return email.from;
+                  return fromMatch ? fromMatch[1].trim() : email.from;
                 })()
               )}
             </span>