mail page ui correction maj 2

app/mail/page.tsx

@@ -401,7 +401,7 @@ export default function MailPage() {
   const [currentView, setCurrentView] = useState('inbox');
   const [showCompose, setShowCompose] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-  const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
+  const [selectedEmails, setSelectedEmails] = useState<number[]>([]);
   const [showBulkActions, setShowBulkActions] = useState(false);
   const [showBcc, setShowBcc] = useState(false);
   const [emails, setEmails] = useState<Email[]>([]);
@@ -538,21 +538,25 @@ export default function MailPage() {
   };
 
   // Add email action handlers
-  const handleEmailSelect = (emailId: string) => {
-    const email = emails.find(e => e.id === emailId);
-    if (email) {
-      setSelectedEmail(email);
-      // Mark as read if not already
-      if (!email.read) {
-        const updatedEmails = emails.map(e => 
-          e.id === emailId ? { ...e, read: true } : e
-        );
-        setEmails(updatedEmails);
+  const handleEmailSelect = (emailId: number) => {
+    setSelectedEmails(prev => {
+      if (prev.includes(emailId)) {
+        return prev.filter(id => id !== emailId);
       }
+      return [...prev, emailId];
+    });
+  };
+
+  const handleEmailCheckbox = (e: React.ChangeEvent<HTMLInputElement>, emailId: number) => {
+    e.stopPropagation();
+    if (e.target.checked) {
+      setSelectedEmails([...selectedEmails, emailId]);
+    } else {
+      setSelectedEmails(selectedEmails.filter(id => id !== emailId));
     }
   };
 
-  const toggleStarred = async (emailId: string, e: React.MouseEvent) => {
+  const toggleStarred = async (emailId: number, e: React.MouseEvent) => {
     e.stopPropagation();
     
     try {
@@ -631,6 +635,17 @@ export default function MailPage() {
     }
   };
 
+  const toggleSelectAll = () => {
+    if (selectedEmails.length === filteredEmails.length) {
+      setSelectedEmails([]);
+      setShowBulkActions(false);
+    } else {
+      const allEmailIds = filteredEmails.map(email => email.id);
+      setSelectedEmails(allEmailIds);
+      setShowBulkActions(true);
+    }
+  };
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">