From 48396d08fb7a72a8e271c123600916ff1af358e8 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

---
 .../share/[subjectId]/layout.tsx              |   0
 .../share/[subjectId]}/loading.tsx            |   3 +-
 .../{ => (empty)}/share/[subjectId]/page.tsx  |   0
 .../subjects/[subjectId]/events.csv/route.ts  |   0
 .../[subjectId]/join/[shareCode]/page.tsx     |   0
 app/(pages)/(menu)/inbox/loading.tsx          |  11 +
 app/(pages)/(menu)/inbox/page.tsx             |  22 ++
 app/(pages)/(menu)/inputs/loading.tsx         |  11 +
 app/(pages)/(menu)/inputs/page.tsx            |  18 ++
 app/(pages)/{(with-nav) => (menu)}/layout.tsx |  72 +++---
 .../(menu)/subjects/[subjectId]/loading.tsx   |  11 +
 .../subjects/[subjectId]/page.tsx             |   0
 app/(pages)/(menu)/subjects/loading.tsx       |  11 +
 .../{(with-nav) => (menu)}/subjects/page.tsx  |   3 +-
 app/(pages)/(menu)/templates/loading.tsx      |  11 +
 app/(pages)/(menu)/templates/page.tsx         |  20 ++
 app/(pages)/(with-nav)/inbox/layout.tsx       |  14 --
 app/(pages)/(with-nav)/inbox/loading.tsx      |   5 -
 app/(pages)/(with-nav)/inbox/page.tsx         |   9 -
 app/(pages)/(with-nav)/inputs/layout.tsx      |  14 --
 app/(pages)/(with-nav)/inputs/loading.tsx     |   5 -
 app/(pages)/(with-nav)/inputs/page.tsx        |  26 --
 app/(pages)/(with-nav)/loading.tsx            |   3 -
 .../subjects/[subjectId]/loading.tsx          |   3 -
 app/(pages)/(with-nav)/templates/layout.tsx   |  14 --
 app/(pages)/(with-nav)/templates/loading.tsx  |   5 -
 app/(pages)/(with-nav)/templates/page.tsx     |  28 ---
 app/(pages)/share/[subjectId]/loading.tsx     |   3 -
 app/_components/account-menu.tsx              |   1 +
 app/_components/breadcrumb.tsx                |  98 ++++++++
 app/_components/filterable-inputs.tsx         |  13 +
 app/_components/filterable-templates.tsx      |  13 +
 app/_components/page-breadcrumb.tsx           |  49 ++++
 app/_components/subject-loading.tsx           |  13 -
 app/_components/subject-page.tsx              | 222 ++++++++++--------
 35 files changed, 449 insertions(+), 282 deletions(-)
 rename app/(pages)/{ => (empty)}/share/[subjectId]/layout.tsx (100%)
 rename app/(pages)/{(with-nav)/subjects => (empty)/share/[subjectId]}/loading.tsx (61%)
 rename app/(pages)/{ => (empty)}/share/[subjectId]/page.tsx (100%)
 rename app/(pages)/{ => (empty)}/subjects/[subjectId]/events.csv/route.ts (100%)
 rename app/(pages)/{ => (empty)}/subjects/[subjectId]/join/[shareCode]/page.tsx (100%)
 create mode 100644 app/(pages)/(menu)/inbox/loading.tsx
 create mode 100644 app/(pages)/(menu)/inbox/page.tsx
 create mode 100644 app/(pages)/(menu)/inputs/loading.tsx
 create mode 100644 app/(pages)/(menu)/inputs/page.tsx
 rename app/(pages)/{(with-nav) => (menu)}/layout.tsx (100%)
 create mode 100644 app/(pages)/(menu)/subjects/[subjectId]/loading.tsx
 rename app/(pages)/{(with-nav) => (menu)}/subjects/[subjectId]/page.tsx (100%)
 create mode 100644 app/(pages)/(menu)/subjects/loading.tsx
 rename app/(pages)/{(with-nav) => (menu)}/subjects/page.tsx (96%)
 create mode 100644 app/(pages)/(menu)/templates/loading.tsx
 create mode 100644 app/(pages)/(menu)/templates/page.tsx
 delete mode 100644 app/(pages)/(with-nav)/inbox/layout.tsx
 delete mode 100644 app/(pages)/(with-nav)/inbox/loading.tsx
 delete mode 100644 app/(pages)/(with-nav)/inbox/page.tsx
 delete mode 100644 app/(pages)/(with-nav)/inputs/layout.tsx
 delete mode 100644 app/(pages)/(with-nav)/inputs/loading.tsx
 delete mode 100644 app/(pages)/(with-nav)/inputs/page.tsx
 delete mode 100644 app/(pages)/(with-nav)/loading.tsx
 delete mode 100644 app/(pages)/(with-nav)/subjects/[subjectId]/loading.tsx
 delete mode 100644 app/(pages)/(with-nav)/templates/layout.tsx
 delete mode 100644 app/(pages)/(with-nav)/templates/loading.tsx
 delete mode 100644 app/(pages)/(with-nav)/templates/page.tsx
 delete mode 100644 app/(pages)/share/[subjectId]/loading.tsx
 create mode 100644 app/_components/breadcrumb.tsx
 create mode 100644 app/_components/page-breadcrumb.tsx
 delete mode 100644 app/_components/subject-loading.tsx

diff --git a/app/(pages)/share/[subjectId]/layout.tsx b/app/(pages)/(empty)/share/[subjectId]/layout.tsx
similarity index 100%
rename from app/(pages)/share/[subjectId]/layout.tsx
rename to app/(pages)/(empty)/share/[subjectId]/layout.tsx
diff --git a/app/(pages)/(with-nav)/subjects/loading.tsx b/app/(pages)/(empty)/share/[subjectId]/loading.tsx
similarity index 61%
rename from app/(pages)/(with-nav)/subjects/loading.tsx
rename to app/(pages)/(empty)/share/[subjectId]/loading.tsx
index e05fcd54..e609f86c 100644
--- a/app/(pages)/(with-nav)/subjects/loading.tsx
+++ b/app/(pages)/(empty)/share/[subjectId]/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)/share/[subjectId]/page.tsx b/app/(pages)/(empty)/share/[subjectId]/page.tsx
similarity index 100%
rename from app/(pages)/share/[subjectId]/page.tsx
rename to app/(pages)/(empty)/share/[subjectId]/page.tsx
diff --git a/app/(pages)/subjects/[subjectId]/events.csv/route.ts b/app/(pages)/(empty)/subjects/[subjectId]/events.csv/route.ts
similarity index 100%
rename from app/(pages)/subjects/[subjectId]/events.csv/route.ts
rename to app/(pages)/(empty)/subjects/[subjectId]/events.csv/route.ts
diff --git a/app/(pages)/subjects/[subjectId]/join/[shareCode]/page.tsx b/app/(pages)/(empty)/subjects/[subjectId]/join/[shareCode]/page.tsx
similarity index 100%
rename from app/(pages)/subjects/[subjectId]/join/[shareCode]/page.tsx
rename to app/(pages)/(empty)/subjects/[subjectId]/join/[shareCode]/page.tsx
diff --git a/app/(pages)/(menu)/inbox/loading.tsx b/app/(pages)/(menu)/inbox/loading.tsx
new file mode 100644
index 00000000..e609f86c
--- /dev/null
+++ b/app/(pages)/(menu)/inbox/loading.tsx
@@ -0,0 +1,11 @@
+import PageBreadcrumb from '@/_components/page-breadcrumb';
+import Spinner from '@/_components/spinner';
+
+const Loading = () => (
+  <>
+    <PageBreadcrumb skeleton />
+    <Spinner className="mx-auto" />
+  </>
+);
+
+export default Loading;
diff --git a/app/(pages)/(menu)/inbox/page.tsx b/app/(pages)/(menu)/inbox/page.tsx
new file mode 100644
index 00000000..8cbf29ea
--- /dev/null
+++ b/app/(pages)/(menu)/inbox/page.tsx
@@ -0,0 +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 }, 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)/(menu)/inputs/loading.tsx b/app/(pages)/(menu)/inputs/loading.tsx
new file mode 100644
index 00000000..e609f86c
--- /dev/null
+++ b/app/(pages)/(menu)/inputs/loading.tsx
@@ -0,0 +1,11 @@
+import PageBreadcrumb from '@/_components/page-breadcrumb';
+import Spinner from '@/_components/spinner';
+
+const Loading = () => (
+  <>
+    <PageBreadcrumb skeleton />
+    <Spinner className="mx-auto" />
+  </>
+);
+
+export default Loading;
diff --git a/app/(pages)/(menu)/inputs/page.tsx b/app/(pages)/(menu)/inputs/page.tsx
new file mode 100644
index 00000000..f0cfd4b7
--- /dev/null
+++ b/app/(pages)/(menu)/inputs/page.tsx
@@ -0,0 +1,18 @@
+import FilterableInputs from '@/_components/filterable-inputs';
+import PageBreadcrumb from '@/_components/page-breadcrumb';
+import listInputsWithUses from '@/_queries/list-inputs-with-uses';
+import { sortBy } from 'lodash';
+
+const Page = async () => {
+  const [{ data: inputs }] = await Promise.all([listInputsWithUses()]);
+  if (!inputs) return null;
+
+  return (
+    <>
+      <PageBreadcrumb last="Inputs" />
+      <FilterableInputs inputs={sortBy(inputs, ['subjects[0].name', 'type'])} />
+    </>
+  );
+};
+
+export default Page;
diff --git a/app/(pages)/(with-nav)/layout.tsx b/app/(pages)/(menu)/layout.tsx
similarity index 100%
rename from app/(pages)/(with-nav)/layout.tsx
rename to app/(pages)/(menu)/layout.tsx
index d2221e62..5188d59f 100644
--- a/app/(pages)/(with-nav)/layout.tsx
+++ b/app/(pages)/(menu)/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)/(menu)/subjects/[subjectId]/loading.tsx b/app/(pages)/(menu)/subjects/[subjectId]/loading.tsx
new file mode 100644
index 00000000..e609f86c
--- /dev/null
+++ b/app/(pages)/(menu)/subjects/[subjectId]/loading.tsx
@@ -0,0 +1,11 @@
+import PageBreadcrumb from '@/_components/page-breadcrumb';
+import Spinner from '@/_components/spinner';
+
+const Loading = () => (
+  <>
+    <PageBreadcrumb skeleton />
+    <Spinner className="mx-auto" />
+  </>
+);
+
+export default Loading;
diff --git a/app/(pages)/(with-nav)/subjects/[subjectId]/page.tsx b/app/(pages)/(menu)/subjects/[subjectId]/page.tsx
similarity index 100%
rename from app/(pages)/(with-nav)/subjects/[subjectId]/page.tsx
rename to app/(pages)/(menu)/subjects/[subjectId]/page.tsx
diff --git a/app/(pages)/(menu)/subjects/loading.tsx b/app/(pages)/(menu)/subjects/loading.tsx
new file mode 100644
index 00000000..e609f86c
--- /dev/null
+++ b/app/(pages)/(menu)/subjects/loading.tsx
@@ -0,0 +1,11 @@
+import PageBreadcrumb from '@/_components/page-breadcrumb';
+import Spinner from '@/_components/spinner';
+
+const Loading = () => (
+  <>
+    <PageBreadcrumb skeleton />
+    <Spinner className="mx-auto" />
+  </>
+);
+
+export default Loading;
diff --git a/app/(pages)/(with-nav)/subjects/page.tsx b/app/(pages)/(menu)/subjects/page.tsx
similarity index 96%
rename from app/(pages)/(with-nav)/subjects/page.tsx
rename to app/(pages)/(menu)/subjects/page.tsx
index bf1046f5..fd8edd36 100644
--- a/app/(pages)/(with-nav)/subjects/page.tsx
+++ b/app/(pages)/(menu)/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" />
       <div className="mx-4 space-y-4">
         {!clientSubjects.length && !teamSubjects.length && (
           <Empty>
diff --git a/app/(pages)/(menu)/templates/loading.tsx b/app/(pages)/(menu)/templates/loading.tsx
new file mode 100644
index 00000000..e609f86c
--- /dev/null
+++ b/app/(pages)/(menu)/templates/loading.tsx
@@ -0,0 +1,11 @@
+import PageBreadcrumb from '@/_components/page-breadcrumb';
+import Spinner from '@/_components/spinner';
+
+const Loading = () => (
+  <>
+    <PageBreadcrumb skeleton />
+    <Spinner className="mx-auto" />
+  </>
+);
+
+export default Loading;
diff --git a/app/(pages)/(menu)/templates/page.tsx b/app/(pages)/(menu)/templates/page.tsx
new file mode 100644
index 00000000..3b4d01cd
--- /dev/null
+++ b/app/(pages)/(menu)/templates/page.tsx
@@ -0,0 +1,20 @@
+import FilterableTemplates from '@/_components/filterable-templates';
+import PageBreadcrumb from '@/_components/page-breadcrumb';
+import listTemplates from '@/_queries/list-templates';
+import { sortBy } from 'lodash';
+
+const Page = async () => {
+  const [{ data: templates }] = await Promise.all([listTemplates()]);
+  if (!templates) return null;
+
+  return (
+    <>
+      <PageBreadcrumb last="Templates" />
+      <FilterableTemplates
+        templates={sortBy(templates, ['subjects[0].name', 'type'])}
+      />
+    </>
+  );
+};
+
+export default Page;
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
deleted file mode 100644
index 8437b84e..00000000
--- a/app/(pages)/(with-nav)/inbox/loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import Spinner from '@/_components/spinner';
-
-const Loading = () => <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
deleted file mode 100644
index 6bacdddb..00000000
--- a/app/(pages)/(with-nav)/inbox/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Notifications from '@/_components/notifications';
-import listNotifications from '@/_queries/list-notifications';
-
-const Page = async () => {
-  const { data: notifications } = await listNotifications();
-  return <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
deleted file mode 100644
index 8437b84e..00000000
--- a/app/(pages)/(with-nav)/inputs/loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import Spinner from '@/_components/spinner';
-
-const Loading = () => <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
deleted file mode 100644
index 183a07c0..00000000
--- a/app/(pages)/(with-nav)/inputs/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Empty from '@/_components/empty';
-import FilterableInputs from '@/_components/filterable-inputs';
-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();
-
-  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 (
-    <FilterableInputs inputs={sortBy(inputs, ['subjects[0].name', 'type'])} />
-  );
-};
-
-export default Page;
diff --git a/app/(pages)/(with-nav)/loading.tsx b/app/(pages)/(with-nav)/loading.tsx
deleted file mode 100644
index b95ccc10..00000000
--- a/app/(pages)/(with-nav)/loading.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-const Loading = () => null;
-
-export default Loading;
diff --git a/app/(pages)/(with-nav)/subjects/[subjectId]/loading.tsx b/app/(pages)/(with-nav)/subjects/[subjectId]/loading.tsx
deleted file mode 100644
index e25c34a7..00000000
--- a/app/(pages)/(with-nav)/subjects/[subjectId]/loading.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import SubjectLoading from '@/_components/subject-loading';
-
-export default SubjectLoading;
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
deleted file mode 100644
index 8437b84e..00000000
--- a/app/(pages)/(with-nav)/templates/loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import Spinner from '@/_components/spinner';
-
-const Loading = () => <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
deleted file mode 100644
index 1890d95b..00000000
--- a/app/(pages)/(with-nav)/templates/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import Empty from '@/_components/empty';
-import FilterableTemplates from '@/_components/filterable-templates';
-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();
-
-  if (!templates?.length) {
-    return (
-      <Empty className="mx-4">
-        <InformationCircleIcon className="w-7" />
-        Templates define reusable content
-        <br />
-        for event types and protocols.
-      </Empty>
-    );
-  }
-
-  return (
-    <FilterableTemplates
-      templates={sortBy(templates, ['subjects[0].name', 'type'])}
-    />
-  );
-};
-
-export default Page;
diff --git a/app/(pages)/share/[subjectId]/loading.tsx b/app/(pages)/share/[subjectId]/loading.tsx
deleted file mode 100644
index e25c34a7..00000000
--- a/app/(pages)/share/[subjectId]/loading.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import SubjectLoading from '@/_components/subject-loading';
-
-export default SubjectLoading;
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..7049e629
--- /dev/null
+++ b/app/_components/breadcrumb.tsx
@@ -0,0 +1,98 @@
+import EllipsisHorizontalIcon from '@heroicons/react/24/outline/EllipsisHorizontalIcon';
+import SlashIcon from '@heroicons/react/24/outline/SlashIcon';
+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('min-w-0', 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-3', 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 ?? <SlashIcon className="w-5" />}
+  </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..a68af631
--- /dev/null
+++ b/app/_components/page-breadcrumb.tsx
@@ -0,0 +1,49 @@
+import * as Breadcrumb from '@/_components/breadcrumb';
+import { ReactNode } from 'react';
+
+interface BreadcrumbsProps {
+  isPublic?: boolean;
+  last?: ReactNode;
+  skeleton?: boolean;
+}
+
+const PageBreadcrumb = ({ isPublic, last, skeleton }: BreadcrumbsProps) => (
+  <Breadcrumb.Root className="px-4 py-8">
+    <Breadcrumb.List>
+      <Breadcrumb.Item className="flex h-6 items-center text-fg-1">
+        <Breadcrumb.Link href={isPublic ? '/' : '/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 />
+      {last && <Breadcrumb.Item>{last}</Breadcrumb.Item>}
+      {skeleton && (
+        <Breadcrumb.Item className="h-5 w-16 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
deleted file mode 100644
index 99973607..00000000
--- a/app/_components/subject-loading.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Spinner from '@/_components/spinner';
-
-const SubjectLoading = () => (
-  <>
-    <div className="flex items-center justify-between px-4 py-16">
-      <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>
-    <Spinner className="mx-auto" />
-  </>
-);
-
-export default SubjectLoading;
diff --git a/app/_components/subject-page.tsx b/app/_components/subject-page.tsx
index e38de1bb..481a5228 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,128 @@ 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
+        isPublic={isPublic}
+        last={
+          <div className="flex items-center gap-2">
+            <Avatar
+              className="size-5"
+              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" />
+            <div className="min-w-0">
+              <div className="truncate">{subject.name}</div>
+            </div>
+          </div>
+        }
+      />
+      <div className="px-4">
+        {subjectData?.banner && (
+          <DirtyHtml className="-mt-1 text-fg-4">
+            {subjectData?.banner}
+          </DirtyHtml>
+        )}
+        {!!subjectData?.links?.length && (
+          <nav className="-my-1 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>
+    </>
   );
 };