From 17710dc74281f63fc56731de68d7d7ed95da4bc6 Mon Sep 17 00:00:00 2001
From: cade <git@cade.me>
Date: Fri, 29 Nov 2024 12:56:38 -0800
Subject: [PATCH] add page breadcrumb

---
 app/(pages)/(with-nav)/inbox/layout.tsx      |  14 --
 app/(pages)/(with-nav)/inbox/loading.tsx     |   8 +-
 app/(pages)/(with-nav)/inbox/page.tsx        |  17 +-
 app/(pages)/(with-nav)/inputs/layout.tsx     |  14 --
 app/(pages)/(with-nav)/inputs/loading.tsx    |   8 +-
 app/(pages)/(with-nav)/inputs/page.tsx       |  25 +--
 app/(pages)/(with-nav)/layout.tsx            |  72 +++----
 app/(pages)/(with-nav)/subjects/loading.tsx  |   3 +-
 app/(pages)/(with-nav)/subjects/page.tsx     |   3 +-
 app/(pages)/(with-nav)/templates/layout.tsx  |  14 --
 app/(pages)/(with-nav)/templates/loading.tsx |   8 +-
 app/(pages)/(with-nav)/templates/page.tsx    |  29 ++-
 app/_components/account-menu.tsx             |   1 +
 app/_components/breadcrumb.tsx               | 105 +++++++++
 app/_components/filterable-inputs.tsx        |  13 ++
 app/_components/filterable-templates.tsx     |  13 ++
 app/_components/page-breadcrumb.tsx          |  66 ++++++
 app/_components/subject-loading.tsx          |   4 +-
 app/_components/subject-page.tsx             | 212 ++++++++++---------
 19 files changed, 411 insertions(+), 218 deletions(-)
 delete mode 100644 app/(pages)/(with-nav)/inbox/layout.tsx
 delete mode 100644 app/(pages)/(with-nav)/inputs/layout.tsx
 delete mode 100644 app/(pages)/(with-nav)/templates/layout.tsx
 create mode 100644 app/_components/breadcrumb.tsx
 create mode 100644 app/_components/page-breadcrumb.tsx

diff --git a/app/(pages)/(with-nav)/inbox/layout.tsx b/app/(pages)/(with-nav)/inbox/layout.tsx
deleted file mode 100644
index d808b1b8..00000000
--- a/app/(pages)/(with-nav)/inbox/layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-
-interface PageProps {
-  children: ReactNode;
-}
-
-const Layout = ({ children }: PageProps) => (
-  <>
-    <h1 className="px-4 py-16 text-2xl">Inbox</h1>
-    {children}
-  </>
-);
-
-export default Layout;
diff --git a/app/(pages)/(with-nav)/inbox/loading.tsx b/app/(pages)/(with-nav)/inbox/loading.tsx
index 8437b84e..e609f86c 100644
--- a/app/(pages)/(with-nav)/inbox/loading.tsx
+++ b/app/(pages)/(with-nav)/inbox/loading.tsx
@@ -1,5 +1,11 @@
+import PageBreadcrumb from '@/_components/page-breadcrumb';
 import Spinner from '@/_components/spinner';
 
-const Loading = () => <Spinner className="mx-auto" />;
+const Loading = () => (
+  <>
+    <PageBreadcrumb skeleton />
+    <Spinner className="mx-auto" />
+  </>
+);
 
 export default Loading;
diff --git a/app/(pages)/(with-nav)/inbox/page.tsx b/app/(pages)/(with-nav)/inbox/page.tsx
index 6bacdddb..8cbf29ea 100644
--- a/app/(pages)/(with-nav)/inbox/page.tsx
+++ b/app/(pages)/(with-nav)/inbox/page.tsx
@@ -1,9 +1,22 @@
 import Notifications from '@/_components/notifications';
+import PageBreadcrumb from '@/_components/page-breadcrumb';
+import getCurrentUser from '@/_queries/get-current-user';
 import listNotifications from '@/_queries/list-notifications';
 
 const Page = async () => {
-  const { data: notifications } = await listNotifications();
-  return <Notifications notifications={notifications} />;
+  const [{ data: notifications }, user] = await Promise.all([
+    listNotifications(),
+    getCurrentUser(),
+  ]);
+
+  if (!notifications || !user) return null;
+
+  return (
+    <>
+      <PageBreadcrumb last="Inbox" />
+      <Notifications notifications={notifications} />
+    </>
+  );
 };
 
 export default Page;
diff --git a/app/(pages)/(with-nav)/inputs/layout.tsx b/app/(pages)/(with-nav)/inputs/layout.tsx
deleted file mode 100644
index 9d56435e..00000000
--- a/app/(pages)/(with-nav)/inputs/layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-
-interface LayoutProps {
-  children: ReactNode;
-}
-
-const Layout = ({ children }: LayoutProps) => (
-  <>
-    <h1 className="px-4 py-16 text-2xl">Inputs</h1>
-    {children}
-  </>
-);
-
-export default Layout;
diff --git a/app/(pages)/(with-nav)/inputs/loading.tsx b/app/(pages)/(with-nav)/inputs/loading.tsx
index 8437b84e..e609f86c 100644
--- a/app/(pages)/(with-nav)/inputs/loading.tsx
+++ b/app/(pages)/(with-nav)/inputs/loading.tsx
@@ -1,5 +1,11 @@
+import PageBreadcrumb from '@/_components/page-breadcrumb';
 import Spinner from '@/_components/spinner';
 
-const Loading = () => <Spinner className="mx-auto" />;
+const Loading = () => (
+  <>
+    <PageBreadcrumb skeleton />
+    <Spinner className="mx-auto" />
+  </>
+);
 
 export default Loading;
diff --git a/app/(pages)/(with-nav)/inputs/page.tsx b/app/(pages)/(with-nav)/inputs/page.tsx
index 183a07c0..b67094f1 100644
--- a/app/(pages)/(with-nav)/inputs/page.tsx
+++ b/app/(pages)/(with-nav)/inputs/page.tsx
@@ -1,25 +1,22 @@
-import Empty from '@/_components/empty';
 import FilterableInputs from '@/_components/filterable-inputs';
+import PageBreadcrumb from '@/_components/page-breadcrumb';
+import getCurrentUser from '@/_queries/get-current-user';
 import listInputsWithUses from '@/_queries/list-inputs-with-uses';
-import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon';
 import { sortBy } from 'lodash';
 
 const Page = async () => {
-  const { data: inputs } = await listInputsWithUses();
+  const [{ data: inputs }, user] = await Promise.all([
+    listInputsWithUses(),
+    getCurrentUser(),
+  ]);
 
-  if (!inputs?.length) {
-    return (
-      <Empty className="mx-4">
-        <InformationCircleIcon className="w-7" />
-        Inputs define the specific data points
-        <br />
-        you are interested in tracking.
-      </Empty>
-    );
-  }
+  if (!inputs || !user) return null;
 
   return (
-    <FilterableInputs inputs={sortBy(inputs, ['subjects[0].name', 'type'])} />
+    <>
+      <PageBreadcrumb user={user} last="Inputs" />
+      <FilterableInputs inputs={sortBy(inputs, ['subjects[0].name', 'type'])} />
+    </>
   );
 };
 
diff --git a/app/(pages)/(with-nav)/layout.tsx b/app/(pages)/(with-nav)/layout.tsx
index d2221e62..5188d59f 100644
--- a/app/(pages)/(with-nav)/layout.tsx
+++ b/app/(pages)/(with-nav)/layout.tsx
@@ -53,44 +53,8 @@ const Layout = async ({ children }: LayoutProps) => {
                 <HomeIcon className="w-5" />
                 Subjects
               </Button>
-              <Button
-                activeClassName="text-fg-2 before:content-[' '] before:absolute before:size-10 before:left-50% before:top-3 before:-translate-1/2 before:rounded-full before:bg-alpha-1"
-                className="relative m-0 w-20 flex-col gap-1 p-0 py-3 text-xs"
-                href="/inbox"
-                variant="link"
-              >
-                <NotificationsSubscription />
-                <div className="relative">
-                  {!!count && (
-                    <span className="absolute -top-0.5 right-0 size-2 rounded border border-alpha-4 bg-red-1" />
-                  )}
-                  <InboxIcon className="w-5" />
-                </div>
-                Inbox
-              </Button>
               {!user.app_metadata.is_client && (
                 <>
-                  <Drawer.Root>
-                    <Drawer.Trigger asChild>
-                      <IconButton
-                        className="mx-3 size-10 rounded-full p-0"
-                        icon={<PlusIcon className="w-5 stroke-2" />}
-                        label="Add new…"
-                        variant="primary"
-                      />
-                    </Drawer.Trigger>
-                    <Drawer.Portal>
-                      <Drawer.Overlay />
-                      <Drawer.Content>
-                        <Drawer.Title>Add new menu</Drawer.Title>
-                        <Drawer.Description />
-                        <AddNewMenuItems
-                          canCreateSubject={canCreateSubject}
-                          user={user}
-                        />
-                      </Drawer.Content>
-                    </Drawer.Portal>
-                  </Drawer.Root>
                   <Drawer.Root>
                     <Drawer.Trigger asChild>
                       <Button
@@ -117,8 +81,44 @@ const Layout = async ({ children }: LayoutProps) => {
                       </Drawer.Content>
                     </Drawer.Portal>
                   </Drawer.Root>
+                  <Drawer.Root>
+                    <Drawer.Trigger asChild>
+                      <IconButton
+                        className="mx-3 size-10 rounded-full p-0"
+                        icon={<PlusIcon className="w-5 stroke-2" />}
+                        label="Add new…"
+                        variant="primary"
+                      />
+                    </Drawer.Trigger>
+                    <Drawer.Portal>
+                      <Drawer.Overlay />
+                      <Drawer.Content>
+                        <Drawer.Title>Add new menu</Drawer.Title>
+                        <Drawer.Description />
+                        <AddNewMenuItems
+                          canCreateSubject={canCreateSubject}
+                          user={user}
+                        />
+                      </Drawer.Content>
+                    </Drawer.Portal>
+                  </Drawer.Root>
                 </>
               )}
+              <Button
+                activeClassName="text-fg-2 before:content-[' '] before:absolute before:size-10 before:left-50% before:top-3 before:-translate-1/2 before:rounded-full before:bg-alpha-1"
+                className="relative m-0 w-20 flex-col gap-1 p-0 py-3 text-xs"
+                href="/inbox"
+                variant="link"
+              >
+                <NotificationsSubscription />
+                <div className="relative">
+                  {!!count && (
+                    <span className="absolute -top-0.5 right-0 size-2 rounded border border-alpha-4 bg-red-1" />
+                  )}
+                  <InboxIcon className="w-5" />
+                </div>
+                Inbox
+              </Button>
               <AccountMenu user={user} teams={teams} />
             </nav>
           </div>
diff --git a/app/(pages)/(with-nav)/subjects/loading.tsx b/app/(pages)/(with-nav)/subjects/loading.tsx
index e05fcd54..e609f86c 100644
--- a/app/(pages)/(with-nav)/subjects/loading.tsx
+++ b/app/(pages)/(with-nav)/subjects/loading.tsx
@@ -1,8 +1,9 @@
+import PageBreadcrumb from '@/_components/page-breadcrumb';
 import Spinner from '@/_components/spinner';
 
 const Loading = () => (
   <>
-    <h1 className="px-4 py-16 text-2xl">Subjects</h1>
+    <PageBreadcrumb skeleton />
     <Spinner className="mx-auto" />
   </>
 );
diff --git a/app/(pages)/(with-nav)/subjects/page.tsx b/app/(pages)/(with-nav)/subjects/page.tsx
index bf1046f5..6d57b7d5 100644
--- a/app/(pages)/(with-nav)/subjects/page.tsx
+++ b/app/(pages)/(with-nav)/subjects/page.tsx
@@ -1,5 +1,6 @@
 import CollapsibleArchive from '@/_components/collapsible-archive';
 import Empty from '@/_components/empty';
+import PageBreadcrumb from '@/_components/page-breadcrumb';
 import SubjectList from '@/_components/subject-list';
 import canInsertSubjectOnCurrentPlan from '@/_queries/can-insert-subject-on-current-plan';
 import getCurrentUser from '@/_queries/get-current-user';
@@ -43,7 +44,7 @@ const Page = async () => {
 
   return (
     <>
-      <h1 className="px-4 py-16 text-2xl">Subjects</h1>
+      <PageBreadcrumb last="Subjects" user={user} />
       <div className="mx-4 space-y-4">
         {!clientSubjects.length && !teamSubjects.length && (
           <Empty>
diff --git a/app/(pages)/(with-nav)/templates/layout.tsx b/app/(pages)/(with-nav)/templates/layout.tsx
deleted file mode 100644
index c7b313d5..00000000
--- a/app/(pages)/(with-nav)/templates/layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-
-interface LayoutProps {
-  children: ReactNode;
-}
-
-const Layout = ({ children }: LayoutProps) => (
-  <>
-    <h1 className="px-4 py-16 text-2xl">Templates</h1>
-    {children}
-  </>
-);
-
-export default Layout;
diff --git a/app/(pages)/(with-nav)/templates/loading.tsx b/app/(pages)/(with-nav)/templates/loading.tsx
index 8437b84e..e609f86c 100644
--- a/app/(pages)/(with-nav)/templates/loading.tsx
+++ b/app/(pages)/(with-nav)/templates/loading.tsx
@@ -1,5 +1,11 @@
+import PageBreadcrumb from '@/_components/page-breadcrumb';
 import Spinner from '@/_components/spinner';
 
-const Loading = () => <Spinner className="mx-auto" />;
+const Loading = () => (
+  <>
+    <PageBreadcrumb skeleton />
+    <Spinner className="mx-auto" />
+  </>
+);
 
 export default Loading;
diff --git a/app/(pages)/(with-nav)/templates/page.tsx b/app/(pages)/(with-nav)/templates/page.tsx
index 1890d95b..a4ef4afd 100644
--- a/app/(pages)/(with-nav)/templates/page.tsx
+++ b/app/(pages)/(with-nav)/templates/page.tsx
@@ -1,27 +1,24 @@
-import Empty from '@/_components/empty';
 import FilterableTemplates from '@/_components/filterable-templates';
+import PageBreadcrumb from '@/_components/page-breadcrumb';
+import getCurrentUser from '@/_queries/get-current-user';
 import listTemplates from '@/_queries/list-templates';
-import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon';
 import { sortBy } from 'lodash';
 
 const Page = async () => {
-  const { data: templates } = await listTemplates();
+  const [{ data: templates }, user] = await Promise.all([
+    listTemplates(),
+    getCurrentUser(),
+  ]);
 
-  if (!templates?.length) {
-    return (
-      <Empty className="mx-4">
-        <InformationCircleIcon className="w-7" />
-        Templates define reusable content
-        <br />
-        for event types and protocols.
-      </Empty>
-    );
-  }
+  if (!templates || !user) return null;
 
   return (
-    <FilterableTemplates
-      templates={sortBy(templates, ['subjects[0].name', 'type'])}
-    />
+    <>
+      <PageBreadcrumb user={user} last="Templates" />
+      <FilterableTemplates
+        templates={sortBy(templates, ['subjects[0].name', 'type'])}
+      />
+    </>
   );
 };
 
diff --git a/app/_components/account-menu.tsx b/app/_components/account-menu.tsx
index c27f6781..7c70e335 100644
--- a/app/_components/account-menu.tsx
+++ b/app/_components/account-menu.tsx
@@ -84,6 +84,7 @@ const AccountMenu = ({ user, teams }: AccountMenuProps) => {
                       onClick={(e) => {
                         e.preventDefault();
                         setChangeTeamsId(team.id);
+
                         startChangeTeamsTransition(() =>
                           setActiveTeam(team.id),
                         );
diff --git a/app/_components/breadcrumb.tsx b/app/_components/breadcrumb.tsx
new file mode 100644
index 00000000..027f0285
--- /dev/null
+++ b/app/_components/breadcrumb.tsx
@@ -0,0 +1,105 @@
+import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
+import EllipsisHorizontalIcon from '@heroicons/react/24/outline/EllipsisHorizontalIcon';
+import { Slot } from '@radix-ui/react-slot';
+import NextLink from 'next/link';
+import * as React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const Ellipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={twMerge('flex size-9 items-center justify-center', className)}
+    {...props}
+  >
+    <EllipsisHorizontalIcon className="w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+
+Ellipsis.displayName = 'Ellipsis';
+
+const Item = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<'li'>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={twMerge('inline-flex items-center gap-1.5 text-xs', className)}
+    {...props}
+  />
+));
+
+Item.displayName = 'Item';
+
+const Link = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<typeof NextLink> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : NextLink;
+  return <Comp ref={ref} className={twMerge(className)} {...props} />;
+});
+
+Link.displayName = 'Link';
+
+const List = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<'ol'>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={twMerge(
+      'flex flex-wrap items-center gap-2 break-words',
+      className,
+    )}
+    {...props}
+  />
+));
+
+List.displayName = 'List';
+
+const Page = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<'span'>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={twMerge(className)}
+    {...props}
+  />
+));
+
+Page.displayName = 'Page';
+
+const Root = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+
+Root.displayName = 'Root';
+
+const Separator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) => (
+  <li
+    aria-hidden="true"
+    className={twMerge('text-fg-4', className)}
+    role="presentation"
+    {...props}
+  >
+    {children ?? <ChevronRightIcon className="w-4" />}
+  </li>
+);
+
+Separator.displayName = 'Separator';
+
+export { Ellipsis, Item, Link, List, Page, Root, Separator };
diff --git a/app/_components/filterable-inputs.tsx b/app/_components/filterable-inputs.tsx
index b7f796e8..17e77fe6 100644
--- a/app/_components/filterable-inputs.tsx
+++ b/app/_components/filterable-inputs.tsx
@@ -2,11 +2,13 @@
 
 import Avatar from '@/_components/avatar';
 import Button from '@/_components/button';
+import Empty from '@/_components/empty';
 import Input from '@/_components/input';
 import InputMenu from '@/_components/input-menu';
 import INPUT_TYPE_LABELS from '@/_constants/constant-input-type-labels';
 import { ListInputsWithUsesData } from '@/_queries/list-inputs-with-uses';
 import getInputUsedBySubjectMap from '@/_utilities/get-input-used-by-subject-map';
+import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon';
 import { usePrevious } from '@uidotdev/usehooks';
 import Fuse from 'fuse.js';
 import * as React from 'react';
@@ -48,6 +50,17 @@ const FilterableInputs = ({ inputs }: FilterableInputsProps) => {
     }
   }, [filter, inputs, inputsLen, prevInputsLen]);
 
+  if (!inputs.length) {
+    return (
+      <Empty className="mx-4">
+        <InformationCircleIcon className="w-7" />
+        Inputs define the specific data points
+        <br />
+        you are interested in tracking.
+      </Empty>
+    );
+  }
+
   return (
     <div className="space-y-4">
       <div className="px-4">
diff --git a/app/_components/filterable-templates.tsx b/app/_components/filterable-templates.tsx
index dfcd376b..7b338977 100644
--- a/app/_components/filterable-templates.tsx
+++ b/app/_components/filterable-templates.tsx
@@ -2,11 +2,13 @@
 
 import Avatar from '@/_components/avatar';
 import Button from '@/_components/button';
+import Empty from '@/_components/empty';
 import Input from '@/_components/input';
 import TemplateMenu from '@/_components/template-menu';
 import TEMPLATE_TYPE_LABELS from '@/_constants/constant-template-type-labels';
 import TEMPLATE_TYPE_SLUGS from '@/_constants/constant-template-type-slugs';
 import { ListTemplatesData } from '@/_queries/list-templates';
+import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon';
 import { usePrevious } from '@uidotdev/usehooks';
 import Fuse from 'fuse.js';
 import * as React from 'react';
@@ -48,6 +50,17 @@ const FilterableInputs = ({ templates }: FilterableTemplatesProps) => {
     }
   }, [filter, templates, templatesLen, prevTemplatesLen]);
 
+  if (!templates?.length) {
+    return (
+      <Empty className="mx-4">
+        <InformationCircleIcon className="w-7" />
+        Templates define reusable content
+        <br />
+        for event types and protocols.
+      </Empty>
+    );
+  }
+
   return (
     <div className="space-y-4">
       <div className="px-4">
diff --git a/app/_components/page-breadcrumb.tsx b/app/_components/page-breadcrumb.tsx
new file mode 100644
index 00000000..a9b3e764
--- /dev/null
+++ b/app/_components/page-breadcrumb.tsx
@@ -0,0 +1,66 @@
+import * as Breadcrumb from '@/_components/breadcrumb';
+import getTeam from '@/_queries/get-team';
+import { User } from '@supabase/supabase-js';
+import { ReactNode } from 'react';
+
+interface BreadcrumbsProps {
+  last?: ReactNode;
+  skeleton?: boolean;
+  user?: User | null;
+}
+
+const PageBreadcrumb = async ({ last, skeleton, user }: BreadcrumbsProps) => {
+  const { data: team } =
+    user?.app_metadata && !user.app_metadata.is_client
+      ? await getTeam(user.app_metadata.active_team_id)
+      : { data: null };
+
+  return (
+    <Breadcrumb.Root className="px-4 py-8">
+      <Breadcrumb.List>
+        <Breadcrumb.Item className="mr-0.5 text-fg-1">
+          <Breadcrumb.Link href="/subjects">
+            <svg
+              className="h-4"
+              fill="currentColor"
+              viewBox="0 0 400 292"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="217.619"
+                rx="36.027"
+                width="72.054"
+                x="109.482"
+                y=".5"
+              />
+              <rect
+                height="144.345"
+                rx="36.027"
+                width="72.054"
+                x="327.446"
+                y="147.047"
+              />
+              <rect height="217.619" rx="36.027" width="72.054" x=".5" y=".5" />
+              <ellipse cx="254.491" cy="182.583" rx="36.527" ry="36.036" />
+            </svg>
+          </Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        {team && (
+          <>
+            <Breadcrumb.Item>
+              <Breadcrumb.Link href="/subjects">{team.name}</Breadcrumb.Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator />
+          </>
+        )}
+        {last && <Breadcrumb.Item>{last}</Breadcrumb.Item>}
+        {skeleton && (
+          <Breadcrumb.Item className="h-3 w-12 animate-pulse rounded-sm bg-alpha-3" />
+        )}
+      </Breadcrumb.List>
+    </Breadcrumb.Root>
+  );
+};
+
+export default PageBreadcrumb;
diff --git a/app/_components/subject-loading.tsx b/app/_components/subject-loading.tsx
index 99973607..2aa81191 100644
--- a/app/_components/subject-loading.tsx
+++ b/app/_components/subject-loading.tsx
@@ -1,8 +1,10 @@
+import PageBreadcrumb from '@/_components/page-breadcrumb';
 import Spinner from '@/_components/spinner';
 
 const SubjectLoading = () => (
   <>
-    <div className="flex items-center justify-between px-4 py-16">
+    <PageBreadcrumb skeleton />
+    <div className="flex items-center justify-between px-4 pb-16 pt-8">
       <div className="h-8 w-32 animate-pulse rounded-sm bg-alpha-3" />
       <div className="h-8 w-8 animate-pulse rounded-sm bg-alpha-3" />
     </div>
diff --git a/app/_components/subject-page.tsx b/app/_components/subject-page.tsx
index e38de1bb..2d3020ac 100644
--- a/app/_components/subject-page.tsx
+++ b/app/_components/subject-page.tsx
@@ -3,6 +3,7 @@ import Button from '@/_components/button';
 import DirtyHtml from '@/_components/dirty-html';
 import Empty from '@/_components/empty';
 import EventTypes from '@/_components/event-types';
+import PageBreadcrumb from '@/_components/page-breadcrumb';
 import Protocols from '@/_components/protocols';
 import SubjectMenu from '@/_components/subject-menu';
 import TimelineEvents from '@/_components/timeline-events';
@@ -70,111 +71,118 @@ const SubjectPage = async ({
   const subjectData = subject.data as SubjectDataJson;
 
   return (
-    <div className="px-4 pt-16">
-      <div className="-mb-0.5 flex items-center justify-between gap-4">
-        <h1 className="font-semibold truncate text-2xl">{subject.name}</h1>
-        <Avatar file={subject.image_uri} id={subject.id} />
-      </div>
-      {subjectData?.banner && (
-        <DirtyHtml className="mt-4 text-fg-4">{subjectData?.banner}</DirtyHtml>
-      )}
-      {!!subjectData?.links?.length && (
-        <nav className="-mb-0.5 mt-4">
-          <ul className="flex flex-wrap">
-            {subjectData.links.map((link, i) => (
-              <li className="mr-6" key={`${link.url}-${i}`}>
-                <Button
-                  className="-my-1 py-1"
-                  href={link.url}
-                  target={
-                    link.url.includes(get('host') ?? '') ? undefined : '_blank'
-                  }
-                  variant="link"
-                >
-                  <LinkIcon className="w-5" />
-                  {link.label}
-                </Button>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      )}
-      {isTeamMember && (
-        <div className="mt-5 grid w-full grid-cols-2 gap-4 sm:grid-cols-3">
-          <Button
-            colorScheme="transparent"
-            href={`/subjects/${subject.id}/edit`}
-            size="sm"
-          >
-            <PencilIcon className="-ml-0.5 w-5 text-fg-4" />
-            Edit
-          </Button>
-          <Button
-            className="hidden sm:flex"
-            colorScheme="transparent"
-            href={`/subjects/${subject.id}/insights`}
-            size="sm"
-          >
-            <ChartBarSquareIcon className="-ml-0.5 w-5 text-fg-4" />
-            Insights
-          </Button>
-          <SubjectMenu canUnarchive={canUnarchive} subject={subject} />
-        </div>
-      )}
-      {!subject.archived && (!!protocols?.length || !!eventTypes?.length) && (
-        <div className="mt-16 space-y-4 empty:mt-0">
-          {!!protocols?.length && (
-            <Protocols
-              isTeamMember={isTeamMember}
-              protocols={protocols}
-              subjectId={subjectId}
-            />
-          )}
-          {!!eventTypes?.length && (
-            <EventTypes
-              isTeamMember={isTeamMember}
-              eventTypes={eventTypes}
-              subjectId={subjectId}
-            />
-          )}
+    <>
+      <PageBreadcrumb user={user} last={subject.name} />
+      <div className="px-4 pt-8">
+        <div className="-mb-0.5 flex items-center justify-between gap-4">
+          <h1 className="font-semibold truncate text-2xl">{subject.name}</h1>
+          <Avatar file={subject.image_uri} id={subject.id} />
         </div>
-      )}
-      {!!events?.length ? (
-        <TimelineEvents
-          events={events}
-          filters={f}
-          isPublic={isPublic}
-          isTeamMember={isTeamMember}
-          subjectId={subjectId}
-        />
-      ) : (
-        <Empty className="mt-16">
-          <InformationCircleIcon className="w-7" />
-          {!isPublic && !subject.archived && !user?.app_metadata.is_client ? (
-            !protocols?.length && !eventTypes?.length ? (
-              <div>
-                You need an <span className="text-fg-2">event type</span> or{' '}
-                <span className="text-fg-2">protocol</span>
-                <br />
-                to record data. Wink
-                <div className="mx-1.5 inline-flex size-4 items-center justify-center rounded-full bg-accent-1 text-bg-1">
-                  <PlusIcon className="inline w-3 stroke-2" />
+        {subjectData?.banner && (
+          <DirtyHtml className="mt-4 text-fg-4">
+            {subjectData?.banner}
+          </DirtyHtml>
+        )}
+        {!!subjectData?.links?.length && (
+          <nav className="-mb-0.5 mt-4">
+            <ul className="flex flex-wrap">
+              {subjectData.links.map((link, i) => (
+                <li className="mr-6" key={`${link.url}-${i}`}>
+                  <Button
+                    className="-my-1 py-1"
+                    href={link.url}
+                    target={
+                      link.url.includes(get('host') ?? '')
+                        ? undefined
+                        : '_blank'
+                    }
+                    variant="link"
+                  >
+                    <LinkIcon className="w-5" />
+                    {link.label}
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+        {isTeamMember && (
+          <div className="mt-5 grid w-full grid-cols-2 gap-4 sm:grid-cols-3">
+            <Button
+              colorScheme="transparent"
+              href={`/subjects/${subject.id}/edit`}
+              size="sm"
+            >
+              <PencilIcon className="-ml-0.5 w-5 text-fg-4" />
+              Edit
+            </Button>
+            <Button
+              className="hidden sm:flex"
+              colorScheme="transparent"
+              href={`/subjects/${subject.id}/insights`}
+              size="sm"
+            >
+              <ChartBarSquareIcon className="-ml-0.5 w-5 text-fg-4" />
+              Insights
+            </Button>
+            <SubjectMenu canUnarchive={canUnarchive} subject={subject} />
+          </div>
+        )}
+        {!subject.archived && (!!protocols?.length || !!eventTypes?.length) && (
+          <div className="mt-16 space-y-4 empty:mt-0">
+            {!!protocols?.length && (
+              <Protocols
+                isTeamMember={isTeamMember}
+                protocols={protocols}
+                subjectId={subjectId}
+              />
+            )}
+            {!!eventTypes?.length && (
+              <EventTypes
+                isTeamMember={isTeamMember}
+                eventTypes={eventTypes}
+                subjectId={subjectId}
+              />
+            )}
+          </div>
+        )}
+        {!!events?.length ? (
+          <TimelineEvents
+            events={events}
+            filters={f}
+            isPublic={isPublic}
+            isTeamMember={isTeamMember}
+            subjectId={subjectId}
+          />
+        ) : (
+          <Empty className="mt-16">
+            <InformationCircleIcon className="w-7" />
+            {!isPublic && !subject.archived && !user?.app_metadata.is_client ? (
+              !protocols?.length && !eventTypes?.length ? (
+                <div>
+                  You need an <span className="text-fg-2">event type</span> or{' '}
+                  <span className="text-fg-2">protocol</span>
+                  <br />
+                  to record data. Wink
+                  <div className="mx-1.5 inline-flex size-4 items-center justify-center rounded-full bg-accent-1 text-bg-1">
+                    <PlusIcon className="inline w-3 stroke-2" />
+                  </div>
+                  wink.
                 </div>
-                wink.
-              </div>
+              ) : (
+                <div>
+                  Without data, you&rsquo;re just another
+                  <br />
+                  person with an opinion.
+                </div>
+              )
             ) : (
-              <div>
-                Without data, you&rsquo;re just another
-                <br />
-                person with an opinion.
-              </div>
-            )
-          ) : (
-            'No events.'
-          )}
-        </Empty>
-      )}
-    </div>
+              'No events.'
+            )}
+          </Empty>
+        )}
+      </div>
+    </>
   );
 };