feat: display profile picture

2025-01-22 13:35:44 +00:00
parent ef8f42a460
commit 0bd23d24ac
12 changed files with 130 additions and 74 deletions
--- a/apps/web/src/components/Avatar.tsx
+++ b/apps/web/src/components/Avatar.tsx
@@ -1,47 +1,71 @@
+import Image from "next/image";
 import { twMerge } from "tailwind-merge";

 import { getInitialsFromName, inferInitialsFromEmail } from "~/utils/helpers";

+const sizeMap = {
+  xs: 20,
+  sm: 24,
+  md: 36,
+  lg: 48,
+} as const;
+
 const Avatar = ({
  size = "md",
  name,
  email,
  icon,
+  imageUrl,
  isLoading,
 }: {
-  size?: "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
  name: string;
  email: string;
+  imageUrl?: string;
  icon?: React.ReactNode;
-  isLoading: boolean;
+  isLoading?: boolean;
 }) => {
  const initials = name
    ? getInitialsFromName(name)
    : inferInitialsFromEmail(email ?? "");

  return (
-    <span
-      className={twMerge(
-        "inline-flex h-9 w-9 items-center justify-center rounded-full bg-light-1000 dark:bg-dark-400",
-        isLoading && "animate-pulse bg-light-200 dark:bg-dark-200",
-        size === "sm" && "h-6 w-6",
-        size === "lg" && "h-12 w-12",
-      )}
-    >
-      {icon ? (
-        <span className="text-[12px] text-white">{icon}</span>
+    <>
+      {imageUrl ? (
+        <Image
+          src={imageUrl}
+          className="rounded-full bg-gray-50"
+          width={sizeMap[size]}
+          height={sizeMap[size]}
+          alt=""
+        />
      ) : (
        <span
          className={twMerge(
-            "text-sm font-medium leading-none text-white",
-            size === "sm" && "text-[10px]",
-            size === "lg" && "text-md",
+            "inline-flex h-9 w-9 items-center justify-center rounded-full bg-light-1000 dark:bg-dark-400",
+            isLoading && "animate-pulse bg-light-200 dark:bg-dark-200",
+            size === "xs" && "h-5 w-5",
+            size === "sm" && "h-6 w-6",
+            size === "lg" && "h-12 w-12",
          )}
        >
-          {initials}
+          {icon ? (
+            <span className="text-[12px] text-white">{icon}</span>
+          ) : (
+            <span
+              className={twMerge(
+                "text-sm font-medium leading-none text-white",
+                size === "xs" && "text-[8px]",
+                size === "sm" && "text-[10px]",
+                size === "lg" && "text-md",
+              )}
+            >
+              {initials}
+            </span>
+          )}
        </span>
      )}
-    </span>
+    </>
  );
 };

--- a/apps/web/src/components/SideNavigation.tsx
+++ b/apps/web/src/components/SideNavigation.tsx
@@ -1,4 +1,4 @@
-import { usePathname } from "next/navigation";
+import { useRouter } from "next/router";

 import boardsIconDark from "~/assets/boards-dark.json";
 import boardsIconLight from "~/assets/boards-light.json";
@@ -25,7 +25,10 @@ export default function SideNavigation({
  user,
  isLoading,
 }: SideNavigationProps) {
-  const pathname = usePathname();
+  const router = useRouter();
+
+  const { pathname } = router;
+
  const { activeTheme } = useTheme();

  const isDarkMode = activeTheme === "dark";
--- a/apps/web/src/components/UserMenu.tsx
+++ b/apps/web/src/components/UserMenu.tsx
@@ -5,6 +5,7 @@ import { Fragment } from "react";

 import { useTheme } from "~/providers/theme";
 import createClient from "~/utils/supabase/client";
+import { getPublicUrl } from "~/utils/supabase/getPublicUrl";

 interface UserMenuProps {
  imageUrl: string | undefined;
@@ -31,9 +32,7 @@ export default function UserMenu({
    router.push("/login");
  };

-  const avatarUrl = imageUrl
-    ? db.storage.from("avatars").getPublicUrl(imageUrl).data.publicUrl
-    : null;
+  const avatarUrl = imageUrl ? getPublicUrl(imageUrl) : null;

  return (
    <Menu as="div" className="relative inline-block w-full text-left">
@@ -48,9 +47,9 @@ export default function UserMenu({
            {avatarUrl ? (
              <Image
                src={avatarUrl}
-                className="h-8 w-8 rounded-full bg-gray-50"
-                width={30}
-                height={30}
+                className="rounded-full bg-gray-50"
+                width={24}
+                height={24}
                alt=""
              />
            ) : (
--- a/apps/web/src/components/modal.tsx
+++ b/apps/web/src/components/modal.tsx
@@ -6,13 +6,13 @@ import { useModal } from "~/providers/modal";
 interface Props {
  children: React.ReactNode;
  modalSize?: "sm" | "md" | "lg";
-  positionFromTop?: string;
+  positionFromTop?: "sm" | "md" | "lg";
 }

 const Modal: React.FC<Props> = ({
  children,
  modalSize = "sm",
-  positionFromTop = "25vh",
+  positionFromTop = "md",
 }) => {
  const { isOpen, closeModal } = useModal();

@@ -22,6 +22,12 @@ const Modal: React.FC<Props> = ({
    lg: "max-w-[800px]",
  };

+  const positionFromTopMap = {
+    sm: "mt-[12vh]",
+    md: "mt-[25vh]",
+    lg: "mt-[50vh]",
+  };
+
  return (
    <Transition.Root show={isOpen} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={closeModal}>
@@ -49,7 +55,7 @@ const Modal: React.FC<Props> = ({
              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
              <Dialog.Panel
-                className={`relative mt-[${positionFromTop}] w-full transform rounded-lg border border-light-600 bg-white/90 text-left shadow-3xl-light backdrop-blur-[6px] transition-all dark:border-dark-600 dark:bg-dark-100/90 dark:shadow-3xl-dark ${modalSizeMap[modalSize]}`}
+                className={`relative ${positionFromTopMap[positionFromTop]} w-full transform rounded-lg border border-light-600 bg-white/90 text-left shadow-3xl-light backdrop-blur-[6px] transition-all dark:border-dark-600 dark:bg-dark-100/90 dark:shadow-3xl-dark ${modalSizeMap[modalSize]}`}
              >
                {children}
              </Dialog.Panel>
--- a/apps/web/src/utils/supabase/getPublicUrl.ts
+++ b/apps/web/src/utils/supabase/getPublicUrl.ts
@@ -0,0 +1,7 @@
+import createClient from "~/utils/supabase/client";
+
+export const getPublicUrl = (fileName: string) => {
+  const supabase = createClient();
+
+  return supabase.storage.from("avatars").getPublicUrl(fileName).data.publicUrl;
+};
--- a/apps/web/src/views/board/components/Filters.tsx
+++ b/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 =
--- a/apps/web/src/views/board/index.tsx
+++ b/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}
--- a/apps/web/src/views/members/index.tsx
+++ b/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}
--- a/apps/web/src/views/public/board/index.tsx
+++ b/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}
--- a/apps/web/src/views/settings/components/Avatar.tsx
+++ b/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 {
--- a/packages/db/src/repository/board.repo.ts
+++ b/packages/db/src/repository/board.repo.ts
@@ -37,7 +37,9 @@ export const getByPublicId = async (
          members:workspace_members (
            publicId,
            user!workspace_members_userId_user_id_fk (
-              name
+              name,
+              email,
+              image
            )
          )
        ),
@@ -65,7 +67,9 @@ export const getByPublicId = async (
            members:workspace_members${filters.members.length > 0 ? "!inner" : ""} (
              publicId,
              user!workspace_members_userId_user_id_fk (
-                name
+                name,
+                email,
+                image
              )
            )
          )
--- a/packages/db/src/repository/workspace.repo.ts
+++ b/packages/db/src/repository/workspace.repo.ts
@@ -95,7 +95,8 @@ export const getByPublicIdWithMembers = async (
          user!workspace_members_userId_user_id_fk (
            id,
            name,
-            email
+            email,
+            image
          )
        )
      `,