Production Application UI

# Phase 20 accessibility checklist

- Semantic landmarks: header, nav, main, aside where appropriate.
- One meaningful page h1.
- Skip link reaches main content.
- All interactive controls work by keyboard.
- Focus indicator remains visible and not obscured.
- Target size aims for at least 44px for primary controls and never relies on tiny adjacent click targets.
- Tables use table/th/scope semantics when data is truly tabular.
- Horizontal-scroll table region is keyboard focusable and labeled.
- Color never carries task state alone; text labels accompany status colors.
- Empty, loading, error, and not-found states provide text, not only visuals.
- Reduced-motion preferences should be respected if animation is added later.

# Responsive verification matrix

Test at minimum:
- 320px narrow mobile
- 390px common mobile
- 768px tablet portrait
- 900px shell breakpoint
- 1024px laptop/tablet landscape
- 1366px common desktop
- 1920px wide desktop

Verify:
- no horizontal page overflow,
- task table uses contained horizontal scroll when needed,
- focus is not hidden under sticky UI,
- action buttons remain reachable,
- navigation remains understandable,
- text remains readable at 200% zoom,
- touch targets are not crowded.

Official references used for Phase 20 verification (September 18, 2026):

Next.js - Server and Client Components
https://nextjs.org/docs/app/getting-started/server-and-client-components

Next.js - App Router / Project Structure / File Conventions
https://nextjs.org/docs/app
https://nextjs.org/docs/app/getting-started/project-structure
https://nextjs.org/docs/app/api-reference/file-conventions

Next.js - error.js
https://nextjs.org/docs/app/api-reference/file-conventions/error

Next.js - not-found.js
https://nextjs.org/docs/app/api-reference/file-conventions/not-found

Next.js - CSS styling
https://nextjs.org/learn/dashboard-app/css-styling

WCAG 2.2

# Phase 20 UI architecture

The production UI uses the App Router with a protected `(app)` route group.

Server Components own:
- authenticated layout checks,
- initial page data fetching,
- metadata and route composition,
- permission-derived server rendering.

Client Components are kept as islands for:
- mobile menu toggle,
- local disclosure controls,
- browser-only interactions.

The UI does not become the security boundary. Hidden controls improve experience, but NestJS Phase 19 authorization remains authoritative.

import type { ReactNode } from 'react'
import { redirect } from 'next/navigation'
import { createClient } from '@/lib/supabase/server'
import { AppShell } from '@/components/app-shell/app-shell'

export default async function AppLayout({ children }: { children: ReactNode }) {
  const supabase = await createClient()
  const { data, error } = await supabase.auth.getClaims()

  if (error || !data?.claims?.sub) redirect('/signin')

  return (
    <>
      <a className="skipLink" href="#main-content">Skip to main content</a>
      <AppShell
        user={{
          id: data.claims.sub,
          email: typeof data.claims.email === 'string' ? data.claims.email : undefined,
        }}
      >

'use client'

export default function TasksError({ reset }: { reset: () => void }) {
  return (
    <section role="alert">
      <h2>We could not load tasks</h2>
      <p>The request failed. Try again, or contact support if the problem continues.</p>
      <button type="button" onClick={() => reset()}>Try again</button>
    </section>
  )
}

export default function LoadingTasks() {
  return (
    <section aria-busy="true" aria-live="polite">
      <p>Loading tasks...</p>
    </section>
  )
}

import Link from 'next/link'

export default function TaskNotFound() {
  return (
    <section>
      <h1>Task not found</h1>
      <p>The task may not exist or may not be available in your current workspace scope.</p>
      <Link href="/tasks">Back to tasks</Link>
    </section>
  )
}

import { getAuthenticatedAccessToken } from '@/lib/auth/get-authenticated-access-token'
import { fetchTasks } from '@/lib/api/tasks'
import { TaskTable } from '@/components/tasks/task-table'
import { EmptyState } from '@/components/ui/empty-state'
import styles from './tasks.module.css'

export default async function TasksPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>
}) {
  const params = await searchParams
  const token = await getAuthenticatedAccessToken()
  const result = await fetchTasks({ params, token })

  return (
    <section aria-labelledby="tasks-heading">
      <div className={styles.pageHeader}>
        <div>
          <p className={styles.eyebrow}>Work management</p>

.pageHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
.pageHeader h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.eyebrow { margin: 0 0 4px; color: var(--brand); font-weight: 700; }
.description { margin: 8px 0 0; color: var(--text-secondary); }
.primaryAction {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 16px;
  background: var(--brand);
  color: white;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;

:root {
  --surface-canvas: #f5f7fb;
  --surface-panel: #ffffff;
  --surface-muted: #eef2f7;
  --text-primary: #172033;
  --text-secondary: #627086;
  --border-subtle: #dbe2ea;
  --brand: #166b72;
  --brand-strong: #0e5359;
  --danger: #b42318;
  --warning: #a15c00;
  --success: #137333;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;

.header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: var(--surface-panel);
  border-bottom: 1px solid var(--border-subtle);
}
.muted { margin-left: 8px; color: var(--text-secondary); }
.header a { color: var(--brand-strong); }
@media (max-width: 900px) { .header { padding: 0 16px; } }

import Link from 'next/link'
import styles from './app-header.module.css'

export function AppHeader({ user }: { user: { email?: string } }) {
  return (
    <header className={styles.header}>
      <div>
        <strong>Workspace</strong>
        <span className={styles.muted}>Acme Operations</span>
      </div>
      <nav aria-label="Account navigation">
        <Link href="/account">{user.email ?? 'Account'}</Link>
      </nav>
    </header>
  )
}

.shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}
.contentColumn { min-width: 0; }
.main {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 24px;
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .main { padding: 16px; }
}

import type { ReactNode } from 'react'
import { Sidebar } from './sidebar'
import { AppHeader } from './app-header'
import styles from './app-shell.module.css'

type AppShellProps = {
  user: { id: string; email?: string }
  children: ReactNode
}

export function AppShell({ user, children }: AppShellProps) {
  return (
    <div className={styles.shell}>
      <Sidebar />
      <div className={styles.contentColumn}>
        <AppHeader user={user} />
        <main id="main-content" className={styles.main} tabIndex={-1}>
          {children}
        </main>
      </div>

.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-panel);
  padding: 20px 16px;
}
.brand { font-weight: 800; font-size: 20px; margin-bottom: 24px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.list a {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-primary);
  text-decoration: none;
}
.list a:hover { background: var(--surface-muted); }
@media (max-width: 900px) { .sidebar { display: none; } }

import Link from 'next/link'
import styles from './sidebar.module.css'

const nav = [
  { href: '/dashboard', label: 'Dashboard' },
  { href: '/projects', label: 'Projects' },
  { href: '/tasks', label: 'Tasks' },
]

export function Sidebar() {
  return (
    <aside className={styles.sidebar} aria-label="Primary navigation">
      <div className={styles.brand}>TaskFlow</div>
      <nav>
        <ul className={styles.list}>
          {nav.map((item) => (
            <li key={item.href}>
              <Link href={item.href}>{item.label}</Link>
            </li>
          ))}

.wrapper { display: none; }
@media (max-width: 900px) {
  .wrapper { display: block; }
  .wrapper button { min-height: 44px; min-width: 44px; }
  .wrapper nav { display: grid; gap: 8px; padding: 12px 0; }
}

'use client'

import { useState } from 'react'
import Link from 'next/link'
import styles from './mobile-nav.module.css'

export function MobileNav() {
  const [open, setOpen] = useState(false)

  return (
    <div className={styles.wrapper}>
      <button
        type="button"
        aria-expanded={open}
        aria-controls="mobile-navigation"
        onClick={() => setOpen((value) => !value)}
      >
        Menu
      </button>

.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.TODO { background: #eef2f7; color: #344054; }
.IN_PROGRESS { background: #e8f3ff; color: #175cd3; }
.DONE { background: #e9f7ee; color: #137333; }
.CANCELED { background: #fcecec; color: #b42318; }

import styles from './status-badge.module.css'

const label = {
  TODO: 'To do',
  IN_PROGRESS: 'In progress',
  DONE: 'Done',
  CANCELED: 'Canceled',
} as const

export function StatusBadge({ status }: { status: keyof typeof label }) {
  return <span className={`${styles.badge} ${styles[status]}`}>{label[status]}</span>
}

.tableRegion {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}
.table { width: 100%; border-collapse: collapse; min-width: 780px; }
.table th, .table td { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.table thead th { color: var(--text-secondary); font-size: 13px; }
.table tbody th { font-weight: 650; }
.table tbody tr:hover { background: #fafbfd; }
.table a { color: var(--brand-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.srOnly {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

import Link from 'next/link'
import { StatusBadge } from './status-badge'
import styles from './task-table.module.css'

type TaskRow = {
  id: string
  title: string
  status: 'TODO' | 'IN_PROGRESS' | 'DONE' | 'CANCELED'
  priority: 'LOW' | 'MEDIUM' | 'HIGH'
  assignee?: { displayName?: string | null; email: string } | null
  dueAt?: string | null
}

export function TaskTable({ tasks }: { tasks: TaskRow[] }) {
  return (
    <div className={styles.tableRegion} tabIndex={0} aria-label="Tasks table, scroll horizontally on small screens">
      <table className={styles.table}>
        <caption className={styles.srOnly}>Tasks visible in your current authorized workspace scope</caption>
        <thead>
          <tr>

.empty {
  padding: 48px 24px;
  text-align: center;
  background: var(--surface-panel);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
}
.empty h2 { margin: 0 0 8px; font-size: 20px; }
.empty p { margin: 0; color: var(--text-secondary); }

import styles from './empty-state.module.css'

export function EmptyState({ title, description }: { title: string; description: string }) {
  return (
    <section className={styles.empty} aria-labelledby="empty-state-title">
      <h2 id="empty-state-title">{title}</h2>
      <p>{description}</p>
    </section>
  )
}