add page breadcrumb

xvvvyz · Nov 29, 2024 · 669b7fe · 669b7fe
1 parent 1424de4
commit 669b7fe
Show file tree

Hide file tree

Showing 19 changed files with 411 additions and 218 deletions.
diff --git a/app/(pages)/(with-nav)/inbox/layout.tsx b/app/(pages)/(with-nav)/inbox/layout.tsx
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -84,6 +84,7 @@ const AccountMenu = ({ user, teams }: AccountMenuProps) => {
                       onClick={(e) => {
                         e.preventDefault();
                         setChangeTeamsId(team.id);
+
                         startChangeTeamsTransition(() =>
                           setActiveTeam(team.id),
                         );