feat: display profile picture

apps/web/src/views/board/components/Filters.tsx

@@ -6,9 +6,11 @@ import {
 } from "react-icons/hi2";
 import { IoFilterOutline } from "react-icons/io5";
 
+import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
 import { formatToArray } from "~/utils/helpers";
+import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
 
 interface BoardData {
   publicId: string;
@@ -20,6 +22,8 @@ interface BoardData {
       publicId: string;
       user: {
         name: string | null;
+        image: string | null;
+        email: string;
       } | null;
     }[];
   } | null;
@@ -65,17 +69,6 @@ const LabelIcon = ({ colourCode }: { colourCode: string | null }) => (
   </svg>
 );
 
-const Avatar = ({ name }: { name: string }) => (
-  <span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-400 ring-1 ring-light-200 dark:ring-dark-500">
-    <span className="text-[8px] font-medium leading-none text-white">
-      {name
-        .split(" ")
-        .map((namePart) => namePart.charAt(0).toUpperCase())
-        .join("")}
-    </span>
-  </span>
-);
-
 const Filters = ({
   position = "right",
   boardData,
@@ -104,7 +97,16 @@ const Filters = ({
       key: member.publicId,
       value: member.user?.name ?? "",
       selected: !!router.query.members?.includes(member.publicId),
-      leftIcon: <Avatar name={member.user?.name ?? ""} />,
+      leftIcon: (
+        <Avatar
+          size="xs"
+          name={member.user?.name ?? ""}
+          imageUrl={
+            member.user?.image ? getPublicUrl(member.user.image) : undefined
+          }
+          email={member.user?.email ?? ""}
+        />
+      ),
     })) ?? [];
 
   const formattedLabels =

apps/web/src/views/board/index.tsx

@@ -9,6 +9,7 @@ import { HiOutlinePlusSmall } from "react-icons/hi2";
 
 import type { UpdateBoardInput } from "@kan/api/types";
 
+import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
@@ -20,6 +21,8 @@ import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import { formatToArray } from "~/utils/helpers";
+import createClient from "~/utils/supabase/client";
+import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
 import BoardDropdown from "./components/BoardDropdown";
 import { DeleteBoardConfirmation } from "./components/DeleteBoardConfirmation";
 import { DeleteListConfirmation } from "./components/DeleteListConfirmation";
@@ -33,6 +36,7 @@ import VisibilityButton from "./components/VisibilityButton";
 type PublicListId = string;
 
 export default function BoardPage() {
+  const supabase = createClient();
   const params = useParams() as { boardId: string[] } | null;
   const router = useRouter();
   const { boardData, setBoardData, updateCard, updateList } = useBoard();
@@ -270,23 +274,26 @@ export default function BoardPage() {
                                             </span>
                                           ))}
                                           <div className="isolate flex -space-x-1 overflow-hidden">
-                                            {card.members.map((member) => (
-                                              <span
-                                                key={member.publicId}
-                                                className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-light-900 ring-2 ring-light-50 dark:bg-gray-500 dark:ring-dark-500"
-                                              >
-                                                <span className="text-[10px] font-medium leading-none text-white">
-                                                  {member.user?.name
-                                                    ?.split(" ")
-                                                    .map((namePart) =>
-                                                      namePart
-                                                        .charAt(0)
-                                                        .toUpperCase(),
-                                                    )
-                                                    .join("")}
-                                                </span>
-                                              </span>
-                                            ))}
+                                            {card.members.map((member) => {
+                                              const fileName =
+                                                member.user?.image;
+
+                                              const avatarUrl = fileName
+                                                ? getPublicUrl(fileName)
+                                                : undefined;
+
+                                              return (
+                                                <Avatar
+                                                  key={member.publicId}
+                                                  name={member.user?.name ?? ""}
+                                                  email={
+                                                    member.user?.email ?? ""
+                                                  }
+                                                  imageUrl={avatarUrl}
+                                                  size="sm"
+                                                />
+                                              );
+                                            })}
                                           </div>
                                         </div>
                                       ) : null}

apps/web/src/views/members/index.tsx

@@ -1,6 +1,7 @@
 import { HiEllipsisHorizontal, HiOutlinePlusSmall } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 
+import Avatar from "~/components/Avatar";
 import Dropdown from "~/components/Dropdown";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
@@ -9,6 +10,7 @@ import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import { getInitialsFromName, inferInitialsFromEmail } from "~/utils/helpers";
+import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
 import { DeleteMemberConfirmation } from "./components/DeleteMemberConfirmation";
 import { InviteMemberForm } from "./components/InviteMemberForm";
 
@@ -44,6 +46,7 @@ export default function MembersPage() {
     memberPublicId,
     memberName,
     memberEmail,
+    memberImage,
     memberRole,
     memberStatus,
     isLastRow,
@@ -52,6 +55,7 @@ export default function MembersPage() {
     memberPublicId?: string;
     memberName?: string | null | undefined;
     memberEmail?: string | null | undefined;
+    memberImage?: string | null | undefined;
     memberRole?: string;
     memberStatus?: string;
     isLastRow?: boolean;
@@ -66,16 +70,15 @@ export default function MembersPage() {
         <td className={twMerge("w-[65%]", isLastRow ? "rounded-bl-lg" : "")}>
           <div className="flex items-center p-4">
             <div className="flex-shrink-0">
-              <span
-                className={twMerge(
-                  "inline-flex h-9 w-9 items-center justify-center rounded-full bg-light-1000 dark:bg-dark-400",
-                  showSkeleton && "animate-pulse bg-light-200 dark:bg-dark-200",
-                )}
-              >
-                <span className="text-sm font-medium leading-none text-white">
-                  {initials}
-                </span>
-              </span>
+              {showSkeleton ? (
+                <div className="h-9 w-9 animate-pulse rounded-full bg-light-200 dark:bg-dark-200" />
+              ) : (
+                <Avatar
+                  name={memberName ?? ""}
+                  email={memberEmail ?? ""}
+                  imageUrl={memberImage ? getPublicUrl(memberImage) : undefined}
+                />
+              )}
             </div>
             <div className="ml-2 min-w-0 flex-1">
               <div>
@@ -207,6 +210,7 @@ export default function MembersPage() {
                           memberPublicId={member.publicId}
                           memberName={member.user?.name}
                           memberEmail={member.user?.email}
+                          memberImage={member.user?.image}
                           memberRole={member.role}
                           memberStatus={member.status}
                           isLastRow={index === data.members.length - 1}

apps/web/src/views/public/board/index.tsx

@@ -201,7 +201,7 @@ export default function PublicBoardView() {
         </div>
       </div>
       <Popup />
-      <Modal modalSize={"md"} positionFromTop={"12vh"}>
+      <Modal modalSize={"md"} positionFromTop={"sm"}>
         <CardModal
           cardPublicId={cardPublicId}
           workspaceSlug={data?.workspace?.slug}

apps/web/src/views/settings/components/Avatar.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 import createClient from "~/utils/supabase/client";
+import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
 
 export default function Avatar({
   userId,
@@ -35,9 +36,7 @@ export default function Avatar({
     },
   });
 
-  const avatarUrl = userImage
-    ? supabase.storage.from("avatars").getPublicUrl(userImage).data.publicUrl
-    : null;
+  const avatarUrl = userImage ? getPublicUrl(userImage) : undefined;
 
   const uploadAvatar = async (event: React.ChangeEvent<HTMLInputElement>) => {
     try {