From f357b76712da783f92c26fbecbc154e852baead6 Mon Sep 17 00:00:00 2001
From: Saksham Chaudhary <91715470+Saksham1387@users.noreply.github.com>
Date: Mon, 7 Apr 2025 22:13:52 +0530
Subject: [PATCH 1/2] fixed #348

---
 .../components/email-list/EmailListItem.tsx   | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/apps/web/components/email-list/EmailListItem.tsx b/apps/web/components/email-list/EmailListItem.tsx
index a61d78982..98b7ac65f 100644
--- a/apps/web/components/email-list/EmailListItem.tsx
+++ b/apps/web/components/email-list/EmailListItem.tsx
@@ -21,6 +21,9 @@ import { Button } from "@/components/ui/button";
 import { findCtaLink } from "@/utils/parse/parseHtml.client";
 import { ErrorBoundary } from "@/components/ErrorBoundary";
 import { internalDateToDate } from "@/utils/date";
+import { Badge } from "@/components/ui/badge";
+import { isDefined } from "@/utils/types";
+import { useLabels } from "@/hooks/useLabels";
 
 export const EmailListItem = forwardRef(
   (
@@ -45,6 +48,7 @@ export const EmailListItem = forwardRef(
     ref: ForwardedRef<HTMLLIElement>,
   ) => {
     const { thread, splitView, onSelected } = props;
+    const { userLabels } = useLabels();
 
     const lastMessage = thread.messages?.[thread.messages.length - 1];
 
@@ -52,6 +56,17 @@ export const EmailListItem = forwardRef(
       return lastMessage?.labelIds?.includes("UNREAD");
     }, [lastMessage?.labelIds]);
 
+    const labelsToDisplay = useMemo(() => {
+      const labelIds = lastMessage?.labelIds;
+      return labelIds
+        ?.map((id) => {
+          const label = userLabels[Number(id)];
+          if (!label) return null;
+          return { id, name: label.name };
+        })
+        .filter(isDefined);
+    }, [lastMessage?.labelIds, userLabels]);
+
     const preventPropagation = useCallback(
       (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation(),
       [],
@@ -138,6 +153,19 @@ export const EmailListItem = forwardRef(
                     )}
                     <div className="ml-2 min-w-0 overflow-hidden text-foreground">
                       {lastMessage.headers.subject}
+                      {labelsToDisplay && labelsToDisplay.length > 0 && (
+                        <span className="ml-2 inline-flex flex-wrap items-center gap-1">
+                          {labelsToDisplay.map((label) => (
+                            <Badge
+                              variant="secondary"
+                              key={label.id}
+                              className="text-xs"
+                            >
+                              {label.name}
+                            </Badge>
+                          ))}
+                        </span>
+                      )}
                     </div>
                     <div className="ml-4 mr-6 flex flex-1 items-center overflow-hidden truncate font-normal leading-5 text-muted-foreground">
                       {decodedSnippet}
@@ -195,6 +223,19 @@ export const EmailListItem = forwardRef(
               <div className="mt-1.5 whitespace-nowrap text-sm leading-6">
                 <div className="min-w-0 overflow-hidden font-medium text-foreground">
                   {lastMessage.headers.subject}
+                  {labelsToDisplay && labelsToDisplay.length > 0 && (
+                    <span className="ml-2 inline-flex flex-wrap items-center gap-1">
+                      {labelsToDisplay.map((label) => (
+                        <Badge
+                          variant="secondary"
+                          key={label.id}
+                          className="text-xs"
+                        >
+                          {label.name}
+                        </Badge>
+                      ))}
+                    </span>
+                  )}
                 </div>
                 <div className="mr-6 mt-0.5 flex flex-1 items-center overflow-hidden truncate pl-1 font-normal leading-5 text-muted-foreground">
                   {decodedSnippet}

From 9c2d392c60bfdee0c826679218c8bf71785de64e Mon Sep 17 00:00:00 2001
From: Saksham Chaudhary <91715470+Saksham1387@users.noreply.github.com>
Date: Tue, 8 Apr 2025 19:32:42 +0530
Subject: [PATCH 2/2] converted to component LabelsDisplay

---
 .../components/email-list/EmailListItem.tsx   | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/apps/web/components/email-list/EmailListItem.tsx b/apps/web/components/email-list/EmailListItem.tsx
index 98b7ac65f..dd9399fd3 100644
--- a/apps/web/components/email-list/EmailListItem.tsx
+++ b/apps/web/components/email-list/EmailListItem.tsx
@@ -154,17 +154,7 @@ export const EmailListItem = forwardRef(
                     <div className="ml-2 min-w-0 overflow-hidden text-foreground">
                       {lastMessage.headers.subject}
                       {labelsToDisplay && labelsToDisplay.length > 0 && (
-                        <span className="ml-2 inline-flex flex-wrap items-center gap-1">
-                          {labelsToDisplay.map((label) => (
-                            <Badge
-                              variant="secondary"
-                              key={label.id}
-                              className="text-xs"
-                            >
-                              {label.name}
-                            </Badge>
-                          ))}
-                        </span>
+                        <LabelsDisplay labels={labelsToDisplay} />
                       )}
                     </div>
                     <div className="ml-4 mr-6 flex flex-1 items-center overflow-hidden truncate font-normal leading-5 text-muted-foreground">
@@ -224,17 +214,7 @@ export const EmailListItem = forwardRef(
                 <div className="min-w-0 overflow-hidden font-medium text-foreground">
                   {lastMessage.headers.subject}
                   {labelsToDisplay && labelsToDisplay.length > 0 && (
-                    <span className="ml-2 inline-flex flex-wrap items-center gap-1">
-                      {labelsToDisplay.map((label) => (
-                        <Badge
-                          variant="secondary"
-                          key={label.id}
-                          className="text-xs"
-                        >
-                          {label.name}
-                        </Badge>
-                      ))}
-                    </span>
+                    <LabelsDisplay labels={labelsToDisplay} />
                   )}
                 </div>
                 <div className="mr-6 mt-0.5 flex flex-1 items-center overflow-hidden truncate pl-1 font-normal leading-5 text-muted-foreground">
@@ -257,3 +237,25 @@ export const EmailListItem = forwardRef(
 );
 
 EmailListItem.displayName = "EmailListItem";
+
+type Label = {
+  id: string;
+  name: string;
+};
+
+type LabelBadgesProps = {
+  labels: Label[] | undefined;
+};
+
+function LabelsDisplay({ labels }: LabelBadgesProps) {
+  if (!labels || labels.length === 0) return null;
+  return (
+    <span className="ml-2 inline-flex flex-wrap items-center gap-1">
+      {labels.map((label) => (
+        <Badge variant="secondary" key={label.id} className="text-xs">
+          {label.name}
+        </Badge>
+      ))}
+    </span>
+  );
+}