@voltro/cli 0.28.0 → 0.30.0

package/templates/apps/frontend-saas/src/pages/(marketing)/layout.tsx

@@ -0,0 +1,30 @@
+// Layout for the SILENT route group `(marketing)/`. The parens mean the
+// directory name never appears in a URL — the pages inside are `/` and
+// `/login`. It gives the public pages a marketing header distinct from the
+// dashboard's sidebar shell.
+import type { ReactNode } from 'react'
+import { T, useLocale, useT } from '@voltro/i18n'
+import { LocaleSwitcher } from '@voltro/ui-shadcn'
+import { APP_NAME } from '../../config'
+
+const LOCALES = [
+  { code: 'en', label: 'English' },
+  { code: 'de', label: 'Deutsch' },
+]
+
+export default function MarketingLayout({ children }: { readonly children: ReactNode }): ReactNode {
+  const locale = useLocale()
+  const langLabel = useT('lang.label')
+  return (
+    <div className="marketing">
+      <header>
+        <a className="brand" href="/">{APP_NAME}</a>
+        <span className="spacer" />
+        <a href="/dashboard"><T id="nav.dashboard" /></a>
+        <a href="/login"><T id="nav.signIn" /></a>
+        <LocaleSwitcher locales={LOCALES} current={locale} ariaLabel={langLabel} />
+      </header>
+      {children}
+    </div>
+  )
+}

package/templates/apps/frontend-saas/src/pages/(marketing)/login/page.test.tsx

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+//
+// The auth form. We assert config + that it renders email/password fields and
+// toggles between sign-in and sign-up. The network submit (CSRF + POST /auth/*)
+// is exercised against a running api by `voltro dev`, not unit-mocked here.
+
+import { afterEach, describe, expect, test } from 'vitest'
+import { act, createElement, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { I18nProvider } from '@voltro/i18n'
+import enCatalog from '../../../locales/en'
+
+const { default: Login, meta, renderMode } = await import('./page')
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+let container: HTMLDivElement
+let root: Root
+
+const render = (node: ReactNode): void => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  act(() => {
+    root = createRoot(container)
+    root.render(
+      createElement(I18nProvider, { locale: 'en', messages: enCatalog, defaultLocale: 'en', children: node }),
+    )
+  })
+}
+
+afterEach(() => {
+  if (root) act(() => root.unmount())
+  container?.remove()
+  document.body.innerHTML = ''
+})
+
+describe('login — config', () => {
+  test('is a static page titled Sign in', () => {
+    expect(renderMode).toBe('static')
+    expect(meta({ locale: 'en' }).title).toBe('Sign in')
+  })
+})
+
+describe('login — form', () => {
+  test('renders email + password inputs and defaults to sign-in', () => {
+    render(createElement(Login))
+    expect(container.querySelector('input[type="email"]')).not.toBeNull()
+    expect(container.querySelector('input[type="password"]')).not.toBeNull()
+    expect(container.querySelector('h1')?.textContent).toBe('Sign in')
+  })
+
+  test('toggling switches to the create-account heading', () => {
+    render(createElement(Login))
+    const toggle = container.querySelector('.link')!
+    act(() => { toggle.dispatchEvent(new MouseEvent('click', { bubbles: true })) })
+    expect(container.querySelector('h1')?.textContent).toBe('Create your account')
+  })
+})

package/templates/apps/frontend-saas/src/pages/(marketing)/login/page.tsx

@@ -0,0 +1,96 @@
+// Sign in / sign up — URL `/login`. A REAL auth form: it POSTs to the api's
+// `/auth/*` routes (contributed by @voltro/plugin-auth on the sibling api),
+// which set the HttpOnly session cookie. State-changing auth routes are
+// CSRF-protected, so we fetch a token first. On success we do a FULL navigation
+// (`window.location.assign`) rather than a client one, so the dashboard's SSR
+// auth gate re-runs with the freshly-set cookie.
+import type { ReactNode } from 'react'
+import { useState, type FormEvent } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { T, useT } from '@voltro/i18n'
+import { getCatalog } from '../../../locales/index'
+
+export const renderMode = 'static' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.login.title'],
+})
+
+type Mode = 'signIn' | 'signUp'
+
+// One round-trip: get a CSRF token, then POST the credentials with it. Returns
+// true on a 2xx (cookie set), false otherwise.
+async function submitAuth(mode: Mode, email: string, password: string): Promise<boolean> {
+  const csrf = (await fetch('/auth/csrf').then((r) => r.json())) as { csrfToken: string }
+  const path = mode === 'signUp' ? '/auth/sign-up' : '/auth/sign-in'
+  const res = await fetch(path, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json', 'x-csrf-token': csrf.csrfToken },
+    body: JSON.stringify({ email, password }),
+  })
+  return res.ok
+}
+
+export default function Login(): ReactNode {
+  const [mode, setMode] = useState<Mode>('signIn')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [pending, setPending] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const emailLabel = useT('auth.email')
+  const passwordLabel = useT('auth.password')
+
+  const onSubmit = (e: FormEvent): void => {
+    e.preventDefault()
+    setPending(true)
+    setFailed(false)
+    void submitAuth(mode, email, password)
+      .then((ok) => {
+        if (ok) {
+          const from = new URLSearchParams(window.location.search).get('from') ?? '/dashboard'
+          window.location.assign(from)
+        } else {
+          setFailed(true)
+          setPending(false)
+        }
+      })
+      .catch(() => {
+        setFailed(true)
+        setPending(false)
+      })
+  }
+
+  return (
+    <section className="hero">
+      <h1><T id={mode === 'signUp' ? 'auth.signUp.heading' : 'auth.signIn.heading'} /></h1>
+      <form className="auth-form" onSubmit={onSubmit}>
+        <label>
+          <span><T id="auth.email" /></span>
+          <input
+            type="email" required aria-label={emailLabel} value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+        </label>
+        <label>
+          <span><T id="auth.password" /></span>
+          <input
+            type="password" required aria-label={passwordLabel} value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </label>
+        {failed ? <p className="error-text"><T id="auth.error" /></p> : null}
+        <button type="submit" className="btn" disabled={pending}>
+          <T id={pending ? 'auth.pending' : mode === 'signUp' ? 'auth.signUp.submit' : 'auth.signIn.submit'} />
+        </button>
+      </form>
+      <p style={{ marginTop: '1rem' }}>
+        <button
+          type="button" className="link"
+          onClick={() => { setMode((m) => (m === 'signIn' ? 'signUp' : 'signIn')); setFailed(false) }}
+        >
+          <T id={mode === 'signIn' ? 'auth.toggle.toSignUp' : 'auth.toggle.toSignIn'} />
+        </button>
+      </p>
+    </section>
+  )
+}

package/templates/apps/frontend-saas/src/pages/(marketing)/page.tsx

@@ -0,0 +1,27 @@
+// Public landing — URL `/` (the `(marketing)` group is silent). Static content,
+// so it pre-renders to flat HTML and ships zero JS by default.
+import type { ReactNode } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { T } from '@voltro/i18n'
+import { getCatalog } from '../../locales'
+
+export const renderMode = 'static' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.landing.title'],
+  description: getCatalog(locale)['meta.landing.description'],
+})
+
+export default function Landing(): ReactNode {
+  return (
+    <section className="hero">
+      <h1><T id="landing.heading" /></h1>
+      <p className="muted">
+        <T id="landing.body" values={{ code: (c: ReactNode) => <code>{c}</code> }} />
+      </p>
+      <p style={{ marginTop: '1.5rem' }}>
+        <a className="btn" href="/login"><T id="landing.cta" /></a>
+      </p>
+    </section>
+  )
+}

package/templates/apps/frontend-saas/src/pages/dashboard/billing/page.tsx

@@ -0,0 +1,72 @@
+// Billing — URL `/dashboard/billing`. Reads the tenant's subscription live
+// (`billing.subscription`, contributed by @voltro/plugin-billing) and drives the
+// two write paths the plugin exposes: `billing.startCheckout` (upgrade to Pro →
+// redirect to the provider's hosted checkout; the `mock` provider returns a
+// dev URL) and `billing.changeSeats` (raise the seat quantity). No subscription
+// row yet means the tenant is on the implicit free plan.
+import type { ReactNode } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { useSubscription, useAction } from '@voltro/client'
+import { T, useT } from '@voltro/i18n'
+import { getCatalog } from '../../../locales/index'
+import type { SubscriptionState } from '../../../lib/api'
+
+export const renderMode = 'ssr' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.billing.title'],
+})
+
+interface CheckoutInput { plan: string; successUrl: string; cancelUrl: string }
+interface SeatsInput { quantity: number }
+
+export default function Billing(): ReactNode {
+  const { data } = useSubscription<SubscriptionState>('app', 'billing.subscription')
+  const checkout = useAction<CheckoutInput, { url: string }>('app', 'billing.startCheckout')
+  const seats = useAction<SeatsInput, unknown>('app', 'billing.changeSeats')
+
+  const sub = data?.subscription ?? null
+  const planLabel = useT('billing.plan.free')
+  const plan = sub?.plan ?? planLabel
+  const quantity = sub?.quantity ?? 1
+  const busy = checkout.pending || seats.pending
+
+  const onUpgrade = (): void => {
+    const here = typeof window === 'undefined' ? '/dashboard/billing' : window.location.href
+    void checkout.run({ plan: 'pro', successUrl: here, cancelUrl: here })
+      .then((r) => { if (r && typeof window !== 'undefined') window.location.assign(r.url) })
+      .catch(() => { /* surfaced via checkout.error */ })
+  }
+
+  const onAddSeat = (): void => {
+    void seats.run({ quantity: quantity + 1 }).catch(() => { /* surfaced via seats.error */ })
+  }
+
+  return (
+    <section>
+      <h1><T id="billing.heading" /></h1>
+
+      <dl className="facts">
+        <dt><T id="billing.plan.label" /></dt>
+        <dd>{plan}</dd>
+        <dt><T id="billing.status.label" /></dt>
+        <dd>{sub?.status ?? '—'}</dd>
+        <dt><T id="billing.seats.label" /></dt>
+        <dd>{quantity}</dd>
+      </dl>
+
+      <div className="paywall" style={{ marginTop: '1.5rem' }}>
+        <strong><T id="billing.upgrade.title" /></strong>
+        <p className="muted"><T id="billing.upgrade.body" /></p>
+        <div className="row">
+          <button type="button" className="btn" disabled={busy} onClick={onUpgrade}>
+            <T id={checkout.pending ? 'billing.pending' : 'billing.upgrade.cta'} />
+          </button>
+          <button type="button" className="btn ghost" disabled={busy} onClick={onAddSeat}>
+            <T id={seats.pending ? 'billing.pending' : 'billing.seats.add'} />
+          </button>
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/apps/frontend-saas/src/pages/dashboard/error.tsx

@@ -0,0 +1,20 @@
+// Error boundary scoped to the /dashboard subtree. A render error (or a loader
+// rejection that ISN'T a RedirectError / NotFoundError) bubbles to the nearest
+// `error.tsx` — this one. `reset` re-runs the failed segment.
+import type { ReactNode } from 'react'
+import type { ErrorBoundaryProps } from '@voltro/web'
+import { T } from '@voltro/i18n'
+
+export default function DashboardError({ error, reset }: ErrorBoundaryProps): ReactNode {
+  return (
+    <div className="dash">
+      <main>
+        <h1><T id="error.heading" /></h1>
+        <p className="muted">{String(error)}</p>
+        <p style={{ marginTop: '1rem' }}>
+          <button type="button" className="btn" onClick={reset}><T id="error.retry" /></button>
+        </p>
+      </main>
+    </div>
+  )
+}

package/templates/apps/frontend-saas/src/pages/dashboard/layout.test.tsx

@@ -0,0 +1,32 @@
+// The dashboard auth GATE, tested at the loader. Server-side (a `query` fn is
+// present) it asks the api's `session.me`: an anonymous identity must throw
+// RedirectError to /login, a `user` identity resolves with the tenant. On a
+// client navigation (`query` undefined) it must resolve permissively (the entry
+// load already gated; the HttpOnly cookie isn't readable in JS).
+
+import { describe, expect, test, vi } from 'vitest'
+import { RedirectError } from '@voltro/web'
+import { loader } from './layout'
+import type { Identity } from '../../lib/api'
+
+const queryReturning = (identity: Identity) =>
+  vi.fn(async (_tag: string, _input: unknown) => identity as unknown)
+
+describe('dashboard gate — loader', () => {
+  test('redirects an anonymous caller to /login', async () => {
+    const query = queryReturning({ type: 'anonymous', id: null, tenantId: null })
+    await expect(loader({ query } as never)).rejects.toBeInstanceOf(RedirectError)
+    expect(query).toHaveBeenCalledWith('session.me', {})
+  })
+
+  test('lets a signed-in user through and returns the tenant', async () => {
+    const query = queryReturning({ type: 'user', id: 'u_1', tenantId: 'acme' })
+    const data = await loader({ query } as never)
+    expect(data).toEqual({ tenantId: 'acme' })
+  })
+
+  test('client navigation (no server query fn) resolves without re-gating', async () => {
+    const data = await loader({ query: undefined } as never)
+    expect(data).toEqual({ tenantId: null })
+  })
+})

package/templates/apps/frontend-saas/src/pages/dashboard/layout.tsx

@@ -0,0 +1,69 @@
+// The dashboard shell — and the AUTH GATE. This nested layout wraps every page
+// under `/dashboard`, and its `loader` runs server-side BEFORE the pages render.
+// It asks the api who the caller is (`session.me`) and throws RedirectError to
+// /login for anyone not signed in. The pages under here are `renderMode: 'ssr'`
+// precisely so this runs per request — a `static` page can't redirect
+// per-visitor, and the build rejects a RedirectError there.
+import type { ReactNode } from 'react'
+import { RedirectError, useLoaderData, useLocation, type LoaderFn } from '@voltro/web'
+import { T, useLocale, useT } from '@voltro/i18n'
+import { LocaleSwitcher } from '@voltro/ui-shadcn'
+import { APP_NAME } from '../../config'
+import type { Identity } from '../../lib/api'
+
+const LOCALES = [
+  { code: 'en', label: 'English' },
+  { code: 'de', label: 'Deutsch' },
+]
+
+interface DashboardData {
+  readonly tenantId: string | null
+}
+
+export const loader: LoaderFn<DashboardData> = async ({ query }) => {
+  // `query` is present ONLY server-side (the SSR full-page load). There, ask the
+  // api's `session.me` — it forwards the request's session cookie, so the SAME
+  // Subject resolves as the WS path — and bounce an anonymous caller to /login.
+  if (query) {
+    const me = await query<Identity>('session.me', {})
+    if (me.type !== 'user') {
+      throw new RedirectError('/login?from=/dashboard')
+    }
+    return { tenantId: me.tenantId }
+  }
+  // Client-side navigation within /dashboard: the entry load already gated, and
+  // every rpc/subscription is independently session-authed on the server (the
+  // HttpOnly cookie isn't readable in JS), so we don't re-check here.
+  return { tenantId: null }
+}
+
+export default function DashboardLayout({ children }: { readonly children: ReactNode }): ReactNode {
+  useLoaderData<DashboardData>()
+  const pathname = useLocation()
+  const locale = useLocale()
+  const langLabel = useT('lang.label')
+  const navItem = (href: string, label: ReactNode): ReactNode => (
+    <a href={href} aria-current={pathname === href ? 'page' : undefined}>{label}</a>
+  )
+
+  return (
+    <div className="dash">
+      <aside>
+        <div className="brand">{APP_NAME}</div>
+        <nav>
+          {navItem('/dashboard', <T id="dash.nav.projects" />)}
+          {navItem('/dashboard/billing', <T id="dash.nav.billing" />)}
+          {navItem('/dashboard/team', <T id="dash.nav.team" />)}
+          <a href="/"><T id="dash.nav.backToSite" /></a>
+        </nav>
+      </aside>
+      <main>
+        <div className="topbar">
+          <span className="spacer" />
+          <LocaleSwitcher locales={LOCALES} current={locale} ariaLabel={langLabel} />
+        </div>
+        {children}
+      </main>
+    </div>
+  )
+}

package/templates/apps/frontend-saas/src/pages/dashboard/not-found.tsx

@@ -0,0 +1,17 @@
+// Scoped 404 for the /dashboard subtree. Fires when a URL is under
+// `/dashboard/...` but no concrete page matches, and when a loader throws
+// NotFoundError. The router picks the deepest matching not-found scope.
+import type { ReactNode } from 'react'
+import { T } from '@voltro/i18n'
+
+export default function DashboardNotFound(): ReactNode {
+  return (
+    <div className="dash">
+      <main>
+        <h1><T id="notFound.heading" /></h1>
+        <p className="muted"><T id="notFound.body" /></p>
+        <p style={{ marginTop: '1rem' }}><a href="/dashboard"><T id="notFound.back" /></a></p>
+      </main>
+    </div>
+  )
+}

package/templates/apps/frontend-saas/src/pages/dashboard/page.test.tsx

@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+//
+// Projects page — the live list + the paywall branch. We mock `@voltro/client`
+// (useSubscription streams the rows; useMutation is the create) and drive the
+// create form, asserting: the SSR'd rows render, the empty state shows, and a
+// `projects.create` that rejects with a typed `EntitlementExceeded` flips the
+// page into the upgrade CTA (NOT a raw error).
+
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { act, createElement, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { I18nProvider } from '@voltro/i18n'
+import enCatalog from '../../locales/en'
+
+const subData = vi.fn<() => { data: unknown }>()
+const mutate = vi.fn<(input: { name: string }) => Promise<unknown>>()
+vi.mock('@voltro/client', () => ({
+  useSubscription: () => subData(),
+  useMutation: () => ({ mutate, pending: false, error: undefined, data: undefined }),
+}))
+
+const { default: Projects, meta, renderMode } = await import('./page')
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+let container: HTMLDivElement
+let root: Root
+
+const render = (node: ReactNode): void => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  act(() => {
+    root = createRoot(container)
+    root.render(
+      createElement(I18nProvider, { locale: 'en', messages: enCatalog, defaultLocale: 'en', children: node }),
+    )
+  })
+}
+
+beforeEach(() => {
+  subData.mockReset()
+  subData.mockReturnValue({ data: undefined })
+  mutate.mockReset()
+  mutate.mockResolvedValue({ id: 'proj_1', name: 'x', tenantId: 'acme' })
+})
+
+afterEach(() => {
+  if (root) act(() => root.unmount())
+  container?.remove()
+  document.body.innerHTML = ''
+})
+
+describe('projects — config', () => {
+  test('is an SSR page titled Projects (so the parent gate runs per request)', () => {
+    expect(renderMode).toBe('ssr')
+    expect(meta({ locale: 'en' }).title).toBe('Projects')
+  })
+})
+
+describe('projects — render', () => {
+  test('shows the empty state when there are no projects', () => {
+    render(createElement(Projects))
+    expect(container.textContent).toContain('No projects yet')
+  })
+
+  test('renders one card per streamed project', () => {
+    subData.mockReturnValue({ data: [
+      { id: 'proj_1', name: 'Acme', tenantId: 'acme', createdAt: '2026-01-01T00:00:00Z' },
+      { id: 'proj_2', name: 'Beta', tenantId: 'acme', createdAt: '2026-01-02T00:00:00Z' },
+    ] })
+    render(createElement(Projects))
+    expect(container.querySelectorAll('.card')).toHaveLength(2)
+    expect(container.textContent).toContain('Acme')
+    expect(container.textContent).toContain('Beta')
+  })
+})
+
+describe('projects — paywall', () => {
+  // React 19 tracks the input's value, so a raw `input.value = …` is ignored —
+  // set it through the prototype's native setter so the tracked value changes
+  // and `onChange` fires with the new value.
+  const setInputValue = (el: HTMLInputElement, value: string): void => {
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+    setter?.call(el, value)
+    el.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+  const submit = async (): Promise<void> => {
+    const input = container.querySelector('input')!
+    const form = container.querySelector('form')!
+    act(() => { setInputValue(input, 'Fourth') })
+    await act(async () => {
+      form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+      // Flush the mutate() promise chain (.then/.catch) + its setState.
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+  }
+
+  test('a create that succeeds does NOT show the paywall', async () => {
+    render(createElement(Projects))
+    await submit()
+    expect(mutate).toHaveBeenCalledWith({ name: 'Fourth' })
+    expect(container.querySelector('.paywall')).toBeNull()
+  })
+
+  test('a typed EntitlementExceeded flips the page into the upgrade CTA', async () => {
+    mutate.mockRejectedValue({ _tag: 'EntitlementExceeded', entitlement: 'projects', limit: 3 })
+    render(createElement(Projects))
+    await submit()
+    expect(container.querySelector('.paywall')).not.toBeNull()
+    expect(container.textContent).toContain('hit your plan limit')
+  })
+})

package/templates/apps/frontend-saas/src/pages/dashboard/page.tsx

@@ -0,0 +1,76 @@
+// Projects — URL `/dashboard`. The live app screen AND the paywall showcase.
+// `useSubscription` streams the tenant's projects (first paint from the layout
+// gate, upgraded live on WS connect). Creating one calls `projects.create`,
+// which the api gates on the billing `projects` entitlement — the 4th on the
+// free plan rejects with a typed `EntitlementExceeded`, and we branch on that
+// (`isEntitlementExceeded`) to show the upgrade CTA instead of a raw error.
+import type { ReactNode } from 'react'
+import { useState, type FormEvent } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { useSubscription, useMutation } from '@voltro/client'
+import { T, useT } from '@voltro/i18n'
+import { getCatalog } from '../../locales'
+import { isEntitlementExceeded, type Project } from '../../lib/api'
+
+export const renderMode = 'ssr' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.overview.title'],
+})
+
+export default function Projects(): ReactNode {
+  const { data: live } = useSubscription<ReadonlyArray<Project>>('app', 'projects.list')
+  const { mutate, pending } = useMutation<{ name: string }, Project>('app', 'projects.create')
+  const projects = live ?? []
+  const [name, setName] = useState('')
+  const [paywalled, setPaywalled] = useState(false)
+  const placeholder = useT('projects.new.placeholder')
+
+  const onCreate = (e: FormEvent): void => {
+    e.preventDefault()
+    const trimmed = name.trim()
+    if (trimmed === '') return
+    void mutate({ name: trimmed })
+      .then(() => { setName(''); setPaywalled(false) })
+      .catch((err: unknown) => { if (isEntitlementExceeded(err)) setPaywalled(true) })
+  }
+
+  return (
+    <section>
+      <h1><T id="projects.heading" /></h1>
+
+      <form className="row" onSubmit={onCreate}>
+        <input
+          aria-label={placeholder} placeholder={placeholder}
+          value={name} onChange={(e) => setName(e.target.value)}
+        />
+        <button type="submit" className="btn" disabled={pending}>
+          <T id="projects.new.submit" />
+        </button>
+      </form>
+
+      {paywalled ? (
+        <div className="paywall" role="alert">
+          <strong><T id="projects.paywall.title" /></strong>
+          <p className="muted"><T id="projects.paywall.body" /></p>
+          <a className="btn" href="/dashboard/billing"><T id="projects.paywall.cta" /></a>
+        </div>
+      ) : null}
+
+      {projects.length === 0 ? (
+        <p className="empty"><T id="projects.empty" /></p>
+      ) : (
+        <ul className="cards" style={{ marginTop: '1.25rem' }}>
+          {projects.map((p) => (
+            <li className="card" key={p.id}>
+              <div className="value">{p.name}</div>
+              <div className="label">
+                <T id="projects.created" values={{ when: new Date(p.createdAt).toLocaleDateString() }} />
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}