Improve compact desktop usability and action guidance

docs/AUDIT_UX_2026-10-05.md

@@ -43,14 +43,14 @@ Les efforts sont relatifs, pas des engagements de délai : faible = changement l
 | P1 | Recentrer la navigation sur le second écran | La navigation téléphone ne correspond pas à la cible d'utilisation. | Faible |
 | P1 | Harmoniser les libellés de navigation | Conserver les mêmes destinations dans la sidebar large et compacte. | Faible |
 | P1 | Fiabiliser les modales au clavier | Dans l'ajout d'outil, le focus reste derrière la fenêtre et Échap ne la ferme pas. | Moyen |
-| P1 | Donner une explication à chaque outil | 17 choix sans description ; plusieurs noms tronqués sur ordinateur. | Moyen |
-| P1 | Faire de la création la première action | L'accueil propose surtout « Voir les toolboxes » ; le bouton de création guidée est plus bas. | Faible à moyen |
+| P1 | Donner une explication à chaque outil | Mis en œuvre : les 17 choix affichent leur nom complet et une phrase d'usage. | Réalisé |
+| P1 | Faire de la création la première action | Mis en œuvre : l'action du hero crée la première toolbox, puis mène à la liste. | Réalisé |
 | P1 | Placer les toolboxes avant les réglages | En fenêtre compacte, sauvegardes et préférences précèdent la première toolbox et la repoussent sous le premier écran. | Moyen |
 | P2 | Proposer quelques modèles par usage | Une nouvelle toolbox contient surtout un mémo de bienvenue et un lien vers le catalogue. | Moyen |
 | P2 | Donner une suite à la démonstration | Le catalogue permet d'essayer les outils, sans action directe pour ajouter l'exemple à sa toolbox. | Moyen |
-| P2 | Rendre visible la création de checklist depuis un guide | L'action est portée par une petite icône de copie. | Faible à moyen |
+| P2 | Rendre visible la création de checklist depuis un guide | Mis en œuvre : « Utiliser les résultats » remplace l'icône seule sur les listes filtrables. | Réalisé |
 | P2 | Clarifier enregistrement local et sauvegarde externe | « IndexedDB », export, import et budget de stockage occupent beaucoup de place dans le parcours courant. | Moyen |
-| P2 | Alléger les barres d'actions et notifications | Beaucoup d'icônes simultanées ; durée par défaut des notifications de 120 secondes dans le code. | Moyen |
+| P2 | Alléger les barres d'actions et notifications | Partiellement réalisé : confirmations à 6 secondes, alertes Timer, Calendrier et sauvegarde persistantes. | Moyen |
 | P3 | Accueil de reprise, recherche et favoris | L'accueil ne propose pas de raccourci vers une toolbox récente ; la liste n'a pas de recherche. | Moyen à élevé |
 
 ## Recommandations détaillées
@@ -65,7 +65,7 @@ Les efforts sont relatifs, pas des engagements de délai : faible = changement l
 
 ### 2. Montrer immédiatement ce que l'on peut faire
 
-**Constat.** L'accueil définit une toolbox dans la prise en main, mais son premier bloc utilise une promesse assez générale. Le bouton « Créer ma première toolbox » est placé après les quatre étapes. À 1440 × 1000, il se situe sous la zone initialement visible.
+**État actuel.** Sans toolbox, le premier bloc affiche désormais « Créer ma première toolbox » et ouvre la création avec le tutoriel activé. Dès qu'une toolbox existe, l'action devient « Voir mes toolboxes ». Le bouton placé après les étapes reste disponible comme rappel.
 
 **Proposition de texte.** « Vos notes, listes et outils de jeu, réunis au même endroit. Créez une toolbox pour préparer votre prochaine session. Vos données restent dans ce navigateur. »
 
@@ -75,7 +75,7 @@ Réduire les compteurs « 0 toolbox / 17 outils » à une information secondaire
 
 ### 3. Rendre le choix d'un outil compréhensible
 
-**Constat vérifié.** La fenêtre d'ajout présente une grille de 17 icônes et noms. « Planificateur de tâches » et « Planificateur d'équipements » sont tous deux tronqués en « Planificateur … ». Dans une fenêtre très étroite, les outils sont empilés en une longue colonne.
+**État actuel.** La fenêtre d'ajout s'étend jusqu'à 900 px et présente les 17 icônes, les noms complets et une courte phrase d'usage. Elle affiche quatre ou cinq colonnes selon la largeur et répartit directement les outils dans les cinq sections du catalogue, sans onglets supplémentaires. Le panneau NDS gère le défilement vertical. L'ajout rapide au chevron reste inchangé dans son principe et utilise les infobulles NDS.
 
 **Proposition.** Réutiliser les cinq familles du catalogue, afficher les noms complets et une phrase d'usage. Ajouter une recherche par nom et intention, par exemple « noter », « loot », « temps ». Mettre trois choix de démarrage en évidence sans masquer les autres.
 
@@ -118,7 +118,7 @@ Ajouter recherche et favoris lorsque la collection grandit. Un tri « Dernière
 
 **Catalogue.** Les exemples interactifs constituent un bon support d'apprentissage. Ajouter « Ajouter cet outil à une toolbox » à proximité de chaque exemple, avec le choix « Vide » ou « Avec cet exemple ». Expliquer localement que les essais de la démo ne sont pas conservés dans les toolboxes.
 
-**Guides de jeu.** Remplacer ou accompagner l'icône de copie des résultats par « Créer une checklist ». Montrer le nombre d'éléments concernés et la destination. Si aucune toolbox n'est associée, proposer de la choisir ou d'en créer une dans le même parcours. La fonctionnalité existe déjà en partie : l'enjeu est de rendre son accès et ses prérequis visibles.
+**Guides de jeu.** L'action visible « Utiliser les résultats » ouvre désormais la modale de copie ou de création de checklist, tout en gardant un libellé accessible contextuel. La destination liée et l'absence de toolbox sont expliquées dans la modale. Le choix ou la création d'une toolbox dans ce même parcours reste une amélioration possible.
 
 **Panneau latéral.** Afficher le nom de la toolbox liée dans le déclencheur ou à proximité. En fenêtre compacte, la bascule « Guide / Toolbox » évite de perdre le contexte dans un panneau couvrant la page.
 
@@ -141,7 +141,7 @@ Dans la fenêtre de sauvegarde automatique, mettre d'abord l'état, le dossier e
 
 **Proposition.** Garder visibles l'ajout et les actions fréquentes ; regrouper les actions rares dans « Plus ». Ajouter un libellé aux actions essentielles dans les fenêtres compactes. Envisager un mode « Organiser » explicite pour les déplacements et changements de disposition, après test pour préserver l'efficacité des utilisateurs habitués.
 
-Réserver l'accent le plus fort à l'action principale du bloc. Rendre les bandes de mémos facultatives au démarrage. Réduire la durée des notifications de succès courantes ; conserver les alertes qui demandent une action jusqu'à leur traitement. Les 120 secondes sont un comportement établi dans le code, pas un délai mesuré pendant cet audit.
+Réserver l'accent le plus fort à l'action principale du bloc. Rendre les bandes de mémos facultatives au démarrage. Les confirmations ordinaires disparaissent désormais après 6 secondes ; les alertes Timer, Calendrier et sauvegarde restent affichées jusqu'à leur fermeture manuelle.
 
 ### 9. Corriger les interactions clavier des fenêtres
 

docs/FEATURE_CHECKLIST.md

@@ -2,6 +2,13 @@
 
 Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page jeu ou d'un format de données.
 
+## Cible d'affichage
+
+- Concevoir et valider les fonctionnalités pour une fenêtre d'ordinateur en plein écran ou en demi-écran, à partir de `768px`.
+- Ne pas ajouter de navigation, de composant, de libellé ou de parcours réservé au téléphone.
+- Sous `768px`, vérifier uniquement que le contenu reste accessible, que la sidebar demeure utilisable et qu'aucun débordement horizontal global n'est introduit.
+- Conserver les adaptations internes nécessaires aux composants étroits, notamment les formulaires, tableaux et outils, sans en faire une interface mobile distincte.
+
 ## Outil Toolbox
 
 - Ajouter ou modifier le composant dans `website/src/features/toolboxes/modules/`.
@@ -10,6 +17,7 @@ Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page
 - Dans la Librairie, vérifier les liens directs vers un outil, les changements d'ancre et le retour navigateur ; une nouvelle sélection ou une sortie de page doit annuler les défilements différés précédents.
 - Ajouter les textes nécessaires dans `website/public/data/site.json`.
 - Mettre à jour la validation de `site.json` dans `tests/helpers/data-validation.mjs`.
+- Pour chaque type du registre, fournir une description non vide dans `toolboxes.addToolDescriptions` et vérifier que la fenêtre « Ajouter un outil » affiche le nom complet et la courte phrase d'usage aux largeurs compactes validées. Vérifier sa largeur réelle jusqu'à `900px`, les cartes compactes avec icône à gauche du titre, les 4 et 5 colonnes selon la largeur, les cinq sections sans onglets, les couleurs et dimensions de `scrollbar-control`, ainsi que les infobulles de l'ajout rapide au survol comme au focus.
 - Mettre à jour la normalisation et le stockage compact dans `website/src/features/toolboxes/storage/modules/<outil>.js`, puis vérifier l'export public dans `website/src/features/toolboxes/storage/toolboxStorage.js`.
 - Mettre à jour `docs/STORAGE_SCHEMA.md`.
 - Vérifier l'import et l'export si l'outil stocke des données.
@@ -38,6 +46,7 @@ Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page
 - Pour Mémos, vérifier l'édition courte, les couleurs, la réorganisation et la bande déroulante ; vérifier aussi les liaisons Aucun / Tous / planificateur précis, les alertes de tâches proches du reset et le retour à Aucun après suppression du dernier planificateur lié.
 - Les parcours `e2e/calculator.spec.js` vérifient la validation des formules, l'édition parent/enfant avec recalcul et persistance, la suppression d'une branche active, le retour à un calcul racine, la réinitialisation du brouillon sans effacer les résultats, la copie pour checklist et la persistance du défilement. La réorganisation des racines doit conserver leurs descendants et refuser de changer le parent d'un enfant.
 - Vérifier qu'une notification ou une mise à jour sans rapport ne remplace pas un brouillon Mémos avant sa validation au blur.
+- Vérifier que les confirmations ordinaires disparaissent après 6 secondes, que les durées explicites sont respectées et que les alertes Timer, Calendrier et sauvegarde restent présentes jusqu'à leur fermeture manuelle. La pile reste limitée à cinq alertes.
 - Pour l'arbre d'objectifs, vérifier la sélection après suppression/import et le retour à Base quand le nœud sélectionné devient une étape sans onglet Contenu.
 - Vérifier le mode une colonne et deux colonnes.
 - Vérifier que l'ajout, la suppression et la réorganisation respectent les `moduleOrder.one` et `moduleOrder.two` de l'espace actif.
@@ -55,13 +64,13 @@ Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page
 - Vérifier la page `/games`.
 - Vérifier la page `/games/<gameId>`.
 - Vérifier le chargement à la première visite, la conservation des données pendant la navigation et les erreurs réseau ; sous StrictMode, les requêtes abandonnées ne doivent pas remplacer les données actuelles ni afficher d'erreur d'annulation.
-- Vérifier que le bouton texte « Afficher la toolbox » devient « Masquer la toolbox » avec le panneau latéral ouvert.
+- Sous `1440px`, vérifier la bascule « Guide / Toolbox », la conservation des deux vues après leur première activation et la restauration de leur défilement. À partir de `1440px`, vérifier que le bouton « Afficher la toolbox » devient « Masquer la toolbox » avec le panneau latéral ouvert.
 - Sans toolbox liée, vérifier la création ainsi que l'association directe d'une toolbox existante ; le sélecteur ne doit proposer que les toolboxes qui ne sont liées à aucun jeu.
 - Vérifier le breadcrumb.
 - Vérifier les textes avec retours à la ligne.
 - Pour les guides à cartes, vérifier le toggle de lien à côté du « + » dans l'en-tête de chaque checklist compatible : il affiche les commandes, masquées par défaut. Vérifier l'association exclusive, le masquage désactivé sur les autres listes et la mise à jour immédiate depuis le panneau latéral. Refermer les commandes conserve l'association. La checkbox des cartes met à jour toutes les lignes exactes correspondantes, respecte les quantités cibles et ne retourne pas les cartes.
 - Vérifier le changement de checklist, la dissociation, la restauration de session, la suppression d'un module et le changement de toolbox. La réinitialisation des filtres conserve la liaison ; une liste devenue sans correspondance reste sélectionnée avec un message.
-- Pour les résultats filtrables Aniimo, MHW et Diablo, vérifier que l'action checklist ouvre une modale rappelant que seuls les éléments visibles sont utilisés. La copie reste disponible sans toolbox liée ; la création est alors désactivée avec une indication explicite. Avec une toolbox liée, la création ajoute une nouvelle checklist dans son espace actif sans remplacer l'association guide/checklist existante.
+- Pour les résultats filtrables Aniimo, MHW et Diablo, vérifier que le bouton visible « Utiliser les résultats » conserve un libellé accessible contextuel et ouvre une modale rappelant que seuls les éléments visibles sont utilisés. Le groupe titre, compteur et action doit revenir à la ligne sans débordement dès 768 px. La copie reste disponible sans toolbox liée ; la création est alors désactivée avec une indication explicite. Avec une toolbox liée, la création ajoute une nouvelle checklist dans son espace actif sans remplacer l'association guide/checklist existante.
 - Pour Aniimo, vérifier la copie et la création des espèces ou des formes selon l'affichage, les noms français/anglais, la priorité des formes et le masquage avant regroupement. Compteurs, copie et création doivent correspondre aux résultats affichés.
 
 ## Listes de jeu
@@ -81,7 +90,9 @@ Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page
 - Vérifier les boutons icon, danger, primary et secondary.
 - Vérifier les cartes, panels et scrollbars.
 - Vérifier les états hover/focus.
-- Vérifier les fenêtres de 768, 960, 1024, 1280, 1440 et 1920 px quand le changement touche la mise en page.
+- Vérifier les fenêtres de 768, 960, 1024, 1280, 1440 et 1920 px quand le changement touche la mise en page, avec une hauteur de 720 px pour les parcours compacts.
+- Effectuer seulement un contrôle minimal sous 768 px : accès au contenu, sidebar utilisable et absence de débordement horizontal global.
+- Sur l'accueil vide, vérifier que l'action principale ouvre la création avec tutoriel ; avec au moins une toolbox, vérifier qu'elle devient « Voir mes toolboxes ». L'action « Voir les jeux » et le rappel de création en fin de prise en main restent disponibles.
 - Les tests `e2e/card-surfaces.spec.js` compilent le Sass complet et vérifient les
   styles calculés des cartes NDS, home jeux et MHW en fenêtre large/compacte : fonds,
   bordures, séparateurs dorés, hover sans redimensionnement, focus clavier NDS