Document Templates + Fixing Route Architecture

app/(dashboard)/dashboard/layout.tsx

@@ -35,7 +35,7 @@ export default async function DashboardLayout({
         </div>
       </header>
 
-      <div className="grid flex-1 gap-12 md:grid-cols-[200px_1fr] px-10">
+      <div className="grid flex-1 gap-4 md:grid-cols-[200px_1fr] px-10">
         <aside className="hidden w-[200px] flex-col md:flex">
           <DashboardNav items={dashboardConfig.sidebarNav} />
         </aside>

app/(dashboard)/dashboard/loading.tsx

@@ -1,24 +1,24 @@
-import { DashboardHeader } from "@/components/header"
-import { JotCreateButton } from "@/components/jot-create-button"
-import { JotItem } from "@/components/jot-item"
-import { DashboardShell } from "@/components/shell"
+import { PageHeader } from "@/components/page-header"
+import { JotCreateButton } from "@/components/jots/jot-create-button"
+import { JotItem } from "@/components/jots/jot-item"
+import { PageShell } from "@/components/page-shell"
 
 export default function DashboardLoading() {
   return (
-    <DashboardShell>
-      <DashboardHeader
+    <PageShell>
+      <PageHeader
         heading="Jots"
         text="Create and manage jots."
       >
         <JotCreateButton />
-      </DashboardHeader>
+      </PageHeader>
       <div className="divide-border-200 divide-y rounded-md border">
         <JotItem.Skeleton />
         <JotItem.Skeleton />
         <JotItem.Skeleton />
         <JotItem.Skeleton />
         <JotItem.Skeleton />
       </div>
-    </DashboardShell>
+    </PageShell>
   )
 }

app/(dashboard)/dashboard/page.tsx

@@ -4,10 +4,10 @@ import { authOptions } from "@/lib/auth"
 import { db } from "@/lib/db"
 import { getCurrentUser } from "@/lib/session"
 import { EmptyPlaceholder } from "@/components/empty-placeholder"
-import { DashboardHeader } from "@/components/header"
-import { JotCreateButton } from "@/components/jot-create-button"
-import { JotItem } from "@/components/jot-item"
-import { DashboardShell } from "@/components/shell"
+import { PageHeader } from "@/components/page-header"
+import { JotCreateButton } from "@/components/jots/jot-create-button"
+import { JotItem } from "@/components/jots/jot-item"
+import { PageShell } from "@/components/page-shell"
 
 export const metadata = {
   title: "Dashboard",
@@ -36,13 +36,13 @@ export default async function DashboardPage() {
   })
 
   return (
-    <DashboardShell>
-      <DashboardHeader
+    <PageShell>
+      <PageHeader
         heading="Jots"
         text="Create and manage jots."
       >
         <JotCreateButton />
-      </DashboardHeader>
+      </PageHeader>
       <div>
         {jots?.length ? (
           <div className="divide-y divide-border rounded-md border">
@@ -61,6 +61,6 @@ export default async function DashboardPage() {
           </EmptyPlaceholder>
         )}
       </div>
-    </DashboardShell>
+    </PageShell>
   )
 }

app/(editor)/editor/[taskId]/not-found.tsx → app/(jots)/jots/[jotId]/not-found.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link"
-
 import { buttonVariants } from "@/components/ui/button"
 import { EmptyPlaceholder } from "@/components/empty-placeholder"
 
@@ -9,9 +8,12 @@ export default function NotFound() {
       <EmptyPlaceholder.Icon name="warning" />
       <EmptyPlaceholder.Title>Uh oh! Not Found</EmptyPlaceholder.Title>
       <EmptyPlaceholder.Description>
-        This jot could not be found. Please try again.
+        This Jot could not be found. Please try again.
       </EmptyPlaceholder.Description>
-      <Link href="/dashboard" className={buttonVariants({ variant: "ghost" })}>
+      <Link
+        href="/jots"
+        className={buttonVariants({ variant: "ghost" })}
+      >
         Go to Dashboard
       </Link>
     </EmptyPlaceholder>

app/(editor)/editor/[taskId]/page.tsx → app/(jots)/jots/[jotId]/page.tsx

@@ -3,8 +3,8 @@ import { Jot, User } from "@prisma/client"
 import { authOptions } from "@/lib/auth"
 import { db } from "@/lib/db"
 import { getCurrentUser } from "@/lib/session"
-import DocumentEditor from "@/components/document-editor"
 import { MyValue } from "@/types/plate-types"
+import JotDetails from "@/components/jots/jot-details"
 
 async function getJotForUser(jotId: Jot["id"], userId: User["id"]) {
   return await db.jot.findFirst({
@@ -21,7 +21,6 @@ interface EditorPageProps {
 
 export default async function EditorPage({ params }: EditorPageProps) {
   const user = await getCurrentUser()
-
   if (!user) {
     redirect(authOptions?.pages?.signIn || "/login")
   }
@@ -32,14 +31,16 @@ export default async function EditorPage({ params }: EditorPageProps) {
   }
 
   return (
-    <DocumentEditor
-      jot={{
-        id: jot.id,
-        title: jot.title,
-        content: jot.content as MyValue,
-        createdAt: jot.createdAt,
-        published: jot.published,
-      }}
-    />
+    <div>
+      <JotDetails
+        jot={{
+          id: jot.id,
+          title: jot.title,
+          content: jot.content as MyValue,
+          createdAt: jot.createdAt,
+          published: jot.published,
+        }}
+      />
+    </div>
   )
 }

app/(jots)/jots/layout.tsx

@@ -35,7 +35,7 @@ export default async function JotsLayout({
         </div>
       </header>
 
-      <div className="grid flex-1 gap-12 md:grid-cols-[200px_1fr] px-10">
+      <div className="grid flex-1 gap-4 md:grid-cols-[200px_1fr] px-10">
         <aside className="hidden w-[200px] flex-col md:flex">
           <DashboardNav items={dashboardConfig.sidebarNav} />
         </aside>

app/(jots)/jots/loading.tsx

@@ -1,24 +1,24 @@
-import { DashboardHeader } from "@/components/header"
-import { JotCreateButton } from "@/components/jot-create-button"
-import { JotItem } from "@/components/jot-item"
-import { DashboardShell } from "@/components/shell"
+import { PageHeader } from "@/components/page-header"
+import { JotCreateButton } from "@/components/jots/jot-create-button"
+import { JotItem } from "@/components/jots/jot-item"
+import { PageShell } from "@/components/page-shell"
 
 export default function JotsLanding() {
   return (
-    <DashboardShell>
-      <DashboardHeader
+    <PageShell>
+      <PageHeader
         heading="Jots"
         text="Create and manage jots."
       >
         <JotCreateButton />
-      </DashboardHeader>
+      </PageHeader>
       <div className="divide-border-200 divide-y rounded-md border">
         <JotItem.Skeleton />
         <JotItem.Skeleton />
         <JotItem.Skeleton />
         <JotItem.Skeleton />
         <JotItem.Skeleton />
       </div>
-    </DashboardShell>
+    </PageShell>
   )
 }

app/(jots)/jots/page.tsx

@@ -4,10 +4,10 @@ import { authOptions } from "@/lib/auth"
 import { db } from "@/lib/db"
 import { getCurrentUser } from "@/lib/session"
 import { EmptyPlaceholder } from "@/components/empty-placeholder"
-import { DashboardHeader } from "@/components/header"
-import { JotCreateButton } from "@/components/jot-create-button"
-import { JotItem } from "@/components/jot-item"
-import { DashboardShell } from "@/components/shell"
+import { PageHeader } from "@/components/page-header"
+import { JotCreateButton } from "@/components/jots/jot-create-button"
+import { JotItem } from "@/components/jots/jot-item"
+import { PageShell } from "@/components/page-shell"
 
 export const metadata = {
   title: "Jots",
@@ -16,7 +16,6 @@ export const metadata = {
 
 export default async function JotsPage() {
   const user = await getCurrentUser()
-
   if (!user) {
     redirect(authOptions?.pages?.signIn || "/login")
   }
@@ -37,13 +36,13 @@ export default async function JotsPage() {
   })
 
   return (
-    <DashboardShell>
-      <DashboardHeader
+    <PageShell>
+      <PageHeader
         heading="Jots"
         text="Create and manage Jots."
       >
         <JotCreateButton />
-      </DashboardHeader>
+      </PageHeader>
       <div>
         {jots?.length ? (
           <div className="divide-y divide-border rounded-md border">
@@ -62,6 +61,6 @@ export default async function JotsPage() {
           </EmptyPlaceholder>
         )}
       </div>
-    </DashboardShell>
+    </PageShell>
   )
 }

app/(projects)/projects/layout.tsx

@@ -35,7 +35,7 @@ export default async function ProjectsLayout({
         </div>
       </header>
 
-      <div className="grid flex-1 gap-12 md:grid-cols-[200px_1fr] px-10">
+      <div className="grid flex-1 gap-4 md:grid-cols-[200px_1fr] px-10">
         <aside className="hidden w-[200px] flex-col md:flex">
           <DashboardNav items={dashboardConfig.sidebarNav} />
         </aside>

app/(projects)/projects/loading.tsx

@@ -1,24 +1,24 @@
-import { DashboardHeader } from "@/components/header"
-import { JotCreateButton } from "@/components/jot-create-button"
-import { JotItem } from "@/components/jot-item"
-import { DashboardShell } from "@/components/shell"
+import { PageHeader } from "@/components/page-header"
+import { JotCreateButton } from "@/components/jots/jot-create-button"
+import { JotItem } from "@/components/jots/jot-item"
+import { PageShell } from "@/components/page-shell"
 
 export default function ProjectsLanding() {
   return (
-    <DashboardShell>
-      <DashboardHeader
+    <PageShell>
+      <PageHeader
         heading="Projects"
         text="Create and manage projects."
       >
         <JotCreateButton />
-      </DashboardHeader>
+      </PageHeader>
       <div className="divide-border-200 divide-y rounded-md border">
         <JotItem.Skeleton />
         <JotItem.Skeleton />
         <JotItem.Skeleton />
         <JotItem.Skeleton />
         <JotItem.Skeleton />
       </div>
-    </DashboardShell>
+    </PageShell>
   )
 }

app/(projects)/projects/page.tsx

@@ -4,17 +4,17 @@ import { authOptions } from "@/lib/auth"
 import { db } from "@/lib/db"
 import { getCurrentUser } from "@/lib/session"
 import { EmptyPlaceholder } from "@/components/empty-placeholder"
-import { DashboardHeader } from "@/components/header"
-import { JotCreateButton } from "@/components/jot-create-button"
-import { JotItem } from "@/components/jot-item"
-import { DashboardShell } from "@/components/shell"
+import { PageHeader } from "@/components/page-header"
+import { JotCreateButton } from "@/components/jots/jot-create-button"
+import { JotItem } from "@/components/jots/jot-item"
+import { PageShell } from "@/components/page-shell"
 
 export const metadata = {
   title: "Projects",
   description: "Create and manage Projects.",
 }
 
-export default async function TasksPage() {
+export default async function ProjectsPage() {
   const user = await getCurrentUser()
 
   if (!user) {
@@ -37,13 +37,13 @@ export default async function TasksPage() {
   })
 
   return (
-    <DashboardShell>
-      <DashboardHeader
+    <PageShell>
+      <PageHeader
         heading="Projects"
         text="Create and manage Projects."
       >
         <JotCreateButton />
-      </DashboardHeader>
+      </PageHeader>
       <div>
         {jots?.length ? (
           <div className="divide-y divide-border rounded-md border">
@@ -62,6 +62,6 @@ export default async function TasksPage() {
           </EmptyPlaceholder>
         )}
       </div>
-    </DashboardShell>
+    </PageShell>
   )
 }

app/(settings)/settings/layout.tsx

@@ -35,7 +35,7 @@ export default async function SettingLayout({
         </div>
       </header>
 
-      <div className="grid flex-1 gap-12 md:grid-cols-[200px_1fr] px-10">
+      <div className="grid flex-1 gap-4 md:grid-cols-[200px_1fr] px-10">
         <aside className="hidden w-[200px] flex-col md:flex">
           <DashboardNav items={dashboardConfig.sidebarNav} />
         </aside>

app/(settings)/settings/loading.tsx

@@ -1,17 +1,17 @@
 import { CardSkeleton } from "@/components/card-skeleton"
-import { DashboardHeader } from "@/components/header"
-import { DashboardShell } from "@/components/shell"
+import { PageHeader } from "@/components/page-header"
+import { PageShell } from "@/components/page-shell"
 
 export default function SettingsLoading() {
   return (
-    <DashboardShell>
-      <DashboardHeader
+    <PageShell>
+      <PageHeader
         heading="Settings"
         text="Manage account and website settings."
       />
       <div className="grid gap-10">
         <CardSkeleton />
       </div>
-    </DashboardShell>
+    </PageShell>
   )
 }

app/(settings)/settings/page.tsx

@@ -2,8 +2,8 @@ import { redirect } from "next/navigation"
 
 import { authOptions } from "@/lib/auth"
 import { getCurrentUser } from "@/lib/session"
-import { DashboardHeader } from "@/components/header"
-import { DashboardShell } from "@/components/shell"
+import { PageHeader } from "@/components/page-header"
+import { PageShell } from "@/components/page-shell"
 import { UserNameForm } from "@/components/user-name-form"
 
 export const metadata = {
@@ -19,14 +19,14 @@ export default async function SettingsPage() {
   }
 
   return (
-    <DashboardShell>
-      <DashboardHeader
+    <PageShell>
+      <PageHeader
         heading="Settings"
         text="Manage account and website settings."
       />
       <div className="grid gap-10">
         <UserNameForm user={{ id: user.id, name: user.name || "" }} />
       </div>
-    </DashboardShell>
+    </PageShell>
   )
 }