solve mail backend 15

app/api/mail/route.ts

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