Add project to breadcrumb

app/src/components/nav/PageHeaderContainer.tsx

@@ -4,10 +4,12 @@ const PageHeaderContainer = (props: FlexProps) => {
   return <Flex
     px={8}
     py={2}
+    minH={16}
     w="full"
     direction={{ base: "column", sm: "row" }}
     alignItems={{ base: "flex-start", sm: "center" }}
     justifyContent="space-between"
+    fontWeight="500"
     {...props}
   />;
 };

app/src/components/nav/ProjectBreadcrumbContents.tsx

@@ -0,0 +1,34 @@
+import { HStack, Flex, Text } from "@chakra-ui/react";
+import Link from "next/link";
+
+import { useSelectedOrg } from "~/utils/hooks";
+
+// Have to export only contents here instead of full BreadcrumbItem because Chakra doesn't
+// recognize a BreadcrumbItem exported with this component as a valid child of Breadcrumb.
+
+export default function ProjectBreadcrumbContents() {
+  const { data: selectedOrg } = useSelectedOrg();
+
+  return (
+    <Link href="/home">
+      <HStack w="full">
+        <Flex
+          p={1}
+          borderRadius={4}
+          backgroundColor="orange.100"
+          minW={6}
+          maxW={6}
+          minH={6}
+          maxH={6}
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Text>{selectedOrg?.name[0]?.toUpperCase()}</Text>
+        </Flex>
+        <Text display={{ base: "none", md: "block" }} py={1}>
+          {selectedOrg?.name}
+        </Text>
+      </HStack>
+    </Link>
+  );
+}

app/src/pages/data/[id].tsx

@@ -19,6 +19,7 @@ import { useDataset, useHandledAsyncCallback } from "~/utils/hooks";
 import DatasetEntriesTable from "~/components/datasets/DatasetEntriesTable";
 import { DatasetHeaderButtons } from "~/components/datasets/DatasetHeaderButtons/DatasetHeaderButtons";
 import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
+import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
 
 export default function Dataset() {
   const router = useRouter();
@@ -58,6 +59,9 @@ export default function Dataset() {
       <VStack h="full">
         <PageHeaderContainer>
           <Breadcrumb>
+            <BreadcrumbItem>
+              <ProjectBreadcrumbContents />
+            </BreadcrumbItem>
             <BreadcrumbItem>
               <Link href="/data">
                 <Flex alignItems="center" _hover={{ textDecoration: "underline" }}>

app/src/pages/data/index.tsx

@@ -18,6 +18,7 @@ import {
   NewDatasetCard,
 } from "~/components/datasets/DatasetCard";
 import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
+import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
 
 export default function DatasetsPage() {
   const datasets = api.datasets.list.useQuery();
@@ -51,6 +52,9 @@ export default function DatasetsPage() {
     <AppShell title="Data">
       <PageHeaderContainer>
         <Breadcrumb>
+          <BreadcrumbItem>
+            <ProjectBreadcrumbContents />
+          </BreadcrumbItem>
           <BreadcrumbItem minH={8}>
             <Flex alignItems="center">
               <Icon as={RiDatabase2Line} boxSize={4} mr={2} /> Datasets

app/src/pages/experiments/[id].tsx

@@ -24,6 +24,8 @@ import { useSyncVariantEditor } from "~/state/sync";
 import { ExperimentHeaderButtons } from "~/components/experiments/ExperimentHeaderButtons/ExperimentHeaderButtons";
 import Head from "next/head";
 import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
+import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
+
 
 // TODO: import less to fix deployment with server side props
 // export const getServerSideProps = async (context: GetServerSidePropsContext<{ id: string }>) => {
@@ -107,6 +109,9 @@ export default function Experiment() {
         <VStack h="full">
           <PageHeaderContainer>
             <Breadcrumb>
+              <BreadcrumbItem>
+                <ProjectBreadcrumbContents />
+              </BreadcrumbItem>
               <BreadcrumbItem>
                 <Link href="/experiments">
                   <Flex alignItems="center" _hover={{ textDecoration: "underline" }}>

app/src/pages/experiments/index.tsx

@@ -18,6 +18,7 @@ import {
 } from "~/components/experiments/ExperimentCard";
 import { signIn, useSession } from "next-auth/react";
 import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
+import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
 
 export default function ExperimentsPage() {
   const experiments = api.experiments.list.useQuery();
@@ -51,6 +52,9 @@ export default function ExperimentsPage() {
     <AppShell title="Experiments">
       <PageHeaderContainer>
         <Breadcrumb>
+          <BreadcrumbItem>
+            <ProjectBreadcrumbContents />
+          </BreadcrumbItem>
           <BreadcrumbItem minH={8}>
             <Flex alignItems="center">
               <Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments

app/src/pages/home/index.tsx

@@ -1,7 +1,8 @@
-import { Breadcrumb, BreadcrumbItem, Input } from "@chakra-ui/react";
+import { Breadcrumb, BreadcrumbItem, Text } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import AppShell from "~/components/nav/AppShell";
 import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
+import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
 import { api } from "~/utils/api";
 import { useHandledAsyncCallback, useSelectedOrg } from "~/utils/hooks";
 
@@ -27,22 +28,12 @@ export default function HomePage() {
   return (
     <AppShell>
       <PageHeaderContainer>
-        <Breadcrumb flex={1}>
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <ProjectBreadcrumbContents />
+          </BreadcrumbItem>
           <BreadcrumbItem isCurrentPage>
-            <Input
+            <Text>Home</Text>
-              size="sm"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              onBlur={onSaveName}
-              borderWidth={1}
-              borderColor="transparent"
-              fontSize={16}
-              px={0}
-              minW={{ base: 100, lg: 300 }}
-              flex={1}
-              _hover={{ borderColor: "gray.300" }}
-              _focus={{ borderColor: "blue.500", outline: "none" }}
-            />
           </BreadcrumbItem>
         </Breadcrumb>
       </PageHeaderContainer>

app/src/pages/settings/index.tsx

@@ -1,9 +1,11 @@
-import { Breadcrumb, BreadcrumbItem, Input } from "@chakra-ui/react";
+import { Breadcrumb, BreadcrumbItem, Text } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
+
 import AppShell from "~/components/nav/AppShell";
 import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
 import { api } from "~/utils/api";
 import { useHandledAsyncCallback, useSelectedOrg } from "~/utils/hooks";
+import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
 
 export default function Settings() {
   const utils = api.useContext();
@@ -29,21 +31,11 @@ export default function Settings() {
     <AppShell>
       <PageHeaderContainer>
         <Breadcrumb>
+          <BreadcrumbItem>
+            <ProjectBreadcrumbContents />
+          </BreadcrumbItem>
           <BreadcrumbItem isCurrentPage>
-            <Input
+            <Text>Project Settings</Text>
-              size="sm"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              onBlur={onSaveName}
-              borderWidth={1}
-              borderColor="transparent"
-              fontSize={16}
-              px={0}
-              minW={{ base: 100, lg: 300 }}
-              flex={1}
-              _hover={{ borderColor: "gray.300" }}
-              _focus={{ borderColor: "blue.500", outline: "none" }}
-            />
           </BreadcrumbItem>
         </Breadcrumb>
       </PageHeaderContainer>