wip

app/(pages)/(auth)/authenticate/route.ts

@@ -5,7 +5,9 @@ import { NextRequest, NextResponse } from 'next/server';
 export const GET = async (req: NextRequest) => {
   const { searchParams } = new URL(req.url);
 
-  await createServerSupabaseClient().auth.verifyOtp({
+  await (
+    await createServerSupabaseClient()
+  ).auth.verifyOtp({
     token_hash: searchParams.get('token_hash') as string,
     type: searchParams.get('type') as EmailOtpType,
   });

app/(pages)/(auth)/sign-in/page.tsx

@@ -4,24 +4,26 @@ import SignInForm from '@/_components/sign-in-form';
 export const metadata = { title: 'Sign in' };
 
 interface PageProps {
-  searchParams: {
-    next?: string;
-  };
+  searchParams: Promise<{ next?: string }>;
 }
 
-const Page = ({ searchParams: { next } }: PageProps) => (
-  <>
-    <div className="w-full sm:rounded sm:border sm:border-alpha-1 sm:bg-bg-2 sm:p-8">
-      <h1 className="mb-12 text-2xl">Welcome back</h1>
-      <SignInForm next={next} />
-    </div>
-    <p className="flex gap-4">
-      <span className="text-fg-4">Don&rsquo;t have an account?</span>
-      <Button href={`/sign-up${next ? `?next=${next}` : ''}`} variant="link">
-        Sign up
-      </Button>
-    </p>
-  </>
-);
+const Page = async ({ searchParams }: PageProps) => {
+  const { next } = await searchParams;
+
+  return (
+    <>
+      <div className="w-full sm:rounded sm:border sm:border-alpha-1 sm:bg-bg-2 sm:p-8">
+        <h1 className="mb-12 text-2xl">Welcome back</h1>
+        <SignInForm next={next} />
+      </div>
+      <p className="flex gap-4">
+        <span className="text-fg-4">Don&rsquo;t have an account?</span>
+        <Button href={`/sign-up${next ? `?next=${next}` : ''}`} variant="link">
+          Sign up
+        </Button>
+      </p>
+    </>
+  );
+};
 
 export default Page;

app/(pages)/(auth)/sign-up/page.tsx

@@ -4,24 +4,26 @@ import SignUpForm from '@/_components/sign-up-form';
 export const metadata = { title: 'Sign up' };
 
 interface PageProps {
-  searchParams: {
-    next?: string;
-  };
+  searchParams: Promise<{ next?: string }>;
 }
 
-const Page = ({ searchParams: { next } }: PageProps) => (
-  <>
-    <div className="sm:rounded sm:border sm:border-alpha-1 sm:bg-bg-2 sm:p-8">
-      <h1 className="mb-12 text-2xl">Create your account</h1>
-      <SignUpForm next={next} />
-    </div>
-    <p className="flex gap-4">
-      <span className="text-fg-4">Have an account?</span>
-      <Button href={`/sign-in${next ? `?next=${next}` : ''}`} variant="link">
-        Sign in
-      </Button>
-    </p>
-  </>
-);
+const Page = async ({ searchParams }: PageProps) => {
+  const { next } = await searchParams;
+
+  return (
+    <>
+      <div className="sm:rounded sm:border sm:border-alpha-1 sm:bg-bg-2 sm:p-8">
+        <h1 className="mb-12 text-2xl">Create your account</h1>
+        <SignUpForm next={next} />
+      </div>
+      <p className="flex gap-4">
+        <span className="text-fg-4">Have an account?</span>
+        <Button href={`/sign-in${next ? `?next=${next}` : ''}`} variant="link">
+          Sign in
+        </Button>
+      </p>
+    </>
+  );
+};
 
 export default Page;

app/(pages)/(marketing)/page.tsx

@@ -1,43 +1,10 @@
 import Button from '@/_components/button';
+import Logo from '@/_components/logo';
 import ArrowUpRightIcon from '@heroicons/react/24/outline/ArrowUpRightIcon';
 
 const Page = () => (
   <div className="mx-auto flex min-h-full max-w-2xl select-text flex-col items-center justify-center px-6 py-16 text-center">
-    <svg
-      className="size-16"
-      fill="none"
-      viewBox="0 0 1000 1000"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect fill="#f7bb08" height="1000" rx="500" width="1000" />
-      <g fill="#1f1f1f">
-        <rect
-          height="217.619"
-          rx="36.0269"
-          stroke="#1f1f1f"
-          width="72.0539"
-          x="409.482"
-          y="354.5"
-        />
-        <rect
-          height="144.345"
-          rx="36.0269"
-          stroke="#1f1f1f"
-          width="72.0539"
-          x="627.446"
-          y="501.047"
-        />
-        <rect
-          height="217.619"
-          rx="36.0269"
-          stroke="#1f1f1f"
-          width="72.0539"
-          x="300.5"
-          y="354.5"
-        />
-        <ellipse cx="554.491" cy="536.583" rx="36.5269" ry="36.036" />
-      </g>
-    </svg>
+    <Logo className="size-16" />
     <h1 className="mt-14 max-w-sm text-2xl font-bold md:max-w-xl md:text-4xl">
       <span className="text-fg-1">llog</span>&mdash;achieve lasting behavior
       changes with your&nbsp;clients.

app/(pages)/(with-nav)/inbox/layout.tsx

@@ -0,0 +1,14 @@
+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;

app/(pages)/(with-nav)/inbox/page.tsx

@@ -0,0 +1,9 @@
+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;

app/(pages)/(with-nav)/inputs/layout.tsx

@@ -1,5 +1,3 @@
-import Button from '@/_components/button';
-import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { ReactNode } from 'react';
 
 interface LayoutProps {
@@ -8,13 +6,7 @@ interface LayoutProps {
 
 const Layout = ({ children }: LayoutProps) => (
   <>
-    <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
-      <h1 className="text-2xl">Inputs</h1>
-      <Button className="pl-3" href="/inputs/create" scroll={false} size="sm">
-        <PlusIcon className="w-5 stroke-2" />
-        New input
-      </Button>
-    </div>
+    <h1 className="px-4 py-16 text-2xl">Inputs</h1>
     {children}
   </>
 );

app/(pages)/(with-nav)/layout.tsx

@@ -1,74 +1,120 @@
 import AccountMenu from '@/_components/account-menu';
+import AddNewMenuItems from '@/_components/add-new-menu-items';
 import Button from '@/_components/button';
+import * as Drawer from '@/_components/drawer';
 import IconButton from '@/_components/icon-button';
-import Subscriptions from '@/_components/subscriptions';
+import NotificationsSubscription from '@/_components/notifications-subscription';
+import canInsertSubjectOnCurrentPlan from '@/_queries/can-insert-subject-on-current-plan';
 import countNotifications from '@/_queries/count-notifications';
 import getCurrentUser from '@/_queries/get-current-user';
-import BellIcon from '@heroicons/react/24/outline/BellIcon';
+import Bars3Icon from '@heroicons/react/24/outline/Bars3Icon';
+import DocumentTextIcon from '@heroicons/react/24/outline/DocumentTextIcon';
+import HomeIcon from '@heroicons/react/24/outline/HomeIcon';
+import InboxIcon from '@heroicons/react/24/outline/InboxIcon';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import QueueListIcon from '@heroicons/react/24/outline/QueueListIcon';
 import { ReactNode } from 'react';
 
 interface LayoutProps {
   children: ReactNode;
 }
 
 const Layout = async ({ children }: LayoutProps) => {
-  const [{ count }, user] = await Promise.all([
+  const [{ data: canCreateSubject }, { count }, user] = await Promise.all([
+    canInsertSubjectOnCurrentPlan(),
     countNotifications(),
     getCurrentUser(),
   ]);
 
   if (!user) return null;
 
   return (
-    <div className="mx-auto max-w-lg pb-20">
-      <Subscriptions />
-      {user && (
-        <nav className="flex items-center justify-between gap-4 px-4 pt-8">
-          <div className="flex flex-wrap gap-4">
-            <Button activeClassName="text-fg-2" href="/subjects" variant="link">
-              Subjects
-            </Button>
-            {!user.user_metadata.is_client && (
-              <>
-                <Button
-                  activeClassName="text-fg-2"
-                  href="/templates"
-                  variant="link"
-                >
-                  Templates
-                </Button>
-                <Button
-                  activeClassName="text-fg-2"
-                  href="/inputs"
-                  variant="link"
-                >
-                  Inputs
-                </Button>
-              </>
-            )}
-          </div>
-          <div className="relative flex gap-3">
-            <IconButton
-              activeClassName="text-fg-2"
-              href="/notifications/inbox"
-              icon={
+    <>
+      <div className="mx-auto max-w-lg pb-[calc(theme('spacing.16')+5.2rem)]">
+        {children}
+      </div>
+      <div className="fixed inset-x-0 bottom-0">
+        <div className="mx-auto w-full max-w-lg px-4">
+          <div className="rounded-t bg-bg-1 pb-4">
+            <nav className="flex items-center justify-center rounded border border-alpha-1 px-4">
+              <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="/subjects"
+                variant="link"
+              >
+                <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-1.5 right-7 whitespace-nowrap rounded-sm border border-alpha-4 bg-red-1 px-1.5 py-0.5 text-xs text-fg-1">
-                      {count}
-                    </span>
+                    <span className="absolute -top-0.5 right-0 size-2 rounded border border-alpha-4 bg-red-1" />
                   )}
-                  <BellIcon className="w-7" />
+                  <InboxIcon className="w-5" />
                 </div>
-              }
-              scroll={false}
-            />
-            <AccountMenu user={user} />
+                Inbox
+              </Button>
+              {!user.user_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} />
+                      </Drawer.Content>
+                    </Drawer.Portal>
+                  </Drawer.Root>
+                  <Drawer.Root>
+                    <Drawer.Trigger asChild>
+                      <Button
+                        className="relative m-0 w-20 flex-col gap-1 p-0 py-3 text-xs"
+                        variant="link"
+                      >
+                        <Bars3Icon className="w-5" />
+                        More
+                      </Button>
+                    </Drawer.Trigger>
+                    <Drawer.Portal>
+                      <Drawer.Overlay />
+                      <Drawer.Content>
+                        <Drawer.Title>Menu</Drawer.Title>
+                        <Drawer.Description />
+                        <Drawer.Button href="/inputs">
+                          <QueueListIcon className="w-5 text-fg-4" />
+                          Inputs
+                        </Drawer.Button>
+                        <Drawer.Button href="/templates">
+                          <DocumentTextIcon className="w-5 text-fg-4" />
+                          Templates
+                        </Drawer.Button>
+                      </Drawer.Content>
+                    </Drawer.Portal>
+                  </Drawer.Root>
+                </>
+              )}
+              <AccountMenu user={user} />
+            </nav>
           </div>
-        </nav>
-      )}
-      {children}
-    </div>
+        </div>
+      </div>
+    </>
   );
 };