mail page ui correction maj compose 12

app/mail/page.tsx

@@ -427,6 +427,7 @@ export default function MailPage() {
   const router = useRouter();
   const [loading, setLoading] = useState(true);
   const [accounts, setAccounts] = useState<Account[]>([
+    { id: 0, name: 'All', email: '', color: 'bg-gray-500' },
     { id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' }
   ]);
   const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
@@ -461,6 +462,34 @@ export default function MailPage() {
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [folders, setFolders] = useState<string[]>([]);
 
+  // Remove the mock folders array and use the state instead
+  const [folders, setFolders] = useState<string[]>([]);
+
+  // Remove the temporary filteredEmails and keep only the useMemo version
+  const filteredEmails = useMemo(() => {
+    return emails.filter(email => {
+      // First filter by account if one is selected
+      if (selectedAccount && selectedAccount.id !== 0) {
+        if (email.accountId !== selectedAccount.id) return false;
+      }
+      
+      // Then filter by current view
+      switch (currentView) {
+        case 'inbox':
+          return !email.deleted && email.category === 'inbox';
+        case 'starred':
+          return !email.deleted && email.starred;
+        case 'sent':
+          return !email.deleted && email.category === 'sent';
+        case 'trash':
+          return email.deleted;
+        default:
+          // Handle folder views
+          return !email.deleted && email.category === currentView;
+      }
+    });
+  }, [emails, currentView, selectedAccount]);
+
   // Move getSelectedEmail inside the component
   const getSelectedEmail = () => {
     return emails.find(email => email.id === selectedEmail?.id);
@@ -561,48 +590,6 @@ export default function MailPage() {
     loadEmails(currentView, selectedAccount?.id);
   }, [currentView, selectedAccount]);
 
-  // Filter emails based on current view and selected account
-  const filteredEmails = useMemo(() => {
-    return emails.filter(email => {
-      // First filter by account if one is selected
-      if (selectedAccount && selectedAccount.id !== 0) {
-        if (email.accountId !== selectedAccount.id) return false;
-      }
-      
-      // Then filter by current view
-      switch (currentView) {
-        case 'inbox':
-          return !email.deleted && email.category === 'inbox';
-        case 'starred':
-          return !email.deleted && email.starred;
-        case 'sent':
-          return !email.deleted && email.category === 'sent';
-        case 'trash':
-          return email.deleted;
-        default:
-          // Handle folder views
-          return !email.deleted && email.category === currentView;
-      }
-    });
-  }, [emails, currentView, selectedAccount]);
-
-  // Mock folders data
-  const folders = [
-    { id: 1, name: 'Important' },
-    { id: 2, name: 'Work' },
-    { id: 3, name: 'Personal' },
-    { id: 4, name: 'Archive' }
-  ];
-
-  // Modified accounts array with "All" option
-  const allAccounts = [
-    { id: 0, name: 'All', email: '', color: 'bg-gray-500' },
-    ...accounts
-  ];
-
-  // TEMP: Show all emails for debugging
-  const filteredEmails = emails;
-
   // Format date for display
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);