From 6ce1a9c483150905e924d5755208cd309b169840 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Thu, 17 Apr 2025 14:45:39 +0200
Subject: [PATCH] solve mail backend 15

---
 app/api/mail/route.ts         | 11 ++-----
 components/mail/mail-list.tsx | 55 +++++++++++++++++------------------
 2 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/app/api/mail/route.ts b/app/api/mail/route.ts
index 277981ef..ed816f44 100644
--- a/app/api/mail/route.ts
+++ b/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,
-        bodyStructure: true,
-        bodyParts: ['TEXT']
+        flags: true
       });
       
       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,
-          body: body
+          folder: mailbox.path
         });
       }
 
diff --git a/components/mail/mail-list.tsx b/components/mail/mail-list.tsx
index 21eca8b6..7b63a854 100644
--- a/components/mail/mail-list.tsx
+++ b/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 ${
-            mail.read ? 'bg-white' : 'bg-blue-50'
-          } hover:bg-gray-50`}
+          className={`p-4 border-b cursor-pointer hover:bg-muted ${
+            !mail.read ? "bg-muted/50" : ""
+          }`}
           onClick={() => onMailClick(mail)}
         >
-          <div className="flex items-start justify-between">
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center space-x-2">
-                <div className="font-medium text-gray-900 truncate">
-                  {mail.from}
-                </div>
-                {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>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              {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>
-            <div className="ml-4 text-sm text-gray-500">
-              {format(new Date(mail.date), 'MMM d, yyyy')}
-            </div>
+            <span className="text-sm text-muted-foreground">
+              {format(new Date(mail.date), "MMM d, yyyy")}
+            </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>