Neah version mail design fix 4

app/mail/page.tsx

@@ -1055,14 +1055,75 @@ export default function MailPage() {
       {/* Email list header */}
       <div className="p-4 border-b border-gray-100">
         <div className="flex items-center justify-between">
-          <h2 className="text-xl font-semibold text-gray-900">
+          <div className="flex items-center gap-3">
-            {currentView === 'INBOX' ? 'Inbox' :
+            <Checkbox
-             currentView === 'starred' ? 'Starred' :
+              checked={selectedEmails.length > 0 && selectedEmails.length === emails.length}
-             currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()}
+              onCheckedChange={toggleSelectAll}
-          </h2>
+              className="mt-0.5"
-          <span className="text-sm text-gray-500">
+            />
-            {emails.length} emails
+            <h2 className="text-xl font-semibold text-gray-900">
-          </span>
+              {currentView === 'INBOX' ? 'Inbox' :
+               currentView === 'starred' ? 'Starred' :
+               currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()}
+            </h2>
+          </div>
+          <div className="flex items-center gap-2">
+            {selectedEmails.length > 0 && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-gray-600 hover:text-gray-900"
+                  onClick={() => {
+                    // Mark as read/unread
+                    const isUnread = emails.some(email => 
+                      selectedEmails.includes(email.id.toString()) && !email.read
+                    );
+                    setEmails(emails.map(email => 
+                      selectedEmails.includes(email.id.toString())
+                        ? { ...email, read: !isUnread }
+                        : email
+                    ));
+                  }}
+                >
+                  <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={() => {
+                    // Move to folder (Archive)
+                    setEmails(emails.map(email => 
+                      selectedEmails.includes(email.id.toString())
+                        ? { ...email, folder: 'Archive' }
+                        : email
+                    ));
+                    setSelectedEmails([]);
+                  }}
+                >
+                  <Archive className="h-4 w-4 mr-1" />
+                  Move to
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-red-600 hover:text-red-700"
+                  onClick={handleBulkDelete}
+                >
+                  <Trash2 className="h-4 w-4 mr-1" />
+                  Delete
+                </Button>
+              </>
+            )}
+            <span className="text-sm text-gray-500 ml-2">
+              {emails.length} emails
+            </span>
+          </div>
         </div>
       </div>