feat: display profile picture

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>
+    </>
   );
 };
 

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";

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=""
               />
             ) : (

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>