Function ProjectMenu

app/src/components/nav/ProjectMenu.tsx:28–177

({ displayProjectName }: { displayProjectName: boolean })

import { useSession, signOut } from "next-auth/react";

export default function ProjectMenu({ displayProjectName }: { displayProjectName: boolean }) {
  const router = useRouter();
  const utils = api.useContext();

  const projectList = useProjectList().data;

  const selectedProject = useSelectedProject().data;

  const popover = useDisclosure();

  const updateMutation = api.users.updateLastViewedProject.useMutation();
  const [updateLastViewedProject] = useHandledAsyncCallback(
    async (projectId: string) => {
      await updateMutation.mutateAsync({ projectId });
    },
    [updateMutation],
  );

  const createMutation = api.projects.create.useMutation();
  const [createProject, isLoading] = useHandledAsyncCallback(async () => {
    const newProj = await createMutation.mutateAsync({ name: "Untitled Project" });
    await utils.projects.list.invalidate();
    await router.push({
      pathname: "/p/[projectSlug]/settings",
      query: { projectSlug: newProj.slug },
    });
    popover.onClose();
  }, [createMutation, router]);

  const user = useSession().data;

  const profileImage = user?.user.image ? (
    <Image src={user.user.image} alt="profile picture" boxSize={6} borderRadius="50%" />
  ) : (
    <Icon as={BsPersonCircle} boxSize={6} />
  );

  return (
    <VStack w="full" alignItems="flex-start" spacing={0} py={1}>
      <Popover
        placement="bottom-end"
        isOpen={popover.isOpen}
        onOpen={popover.onOpen}
        onClose={popover.onClose}
        closeOnBlur
      >
        <PopoverTrigger>
          {/* https://github.com/chakra-ui/chakra-ui/issues/7647#issuecomment-1836555897 */}
          <NavSidebarOption tabIndex={0}>
            <HStack w="full">
              <Flex
                p={1}
                borderRadius={4}
                backgroundColor="orange.100"
                minW={{ base: 10, md: 8 }}
                minH={{ base: 10, md: 8 }}
                m={{ base: 0, md: 1 }}
                alignItems="center"