ObsiGate/docs/features/xlsx-context-menu.md

#155 — Ergonomie tableur : menu contextuel, sélection type Excel

Item de roadmap : #155 — Ergonomie tableur (menu contextuel + sélection) Origine : retours utilisateur après #154 (refonte UI/UX tableur) Statut : ✅ livré — 2026-09-29 Effort estimé : 2-4 jours (réalisé en 1 lot)

---

1. Demande

1. Menu contextuel au clic droit (et appui long sur mobile/tactile) dans la grille, sur une cellule, un numéro de ligne ou un en-tête de colonne.
2. Comportement du curseur / de la sélection comme Excel : le curseur en forme de croix au-dessus des cellules, sélection d'une plage (glisser, Maj+clic, Maj+flèches), clic sur un en-tête de ligne/colonne pour sélectionner toute la ligne/colonne.
3. (BUG-094, traité séparément) une feuille vide/nouvelle doit rester éditable et permettre d'ajouter lignes/colonnes.

2. Conception

Menu contextuel

• Positionné au pointeur (souris) ou au point de contact (tactile), borné au viewport.
• Thème de l'application (classes .xlsx-context-menu, réutilise .btn-action).
• Contenu selon la cible et le mode :
  • Insérer : ligne au-dessus / en dessous, colonne à gauche / à droite (sur la plage sélectionnée, via PUT …/xlsx/structure, count = taille de la plage).
  • Supprimer : ligne(s) / colonne(s) — confirmation modale (destructif).
  • Trier : A→Z / Z→A sur la colonne de gauche de la sélection.
  • Effacer le contenu : vide les cellules sélectionnées (modification locale, non sauvegardée tant que l'utilisateur n'enregistre pas).
• Masqué pour les formats en lecture seule (.xls/.ods) ; sans les actions de structure pour un .csv.
• Appui long (tactile) : minuteur ~500 ms annulé au déplacement / relâchement.

Sélection type Excel

• Clic : cellule active + sélection simple ; la barre de formule (zone Nom) affiche la plage (A1 ou A1:B3).
• Glisser : sélection rectangulaire (mousedown → mouseover sur une autre cellule → mouseup) ; le texte de la cellule n'est plus sélectionné pendant le glisser.
• Maj+clic et Maj+flèches : étendent la sélection depuis l'ancre.
• En-têtes : clic sur un numéro de ligne / lettre de colonne sélectionne la ligne/colonne entière. Le tri n'est plus déclenché par simple clic sur l'en-tête (il passe au menu contextuel), conformément au comportement Excel.
• Curseur : cursor: cell (croix) sur les cellules, pointer sur les en-têtes.

3. Fichiers

Couche	Fichier	Rôle
Menu	frontend/js/xlsx/context-menu.js (nouveau)	Menu contextuel générique thémé (build + position + dismiss)
Sélection + câblage	frontend/js/viewer.js	État de sélection, drag, Maj, en-têtes, ouverture du menu, actions
Styles	frontend/style.css	.xlsx-selected, .xlsx-context-menu, curseurs
i18n	frontend/locales/{fr,en}.json	Libellés du menu
Tests	tests/frontend/xlsx-viewer.test.mjs	Sélection, menu contextuel, tri via menu

4. Critères d'acceptation

• Clic droit sur une cellule ouvre un menu thémé aux coordonnées du pointeur ; Échap ou clic ailleurs le ferme.
• Insérer/supprimer ligne/colonne via le menu envoie la bonne action PUT …/xlsx/structure (avec count pour une plage) puis re-rend.
• Glisser de A1 vers B2 surligne A1:B2 et la zone Nom affiche A1:B2.
• Maj+clic étend la sélection ; cliquer un en-tête sélectionne la ligne/colonne entière.
• Aucune régression des tests #154 (édition, save, undo/redo, dashboard).

5. Historique

Date	Événement
2026-09-29	Ouverture #155 (menu contextuel + sélection type Excel) suite aux retours utilisateur
2026-09-29	Livré : menu contextuel thémé (frontend/js/xlsx/context-menu.js) ouvert au clic droit et à l'appui long, actions résultat de PUT …/xlsx/structure (insérer/supprimer ligne & colonne avec count), tri et effacement ; sélection type Excel (glisser, Maj+clic, Maj+flèches, en-têtes ligne/colonne, curseur croix, zone Nom affichant la plage)