add page breadcrumb

app/(pages)/(with-nav)/subjects/loading.tsx → 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" />
   </>
 );

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;

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;

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;

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;

app/(pages)/(with-nav)/layout.tsx → 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>

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;

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;

app/(pages)/(with-nav)/subjects/page.tsx → 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>

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;

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;

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),
                         );