[Fix: 488] - Mark thread as read to update email status to read

apps/mail/app/api/driver/google.ts

@@ -35,6 +35,12 @@ const findHtmlBody = (parts: any[]): string => {
   return "";
 };
 
+const auth = new google.auth.OAuth2(
+  process.env.GOOGLE_CLIENT_ID as string,
+  process.env.GOOGLE_CLIENT_SECRET as string,
+  process.env.GOOGLE_REDIRECT_URI as string,
+)
+
 interface ParsedDraft {
   id: string;
   to?: string[];
@@ -78,12 +84,59 @@ const parseDraft = (draft: gmail_v1.Schema$Draft): ParsedDraft | null => {
   };
 };
 
+interface ProcessMultipleThreadsProps {
+  threadIds: string[],
+  addLabelIds: string[],
+  removeLabelIds: string[]
+}
+
+async function processMultipleThreads(props: ProcessMultipleThreadsProps){
+
+  const { threadIds, addLabelIds = [], removeLabelIds = [] } = props
+  const gmail = google.gmail({version: 'v1', auth})
+
+  if(threadIds.length === 0){
+    throw new Error("No thread IDs provided!")
+  }
+
+  if(addLabelIds.length === 0 && removeLabelIds.length === 0){
+    return
+  }
+
+  try {
+  const threadPromises = threadIds.map(async (threadId) => {
+    const threadResponse = await gmail.users.threads.get({
+      userId: "me",
+      id: threadId
+    })
+
+    return threadResponse.data.messages?.map(message => message.id).filter((id): id is string => id != null && id != undefined) || []
+  })
+
+  const messageArrays = await Promise.all(threadPromises)
+  const allMessagesIds = messageArrays.flat()
+
+  if(allMessagesIds.length > 0){
+    await gmail.users.messages.batchModify({
+      userId: "me",
+      requestBody: {
+        ids: allMessagesIds,
+        removeLabelIds: removeLabelIds,
+        addLabelIds: addLabelIds
+      }
+    })
+
+
+
+  }
+} catch(error){
+  console.error("Error while processing multiple threads:", error)
+  throw error
+}
+
+}
+
 export const driver = async (config: IConfig): Promise<MailManager> => {
-  const auth = new google.auth.OAuth2(
-    process.env.GOOGLE_CLIENT_ID as string,
-    process.env.GOOGLE_CLIENT_SECRET as string,
-    process.env.GOOGLE_REDIRECT_URI as string,
-  );
 
   const getScope = () =>
     [
@@ -177,22 +230,30 @@ export const driver = async (config: IConfig): Promise<MailManager> => {
       }
     },
     markAsRead: async (id: string[]) => {
-      await gmail.users.messages.batchModify({
-        userId: "me",
-        requestBody: {
-          ids: id,
-          removeLabelIds: ["UNREAD"],
-        },
-      });
-    },
+			try {
+        const args = {
+          threadIds: id,
+          addLabelIds: [],
+          removeLabelIds: ["UNREAD"]
+        }
+        await processMultipleThreads(args)
+			} catch (error) {
+				console.error('Error marking messages as read:', error);
+        throw error
+			}
+		},
     markAsUnread: async (id: string[]) => {
-      await gmail.users.messages.batchModify({
-        userId: "me",
-        requestBody: {
-          ids: id,
+      try {
+        const args = {
+          threadIds: id,
           addLabelIds: ["UNREAD"],
-        },
-      });
+          removeLabelIds: []
+        }
+        await processMultipleThreads(args)
+			} catch (error) {
+				console.error('Error marking messages as read:', error);
+        throw error
+			}
     },
     getScope,
     getUserInfo: (tokens: { access_token: string; refresh_token: string }) => {

apps/mail/components/mail/mail-list.tsx

@@ -440,14 +440,16 @@ export const MailList = memo(({ isCompact }: MailListProps) => {
           ref={scrollRef}
           style={{ height: '100%' }}
           totalCount={items.length}
-          itemContent={(_: number, data: InitialThread) => <Thread
-            onClick={handleMailClick}
-            selectMode={getSelectMode()}
-            isCompact={isCompact}
-            sessionData={sessionData}
-            message={data}
-            key={data.id}
-          />}
+          itemContent={(_: number, data: InitialThread) => (
+            <Thread
+              onClick={handleMailClick}
+              selectMode={getSelectMode()}
+              isCompact={isCompact}
+              sessionData={sessionData}
+              message={data}
+              key={data.id}
+            />
+          )}
           endReached={handleScroll}
           data={items}
           className="hide-scrollbar"

apps/mail/components/mail/mail.tsx

@@ -501,39 +501,39 @@ function BulkSelectActions() {
 
 const categories = [
   {
-    id:'Primary',
+    id: 'Primary',
     name: 'common.mailCategories.primary',
     searchValue: '',
     icon: <Inbox className="h-4 w-4" />,
     colors:
       'border-0 bg-gray-200 text-gray-700 dark:bg-gray-800/50 dark:text-gray-400 dark:hover:bg-gray-800/70',
   },
   {
-    id:'Important',
+    id: 'Important',
     name: 'common.mailCategories.important',
     searchValue: 'is:important',
     icon: <AlertTriangle className="h-4 w-4" />,
     colors:
       'border-0 text-amber-800 bg-amber-100 dark:bg-amber-900/20 dark:text-amber-500 dark:hover:bg-amber-900/30',
   },
   {
-    id:'Personal',
+    id: 'Personal',
     name: 'common.mailCategories.personal',
     searchValue: 'is:personal',
     icon: <User className="h-4 w-4" />,
     colors:
       'border-0 text-green-800 bg-green-100 dark:bg-green-900/20 dark:text-green-500 dark:hover:bg-green-900/30',
   },
   {
-    id:'Updates',
+    id: 'Updates',
     name: 'common.mailCategories.updates',
     searchValue: 'is:updates',
     icon: <Bell className="h-4 w-4" />,
     colors:
       'border-0 text-purple-800 bg-purple-100 dark:bg-purple-900/20 dark:text-purple-500 dark:hover:bg-purple-900/30',
   },
   {
-    id:'Promotions',
+    id: 'Promotions',
     name: 'common.mailCategories.promotions',
     searchValue: 'is:promotions',
     icon: <Tag className="h-4 w-4 rotate-90" />,