solve mail backend 14

app/api/mail/route.ts

@@ -51,11 +51,17 @@ export async function GET() {
       // Fetch only essential message data
       const messages = await client.fetch('1:20', { 
         envelope: true,
-        flags: true
+        flags: true,
+        bodyStructure: true,
+        bodyParts: ['TEXT']
       });
       
       const result = [];
       for await (const message of messages) {
+        // Get the message content
+        const content = await client.download(message.uid.toString(), 'TEXT');
+        const body = content?.content?.toString() || '';
+        
         result.push({
           id: message.uid.toString(),
           from: message.envelope.from[0].address,
@@ -63,7 +69,8 @@ export async function GET() {
           date: message.envelope.date.toISOString(),
           read: message.flags.has('\\Seen'),
           starred: message.flags.has('\\Flagged'),
-          folder: mailbox.path
+          folder: mailbox.path,
+          body: body
         });
       }
 

components/mail/mail-list.tsx

@@ -17,42 +17,43 @@ export function MailList({ mails, onMailClick }: MailListProps) {
   }
 
   return (
-    <div className="flex-1 overflow-auto">
+    <div className="flex flex-col space-y-2">
       {mails.map((mail) => (
         <div
           key={mail.id}
-          className={`p-4 border-b cursor-pointer hover:bg-muted ${
+          className={`p-4 rounded-lg cursor-pointer transition-colors ${
-            !mail.read ? "bg-muted/50" : ""
+            mail.read ? 'bg-white' : 'bg-blue-50'
-          }`}
+          } hover:bg-gray-50`}
           onClick={() => onMailClick(mail)}
         >
-          <div className="flex items-center justify-between">
+          <div className="flex items-start justify-between">
+            <div className="flex-1 min-w-0">
               <div className="flex items-center space-x-2">
-              {mail.starred ? (
+                <div className="font-medium text-gray-900 truncate">
+                  {mail.from}
+                </div>
+                {mail.starred && (
                   <Star className="h-4 w-4 text-yellow-400" />
-              ) : (
-                <StarOff className="h-4 w-4 text-muted-foreground" />
                 )}
-              <span className="font-medium">{mail.from}</span>
               </div>
-            <span className="text-sm text-muted-foreground">
+              <div className="mt-1 text-sm font-medium text-gray-900">
-              {format(new Date(mail.date), "MMM d, yyyy")}
+                {mail.subject}
-            </span>
               </div>
-          <div className="mt-2">
+              <div className="mt-1 text-sm text-gray-500 line-clamp-2">
-            <h3 className="font-medium">{mail.subject}</h3>
-            <p className="text-sm text-muted-foreground line-clamp-2">
                 {mail.body}
-            </p>
               </div>
               {mail.attachments && mail.attachments.length > 0 && (
-            <div className="mt-2 flex items-center text-sm text-muted-foreground">
+                <div className="mt-2 flex items-center text-sm text-gray-500">
-              <Paperclip className="h-3 w-3 mr-1" />
+                  <Paperclip className="h-4 w-4 mr-1" />
-              {mail.attachments.length} attachment
+                  {mail.attachments.length} attachment{mail.attachments.length !== 1 ? 's' : ''}
-              {mail.attachments.length > 1 ? "s" : ""}
                 </div>
               )}
             </div>
+            <div className="ml-4 text-sm text-gray-500">
+              {format(new Date(mail.date), 'MMM d, yyyy')}
+            </div>
+          </div>
+        </div>
       ))}
     </div>
   );