Neah version mail design fix 5 bis b

app/mail/page.tsx

@@ -737,25 +737,30 @@ export default function MailPage() {
     }
   };
 
-  // Update the email list header
+  // 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 items-center justify-between">
+      <div className="flex flex-col gap-2">
         <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="mt-0.5"
+              className="ml-1"
             />
+          </div>
           <h2 className="text-xl 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>
-        <div className="flex items-center gap-2">
+
         {selectedEmails.length > 0 && (
-            <>
+          <div className="flex items-center gap-2 px-1">
             <Button
               variant="ghost"
               size="sm"
@@ -767,7 +772,7 @@ export default function MailPage() {
                 handleBulkAction(someUnread ? 'mark-read' : 'mark-unread');
               }}
             >
-                <EyeOff className="h-4 w-4 mr-1" />
+              <EyeOff className="h-4 w-4 mr-2" />
               {emails.some(email => selectedEmails.includes(email.id.toString()) && !email.read)
                 ? 'Mark as Read'
                 : 'Mark as Unread'
@@ -779,7 +784,7 @@ export default function MailPage() {
               className="text-gray-600 hover:text-gray-900"
               onClick={() => handleBulkAction('archive')}
             >
-                <Archive className="h-4 w-4 mr-1" />
+              <Archive className="h-4 w-4 mr-2" />
               Archive
             </Button>
             <Button
@@ -788,20 +793,34 @@ export default function MailPage() {
               className="text-red-600 hover:text-red-700"
               onClick={() => handleBulkAction('delete')}
             >
-                <Trash2 className="h-4 w-4 mr-1" />
+              <Trash2 className="h-4 w-4 mr-2" />
               Delete
             </Button>
-            </>
-          )}
-          <span className="text-sm text-gray-500 ml-2">
-            {emails.length} emails
-          </span>
           </div>
+        )}
       </div>
     </div>
   );
 
-  // Update the email list item checkbox
+  // Update sidebar items when available folders change
+  useEffect(() => {
+    if (availableFolders.length > 0) {
+      const newItems = [
+        ...initialSidebarItems,
+        ...availableFolders
+          .filter(folder => !['INBOX'].includes(folder)) // Exclude folders already in initial items
+          .map(folder => ({
+            view: folder as MailFolder,
+            label: folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase(),
+            icon: getFolderIcon(folder),
+            folder: folder
+          }))
+      ];
+      setSidebarItems(newItems);
+    }
+  }, [availableFolders]);
+
+  // Update the email list item to match header checkbox alignment
   const renderEmailListItem = (email: Email) => (
     <div
       key={email.id}
@@ -810,6 +829,7 @@ export default function MailPage() {
       } ${!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) => {
@@ -817,8 +837,9 @@ export default function MailPage() {
             handleEmailCheckbox(e, email.id);
           }}
           onClick={(e) => e.stopPropagation()}
-        className="mt-1"
+          className="ml-1"
         />
+      </div>
       <div className="flex-1 min-w-0">
         <div className="flex items-center justify-between gap-2 mb-1">
           <div className="flex items-center gap-2 min-w-0">