create-ej-app 26.0.0 → 27.0.0

package/template/nextjs/src/app/(marketing)/legal.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react'
+import { siteConfig } from '~/lib/siteConfig'
+
+/** Page shell shared by the privacy policy and the terms of service. */
+export function LegalPage({
+  title,
+  children
+}: {
+  title: string
+  children: ReactNode
+}) {
+  return (
+    <article className="container mx-auto max-w-4xl px-4 py-12 md:px-0">
+      <h1 className="mb-8 text-4xl font-bold">{title}</h1>
+      <div className="text-muted-foreground space-y-6 leading-relaxed">
+        <p className="text-foreground font-medium">
+          Last updated: {siteConfig.legal.lastUpdated}
+        </p>
+        {children}
+      </div>
+    </article>
+  )
+}
+
+/** One numbered section of a legal page. Number the title yourself. */
+export function LegalSection({
+  title,
+  children
+}: {
+  title: string
+  children: ReactNode
+}) {
+  return (
+    <section className="space-y-4">
+      <h2 className="text-foreground mt-8 text-2xl font-semibold">{title}</h2>
+      {children}
+    </section>
+  )
+}
+
+/** Bulleted list styled for legal page body copy. */
+export function LegalList({ children }: { children: ReactNode }) {
+  return <ul className="list-disc space-y-2 pl-6">{children}</ul>
+}
+
+const linkClassName =
+  'text-primary focus-visible:ring-ring/50 rounded-sm underline underline-offset-4 focus-visible:ring-3 focus-visible:outline-none'
+
+/** Inline mailto link to the support address. */
+export function ContactEmailLink() {
+  return (
+    <a href={`mailto:${siteConfig.contact.email}`} className={linkClassName}>
+      {siteConfig.contact.email}
+    </a>
+  )
+}

package/template/nextjs/src/app/(marketing)/page.tsx

@@ -1,3 +1,21 @@
-export default async function HomePage() {
-  return <div>Hello, World!</div>
+import Link from 'next/link'
+import { Button } from '~/components/ui/button'
+import { siteConfig } from '~/lib/siteConfig'
+
+export default function HomePage() {
+  return (
+    <section className="container flex flex-col items-center gap-6 py-24 text-center">
+      <h1 className="max-w-2xl text-4xl font-bold tracking-tight sm:text-5xl">
+        {siteConfig.name}
+      </h1>
+      <p className="text-muted-foreground max-w-xl text-lg">
+        {siteConfig.description}
+      </p>
+      <div className="flex flex-wrap justify-center gap-3">
+        <Button asChild size="lg">
+          <Link href="/login">Get Started</Link>
+        </Button>
+      </div>
+    </section>
+  )
 }

package/template/nextjs/src/app/(marketing)/privacy/page.tsx

@@ -1,3 +1,44 @@
-export default async function PrivacyPage() {
-  return <div>Hello, World!</div>
+import type { Metadata } from 'next'
+import { siteConfig } from '~/lib/siteConfig'
+import { ContactEmailLink, LegalList, LegalPage, LegalSection } from '../legal'
+
+export const metadata: Metadata = {
+  title: 'Privacy Policy',
+  description: `How ${siteConfig.name} collects, uses, and protects your data.`
+}
+
+// Starting point only. Have this reviewed before you launch, and update it
+// with `siteConfig.legal.lastUpdated` whenever the product's data use changes.
+export default function PrivacyPage() {
+  return (
+    <LegalPage title="Privacy Policy">
+      <p>
+        This policy explains what {siteConfig.name} collects, why, and what you
+        can do about it.
+      </p>
+
+      <LegalSection title="1. Information You Give Us">
+        <LegalList>
+          <li>
+            <strong>Account details</strong>: your name and email address. When
+            you sign in with Google or GitHub, that provider also shares your
+            profile picture.
+          </li>
+        </LegalList>
+      </LegalSection>
+
+      <LegalSection title="2. How We Use It">
+        <p>
+          We use this information to run your account and send the emails you
+          ask for.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="3. Contact">
+        <p>
+          Email <ContactEmailLink /> with questions about your data.
+        </p>
+      </LegalSection>
+    </LegalPage>
+  )
 }

package/template/nextjs/src/app/(marketing)/terms/page.tsx

@@ -1,3 +1,34 @@
-export default async function TermsPage() {
-  return <div>Hello, World!</div>
+import type { Metadata } from 'next'
+import { siteConfig } from '~/lib/siteConfig'
+import { ContactEmailLink, LegalPage, LegalSection } from '../legal'
+
+export const metadata: Metadata = {
+  title: 'Terms of Service',
+  description: `The terms that apply when you use ${siteConfig.name}.`
+}
+
+// Starting point only. Have this reviewed before you launch, and update it
+// with `siteConfig.legal.lastUpdated` whenever the product's behavior changes.
+export default function TermsPage() {
+  return (
+    <LegalPage title="Terms of Service">
+      <p>
+        These terms apply when you use {siteConfig.name}. By creating an
+        account, you agree to them.
+      </p>
+
+      <LegalSection title="1. Your Account">
+        <p>
+          Keep access to your email inbox secure: anyone who can read it can
+          sign in as you.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="2. Contact">
+        <p>
+          Email <ContactEmailLink /> with questions about these terms.
+        </p>
+      </LegalSection>
+    </LegalPage>
+  )
 }

package/template/nextjs/src/app/error.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import { useEffect } from 'react'
+import { RouteError } from '~/components/route-error'
+
+/**
+ * Root segment error boundary.
+ *
+ * Catches runtime errors in pages and nested layouts under the root layout.
+ * Does not catch errors thrown in the root layout itself; see `global-error.tsx`.
+ */
+export default function Error({
+  error,
+  unstable_retry
+}: {
+  error: Error & { digest?: string }
+  unstable_retry: () => void
+}) {
+  const pathname = usePathname()
+  const homeHref =
+    pathname?.startsWith('/admin') && pathname !== '/admin' ? '/admin' : '/'
+  const homeLabel = homeHref === '/admin' ? 'Back to Admin' : 'Go Home'
+
+  useEffect(() => {
+    console.error('Route error boundary:', error)
+  }, [error])
+
+  return (
+    <RouteError
+      error={error}
+      onRetry={unstable_retry}
+      homeHref={homeHref}
+      homeLabel={homeLabel}
+    />
+  )
+}

package/template/nextjs/src/app/fonts/index.ts

@@ -0,0 +1,60 @@
+/**
+ * @fileoverview Global font definitions shared across all route groups.
+ *
+ * Fonts are defined here in a single module so that `next/font/local` generates
+ * a stable CSS module hash regardless of which layout imports them. Defining
+ * fonts inside individual route-group layouts (e.g. `(marketing)` or `(admin)`)
+ * causes the server and client to produce different class name hashes, leading
+ * to React hydration mismatches.
+ *
+ * Usage:
+ *   import { geistMono, geistSans } from '~/app/fonts'
+ *   <body className={`${geistSans.variable} ${geistMono.variable}`}>
+ *
+ * @module app/fonts/index
+ */
+
+import localFont from 'next/font/local'
+
+/**
+ * Geist Sans - primary variable font for body and UI text.
+ *
+ * Exposed as the CSS custom property `--font-geist-sans` so it can be
+ * referenced in Tailwind via `font-sans`.
+ *
+ * @see https://vercel.com/font/sans
+ */
+export const geistSans = localFont({
+  src: '../fonts/geist-sans/Geist-Variable.woff2',
+  variable: '--font-geist-sans',
+  weight: '100 900'
+})
+
+/**
+ * Geist Mono - monospace variable font for code blocks, badges, and
+ * any UI element that benefits from fixed-width rendering.
+ *
+ * Exposed as the CSS custom property `--font-geist-mono`.
+ *
+ * `adjustFontFallback` is disabled because the automatic metric adjustment
+ * produces undesirable layout shifts with the custom fallback stack below.
+ *
+ * @see https://vercel.com/font/mono
+ */
+export const geistMono = localFont({
+  src: '../fonts/geist-mono/GeistMono-Variable.woff2',
+  variable: '--font-geist-mono',
+  adjustFontFallback: false,
+  fallback: [
+    'ui-monospace',
+    'SFMono-Regular',
+    'Roboto Mono',
+    'Menlo',
+    'Monaco',
+    'Liberation Mono',
+    'DejaVu Sans Mono',
+    'Courier New',
+    'monospace'
+  ],
+  weight: '100 900'
+})

package/template/nextjs/src/app/global-error.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useEffect } from 'react'
+import { RouteError } from '~/components/route-error'
+import { siteConfig } from '~/lib/siteConfig'
+import { geistMono, geistSans } from './fonts'
+import './globals.css'
+
+/**
+ * Root layout error boundary.
+ *
+ * Replaces the entire root layout when an error is thrown there.
+ * Must define its own document shell (`html` / `body`) and styles.
+ */
+export default function GlobalError({
+  error,
+  unstable_retry
+}: {
+  error: Error & { digest?: string }
+  unstable_retry: () => void
+}) {
+  useEffect(() => {
+    console.error('Global error boundary:', error)
+  }, [error])
+
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${geistSans.variable} ${geistMono.variable}`}
+    >
+      <body>
+        <title>This Page Failed to Load | {siteConfig.name}</title>
+        <RouteError error={error} onRetry={unstable_retry} />
+      </body>
+    </html>
+  )
+}

package/template/nextjs/src/app/globals.css

@@ -28,6 +28,14 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -84,6 +92,13 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+
+  --success: oklch(0.552 0.152 149.579);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.574 0.188 70.08);
+  --warning-foreground: oklch(1 0 0);
+  --info: oklch(0.569 0.165 254.624);
+  --info-foreground: oklch(1 0 0);
 }
 
 .dark {
@@ -119,6 +134,13 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+
+  --success: oklch(0.723 0.192 149.579);
+  --success-foreground: oklch(0.145 0 0);
+  --warning: oklch(0.769 0.188 70.08);
+  --warning-foreground: oklch(0.205 0 0);
+  --info: oklch(0.707 0.165 254.624);
+  --info-foreground: oklch(0.205 0 0);
 }
 
 @layer base {
@@ -128,6 +150,7 @@
 
   html {
     @apply font-sans antialiased;
+    scroll-behavior: smooth;
   }
 
   body {
@@ -138,6 +161,12 @@
   [role='button']:not([disabled]) {
     cursor: pointer;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
 }
 
 @theme inline {

package/template/nextjs/src/app/layout.tsx

@@ -1,27 +1,49 @@
-import type { Metadata } from 'next'
-import { Geist, Geist_Mono } from 'next/font/google'
+/**
+ * @fileoverview Root layout: document shell, fonts, metadata, and the
+ * client providers every page shares (TanStack Query, theme, tooltips,
+ * toasts, and the navigation progress bar).
+ *
+ * @module app/layout
+ */
+
+import type { Metadata, Viewport } from 'next'
 import { Loader } from '~/components/loader'
 import { ReactQueryProvider } from '~/components/react-query-provider'
 import { ScreenSize } from '~/components/screen-size'
 import { ThemeProvider } from '~/components/theme-provider'
 import { Toaster } from '~/components/ui/sonner'
+import { TooltipProvider } from '~/components/ui/tooltip'
 import { env } from '~/env'
 import { siteConfig } from '~/lib/siteConfig'
+import { geistMono, geistSans } from './fonts'
 import './globals.css'
 
-const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin']
-})
-
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin']
-})
-
 export const metadata: Metadata = {
-  title: siteConfig.name,
-  description: siteConfig.description
+  metadataBase: new URL(env.BETTER_AUTH_URL),
+  title: {
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`
+  },
+  description: siteConfig.description,
+  applicationName: siteConfig.name,
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    siteName: siteConfig.name,
+    description: siteConfig.description
+  },
+  twitter: {
+    card: 'summary_large_image',
+    description: siteConfig.description
+  }
+}
+
+/** Browser chrome colors, matching `--background` in globals.css. */
+export const viewport: Viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+    { media: '(prefers-color-scheme: dark)', color: '#0a0a0a' }
+  ]
 }
 
 export default function RootLayout({
@@ -38,13 +60,18 @@ export default function RootLayout({
       <body>
         <ReactQueryProvider>
           <ThemeProvider>
-            <Loader />
-            {children}
-            {env.APP_ENV === 'development' ? <ScreenSize /> : null}
-            <Toaster />
+            <TooltipProvider>
+              <Loader />
+              {children}
+              {env.APP_ENV === 'development' ? <ScreenSize /> : null}
+              <Toaster />
+            </TooltipProvider>
           </ThemeProvider>
         </ReactQueryProvider>
       </body>
     </html>
   )
 }
+
+/** Renders every request dynamically, so env-driven metadata stays current. */
+export const dynamic = 'force-dynamic'

package/template/nextjs/src/app/not-found.tsx

@@ -1,12 +1,34 @@
+/**
+ * @fileoverview 404 Not Found Page
+ *
+ * Global catch-all page displayed when a route is not found.
+ * Redirects users back to the appropriate home page based on the current route context.
+ *
+ * **Behavior:**
+ * - Admin routes (/admin/*) redirect to /admin
+ * - All other routes redirect to /
+ *
+ * @module app/not-found
+ */
+
 'use client'
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { Button } from '~/components/ui/button'
 
+/**
+ * Not Found Page Component
+ *
+ * Displays a 404 error message with context-aware home button.
+ * Uses the current pathname to determine the appropriate home route.
+ *
+ * @returns {JSX.Element} 404 error page with navigation button
+ */
 export default function NotFound() {
   const pathname = usePathname()
-  const homeRoute = pathname?.startsWith('/admin') ? '/admin' : '/'
+  const homeRoute =
+    pathname?.startsWith('/admin') && pathname !== '/admin' ? '/admin' : '/'
 
   return (
     <main className="bg-background text-foreground flex min-h-screen flex-col">
@@ -15,10 +37,10 @@ export default function NotFound() {
           <h1 className="text-foreground mb-2 text-6xl font-bold">404</h1>
           <p className="text-muted-foreground mb-8 text-xl">Page not found</p>
           <p className="text-muted-foreground mb-8 max-w-md text-base">
-            The page you're looking for doesn't exist.
+            The page you&apos;re looking for doesn&apos;t exist.
           </p>
           <Button asChild>
-            <Link href={homeRoute}>Return to Home</Link>
+            <Link href={homeRoute}>Return Home</Link>
           </Button>
         </div>
       </section>

package/template/nextjs/src/app/robots.ts

@@ -0,0 +1,29 @@
+import type { MetadataRoute } from 'next'
+import { env } from '~/env'
+
+/** Renders every request dynamically, so the environment check is live. */
+export const dynamic = 'force-dynamic'
+
+/**
+ * robots.txt. Staging blocks every crawler; production keeps signed-in
+ * surfaces and the API out of search results.
+ */
+export default function robots(): MetadataRoute.Robots {
+  if (env.APP_ENV === 'staging') {
+    return { rules: [{ userAgent: '*', disallow: '/' }] }
+  }
+
+  const baseUrl = env.BETTER_AUTH_URL
+
+  return {
+    rules: [
+      {
+        userAgent: '*',
+        allow: '/',
+        disallow: ['/api/', '/admin', '/app', '/profile']
+      }
+    ],
+    sitemap: `${baseUrl}/sitemap.xml`,
+    host: baseUrl
+  }
+}

package/template/nextjs/src/app/sitemap.ts

@@ -0,0 +1,21 @@
+import type { MetadataRoute } from 'next'
+import { env } from '~/env'
+
+export const dynamic = 'force-dynamic'
+
+/** Public pages only. Staging returns an empty sitemap. */
+export default function sitemap(): MetadataRoute.Sitemap {
+  if (env.APP_ENV === 'staging') return []
+
+  const baseUrl = env.BETTER_AUTH_URL
+  const lastModified = new Date()
+
+  const routes = ['/', '/privacy', '/terms', '/login']
+
+  return routes.map(path => ({
+    url: `${baseUrl}${path === '/' ? '' : path}`,
+    lastModified,
+    changeFrequency: path === '/' ? 'weekly' : 'monthly',
+    priority: path === '/' ? 1 : 0.7
+  }))
+}

package/template/nextjs/src/components/confirm-dialog.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { Loader2 } from 'lucide-react'
+import type { ReactNode } from 'react'
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '~/components/ui/alert-dialog'
+import { Button } from '~/components/ui/button'
+
+/**
+ * Controlled confirmation for destructive or hard-to-undo actions. Use it
+ * instead of `window.confirm`.
+ *
+ * The dialog stays open while `pending` is true; close it from the
+ * caller's success handler by clearing whatever drives `open`.
+ *
+ * @example
+ * <ConfirmDialog
+ *   open={target !== null}
+ *   onOpenChange={open => !open && setTarget(null)}
+ *   title="Delete User"
+ *   description="This permanently deletes the account."
+ *   confirmLabel="Delete User"
+ *   pending={isDeleting}
+ *   onConfirm={() => deleteUser(target)}
+ * />
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  pending = false,
+  destructive = true,
+  onConfirm
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description: ReactNode
+  confirmLabel: string
+  pending?: boolean
+  destructive?: boolean
+  onConfirm: () => void
+}) {
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={next => {
+        if (!pending) onOpenChange(next)
+      }}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+          <Button
+            variant={destructive ? 'destructive' : 'default'}
+            disabled={pending}
+            onClick={onConfirm}
+          >
+            {pending ? <Loader2 className="animate-spin" /> : null}
+            {confirmLabel}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}