From ae793551ba9625ce23984daddbb2bd42dad5318a Mon Sep 17 00:00:00 2001
From: Davi Maciel <davi@ippax.com>
Date: Thu, 9 Apr 2026 10:12:47 -0300
Subject: [PATCH] fix(email-list): show recipient in Sent and Drafts folders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When viewing the Sent or Drafts mailbox, the list items always
displayed the sender (email.from[0]) — which is always the logged-in
user — instead of the recipient. This makes it impossible to
identify messages by who they were sent to.

This change detects the current mailbox role from the store and
swaps the displayed person to email.to[0] when the role is 'sent'
or 'drafts'. For multi-email threads, participant names are
computed from the collected recipients of the thread's emails.

Affected components:
- EmailListItem (flat list, threading disabled)
- SingleEmailItem (single-email thread)
- ThreadListItem (multi-email thread header + avatar)

This matches the behaviour of Gmail, Outlook, Apple Mail, and
every other mainstream mail client.
---
 components/email/email-list-item.tsx  |  7 +++++--
 components/email/thread-list-item.tsx | 26 +++++++++++++++++++-------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/components/email/email-list-item.tsx b/components/email/email-list-item.tsx
index 4019787f..5bb16350 100644
--- a/components/email/email-list-item.tsx
+++ b/components/email/email-list-item.tsx
@@ -32,7 +32,7 @@ interface EmailListItemProps {
 
 export function EmailListItem({ email, selected, onClick, onContextMenu, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam }: EmailListItemProps) {
   const t = useTranslations('email_viewer');
-  const { selectedEmailIds, toggleEmailSelection, selectRangeEmails, selectedMailbox, clearSelection } = useEmailStore();
+  const { selectedEmailIds, toggleEmailSelection, selectRangeEmails, selectedMailbox, mailboxes, clearSelection } = useEmailStore();
   const showPreview = useSettingsStore((state) => state.showPreview);
   const density = useSettingsStore((state) => state.density);
   const mailLayout = useSettingsStore((state) => state.mailLayout);
@@ -44,7 +44,10 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
   const isImportant = email.keywords?.["$important"];
   const isAnswered = email.keywords?.$answered;
   const isForwarded = email.keywords?.$forwarded;
-  const sender = email.from?.[0];
+  // In Sent/Drafts folders, show recipient instead of sender (which is always "me")
+  const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role;
+  const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
+  const sender = showRecipient ? (email.to?.[0] ?? email.from?.[0]) : email.from?.[0];
   const isFocusedMailLayout = mailLayout === 'focus';
   const inlinePreview = showPreview && email.preview ? ` ${email.preview}` : '';
 
diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx
index 3cb62b9f..f0153957 100644
--- a/components/email/thread-list-item.tsx
+++ b/components/email/thread-list-item.tsx
@@ -55,8 +55,11 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
     const isStarred = email.keywords?.$flagged;
     const isAnswered = email.keywords?.$answered;
     const isForwarded = email.keywords?.$forwarded;
-    const sender = email.from?.[0];
-    const { selectedMailbox, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection } = useEmailStore();
+    const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection } = useEmailStore();
+    // In Sent/Drafts folders, show recipient instead of sender (which is always "me")
+    const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role;
+    const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
+    const sender = showRecipient ? (email.to?.[0] ?? email.from?.[0]) : email.from?.[0];
     const emailKeywords = useSettingsStore((state) => state.emailKeywords);
     const density = useSettingsStore((state) => state.density);
     const mailLayout = useSettingsStore((state) => state.mailLayout);
@@ -339,7 +342,16 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
     const isFocusedMailLayout = mailLayout === 'focus';
     const inlinePreview = showPreview && latestEmail.preview ? ` ${latestEmail.preview}` : '';
 
-    const { selectedMailbox, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection } = useEmailStore();
+    const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection } = useEmailStore();
+    // In Sent/Drafts folders, show recipient instead of sender (which is always "me")
+    const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role;
+    const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
+    const displayNames = showRecipient
+      ? Array.from(new Set(
+          thread.emails.flatMap(e => (e.to ?? []).map(r => r.name || r.email.split('@')[0]))
+        )).slice(0, 4)
+      : participantNames;
+    const avatarPerson = showRecipient ? latestEmail.to?.[0] : latestEmail.from?.[0];
 
     const { dragHandlers, isDragging: isThreadDragging } = useEmailDrag({
       email: latestEmail,
@@ -522,8 +534,8 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
 
             {!isFocusedMailLayout && density !== 'extra-compact' && (
               <Avatar
-                name={latestEmail.from?.[0]?.name}
-                email={latestEmail.from?.[0]?.email}
+                name={avatarPerson?.name}
+                email={avatarPerson?.email}
                 size="md"
                 className="flex-shrink-0 shadow-sm"
               />
@@ -537,7 +549,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                       'w-32 shrink-0 truncate text-sm lg:w-44',
                       hasUnread ? 'font-semibold text-foreground' : 'font-medium text-foreground/80'
                     )}>
-                      {participantNames.join(', ')}
+                      {displayNames.join(', ')}
                     </span>
                     <span
                       className={cn(
@@ -591,7 +603,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                           ? "font-bold text-foreground"
                           : "font-medium text-muted-foreground"
                       )}>
-                        {participantNames.join(", ")}
+                        {displayNames.join(", ")}
                       </span>
                       <span
                         className={cn(