Neah version mail design fix 5 bis b

app/mail/page.tsx

@@ -737,71 +737,90 @@ 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">
-          <Checkbox
+          <div className="flex items-center h-[42px]"> {/* Match height with email list items */}
-            checked={emails.length > 0 && selectedEmails.length === emails.length}
+            <Checkbox
-            onCheckedChange={toggleSelectAll}
+              checked={emails.length > 0 && selectedEmails.length === emails.length}
-            className="mt-0.5"
+              onCheckedChange={toggleSelectAll}
-          />
+              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>
-        </div>
+          <span className="text-sm text-gray-500 ml-auto">
-        <div className="flex items-center gap-2">
-          {selectedEmails.length > 0 && (
-            <>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="text-gray-600 hover:text-gray-900"
-                onClick={() => {
-                  const someUnread = emails.some(email => 
-                    selectedEmails.includes(email.id.toString()) && !email.read
-                  );
-                  handleBulkAction(someUnread ? 'mark-read' : 'mark-unread');
-                }}
-              >
-                <EyeOff className="h-4 w-4 mr-1" />
-                {emails.some(email => selectedEmails.includes(email.id.toString()) && !email.read)
-                  ? 'Mark as Read'
-                  : 'Mark as Unread'
-                }
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="text-gray-600 hover:text-gray-900"
-                onClick={() => handleBulkAction('archive')}
-              >
-                <Archive className="h-4 w-4 mr-1" />
-                Archive
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="text-red-600 hover:text-red-700"
-                onClick={() => handleBulkAction('delete')}
-              >
-                <Trash2 className="h-4 w-4 mr-1" />
-                Delete
-              </Button>
-            </>
-          )}
-          <span className="text-sm text-gray-500 ml-2">
             {emails.length} emails
           </span>
         </div>
+
+        {selectedEmails.length > 0 && (
+          <div className="flex items-center gap-2 px-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-gray-600 hover:text-gray-900"
+              onClick={() => {
+                const someUnread = emails.some(email => 
+                  selectedEmails.includes(email.id.toString()) && !email.read
+                );
+                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'
+              }
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-gray-600 hover:text-gray-900"
+              onClick={() => handleBulkAction('archive')}
+            >
+              <Archive className="h-4 w-4 mr-2" />
+              Archive
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-red-600 hover:text-red-700"
+              onClick={() => handleBulkAction('delete')}
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete
+            </Button>
+          </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,15 +829,17 @@ export default function MailPage() {
       } ${!email.read ? 'bg-blue-50/20' : ''}`}
       onClick={() => handleEmailSelect(email.id)}
     >
-      <Checkbox
+      <div className="flex items-center h-[42px]"> {/* Match height with header */}
-        checked={selectedEmails.includes(email.id.toString())}
+        <Checkbox
-        onCheckedChange={(checked) => {
+          checked={selectedEmails.includes(email.id.toString())}
-          const e = { target: { checked }, stopPropagation: () => {} } as React.ChangeEvent<HTMLInputElement>;
+          onCheckedChange={(checked) => {
-          handleEmailCheckbox(e, email.id);
+            const e = { target: { checked }, stopPropagation: () => {} } as React.ChangeEvent<HTMLInputElement>;
-        }}
+            handleEmailCheckbox(e, email.id);
-        onClick={(e) => e.stopPropagation()}
+          }}
-        className="mt-1"
+          onClick={(e) => e.stopPropagation()}
-      />
+          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">