ASPIC/journal/ASPIC-Journal. 19. Navigation Entre Contacts en Panneau Détail.md

19. Navigation entre contacts depuis le panneau détail, suppression des triangles d'ascenseur (27 août 2026)

Contexte. Reprise du chantier "gestion des contacts" (voir section 7, laissé en l'état le 26 août au profit de la prospection). Demande de Jean-Marc : pouvoir passer au contact suivant/précédent directement depuis le panneau de visualisation d'un contact, en respectant l'ordre de tri et le filtre actuellement appliqués sur l'écran liste — sans devoir refermer le panneau pour cliquer une autre ligne.

Fonctionnalité livrée.

• Barre de position, nouvelle bande grise tout en haut du panneau détail (au-dessus de la grille de champs), format repris à l'identique de la barre de statut de l'écran liste : Contact X/N, Tri : ..., Filtre : .... Visible en mode visualisation uniquement — masquée en édition, création et suppression (la position n'a pas de sens dans ces modes), décision actée avec Jean-Marc avant implémentation.
• Navigation clavier : PgDn → contact suivant, PgUp → contact précédent, actifs uniquement quand le panneau détail est ouvert en mode visualisation (aucun effet en édition/création/suppression, ni quand c'est le panneau de filtre qui est ouvert).
• Menu contextuel du panneau détail : deux nouveaux items, "Contact précédent" et "Contact suivant", placés avec "Revenir à la liste des contacts" (groupe navigation, distinct du groupe édition en haut du menu). Grisés (non cliquables) en début (1/N) ou fin (N/N) de liste.
• Le contact ciblé par la navigation est déterminé à partir de contactsAffiches, le tableau déjà trié/filtré côté client par l'écran liste (aucun nouvel appel API de liste nécessaire) — garantit que la navigation respecte exactement le tri/filtre affiché, sans logique dupliquée. Si le contact actuellement affiché ne s'y retrouve plus (cas limite : filtre changé entre deux ouvertures du panneau sans repasser par la liste), la barre de position se masque plutôt que d'afficher un rang faux.
• Petit correctif d'enchaînement associé : après "Valider les modifications"/"Confirmer l'ajout", le rechargement de la liste (rendreListe()) est désormais attendu (await) avant de réafficher le contact, pour que la position/navigation reflète immédiatement le tri à jour (utile en particulier si le champ trié, Nom ou Ville, vient d'être modifié).

Bug pré-existant repéré à cette occasion, non corrigé (hors périmètre de cette demande) : l'ordre de priorité du traitement de la touche Échap place la fermeture du panneau détail avant la fermeture de son propre menu contextuel — un Échap alors que ce menu contextuel est ouvert ferme donc tout le panneau au lieu de juste refermer le menu, contrairement à l'ordre documenté par ailleurs (section 9 : "menu contextuel → hamburger → filtre"). Repéré en testant la nouvelle fonctionnalité (fermeture du menu par Échap), pas provoqué par elle. À corriger si Jean-Marc le souhaite — signalé mais pas traité, pour rester strictement dans le périmètre demandé.

Suppression des triangles d'ascenseur. Demande accessoire de Jean-Marc : retirer les petits triangles (▲/▼) précédemment ajoutés au-dessus/en dessous de l'ascenseur de la liste des contacts et de celui de la sous-liste des réalisations ("cela n'ajoute rien"). Les 4 glyphes retirés, mais les cases qui les contenaient (case-ascenseur) sont conservées : elles réservent un espace de la largeur exacte de l'ascenseur réel (mesurée dynamiquement en JS), nécessaire à l'alignement des colonnes d'en-tête avec les colonnes de données — cf. le bug d'alignement colonnes/en-tête déjà rencontré et documenté en section 9.

Tests effectués. Vérification syntaxique (node --check sur le JavaScript extrait). Vérification de la structure HTML (balises équilibrées, pas d'id dupliqué). Test fonctionnel via Playwright avec API simulées (3 contacts fictifs) : navigation PgDn/PgUp en avant et en arrière, blocage correct aux bornes (1/N et N/N), état grisé du menu contextuel aux bornes, barre de position masquée et navigation neutralisée en mode édition, triangles bien absents des 4 emplacements concernés. Pas de test contre les vraies données de production (pas d'accès direct au serveur depuis cette session) — à valider par Jean-Marc comme d'habitude après déploiement.

Fichier livré : liste_contacts.html (mis à jour, nom final liste_contacts.php après renommage habituel par Jean-Marc au transfert FTP).

Corrections suite aux premiers tests de Jean-Marc (27 août 2026, même jour).

• Hauteur du panneau de visualisation. Jean-Marc a précisé sa demande initiale après un premier essai : la barre de position ne devait pas faire grandir le panneau en mode visualisation par rapport au mode édition — au prix, assumé par lui, de perdre un peu de hauteur visible sur la grille de champs + sous-liste des réalisations ("on s'en moque un peu maintenant vu qu'on a la barre de répartition"). Solution retenue : plutôt que de retrancher un delta fixe (qui aurait supposé de recalculer à la main à chaque futur changement d'un des deux panneaux), mesurerZoneRedimensionnable() mesure désormais dynamiquement l'écart réel entre la hauteur naturelle du panneau en mode visualisation et sa hauteur en mode édition (bascule temporaire et invisible des classes CSS pour lire cette dernière, via une nouvelle fonction mesurerHauteurPanneauPourMode()), et retranche cet écart du budget partagé grille+réalisations. Le budget combiné grille+réalisations étant déjà, par construction du mécanisme de redimensionnement du 25 août, indépendant du ratio choisi par l'utilisateur, cette correction garantit une égalité de hauteur totale entre les deux modes quel que soit le ratio mémorisé. Correctif d'ordonnancement associé : mettreAJourBarrePosition() (qui fixe l'état d'affichage réel de la barre) s'exécute désormais avant mesurerZoneRedimensionnable(), pour que la mesure ne soit jamais faite sur un état d'affichage obsolète de la barre.
• Bug Échap/menu contextuel corrigé. Comme signalé dans le journal plus haut : un Échap alors que le menu contextuel du panneau détail est ouvert fermait tout le panneau au lieu du seul menu. Corrigé en vérifiant l'état de ce menu contextuel avant l'état général du panneau dans le gestionnaire de touche Échap — cohérent avec le principe "referme le panneau le plus prioritaire d'abord" déjà documenté (section 9).

Tests effectués. Vérification syntaxique (node --check) et de la structure HTML (inchangées, toujours correctes). Test fonctionnel Playwright : hauteur du panneau strictement identique entre mode visualisation et mode édition (écart mesuré à 0px sur le cas de test) ; Échap avec menu contextuel ouvert referme uniquement le menu (le panneau reste ouvert) ; un second Échap referme ensuite bien le panneau ; re-test de non-régression de la navigation PgUp/PgDn (toujours correcte après le changement d'ordonnancement dans basculerModeDetail).

Fichier livré : nouvelle version de liste_contacts.html, en remplacement de celle du même jour. Correctif visuel — ligne vide au-dessus de "Nom" (27 août 2026, retour de test de Jean-Marc). Jean-Marc a signalé, à l'usage, qu'une bande blanche apparaissait entre la nouvelle barre de position et le premier champ ("Nom"), lisible comme une ligne de champ vide. Diagnostic (mesures Playwright à l'appui) : le padding-top de 16px du corps du panneau (hérité du mode édition, où il n'y a pas de barre au-dessus) s'ajoutait à la hauteur de la barre de position, créant un blanc d'environ 20px — la largeur d'une ligne de champ. Corrigé en ramenant ce padding-top à 0 spécifiquement en mode visualisation (nouvelle règle CSS #panneau-detail.mode-vue .panneau-corps{padding-top:0;}), sur le même principe que #zone-liste qui suit directement #entete-colonnes sans marge dans l'écran liste (section 9) : la barre elle-même joue déjà le rôle de séparateur visuel. "Nom" se retrouve donc directement sous la barre, espacé seulement par la marge habituelle de 4px déjà posée par .ligne-detail. Effet de bord positif : cette réduction de padding, mesurée dynamiquement comme le reste (voir mesurerZoneRedimensionnable(), plus haut), diminue d'autant l'écart à retrancher du budget grille+réalisations pour la parité de hauteur — un peu de la hauteur perdue lors du correctif précédent est donc récupérée automatiquement, sans intervention supplémentaire.

Tests effectués. Vérification syntaxique (node --check) et de la structure HTML (balises <div> équilibrées : 104/104). Test fonctionnel Playwright avec capture d'écran : bande blanche disparue, "Nom" directement sous la barre de position. Non-régression vérifiée : hauteur du panneau strictement identique entre mode visualisation et mode édition (435px des deux côtés sur le cas de test), navigation PgDn/PgUp toujours correcte, comportement Échap (menu puis panneau) toujours correct.

Fichier livré : nouvelle version de liste_contacts.html, en remplacement de celle du même jour.