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>

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);