diff --git a/apps/web/src/components/Avatar.tsx b/apps/web/src/components/Avatar.tsx index c7ce28d4..f65daf20 100644 --- 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 ( - - {icon ? ( - {icon} + <> + {imageUrl ? ( + ) : ( - {initials} + {icon ? ( + {icon} + ) : ( + + {initials} + + )} )} - + ); }; diff --git a/apps/web/src/components/SideNavigation.tsx b/apps/web/src/components/SideNavigation.tsx index 410f3270..86ca9cf9 100644 --- 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"; diff --git a/apps/web/src/components/UserMenu.tsx b/apps/web/src/components/UserMenu.tsx index abdf48e2..b955b3a4 100644 --- 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 ( @@ -48,9 +47,9 @@ export default function UserMenu({ {avatarUrl ? ( ) : ( diff --git a/apps/web/src/components/modal.tsx b/apps/web/src/components/modal.tsx index 976267f0..5651adfc 100644 --- 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 = ({ children, modalSize = "sm", - positionFromTop = "25vh", + positionFromTop = "md", }) => { const { isOpen, closeModal } = useModal(); @@ -22,6 +22,12 @@ const Modal: React.FC = ({ lg: "max-w-[800px]", }; + const positionFromTopMap = { + sm: "mt-[12vh]", + md: "mt-[25vh]", + lg: "mt-[50vh]", + }; + return ( @@ -49,7 +55,7 @@ const Modal: React.FC = ({ leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > {children} diff --git a/apps/web/src/utils/supabase/getPublicUrl.ts b/apps/web/src/utils/supabase/getPublicUrl.ts new file mode 100644 index 00000000..c62aba4c --- /dev/null +++ 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; +}; diff --git a/apps/web/src/views/board/components/Filters.tsx b/apps/web/src/views/board/components/Filters.tsx index a8fc0201..0d045e6a 100644 --- 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 }) => ( ); -const Avatar = ({ name }: { name: string }) => ( - - - {name - .split(" ") - .map((namePart) => namePart.charAt(0).toUpperCase()) - .join("")} - - -); - 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: , + leftIcon: ( + + ), })) ?? []; const formattedLabels = diff --git a/apps/web/src/views/board/index.tsx b/apps/web/src/views/board/index.tsx index 39c858ad..e1642a65 100644 --- 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() { ))}
- {card.members.map((member) => ( - - - {member.user?.name - ?.split(" ") - .map((namePart) => - namePart - .charAt(0) - .toUpperCase(), - ) - .join("")} - - - ))} + {card.members.map((member) => { + const fileName = + member.user?.image; + + const avatarUrl = fileName + ? getPublicUrl(fileName) + : undefined; + + return ( + + ); + })}
) : null} diff --git a/apps/web/src/views/members/index.tsx b/apps/web/src/views/members/index.tsx index 7f780e04..227907f0 100644 --- 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() {
- - - {initials} - - + {showSkeleton ? ( +
+ ) : ( + + )}
@@ -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} diff --git a/apps/web/src/views/public/board/index.tsx b/apps/web/src/views/public/board/index.tsx index cd616cd4..2f3f3298 100644 --- 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() {
- + ) => { try { diff --git a/packages/db/src/repository/board.repo.ts b/packages/db/src/repository/board.repo.ts index 539c290b..9225810f 100644 --- 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 ) ) ) diff --git a/packages/db/src/repository/workspace.repo.ts b/packages/db/src/repository/workspace.repo.ts index 0dd0c6e5..010a7d4d 100644 --- 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 ) ) `,