Alléger l'annuaire

Le formulaire d'embauche, posé au bas de la liste, occupait plus de place
que l'effectif qu'on vient consulter — une quinzaine de champs déployés en
permanence pour un geste occasionnel. Il s'ouvre désormais en modale,
depuis le bouton d'en-tête.

`<dialog>` natif plutôt qu'un panneau maison : le piège de focus, la
fermeture par Échap et le fond inerte viennent avec, et une `<div>` doit
les réimplémenter sans jamais les tenir tout à fait.

Le tableau perd sa carte et ses fonds : une liste de personnes se lit
mieux sans cadre autour. Les colonnes suivent l'annuaire de référence —
collaborateur, rôle, email, mobile, rattachement, invitation. Le contrat
quitte le tableau, où il doublait le filtre qui le cherche déjà ; son
absence reste signalée là où elle compte, dans le rattachement.

Le décompte ne s'affiche plus que filtré : « 87 salariés » au-dessus de 87
lignes n'apprend rien.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/app/(app)/equipe/AddEmployeeDialog.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import { AddEmployeeForm } from '@/app/(app)/equipe/AddEmployeeForm';
+import { Button } from '@/components/ui/Button';
+import type { ContractLocation } from '@/server/employees/queries';
+
+/**
+ * Ajout d'un collaborateur, en modale.
+ *
+ * Le formulaire d'embauche compte une quinzaine de champs : posé au bas de la
+ * liste, il occupait plus de place que l'effectif qu'on vient consulter. Il ne
+ * s'ouvre donc qu'à la demande.
+ *
+ * `<dialog>` natif plutôt qu'un panneau maison : il apporte le piège de focus,
+ * la fermeture par Échap et le fond inerte, trois choses qu'une `<div>` doit
+ * réimplémenter et rate presque toujours.
+ */
+export function AddEmployeeDialog({
+  locations,
+}: {
+  locations: ContractLocation[];
+}) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const element = dialog.current;
+    if (!element) return;
+    if (open && !element.open) element.showModal();
+    if (!open && element.open) element.close();
+  }, [open]);
+
+  return (
+    <>
+      <Button variant="primary" onClick={() => setOpen(true)}>
+        Ajouter un collaborateur
+      </Button>
+
+      <dialog
+        ref={dialog}
+        aria-labelledby="ajout-collaborateur"
+        onClose={() => setOpen(false)}
+        className="m-auto w-[min(46rem,calc(100vw-2rem))] rounded-3 border border-line-1 bg-surface p-0 text-ink-1 backdrop:bg-[rgb(0_0_0/0.4)]"
+      >
+        <header className="flex items-center gap-3 border-b border-line-1 px-5 py-4">
+          <h2 id="ajout-collaborateur" className="text-md font-semibold">
+            Ajouter un collaborateur
+          </h2>
+          <span className="flex-1" />
+          <Button variant="ghost" onClick={() => setOpen(false)}>
+            Fermer
+          </Button>
+        </header>
+
+        <div className="max-h-[70vh] overflow-y-auto p-5">
+          {open ? (
+            // Monté à l'ouverture : un formulaire démonté entre deux usages
+            // repart vide, sans traîner la saisie abandonnée la fois d'avant.
+            <AddEmployeeForm
+              locations={locations}
+              onSaved={() => setOpen(false)}
+            />
+          ) : null}
+        </div>
+      </dialog>
+    </>
+  );
+}

src/app/(app)/equipe/AddEmployeeForm.tsx

@@ -39,9 +39,12 @@ const selectClass =
 
 export function AddEmployeeForm({
   locations,
+  onSaved,
 }: {
   /** Vide quand la capacité d'ouvrir un contrat manque : la section disparaît. */
   locations: ContractLocation[];
+  /** Appelé une fois l'ajout accepté — la modale s'y referme. */
+  onSaved?: () => void;
 }) {
   const [state, formAction] = useActionState<ActionState, FormData>(
     createEmployeeAction,
@@ -50,6 +53,14 @@ export function AddEmployeeForm({
   const [withContract, setWithContract] = useState(locations.length > 0);
   const [locationId, setLocationId] = useState(locations[0]?.id ?? '');
   const [forfait, setForfait] = useState(false);
+  const [acknowledged, setAcknowledged] = useState<ActionState>(empty);
+
+  // Acquitté une fois pour toutes : sans cela, un succès resté en mémoire
+  // refermerait la modale à sa réouverture.
+  if (state !== acknowledged && state.ok) {
+    setAcknowledged(state);
+    onSaved?.();
+  }
 
   const teams =
     locations.find((location) => location.id === locationId)?.teams ?? [];

src/app/(app)/equipe/DirectoryFilters.tsx

@@ -11,8 +11,10 @@ import { useRef } from 'react';
  * choix plutôt que de vider la page.
  */
 
+/** Pastilles plutôt que champs : une barre de filtres se survole, elle ne se
+ *  remplit pas. */
 const selectClass =
-  'h-9 min-w-0 rounded-2 border border-line-2 bg-surface px-2 text-sm text-ink-1 outline-none focus-visible:border-focus';
+  'h-10 min-w-0 cursor-pointer rounded-full border border-line-2 bg-surface px-4 text-sm text-ink-1 outline-none hover:bg-surface-2 focus-visible:border-focus';
 
 export interface FilterOptions {
   locations: Array<{ id: string; name: string }>;
@@ -43,7 +45,7 @@ export function DirectoryFilters({ options }: { options: FilterOptions }) {
           type="search"
           defaultValue={current('q')}
           placeholder="Rechercher par prénom, nom ou matricule."
-          className="h-10 rounded-3 border border-line-2 bg-surface px-3.5 text-sm text-ink-1 outline-none placeholder:text-ink-3 focus-visible:border-focus"
+          className="h-11 rounded-full border border-line-2 bg-surface px-4 text-sm text-ink-1 outline-none placeholder:text-ink-3 focus-visible:border-focus"
           onChange={(event) => {
             // La frappe ne déclenche pas une requête par caractère : elle
             // attend un silence. Sans cela, chercher « Dupont » en lance six.

src/app/(app)/equipe/page.tsx

@@ -1,11 +1,11 @@
 import Link from 'next/link';
 import { Suspense } from 'react';
 
-import { AddEmployeeForm } from '@/app/(app)/equipe/AddEmployeeForm';
+import { AddEmployeeDialog } from '@/app/(app)/equipe/AddEmployeeDialog';
 import { DirectoryFilters } from '@/app/(app)/equipe/DirectoryFilters';
 import { PageBody, PageHeader } from '@/components/shell/PageHeader';
 import { Badge, type Tone } from '@/components/ui/Badge';
-import { Card, CardHeader, EmptyState } from '@/components/ui/Card';
+import { EmptyState } from '@/components/ui/Card';
 import {
   listContractLocations,
   listEmployees,
@@ -21,8 +21,6 @@ const INVITATION_TONES: Record<string, { label: string; tone: Tone }> = {
   REVOKED: { label: 'Révoquée', tone: 'neutral' },
 };
 
-const dateFormat = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium' });
-
 const one = (value: string | string[] | undefined): string | undefined =>
   Array.isArray(value) ? value[0] : value;
 
@@ -59,25 +57,28 @@ export default async function EquipePage({
     <PageBody>
       <PageHeader
         title="Équipe"
-        subtitle={
-          filtered
-            ? `${directory.rows.length} sur ${directory.total} salariés`
-            : `${directory.total} salarié${directory.total > 1 ? 's' : ''}`
-        }
+        // Le décompte n'apparaît que s'il apprend quelque chose : « 87 salariés »
+        // au-dessus d'une liste de 87 lignes ne dit rien que la liste ne dise.
+        {...(filtered
+          ? { subtitle: `${directory.rows.length} sur ${directory.total} salariés` }
+          : {})}
         actions={
-          <Link
-            href="/reglages/registre"
-            className="inline-flex h-8 items-center rounded-2 border border-line-3 bg-surface px-3.5 text-sm font-medium text-ink-1 hover:bg-surface-2"
-          >
-            Registre unique du personnel
-          </Link>
+          <>
+            <Link
+              href="/reglages/registre"
+              className="inline-flex h-8 items-center rounded-2 border border-line-3 bg-surface px-3.5 text-sm font-medium text-ink-1 hover:bg-surface-2"
+            >
+              Registre unique du personnel
+            </Link>
+            <AddEmployeeDialog locations={hiringLocations} />
+          </>
         }
       />
 
       {/* `useSearchParams` impose une frontière de suspense : sans elle, la
           page entière serait rendue à la demande au lieu d'être servie puis
           hydratée. */}
-      <Suspense fallback={<div className="h-[5.5rem]" />}>
+      <Suspense fallback={<div className="h-[6rem]" />}>
         <DirectoryFilters
           options={{
             locations: directory.locations,
@@ -87,114 +88,103 @@ export default async function EquipePage({
         />
       </Suspense>
 
-      <Card>
-        {directory.rows.length === 0 ? (
-          <EmptyState
-            title={filtered ? 'Aucun résultat' : 'Aucun salarié'}
-            description={
-              filtered
-                ? 'Aucun salarié ne répond à ces critères. Élargissez la recherche.'
-                : 'Ajoutez un premier salarié pour commencer à planifier.'
-            }
-          />
-        ) : (
-          <div className="overflow-x-auto">
-            <table className="w-full min-w-[980px] border-collapse text-sm">
-              <thead>
-                <tr className="border-b border-line-2 bg-surface-2 text-left text-micro font-semibold tracking-[0.06em] text-ink-3 uppercase">
-                  <th className="px-4 py-2.5">Collaborateur</th>
-                  <th className="px-4 py-2.5">Rôle</th>
-                  <th className="px-4 py-2.5">Contrat</th>
-                  <th className="px-4 py-2.5">Mobile</th>
-                  <th className="px-4 py-2.5">Rattachement</th>
-                  <th className="px-4 py-2.5">Invitation</th>
-                </tr>
-              </thead>
-              <tbody>
-                {directory.rows.map((employee) => {
-                  const invitation = employee.invitationState
-                    ? INVITATION_TONES[employee.invitationState]
-                    : null;
+      {directory.rows.length === 0 ? (
+        <EmptyState
+          title={filtered ? 'Aucun résultat' : 'Aucun salarié'}
+          description={
+            filtered
+              ? 'Aucun salarié ne répond à ces critères. Élargissez la recherche.'
+              : 'Ajoutez un premier salarié pour commencer à planifier.'
+          }
+        />
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[940px] border-collapse text-sm">
+            <thead>
+              <tr className="border-b border-line-2 text-left text-micro font-semibold tracking-[0.04em] text-ink-3">
+                <th className="px-3 py-3 font-semibold">Collaborateur</th>
+                <th className="px-3 py-3 font-semibold">Rôle</th>
+                <th className="px-3 py-3 font-semibold">Email</th>
+                <th className="px-3 py-3 font-semibold">Mobile</th>
+                <th className="px-3 py-3 font-semibold">Rattachement</th>
+                <th className="px-3 py-3 font-semibold">Invitation</th>
+              </tr>
+            </thead>
+            <tbody>
+              {directory.rows.map((employee) => {
+                const invitation = employee.invitationState
+                  ? INVITATION_TONES[employee.invitationState]
+                  : null;
 
-                  return (
-                    <tr
-                      key={employee.id}
-                      className="border-b border-line-1 last:border-b-0 hover:bg-surface-2"
-                    >
-                      <td className="px-4 py-2.5">
-                        <Link
-                          href={`/equipe/${employee.id}`}
-                          className="flex items-center gap-2.5 rounded-2"
+                return (
+                  <tr
+                    key={employee.id}
+                    className="border-b border-line-1 last:border-b-0 hover:bg-surface-2"
+                  >
+                    <td className="px-3 py-3">
+                      <Link
+                        href={`/equipe/${employee.id}`}
+                        className="flex items-center gap-2.5 rounded-2"
+                      >
+                        <span
+                          aria-hidden
+                          className="flex size-8 flex-none items-center justify-center rounded-full bg-accent-soft text-micro font-semibold text-accent-soft-ink"
                         >
-                          <span
-                            aria-hidden
-                            className="flex size-7 flex-none items-center justify-center rounded-full bg-accent-soft text-micro font-semibold text-accent-soft-ink"
-                          >
-                            {employee.firstName.charAt(0)}
-                            {employee.lastName.charAt(0)}
+                          {employee.firstName.charAt(0)}
+                          {employee.lastName.charAt(0)}
+                        </span>
+                        <span className="min-w-0">
+                          <span className="block truncate font-medium underline decoration-line-3 underline-offset-2">
+                            {employee.firstName} {employee.lastName}
                           </span>
-                          <span className="min-w-0">
-                            <span className="block truncate font-medium">
-                              {employee.firstName} {employee.lastName}
-                            </span>
+                          {/* Le matricule ne double la colonne « Email » que
+                              lorsqu'il n'y en a pas : c'est alors la seule
+                              adresse à laquelle on désigne ce salarié. */}
+                          {employee.email ? null : (
                             <span className="block truncate text-micro text-ink-3">
-                              {employee.email ?? `Matricule ${employee.employeeNumber}`}
+                              Matricule {employee.employeeNumber}
                             </span>
-                          </span>
-                        </Link>
-                      </td>
-                      <td className="px-4 py-2.5">
-                        <Badge tone="accent">{employee.roleName}</Badge>
-                      </td>
-                      <td className="px-4 py-2.5">
-                        {employee.contract ? (
-                          <span className="flex flex-wrap items-center gap-1.5">
-                            <span>{employee.contract.label}</span>
-                            {employee.contract.forfaitJours ? (
-                              <Badge tone="accent">Forfait jours</Badge>
-                            ) : null}
-                            <span className="tnum text-micro text-ink-3">
-                              depuis le{' '}
-                              {dateFormat.format(employee.contract.since)}
-                            </span>
-                          </span>
-                        ) : (
-                          <Badge tone="warn">Sans contrat</Badge>
-                        )}
-                      </td>
-                      <td className="tnum px-4 py-2.5 text-ink-2">
-                        {employee.phone ?? (
-                          <span className="text-ink-3">Non renseigné</span>
-                        )}
-                      </td>
-                      <td className="px-4 py-2.5 text-ink-2">
-                        {employee.locationName ?? '—'}
-                        {employee.teamName ? ` / ${employee.teamName}` : ''}
-                      </td>
-                      <td className="px-4 py-2.5">
-                        {invitation ? (
-                          <Badge tone={invitation.tone}>{invitation.label}</Badge>
-                        ) : (
-                          <span className="text-micro text-ink-3">
-                            Sans accès applicatif
-                          </span>
-                        )}
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </Card>
-
-      <Card>
-        <CardHeader title="Ajouter un collaborateur" />
-        <div className="p-4">
-          <AddEmployeeForm locations={hiringLocations} />
+                          )}
+                        </span>
+                      </Link>
+                    </td>
+                    <td className="px-3 py-3">
+                      <Badge tone="accent">{employee.roleName}</Badge>
+                    </td>
+                    <td className="px-3 py-3 text-ink-2">
+                      {employee.email ?? (
+                        <span className="text-ink-3">Sans compte</span>
+                      )}
+                    </td>
+                    <td className="tnum px-3 py-3 text-ink-2">
+                      {employee.phone ?? (
+                        <span className="text-ink-3">Non renseigné</span>
+                      )}
+                    </td>
+                    <td className="px-3 py-3 text-ink-2">
+                      {employee.locationName ? (
+                        <>
+                          {employee.locationName}
+                          {employee.teamName ? ` / ${employee.teamName}` : ''}
+                        </>
+                      ) : (
+                        <Badge tone="warn">Sans contrat</Badge>
+                      )}
+                    </td>
+                    <td className="px-3 py-3">
+                      {invitation ? (
+                        <Badge tone={invitation.tone}>{invitation.label}</Badge>
+                      ) : (
+                        <span className="text-micro text-ink-3">—</span>
+                      )}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
         </div>
-      </Card>
+      )}
     </PageBody>
   );
 }

tests/e2e/conservation.spec.ts

@@ -113,6 +113,9 @@ test('une pièce sans politique n’est jamais purgée', async ({ page }) => {
   // compte, et une pièce partagée verrait son sort décidé par un autre test.
   const suffix = `${Date.now()}-garde`;
   await page.goto('/equipe');
+  // Le formulaire d’embauche n’est plus posé au bas de la liste : il s’ouvre
+  // en modale, à la demande.
+  await page.getByRole('button', { name: 'Ajouter un collaborateur' }).click();
   const create = page.locator('form').filter({ hasText: 'Ajouter' });
   await create.getByLabel('Prénom').fill('Garde');
   await create.getByLabel('Nom', { exact: true }).fill(`Garde${suffix}`);
@@ -167,6 +170,9 @@ test('une pièce échue est effectivement effacée', async ({ page }) => {
   await expect(page.getByText('Durée enregistrée.')).toBeVisible();
 
   await page.goto('/equipe');
+  // Le formulaire d’embauche n’est plus posé au bas de la liste : il s’ouvre
+  // en modale, à la demande.
+  await page.getByRole('button', { name: 'Ajouter un collaborateur' }).click();
   const create = page.locator('form').filter({ hasText: 'Ajouter' });
   await create.getByLabel('Prénom').fill('Purge');
   await create.getByLabel('Nom', { exact: true }).fill(`Purge${suffix}`);

tests/e2e/documents.spec.ts

@@ -27,6 +27,9 @@ async function createEmployee(page: Page, tag: string) {
   const lastName = `Dossier${suffix}`;
 
   await page.goto('/equipe');
+  // Le formulaire d’embauche n’est plus posé au bas de la liste : il s’ouvre
+  // en modale, à la demande.
+  await page.getByRole('button', { name: 'Ajouter un collaborateur' }).click();
   const form = page.locator('form').filter({ hasText: 'Ajouter' });
   await form.getByLabel('Prénom').fill('Inès');
   await form.getByLabel('Nom', { exact: true }).fill(lastName);

tests/e2e/fiche.spec.ts

@@ -14,6 +14,9 @@ async function createEmployee(page: Page) {
   const lastName = `Fiche${suffix}`;
 
   await page.goto('/equipe');
+  // Le formulaire d’embauche n’est plus posé au bas de la liste : il s’ouvre
+  // en modale, à la demande.
+  await page.getByRole('button', { name: 'Ajouter un collaborateur' }).click();
   const form = page.locator('form').filter({ hasText: 'Ajouter' });
   await form.getByLabel('Prénom').fill('Awa');
   await form.getByLabel('Nom', { exact: true }).fill(lastName);
@@ -99,6 +102,9 @@ test('une embauche pose le contrat en même temps que le dossier', async ({
   const lastName = `Embauche${suffix}`;
 
   await page.goto('/equipe');
+  // Le formulaire d’embauche n’est plus posé au bas de la liste : il s’ouvre
+  // en modale, à la demande.
+  await page.getByRole('button', { name: 'Ajouter un collaborateur' }).click();
   const form = page.locator('form').filter({ hasText: 'Ajouter' });
   await form.getByLabel('Prénom').fill('Sofia');
   await form.getByLabel('Nom', { exact: true }).fill(lastName);
@@ -113,10 +119,11 @@ test('une embauche pose le contrat en même temps que le dossier', async ({
   await form.getByRole('button', { name: 'Ajouter' }).click();
   await expect(page.getByText('Salarié ajouté.')).toBeVisible();
 
-  // Le contrat est visible depuis l'annuaire, sans passer par la fiche.
-  await expect(page.getByRole('row', { name: new RegExp(lastName) })).toContainText(
-    'CDI',
-  );
+  // Le rattachement paraît dans l'annuaire : un dossier sans contrat y porte
+  // « Sans contrat », celui-ci porte son établissement.
+  await expect(
+    page.getByRole('row', { name: new RegExp(lastName) }),
+  ).not.toContainText('Sans contrat');
 
   await page.getByRole('link', { name: new RegExp(lastName) }).click();
   // Le bandeau porte le contrat : c'est ce qui distingue un dossier embauché

tests/e2e/invitation.spec.ts

@@ -21,6 +21,9 @@ async function createEmployee(page: Page, tag: string) {
   const email = `sacha.${suffix}@exemple.test`;
 
   await page.goto('/equipe');
+  // Le formulaire d’embauche n’est plus posé au bas de la liste : il s’ouvre
+  // en modale, à la demande.
+  await page.getByRole('button', { name: 'Ajouter un collaborateur' }).click();
   const form = page.locator('form').filter({ hasText: 'Ajouter' });
   await form.getByLabel('Prénom').fill(firstName);
   await form.getByLabel('Nom', { exact: true }).fill(lastName);

tests/e2e/registre.spec.ts

@@ -55,6 +55,9 @@ test('un salarié sans compte applicatif est créable', async ({ page }) => {
   // deux passages, et un nom fixe finirait par désigner plusieurs salariés.
   const matricule = `E9${Date.now() % 100000}`;
   const nom = `Sanscompte${matricule}`;
+  // Le formulaire d’embauche n’est plus posé au bas de la liste : il s’ouvre
+  // en modale, à la demande.
+  await page.getByRole('button', { name: 'Ajouter un collaborateur' }).click();
   const form = page.locator('form').filter({ hasText: 'Ajouter' });
   await form.locator('input[name="firstName"]').fill('Sans');
   await form.locator('input[name="lastName"]').fill(nom);

tests/e2e/roles.spec.ts

@@ -158,6 +158,9 @@ async function inviteWithRole(page: Page, roleLabel: string) {
   const lastName = `Role${suffix}`;
 
   await page.goto('/equipe');
+  // Le formulaire d’embauche n’est plus posé au bas de la liste : il s’ouvre
+  // en modale, à la demande.
+  await page.getByRole('button', { name: 'Ajouter un collaborateur' }).click();
   const create = page.locator('form').filter({ hasText: 'Ajouter' });
   await create.getByLabel('Prénom').fill('Alix');
   await create.getByLabel('Nom', { exact: true }).fill(lastName);

tests/e2e/securite.spec.ts

@@ -151,6 +151,9 @@ async function createAccessibleEmployee(page: Page) {
   const email = `facteur.${suffix}@exemple.test`;
 
   await page.goto('/equipe');
+  // Le formulaire d’embauche n’est plus posé au bas de la liste : il s’ouvre
+  // en modale, à la demande.
+  await page.getByRole('button', { name: 'Ajouter un collaborateur' }).click();
   const form = page.locator('form').filter({ hasText: 'Ajouter' });
   await form.getByLabel('Prénom').fill('Noé');
   await form.getByLabel('Nom', { exact: true }).fill(lastName);