Show selected org

app/src/components/nav/AppShell.tsx

@@ -7,48 +7,21 @@ import {
   Image,
   Text,
   Box,
-  type BoxProps,
   Link as ChakraLink,
   Flex,
 } from "@chakra-ui/react";
 import Head from "next/head";
-import Link, { type LinkProps } from "next/link";
+import Link from "next/link";
 import { BsGithub, BsPersonCircle } from "react-icons/bs";
-import { useRouter } from "next/router";
-import { type IconType } from "react-icons";
 import { RiDatabase2Line, RiFlaskLine } from "react-icons/ri";
 import { signIn, useSession } from "next-auth/react";
 import UserMenu from "./UserMenu";
 import { env } from "~/env.mjs";
+import ProjectMenu from "./ProjectMenu";
+import NavSidebarOption from "./NavSidebarOption";
+import IconLink from "./IconLink";
 
-type IconLinkProps = BoxProps & LinkProps & { label?: string; icon: IconType; href: string };
-
-const IconLink = ({ icon, label, href, color, ...props }: IconLinkProps) => {
-  const router = useRouter();
-  const isActive = href && router.pathname.startsWith(href);
-  return (
-    <Link href={href} style={{ width: "100%" }}>
-      <HStack
-        w="full"
-        p={4}
-        color={color}
-        as={ChakraLink}
-        bgColor={isActive ? "gray.200" : "transparent"}
-        _hover={{ bgColor: "gray.300", textDecoration: "none" }}
-        justifyContent="start"
-        cursor="pointer"
-        {...props}
-      >
-        <Icon as={icon} boxSize={6} mr={2} />
-        <Text fontWeight="bold" fontSize="sm">
-          {label}
-        </Text>
-      </HStack>
-    </Link>
-  );
-};
-
-const Divider = () => <Box h="1px" bgColor="gray.200" />;
+const Divider = () => <Box h="1px" bgColor="gray.300" w="full" />;
 
 const NavSidebar = () => {
   const user = useSession().data;
@@ -56,22 +29,28 @@ const NavSidebar = () => {
   return (
     <VStack
       align="stretch"
-      bgColor="gray.100"
+      bgColor="gray.50"
       py={2}
+      px={2}
       pb={0}
       height="100%"
-      w={{ base: "56px", md: "200px" }}
+      w={{ base: "56px", md: "240px" }}
       overflow="hidden"
+      borderRightWidth={1}
+      borderColor="gray.300"
     >
-      <HStack as={Link} href="/" _hover={{ textDecoration: "none" }} spacing={0} px={4} py={2}>
+      <HStack as={Link} href="/" _hover={{ textDecoration: "none" }} spacing={0} px={2} py={2}>
         <Image src="/logo.svg" alt="" boxSize={6} mr={4} />
         <Heading size="md" fontFamily="inconsolata, monospace">
           OpenPipe
         </Heading>
       </HStack>
-      <VStack spacing={0} align="flex-start" overflowY="auto" overflowX="hidden" flex={1}>
+      <Divider />
+      <VStack align="flex-start" overflowY="auto" overflowX="hidden" flex={1}>
         {user != null && (
           <>
+            <ProjectMenu />
+            <Divider />
             <IconLink icon={RiFlaskLine} label="Experiments" href="/experiments" />
             {env.NEXT_PUBLIC_SHOW_DATA && (
               <IconLink icon={RiDatabase2Line} label="Data" href="/data" />
@@ -79,29 +58,26 @@ const NavSidebar = () => {
           </>
         )}
         {user === null && (
-          <HStack
-            w="full"
-            p={4}
-            as={ChakraLink}
-            _hover={{ bgColor: "gray.300", textDecoration: "none" }}
-            justifyContent="start"
-            cursor="pointer"
-            onClick={() => {
-              signIn("github").catch(console.error);
-            }}
-          >
-            <Icon as={BsPersonCircle} boxSize={6} mr={2} />
-            <Text fontWeight="bold" fontSize="sm">
-              Sign In
-            </Text>
-          </HStack>
+          <NavSidebarOption>
+            <HStack
+              w="full"
+              p={4}
+              as={ChakraLink}
+              justifyContent="start"
+              onClick={() => {
+                signIn("github").catch(console.error);
+              }}
+            >
+              <Icon as={BsPersonCircle} boxSize={6} mr={2} />
+              <Text fontWeight="bold" fontSize="sm">
+                Sign In
+              </Text>
+            </HStack>
+          </NavSidebarOption>
         )}
       </VStack>
-      {user ? (
-        <UserMenu user={user} borderColor={"gray.200"} borderTopWidth={1} borderBottomWidth={1} />
-      ) : (
-        <Divider />
-      )}
+      {user && <UserMenu user={user} borderColor={"gray.200"} />}
+      <Divider />
       <VStack spacing={0} align="center">
         <ChakraLink
           href="https://github.com/openpipe/openpipe"

app/src/components/nav/IconLink.tsx

@@ -0,0 +1,23 @@
+import { Icon, HStack, Text, type BoxProps } from "@chakra-ui/react";
+import Link, { type LinkProps } from "next/link";
+import { type IconType } from "react-icons";
+import NavSidebarOption from "./NavSidebarOption";
+
+type IconLinkProps = BoxProps & LinkProps & { label?: string; icon: IconType; href: string };
+
+const IconLink = ({ icon, label, href, color, ...props }: IconLinkProps) => {
+  return (
+    <Link href={href} style={{ width: "100%" }}>
+      <NavSidebarOption activeHrefPattern={href}>
+        <HStack w="full" p={2} color={color} justifyContent="start" {...props}>
+          <Icon as={icon} boxSize={6} mr={2} />
+          <Text fontSize="sm">
+            {label}
+          </Text>
+        </HStack>
+      </NavSidebarOption>
+    </Link>
+  );
+};
+
+export default IconLink;

app/src/components/nav/NavSidebarOption.tsx

@@ -0,0 +1,26 @@
+import { Box, type BoxProps } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+const NavSidebarOption = ({
+  activeHrefPattern,
+  ...props
+}: { activeHrefPattern?: string } & BoxProps) => {
+  const router = useRouter();
+  const isActive = activeHrefPattern && router.pathname.startsWith(activeHrefPattern);
+  return (
+    <Box
+      w="full"
+      fontWeight={isActive ? "bold" : "500"}
+      bgColor={isActive ? "gray.200" : "transparent"}
+      _hover={{ bgColor: "gray.200", textDecoration: "none" }}
+      justifyContent="start"
+      cursor="pointer"
+      borderRadius={4}
+      {...props}
+    >
+      {props.children}
+    </Box>
+  );
+};
+
+export default NavSidebarOption;

app/src/components/nav/ProjectMenu.tsx

@@ -0,0 +1,74 @@
+import {
+  HStack,
+  VStack,
+  Text,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Flex,
+} from "@chakra-ui/react";
+import { useEffect } from "react";
+import Link from "next/link";
+
+import { useAppStore } from "~/state/store";
+import { api } from "~/utils/api";
+import NavSidebarOption from "./NavSidebarOption";
+import { useSelectedOrg } from "~/utils/hooks";
+
+export default function ProjectMenu() {
+  const selectedOrgId = useAppStore((s) => s.selectedOrgId);
+  const setSelectedOrgId = useAppStore((s) => s.setSelectedOrgId);
+
+  const { data } = api.organizations.list.useQuery();
+
+  useEffect(() => {
+    if (data && data[0] && (!selectedOrgId || !data.find((org) => org.id === selectedOrgId))) {
+      setSelectedOrgId(data[0].id);
+    }
+  }, [selectedOrgId, setSelectedOrgId, data]);
+
+  const { data: selectedOrg } = useSelectedOrg();
+
+  return (
+    <>
+      <Popover placement="right">
+        <PopoverTrigger>
+          <VStack w="full" alignItems="flex-start" spacing={0}>
+            <Text
+              pl={2}
+              pb={2}
+              fontSize="xs"
+              fontWeight="bold"
+              color="gray.500"
+              display={{ base: "none", md: "flex" }}
+            >
+              PROJECT
+            </Text>
+            <NavSidebarOption activeHrefPattern="/home">
+              <Link href="/home">
+                <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"
+                    justifyContent="center"
+                  >
+                    <Text>{selectedOrg?.name[0]?.toUpperCase()}</Text>
+                  </Flex>
+                  <Text fontSize="sm" display={{ base: "none", md: "block" }} py={1}>
+                    {selectedOrg?.name}
+                  </Text>
+                </HStack>
+              </Link>
+            </NavSidebarOption>
+          </VStack>
+        </PopoverTrigger>
+        <PopoverContent _focusVisible={{ boxShadow: "unset", outline: "unset" }}></PopoverContent>
+      </Popover>
+    </>
+  );
+}

app/src/components/nav/UserMenu.tsx

@@ -14,6 +14,7 @@ import {
 import { type Session } from "next-auth";
 import { signOut } from "next-auth/react";
 import { BsBoxArrowRight, BsChevronRight, BsPersonCircle } from "react-icons/bs";
+import NavSidebarOption from "./NavSidebarOption";
 
 export default function UserMenu({ user, ...rest }: { user: Session } & StackProps) {
   const { colorMode } = useColorMode();
@@ -27,30 +28,39 @@ export default function UserMenu({ user, ...rest }: { user: Session } & StackPro
   return (
     <>
       <Popover placement="right">
-        <PopoverTrigger>
-          <HStack
-            // Weird values to make mobile look right; can clean up when we make the sidebar disappear on mobile
-            px={3}
-            spacing={3}
-            py={2}
-            {...rest}
-            cursor="pointer"
-            _hover={{
-              bgColor: colorMode === "light" ? "gray.200" : "gray.700",
-            }}
+        <VStack w="full" alignItems="flex-start" spacing={0} {...rest}>
+          <Text
+            pl={2}
+            pb={2}
+            fontSize="xs"
+            fontWeight="bold"
+            color="gray.500"
+            display={{ base: "none", md: "flex" }}
           >
-            {profileImage}
-            <VStack spacing={0} align="start" flex={1} flexShrink={1}>
-              <Text fontWeight="bold" fontSize="sm">
-                {user.user.name}
-              </Text>
-              <Text color="gray.500" fontSize="xs">
-                {user.user.email}
-              </Text>
-            </VStack>
-            <Icon as={BsChevronRight} boxSize={4} color="gray.500" />
-          </HStack>
-        </PopoverTrigger>
+            ACCOUNT
+          </Text>
+          <PopoverTrigger>
+            <NavSidebarOption>
+              <HStack
+                // Weird values to make mobile look right; can clean up when we make the sidebar disappear on mobile
+                py={2}
+                px={1}
+                spacing={3}
+              >
+                {profileImage}
+                <VStack spacing={0} align="start" flex={1} flexShrink={1}>
+                  <Text fontWeight="bold" fontSize="sm">
+                    {user.user.name}
+                  </Text>
+                  <Text color="gray.500" fontSize="xs">
+                    {/* {user.user.email} */}
+                  </Text>
+                </VStack>
+                <Icon as={BsChevronRight} boxSize={4} color="gray.500" />
+              </HStack>
+            </NavSidebarOption>
+          </PopoverTrigger>
+        </VStack>
         <PopoverContent _focusVisible={{ boxShadow: "unset", outline: "unset" }} maxW="200px">
           <VStack align="stretch" spacing={0}>
             {/* sign out */}