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

@@ -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,

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}
           />
 

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: {