Add the application shell, Aperçu and the week grid

Ports the shell and Aperçu screen from the Claude Design export, and
builds the week grid from the design system's grid specification.

The theme is applied by a nonced inline script before first paint.
Without it the page renders light and then swaps, which is a white
flash for anyone working in dark. The nonce our CSP already emits is
what makes an inline script possible at all.

Demo data lives in src/lib/demo behind a README stating it is fictional
and replaceable. Screens import from there and nowhere else, so the
directory can be deleted wholesale once real queries land.

Weekend columns are shaded because in retail those are the days that
carry counterparts — mayor-authorised Sundays and their compensatory
rest — and scheduling one by accident is the failure worth preventing.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Cr9dkEHwbDgkWPnyGj1Rjv

src/components/planning/WeekGrid.tsx

@@ -0,0 +1,158 @@
+import { AbsenceBar } from '@/components/planning/AbsenceBar';
+import { CounterStrip } from '@/components/planning/CounterStrip';
+import { ShiftChip } from '@/components/planning/ShiftChip';
+import { computeWeekCounters } from '@/domain/counters/week';
+import { cx } from '@/lib/cx';
+import {
+  fullName,
+  initials,
+  timeRange,
+  type DemoWeekRow,
+} from '@/lib/demo/types';
+
+export interface WeekGridProps {
+  days: readonly string[];
+  rows: DemoWeekRow[];
+  unassignedRow?: DemoWeekRow;
+}
+
+/**
+ * Grille hebdomadaire : lignes salariés × sept jours.
+ *
+ * Le samedi et le dimanche portent un fond distinct. Ce n'est pas décoratif :
+ * en commerce de détail, ce sont les jours à contreparties — dimanche du maire
+ * majoré et repos compensateur — et les distinguer d'un coup d'œil évite de les
+ * planifier par inadvertance.
+ */
+export function WeekGrid({ days, rows, unassignedRow }: WeekGridProps) {
+  return (
+    <div className="overflow-x-auto rounded-3 border border-line-1 bg-surface">
+      <div className="min-w-[1040px]">
+        <GridHeader days={days} />
+        {unassignedRow ? <Row row={unassignedRow} days={days} /> : null}
+        {rows.map((row) => (
+          <Row key={row.employee.id} row={row} days={days} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function GridHeader({ days }: { days: readonly string[] }) {
+  return (
+    <div className="sticky top-0 z-20 flex border-b border-line-2 bg-surface-2">
+      <div className="w-64 flex-none border-r border-line-1 px-3 py-2 text-micro font-semibold tracking-[0.06em] text-ink-3 uppercase">
+        Salarié
+      </div>
+      <div className="grid flex-1 grid-cols-7">
+        {days.map((day, index) => (
+          <div
+            key={day}
+            className={cx(
+              'border-r border-line-1 px-2 py-2 text-center text-xs font-semibold last:border-r-0',
+              index > 4 ? 'bg-surface-3 text-ink-2' : 'text-ink-1',
+            )}
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function Row({ row, days }: { row: DemoWeekRow; days: readonly string[] }) {
+  const counters = computeWeekCounters(row.counters);
+  const name = row.unassigned ? 'Non assigné' : fullName(row.employee);
+
+  return (
+    <div
+      className={cx(
+        'flex border-b border-line-1 last:border-b-0',
+        row.unassigned && 'bg-surface-2',
+      )}
+    >
+      <div className="w-64 flex-none border-r border-line-1 px-3 py-2">
+        <div className="flex items-center gap-2">
+          {row.unassigned ? (
+            <span
+              aria-hidden
+              className="flex size-6 items-center justify-center rounded-full border border-dashed border-line-3 text-micro text-ink-3"
+            >
+              ?
+            </span>
+          ) : (
+            <span
+              aria-hidden
+              className="flex size-6 items-center justify-center rounded-full bg-surface-3 text-micro font-semibold text-ink-2"
+            >
+              {initials(row.employee)}
+            </span>
+          )}
+          <span className="min-w-0">
+            <span
+              className={cx(
+                'block truncate text-sm font-medium',
+                row.unassigned ? 'text-ink-3' : 'text-ink-1',
+              )}
+            >
+              {name}
+            </span>
+            <span className="block truncate text-micro text-ink-3">
+              {row.employee.job}
+            </span>
+          </span>
+        </div>
+        <CounterStrip
+          counters={counters}
+          forfaitJours={row.employee.forfaitJours ?? false}
+          className="mt-1"
+        />
+      </div>
+
+      <div className="relative grid flex-1 grid-cols-7">
+        {row.absence ? (
+          <AbsenceBar
+            kind={row.absence.kind}
+            label={row.absence.label}
+            duration={`${row.absence.span} j`}
+            startDay={row.absence.startDay}
+            span={row.absence.span}
+            className="top-1.5"
+          />
+        ) : null}
+
+        {days.map((day, index) => {
+          const shifts = row.days[index] ?? [];
+          return (
+            <div
+              key={day}
+              className={cx(
+                'flex min-h-[var(--row-h)] flex-col gap-1 border-r border-line-1 p-1 last:border-r-0',
+                index > 4 && 'bg-surface-2',
+                row.absence &&
+                  index >= row.absence.startDay &&
+                  index < row.absence.startDay + row.absence.span &&
+                  'pt-7',
+              )}
+            >
+              {shifts.map((shift, position) => (
+                <ShiftChip
+                  key={`${day}-${position}`}
+                  poste={shift.poste}
+                  time={timeRange(shift)}
+                  state={shift.state ?? 'published'}
+                  {...(shift.delta ? { delta: shift.delta } : {})}
+                  {...(shift.alert ? { alert: shift.alert } : {})}
+                  {...(shift.breakMinutes
+                    ? { breakMinutes: shift.breakMinutes }
+                    : {})}
+                />
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/shell/AppShell.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import type { ReactNode } from 'react';
+
+import { ThemeToggle } from '@/components/shell/ThemeToggle';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { cx } from '@/lib/cx';
+import {
+  isActive,
+  NAVIGATION,
+  sectionForPath,
+  type NavItem,
+} from '@/components/shell/navigation';
+
+export interface AppShellProps {
+  children: ReactNode;
+}
+
+export function AppShell({ children }: AppShellProps) {
+  const pathname = usePathname();
+  const section = sectionForPath(pathname);
+
+  return (
+    <div className="flex min-h-dvh flex-col bg-canvas text-ink-1">
+      <header className="flex h-13 flex-none items-center gap-5 border-b border-line-2 bg-surface px-5">
+        <Link
+          href="/"
+          className="flex items-center gap-2.5 rounded-2 text-lg font-semibold tracking-[-0.015em]"
+        >
+          <span aria-hidden className="size-5 rounded-2 bg-accent" />
+          PlanFlow
+        </Link>
+
+        <nav aria-label="Sections" className="flex h-full gap-0.5">
+          {NAVIGATION.map((entry) => {
+            const target = entry.items.find((item) => item.href);
+            const current = entry.id === section.id;
+            return (
+              <Link
+                key={entry.id}
+                href={target?.href ?? '/'}
+                aria-current={current ? 'page' : undefined}
+                className={cx(
+                  'flex h-full items-center border-b-2 px-3.5 text-sm font-medium whitespace-nowrap',
+                  current
+                    ? 'border-accent text-ink-1'
+                    : 'border-transparent text-ink-3 hover:text-ink-1',
+                )}
+              >
+                {entry.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <span className="flex-1" />
+
+        <Button size="sm">
+          Nantes Atlantis
+          <span aria-hidden className="text-[10px] text-ink-3">
+            ▾
+          </span>
+        </Button>
+        <ThemeToggle />
+        <span
+          aria-hidden
+          className="flex size-7 items-center justify-center rounded-full bg-accent-soft text-xs font-semibold text-accent-soft-ink"
+        >
+          MR
+        </span>
+      </header>
+
+      <div className="flex min-h-0 flex-1">
+        <aside className="flex w-57 flex-none flex-col gap-0.5 overflow-auto border-r border-line-1 bg-surface p-3 pt-4">
+          <p className="px-2.5 pb-2.5 text-micro font-semibold tracking-[0.08em] text-ink-3 uppercase">
+            {section.label}
+          </p>
+          {section.items.map((item) => (
+            <SidebarLink key={item.id} item={item} pathname={pathname} />
+          ))}
+          <span className="flex-1" />
+          <p className="border-t border-line-1 px-2.5 pt-3 text-micro leading-relaxed text-ink-3">
+            Instance auto-hébergée
+            <br />
+            Maison Rivage · 34 établissements
+          </p>
+        </aside>
+
+        <main className="min-w-0 flex-1 overflow-auto">{children}</main>
+      </div>
+    </div>
+  );
+}
+
+function SidebarLink({ item, pathname }: { item: NavItem; pathname: string }) {
+  const current = item.href ? isActive(item.href, pathname) : false;
+  const className = cx(
+    'flex w-full items-center justify-between gap-2 rounded-2 px-2.5 py-1.5 text-left text-sm',
+    'transition-colors duration-[var(--d-1)] ease-organic',
+    current
+      ? 'bg-accent-soft font-semibold text-accent-soft-ink'
+      : 'text-ink-2 hover:bg-surface-2',
+  );
+
+  const content = (
+    <>
+      <span className="truncate">{item.label}</span>
+      {item.badge ? (
+        <Badge subtle tone={current ? 'neutral' : 'neutral'}>
+          {item.badge}
+        </Badge>
+      ) : null}
+    </>
+  );
+
+  if (!item.href) {
+    return (
+      <Link
+        href={`/bientot?ecran=${encodeURIComponent(item.label)}`}
+        className={cx(className, 'text-ink-3')}
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <Link
+      href={item.href}
+      aria-current={current ? 'page' : undefined}
+      className={className}
+    >
+      {content}
+    </Link>
+  );
+}

src/components/shell/PageHeader.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+
+export interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  actions?: ReactNode;
+}
+
+export function PageHeader({ title, subtitle, actions }: PageHeaderProps) {
+  return (
+    <div className="flex flex-wrap items-end gap-4">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-[-0.018em]">{title}</h1>
+        {subtitle ? (
+          <p className="mt-1 text-sm text-ink-2">{subtitle}</p>
+        ) : null}
+      </div>
+      <span className="flex-1" />
+      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+    </div>
+  );
+}
+
+export function PageBody({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-col gap-5 px-6 pt-5 pb-16">{children}</div>
+  );
+}

src/components/shell/ThemeToggle.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { Button } from '@/components/ui/Button';
+
+export type Theme = 'light' | 'dark';
+
+export const THEME_STORAGE_KEY = 'planflow.theme';
+
+/**
+ * Script appliqué avant le premier rendu.
+ *
+ * Sans lui, la page s'affiche en clair puis bascule — un flash blanc en pleine
+ * figure pour qui travaille en sombre. Il est injecté avec le nonce de la
+ * requête, seule façon d'exécuter de l'inline sous notre CSP (src/proxy.ts).
+ */
+export const THEME_INIT_SCRIPT = `
+(function () {
+  try {
+    var stored = localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});
+    var theme = stored === 'dark' || stored === 'light'
+      ? stored
+      : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    document.documentElement.setAttribute('data-theme', theme);
+  } catch (e) {
+    document.documentElement.setAttribute('data-theme', 'light');
+  }
+})();
+`.trim();
+
+function readTheme(): Theme {
+  if (typeof document === 'undefined') return 'light';
+  return document.documentElement.getAttribute('data-theme') === 'dark'
+    ? 'dark'
+    : 'light';
+}
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>('light');
+
+  // Le thème réel est posé par THEME_INIT_SCRIPT avant l'hydratation ; on le
+  // lit après montage plutôt que de le deviner au rendu serveur, où
+  // localStorage n'existe pas.
+  useEffect(() => setTheme(readTheme()), []);
+
+  function toggle() {
+    const next: Theme = theme === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, next);
+    } catch {
+      // Stockage indisponible (navigation privée) : le thème reste valable
+      // pour la session, ce qui est préférable à une erreur.
+    }
+    setTheme(next);
+  }
+
+  return (
+    <Button
+      size="sm"
+      className="rounded-full"
+      onClick={toggle}
+      aria-pressed={theme === 'dark'}
+    >
+      Thème {theme === 'dark' ? 'sombre' : 'clair'}
+    </Button>
+  );
+}

src/components/shell/navigation.ts

@@ -0,0 +1,98 @@
+/**
+ * Modèle de navigation, repris de l'export Claude Design.
+ *
+ * Deux niveaux : une section dans l'en-tête, ses entrées dans la barre
+ * latérale. Les badges portent un décompte à traiter.
+ *
+ * Les entrées sans `href` correspondent à des écrans du périmètre qui n'ont pas
+ * encore d'implémentation : elles restent visibles pour que la navigation
+ * reflète le produit réel, et mènent à un écran d'attente explicite plutôt qu'à
+ * une page blanche.
+ */
+
+export interface NavItem {
+  id: string;
+  label: string;
+  href?: string;
+  badge?: string;
+}
+
+export interface NavSection {
+  id: string;
+  label: string;
+  items: NavItem[];
+}
+
+export const NAVIGATION: NavSection[] = [
+  {
+    id: 'apercu',
+    label: 'Aperçu',
+    items: [
+      { id: 'taches', label: 'Tâches RH', href: '/' },
+      { id: 'entrees', label: 'Entrées et sorties' },
+      { id: 'profils', label: 'Profils incomplets', badge: '6' },
+      { id: 'soldes-cp', label: 'Compteurs de congés payés' },
+    ],
+  },
+  {
+    id: 'plannings',
+    label: 'Plannings',
+    items: [
+      { id: 'semaine', label: 'Vue semaine', href: '/planning/semaine' },
+      { id: 'jour', label: 'Vue jour', href: '/planning/jour' },
+      { id: 'besoins', label: 'Besoins non couverts', badge: '5' },
+      { id: 'modeles', label: "Modèles d'ouverture" },
+    ],
+  },
+  {
+    id: 'equipe',
+    label: 'Équipe',
+    items: [
+      { id: 'membres', label: 'Membres', href: '/equipe' },
+      { id: 'fiche', label: 'Fiche salarié', href: '/equipe/camille-ferrand' },
+      { id: 'contrats', label: 'Modifications de contrat' },
+    ],
+  },
+  {
+    id: 'conges',
+    label: 'Congés',
+    items: [
+      { id: 'calendrier', label: 'Calendrier des absences', href: '/conges' },
+      { id: 'attente', label: 'Demandes en attente', href: '/conges#attente', badge: '3' },
+      { id: 'politiques', label: 'Politiques de congés' },
+    ],
+  },
+  {
+    id: 'rapports',
+    label: 'Rapports',
+    items: [
+      { id: 'heures', label: 'Heures travaillées' },
+      { id: 'paie', label: 'Préparation de paie' },
+      { id: 'activite', label: "Journal d'activité" },
+    ],
+  },
+  {
+    id: 'reglages',
+    label: 'Réglages',
+    items: [
+      { id: 'convention', label: 'Convention collective' },
+      { id: 'postes', label: 'Postes et étiquettes' },
+      { id: 'sites', label: 'Établissements' },
+      { id: 'roles', label: 'Rôles et permissions' },
+    ],
+  },
+];
+
+/** Section contenant la route donnée, ou la première par défaut. */
+export function sectionForPath(pathname: string): NavSection {
+  const match = NAVIGATION.find((section) =>
+    section.items.some((item) => item.href && isActive(item.href, pathname)),
+  );
+  return match ?? (NAVIGATION[0] as NavSection);
+}
+
+export function isActive(href: string, pathname: string): boolean {
+  const base = href.split('#')[0] ?? href;
+  if (base === '/') return pathname === '/';
+  return pathname === base || pathname.startsWith(`${base}/`);
+}