From d084d323bc726c4969adea86571ca083b9a72637 Mon Sep 17 00:00:00 2001
From: Sachin Divekar <ssd532@gmail.com>
Date: Sun, 25 Jan 2026 03:34:46 +0530
Subject: [PATCH] feat: show user avatar on comments and activity (#331)

Display user profile pictures instead of initials on card comments
and activity items. Fetches the user image field from the database
and passes imageUrl to the Avatar component.

Co-authored-by: Sachin Divekar <sachin.divekar@remiges.tech>
---
 apps/web/src/views/card/components/ActivityList.tsx | 3 +++
 apps/web/src/views/card/components/Comment.tsx      | 4 ++++
 packages/db/src/repository/cardActivity.repo.ts     | 2 ++
 3 files changed, 9 insertions(+)

diff --git a/apps/web/src/views/card/components/ActivityList.tsx b/apps/web/src/views/card/components/ActivityList.tsx
index 7f943386..a1dd8a4f 100644
--- a/apps/web/src/views/card/components/ActivityList.tsx
+++ b/apps/web/src/views/card/components/ActivityList.tsx
@@ -25,6 +25,7 @@ import { authClient } from "@kan/auth/client";
 import Avatar from "~/components/Avatar";
 import { useLocalisation } from "~/hooks/useLocalisation";
 import { api } from "~/utils/api";
+import { getAvatarUrl } from "~/utils/helpers";
 import Comment from "./Comment";
 
 type ActivityType =
@@ -471,6 +472,7 @@ const ActivityList = ({
               cardPublicId={cardPublicId}
               name={activity.user?.name ?? ""}
               email={activity.user?.email ?? ""}
+              image={activity.user?.image ?? null}
               isLoading={isLoading}
               createdAt={activity.createdAt.toISOString()}
               comment={activity.comment?.comment}
@@ -493,6 +495,7 @@ const ActivityList = ({
                 size="sm"
                 name={activity.user?.name ?? ""}
                 email={activity.user?.email ?? ""}
+                imageUrl={getAvatarUrl(activity.user?.image ?? null) || undefined}
                 icon={getActivityIcon(
                   activity.type,
                   activity.fromList?.index,
diff --git a/apps/web/src/views/card/components/Comment.tsx b/apps/web/src/views/card/components/Comment.tsx
index 3d1151d9..8fcd4176 100644
--- a/apps/web/src/views/card/components/Comment.tsx
+++ b/apps/web/src/views/card/components/Comment.tsx
@@ -12,6 +12,7 @@ import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 import { invalidateCard } from "~/utils/cardInvalidation";
+import { getAvatarUrl } from "~/utils/helpers";
 
 interface FormValues {
   comment: string;
@@ -22,6 +23,7 @@ const Comment = ({
   cardPublicId,
   name,
   email,
+  image,
   isLoading,
   createdAt,
   comment,
@@ -34,6 +36,7 @@ const Comment = ({
   cardPublicId: string;
   name: string;
   email: string;
+  image: string | null;
   isLoading: boolean;
   createdAt: string;
   comment: string | undefined;
@@ -108,6 +111,7 @@ const Comment = ({
             size="sm"
             name={name ?? ""}
             email={email ?? ""}
+            imageUrl={getAvatarUrl(image) || undefined}
             isLoading={isLoading}
           />
 
diff --git a/packages/db/src/repository/cardActivity.repo.ts b/packages/db/src/repository/cardActivity.repo.ts
index 2e211508..0dbdbdb0 100644
--- a/packages/db/src/repository/cardActivity.repo.ts
+++ b/packages/db/src/repository/cardActivity.repo.ts
@@ -169,6 +169,7 @@ export const getPaginatedActivities = async (
               id: true,
               name: true,
               email: true,
+              image: true,
             },
           },
         },
@@ -178,6 +179,7 @@ export const getPaginatedActivities = async (
           id: true,
           name: true,
           email: true,
+          image: true,
         },
       },
       comment: {