[PB-6521]: feat/select mails one-by-one

package.json

@@ -24,8 +24,8 @@
   "dependencies": {
     "@internxt/css-config": "^1.1.0",
     "@internxt/lib": "^1.4.1",
-    "@internxt/sdk": "^1.17.10",
-    "@internxt/ui": "^0.1.16",
+    "@internxt/sdk": "^1.17.11",
+    "@internxt/ui": "^0.1.25",
     "@phosphor-icons/react": "^2.1.10",
     "@reduxjs/toolkit": "^2.11.2",
     "@tailwindcss/vite": "^4.2.1",

src/features/mail/MailView.tsx

@@ -51,7 +51,7 @@ const MailView = ({ folder }: MailViewProps) => {
     toggleUnreadFilter,
   } = useListFolderPaginated(folder);
 
-  const { selectedEmails, selectAll, selectNone, selectRead, selectUnread, toggleSelectAll } =
+  const { selectedEmails, selectAll, selectEmail, selectNone, selectRead, selectUnread, toggleSelectAll } =
     useMailSelection(listFolderEmails);
   const { listActionContext, bulkActionContext } = useListActionContext(folder, selectedEmails, {
     selectAll,
@@ -134,6 +134,7 @@ const MailView = ({ folder }: MailViewProps) => {
             onLoadMore={onLoadMore}
             emptyState={<TrayEmptyState folderName={folderName} />}
             onMailSelected={onSelectEmail}
+            onMailChecked={selectEmail}
           />
         </div>
       </div>

src/features/mail/components/tray/search/components/list/index.tsx

@@ -42,7 +42,13 @@ const SearchEmailList = ({ mails, hasMoreItems, loading, onLoadMore, onMailSelec
           >
             {formattedMails.map((email) => (
               <div key={email.id} className="flex items-center w-full flex-col">
-                <MessageCheap email={email} onClick={onMailSelected} />
+                <MessageCheap
+                  email={{
+                    ...email,
+                    from: email.from[0],
+                  }}
+                  onClick={onMailSelected}
+                />
               </div>
             ))}
           </InfiniteScroll>

src/hooks/mail/useMailSelection.ts

@@ -10,6 +10,14 @@ export const useMailSelection = (emails: EmailListResponse['emails'] | undefined
 
   const selectNone = () => setSelectedEmails([]);
 
+  const selectEmail = (emailId: string) => {
+    setSelectedEmails((prev) => {
+      if (prev.includes(emailId)) return prev.filter((id) => id !== emailId);
+      if (!emails?.some((email) => email.id === emailId)) return prev;
+      return [...prev, emailId];
+    });
+  };
+
   const selectRead = () => {
     setSelectedEmails(emails?.filter((email) => email.isRead).map((email) => email.id) ?? []);
   };
@@ -31,6 +39,7 @@ export const useMailSelection = (emails: EmailListResponse['emails'] | undefined
   return {
     selectedEmails,
     selectAll,
+    selectEmail,
     selectNone,
     selectRead,
     selectUnread,

src/test-utils/fixtures.ts

@@ -169,13 +169,15 @@ export const getMockedMail = (overrides?: Partial<EmailResponse>): EmailResponse
   hasAttachment: faker.datatype.boolean(),
   size: faker.number.int({ min: 1024, max: 16384 }),
   attachments: faker.datatype.boolean() ? [getMockedAttachment()] : [],
+  isDraft: false,
   ...overrides,
 });
 
 export const getMockedMails = (count = 3): EmailListResponse => ({
   emails: Array.from({ length: count }, () => {
     const mail = getMockedMail();
     return {
+      isDraft: false,
       id: mail.id,
       mailboxIds: mail.mailboxIds,
       threadId: mail.threadId,

src/utils/format-emails/index.test.ts

@@ -28,11 +28,34 @@ describe('Formatting emails to list format', () => {
       expect(item.subject).toBe(emails[i].subject);
       expect(item.body).toBe(emails[i].preview);
       expect(item.read).toBe(emails[i].isRead);
-      expect(item.from.avatar).toBe('');
+      expect(item.from).toEqual(expect.arrayContaining([expect.objectContaining({ avatar: '' })]));
       expect(DateService.formatMailTimestamp).toHaveBeenCalledWith(emails[0].receivedAt);
     });
   });
 
+  test('When the row carries thread participants, then those are used instead of the message sender', () => {
+    const { emails } = getMockedMails(1);
+    emails[0].from = [{ email: 'alice@inxt.me', name: 'Alice' }];
+    (emails[0] as { participants?: { email: string; name?: string }[] }).participants = [
+      { email: 'alice@inxt.me', name: 'Alice' },
+      { email: 'bob@inxt.me', name: 'Bob' },
+    ];
+
+    const result = formatEmailsToList(emails);
+
+    expect(result?.[0].from.map((p) => p.name)).toEqual(['Alice', 'Bob']);
+  });
+
+  test('When the row has no participants, then the message sender is used as fallback', () => {
+    const { emails } = getMockedMails(1);
+    emails[0].from = [{ email: 'alice@inxt.me', name: 'Alice' }];
+    delete (emails[0] as { participants?: unknown }).participants;
+
+    const result = formatEmailsToList(emails);
+
+    expect(result?.[0].from.map((p) => p.name)).toEqual(['Alice']);
+  });
+
   test('When a row is encrypted, then it uses the decrypted preview when available and never the ciphertext', () => {
     const { emails } = getMockedMails(2);
     emails.forEach((e) => {

src/utils/format-emails/index.ts

@@ -1,18 +1,22 @@
 import { DateService } from '@/services/date';
 import type { EmailListResponse } from '@internxt/sdk/dist/mail/types';
 
+type EmailSummary = EmailListResponse['emails'][number];
+
+const toParticipant = (sender: EmailSummary['from'][number]) => ({
+  name: sender.name ?? sender.email.split('@')[0],
+  avatar: '',
+});
+
 export const formatEmailsToList = (
   listFolderEmails?: EmailListResponse['emails'],
   decryptedPreviews?: Record<string, string>,
 ) => {
   return listFolderEmails?.map((mail) => ({
     id: mail.id,
-    from: {
-      name: mail.from[0]?.name ?? mail.from[0]?.email ?? '',
-      avatar: '',
-    },
+    from: (mail.participants?.length ? mail.participants : mail.from).map(toParticipant),
     subject: mail.subject,
-    createdAt: DateService.formatMailTimestamp(mail.receivedAt),
+    createdAt: DateService.formatMailTimestamp(mail.lastReceivedAt ?? mail.receivedAt),
     body: decryptedPreviews?.[mail.id] ?? (mail.encryption ? '' : mail.preview),
     read: mail.isRead,
   }));